starting to launch file-server from layout

src/shared/core/file-server.ts

@@ -70,6 +70,7 @@ app.post("/upload/", headerValidator, async (ctx) => {
 });
 
 export default function startFileServer(port: number) {
+  console.log({ message: `Starting file server on ${port}` });
   return serve({
     fetch: app.fetch,
     port: port,

src/shared/routers/_app.ts

@@ -11,6 +11,9 @@ export const appRouter = router({
   }),
   node: nodeRouter,
   files: filesRouter,
+  platform:publicProcedure.query(()=>{
+    return process.platform
+  })
 });
 
 export type AppRouter = typeof appRouter;

src/shared/routers/node.ts

@@ -1,4 +1,8 @@
 import { publicProcedure, router } from "@src/trpc";
+import startServer from "@shared/core/file-server";
+import {globalState$} from "@shared/state";
 
 // TODO
-export const nodeRouter = router({});
+export const nodeRouter = router({
+    startServer:publicProcedure.mutation(async()=>startServer(globalState$.port.get())),
+});

src/shared/storage.ts

@@ -1,5 +1,5 @@
 import { createStore } from "tinybase/cjs/with-schemas";
-import { createIndexedDbPersister } from "tinybase/cjs/with-schemas/persisters/persister-indexed-db";
+import { createIndexedDbPersister } from "tinybase/cjs/persisters/persister-indexed-db";
 
 export const store = createStore().setTablesSchema({
   sent: {

src/web/components/device-info.tsx

@@ -4,7 +4,7 @@ import t from "@src/shared/config";
 import { randomNumber } from "@src/shared/utils";
 import { Heart, Key, UserRound, Wifi, WifiOff } from "lucide-react";
 import { useCallback, useMemo } from "react";
-import { fileTransferState$, globalState$ } from "../../shared/state";
+import { globalState$ } from "../../shared/state";
 
 type Props = {
   node: any;
@@ -97,7 +97,7 @@ export default function DeviceInfo({ node }: Props) {
               )}
             </Flex>
           </Flex>
-          {fileTransferState$.files.get().length > 0 && (
+          {[].length > 0 && (
             <Button
               onClick={send}
               variant="soft"

src/web/components/settings.tsx

@@ -131,7 +131,7 @@ function Files() {
       <Flex className="w-full" direction="column" gap="2">
         <Flex className="w-full" align="center" justify="between">
           <Flex direction="column" align="start">
-            <Text className="font-bold text-[12px]">Destination directory</Text>
+            <Text className="text-[12px]">Destination directory</Text>
             <Text className="text-zinc-400 text-[11.5px]">
               Change what folder recieved files are saved to
             </Text>
@@ -177,7 +177,7 @@ function Advanced() {
       <Flex direction="column" align="start" gap="5">
         <Flex align="center" className="w-full" justify="between">
           <Flex direction="column" align="start">
-            <Text className="text-[12px] font-bold">Server Port</Text>
+            <Text className="text-[12px]">Server Port</Text>
             <Text className="text-[11px] text-zinc-400">
               Port for apollo server. Make sure destination device port is the
               same.
@@ -188,7 +188,7 @@ function Advanced() {
               {globalState$.deviceType.get() === "desktop" ? (
                 <Laptop size={9} />
               ) : (
-                <Phone />
+                <Phone size={9}/>
               )}
             </TextField.Slot>
             <TextField.Input
@@ -213,32 +213,30 @@ function Transfers() {
     <Flex direction="column" align="start" gap="5" className="w-full h-full">
       <Flex className="w-full" align="center" justify="between">
         <Flex direction="column" align="start">
-          <Text className="font-bold text-[12px]">Transfer history</Text>
+          <Text className="text-[12px]">Transfer history</Text>
           <Text className="text-zinc-400 text-[11.5px]">
             View transfers incoming and outgoing on this device
           </Text>
         </Flex>
         <SwitchButton
           size="1"
           onClick={() =>
-            globalState$.transferHistory.set(
-              !globalState$.transferHistory.get(),
-            )
+           console.log("todo")
           }
-          checked={globalState$.transferHistory.get()}
+          checked={false}
         />
       </Flex>
       <Flex className="w-full" align="center" justify="between">
         <Flex direction="column" align="start">
-          <Text className="font-bold text-[12px]">Save transfer history</Text>
+          <Text className="text-[12px]">Save transfer history</Text>
           <Text className="text-zinc-400 text-[11.5px]">
             Transfer history save duration
           </Text>
         </Flex>
         <Select.Root size="1" defaultValue="3D">
           <Select.Trigger
             radius="large"
-            disabled={!globalState$.transferHistory.get()}
+            disabled={false}
             className="bg-light-1 dark:bg-dark-8 cursor-pointer"
           />
           <Select.Content
@@ -247,35 +245,35 @@ function Transfers() {
             className="flex flex-col items-start bg-light-1 dark:bg-dark-8"
           >
             <Select.Item
-              disabled={!globalState$.transferHistory.get()}
+              disabled={false}
               className="cursor-pointer"
               value="none"
             >
               <Text>None</Text>
             </Select.Item>
             <Select.Item
-              disabled={!globalState$.transferHistory.get()}
+              disabled={false}
               className="cursor-pointer"
               value="1D"
             >
               <Text>1 Days</Text>
             </Select.Item>
             <Select.Item
-              disabled={!globalState$.transferHistory.get()}
+              disabled={false}
               className="cursor-pointer"
               value="2D"
             >
               <Text>2 Days</Text>
             </Select.Item>
             <Select.Item
-              disabled={!globalState$.transferHistory.get()}
+              disabled={false}
               className="cursor-pointer"
               value="3D"
             >
               <Text>3 Days</Text>
             </Select.Item>
             <Select.Item
-              disabled={!globalState$.transferHistory.get()}
+              disabled={false}
               className="cursor-pointer"
               value="4D"
             >

src/web/components/this-device.info.tsx

@@ -3,37 +3,42 @@ import { Box, Flex, Popover, Text } from "@radix-ui/themes";
 import { globalState$ } from "@shared/state";
 import defaultImage from "@src/assets/images/user_default.jpg";
 import { generateRandomName } from "@src/shared/utils";
-import { Folder, Key, Wifi, WifiOff } from "lucide-react";
+import { Folder, Key, Laptop, Phone, Wifi, WifiOff } from "lucide-react";
 import { useEffect } from "react";
 import { v4 } from "uuid";
-import type { DeviceType } from "@shared/types";
+import t from "@shared/config";
 
 export default function ThisDeviceInfo() {
   const deviceName = globalState$.deviceName.get();
   const deviceID = globalState$.applicationId.get();
 
+  console.log({ deviceName, deviceID });
+
   const onlineStatus = computed(() => navigator.onLine);
+  const { data: deviceType } = t.platform.useQuery();
+  const type =
+    deviceType === "linux" || deviceType === "win32" || deviceType === "darwin"
+      ? "desktop"
+      : "mobile";
+  const isDesktop = computed(
+    () => globalState$.deviceType.get() === "desktop",
+  ).get();
+
+  console.log({ deviceType, type });
 
   useEffect(() => {
     if (globalState$.applicationId.get() === null) {
       globalState$.applicationId.set(v4());
     }
 
     if (globalState$.deviceName.get() === null) {
-      globalState$.applicationId.set(generateRandomName());
+      globalState$.deviceName.set(generateRandomName());
     }
 
     if (globalState$.deviceType.get() === null) {
-      const type: DeviceType =
-        process.platform === "linux" ||
-        process.platform === "win32" ||
-        process.platform === "darwin"
-          ? "desktop"
-          : "mobile";
-
       globalState$.deviceType.set(type);
     }
-  }, []);
+  }, [type]);
 
   return (
     <Popover.Root>
@@ -52,7 +57,20 @@ export default function ThisDeviceInfo() {
             <Text className="text-[9px] font-light text-zinc-400">
               This Device
             </Text>
-            <Text className="text-[12px] font-bold">{deviceName}</Text>
+            <Flex align="center" justify="between" width="100%">
+              <Text className="text-[12px] font-bold">{deviceName}</Text>
+              <span className="text-zinc-400">
+                {isDesktop ? (
+                  <>
+                    <Laptop size={9} />
+                  </>
+                ) : (
+                  <>
+                    <Phone size={9} />
+                  </>
+                )}
+              </span>
+            </Flex>
           </Flex>
           <Flex direction="column" align="start" className="space-y-1">
             <Flex width="100%" align="center" justify="between" gap="2">