feat(depot): initial work for depot

src/app.tsx

@@ -81,6 +81,13 @@ export default function App() {
                 return { Component: RelayScreen };
               },
             },
+            {
+              path: 'depot',
+              async lazy() {
+                const { DepotScreen } = await import('@app/depot');
+                return { Component: DepotScreen };
+              },
+            },
             {
               path: 'new',
               element: <ComposerLayout />,

src/app/depot/index.tsx

@@ -0,0 +1,29 @@
+import { configDir, resolveResource } from '@tauri-apps/api/path';
+import { Command } from '@tauri-apps/plugin-shell';
+
+export function DepotScreen() {
+  const launch = async () => {
+    const configPath = await resolveResource('resources/config.toml');
+    const dataPath = await configDir();
+
+    const command = Command.sidecar('bin/depot', ['-c', configPath, '-d', dataPath]);
+    const process = await command.spawn();
+
+    process.pid;
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div className="flex flex-col items-center gap-4 py-10">
+        <h1 className="text-center text-lg font-semibold">Depot</h1>
+        <button
+          type="button"
+          onClick={() => launch()}
+          className="h-9 w-max rounded-lg bg-blue-500 px-2 text-white"
+        >
+          Launch
+        </button>
+      </div>
+    </div>
+  );
+}

src/shared/navigation.tsx

@@ -78,6 +78,27 @@ export function Navigation() {
             </>
           )}
         </NavLink>
+        <NavLink
+          to="/depot"
+          preventScrollReset={true}
+          className="inline-flex flex-col items-center justify-center"
+        >
+          {({ isActive }) => (
+            <>
+              <div
+                className={twMerge(
+                  'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
+                  isActive
+                    ? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
+                    : 'text-black/50 dark:text-neutral-400'
+                )}
+              >
+                <RelayIcon className="h-6 w-6" />
+              </div>
+              <div className="text-sm font-medium text-black dark:text-white">Depot</div>
+            </>
+          )}
+        </NavLink>
       </div>
       <div className="flex shrink-0 flex-col gap-3 p-1">
         <Link