ui(sharing): rework share dialog around the Drive/Notion pattern

The previous pass still read as two labeled sections with a target
"chip" that looked like an empty input and a dashed-border empty state
that looked like a drop zone. Rebuilt around the common share-modal
pattern: target name inlines into the title, a single compact invite
row (picker + Viewer/Editor dropdown + Share) sits at the top, and a
hoverable list below shows each person with an avatar, name,
permission subtitle, and an X that fades in on hover.

Also fixes the spacing: DialogContent was p-5 with non-flex children
so the gap utility silently did nothing — switching it to a flex
column puts every section on a 16px rhythm.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/sharing/ShareDialog.tsx

@@ -1,15 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import {
+import { Users, Eye, Pencil, X, Loader2 } from 'lucide-react'
-  Users,
-  Trash2,
-  Layers,
-  Folder,
-  Eye,
-  Pencil,
-  UserPlus,
-  Loader2,
-} from 'lucide-react'
 import { cn } from '@/lib/utils'
 import {
   sharing,
@@ -29,7 +20,6 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
 import {
   Select,
   SelectContent,
@@ -38,6 +28,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Separator } from '@/components/ui/separator'
 
 interface ShareDialogProps {
   isOpen: boolean
@@ -128,83 +119,43 @@ export function ShareDialog({
     }
   }, [isOpen])
 
-  const TypeIcon = type === 'heap' ? Layers : Folder
+  const invitePlaceholder = isLoadingUsers
+    ? 'Loading users…'
+    : availableUsers.length === 0
+      ? shares.length > 0
+        ? 'Everyone already has access'
+        : 'No users to share with'
+      : 'Add people…'
 
   return (
     <Dialog open={isOpen} onOpenChange={(o) => !o && onClose()}>
-      <DialogContent className="max-w-md">
+      {/* flex flex-col so the gap-4 between header → invite row →
+       *  separator → list actually applies (DialogContent isn't a flex
+       *  container by default, which is what made the spacing feel
+       *  random on the previous pass). */}
+      <DialogContent className="flex max-w-md flex-col gap-4">
+        {/* Header — target name inlines into the title so there's no
+         *  separate "chip" container that reads like an empty input.
+         *  Google Drive / Notion / Linear all follow this pattern. */}
         <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
+          <DialogTitle className="flex items-center gap-2 pr-6">
-            <Users className="h-4 w-4 text-primary" />
+            <Users className="h-4 w-4 shrink-0 text-primary" />
-            Share {type === 'heap' ? 'heap' : 'folder'}
+            <span className="truncate">
+              Share
+              <span className="ml-1 font-normal text-text-muted">
+                &ldquo;{targetName}&rdquo;
+              </span>
+            </span>
           </DialogTitle>
-          <DialogDescription className="sr-only">
+          <DialogDescription>
-            Manage who can access this {type}.
+            Invite people to view or edit this {type}.
           </DialogDescription>
         </DialogHeader>
 
-        {/* Target chip — gives the action a clear subject instead of a
+        {/* Invite row — single compact line: user picker (flex-1) +
-         *  bare "Sharing X" line floating under the title. */}
+         *  permission + primary action. Mirrors the Drive/Notion
-        <div className="mt-1 flex items-center gap-2 rounded-md border border-border bg-surface-2 px-3 py-2">
+         *  invitation bar, where the whole flow is reachable without
-          <TypeIcon className="h-4 w-4 shrink-0 text-text-muted" />
+         *  scanning multiple labeled sections. */}
-          <span className="truncate text-sm font-medium text-text">
-            {targetName}
-          </span>
-        </div>
-
-        {/* People with access ────────────────────────────────────────── */}
-        <section className="space-y-2">
-          <div className="flex items-center justify-between">
-            <Label>People with access</Label>
-            {shares.length > 0 && (
-              <span className="text-[11px] text-text-faint">
-                {shares.length} {shares.length === 1 ? 'person' : 'people'}
-              </span>
-            )}
-          </div>
-
-          {isLoading ? (
-            <div className="flex items-center gap-2 rounded-md border border-dashed border-border px-3 py-3 text-xs text-text-muted">
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
-              Loading shares…
-            </div>
-          ) : shares.length === 0 ? (
-            <div className="rounded-md border border-dashed border-border px-3 py-3 text-center text-xs text-text-muted">
-              Only you can see this {type}. Add people below to share it.
-            </div>
-          ) : (
-            <ul className="divide-y divide-border overflow-hidden rounded-md border border-border bg-surface-2">
-              {shares.map((share) => (
-                <li
-                  key={share.id}
-                  className="flex items-center justify-between gap-2 px-3 py-2"
-                >
-                  <div className="flex min-w-0 items-center gap-2.5">
-                    <Avatar name={share.shared_with_username} />
-                    <span className="truncate text-sm font-medium text-text">
-                      {share.shared_with_username}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-1">
-                    <PermissionPill permission={share.permission} />
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => revokeMutation.mutate(share.id)}
-                      disabled={revokeMutation.isPending}
-                      className="h-7 w-7 text-text-muted hover:bg-reject/10 hover:text-reject"
-                      title="Revoke access"
-                    >
-                      <Trash2 className="h-3.5 w-3.5" />
-                    </Button>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
-        </section>
-
-        {/* Add people ────────────────────────────────────────────────── */}
         <form
           onSubmit={(e) => {
             e.preventDefault()
@@ -212,88 +163,141 @@ export function ShareDialog({
           }}
           className="space-y-2"
         >
-          <Label htmlFor="share-user">Add people</Label>
+          <div className="flex gap-2">
-
+            <Select
-          <Select
+              value={username}
-            value={username}
+              onValueChange={(v) => {
-            onValueChange={(v) => {
+                setUsername(v)
-              setUsername(v)
+                setError(null)
-              setError(null)
+              }}
-            }}
+              disabled={isLoadingUsers || availableUsers.length === 0}
-            disabled={isLoadingUsers || availableUsers.length === 0}
+            >
-          >
+              <SelectTrigger className="flex-1">
-            <SelectTrigger id="share-user" className="w-full">
+                <SelectValue placeholder={invitePlaceholder} />
-              <SelectValue
+              </SelectTrigger>
-                placeholder={
+              <SelectContent>
-                  isLoadingUsers
+                {availableUsers.map((u) => (
-                    ? 'Loading users…'
+                  <SelectItem key={u.id} value={u.username}>
-                    : availableUsers.length === 0
+                    <span className="flex items-center gap-2">
-                      ? 'No users to share with'
+                      <Avatar name={u.username} size="sm" />
-                      : 'Select a user'
+                      {u.username}
-                }
+                    </span>
-              />
+                  </SelectItem>
-            </SelectTrigger>
+                ))}
-            <SelectContent>
+              </SelectContent>
-              {availableUsers.map((u) => (
+            </Select>
-                <SelectItem key={u.id} value={u.username}>
+            <Select
+              value={permission}
+              onValueChange={(v) => setPermission(v as 'read' | 'write')}
+            >
+              <SelectTrigger className="w-[112px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="read">
                   <span className="flex items-center gap-2">
-                    <Avatar name={u.username} size="sm" />
+                    <Eye className="h-3.5 w-3.5" />
-                    {u.username}
+                    Viewer
                   </span>
                 </SelectItem>
-              ))}
+                <SelectItem value="write">
-            </SelectContent>
+                  <span className="flex items-center gap-2">
-          </Select>
+                    <Pencil className="h-3.5 w-3.5" />
-
+                    Editor
-          {/* Permission picker — segmented control style so the two
+                  </span>
-           *  options are visible at once and the difference between
+                </SelectItem>
-           *  "view" and "edit" is obvious without opening a dropdown. */}
+              </SelectContent>
-          <div className="flex items-center justify-between gap-2 pt-1">
+            </Select>
-            <div
-              role="radiogroup"
-              aria-label="Permission"
-              className="inline-flex overflow-hidden rounded-md border border-border bg-surface-2 p-0.5"
-            >
-              <PermissionOption
-                icon={Eye}
-                label="Can view"
-                value="read"
-                current={permission}
-                onSelect={setPermission}
-              />
-              <PermissionOption
-                icon={Pencil}
-                label="Can edit"
-                value="write"
-                current={permission}
-                onSelect={setPermission}
-              />
-            </div>
             <Button
               type="submit"
-              size="sm"
               disabled={!username.trim() || addMutation.isPending}
             >
               {addMutation.isPending ? (
-                <>
+                <Loader2 className="h-4 w-4 animate-spin" />
-                  <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
-                  Sharing…
-                </>
               ) : (
-                <>
+                'Share'
-                  <UserPlus className="mr-1.5 h-3.5 w-3.5" />
-                  Share
-                </>
               )}
             </Button>
           </div>
-
           {error && (
             <Alert variant="destructive">
               <AlertDescription>{error}</AlertDescription>
             </Alert>
           )}
         </form>
+
+        <Separator />
+
+        {/* People list — hoverable rows, each with avatar + name +
+         *  permission subtitle + X to revoke. This is the same layout
+         *  Drive/Notion use: one primary line per person, permission
+         *  relegated to a subtle subtitle rather than a loud pill. */}
+        <section className="space-y-2">
+          <div className="flex items-baseline justify-between">
+            <h3 className="text-sm font-medium text-text">People with access</h3>
+            {shares.length > 0 && (
+              <span className="text-[11px] text-text-faint">
+                {shares.length}
+              </span>
+            )}
+          </div>
+
+          {isLoading ? (
+            <div className="flex items-center gap-2 px-1 py-2 text-xs text-text-muted">
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              Loading…
+            </div>
+          ) : shares.length === 0 ? (
+            <p className="px-1 py-1 text-xs text-text-muted">
+              Only you can access this {type}.
+            </p>
+          ) : (
+            <ul className="-mx-2">
+              {shares.map((share) => (
+                <li
+                  key={share.id}
+                  className="group flex items-center gap-3 rounded-md px-2 py-1.5 hover:bg-surface-2"
+                >
+                  <Avatar name={share.shared_with_username} />
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-sm font-medium text-text">
+                      {share.shared_with_username}
+                    </div>
+                    <div className="flex items-center gap-1 text-[11px] text-text-muted">
+                      {share.permission === 'write' ? (
+                        <>
+                          <Pencil className="h-2.5 w-2.5" />
+                          Can edit
+                        </>
+                      ) : (
+                        <>
+                          <Eye className="h-2.5 w-2.5" />
+                          Can view
+                        </>
+                      )}
+                    </div>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => revokeMutation.mutate(share.id)}
+                    disabled={revokeMutation.isPending}
+                    className={cn(
+                      'h-7 w-7 text-text-muted transition-opacity hover:bg-reject/10 hover:text-reject',
+                      // Hover-revealed on pointer devices, always
+                      // visible on touch (focus-within covers keyboard
+                      // nav as well).
+                      'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
+                    )}
+                    title="Revoke access"
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
       </DialogContent>
     </Dialog>
   )
@@ -301,10 +305,10 @@ export function ShareDialog({
 
 // ── Helpers ────────────────────────────────────────────────────────────
 
-/** Circular initial bubble. Hashes the username into one of a small set
+/** Circular initial bubble. Hashes the username into one of a small
- *  of stable palette tints so each person's avatar reads consistently
+ *  set of stable palette tints so each person's avatar reads
- *  across the app — the colour isn't meaningful, it's just an identity
+ *  consistently across the app — the colour isn't meaningful, just an
- *  cue to make a list of names feel less anonymous. */
+ *  identity cue that makes a list of names feel less anonymous. */
 function Avatar({ name, size = 'md' }: { name: string; size?: 'sm' | 'md' }) {
   const initials = name.slice(0, 2).toUpperCase()
   const palette = [
@@ -317,7 +321,7 @@ function Avatar({ name, size = 'md' }: { name: string; size?: 'sm' | 'md' }) {
   let hash = 0
   for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) | 0
   const tint = palette[Math.abs(hash) % palette.length]
-  const dims = size === 'sm' ? 'h-5 w-5 text-[9px]' : 'h-7 w-7 text-[11px]'
+  const dims = size === 'sm' ? 'h-5 w-5 text-[9px]' : 'h-8 w-8 text-[11px]'
   return (
     <span
       className={cn(
@@ -331,55 +335,3 @@ function Avatar({ name, size = 'md' }: { name: string; size?: 'sm' | 'md' }) {
     </span>
   )
 }
-
-function PermissionPill({ permission }: { permission: string }) {
-  const isWrite = permission === 'write'
-  const Icon = isWrite ? Pencil : Eye
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
-        isWrite
-          ? 'bg-primary/15 text-primary'
-          : 'bg-surface-offset text-text-muted'
-      )}
-      title={isWrite ? 'Read + Write' : 'Read-only'}
-    >
-      <Icon className="h-2.5 w-2.5" />
-      {isWrite ? 'Edit' : 'View'}
-    </span>
-  )
-}
-
-function PermissionOption({
-  icon: Icon,
-  label,
-  value,
-  current,
-  onSelect,
-}: {
-  icon: typeof Eye
-  label: string
-  value: 'read' | 'write'
-  current: 'read' | 'write'
-  onSelect: (v: 'read' | 'write') => void
-}) {
-  const active = current === value
-  return (
-    <button
-      type="button"
-      role="radio"
-      aria-checked={active}
-      onClick={() => onSelect(value)}
-      className={cn(
-        'inline-flex items-center gap-1.5 rounded px-2.5 py-1 text-xs font-medium transition-colors',
-        active
-          ? 'bg-primary/20 text-primary shadow-[inset_0_0_0_1px_rgba(232,150,90,0.35)]'
-          : 'text-text-muted hover:text-text'
-      )}
-    >
-      <Icon className="h-3 w-3" />
-      {label}
-    </button>
-  )
-}