fix: chat UI fixes

2026-08-29 04:12:30 +05:30
parent 290ceb048f
commit 028a8d7e1c
8 changed files with 369 additions and 166 deletions
@@ -1,7 +1,8 @@
 "use client";

 /**
- * Search for people and add them to a group.
+ * Search for people and add them to a group. Bottom drawer on mobile, modal on
+ * desktop — see ResponsiveDialog.
 *
 * Search runs through the same-origin /api/search/users proxy the search page
 * uses. It returns handles, which is exactly what the member API takes — no id
@@ -9,12 +10,14 @@
 */

 import { useEffect, useState } from "react";
-import { Check, Search, X } from "lucide-react";
+import { Check, Search } from "lucide-react";
 import { toast } from "sonner";
 import { useAuth } from "@/components/auth/auth-provider";
+import { useMediaQuery } from "@/components/selection-toolbar/shared";
 import { UserAvatar } from "@/components/ui/user-avatar";
 import { Button } from "@/components/ui/button";
 import { chat } from "@/lib/chat";
+import { ResponsiveDialog } from "@/components/chat/responsive-dialog";

 type Candidate = { handle: string; name: string; avatar_url: string | null };

@@ -31,6 +34,7 @@ export function AddMembersDialog({
  onAdded: () => void;
 }) {
  const { user } = useAuth();
+  const isMobile = useMediaQuery("(max-width: 767px)");
  const [query, setQuery] = useState("");
  // Results are stored with the query they belong to, so what's displayed can
  // be derived: a stale page from a previous query simply stops matching, and
@@ -68,12 +72,6 @@ export function AddMembersDialog({
    return () => clearTimeout(timer);
  }, [q, searchable]);

-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
-
  const toggle = (handle: string) =>
    setPicked((prev) => {
      const next = new Set(prev);
@@ -100,85 +98,70 @@ export function AddMembersDialog({
  };

  return (
-    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 sm:items-center">
-      <div className="absolute inset-0" onClick={onClose} aria-hidden />
-      <div className="relative z-10 flex max-h-[75vh] w-full max-w-md flex-col overflow-hidden rounded-t-2xl border border-border bg-background sm:rounded-2xl">
-        <div className="flex items-center justify-between border-b border-border px-4 py-3">
-          <h2 className="text-sm font-semibold text-foreground">Add members</h2>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close"
-            className="rounded-md p-1 text-muted-foreground hover:text-foreground"
-          >
-            <X className="size-4" />
-          </button>
+    <ResponsiveDialog
+      title="Add members"
+      description="Search for people to add to this group."
+      onClose={onClose}
+      toolbar={
+        <div className="flex items-center gap-2 rounded-lg bg-muted/40 px-3 py-2">
+          <Search className="size-4 shrink-0 text-muted-foreground" />
+          <input
+            // Not auto-focused on mobile: the keyboard would open mid-way
+            // through the drawer's slide-up and fight the animation.
+            autoFocus={!isMobile}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search by name or handle"
+            className="flex-1 bg-transparent text-sm outline-none pointer-coarse:text-base placeholder:text-muted-foreground"
+          />
        </div>
-
-        <div className="border-b border-border p-3">
-          <div className="flex items-center gap-2 rounded-lg bg-muted/40 px-3 py-2">
-            <Search className="size-4 shrink-0 text-muted-foreground" />
-            <input
-              autoFocus
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="Search by name or handle"
-              className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
-            />
-          </div>
-        </div>
-
-        <div className="flex-1 overflow-y-auto">
-          {!searchable ? (
-            <p className="p-4 text-sm text-muted-foreground">
-              Type at least two characters to search.
-            </p>
-          ) : visible.length === 0 ? (
-            <p className="p-4 text-sm text-muted-foreground">No one found.</p>
-          ) : (
-            <ul className="divide-y divide-border">
-              {visible.map((u) => (
-                <li key={u.handle}>
-                  <button
-                    type="button"
-                    onClick={() => toggle(u.handle)}
-                    className="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-muted/60"
-                  >
-                    <UserAvatar
-                      src={u.avatar_url}
-                      name={u.name}
-                      className="size-9 shrink-0"
-                    />
-                    <div className="min-w-0 flex-1">
-                      <p className="truncate text-sm text-foreground">
-                        {u.name}
-                      </p>
-                      <p className="truncate text-xs text-muted-foreground">
-                        @{u.handle}
-                      </p>
-                    </div>
-                    {picked.has(u.handle) && (
-                      <Check className="size-4 shrink-0 text-primary" />
-                    )}
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-
-        <div className="border-t border-border p-3">
-          <Button
-            className="w-full"
-            disabled={picked.size === 0 || busy}
-            onClick={submit}
-          >
-            {picked.size === 0
-              ? "Select people to add"
-              : `Add ${picked.size} ${picked.size === 1 ? "person" : "people"}`}
-          </Button>
-        </div>
-      </div>
-    </div>
+      }
+      footer={
+        <Button
+          className="w-full"
+          disabled={picked.size === 0 || busy}
+          onClick={submit}
+        >
+          {picked.size === 0
+            ? "Select people to add"
+            : `Add ${picked.size} ${picked.size === 1 ? "person" : "people"}`}
+        </Button>
+      }
+    >
+      {!searchable ? (
+        <p className="p-4 text-sm text-muted-foreground">
+          Type at least two characters to search.
+        </p>
+      ) : visible.length === 0 ? (
+        <p className="p-4 text-sm text-muted-foreground">No one found.</p>
+      ) : (
+        <ul className="divide-y divide-border">
+          {visible.map((u) => (
+            <li key={u.handle}>
+              <button
+                type="button"
+                onClick={() => toggle(u.handle)}
+                className="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-muted/60"
+              >
+                <UserAvatar
+                  src={u.avatar_url}
+                  name={u.name}
+                  className="size-9 shrink-0"
+                />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm text-foreground">{u.name}</p>
+                  <p className="truncate text-xs text-muted-foreground">
+                    @{u.handle}
+                  </p>
+                </div>
+                {picked.has(u.handle) && (
+                  <Check className="size-4 shrink-0 text-primary" />
+                )}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </ResponsiveDialog>
  );
 }