Big restructure

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>
+  );
+}

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();
+  }
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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;
+}

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>
+  );
+}

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>
+  );
+}

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>;
+}

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>
+  );
+}

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>
+  );
+}

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));
+  }
+}

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} />);

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>
+  );
+}

apps/web/src/routes/app/home.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Home</div>;
+}

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>
+  );
+}

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>
+    </>
+  );
+}

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>
+  );
+}

apps/web/src/routes/screens/signup.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Signup Page</div>;
+}