@dfosco/storyboard-react 4.2.0-beta.1 → 4.2.0-beta.17

package/src/Viewfinder.jsx

@@ -4,10 +4,11 @@
  * Replaces the old list-based Viewfinder with a sidebar + grid layout.
  * Wired to real data from buildPrototypeIndex and listStories.
  */
-import { useState, useEffect, useMemo, useCallback, useSyncExternalStore } from 'react'
+import { useState, useEffect, useRef, useMemo, useCallback, useSyncExternalStore } from 'react'
 import { buildPrototypeIndex, listStories, getStoryData, getLocal, setLocal } from '@dfosco/storyboard-core'
-import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, PlusIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon, StackIcon } from '@primer/octicons-react'
+import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, FileDirectoryFillIcon, PlusIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon, StackIcon, TrashIcon, ShieldLockIcon, KebabHorizontalIcon, PencilIcon } from '@primer/octicons-react'
 import { Menu } from '@base-ui/react/menu'
+import { Dialog } from '@base-ui/react/dialog'
 import Icon from './Icon.jsx'
 import css from './Viewfinder.module.css'
 
@@ -45,6 +46,52 @@ function useToolbarTheme() {
   return attrs
 }
 
+/* ─── GitHub user hook ─── */
+
+const COMMENTS_USER_KEY = 'sb-comments-user'
+const COMMENTS_TOKEN_KEY = 'sb-comments-token'
+
+/**
+ * Resolve the current GitHub user for display in the sidebar.
+ * Priority: 1) PAT-cached user (from comments auth), 2) gh CLI login via git-user endpoint.
+ */
+function useGitHubUser(basePath) {
+  const [user, setUser] = useState(() => {
+    try {
+      const raw = localStorage.getItem(COMMENTS_USER_KEY)
+      const token = localStorage.getItem(COMMENTS_TOKEN_KEY)
+      if (token && raw) {
+        const parsed = JSON.parse(raw)
+        if (parsed?.login) return parsed
+      }
+    } catch { /* ignore */ }
+    return null
+  })
+
+  // Listen for auth changes (when user signs in via AuthModal)
+  useEffect(() => {
+    const handler = () => {
+      try {
+        const raw = localStorage.getItem(COMMENTS_USER_KEY)
+        const token = localStorage.getItem(COMMENTS_TOKEN_KEY)
+        if (token && raw) {
+          const parsed = JSON.parse(raw)
+          if (parsed?.login) { setUser(parsed); return }
+        }
+        setUser(null)
+      } catch { setUser(null) }
+    }
+    window.addEventListener('storage', handler)
+    document.addEventListener('storyboard:auth-changed', handler)
+    return () => {
+      window.removeEventListener('storage', handler)
+      document.removeEventListener('storyboard:auth-changed', handler)
+    }
+  }, [])
+
+  return user
+}
+
 /* ─── localStorage helpers ─── */
 
 const STARRED_KEY = 'sb-viewfinder-starred'
