Big restructure

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