Initial commit

2026-03-10 20:44:25 +01:00 · 2026-03-10 20:44:25 +01:00 · 2f5e10140c
commit 2f5e10140c
133 changed files with 10429 additions and 0 deletions
--- a/packages/web/.gitignore
+++ b/packages/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/packages/web/index.html
+++ b/packages/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/packages/web/package.json
+++ b/packages/web/package.json
@ -0,0 +1,56 @@
+{
+  "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/core-crypto": "workspace:*",
+    "@tensamin/ttp": "git+https://github.com/Tensamin/TTP.git",
+    "@tensamin/core-storage": "workspace:*",
+    "@tensamin/core-user": "workspace:*",
+    "@tensamin/shared": "workspace:*",
+    "@tensamin/ui": "workspace:*",
+    "@ark-ui/solid": "^5.34.1",
+    "@corvu/drawer": "^0.2.4",
+    "@corvu/otp-field": "^0.1.4",
+    "@corvu/resizable": "^0.2.5",
+    "@kobalte/core": "^0.13.11",
+    "@noble/curves": "^2.0.1",
+    "@solidjs/router": "^0.15.4",
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/solid-virtual": "^3.13.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk-solid": "^1.1.2",
+    "comlink": "^4.4.2",
+    "embla-carousel-solid": "^8.6.0",
+    "lucide-solid": "^0.564.0",
+    "solid-js": "^1.9.11",
+    "solid-sonner": "^0.2.8",
+    "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": {
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.0.3",
+    "eslint-plugin-solid": "^0.14.5",
+    "globals": "^17.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^7.3.1",
+    "vite-plugin-lucide-preprocess": "^1.4.8",
+    "vite-plugin-solid": "^2.11.10"
+  }
+}
--- a/packages/web/public/favicon.ico
+++ b/packages/web/public/favicon.ico
--- a/packages/web/src/components/modals/basic.tsx
+++ b/packages/web/src/components/modals/basic.tsx
@ -0,0 +1,20 @@
+import type { User } from "@tensamin/core-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 class="animate-in fade-in duration-300 rounded-2xl">
+      <CardHeader class="flex flex-row gap-2.5 items-center justify-start p-2">
+        <Avatar
+          img={props.user.avatar}
+          fallback={reduceDisplay(props.user.display)}
+        />
+        <div class="flex flex-col gap-1 w-full items-start justify-center text-[15px]">
+          <p>{props.user.display}</p>
+        </div>
+      </CardHeader>
+    </Card>
+  );
+}
--- a/packages/web/src/components/modals/utils.ts
+++ b/packages/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/packages/web/src/components/navbar.tsx
+++ b/packages/web/src/components/navbar.tsx
@ -0,0 +1,42 @@
+import { Button } from "@tensamin/ui/button";
+import { House } from "lucide-solid";
+import { useNavigate, useSearchParams } from "@solidjs/router";
+import { createEffect, createSignal } from "solid-js";
+import { useUser, type User } from "@tensamin/core-user/context";
+
+export default function Navbar() {
+  const navigate = useNavigate();
+  const { get } = useUser();
+
+  const [user, setUser] = createSignal<User | null>(null);
+
+  createEffect(() => {
+    const [searchParams] = useSearchParams();
+    const id = Number(searchParams.id);
+
+    if (isNaN(id)) {
+      setUser(null);
+      return;
+    }
+
+    get(id)
+      .then(setUser)
+      .catch(() => setUser(null));
+  });
+
+  return (
+    <div class="w-full h-13.5 flex items-center justify-center">
+      <Button
+        onClick={() => {
+          navigate("/");
+        }}
+        class="w-9 h-9 aspect-square p-0 rounded-lg"
+        variant="outline"
+      >
+        <House size={18} />
+      </Button>
+      <p class="font-medium pl-3 text-md">{user()?.display}</p>
+      <div class="w-full" />
+    </div>
+  );
+}
--- a/packages/web/src/components/screens/login/form.tsx
+++ b/packages/web/src/components/screens/login/form.tsx
@ -0,0 +1,140 @@
+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/core-storage/context";
+import { log, toast } from "@tensamin/shared/log";
+import { useNavigate } from "@solidjs/router";
+import { Upload } from "lucide-solid";
+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() {
+  let uploadRef: HTMLInputElement | undefined = undefined;
+  const setUploadRef = (el: HTMLInputElement) => {
+    uploadRef = el;
+  };
+  const { save } = useStorage();
+  const navigate = useNavigate();
+
+  return (
+    <div class="flex gap-5">
+      <Card class="w-75 h-80">
+        <CardHeader>
+          <CardTitle>Use .tu file</CardTitle>
+        </CardHeader>
+        <CardContent class="h-full flex items-center justify-center">
+          <div
+            onClick={() => uploadRef?.click()}
+            class="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 class="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);
+
+                  navigate("/");
+                } else {
+                  throw new Error("No file selected");
+                }
+              } catch (err) {
+                log(0, "Login", "red", err);
+                toast("error", "Failed to load file");
+              }
+            }}
+            type="file"
+            ref={setUploadRef}
+            class="hidden"
+          />
+        </CardContent>
+      </Card>
+      <Card class="w-75 h-auto">
+        <CardHeader>
+          <CardTitle>Use credentials</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form
+            class="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);
+
+                    navigate("/");
+                  } 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 class="flex flex-col gap-2">
+              <Label for="username">Username</Label>
+              <Input type="text" id="username" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <Label for="private_key">Private Key</Label>
+              <Input type="password" id="private_key" />
+            </div>
+            <Button type="submit">Login</Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
--- a/packages/web/src/components/sidebar.tsx
+++ b/packages/web/src/components/sidebar.tsx
@ -0,0 +1,28 @@
+import { useStorage } from "@tensamin/core-storage/context";
+import Wrapper from "@tensamin/core-user/wrapper";
+import { createEffect, createSignal } from "solid-js";
+import Basic from "./modals/basic";
+import List from "@/features/conversation/list/body";
+
+export default function Sidebar() {
+  const [userId, setUserId] = createSignal(0);
+  const { load } = useStorage();
+
+  createEffect(() => {
+    load("user_id").then(setUserId);
+  });
+
+  return (
+    <div class="w-75 h-full flex flex-col gap-3 p-2">
+      {userId() !== 0 && (
+        <Wrapper
+          userId={userId()}
+          component={(user) => <Basic user={user} />}
+        />
+      )}
+      <div class="h-full">
+        <List />
+      </div>
+    </div>
+  );
+}
--- a/packages/web/src/features/conversation/context.tsx
+++ b/packages/web/src/features/conversation/context.tsx
@ -0,0 +1,61 @@
+import {
+  createContext,
+  createEffect,
+  useContext,
+  type ParentProps,
+} from "solid-js";
+import { createStore } from "solid-js/store";
+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 = createContext<contextValue>();
+
+export default function ConversationProvider(props: ParentProps) {
+  const [conversations, setConversations] = createStore<Conversation[]>([]);
+  const [communities, setCommunities] = createStore<Community[]>([]);
+
+  const { send } = useSocket();
+
+  createEffect(() => {
+    send("get_chats", {})
+      .then((data) => {
+        setConversations(data.data.user_ids);
+      })
+      .catch(() => {
+        toast("error", "Failed to load conversations");
+      });
+    send("get_communities", {})
+      .then((data) => {
+        setCommunities(data.data.communities);
+      })
+      .catch(() => {
+        toast("error", "Failed to load communities");
+      });
+  });
+
+  return (
+    <ConversationContext.Provider value={{ conversations, communities }}>
+      {props.children}
+    </ConversationContext.Provider>
+  );
+}
+
+export function useConversation(): contextValue {
+  const context = useContext(ConversationContext);
+  if (!context) {
+    throw new Error(
+      "useConversation must be used within a ConversationProvider",
+    );
+  }
+  return context;
+}
--- a/packages/web/src/features/conversation/list/body.tsx
+++ b/packages/web/src/features/conversation/list/body.tsx
@ -0,0 +1,65 @@
+import { createSignal, For, Show } from "solid-js";
+import { useConversation } from "../context";
+import { createVirtualizer } from "@tanstack/solid-virtual";
+
+import Switch from "./switch";
+import ConversationModal from "../modal/conversation";
+import CommunityModal from "../modal/community";
+
+export default function List() {
+  const [category, setCategory] = createSignal<"conversations" | "communities">(
+    "conversations",
+  );
+
+  const { conversations, communities } = useConversation();
+
+  // eslint-disable-next-line no-unassigned-vars
+  let scrollRef!: HTMLDivElement;
+
+  const virtualizer = createVirtualizer({
+    get count() {
+      return category() === "conversations"
+        ? conversations.length
+        : communities.length;
+    },
+    estimateSize: () => 80,
+    getScrollElement: () => scrollRef,
+  });
+
+  return (
+    <div class="flex flex-col gap-3">
+      <Switch category={category()} setCategory={setCategory} />
+      <div
+        ref={scrollRef}
+        id="conversation-list"
+        class="overflow-y-auto flex-1"
+      >
+        <div
+          class="relative w-full flex flex-col gap-2"
+          style={{
+            height: `${virtualizer.getTotalSize()}px`,
+          }}
+        >
+          <For each={virtualizer.getVirtualItems()}>
+            {(virtualItem) => {
+              return (
+                <Show
+                  when={category() === "conversations"}
+                  fallback={
+                    <CommunityModal
+                      community={communities[virtualItem.index]}
+                    />
+                  }
+                >
+                  <ConversationModal
+                    userId={conversations[virtualItem.index].user_id}
+                  />
+                </Show>
+              );
+            }}
+          </For>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/packages/web/src/features/conversation/list/switch.tsx
+++ b/packages/web/src/features/conversation/list/switch.tsx
@ -0,0 +1,74 @@
+import { createEffect, createSignal, onMount } from "solid-js";
+
+type Category = "conversations" | "communities";
+
+export default function Switch(props: {
+  category: Category;
+  setCategory: (category: Category) => void;
+}) {
+  let conversationsRef: HTMLButtonElement | undefined;
+  let communitiesRef: HTMLButtonElement | undefined;
+
+  const [indicator, setIndicator] = createSignal({ left: 0, width: 0 });
+
+  function updateIndicator() {
+    const active =
+      props.category === "conversations" ? conversationsRef : communitiesRef;
+    if (!active) return;
+
+    setIndicator({
+      left: active.offsetLeft,
+      width: active.offsetWidth,
+    });
+  }
+
+  onMount(updateIndicator);
+  createEffect(updateIndicator);
+
+  function toggleCategory() {
+    props.setCategory(
+      props.category === "conversations" ? "communities" : "conversations",
+    );
+  }
+
+  return (
+    <div
+      role="tablist"
+      class="border relative inline-flex rounded-full bg-card p-1 select-none"
+    >
+      <div
+        class="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={(el) => (conversationsRef = el)}
+        role="tab"
+        aria-selected={props.category === "conversations"}
+        class={`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={(el) => (communitiesRef = el)}
+        role="tab"
+        aria-selected={props.category === "communities"}
+        class={`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/packages/web/src/features/conversation/modal/community.tsx
+++ b/packages/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/packages/web/src/features/conversation/modal/conversation.tsx
+++ b/packages/web/src/features/conversation/modal/conversation.tsx
@ -0,0 +1,37 @@
+import Basic from "@/components/modals/basic";
+import Wrapper from "@tensamin/core-user/wrapper";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@tensamin/ui/context-menu";
+import { useNavigate } from "@solidjs/router";
+
+export default function ConversationModal(props: { userId: number }) {
+  const navigate = useNavigate();
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <div
+          class="select-none cursor-pointer"
+          onClick={() => {
+            navigate("/chat?id=" + props.userId);
+          }}
+        >
+          <Wrapper
+            userId={props.userId}
+            component={(user) => <Basic user={user} />}
+          />
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>Test</ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
--- a/packages/web/src/features/legal/screen.tsx
+++ b/packages/web/src/features/legal/screen.tsx
@ -0,0 +1,239 @@
+import { useStorage } from "@tensamin/core-storage/context";
+import { Button } from "@tensamin/ui/button";
+import {
+  Checkbox,
+  CheckboxLabel,
+  CheckboxControl,
+} from "@tensamin/ui/checkbox";
+import { createEffect, createSignal, type JSX, Show } from "solid-js";
+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: JSX.Element }) {
+  const { load, save } = useStorage();
+
+  const [error, setError] = createSignal("");
+  const [errorDescription, setErrorDescription] = createSignal("");
+
+  const [remoteDocs, setRemoteDocs] =
+    createSignal<z.infer<typeof legalDocsSchema>>();
+
+  const [loading, setLoading] = createSignal(true);
+
+  createEffect(() => {
+    load("user_id").then(async (id) => {
+      // For non-logged in users
+      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) => {
+          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);
+        });
+
+      const safeCurrent = legalDocsSchema.safeParse(current);
+      setRemoteDocs(safeCurrent.data);
+
+      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;
+      }
+
+      const localDocs = await load("legal_docs");
+
+      await Promise.all([
+        load("ppandtos_done").then(setPPandToSDone),
+        load("accepted_privacy_policy").then(acceptPP),
+        load("accepted_terms_of_service").then(acceptTOS),
+        load("analytics_done").then(setDoneWithAnalytics),
+        load("analytics_crash_reports").then(setCrashReports),
+        load("analytics_usage_data").then(setUsageData),
+      ]);
+
+      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);
+    });
+  });
+
+  const [PPandToSDone, setPPandToSDone] = createSignal(false);
+  const [acceptedPP, acceptPP] = createSignal(false);
+  const [acceptedTOS, acceptTOS] = createSignal(false);
+
+  const [doneWithAnalytics, setDoneWithAnalytics] = createSignal(false);
+  const [crashReports, setCrashReports] = createSignal(false);
+  const [usageData, setUsageData] = createSignal(false);
+
+  return (
+    <Show
+      when={error() !== "" && errorDescription() !== ""}
+      fallback={
+        <Show when={!loading()} fallback={null}>
+          <Show
+            when={!PPandToSDone() || !doneWithAnalytics()}
+            fallback={props.children}
+          >
+            <div class="w-full h-full flex items-center justify-center">
+              <div class="h-full flex flex-col gap-15 p-10 md:p-40 w-full lg:w-2/3">
+                {!PPandToSDone() ? (
+                  <>
+                    <h1 class="text-3xl md:text-4xl font-bold">
+                      Privacy Policy & ToS
+                      <p class="text-muted-foreground text-[20px] font-normal pt-3">
+                        {remoteDocs()?.pp.version} / {remoteDocs()?.tos.version}
+                      </p>
+                    </h1>
+                    <div class="w-full h-full flex flex-col items-center justify-center gap-5">
+                      <div class="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 class="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()!;
+
+                        save("accepted_privacy_policy", true).then(() =>
+                          save("accepted_terms_of_service", true).then(() =>
+                            save("ppandtos_done", true).then(() =>
+                              save("legal_docs", currentDocs).then(() =>
+                                setPPandToSDone(true),
+                              ),
+                            ),
+                          ),
+                        );
+                      }}
+                    />
+                  </>
+                ) : !doneWithAnalytics() ? (
+                  <>
+                    <h1 class="text-3xl md:text-4xl font-bold">Analytics</h1>
+                    <div class="w-full h-full flex justify-center items-center">
+                      <div class="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();
+
+                        save(
+                          "analytics_crash_reports",
+                          currentCrashReports,
+                        ).then(() => {
+                          setCrashReports(currentCrashReports);
+                        });
+                        save("analytics_usage_data", currentUsageData).then(
+                          () => {
+                            setUsageData(currentUsageData);
+                          },
+                        );
+                        save("analytics_done", true).then(() => {
+                          setDoneWithAnalytics(true);
+                        });
+                      }}
+                    />
+                  </>
+                ) : null}
+              </div>
+            </div>
+          </Show>
+        </Show>
+      }
+    >
+      <ErrorScreen error={error()} description={errorDescription()} />
+    </Show>
+  );
+}
+
+function ContinueButton(props: { onClick: () => void; disabled?: boolean }) {
+  return (
+    <div class="w-full flex justify-end">
+      <Button
+        size="lg"
+        class="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}
+      class="flex items-center space-x-2"
+    >
+      <CheckboxControl class="size-5.5 rounded-md flex items-center justify-center" />
+      <CheckboxLabel class="text-lg">{props.label}</CheckboxLabel>
+    </Checkbox>
+  );
+}
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@ -0,0 +1,152 @@
+@import "tailwindcss";
+@import "tailwind-scrollbar-hide/v4";
+@import "tw-animate-css";
+
+@source "./**/*.{ts,tsx}";
+@source "../../ui/src/**/*.{ts,tsx}";
+@source "../../core/**/src/**/*.{ts,tsx}";
+@source "../../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/packages/web/src/index.tsx
+++ b/packages/web/src/index.tsx
@ -0,0 +1,93 @@
+import { createEffect } from "solid-js";
+import { render } from "solid-js/web";
+import { Route, Router } from "@solidjs/router";
+import "./index.css";
+
+import NotFound from "@/routes/404";
+
+// Layouts
+import RootLayout from "./routes/layout";
+import AppLayout from "./routes/app/layout";
+
+// Pages
+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";
+
+import { getMessages } from "@tensamin/chat/behaviour-conversation";
+
+// Render
+const wrapper = document.getElementById("root")!;
+
+// @ts-expect-error Declare global function
+window.setLogLevelToMax = () => {
+  localStorage.setItem("log_level", String(1000));
+  location.reload();
+};
+
+render(
+  () => (
+    <Router
+      root={(props) => {
+        // Theme Detection
+        createEffect(() => {
+          try {
+            const mediaQuery = window.matchMedia(
+              "(prefers-color-scheme: dark)",
+            );
+
+            // Initial check
+            document.documentElement.classList.toggle(
+              "dark",
+              mediaQuery.matches,
+            );
+
+            // Listen to changes
+            const handleChange = (e: MediaQueryListEvent) => {
+              document.documentElement.classList.toggle("dark", e.matches);
+            };
+
+            mediaQuery.addEventListener("change", handleChange);
+
+            // Cleanup
+            return () => mediaQuery.removeEventListener("change", handleChange);
+          } catch {
+            /* theme detection not supported */
+          }
+        });
+
+        return (
+          <div class="w-screen h-screen overflow-hidden">{props.children}</div>
+        );
+      }}
+    >
+      <Route path="/" component={RootLayout}>
+        {/* App */}
+        <Route path="/" component={AppLayout}>
+          <Route path="/" component={Home} />
+          <Route path="/chat" component={Chat} />
+        </Route>
+
+        {/* Screens */}
+        <Route path="/">
+          <Route path="/login" component={Login} />
+          <Route path="/signup" component={Signup} />
+        </Route>
+      </Route>
+
+      {/* 404 */}
+      <Route path="*" component={NotFound} />
+    </Router>
+  ),
+  wrapper,
+);
+
+function Chat() {
+  return (
+    <ChatContext getMessages={getMessages}>
+      <ChatScreen />
+    </ChatContext>
+  );
+}
--- a/packages/web/src/routes/404.tsx
+++ b/packages/web/src/routes/404.tsx
@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <div class="w-full h-full flex items-center justify-center text-4xl font-bold">
+      Page not found (404)
+    </div>
+  );
+}
--- a/packages/web/src/routes/app/home.tsx
+++ b/packages/web/src/routes/app/home.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Home</div>;
+}
--- a/packages/web/src/routes/app/layout.tsx
+++ b/packages/web/src/routes/app/layout.tsx
@ -0,0 +1,27 @@
+import Socket from "@tensamin/ttp/context";
+import User from "@tensamin/core-user/context";
+import type { RouteSectionProps } from "@solidjs/router";
+
+import Sidebar from "@/components/sidebar";
+import Conversation from "@/features/conversation/context";
+import Navbar from "@/components/navbar";
+
+export default function Layout(props: RouteSectionProps) {
+  return (
+    <Socket>
+      <User>
+        <Conversation>
+          <div class="w-full h-full flex bg-sidebar">
+            <Sidebar />
+            <div class="w-full h-full flex flex-col">
+              <Navbar />
+              <div class="bg-background h-full w-full rounded-tl-3xl border-t border-l">
+                {props.children}
+              </div>
+            </div>
+          </div>
+        </Conversation>
+      </User>
+    </Socket>
+  );
+}
--- a/packages/web/src/routes/layout.tsx
+++ b/packages/web/src/routes/layout.tsx
@ -0,0 +1,21 @@
+import type { RouteSectionProps } from "@solidjs/router";
+
+import Storage from "@tensamin/core-storage/context";
+import Crypto from "@tensamin/core-crypto/context";
+
+import LegalWrapper from "@/features/legal/screen";
+
+import { Toaster } from "@tensamin/ui/sonner";
+
+export default function Layout(props: RouteSectionProps) {
+  return (
+    <>
+      <Toaster />
+      <Storage>
+        <LegalWrapper>
+          <Crypto>{props.children}</Crypto>
+        </LegalWrapper>
+      </Storage>
+    </>
+  );
+}
--- a/packages/web/src/routes/screens/login.tsx
+++ b/packages/web/src/routes/screens/login.tsx
@ -0,0 +1,16 @@
+import Form from "@/components/screens/login/form";
+import { Button } from "@tensamin/ui/button";
+import { A } from "@solidjs/router";
+
+export default function Page() {
+  return (
+    <div class="w-full h-full flex flex-col gap-10 items-center justify-center">
+      <Form />
+      <div class="flex">
+        <A href="/signup">
+          <Button variant="outline">Sign up</Button>
+        </A>
+      </div>
+    </div>
+  );
+}
--- a/packages/web/src/routes/screens/signup.tsx
+++ b/packages/web/src/routes/screens/signup.tsx
@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Signup Page</div>;
+}
--- a/packages/web/tsconfig.app.json
+++ b/packages/web/tsconfig.app.json
@ -0,0 +1,34 @@
+{
+  "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": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/packages/web/tsconfig.json
+++ b/packages/web/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/packages/web/tsconfig.node.json
+++ b/packages/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/packages/web/vite.config.ts
+++ b/packages/web/vite.config.ts
@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
+import tsconfigPaths from "vite-tsconfig-paths";
+import tailwindcss from "@tailwindcss/vite";
+import lucidePreprocess from "vite-plugin-lucide-preprocess";
+
+export default defineConfig({
+  plugins: [solid(), tsconfigPaths(), tailwindcss(), lucidePreprocess()],
+  worker: {
+    format: "es",
+  },
+});