Added mobile

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

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 type Category = "conversations" | "communities";
 
 /**
@@ -11,28 +9,6 @@ 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]);
-
   /**
    * Executes toggleCategory.
    * @param none This function has no parameters.
@@ -47,20 +23,19 @@ export default function Switch(props: {
   return (
     <div
       role="tablist"
-      className="border relative inline-flex rounded-full bg-card p-1 select-none"
+      className="border relative grid grid-cols-2 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`,
+          left: props.category === "conversations" ? "0.25rem" : "50%",
+          width: "calc(50% - 0.25rem)",
         }}
       />
       <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 ${
+        className={`relative z-10 w-full cursor-pointer rounded-full px-2.5 py-1.5 text-center text-sm font-medium transition-colors duration-300 ${
           props.category === "conversations"
             ? "text-foreground"
             : "text-ring/50 hover:text-ring"
@@ -70,10 +45,9 @@ export default function Switch(props: {
         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 ${
+        className={`relative z-10 w-full cursor-pointer rounded-full px-2.5 py-1.5 text-center text-sm font-medium transition-colors duration-300 ${
           props.category === "communities"
             ? "text-foreground"
             : "text-ring/50 hover:text-ring"

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

@@ -14,18 +14,20 @@ export default function ConversationModal({ userId }: { userId: number }) {
 
   return (
     <ContextMenu>
-      <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>
+      <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>
+        }
+      />
       <ContextMenuContent>
         <ContextMenuGroup>
           <ContextMenuItem>Test</ContextMenuItem>