@@ -157,10 +204,13 @@ function AvatarStack({ authors }) {
 
 /* ─── Star Button ─── */
 
-function StarBtn({ active, onClick }) {
+function StarBtn({ active, onClick, inline }) {
+  const cls = inline
+    ? (active ? css.iconBtnInlineActive : css.iconBtnInline)
+    : (active ? css.iconBtnActive : css.iconBtn)
   return (
     <button
-      className={active ? css.iconBtnActive : css.iconBtn}
+      className={cls}
       onClick={(e) => { e.preventDefault(); e.stopPropagation(); onClick() }}
       aria-label={active ? 'Remove favorite' : 'Favorite'}
       title={active ? 'Remove favorite' : 'Favorite'}
@@ -170,9 +220,251 @@ function StarBtn({ active, onClick }) {
   )
 }
 
+/* ─── Card Actions Menu ─── */
+
+function CardActionsMenu({ typeLabel, onEdit, onDelete }) {
+  return (
+    <Menu.Root>
+      <Menu.Trigger
+        className={css.iconBtn}
+        onClick={(e) => { e.preventDefault(); e.stopPropagation() }}
+        aria-label="Actions"
+        render={<button />}
+      >
+        <KebabHorizontalIcon size={16} />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner className={css.actionsMenuPositioner} side="bottom" alignment="end">
+          <Menu.Popup className={css.actionsMenu} onClick={(e) => { e.preventDefault(); e.stopPropagation() }}>
+            <Menu.Item
+              className={css.actionsMenuItem}
+              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEdit() }}
+              render={<button />}
+            >
+              <PencilIcon size={16} />
+              Edit {typeLabel}
+            </Menu.Item>
+            <Menu.Item
+              className={css.actionsMenuItemDanger}
+              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onDelete() }}
+              render={<button />}
+            >
+              <TrashIcon size={16} />
+              Delete {typeLabel}
+            </Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  )
+}
+
+/* ─── Edit Artifact Modal ─── */
+
+function EditArtifactModal({ item, dirName, basePath, onClose }) {
+  const [name, setName] = useState(item.name || '')
+  const [description, setDescription] = useState(item.description || '')
+  const [author, setAuthor] = useState(
+    item.author
+      ? (Array.isArray(item.author) ? item.author.join(', ') : item.author)
+      : ''
+  )
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const overlayRef = useRef(null)
+
+  const typeLabel = item.type === 'canvas' ? 'Canvas' : item.type === 'prototype' ? 'Prototype' : 'Component'
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setSubmitting(true)
+
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    let endpoint
+
+    if (item.type === 'canvas') {
+      endpoint = `${apiBase}/_storyboard/canvas/update-meta`
+    } else if (item.type === 'prototype') {
+      endpoint = `${apiBase}/_storyboard/workshop/prototypes`
+    } else {
+      setError('Editing this type is not supported')
+      setSubmitting(false)
+      return
+    }
+
+    const body = {
+      name: dirName,
+      title: name.trim(),
+      description: description.trim(),
+      author: author.trim(),
+    }
+    if (item.folder) body.folder = item.folder
+
+    try {
+      const res = await fetch(endpoint, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      if (!res.ok) {
+        const text = await res.text()
+        throw new Error(text || `Request failed (${res.status})`)
+      }
+      window.location.reload()
+    } catch (err) {
+      setError(err.message)
+      setSubmitting(false)
+    }
+  }
+
+  useEffect(() => {
+    const handleKey = (e) => { if (e.key === 'Escape') onClose() }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [onClose])
+
+  return (
+    <div className={css.modalOverlay} onClick={(e) => { if (e.target === overlayRef.current) onClose() }} ref={overlayRef}>
+      <div className={css.modalContent} onClick={(e) => e.stopPropagation()}>
+        <form onSubmit={handleSubmit}>
+          <div className={css.createFormHeader}>
+            <div className={css.createMenuTitle}>Edit {typeLabel}</div>
+            <button type="button" className={css.createFormClose} onClick={onClose} aria-label="Close">
+              <XIcon size={16} />
+            </button>
+          </div>
+
+          <div className={css.createFormField}>
+            <label className={css.createFormLabel}>Name</label>
+            <input
+              className={css.createFormInput}
+              value={name}
+              onChange={e => setName(e.target.value)}
+              autoFocus
+            />
+          </div>
+
+          <div className={css.createFormField}>
+            <label className={css.createFormLabel}>Description</label>
+            <input
+              className={css.createFormInput}
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+              placeholder="Optional description"
+            />
+          </div>
+
+          <div className={css.createFormField}>
+            <label className={css.createFormLabel}>Author</label>
+            <input
+              className={css.createFormInput}
+              value={author}
+              onChange={e => setAuthor(e.target.value)}
+              placeholder="GitHub username(s), comma-separated"
+            />
+          </div>
+
+          {error && <div className={css.createFormError}>{error}</div>}
+
+          <div className={css.modalActions}>
+            <button type="button" className={css.modalCancelBtn} onClick={onClose}>Cancel</button>
+            <button type="submit" className={css.modalSubmitBtn} disabled={submitting}>
+              {submitting ? 'Saving…' : 'Save Changes'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+/* ─── Delete Artifact Modal ─── */
+
+function DeleteArtifactModal({ item, dirName, basePath, typeLabel, onClose, onDeleted }) {
+  const [error, setError] = useState('')
+  const [deleting, setDeleting] = useState(false)
+  const overlayRef = useRef(null)
+
+  const handleDelete = async () => {
+    setError('')
+    setDeleting(true)
+
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    let endpoint
+
+    if (item.type === 'canvas') {
+      endpoint = `${apiBase}/_storyboard/canvas/delete-canvas`
+    } else if (item.type === 'prototype') {
+      endpoint = `${apiBase}/_storyboard/workshop/prototypes`
+    } else {
+      setError('Deleting this type is not supported')
+      setDeleting(false)
+      return
+    }
+
+    const body = { name: dirName }
+    if (item.folder) body.folder = item.folder
+
+    try {
+      const res = await fetch(endpoint, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      if (!res.ok) {
+        const text = await res.text()
+        throw new Error(text || `Request failed (${res.status})`)
+      }
+      onDeleted?.()
+      onClose()
+    } catch (err) {
+      setError(err.message)
+      setDeleting(false)
+    }
+  }
+
+  useEffect(() => {
+    const handleKey = (e) => { if (e.key === 'Escape') onClose() }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [onClose])
+
+  return (
+    <div className={css.modalOverlay} onClick={(e) => { if (e.target === overlayRef.current) onClose() }} ref={overlayRef}>
+      <div className={css.modalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={css.createFormHeader}>
+          <div className={css.createMenuTitle}>Delete {typeLabel}</div>
+          <button type="button" className={css.createFormClose} onClick={onClose} aria-label="Close">
+            <XIcon size={16} />
+          </button>
+        </div>
+
+        <p className={css.deleteMessage}>
+          Are you sure you want to delete <strong>{item.name}</strong>? This action cannot be undone.
+        </p>
+
+        {error && <div className={css.createFormError}>{error}</div>}
+
+        <div className={css.modalActions}>
+          <button type="button" className={css.modalCancelBtn} onClick={onClose}>Cancel</button>
+          <button
+            type="button"
+            className={css.deleteConfirmBtn}
+            onClick={handleDelete}
+            disabled={deleting}
+          >
+            {deleting ? 'Deleting…' : `Delete ${typeLabel}`}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 /* ─── Artifact Card ─── */
 
-function ArtifactCard({ item, basePath, starred, onToggleStar }) {
+function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted }) {
   const href = item.route ? withBase(basePath, item.route) : '#'
   const isExternal = item.isExternal
 
@@ -189,36 +481,73 @@ function ArtifactCard({ item, basePath, starred, onToggleStar }) {
     ? (Array.isArray(item.author) ? item.author : [item.author])
     : item.gitAuthor ? [item.gitAuthor] : []
 
+  const [showEdit, setShowEdit] = useState(false)
+  const [showDelete, setShowDelete] = useState(false)
+
+  // Extract dirName from item.id (format: "type:dirName")
+  const dirName = item.id.split(':').slice(1).join(':')
+  const typeLabel = item.type === 'canvas' ? 'Canvas' : item.type === 'prototype' ? 'Prototype' : 'Component'
+  const canEditDelete = item.type === 'canvas' || item.type === 'prototype'
+
   return (
-    <Tag className={css.card} {...linkProps} onClick={handleClick}>
-      <div className={css.cardHeader}>
-        <span className={css.cardBadge}>{getTypeLabel(item.type)}</span>
-        <div className={css.cardActions}>
-          {item.flows?.length > 0 && <FlowsDropdown flows={item.flows} basePath={basePath} />}
-          {item.pages?.length > 1 && <PagesDropdown pages={item.pages} basePath={basePath} />}
-          <StarBtn active={starred} onClick={() => onToggleStar(item.id)} />
-        </div>
-      </div>
-      <div className={css.cardBody}>
-        <div className={css.cardBodyContent}>
-          <div className={css.cardTitle}>
-            {item.name}
-            {isExternal && <span className={css.externalBadge}>↗</span>}
+    <>
+      <Tag className={css.card} {...linkProps} onClick={handleClick}>
+        <div className={css.cardHeader}>
+          <span className={css.cardBadge}>{getTypeLabel(item.type)}</span>
+          <div className={css.cardActions}>
+            {item.flows?.length > 0 && <FlowsDropdown flows={item.flows} basePath={basePath} />}
+            {item.pages?.length > 1 && <PagesDropdown pages={item.pages} basePath={basePath} />}
+            {canEditDelete && (
+              <CardActionsMenu
+                typeLabel={typeLabel}
+                onEdit={() => setShowEdit(true)}
+                onDelete={() => setShowDelete(true)}
+              />
+            )}
           </div>
-          {item.description && (
-            <div className={css.cardDescription}>{item.description}</div>
-          )}
-          <div className={css.cardFooter}>
-            <AvatarStack authors={authorList} />
-            <div className={css.cardMeta}>
-              {authorList.length > 0 && <span>{authorList.join(', ')}</span>}
-              {authorList.length > 0 && formatRelativeTime(item.lastModified) && <span className={css.cardMetaDot} />}
-              {formatRelativeTime(item.lastModified) && <span>{formatRelativeTime(item.lastModified)}</span>}
+        </div>
+        <div className={css.cardBody}>
+          <div className={css.cardBodyContent}>
+            <div className={css.cardTitleRow}>
+              <div className={css.cardTitle}>
+                {item.name}
+                {isExternal && <span className={css.externalBadge}>↗</span>}
+              </div>
+              <StarBtn active={starred} onClick={() => onToggleStar(item.id)} inline />
+            </div>
+            {item.description && (
+              <div className={css.cardDescription}>{item.description}</div>
+            )}
+            <div className={css.cardFooter}>
+              <AvatarStack authors={authorList} />
+              <div className={css.cardMeta}>
+                {authorList.length > 0 && <span>{authorList.join(', ')}</span>}
+                {authorList.length > 0 && formatRelativeTime(item.lastModified) && <span className={css.cardMetaDot} />}
+                {formatRelativeTime(item.lastModified) && <span>{formatRelativeTime(item.lastModified)}</span>}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </Tag>
+      </Tag>
+      {showEdit && (
+        <EditArtifactModal
+          item={item}
+          dirName={dirName}
+          basePath={basePath}
+          onClose={() => setShowEdit(false)}
+        />
+      )}
+      {showDelete && (
+        <DeleteArtifactModal
+          item={item}
+          dirName={dirName}
+          basePath={basePath}
+          typeLabel={typeLabel}
+          onClose={() => setShowDelete(false)}
+          onDeleted={() => onItemDeleted?.(item.id)}
+        />
+      )}
+    </>
   )
 }
 
@@ -316,7 +645,7 @@ function PagesDropdown({ pages, basePath }) {
 
 /* ─── Folder Section ─── */
 
-function FolderSection({ folder, collapsed, onToggle, basePath, starred, onToggleStar }) {
+function FolderSection({ folder, collapsed, onToggle, basePath, starred, onToggleStar, onItemDeleted }) {
   return (
     <section className={collapsed ? css.folderSectionCollapsed : css.folderSection}>
       <button className={css.folderHeader} onClick={onToggle}>
@@ -337,6 +666,7 @@ function FolderSection({ folder, collapsed, onToggle, basePath, starred, onToggl
               basePath={basePath}
               starred={starred.has(item.id)}
               onToggleStar={onToggleStar}
+              onItemDeleted={onItemDeleted}
             />
           ))}
         </div>
@@ -753,6 +1083,74 @@ function BranchDropdown({ basePath }) {
   )
 }
 
+/* ─── User Settings Dialog ─── */
+
+function UserSettingsDialog({ open, onOpenChange, user, onRemoveToken }) {
+  const hasToken = (() => {
+    try { return !!localStorage.getItem(COMMENTS_TOKEN_KEY) } catch { return false }
+  })()
+  const scopes = user?.scopes || []
+  const isFineGrained = hasToken && scopes.length === 0
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Backdrop className={css.settingsBackdrop} />
+        <div className={css.settingsPopupWrap}>
+          <Dialog.Popup className={css.settingsPopup}>
+            <Dialog.Title className={css.settingsTitle}>Settings</Dialog.Title>
+            <Dialog.Close className={css.settingsCloseBtn} aria-label="Close">×</Dialog.Close>
+
+            {/* GitHub connection section */}
+            <div className={css.settingsSection}>
+              <div className={css.settingsSectionHeader}>
+                <ShieldLockIcon size={16} />
+                <span>GitHub Connection</span>
+              </div>
+
+              {hasToken ? (
+                <div className={css.settingsTokenCard}>
+                  <div className={css.settingsTokenRow}>
+                    <span className={css.settingsTokenLabel}>Token</span>
+                    <code className={css.settingsTokenValue}>••••••••••••••••</code>
+                  </div>
+                  <div className={css.settingsTokenRow}>
+                    <span className={css.settingsTokenLabel}>Permissions</span>
+                    <span className={css.settingsTokenValue}>
+                      {isFineGrained
+                        ? 'Fine-grained token'
+                        : scopes.map(s => <code key={s} className={css.settingsScope}>{s}</code>)
+                      }
+                    </span>
+                  </div>
+                  <button className={css.settingsRemoveBtn} onClick={onRemoveToken}>
+                    <TrashIcon size={14} />
+                    Remove token
+                  </button>
+                </div>
+              ) : (
+                <div className={css.settingsNoToken}>
+                  <p>No GitHub token configured.</p>
+                  <button
+                    className={css.settingsSignInBtn}
+                    onClick={() => {
+                      onOpenChange(false)
+                      document.dispatchEvent(new CustomEvent('storyboard:open-auth-modal'))
+                    }}
+                  >
+                    <MarkGithubIcon size={16} />
+                    Sign in with GitHub
+                  </button>
+                </div>
+              )}
+            </div>
+          </Dialog.Popup>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
 /* ─── Main Component ─── */
 
 export default function Viewfinder({
@@ -765,6 +1163,17 @@ export default function Viewfinder({
 }) {
   const shouldHideDefault = hideDefaultFlow ?? hideDefaultScene
   const themeAttrs = useToolbarTheme()
+  const ghUser = useGitHubUser(basePath)
+  const [settingsOpen, setSettingsOpen] = useState(false)
+
+  const handleRemoveToken = useCallback(() => {
+    try {
+      localStorage.removeItem(COMMENTS_TOKEN_KEY)
+      localStorage.removeItem(COMMENTS_USER_KEY)
+    } catch { /* ignore */ }
+    document.dispatchEvent(new CustomEvent('storyboard:auth-changed'))
+    setSettingsOpen(false)
+  }, [])
 
   // Build data index from real prototype/canvas/story data
   const knownRoutes = useMemo(() =>
@@ -860,20 +1269,23 @@ export default function Viewfinder({
   const [activeNav, setActiveNav] = useState('all')
   const [activeTab, setActiveTab] = useState('All')
   const [showCreate, setShowCreate] = useState(false)
+  const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const [groupByFolders, setGroupByFolders] = useState(() => {
     try { return localStorage.getItem(GROUP_BY_FOLDERS_KEY) !== 'false' } catch { return true }
   })
   const [collapsedFolders, setCollapsedFolders] = useState(new Set())
+  const [hiddenItems, setHiddenItems] = useState(new Set())
   const { starred, toggle: toggleStar } = useStarred()
   const recentIds = useRecent()
 
   // Filter by nav category
+  const typeMap = { prototypes: 'prototype', canvases: 'canvas', components: 'component' }
   const navFiltered = useMemo(() => {
-    if (activeNav === 'all') return allItems
-    const typeMap = { prototypes: 'prototype', canvases: 'canvas', components: 'component' }
-    return allItems.filter(i => i.type === typeMap[activeNav])
-  }, [allItems, activeNav])
+    let filtered = activeNav === 'all' ? allItems : allItems.filter(i => i.type === typeMap[activeNav])
+    if (hiddenItems.size > 0) filtered = filtered.filter(i => !hiddenItems.has(i.id))
+    return filtered
+  }, [allItems, activeNav, hiddenItems])
 
   // Filter by tab
   const items = useMemo(() => {
@@ -940,16 +1352,24 @@ export default function Viewfinder({
     })
   }, [])
 
+  const handleItemDeleted = useCallback((itemId) => {
+    setHiddenItems(prev => new Set(prev).add(itemId))
+  }, [])
+
   // Counts
+  const visibleItems = useMemo(() => 
+    hiddenItems.size > 0 ? allItems.filter(i => !hiddenItems.has(i.id)) : allItems
+  , [allItems, hiddenItems])
+
   const counts = useMemo(() => ({
-    all: allItems.length,
-    prototypes: allItems.filter(i => i.type === 'prototype').length,
-    canvases: allItems.filter(i => i.type === 'canvas').length,
-    components: allItems.filter(i => i.type === 'component').length,
-  }), [allItems])
+    all: visibleItems.length,
+    prototypes: visibleItems.filter(i => i.type === 'prototype').length,
+    canvases: visibleItems.filter(i => i.type === 'canvas').length,
+    components: visibleItems.filter(i => i.type === 'component').length,
+  }), [visibleItems])
 
   // Starred items for sidebar
-  const starredItems = useMemo(() => allItems.filter(i => starred.has(i.id)), [allItems, starred])
+  const starredItems = useMemo(() => visibleItems.filter(i => starred.has(i.id)), [visibleItems, starred])
 
   const pageTitle = NAV_ITEMS.find(n => n.id === activeNav)?.label || 'All artifacts'
 
@@ -973,18 +1393,20 @@ export default function Viewfinder({
         </div>
         <div className={css.topActions}>
           <BranchDropdown basePath={basePath} />
-          <Menu.Root open={showCreate} onOpenChange={setShowCreate}>
-            <Menu.Trigger className={css.createBtn}>
-              <PlusIcon size={14} /> Create
-            </Menu.Trigger>
-            <Menu.Portal>
-              <Menu.Positioner className={css.createDropdownPositioner} side="bottom" align="end" sideOffset={4}>
-                <Menu.Popup className={css.createDropdown}>
-                  <CreateMenu onClose={() => setShowCreate(false)} basePath={basePath} />
-                </Menu.Popup>
-              </Menu.Positioner>
-            </Menu.Portal>
-          </Menu.Root>
+          {isLocalDev && (
+            <Menu.Root open={showCreate} onOpenChange={setShowCreate}>
+              <Menu.Trigger className={css.createBtn}>
+                <PlusIcon size={14} /> Create
+              </Menu.Trigger>
+              <Menu.Portal>
+                <Menu.Positioner className={css.createDropdownPositioner} side="bottom" align="end" sideOffset={4}>
+                  <Menu.Popup className={css.createDropdown}>
+                    <CreateMenu onClose={() => setShowCreate(false)} basePath={basePath} />
+                  </Menu.Popup>
+                </Menu.Positioner>
+              </Menu.Portal>
+            </Menu.Root>
+          )}
         </div>
       </header>
 
@@ -1027,16 +1449,41 @@ export default function Viewfinder({
           ))}
           </div>
 
-          {/* User profile / login */}
+          {/* User profile / settings */}
           <div className={css.sidebarFooter}>
-            <button className={css.loginBtn} onClick={() => document.dispatchEvent(new CustomEvent('storyboard:open-auth-modal'))}>
-              <span className={css.avatar}><MarkGithubIcon size={16} /></span>
-              <div>
-                <div className={css.userName}>Sign in</div>
-                <div className={css.userSub}>Connect with GitHub</div>
+            {ghUser ? (
+              <div className={css.footerRow}>
+                <button className={css.userBtn} onClick={() => setSettingsOpen(true)}>
+                  <img
+                    className={css.userAvatar}
+                    src={ghUser.avatarUrl || `https://github.com/${ghUser.login}.png?size=64`}
+                    alt={ghUser.login}
+                    width={32}
+                    height={32}
+                  />
+                  <div className={css.userInfo}>
+                    <div className={css.userName}>{ghUser.login}</div>
+                  </div>
+                </button>
               </div>
-            </button>
+            ) : (
+              <div className={css.footerRow}>
+                <button className={css.loginBtn} onClick={() => document.dispatchEvent(new CustomEvent('storyboard:open-auth-modal'))}>
+                  <span className={css.avatar}><MarkGithubIcon size={16} /></span>
+                  <div>
+                    <div className={css.userName}>Sign in</div>
+                    <div className={css.userSub}>Connect with GitHub</div>
+                  </div>
+                </button>
+              </div>
+            )}
           </div>
+          <UserSettingsDialog
+            open={settingsOpen}
+            onOpenChange={setSettingsOpen}
+            user={ghUser}
+            onRemoveToken={handleRemoveToken}
+          />
         </aside>
 
         {/* ─── Main ─── */}
@@ -1071,7 +1518,7 @@ export default function Viewfinder({
                 {activeTab === 'Starred' && 'No starred items. Click ☆ on a card to star it.'}
                 {activeTab === 'All' && 'No items found. Create a prototype, canvas, or component to get started.'}
               </div>
-            ) : groupByFolders && grouped && activeTab === 'All' && activeNav === 'all' ? (
+            ) : groupByFolders && grouped && activeTab === 'All' ? (
               <>
                 {grouped.folders.map(folder => (
                   <FolderSection
@@ -1082,6 +1529,7 @@ export default function Viewfinder({
                     basePath={basePath}
                     starred={starred}
                     onToggleStar={toggleStar}
+                    onItemDeleted={handleItemDeleted}
                   />
                 ))}
                 {grouped.ungrouped.length > 0 && (
@@ -1093,6 +1541,7 @@ export default function Viewfinder({
                         basePath={basePath}
                         starred={starred.has(item.id)}
                         onToggleStar={toggleStar}
+                        onItemDeleted={handleItemDeleted}
                       />
                     ))}
                   </div>
@@ -1107,6 +1556,7 @@ export default function Viewfinder({
                     basePath={basePath}
                     starred={starred.has(item.id)}
                     onToggleStar={toggleStar}
+                    onItemDeleted={handleItemDeleted}
                   />
                 ))}
               </div>