Merge pull request #21 from kleo-dev/ui-ux-patch

UI ux patch

src/app/api/profile/route.ts

@@ -19,7 +19,14 @@ export async function POST(req: NextRequest) {
       { status: StatusCodes.BAD_REQUEST }
     );
 
-  if (!username || !display_name || !avatar_url)
+  if (
+    !username ||
+    !display_name ||
+    avatar_url === undefined ||
+    avatar_url === null ||
+    node_address === undefined ||
+    node_address === null
+  )
     return NextResponse.json(
       {
         message:

src/app/api/user/route.ts

@@ -5,10 +5,10 @@ import { supabase } from "../supa";
 /**
  * POST /api/user
  * Register new user
- * Body: { name, username, email, password }
+ * Body: { username, email, password }
  */
 export async function POST(req: NextRequest) {
-  const { name, username, email, password } = await req.json();
+  const { username, email, password } = await req.json();
 
   if (!email || !password || !username)
     return NextResponse.json(
@@ -28,29 +28,35 @@ export async function POST(req: NextRequest) {
       { status: StatusCodes.CONFLICT }
     );
 
-  const { data: authData, error: authError } =
+  const { data: authData, error: authError } = await supabase.auth.signUp({
-    await supabase.auth.admin.createUser({
     email,
     password,
-      email_confirm: true,
-      user_metadata: { name, username },
   });
 
   if (authError)
     return NextResponse.json(
       { message: authError.message },
-      { status: StatusCodes.BAD_REQUEST }
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
+
+  if (!authData.user)
+    return NextResponse.json(
+      { message: "User is null" },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
     );
 
   await supabase.from("profiles").insert({
     id: authData.user.id,
-    name,
     username,
+    display_name: username,
+    avatar_url: "",
+    node_address: "",
   });
 
   return NextResponse.json({
-    message: "ok",
+    message: "User registered. Please check your email to verify your account.",
-    user_id: authData.user.id,
+    user_id: authData.user?.id,
+    email_sent: true,
   });
 }
 
@@ -61,30 +67,14 @@ export async function POST(req: NextRequest) {
  */
 export async function GET(req: NextRequest) {
   const params = new URL(req.url).searchParams;
-  const [username, password] = [params.get("username"), params.get("password")];
+  const [email, password] = [params.get("email"), params.get("password")];
 
-  if (!username || !password)
+  if (!email || !password)
     return NextResponse.json(
-      { message: "Params username and password are required" },
+      { message: "Params email and password are required" },
       { status: StatusCodes.BAD_REQUEST }
     );
 
-  let email = username;
-  if (!username.includes("@")) {
-    const { data } = await supabase
-      .from("profiles")
-      .select("email")
-      .eq("email", username)
-      .maybeSingle();
-    email = data?.email;
-  }
-
-  if (!email)
-    return NextResponse.json(
-      { message: "Invalid username" },
-      { status: StatusCodes.UNAUTHORIZED }
-    );
-
   const { data, error } = await supabase.auth.signInWithPassword({
     email,
     password,
@@ -104,7 +94,6 @@ export async function GET(req: NextRequest) {
     user_id: session?.user?.id,
   });
 
-  // Optionally set cookie
   res.cookies.set("token", session?.access_token ?? "", { httpOnly: true });
 
   return res;

src/app/api/verify/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from "next/server";
+import { supabase } from "../supa";
+import { StatusCodes } from "http-status-codes";
+
+export async function GET(req: NextRequest) {
+  const email = req.nextUrl.searchParams.get("email");
+  const password = req.nextUrl.searchParams.get("password");
+
+  if (!email || !password)
+    return NextResponse.json(
+      { message: "Missing email or password" },
+      { status: StatusCodes.BAD_REQUEST }
+    );
+
+  const { data, error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+
+  if (error)
+    return NextResponse.json(
+      { message: error.message },
+      { status: StatusCodes.INTERNAL_SERVER_ERROR }
+    );
+
+  if (!data)
+    return NextResponse.json(
+      { verified: false, message: "User not found" },
+      { status: StatusCodes.NOT_FOUND }
+    );
+
+  const res = NextResponse.json({
+    verified: !!data.user.email_confirmed_at,
+    user_id: data.user.id,
+    access_token: data.session.access_token,
+    refresh_token: data.session.refresh_token,
+  });
+
+  return res;
+}

src/app/chat/page.tsx

@@ -2,16 +2,20 @@
 
 import AppSidebar from "@/components/Sidebar";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useIsMobile } from "@/hooks/is-mobile";
 import useApp from "@/hooks/use-app";
 
 export default function Chat() {
   const app = useApp();
+  const isMobile = useIsMobile();
 
   return (
     <AppSidebar app={app}>
       <Card className="bg-background w-full">
         <CardHeader>
-          <CardTitle>Direct Messages</CardTitle>
+          <CardTitle onClick={() => isMobile && app.setSidebarOpen(true)}>
+            Direct Messages
+          </CardTitle>
         </CardHeader>
         <CardContent></CardContent>
       </Card>

src/app/verify/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import Cookies from "js-cookie";
+import axios from "axios";
+
+export default function Verify() {
+  const [email, setEmail] = useState<string>();
+  const router = useRouter();
+  const [verified, setVerified] = useState(false);
+
+  useEffect(() => {
+    const email = Cookies.get("verify_temp_email");
+    setEmail(email);
+    const password = Cookies.get("verify_temp_password");
+
+    const i = setInterval(async () => {
+      const { data } = await axios.get("/api/verify", {
+        params: { email, password },
+      });
+      const response = data as {
+        verified: boolean;
+        user_id: string;
+        access_token?: string;
+        refresh_token?: string;
+      };
+      if (response.verified) {
+        clearInterval(i);
+        if (response.access_token) {
+          setVerified(true);
+          toast.info("Email verified, redirecting...");
+          Cookies.set("token", response.access_token);
+          Cookies.remove("verify_temp_email");
+          Cookies.remove("verify_temp_password");
+          setTimeout(() => router.push("/chat"), 500);
+        } else {
+          console.log(response);
+        }
+      }
+    }, 8000);
+  }, []);
+
+  return (
+    <div className="h-screen flex items-center">
+      <Card className="w-md m-auto">
+        <CardHeader>
+          <CardTitle className="text-3xl mx-auto">Verify Email</CardTitle>
+          <CardDescription>
+            {verified ? (
+              "Successfully verified"
+            ) : (
+              <>
+                We sent you a verification email at {email}. Please verify to
+                continue.
+              </>
+            )}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="gap-3 flex flex-col">
+          Current status: {verified ? "Verified" : "Unverified"}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/components/MessageBox.tsx

@@ -10,8 +10,8 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
-import { ChevronLeftIcon, SmilePlusIcon } from "lucide-react";
+import { ChevronLeftIcon, SendIcon, SmilePlusIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { format, isToday, isYesterday } from "date-fns";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -19,6 +19,8 @@ import { UserProfile } from "@/hooks/get-user";
 import axios from "axios";
 import ProfilePicture from "./ProfilePicture";
 import App from "@/types/app";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { Textarea } from "./ui/textarea";
 
 function MessageContainer({ message, app }: { message: Message; app: App }) {
   useEffect(() => {
@@ -41,14 +43,14 @@ function MessageContainer({ message, app }: { message: Message; app: App }) {
           url={app.profiles[message.from]?.avatar_url}
           name={String(
             app.profiles[message.from]
-              ? app.profiles[message.from].display_name
+              ? app.profiles[message.from]?.display_name
               : message.from
           )}
         />
         <div className="flex flex-col flex-1">
           <span className="font-bold flex gap-1 items-center">
             {app.profiles[message.from]
-              ? app.profiles[message.from].display_name
+              ? app.profiles[message.from]?.display_name
               : message.from}
 
             <p className="text-neutral-500 text-xs">
@@ -142,13 +144,15 @@ export default function MessageBox({
   messages: Message[];
 }) {
   const [text, setText] = useState("");
+  const isMobile = useIsMobile();
+  const inputRef = useRef<any>(null);
 
   return (
     <div className="h-svh w-full max-h-svh flex flex-col pb-5 pl-5 gap-5">
       {channelName && (
         <header className="h-12 py-4 flex items-center border-b text-sm font-semibold">
           <span
-            onClick={() => app.setSidebarOpen(true)}
+            onClick={() => isMobile && app.setSidebarOpen(true)}
             className="cursor-pointer flex"
           >
             <ChevronLeftIcon className="w-5 h-5" />
@@ -156,27 +160,70 @@ export default function MessageBox({
           </span>
         </header>
       )}
-      <div className="flex flex-col-reverse overflow-y-scroll">
+      <div className="mt-auto flex flex-col-reverse overflow-y-scroll">
         {messages.toReversed().map((msg) => (
           <MessageContainer key={msg.id} message={msg} app={app} />
         ))}
       </div>
-      <footer className="flex gap-3 pr-5 w-full mt-auto">
+      <footer className="flex gap-3 pr-5 w-full h-max">
-        <Input
+        {text.includes("\n") ? (
-          className=""
+          <Textarea
+            ref={inputRef}
+            className="resize-none"
             placeholder="Type a message..."
             value={text}
+            onChange={(e) => {
+              if (!e.target.value.includes("\n") && text.includes("\n")) {
+                setTimeout(() => {
+                  if (inputRef.current) {
+                    inputRef.current.selectionStart = text.length + 1;
+                    inputRef.current.selectionEnd = text.length + 1;
+                    inputRef.current.focus();
+                  }
+                }, 10);
+              }
+
+              setText(e.target.value);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                if (!e.shiftKey) {
+                  e.preventDefault();
+                  sendMessage(text);
+                  setText("");
+                }
+              }
+            }}
+          />
+        ) : (
+          <Input
+            placeholder="Type a message..."
+            ref={inputRef}
+            value={text}
             onChange={(e) => setText(e.target.value)}
             onKeyDown={(e) => {
               if (e.key === "Enter") {
-              sendMessage(text);
+                if (e.shiftKey) {
+                  setText((p) => p + "\n");
+                  setTimeout(() => {
+                    if (inputRef.current) {
+                      inputRef.current.selectionStart = text.length + 1;
+                      inputRef.current.selectionEnd = text.length + 1;
+                      inputRef.current.focus();
+                    }
+                  }, 10);
+                } else {
+                  sendMessage(text.trim());
                   setText("");
                 }
+              }
             }}
           />
+        )}
+
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="secondary">
+            <Button variant="secondary" className="hidden md:block">
               <SmilePlusIcon />
             </Button>
           </DropdownMenuTrigger>
@@ -184,10 +231,18 @@ export default function MessageBox({
           <DropdownMenuContent className="">
             <EmojiPicker
               onEmojiClick={(e) => setText(text + e.emoji)}
-              theme={emoji.Theme.DARK}
+              theme={
+                app.clientSettings.theme === "dark"
+                  ? emoji.Theme.DARK
+                  : emoji.Theme.LIGHT
+              }
             />
           </DropdownMenuContent>
         </DropdownMenu>
+
+        <Button variant="secondary">
+          <SendIcon />
+        </Button>
       </footer>
     </div>
   );

src/components/ProfilePicture.tsx

@@ -5,7 +5,7 @@ export default function ProfilePicture({
   url,
 }: {
   name: string;
-  url: string;
+  url: string | undefined;
 }) {
   return (
     <Avatar className="h-8 w-8">

src/components/Sidebar.tsx

@@ -36,6 +36,7 @@ import Link from "next/link";
 import { get, Response } from "@/lib/request";
 import { cn } from "@/lib/utils";
 import App from "@/types/app";
+import { ProfileSettings } from "@/types/settings";
 
 export default function AppSidebar({
   children,
@@ -106,9 +107,7 @@ export default function AppSidebar({
     ];
 
     setServers(updatedServers);
-    Cookies.set("servers", updatedServers.map((x) => x.join("@")).join(","), {
+    Cookies.set("servers", updatedServers.map((x) => x.join("@")).join(","));
-      expires: 7,
-    });
     setNewServer({ name: "", ip: "" });
   };
 
@@ -203,7 +202,7 @@ export default function AppSidebar({
           </Dialog>
 
           <footer className="mt-auto">
-            <SettingsDialog />
+            <SettingsDialog profile={app.profile as ProfileSettings} />
           </footer>
         </div>
 
@@ -245,6 +244,7 @@ export default function AppSidebar({
                           ?.avatar_url || ""
                       }
                       key={id}
+                      app={app}
                     />
                   ))}
                 </>
@@ -258,6 +258,7 @@ export default function AppSidebar({
               id={app.profile?.id || "me"}
               avatar={app.profile?.avatar_url || ""}
               status="online"
+              app={app}
               settings
             />
           </footer>
@@ -268,7 +269,7 @@ export default function AppSidebar({
           className="w-full h-full overflow-x-hidden"
           onClick={() => app.setSidebarOpen(false)}
         >
-          <div className="overflow-x-hidden min-w-max flex-shrink-0">
+          <div className="overflow-x-hidden min-w-screen flex-shrink-0">
             {children}
           </div>
         </div>
@@ -285,12 +286,14 @@ function DMItem({
   avatar,
   status,
   settings,
+  app,
 }: {
   name: string;
   id: string;
   avatar: string;
   status: string;
   settings?: boolean;
+  app: App;
 }) {
   return (
     <Link
@@ -306,6 +309,7 @@ function DMItem({
         <SettingsDialog
           className="ml-auto w-7 h-7 p-0 flex items-center justify-center"
           tab="profile"
+          profile={app.profile as ProfileSettings}
         />
       )}
     </Link>
@@ -334,10 +338,12 @@ function ChannelIcon({ kind }: { kind: "text" | "voice" }) {
 
 function getUser(
   id: string,
-  userList: StringMap<UserProfile>,
+  userList: StringMap<UserProfile | null>,
-  setUserList: React.Dispatch<React.SetStateAction<StringMap<UserProfile>>>
+  setUserList: React.Dispatch<
+    React.SetStateAction<StringMap<UserProfile | null>>
+  >
 ) {
-  if (userList[id]) return userList[id];
+  if (userList[id] !== undefined) return userList[id];
 
   const onResponse = (res: Response<UserProfile>) => {
     setUserList((prev) => {
@@ -348,5 +354,10 @@ function getUser(
 
   get(`/api/profile/?id=${id}`, onResponse)
     ?.then(onResponse)
-    .catch((e) => {});
+    .catch((e) => {
+      setUserList((prev) => {
+        prev[id] = null;
+        return prev;
+      });
+    });
 }

src/components/auth/CreateAccount.tsx

@@ -4,11 +4,12 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import axios from "axios";
 import { useState } from "react";
-import Cookies from "js-cookie";
-import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { CardContent, CardHeader, CardTitle } from "../ui/card";
 import { Label } from "../ui/label";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+import Cookies from "js-cookie";
 
 export default function CreateAccount() {
   const [username, setUsername] = useState("");
@@ -20,7 +21,6 @@ export default function CreateAccount() {
   const [feedback, setFeedback] = useState<
     undefined | { kind: "error" | "info"; message: string }
   >();
-
   const router = useRouter();
 
   const validateInput = ():
@@ -36,7 +36,7 @@ export default function CreateAccount() {
       return {
         kind: "error",
         message:
-          "Username must be 3–20 characters and only letters, numbers, or underscores.",
+          "Username must be 3-20 characters and only letters, numbers, or underscores.",
       };
     }
     if (password.length < 6) {
@@ -67,11 +67,31 @@ export default function CreateAccount() {
 
     try {
       setLoading(true);
-      const res = await axios.post("/api/user", { username, password, email });
+      const { data } = await axios.post("/api/user", {
-      Cookies.set("token", (res.data as any).token);
+        username,
-
+        password,
-      setFeedback({ kind: "info", message: "Account created! Redirecting..." });
+        email,
-      setTimeout(() => router.push("/chat"), 1000);
+      });
+      const response = data as {
+        message: string;
+        email_sent: boolean;
+        user_id: string;
+      };
+      if (response.email_sent) {
+        toast.info(
+          "We sent you a verification email. Please verify to continue."
+        );
+        setFeedback({
+          message:
+            "We sent you a verification email. Please verify to continue.",
+          kind: "info",
+        });
+        Cookies.set("verify_temp_email", email);
+        Cookies.set("verify_temp_password", password);
+        router.push(`/verify`);
+      } else {
+        setFeedback({ message: response.message, kind: "error" });
+      }
     } catch (err: any) {
       setFeedback({
         kind: "error",

src/components/auth/Login.tsx

@@ -6,18 +6,10 @@ import axios from "axios";
 import { useState } from "react";
 import Cookies from "js-cookie";
 import { useRouter } from "next/navigation";
-import { Label } from "@/components/ui/label";
+import { CardContent, CardHeader, CardTitle } from "../ui/card";
-import Link from "next/link";
-import {
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../ui/card";
 
 export default function Login() {
-  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [feedback, setFeedback] = useState<
     undefined | { kind: "error" | "info"; message: string }
@@ -29,7 +21,7 @@ export default function Login() {
     setFeedback(undefined);
     try {
       const res = await axios.get("/api/user", {
-        params: { username, password },
+        params: { email, password },
       });
 
       Cookies.set("token", (res.data as any).token);
@@ -57,7 +49,7 @@ export default function Login() {
       <CardContent className="gap-3 flex flex-col">
         <span>
           Email
-          <Input onChange={(e) => setUsername(e.target.value)} type="email" />
+          <Input onChange={(e) => setEmail(e.target.value)} type="email" />
         </span>
         <span>
           Password

src/components/settings/Settings.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useClientSettings } from "@/hooks/use-settings";
 import { setClientSettings } from "@/lib/clientSettings";
 import SettingSchema from "./SettingSchema";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -11,19 +10,20 @@ import {
   CLIENT_SCHEMA,
   ProfileSettings,
 } from "@/types/settings";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import axios from "axios";
+import { useClientSettings } from "@/hooks/use-settings";
+import { useState } from "react";
 
 export default function Settings({
   tab,
-  profileSettings,
+  profileSettings: ps,
-  setProfileSettings,
 }: {
   tab?: string;
   profileSettings: ProfileSettings;
-  setProfileSettings: React.Dispatch<React.SetStateAction<ProfileSettings>>;
 }) {
   const [settings, setSettings] = useClientSettings();
+  const [profileSettings, setProfileSettings] = useState<ProfileSettings>(ps);
   const router = useRouter();
 
   return (

src/components/settings/SettingsDialog.tsx

@@ -3,7 +3,6 @@ import { Button } from "../ui/button";
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -11,18 +10,17 @@ import {
 import { cn } from "@/lib/utils";
 import Settings from "./Settings";
 import { ProfileSettings } from "@/types/settings";
-import { useProfileSettings } from "@/hooks/use-settings";
+import { useState } from "react";
 
 export default function SettingsDialog({
   className,
   tab,
+  profile,
 }: {
   className?: string;
   tab?: string;
-  profile?: ProfileSettings;
+  profile: ProfileSettings;
 }) {
-  const [profileSettings, setProfileSettings] = useProfileSettings();
-
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -41,11 +39,7 @@ export default function SettingsDialog({
         </DialogHeader>
 
         <div className="w-full">
-          <Settings
+          <Settings tab={tab} profileSettings={profile} />
-            tab={tab}
-            profileSettings={profileSettings}
-            setProfileSettings={setProfileSettings}
-          />
         </div>
       </DialogContent>
     </Dialog>

src/hooks/get-user.ts

@@ -17,12 +17,6 @@ export default function useUser() {
 
   useEffect(() => {
     async function fetchUser() {
-      const token = Cookies.get("token");
-      if (!token) {
-        router.push("/login");
-        return;
-      }
-
       try {
         setUser((await get("/api/profile")).data);
       } catch (e: any) {

src/hooks/is-mobile.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 767px)");
+    const handleChange = () => setIsMobile(mediaQuery.matches);
+
+    // Set initial value
+    handleChange();
+
+    // Listen for changes
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  return isMobile;
+}

src/hooks/use-app.ts

@@ -3,16 +3,20 @@ import { useRef, useState } from "react";
 import { useMessages } from "./use-messages";
 import { StringMap } from "@/types/typeUtils";
 import useUser, { UserProfile } from "./get-user";
+import { useClientSettings } from "./use-settings";
 
 export default function useApp(): App {
   const node = useRef<WebSocket | null>(null);
-  const [profiles, setProfiles] = useState<StringMap<UserProfile>>({});
+  const [profiles, setProfiles] = useState<StringMap<UserProfile | null>>({});
   const { messages, addMessage } = useMessages();
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
   const profile = useUser();
+  const [clientSettings, setClientSettings] = useClientSettings();
 
   return {
     node,
+    clientSettings,
+    setClientSettings,
     profile,
     profiles,
     setProfiles,

src/hooks/use-settings.ts

@@ -1,8 +1,7 @@
 "use client";
 
 import { defaultSettings, getClientSettings } from "@/lib/clientSettings";
-import { ProfileSettings, ClientSettings } from "@/types/settings";
+import { ClientSettings } from "@/types/settings";
-import axios from "axios";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 export function useClientSettings(): [
@@ -17,30 +16,3 @@ export function useClientSettings(): [
 
   return [settings, setSettings];
 }
-
-export function useProfileSettings(): [
-  ProfileSettings,
-  Dispatch<SetStateAction<ProfileSettings>>
-] {
-  const [settings, setSettings] = useState<ProfileSettings>({
-    node_address: "",
-    username: "",
-    display_name: "",
-    avatar_url: "",
-  });
-
-  useEffect(() => {
-    async function fetchProfileSettings() {
-      try {
-        const res = await axios.get("/api/profile");
-        setSettings(res.data as ProfileSettings);
-      } catch (error) {
-        console.error("Failed to fetch profile settings:", error);
-      }
-    }
-
-    fetchProfileSettings();
-  }, []);
-
-  return [settings, setSettings];
-}

src/types/app.ts

@@ -2,6 +2,7 @@ import { Dispatch, RefObject, SetStateAction } from "react";
 import { StringMap } from "./typeUtils";
 import { UserProfile } from "@/hooks/get-user";
 import { Message } from "./types";
+import { ClientSettings } from "./settings";
 
 export type SetState<T> = Dispatch<SetStateAction<T>>;
 
@@ -9,8 +10,11 @@ export default interface App {
   node: RefObject<WebSocket | null>;
   profile: UserProfile | null;
 
-  profiles: StringMap<UserProfile>;
+  clientSettings: ClientSettings;
-  setProfiles: SetState<StringMap<UserProfile>>;
+  setClientSettings: SetState<ClientSettings>;
+
+  profiles: StringMap<UserProfile | null>;
+  setProfiles: SetState<StringMap<UserProfile | null>>;
 
   messages: Message[];
   addMessage: (v: Message) => void;