Formatted, updated convs & comms list to not depend on each other, updated legal & login screen for better mobile support

apps/web/src/features/conversation/list/body.tsx

@@ -18,14 +18,12 @@ export default function List() {
   >("conversations");
 
   const { conversations, communities } = useConversation();
+  const items = category === "conversations" ? conversations : communities;
 
   const scrollRef = React.useRef<HTMLDivElement | null>(null);
 
   const virtualizer = useVirtualizer({
-    count:
-      category === "conversations"
-        ? conversations?.length || 0
-        : communities?.length || 0,
+    count: items?.length || 0,
     estimateSize: () => 60,
     getScrollElement: () => scrollRef.current,
   });
@@ -38,7 +36,7 @@ export default function List() {
         id="conversation-list"
         className="overflow-y-auto flex-1 h-full"
       >
-        {communities === null || conversations === null ? (
+        {items === null ? (
           <div className="flex items-center justify-center pt-5">
             <p className="text-foreground/45 flex gap-1 items-center justify-center">
               <Loader2 size={18} className="animate-spin" />
@@ -52,8 +50,7 @@ export default function List() {
             height: `${virtualizer.getTotalSize()}px`,
           }}
         >
-          {communities &&
-            conversations &&
+          {items &&
             virtualizer.getVirtualItems().map((virtualItem) => {
               const itemKey = `${category}-${virtualItem.index}`;
 
@@ -69,12 +66,12 @@ export default function List() {
                   }}
                 >
                   {category === "conversations" ? (
-                    conversations[virtualItem.index] ? (
+                    conversations?.[virtualItem.index] ? (
                       <ConversationModal
                         userId={conversations[virtualItem.index].user_id}
                       />
                     ) : null
-                  ) : communities[virtualItem.index] ? (
+                  ) : communities?.[virtualItem.index] ? (
                     <CommunityModal
                       community={communities[virtualItem.index]}
                     />

apps/web/src/features/legal/screen.tsx

@@ -162,7 +162,7 @@ export default function Screen(props: { children: React.ReactNode }) {
   }
 
   return (
-    <div className="w-full h-full flex items-center justify-center">
+    <div className="w-full h-full flex items-center justify-center py-15">
       <div className="h-full flex flex-col gap-15 p-10 md:p-40 w-full lg:w-2/3">
         <h1 className="text-3xl md:text-4xl font-bold">
           Privacy Policy & ToS
@@ -173,11 +173,13 @@ export default function Screen(props: { children: React.ReactNode }) {
         <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
+              id="acceptPP"
               checked={acceptedPP}
               onChange={acceptPP}
               label="I agree to the Privacy Policy"
             />
             <BigCheckbox
+              id="acceptTOS"
               checked={acceptedTOS}
               onChange={acceptTOS}
               label="I agree to the Terms of Service"
@@ -225,10 +227,12 @@ function ContinueButton({
 }
 
 export function BigCheckbox({
+  id,
   label,
   checked,
   onChange,
 }: {
+  id: string;
   label: string;
   checked: boolean;
   onChange: (checked: boolean) => void;
@@ -236,11 +240,14 @@ export function BigCheckbox({
   return (
     <div className="flex items-center space-x-2">
       <Checkbox
+        id={id}
         checked={checked}
         onCheckedChange={onChange}
         className="size-5.5 rounded-md flex items-center justify-center"
       />
-      <Label className="text-lg">{label}</Label>
+      <Label htmlFor={id} className="text-lg">
+        {label}
+      </Label>
     </div>
   );
 }