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";

 /**
- * Create a group: name it, pick people, done.
+ * Create a group: name it, pick people, done. Bottom drawer on mobile, modal on
+ * desktop — see ResponsiveDialog.
 *
 * Members are named by handle, matching the member-management API — search
 * results already identify people that way, so nothing needs id plumbing.
@@ -12,15 +13,18 @@ import { useRouter } from "next/navigation";
 import { Check, Search, X } 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 };

 export function NewGroupDialog({ onClose }: { onClose: () => void }) {
  const router = useRouter();
  const { user } = useAuth();
+  const isMobile = useMediaQuery("(max-width: 767px)");
  const [title, setTitle] = useState("");
  const [query, setQuery] = useState("");
  // Results are stored with the query they belong to, so what's displayed can
@@ -56,12 +60,6 @@ export function NewGroupDialog({ onClose }: { onClose: () => void }) {
    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 = (u: Candidate) =>
    setPicked((prev) => {
      const next = new Map(prev);
@@ -85,29 +83,21 @@ export function NewGroupDialog({ onClose }: { onClose: () => void }) {
  };

  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-[80vh] 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">New group</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>
-        </div>
-
-        <div className="space-y-3 border-b border-border p-3">
+    <ResponsiveDialog
+      title="New group"
+      description="Name the group and choose who to include."
+      onClose={onClose}
+      toolbar={
+        <div className="space-y-3">
          <input
-            autoFocus
+            // Not auto-focused on mobile: the keyboard would open mid-way
+            // through the drawer's slide-up and fight the animation.
+            autoFocus={!isMobile}
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            maxLength={120}
            placeholder="Group name"
-            className="w-full rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-primary/40"
+            className="w-full rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm outline-none pointer-coarse:text-base focus:ring-1 focus:ring-primary/40"
          />
          <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" />
@@ -115,7 +105,7 @@ export function NewGroupDialog({ onClose }: { onClose: () => void }) {
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Add people"
-              className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              className="flex-1 bg-transparent text-sm outline-none pointer-coarse:text-base placeholder:text-muted-foreground"
            />
          </div>

@@ -135,54 +125,51 @@ export function NewGroupDialog({ onClose }: { onClose: () => void }) {
            </div>
          )}
        </div>
-
-        <div className="flex-1 overflow-y-auto">
-          {!searchable ? (
-            <p className="p-4 text-sm text-muted-foreground">
-              Search to add people. You can also add them later.
-            </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)}
-                    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={title.trim() === "" || busy}
-            onClick={create}
-          >
-            Create group
-          </Button>
-        </div>
-      </div>
-    </div>
+      }
+      footer={
+        <Button
+          className="w-full"
+          disabled={title.trim() === "" || busy}
+          onClick={create}
+        >
+          Create group
+        </Button>
+      }
+    >
+      {!searchable ? (
+        <p className="p-4 text-sm text-muted-foreground">
+          Search to add people. You can also add them later.
+        </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)}
+                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>
  );
 }