ui(sharing): redesign share dialog with clearer structure + affordances

Target is now anchored in a chip at the top instead of a floating line.
Existing shares and the add-user form are split into labeled sections
with states for loading / empty. Each share row gets a hash-tinted
initial avatar and a semantic permission pill (primary = edit, muted =
view). The user picker is full-width with avatars in the dropdown, and
permission becomes a segmented "Can view / Can edit" control alongside
an icon-labeled Share button.

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

frontend/src/components/sharing/ShareDialog.tsx

@@ -1,6 +1,16 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { Users, Trash2 } from 'lucide-react'
+import {
+  Users,
+  Trash2,
+  Layers,
+  Folder,
+  Eye,
+  Pencil,
+  UserPlus,
+  Loader2,
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
 import {
   sharing,
   type ShareInfo,
@@ -14,10 +24,12 @@ import {
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
 import {
   Select,
   SelectContent,
@@ -116,100 +128,164 @@ export function ShareDialog({
     }
   }, [isOpen])
 
+  const TypeIcon = type === 'heap' ? Layers : Folder
+
   return (
     <Dialog open={isOpen} onOpenChange={(o) => !o && onClose()}>
-      <DialogContent className="max-w-[420px]">
+      <DialogContent className="max-w-md">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            <Users className="h-4 w-4 text-text-muted" />
+            <Users className="h-4 w-4 text-primary" />
             Share {type === 'heap' ? 'heap' : 'folder'}
           </DialogTitle>
+          <DialogDescription className="sr-only">
+            Manage who can access this {type}.
+          </DialogDescription>
         </DialogHeader>
 
-        <div className="text-sm text-text-muted">
-          Sharing <span className="font-medium text-text">{targetName}</span>
+        {/* Target chip — gives the action a clear subject instead of a
+         *  bare "Sharing X" line floating under the title. */}
+        <div className="mt-1 flex items-center gap-2 rounded-md border border-border bg-surface-2 px-3 py-2">
+          <TypeIcon className="h-4 w-4 shrink-0 text-text-muted" />
+          <span className="truncate text-sm font-medium text-text">
+            {targetName}
+          </span>
         </div>
 
-        {/* Existing shares */}
-        {shares.length > 0 && (
-          <div className="space-y-1.5">
-            {shares.map((share) => (
-              <div
-                key={share.id}
-                className="flex items-center justify-between rounded border border-border bg-surface-2 px-3 py-1.5 text-sm"
-              >
-                <div className="flex items-center gap-2">
-                  <span className="font-medium text-text">
-                    {share.shared_with_username}
-                  </span>
-                  <span className="rounded bg-surface px-1.5 py-0.5 text-[10px] font-medium uppercase text-text-muted">
-                    {share.permission}
-                  </span>
-                </div>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => revokeMutation.mutate(share.id)}
-                  className="h-6 w-6 text-text-muted hover:text-reject"
-                  title="Revoke access"
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                </Button>
-              </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="text-xs text-text-muted">Loading shares...</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()
             if (username.trim()) addMutation.mutate()
           }}
-          className="space-y-3"
+          className="space-y-2"
         >
-          <div className="flex gap-2">
-            <Select
-              value={username}
-              onValueChange={(v) => {
-                setUsername(v)
-                setError(null)
-              }}
-              disabled={isLoadingUsers || availableUsers.length === 0}
-            >
-              <SelectTrigger className="flex-1">
-                <SelectValue
-                  placeholder={
-                    isLoadingUsers
-                      ? 'Loading users…'
-                      : availableUsers.length === 0
-                        ? 'No users to share with'
-                        : 'Select a user'
-                  }
-                />
-              </SelectTrigger>
-              <SelectContent>
-                {availableUsers.map((u) => (
-                  <SelectItem key={u.id} value={u.username}>
+          <Label htmlFor="share-user">Add people</Label>
+
+          <Select
+            value={username}
+            onValueChange={(v) => {
+              setUsername(v)
+              setError(null)
+            }}
+            disabled={isLoadingUsers || availableUsers.length === 0}
+          >
+            <SelectTrigger id="share-user" className="w-full">
+              <SelectValue
+                placeholder={
+                  isLoadingUsers
+                    ? 'Loading users…'
+                    : availableUsers.length === 0
+                      ? 'No users to share with'
+                      : 'Select a user'
+                }
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {availableUsers.map((u) => (
+                <SelectItem key={u.id} value={u.username}>
+                  <span className="flex items-center gap-2">
+                    <Avatar name={u.username} size="sm" />
                     {u.username}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Select
-              value={permission}
-              onValueChange={(v) => setPermission(v as 'read' | 'write')}
+                  </span>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          {/* Permission picker — segmented control style so the two
+           *  options are visible at once and the difference between
+           *  "view" and "edit" is obvious without opening a dropdown. */}
+          <div className="flex items-center justify-between gap-2 pt-1">
+            <div
+              role="radiogroup"
+              aria-label="Permission"
+              className="inline-flex overflow-hidden rounded-md border border-border bg-surface-2 p-0.5"
             >
-              <SelectTrigger className="w-auto">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="read">Read</SelectItem>
-                <SelectItem value="write">Read + Write</SelectItem>
-              </SelectContent>
-            </Select>
+              <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="mr-1.5 h-3.5 w-3.5 animate-spin" />
+                  Sharing…
+                </>
+              ) : (
+                <>
+                  <UserPlus className="mr-1.5 h-3.5 w-3.5" />
+                  Share
+                </>
+              )}
+            </Button>
           </div>
 
           {error && (
@@ -217,17 +293,93 @@ export function ShareDialog({
               <AlertDescription>{error}</AlertDescription>
             </Alert>
           )}
-
-          <div className="flex justify-end">
-            <Button
-              type="submit"
-              disabled={!username.trim() || addMutation.isPending}
-            >
-              {addMutation.isPending ? 'Sharing...' : 'Share'}
-            </Button>
-          </div>
         </form>
       </DialogContent>
     </Dialog>
   )
 }
+
+// ── Helpers ────────────────────────────────────────────────────────────
+
+/** Circular initial bubble. Hashes the username into one of a small set
+ *  of stable palette tints so each person's avatar reads consistently
+ *  across the app — the colour isn't meaningful, it's just an identity
+ *  cue to make 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 = [
+    'bg-primary/25 text-primary',
+    'bg-pick/25 text-pick',
+    'bg-blue-500/25 text-blue-300',
+    'bg-purple-500/25 text-purple-300',
+    'bg-amber-500/25 text-amber-300',
+  ]
+  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]'
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center rounded-full font-semibold uppercase tracking-wide',
+        dims,
+        tint
+      )}
+      aria-hidden
+    >
+      {initials}
+    </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>
+  )
+}