feat(sync)[ui]: add dark mode and initla placeholder nodes

Author: Keshav-writes-code

apps/app/src/components/general/app_settings/sync/devices_lister/index.svelte

@@ -1,29 +1,22 @@
 <script lang="ts">
-  import { PLATFORM_TYPE_MAP } from '@/lib/states';
   import { invoke } from '@tauri-apps/api/core';
   import { listen } from '@tauri-apps/api/event';
   import { onMount } from 'svelte';
-
-  type DiscoveredDevice = {
-    name: String;
-    ip: String;
-    host_name_2: String;
-    os: keyof typeof PLATFORM_TYPE_MAP;
-  };
-
-  let devices = $state<Record<string, DiscoveredDevice>>({});
+  import { devices, type DiscoveredDevice } from '../states.svelte';
+  import { PLATFORM_TYPE_MAP } from '@/lib/states';
 
   onMount(async () => {
     await invoke('join_scan_local_network');
     listen(
       'device_found',
-      (data) => (devices = data.payload as Record<string, DiscoveredDevice>)
+      (data) =>
+        (devices.data = data.payload as Record<string, DiscoveredDevice>)
     );
   });
 </script>
 
 <ul class="list bg-base-100 rounded-box shadow-md">
-  {#each Object.values(devices) as device}
+  {#each Object.values(devices.data) as device}
     <li class="list-row">
       <div>
         <div

apps/app/src/components/general/app_settings/sync/states.svelte.ts

@@ -0,0 +1,12 @@
+import { PLATFORM_TYPE_MAP } from '@/lib/states';
+
+export type DiscoveredDevice = {
+  name: String;
+  ip: String;
+  host_name_2: String;
+  os: keyof typeof PLATFORM_TYPE_MAP;
+};
+
+export let devices = $state<{ data: Record<string, DiscoveredDevice> }>({
+  data: {},
+});

apps/app/src/components/general/app_settings/sync/workspace_linker/index.svelte

@@ -1,16 +1,34 @@
 <script lang="ts">
-  import { SvelteFlow, Background } from '@xyflow/svelte';
+  import { SvelteFlow, Background, Position } from '@xyflow/svelte';
   import '@xyflow/svelte/dist/style.css';
+  // let nodes = $state.raw([
+  //   { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
+  //   { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
+  // ]);
   let nodes = $state.raw([
-    { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
-    { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
+    ...Array.from({ length: 4 }, (_, i) => ({
+      id: i.toString(),
+      position: { x: i * 400, y: 0 },
+      data: { label: `${i}th Device` },
+      style:
+        'background-color: oklch(.293 .066 243.157/20%); width: 230px; height: 300px;',
+      type: 'group',
+      class: 'light',
+    })),
+    ...Array.from({ length: 12 }, (_, i) => ({
+      id: i.toString() + 'node',
+      position: { x: 40 + (i % 4) * 400, y: 30 + Math.floor(i / 4) * 50 },
+      data: { label: `Workspace ${i}` },
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+    })),
   ]);
 
   let edges = $state.raw([{ id: 'e1-2', source: '1', target: '2' }]);
 </script>
 
-<div class="w-full h-100">
-  <SvelteFlow bind:nodes bind:edges fitView>
+<div class="w-full h-100 rounded-box overflow-hidden">
+  <SvelteFlow bind:nodes bind:edges fitView colorMode="dark">
     <Background />
   </SvelteFlow>
 </div>