Updated a lot of stuff, trying out radix ui

apps/web/src/features/conversation/context.tsx

@@ -1,5 +1,11 @@
-import * as React from "react";
 import { useSocket } from "@tensamin/ttp/context";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
 
 import { toast } from "@tensamin/shared/log";
 import type {
@@ -12,28 +18,22 @@ interface contextValue {
   communities: Community[] | null;
 }
 
-const ConversationContext = React.createContext<contextValue | undefined>(
-  undefined,
-);
+const ConversationContext = createContext<contextValue | undefined>(undefined);
 
 /**
  * Executes ConversationProvider.
  * @param props Parameter props.
  * @returns unknown.
  */
-export default function ConversationProvider(props: {
-  children: React.ReactNode;
-}) {
-  const [conversations, setConversations] = React.useState<
-    Conversation[] | null
-  >(null);
-  const [communities, setCommunities] = React.useState<Community[] | null>(
+export default function ConversationProvider(props: { children: ReactNode }) {
+  const [conversations, setConversations] = useState<Conversation[] | null>(
     null,
   );
+  const [communities, setCommunities] = useState<Community[] | null>(null);
 
   const { send } = useSocket();
 
-  React.useEffect(() => {
+  useEffect(() => {
     let active = true;
 
     send("get_conversations", {})
@@ -92,7 +92,7 @@ export default function ConversationProvider(props: {
  * @returns contextValue.
  */
 export function useConversation(): contextValue {
-  const context = React.useContext(ConversationContext);
+  const context = useContext(ConversationContext);
   if (!context) {
     throw new Error(
       "useConversation must be used within a ConversationProvider",

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

@@ -38,21 +38,20 @@ export default function List() {
         id="conversation-list"
         className="overflow-y-auto flex-1 h-full"
       >
+        {communities === null || conversations === 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" />
+              Loading...
+            </p>
+          </div>
+        ) : null}
         <div
           className="relative w-full flex flex-col"
           style={{
             height: `${virtualizer.getTotalSize()}px`,
           }}
         >
-          {communities === null || conversations === null ? (
-            <div className="flex items-center justify-center h-full pt-5">
-              <p className="text-foreground/45 flex gap-1 items-center justify-center">
-                <Loader2 size={18} className="animate-spin" />
-                Loading...
-              </p>
-            </div>
-          ) : null}
-
           {communities &&
             conversations &&
             virtualizer.getVirtualItems().map((virtualItem) => {

apps/web/src/features/conversation/modal/conversation.tsx

@@ -14,20 +14,18 @@ export default function ConversationModal({ userId }: { userId: number }) {
 
   return (
     <ContextMenu>
-      <ContextMenuTrigger
-        render={
-          <div
-            className="select-none cursor-pointer"
-            onClick={() => navigate({ to: "/chat", search: { id: userId } })}
-          >
-            <Wrapper
-              loading={<Loading />}
-              userId={userId}
-              component={(user) => <Basic user={user} />}
-            />
-          </div>
-        }
-      ></ContextMenuTrigger>
+      <ContextMenuTrigger asChild>
+        <div
+          className="select-none cursor-pointer"
+          onClick={() => navigate({ to: "/chat", search: { id: userId } })}
+        >
+          <Wrapper
+            loading={<Loading />}
+            userId={userId}
+            component={(user) => <Basic user={user} />}
+          />
+        </div>
+      </ContextMenuTrigger>
       <ContextMenuContent>
         <ContextMenuGroup>
           <ContextMenuItem>Test</ContextMenuItem>