Big restructure

2026-03-14 12:43:26 +01:00 · 2026-03-14 12:43:26 +01:00 · 4ee57ab459
commit 4ee57ab459
parent 1d0ebeb2b7
69 changed files with 124 additions and 124 deletions
--- a/apps/desktop/.gitignore
+++ b/apps/desktop/.gitignore
@ -0,0 +1 @@
+build
--- a/apps/desktop/electrobun.config.ts
+++ b/apps/desktop/electrobun.config.ts
@ -0,0 +1,37 @@
+import type { ElectrobunConfig } from "electrobun";
+
+import { version } from "@tensamin/shared/package.json";
+
+export default {
+  app: {
+    name: "tensamin",
+    identifier: "client.tensamin.net",
+    version: version,
+  },
+  build: {
+    views: {
+      mainview: {
+        entrypoint: "src/mainview/index.ts",
+      },
+    },
+    copy: {
+      "../web/dist/": "views/mainview/",
+    },
+    mac: {
+      defaultRenderer: "cef",
+      bundleCEF: true,
+    },
+    linux: {
+      defaultRenderer: "cef",
+      bundleCEF: true,
+      chromiumFlags: {
+        "enable-features": "UseOzonePlatform",
+        "ozone-platform": "wayland",
+      },
+    },
+    win: {
+      defaultRenderer: "cef",
+      bundleCEF: true,
+    },
+  },
+} satisfies ElectrobunConfig;
--- a/apps/desktop/llms.txt
+++ b/apps/desktop/llms.txt
@ -0,0 +1,24 @@
+# Electrobun Project
+
+This is an Electrobun desktop application.
+
+IMPORTANT: Electrobun is NOT Electron. Do not use Electron APIs or patterns.
+
+## Documentation
+
+Full API reference: https://blackboard.sh/electrobun/llms.txt
+Getting started: https://blackboard.sh/electrobun/docs/
+
+## Quick Reference
+
+Import patterns:
+- Main process (Bun): `import { BrowserWindow } from "electrobun/bun"`
+- Browser context: `import { Electroview } from "electrobun/view"`
+
+Use `views://` URLs to load bundled assets (e.g., `url: "views://mainview/index.html"`).
+Views must be configured in `electrobun.config.ts` to be built and copied into the bundle.
+
+## About
+
+Electrobun is built by Blackboard (https://blackboard.sh), an innovation lab building
+tools and funding teams that define the next generation of technology.
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@ -0,0 +1,19 @@
+{
+  "name": "electrobun-hello-world",
+  "version": "1.0.0",
+  "description": "A simple Electrobun app showcasing core features",
+  "scripts": {
+    "format": "bunx prettier --write .",
+    "lint": "echo desktop lint skipped",
+    "build": "echo desktop build skipped",
+    "start": "electrobun dev",
+    "dev": "electrobun dev --watch"
+  },
+  "dependencies": {
+    "electrobun": "1.15.1",
+    "@tensamin/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  }
+}
--- a/apps/desktop/shell.nix
+++ b/apps/desktop/shell.nix
@ -0,0 +1,41 @@
+{pkgs ? import <nixpkgs> {}}: let
+  libs = with pkgs; [
+    nspr
+    nss
+    libxcb
+    libxkbcommon
+    wayland
+    libdecor
+    dbus
+    atk
+    glib
+    gtk3
+    cups
+    libx11
+    libxcomposite
+    libxdamage
+    libxext
+    libxfixes
+    libxrandr
+    libgbm
+    expat
+    cairo
+    pango
+    alsa-lib
+
+    webkitgtk_4_1
+    libsoup_3
+    libayatana-appindicator
+    gdk-pixbuf
+  ];
+in
+  pkgs.mkShell {
+    buildInputs = [pkgs.bun] ++ libs;
+
+    shellHook = ''
+      export LD_LIBRARY_PATH=${pkgs.lib.makeLibraryPath libs}:$LD_LIBRARY_PATH
+      export GDK_BACKEND=wayland
+      export OZONE_PLATFORM=wayland
+      export XDG_SESSION_TYPE=wayland
+    '';
+  }
--- a/apps/desktop/src/bun/index.ts
+++ b/apps/desktop/src/bun/index.ts
@ -0,0 +1,18 @@
+import { BrowserWindow } from "electrobun/bun";
+
+// Create the main application window
+const mainWindow = new BrowserWindow({
+  title: "Hello Electrobun!",
+  url: "views://mainview/index.html",
+  renderer: "cef",
+  frame: {
+    width: 800,
+    height: 800,
+    x: 200,
+    y: 200,
+  },
+});
+
+mainWindow.url = "views://mainview/index.html";
+
+console.log("Hello Electrobun app started!");
--- a/apps/desktop/src/mainview/index.css
+++ b/apps/desktop/src/mainview/index.css
@ -0,0 +1,126 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, sans-serif;
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #333;
+  min-height: 100vh;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+h1 {
+  color: white;
+  font-size: 3rem;
+  text-align: center;
+  margin-bottom: 8px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.subtitle {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 1.25rem;
+  text-align: center;
+  margin-top: 0;
+  margin-bottom: 40px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.welcome-section {
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  margin: 30px 0;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  line-height: 1.6;
+}
+
+h2 {
+  color: #2563eb;
+  margin-top: 30px;
+  margin-bottom: 15px;
+}
+
+ul {
+  margin: 20px 0;
+  padding-left: 20px;
+}
+
+li {
+  margin: 8px 0;
+}
+
+.links {
+  display: flex;
+  gap: 15px;
+  margin: 25px 0;
+  flex-wrap: wrap;
+}
+
+.doc-link {
+  display: inline-block;
+  background: #2563eb;
+  color: white;
+  text-decoration: none;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
+}
+
+.doc-link:hover {
+  background: #1d4ed8;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
+}
+
+code {
+  background: #f1f5f9;
+  color: #475569;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+  font-size: 0.9em;
+}
+
+.footer {
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+  margin-top: 40px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+}
+
+.footer p {
+  margin: 8px 0;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .welcome-section {
+    background: #1f2937;
+    color: #f3f4f6;
+  }
+
+  h2 {
+    color: #60a5fa;
+  }
+
+  code {
+    background: #374151;
+    color: #d1d5db;
+  }
+}
--- a/apps/desktop/src/mainview/index.html
+++ b/apps/desktop/src/mainview/index.html
@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hello Electrobun!</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Hello Electrobun! 🎉</h1>
+      <p class="subtitle">A fast, cross-platform desktop app framework</p>
+
+      <div class="welcome-section">
+        <p>
+          Welcome to your first Electrobun app! This framework combines the
+          power of Bun with native desktop capabilities.
+        </p>
+
+        <h2>What is Electrobun?</h2>
+        <ul>
+          <li>
+            <strong>Fast:</strong> Built on Bun's lightning-fast JavaScript
+            runtime
+          </li>
+          <li>
+            <strong>Native:</strong> Access to system APIs like menus, trays,
+            and file dialogs
+          </li>
+          <li>
+            <strong>Cross-platform:</strong> Works on macOS, Windows, and Linux
+          </li>
+          <li>
+            <strong>Web-based UI:</strong> Use familiar HTML, CSS, and
+            JavaScript for your interface
+          </li>
+        </ul>
+
+        <h2>Get Started</h2>
+        <p>
+          Ready to build something amazing? Check out the documentation and
+          examples:
+        </p>
+
+        <div class="links">
+          <a href="https://electrobun.dev/" class="doc-link"> 📚 Electrobun </a>
+          <a href="https://github.com/blackboardsh/electrobun" class="doc-link">
+            🐙 GitHub Repository
+          </a>
+          <a href="https://electrobun.dev/docs/apis/bun/" class="doc-link">
+            💡 Api Docs
+          </a>
+        </div>
+      </div>
+
+      <div class="footer">
+        <p>
+          Edit <code>src/bun/index.ts</code> and <code>src/mainview/</code> to
+          customize your app
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
--- a/apps/desktop/src/mainview/index.ts
+++ b/apps/desktop/src/mainview/index.ts
@ -0,0 +1 @@
+console.log("Hello Electrobun view loaded!");
--- a/apps/desktop/tsconfig.json
+++ b/apps/desktop/tsconfig.json
@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noPropertyAccessFromIndexSignature": true
+  },
+  "include": ["src/**/*", "./electrobun.config.ts"],
+  "exclude": ["node_modules", "dist", "build", "../../package/dist"]
+}
--- a/apps/web/.gitignore
+++ b/apps/web/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/apps/web/index.html
+++ b/apps/web/index.html
@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tensamin</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -0,0 +1,50 @@
+{
+  "name": "@tensamin/web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "format": "bunx prettier --write .",
+    "lint": "eslint src",
+    "dev": "vite --port 3000",
+    "build": "tsc -b && vite build",
+    "preview": "cd dist && nix-shell -p python3 --run 'python3 -m http.server 3000' && cd .."
+  },
+  "dependencies": {
+    "@tensamin/chat": "workspace:*",
+    "@tensamin/crypto": "workspace:*",
+    "@tensamin/ttp": "workspace:*",
+    "@tensamin/storage": "workspace:*",
+    "@tensamin/user": "workspace:*",
+    "@tensamin/shared": "workspace:*",
+    "@tensamin/ui": "workspace:*",
+    "@noble/curves": "^2.0.1",
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/react-router": "^1.0.0",
+    "@tanstack/react-virtual": "^3.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "comlink": "^4.4.2",
+    "lucide-react": "^0.564.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "sonner": "^1.0.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwind-scrollbar-hide": "^4.0.0",
+    "tailwindcss": "^4.2.1",
+    "tw-animate-css": "^1.4.0",
+    "vite-tsconfig-paths": "^6.1.1",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.0.3",
+    "globals": "^17.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^7.3.1"
+  }
+}
--- a/apps/web/public/favicon.ico
+++ b/apps/web/public/favicon.ico
--- a/apps/web/src/components/modals/basic.tsx
+++ b/apps/web/src/components/modals/basic.tsx
@ -0,0 +1,20 @@
+import type { User } from "@tensamin/user/context";
+import Avatar from "@tensamin/ui/avatar";
+import { reduceDisplay } from "./utils";
+import { Card, CardHeader } from "@tensamin/ui/card";
+
+export default function Basic(props: { user: User }) {
+  return (
+    <Card className="animate-in fade-in duration-300 rounded-2xl">
+      <CardHeader className="flex flex-row gap-2.5 items-center justify-start p-2">
+        <Avatar
+          img={props.user.avatar}
+          fallback={reduceDisplay(props.user.display)}
+        />
+        <div className="flex flex-col gap-1 w-full items-start justify-center text-[15px]">
+          <p>{props.user.display}</p>
+        </div>
+      </CardHeader>
+    </Card>
+  );
+}
--- a/apps/web/src/components/modals/utils.ts
+++ b/apps/web/src/components/modals/utils.ts
@ -0,0 +1,8 @@
+export function reduceDisplay(display: string) {
+  const words = display.split(" ");
+  if (words.length === 1) {
+    return display.slice(0, 2).toUpperCase();
+  } else {
+    return words[0].charAt(0).toUpperCase() + words[1].charAt(0).toUpperCase();
+  }
+}
--- a/apps/web/src/components/navbar.tsx
+++ b/apps/web/src/components/navbar.tsx
@ -0,0 +1,45 @@
+import { Button } from "@tensamin/ui/button";
+import { House } from "lucide-react";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import * as React from "react";
+import { useUser, type User } from "@tensamin/user/context";
+
+export default function Navbar() {
+  const navigate = useNavigate();
+  const { get } = useUser();
+  const search = useRouterState({ select: (state) => state.location.search });
+
+  const [user, setUser] = React.useState<User | null>(null);
+
+  const currentId = React.useMemo(
+    () => Number((search as Record<string, unknown>).id ?? Number.NaN),
+    [search],
+  );
+
+  React.useEffect(() => {
+    if (Number.isNaN(currentId)) {
+      setUser(null);
+      return;
+    }
+
+    get(currentId)
+      .then(setUser)
+      .catch(() => setUser(null));
+  }, [currentId, get]);
+
+  return (
+    <div className="w-full h-13.5 flex items-center justify-center">
+      <Button
+        onClick={() => {
+          void navigate({ to: "/" });
+        }}
+        className="w-9 h-9 aspect-square p-0 rounded-lg"
+        variant="outline"
+      >
+        <House size={18} />
+      </Button>
+      <p className="font-medium pl-3 text-md">{user?.display}</p>
+      <div className="w-full" />
+    </div>
+  );
+}
--- a/apps/web/src/components/screens/login/form.tsx
+++ b/apps/web/src/components/screens/login/form.tsx
@ -0,0 +1,138 @@
+import { Button } from "@tensamin/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@tensamin/ui/card";
+import { Input } from "@tensamin/ui/input";
+import { Label } from "@tensamin/ui/label";
+import { useStorage } from "@tensamin/storage/context";
+import { log, toast } from "@tensamin/shared/log";
+import { useNavigate } from "@tanstack/react-router";
+import { Upload } from "lucide-react";
+import * as React from "react";
+import { z } from "zod";
+
+const fetchedUser = z.object({
+  id: z.uuidv4(),
+  type: z.string(),
+  data: z.object({
+    iota_id: z.number(),
+    username: z.string(),
+    sub_level: z.number(),
+    public_key: z.base64(),
+    user_id: z.number(),
+    sub_end: z.number(),
+  }),
+});
+
+const formSchema = z.object({
+  username: z.string().min(1).max(15),
+  private_key: z.string().min(1).max(92),
+});
+
+export default function Form() {
+  const uploadRef = React.useRef<HTMLInputElement | null>(null);
+  const { save } = useStorage();
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex gap-5">
+      <Card className="w-75 h-80">
+        <CardHeader>
+          <CardTitle>Use .tu file</CardTitle>
+        </CardHeader>
+        <CardContent className="h-full flex items-center justify-center">
+          <div
+            onClick={() => uploadRef.current?.click()}
+            className="cursor-pointer w-60 aspect-square mb-17 bg-input/13 hover:bg-input/30 transition-all duration-300 ease-in-out border-dotted border-input/75 border-3 flex items-center justify-center rounded-lg"
+          >
+            <Upload className="text-input/75" size={34} />
+          </div>
+          <input
+            onChange={async (e) => {
+              try {
+                const file = e.currentTarget.files?.[0];
+                if (file) {
+                  const raw = await file.text();
+                  if (raw.length !== 92) throw new Error("Invalid file");
+                  if (!raw.includes("::")) throw new Error("Invalid file");
+                  const [userIdString, privateKey] = raw.split("::");
+                  const userId = Number(userIdString);
+                  if (!userId || !privateKey) throw new Error("Invalid file");
+
+                  save("user_id", userId);
+                  save("private_key", privateKey);
+
+                  void navigate({ to: "/" });
+                } else {
+                  throw new Error("No file selected");
+                }
+              } catch (err) {
+                log(0, "Login", "red", err);
+                toast("error", "Failed to load file");
+              }
+            }}
+            type="file"
+            ref={uploadRef}
+            className="hidden"
+          />
+        </CardContent>
+      </Card>
+      <Card className="w-75 h-auto">
+        <CardHeader>
+          <CardTitle>Use credentials</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form
+            className="flex flex-col gap-5 h-full"
+            onSubmit={async (e) => {
+              e.preventDefault();
+              const formData = new FormData(e.currentTarget);
+              const rawData = Object.fromEntries(formData);
+              const inputParse = formSchema.safeParse(rawData);
+
+              if (!inputParse.success) {
+                toast("error", "Please enter valid data");
+                return;
+              }
+
+              const response = await fetch(
+                "https://omega.tensamin.net/api/get/id/" +
+                  inputParse.data.username,
+              );
+
+              response
+                .json()
+                .then((data) => {
+                  const parse = fetchedUser.safeParse(data);
+
+                  if (parse.success) {
+                    const user = parse.data;
+
+                    save("user_id", user.data.user_id);
+                    save("private_key", inputParse.data.private_key);
+
+                    void navigate({ to: "/" });
+                  } else {
+                    log(0, "Login", "red", "Invalid response from server");
+                    toast("error", "Invalid response from server");
+                  }
+                })
+                .catch((err) => {
+                  log(0, "Login", "red", err);
+                  toast("error", "Failed to fetch user data");
+                });
+            }}
+          >
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="username">Username</Label>
+              <Input type="text" id="username" name="username" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="private_key">Private Key</Label>
+              <Input type="password" id="private_key" name="private_key" />
+            </div>
+            <Button type="submit">Login</Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
--- a/apps/web/src/components/sidebar.tsx
+++ b/apps/web/src/components/sidebar.tsx
@ -0,0 +1,28 @@
+import { useStorage } from "@tensamin/storage/context";
+import Wrapper from "@tensamin/user/wrapper";
+import * as React from "react";
+import Basic from "./modals/basic";
+import List from "@/features/conversation/list/body";
+
+export default function Sidebar() {
+  const [userId, setUserId] = React.useState(0);
+  const { load } = useStorage();
+
+  React.useEffect(() => {
+    load("user_id").then(setUserId);
+  }, [load]);
+
+  return (
+    <div className="w-75 h-full flex flex-col gap-3 p-2">
+      {userId !== 0 && (
+        <Wrapper
+          userId={userId}
+          component={(user) => <Basic user={user} />}
+        />
+      )}
+      <div className="h-full">
+        <List />
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/features/conversation/context.tsx
+++ b/apps/web/src/features/conversation/context.tsx
@ -0,0 +1,75 @@
+import * as React from "react";
+import { useSocket } from "@tensamin/ttp/context";
+
+import { toast } from "@tensamin/shared/log";
+import type {
+  Community,
+  Conversation,
+} from "@tensamin/shared/features/conversation/schema";
+
+interface contextValue {
+  conversations: Conversation[];
+  communities: Community[];
+}
+
+const ConversationContext = React.createContext<contextValue | undefined>(
+  undefined,
+);
+
+export default function ConversationProvider(props: {
+  children: React.ReactNode;
+}) {
+  const [conversations, setConversations] = React.useState<Conversation[]>([]);
+  const [communities, setCommunities] = React.useState<Community[]>([]);
+
+  const { send } = useSocket();
+
+  React.useEffect(() => {
+    let active = true;
+
+    send("get_chats", {})
+      .then((data) => {
+        if (active) {
+          setConversations(data.data.user_ids);
+        }
+      })
+      .catch(() => {
+        toast("error", "Failed to load conversations");
+      });
+
+    send("get_communities", {})
+      .then((data) => {
+        if (active) {
+          setCommunities(data.data.communities);
+        }
+      })
+      .catch(() => {
+        toast("error", "Failed to load communities");
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [send]);
+
+  const value = React.useMemo(
+    () => ({ conversations, communities }),
+    [communities, conversations],
+  );
+
+  return (
+    <ConversationContext.Provider value={value}>
+      {props.children}
+    </ConversationContext.Provider>
+  );
+}
+
+export function useConversation(): contextValue {
+  const context = React.useContext(ConversationContext);
+  if (!context) {
+    throw new Error(
+      "useConversation must be used within a ConversationProvider",
+    );
+  }
+  return context;
+}
--- a/apps/web/src/features/conversation/list/body.tsx
+++ b/apps/web/src/features/conversation/list/body.tsx
@ -0,0 +1,64 @@
+import * as React from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useConversation } from "../context";
+
+import Switch from "./switch";
+import ConversationModal from "../modal/conversation";
+import CommunityModal from "../modal/community";
+
+export default function List() {
+  const [category, setCategory] = React.useState<
+    "conversations" | "communities"
+  >("conversations");
+
+  const { conversations, communities } = useConversation();
+
+  const scrollRef = React.useRef<HTMLDivElement | null>(null);
+
+  const virtualizer = useVirtualizer({
+    count: category === "conversations" ? conversations.length : communities.length,
+    estimateSize: () => 80,
+    getScrollElement: () => scrollRef.current,
+  });
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Switch category={category} setCategory={setCategory} />
+      <div ref={scrollRef} id="conversation-list" className="overflow-y-auto flex-1">
+        <div
+          className="relative w-full flex flex-col gap-2"
+          style={{
+            height: `${virtualizer.getTotalSize()}px`,
+          }}
+        >
+          {virtualizer.getVirtualItems().map((virtualItem) => {
+            const itemKey = `${category}-${virtualItem.index}`;
+
+            return (
+              <div
+                key={itemKey}
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${virtualItem.start}px)`,
+                }}
+              >
+                {category === "conversations" ? (
+                  conversations[virtualItem.index] ? (
+                    <ConversationModal
+                      userId={conversations[virtualItem.index].user_id}
+                    />
+                  ) : null
+                ) : communities[virtualItem.index] ? (
+                  <CommunityModal community={communities[virtualItem.index]} />
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/features/conversation/list/switch.tsx
+++ b/apps/web/src/features/conversation/list/switch.tsx
@ -0,0 +1,77 @@
+import * as React from "react";
+
+type Category = "conversations" | "communities";
+
+export default function Switch(props: {
+  category: Category;
+  setCategory: (category: Category) => void;
+}) {
+  const conversationsRef = React.useRef<HTMLButtonElement | null>(null);
+  const communitiesRef = React.useRef<HTMLButtonElement | null>(null);
+
+  const [indicator, setIndicator] = React.useState({ left: 0, width: 0 });
+
+  const updateIndicator = React.useCallback(() => {
+    const active =
+      props.category === "conversations"
+        ? conversationsRef.current
+        : communitiesRef.current;
+    if (!active) return;
+
+    setIndicator({
+      left: active.offsetLeft,
+      width: active.offsetWidth,
+    });
+  }, [props.category]);
+
+  React.useLayoutEffect(() => {
+    updateIndicator();
+  }, [updateIndicator]);
+
+  function toggleCategory() {
+    props.setCategory(
+      props.category === "conversations" ? "communities" : "conversations",
+    );
+  }
+
+  return (
+    <div
+      role="tablist"
+      className="border relative inline-flex rounded-full bg-card p-1 select-none"
+    >
+      <div
+        className="absolute top-1 bottom-1 rounded-full bg-input shadow-sm transition-all duration-300 ease-in-out"
+        style={{
+          left: `${indicator.left}px`,
+          width: `${indicator.width}px`,
+        }}
+      />
+      <button
+        ref={conversationsRef}
+        role="tab"
+        aria-selected={props.category === "conversations"}
+        className={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
+          props.category === "conversations"
+            ? "text-foreground"
+            : "text-ring/50 hover:text-ring"
+        }`}
+        onClick={toggleCategory}
+      >
+        Conversations
+      </button>
+      <button
+        ref={communitiesRef}
+        role="tab"
+        aria-selected={props.category === "communities"}
+        className={`relative z-10 cursor-pointer px-2.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-300 ${
+          props.category === "communities"
+            ? "text-foreground"
+            : "text-ring/50 hover:text-ring"
+        }`}
+        onClick={toggleCategory}
+      >
+        Communities
+      </button>
+    </div>
+  );
+}
--- a/apps/web/src/features/conversation/modal/community.tsx
+++ b/apps/web/src/features/conversation/modal/community.tsx
@ -0,0 +1,5 @@
+import type { Community } from "@tensamin/shared/features/conversation/schema";
+
+export default function CommunityModal(props: { community: Community }) {
+  return <div>{props.community.community_title}</div>;
+}
--- a/apps/web/src/features/conversation/modal/conversation.tsx
+++ b/apps/web/src/features/conversation/modal/conversation.tsx
@ -0,0 +1,37 @@
+import Basic from "@/components/modals/basic";
+import Wrapper from "@tensamin/user/wrapper";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@tensamin/ui/context-menu";
+import { useNavigate } from "@tanstack/react-router";
+
+export default function ConversationModal(props: { userId: number }) {
+  const navigate = useNavigate();
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <div
+          className="select-none cursor-pointer"
+          onClick={() => {
+            void navigate({ to: "/chat", search: { id: props.userId } });
+          }}
+        >
+          <Wrapper
+            userId={props.userId}
+            component={(user) => <Basic user={user} />}
+          />
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>Test</ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
--- a/apps/web/src/features/legal/screen.tsx
+++ b/apps/web/src/features/legal/screen.tsx
@ -0,0 +1,264 @@
+import * as React from "react";
+import { useStorage } from "@tensamin/storage/context";
+import { Button } from "@tensamin/ui/button";
+import {
+  Checkbox,
+  CheckboxLabel,
+  CheckboxControl,
+} from "@tensamin/ui/checkbox";
+import { z } from "zod";
+
+import ErrorScreen from "@tensamin/ui/screens/error";
+
+import { legalDocsSchema } from "@tensamin/shared/features/legal/schema";
+import { log } from "@tensamin/shared/log";
+import Link from "@tensamin/ui/link";
+
+export default function Screen(props: { children: React.ReactNode }) {
+  const { load, save } = useStorage();
+
+  const [error, setError] = React.useState("");
+  const [errorDescription, setErrorDescription] = React.useState("");
+
+  const [remoteDocs, setRemoteDocs] = React.useState<
+    z.infer<typeof legalDocsSchema> | undefined
+  >(undefined);
+
+  const [loading, setLoading] = React.useState(true);
+
+  const [PPandToSDone, setPPandToSDone] = React.useState(false);
+  const [acceptedPP, acceptPP] = React.useState(false);
+  const [acceptedTOS, acceptTOS] = React.useState(false);
+
+  const [doneWithAnalytics, setDoneWithAnalytics] = React.useState(false);
+  const [crashReports, setCrashReports] = React.useState(false);
+  const [usageData, setUsageData] = React.useState(false);
+
+  React.useEffect(() => {
+    let active = true;
+
+    void load("user_id").then(async (id) => {
+      if (!active) {
+        return;
+      }
+
+      if (id === 0) {
+        setPPandToSDone(true);
+        setDoneWithAnalytics(true);
+        setLoading(false);
+        return;
+      }
+
+      const current = await fetch("https://legal.tensamin.net/api/current")
+        .then((res) => res.json())
+        .catch((err) => {
+          if (!active) {
+            return undefined;
+          }
+
+          setError("Failed to load legal documents");
+          setErrorDescription(
+            "An error occurred while fetching the legal documents from the server. Please try again later.",
+          );
+          log(0, "Legal", "red", "Failed to fetch legal documents", err);
+          return undefined;
+        });
+
+      if (!active || current === undefined) {
+        return;
+      }
+
+      const safeCurrent = legalDocsSchema.safeParse(current);
+      if (!safeCurrent.success) {
+        setError("Failed to load legal documents");
+        setErrorDescription(
+          "The legal documents data received from the server is invalid. Please try again later.",
+        );
+        log(0, "Legal", "red", "Invalid legal documents data", safeCurrent.error);
+        return;
+      }
+
+      setRemoteDocs(safeCurrent.data);
+
+      const localDocs = await load("legal_docs");
+
+      const [
+        loadedPPAndTOS,
+        loadedAcceptedPP,
+        loadedAcceptedTOS,
+        loadedAnalyticsDone,
+        loadedCrashReports,
+        loadedUsageData,
+      ] = await Promise.all([
+        load("ppandtos_done"),
+        load("accepted_privacy_policy"),
+        load("accepted_terms_of_service"),
+        load("analytics_done"),
+        load("analytics_crash_reports"),
+        load("analytics_usage_data"),
+      ]);
+
+      if (!active) {
+        return;
+      }
+
+      setPPandToSDone(loadedPPAndTOS);
+      acceptPP(loadedAcceptedPP);
+      acceptTOS(loadedAcceptedTOS);
+      setDoneWithAnalytics(loadedAnalyticsDone);
+      setCrashReports(loadedCrashReports);
+      setUsageData(loadedUsageData);
+
+      if (localDocs.pp.hash !== safeCurrent.data.pp.hash) {
+        acceptPP(false);
+        setPPandToSDone(false);
+      }
+
+      if (localDocs.tos.hash !== safeCurrent.data.tos.hash) {
+        acceptTOS(false);
+        setPPandToSDone(false);
+      }
+
+      setLoading(false);
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [load]);
+
+  if (error !== "" && errorDescription !== "") {
+    return <ErrorScreen error={error} description={errorDescription} />;
+  }
+
+  if (loading) {
+    return null;
+  }
+
+  if (PPandToSDone && doneWithAnalytics) {
+    return <>{props.children}</>;
+  }
+
+  return (
+    <div className="w-full h-full flex items-center justify-center">
+      <div className="h-full flex flex-col gap-15 p-10 md:p-40 w-full lg:w-2/3">
+        {!PPandToSDone ? (
+          <>
+            <h1 className="text-3xl md:text-4xl font-bold">
+              Privacy Policy & ToS
+              <p className="text-muted-foreground text-[20px] font-normal pt-3">
+                {remoteDocs?.pp.version} / {remoteDocs?.tos.version}
+              </p>
+            </h1>
+            <div className="w-full h-full flex flex-col items-center justify-center gap-5">
+              <div className="justify-start items-start flex flex-col gap-2">
+                <BigCheckbox
+                  checked={acceptedPP}
+                  onChange={acceptPP}
+                  label="I agree to the Privacy Policy"
+                />
+                <BigCheckbox
+                  checked={acceptedTOS}
+                  onChange={acceptTOS}
+                  label="I agree to the Terms of Service"
+                />
+                <div className="w-full border-t-2" />
+                <Link
+                  label="Privacy Policy"
+                  link={`https://legal.tensamin.net/pp/${remoteDocs?.pp.version}`}
+                />
+                <Link
+                  label="Terms of Service"
+                  link={`https://legal.tensamin.net/tos/${remoteDocs?.tos.version}`}
+                />
+              </div>
+            </div>
+            <ContinueButton
+              disabled={!acceptedPP || !acceptedTOS}
+              onClick={() => {
+                const currentDocs = remoteDocs;
+                if (!currentDocs) {
+                  return;
+                }
+
+                void (async () => {
+                  await save("accepted_privacy_policy", true);
+                  await save("accepted_terms_of_service", true);
+                  await save("ppandtos_done", true);
+                  await save("legal_docs", currentDocs);
+                  setPPandToSDone(true);
+                })();
+              }}
+            />
+          </>
+        ) : (
+          <>
+            <h1 className="text-3xl md:text-4xl font-bold">Analytics</h1>
+            <div className="w-full h-full flex justify-center items-center">
+              <div className="justify-start flex flex-col gap-2">
+                <BigCheckbox
+                  checked={crashReports}
+                  onChange={setCrashReports}
+                  label="Send anonymous crash reports"
+                />
+                <BigCheckbox
+                  checked={usageData}
+                  onChange={setUsageData}
+                  label="Send anonymous usage data"
+                />
+              </div>
+            </div>
+            <ContinueButton
+              onClick={() => {
+                const currentCrashReports = crashReports;
+                const currentUsageData = usageData;
+
+                void save("analytics_crash_reports", currentCrashReports).then(() => {
+                  setCrashReports(currentCrashReports);
+                });
+                void save("analytics_usage_data", currentUsageData).then(() => {
+                  setUsageData(currentUsageData);
+                });
+                void save("analytics_done", true).then(() => {
+                  setDoneWithAnalytics(true);
+                });
+              }}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ContinueButton(props: { onClick: () => void; disabled?: boolean }) {
+  return (
+    <div className="w-full flex justify-end">
+      <Button
+        size="lg"
+        className="text-lg w-full md:w-auto"
+        onClick={props.onClick}
+        disabled={props.disabled}
+      >
+        Continue
+      </Button>
+    </div>
+  );
+}
+
+export function BigCheckbox(props: {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <Checkbox
+      checked={props.checked}
+      onChange={props.onChange}
+      className="flex items-center space-x-2"
+    >
+      <CheckboxControl className="size-5.5 rounded-md flex items-center justify-center" />
+      <CheckboxLabel className="text-lg">{props.label}</CheckboxLabel>
+    </Checkbox>
+  );
+}
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@ -0,0 +1,152 @@
+@import "tailwindcss";
+@import "tailwind-scrollbar-hide/v4";
+@import "tw-animate-css";
+
+@source "./**/*.{ts,tsx}";
+@source "../../../packages/ui/src/**/*.{ts,tsx}";
+@source "../../../packages/**/src/**/*.{ts,tsx}";
+@source "../../../packages/chat/src/**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  --animate-first: moveVertical 30s ease infinite;
+  --animate-second: moveInCircle 20s reverse infinite;
+  --animate-third: moveInCircle 40s linear infinite;
+  --animate-fourth: moveHorizontal 40s ease infinite;
+  --animate-fifth: moveInCircle 20s ease infinite;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: #f7f7f7;
+  --foreground: #1f1f1f;
+  --card: #ffffff;
+  --card-foreground: #1f1f1f;
+  --popover: #ffffff;
+  --popover-foreground: #1f1f1f;
+  --primary: #babbf1;
+  --primary-foreground: #181a22;
+  --secondary: #efefef;
+  --secondary-foreground: #1f1f1f;
+  --muted: #ececec;
+  --muted-foreground: #666666;
+  --accent: var(--border);
+  --accent-foreground: #1f1f1f;
+  --destructive: #d8d8d8;
+  --destructive-foreground: #1f1f1f;
+  --border: #dadada;
+  --input: #e7e7e7;
+  --ring: #babbf1;
+  --chart-1: #babbf1;
+  --chart-2: #bcbcbc;
+  --chart-3: #969696;
+  --chart-4: #717171;
+  --chart-5: #4f4f4f;
+  --sidebar: #f1f1f1;
+  --sidebar-foreground: #1f1f1f;
+  --sidebar-primary: #babbf1;
+  --sidebar-primary-foreground: #181a22;
+  --sidebar-accent: #e7e7e7;
+  --sidebar-accent-foreground: #1f1f1f;
+  --sidebar-border: #dadada;
+  --sidebar-ring: #babbf1;
+}
+
+.dark {
+  --background: #141414;
+  --foreground: #f5f5f5;
+  --card: #1d1d1d;
+  --card-foreground: #f5f5f5;
+  --popover: #1d1d1d;
+  --popover-foreground: #f5f5f5;
+  --primary: #babbf1;
+  --primary-foreground: #11131a;
+  --secondary: #232323;
+  --secondary-foreground: #f5f5f5;
+  --muted: #262626;
+  --muted-foreground: #c7c7c7;
+  --accent: var(--border);
+  --accent-foreground: #f5f5f5;
+  --destructive: #2c2c2c;
+  --destructive-foreground: #f5f5f5;
+  --border: #343434;
+  --input: #2a2a2a;
+  --ring: #babbf1;
+  --chart-1: #babbf1;
+  --chart-2: #bcbcbc;
+  --chart-3: #969696;
+  --chart-4: #707070;
+  --chart-5: #525252;
+  --sidebar: #171717;
+  --sidebar-foreground: #f5f5f5;
+  --sidebar-primary: #babbf1;
+  --sidebar-primary-foreground: #11131a;
+  --sidebar-accent: #262626;
+  --sidebar-accent-foreground: #f5f5f5;
+  --sidebar-border: #343434;
+  --sidebar-ring: #babbf1;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: "Inter", system-ui, sans-serif;
+  }
+  div {
+    @apply text-foreground;
+  }
+  ::selection {
+    background: var(--color-primary, var(--primary));
+    color: var(--color-primary-foreground, var(--primary-foreground));
+  }
+  ::-moz-selection {
+    background: var(--color-primary, var(--primary));
+    color: var(--color-primary-foreground, var(--primary-foreground));
+  }
+}
--- a/apps/web/src/index.tsx
+++ b/apps/web/src/index.tsx
@ -0,0 +1,132 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import {
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from "@tanstack/react-router";
+import "./index.css";
+
+import NotFound from "@/routes/404";
+
+import RootLayout from "./routes/layout";
+import AppLayout from "./routes/app/layout";
+
+import Home from "@/routes/app/home";
+import ChatScreen from "@tensamin/chat/screen";
+import ChatContext from "@tensamin/chat/context";
+import Login from "@/routes/screens/login";
+import Signup from "@/routes/screens/signup";
+
+const wrapper = document.getElementById("root");
+
+if (!wrapper) {
+  throw new Error("Missing root element");
+}
+
+// @ts-expect-error Declare global function
+window.setLogLevelToMax = () => {
+  localStorage.setItem("log_level", String(1000));
+  location.reload();
+};
+
+function RootShell() {
+  React.useEffect(() => {
+    try {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+      document.documentElement.classList.toggle("dark", mediaQuery.matches);
+
+      const handleChange = (event: MediaQueryListEvent) => {
+        document.documentElement.classList.toggle("dark", event.matches);
+      };
+
+      mediaQuery.addEventListener("change", handleChange);
+
+      return () => {
+        mediaQuery.removeEventListener("change", handleChange);
+      };
+    } catch {
+      return;
+    }
+  }, []);
+
+  return (
+    <div className="w-screen h-screen overflow-hidden">
+      <RootLayout>
+        <Outlet />
+      </RootLayout>
+    </div>
+  );
+}
+
+function AppShell() {
+  return (
+    <AppLayout>
+      <Outlet />
+    </AppLayout>
+  );
+}
+
+function Chat() {
+  return (
+    <ChatContext>
+      <ChatScreen />
+    </ChatContext>
+  );
+}
+
+const rootRoute = createRootRoute({
+  component: RootShell,
+});
+
+const appRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  id: "app",
+  component: AppShell,
+});
+
+const homeRoute = createRoute({
+  getParentRoute: () => appRoute,
+  path: "/",
+  component: Home,
+});
+
+const chatRoute = createRoute({
+  getParentRoute: () => appRoute,
+  path: "chat",
+  component: Chat,
+});
+
+const loginRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "login",
+  component: Login,
+});
+
+const signupRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "signup",
+  component: Signup,
+});
+
+const routeTree = rootRoute.addChildren([
+  appRoute.addChildren([homeRoute, chatRoute]),
+  loginRoute,
+  signupRoute,
+]);
+
+const router = createRouter({
+  routeTree,
+  defaultNotFoundComponent: NotFound,
+});
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+createRoot(wrapper).render(<RouterProvider router={router} />);
--- a/apps/web/src/routes/404.tsx
+++ b/apps/web/src/routes/404.tsx
@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <div className="w-full h-full flex items-center justify-center text-4xl font-bold">
+      Page not found (404)
+    </div>
+  );
+}
--- a/apps/web/src/routes/app/home.tsx
+++ b/apps/web/src/routes/app/home.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Home</div>;
+}
--- a/apps/web/src/routes/app/layout.tsx
+++ b/apps/web/src/routes/app/layout.tsx
@ -0,0 +1,27 @@
+import Socket from "@tensamin/ttp/context";
+import User from "@tensamin/user/context";
+import type { ReactNode } from "react";
+
+import Sidebar from "@/components/sidebar";
+import Conversation from "@/features/conversation/context";
+import Navbar from "@/components/navbar";
+
+export default function Layout(props: { children: ReactNode }) {
+  return (
+    <Socket>
+      <User>
+        <Conversation>
+          <div className="w-full h-full flex bg-sidebar">
+            <Sidebar />
+            <div className="w-full h-full flex flex-col">
+              <Navbar />
+              <div className="bg-background h-full w-full rounded-tl-3xl border-t border-l">
+                {props.children}
+              </div>
+            </div>
+          </div>
+        </Conversation>
+      </User>
+    </Socket>
+  );
+}
--- a/apps/web/src/routes/layout.tsx
+++ b/apps/web/src/routes/layout.tsx
@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+import Storage from "@tensamin/storage/context";
+import Crypto from "@tensamin/crypto/context";
+
+import LegalWrapper from "@/features/legal/screen";
+
+import { Toaster } from "@tensamin/ui/sonner";
+
+export default function Layout(props: { children: ReactNode }) {
+  return (
+    <>
+      <Toaster />
+      <Storage>
+        <LegalWrapper>
+          <Crypto>{props.children}</Crypto>
+        </LegalWrapper>
+      </Storage>
+    </>
+  );
+}
--- a/apps/web/src/routes/screens/login.tsx
+++ b/apps/web/src/routes/screens/login.tsx
@ -0,0 +1,16 @@
+import Form from "@/components/screens/login/form";
+import { Button } from "@tensamin/ui/button";
+import { Link } from "@tanstack/react-router";
+
+export default function Page() {
+  return (
+    <div className="w-full h-full flex flex-col gap-10 items-center justify-center">
+      <Form />
+      <div className="flex">
+        <Link to="/signup">
+          <Button variant="outline">Sign up</Button>
+        </Link>
+      </div>
+    </div>
+  );
+}
--- a/apps/web/src/routes/screens/signup.tsx
+++ b/apps/web/src/routes/screens/signup.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Signup Page</div>;
+}
--- a/apps/web/tsconfig.app.json
+++ b/apps/web/tsconfig.app.json
@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/apps/web/tsconfig.node.json
+++ b/apps/web/tsconfig.node.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths(), tailwindcss()],
+  worker: {
+    format: "es",
+  },
+});
				`@ -0,0 +1 @@`
				`console.log("Hello Electrobun view loaded!");`