@dfosco/storyboard 0.7.0 → 0.8.1

package/src/internals/Viewfinder.jsx

@@ -5,12 +5,25 @@
  * Formerly known as Viewfinder — renamed to match the /workspace route.
  */
 import { useState, useEffect, useRef, useMemo, useCallback, useSyncExternalStore } from 'react'
-import { buildPrototypeIndex, listStories, getStoryData, BranchSelect, getCustomerModeConfig } from '../core/index.js'
-import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, PlusIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon, StackIcon, TrashIcon, ShieldLockIcon, KebabHorizontalIcon, PencilIcon } from '@primer/octicons-react'
+import {
+  buildPrototypeIndex,
+  listStories,
+  getStoryData,
+  BranchSelect,
+  getCustomerModeConfig,
+  trackRecent,
+  subscribeToRecent,
+  getRecentSnapshot,
+} from '../core/index.js'
+import { buildBranchArtifactHref, mergeArtifactIndexIntoPrototypeIndex } from '../core/data/artifactIndex.js'
+import { MarkGithubIcon, GitBranchIcon, ChevronDownIcon, ChevronRightIcon, PlusIcon, StarIcon, StarFillIcon, ThreeBarsIcon, XIcon, StackIcon, TrashIcon, ShieldLockIcon, KebabHorizontalIcon, PencilIcon, EyeClosedIcon } from '@primer/octicons-react'
 import { Menu } from '@base-ui/react/menu'
 import { Dialog } from '@base-ui/react/dialog'
+import Tooltip from './Tooltip.jsx'
 import Icon from './Icon.jsx'
 import { useBranches } from './BranchBar/useBranches.js'
+import { useArtifactIndex } from './hooks/useArtifactIndex.js'
+import BranchesDropdown from './BranchesDropdown/BranchesDropdown.jsx'
 import css from './Viewfinder.module.css'
 
 /* ─── Theme sync: read toolbar theme from DOM and apply to Primer/BaseUI ─── */
@@ -96,8 +109,6 @@ function useGitHubUser() {
 /* ─── localStorage helpers ─── */
 
 const STARRED_KEY = 'sb-workspace-starred'
-const RECENT_KEY = 'sb-workspace-recent'
-const MAX_RECENT = 30
 const GROUP_BY_FOLDERS_KEY = 'sb-workspace-group-folders'
 const COLLAPSED_FOLDERS_KEY = 'sb-workspace-collapsed-folders'
 
@@ -122,7 +133,6 @@ function createLocalStorageStore(key, fallback) {
 }
 
 const starredStore = createLocalStorageStore(STARRED_KEY, [])
-const recentStore = createLocalStorageStore(RECENT_KEY, [])
 
 function useStarred() {
   const raw = useSyncExternalStore(starredStore.subscribe, starredStore.getSnapshot)
@@ -135,15 +145,61 @@ function useStarred() {
   return { starred: new Set(ids), toggle }
 }
 
+/**
+ * Map a recent store entry `{type, key}` to the composite id used by the
+ * workspace `itemMap` (`proto:`, `canvas:`, `component:`).
+ *
+ * The unified recent store uses `'story'` as the canonical type for
+ * component/story artifacts (matches `core/stores/paletteProviders.js`),
+ * but the workspace's items use `'component'` for the same things.
+ */
+function recentEntryToItemId(entry) {
+  if (!entry || typeof entry.type !== 'string' || typeof entry.key !== 'string') return null
+  switch (entry.type) {
+    case 'prototype': return `proto:${entry.key}`
+    case 'canvas':    return `canvas:${entry.key}`
+    case 'story':
+    case 'component': return `component:${entry.key}`
+    default:          return `${entry.type}:${entry.key}`
+  }
+}
+
+/**
+ * Map a workspace `item.type` value to the canonical type stored in the
+ * recent artifacts store. The workspace uses `'component'` for stories
+ * but the recent store (shared with the command palette) uses `'story'`.
+ */
+function itemTypeToRecentType(itemType) {
+  if (itemType === 'component') return 'story'
+  return itemType
+}
+
 function useRecent() {
-  const raw = useSyncExternalStore(recentStore.subscribe, recentStore.getSnapshot)
-  return JSON.parse(raw)
+  const raw = useSyncExternalStore(subscribeToRecent, getRecentSnapshot)
+  return useMemo(() => {
+    try {
+      const entries = JSON.parse(raw)
+      if (!Array.isArray(entries)) return []
+      const ids = []
+      for (const entry of entries) {
+        const id = recentEntryToItemId(entry)
+        if (id) ids.push(id)
+      }
+      return ids
+    } catch {
+      return []
+    }
+  }, [raw])
 }
 
-function trackRecent(id) {
-  const current = readJSON(RECENT_KEY, [])
-  const next = [id, ...current.filter(x => x !== id)].slice(0, MAX_RECENT)
-  writeJSON(RECENT_KEY, next)
+function trackRecentItem(item) {
+  if (!item || !item.id) return
+  const colonIdx = item.id.indexOf(':')
+  if (colonIdx <= 0) return
+  const key = item.id.slice(colonIdx + 1)
+  const type = itemTypeToRecentType(item.type)
+  if (!type) return
+  trackRecent(type, key, item.name || key)
 }
 
 /* ─── URL helpers ─── */
@@ -440,18 +496,26 @@ function DeleteArtifactModal({ item, dirName, basePath, typeLabel, onClose, onDe
 
 /* ─── Artifact Card ─── */
 
-function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted }) {
-  const href = item.route ? withBase(basePath, item.route) : '#'
+function ArtifactCard({ item, basePath, branchBasePath, currentBranch, starred, onToggleStar, onItemDeleted }) {
+  const isBranchOnly = !!item.isBranchOnly
   const isExternal = item.isExternal
+  const branchOnlyHref = isBranchOnly
+    ? isExternal
+      ? item.externalUrl
+      : buildBranchArtifactHref(branchBasePath || basePath, item.homeBranch?.folder, item.homeBranch?.route || item.route)
+    : null
+  const href = item.route ? withBase(basePath, item.route) : '#'
 
   const handleClick = () => {
-    trackRecent(item.id)
+    if (!isBranchOnly) trackRecentItem(item)
   }
 
-  const Tag = isExternal ? 'a' : 'a'
-  const linkProps = isExternal
-    ? { href: item.externalUrl, target: '_blank', rel: 'noopener noreferrer' }
-    : { href }
+  const Tag = 'a'
+  const linkProps = isBranchOnly
+    ? { href: branchOnlyHref || '#', target: '_blank', rel: 'noopener noreferrer' }
+    : isExternal
+      ? { href: item.externalUrl, target: '_blank', rel: 'noopener noreferrer' }
+      : { href }
 
   const authorList = item.author
     ? (Array.isArray(item.author) ? item.author : [item.author])
@@ -463,17 +527,40 @@ function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted })
   // 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'
+  const canEditDelete = !isBranchOnly && (item.type === 'canvas' || item.type === 'prototype')
+  const cardClass = `${css.card}${item.isPrivate ? ' ' + css.cardPrivate : ''}${isBranchOnly ? ' ' + css.branchOnlyCard : ''}`
 
   return (
     <>
-      <Tag className={css.card} {...linkProps} onClick={handleClick}>
+      <Tag className={cardClass} {...linkProps} onClick={handleClick}>
         <div className={css.cardHeader}>
-          <span className={css.cardBadge}>{getTypeLabel(item.type)}</span>
+          <div className={css.cardBadgeGroup}>
+            <span className={css.cardBadge}>{getTypeLabel(item.type)}</span>
+            {isBranchOnly && <span className={css.branchOnlyBadge}>Branch-only</span>}
+            {item.isPrivate && !isBranchOnly && (
+              <Tooltip text={`${typeLabel} not published, only visible to you`} direction="n">
+                <button
+                  type="button"
+                  className={css.cardPrivateBadge}
+                  aria-label={`Private ${typeLabel.toLowerCase()}`}
+                  onClick={(e) => { e.preventDefault(); e.stopPropagation() }}
+                >
+                  <EyeClosedIcon size={12} />
+                </button>
+              </Tooltip>
+            )}
+          </div>
           <div className={css.cardActions}>
-            <StarBtn active={starred} onClick={() => onToggleStar(item.id)} inline />
-            {item.flows?.length > 1 && <FlowsDropdown flows={item.flows} basePath={basePath} />}
-            {item.pages?.length > 1 && <PagesDropdown pages={item.pages} basePath={basePath} />}
+            {!isBranchOnly && <StarBtn active={starred} onClick={() => onToggleStar(item.id)} inline />}
+            {!isBranchOnly && item.flows?.length > 1 && <FlowsDropdown flows={item.flows} basePath={basePath} />}
+            {!isBranchOnly && item.pages?.length > 1 && <PagesDropdown pages={item.pages} basePath={basePath} />}
+            <BranchesDropdown
+              branches={item.branches || []}
+              branchBasePath={branchBasePath}
+              currentBranch={currentBranch}
+              homeTitle={item.name}
+              homeFolder={item.folder}
+            />
             {canEditDelete && (
               <CardActionsMenu
                 typeLabel={typeLabel}
@@ -505,7 +592,7 @@ function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted })
           </div>
         </div>
       </Tag>
-      {showEdit && (
+      {showEdit && !isBranchOnly && (
         <EditArtifactModal
           item={item}
           dirName={dirName}
@@ -513,7 +600,7 @@ function ArtifactCard({ item, basePath, starred, onToggleStar, onItemDeleted })
           onClose={() => setShowEdit(false)}
         />
       )}
-      {showDelete && (
+      {showDelete && !isBranchOnly && (
         <DeleteArtifactModal
           item={item}
           dirName={dirName}
@@ -609,8 +696,12 @@ function PagesDropdown({ pages, basePath }) {
                 <a
                   href={withBase(basePath, page.route)}
                   className={css.flowsItemLink}
+                  title={page.isPrivate ? 'Local-only page — gitignored, dev-only' : undefined}
                 >
                   {page.name}
+                  {page.isPrivate && (
+                    <EyeClosedIcon size={12} className={css.flowsItemPrivateIcon} />
+                  )}
                 </a>
               </Menu.Item>
             ))}
@@ -623,18 +714,37 @@ function PagesDropdown({ pages, basePath }) {
 
 /* ─── Folder Section ─── */
 
-function FolderSection({ folder, collapsed, onToggle, basePath, starred, onToggleStar, onItemDeleted }) {
+function FolderSection({ folder, collapsed, onToggle, basePath, branchBasePath, currentBranch, starred, onToggleStar, onItemDeleted }) {
+  const sectionClass = collapsed ? css.folderSectionCollapsed : css.folderSection
   return (
-    <section className={collapsed ? css.folderSectionCollapsed : css.folderSection}>
-      <button className={css.folderHeader} onClick={onToggle}>
+    <section className={`${sectionClass}${folder.isPrivate ? ' ' + css.folderSectionPrivate : ''}`}>
+      <div
+        className={css.folderHeader}
+        role="button"
+        tabIndex={0}
+        onClick={onToggle}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle() } }}
+      >
         <Icon name={collapsed ? 'folder' : 'folder-open'} size={16} className={css.folderIcon} />
         <span className={css.folderName}>{folder.name}</span>
+        {folder.isPrivate && (
+          <Tooltip text="Folder not published, only visible to you" direction="n">
+            <button
+              type="button"
+              className={css.folderPrivateBadge}
+              aria-label="Private folder"
+              onClick={(e) => { e.preventDefault(); e.stopPropagation() }}
+            >
+              <EyeClosedIcon size={12} />
+            </button>
+          </Tooltip>
+        )}
         <span className={css.folderCount}>{folder.items.length}</span>
         <ChevronRightIcon
           size={14}
           className={collapsed ? css.folderChevron : css.folderChevronExpanded}
         />
-      </button>
+      </div>
       {!collapsed && (
         <div className={css.grid}>
           {folder.items.map(item => (
@@ -642,6 +752,8 @@ function FolderSection({ folder, collapsed, onToggle, basePath, starred, onToggl
               key={item.id}
               item={item}
               basePath={basePath}
+              branchBasePath={branchBasePath}
+              currentBranch={currentBranch}
               starred={starred.has(item.id)}
               onToggleStar={onToggleStar}
               onItemDeleted={onItemDeleted}
@@ -878,7 +990,7 @@ function CreateForm({ type, onClose, basePath }) {
 
 /* ─── Create Menu (Dropdown) ─── */
 
-function CreateMenu({ onClose, basePath }) {
+export function CreateMenu({ onClose, basePath }) {
   const [activeForm, setActiveForm] = useState(null)
   const [showMore, setShowMore] = useState(false)
 
@@ -956,6 +1068,7 @@ const NAV_ITEMS = [
 ]
 
 const TAB_FILTERS = ['All', 'Recent', 'Starred']
+const TYPE_MAP = { prototypes: 'prototype', canvases: 'canvas', components: 'component' }
 
 /* ─── Branch Navigation ─── */
 
@@ -970,7 +1083,17 @@ function BranchNav({ basePath }) {
   if (isLocalDev) return null
   if (!branches || branches.length === 0) return null
 
-  const branchNames = branches.map(b => b.branch)
+  // Ensure `main` is always present and sorted first. CI's `branches.json`
+  // historically lists only `branch--*/` folders, so `main` is missing on
+  // prod deploys — without this the <select> falls back to its first option
+  // (often something like `0.5.0-fix-…`) when the user is actually on main.
+  const branchNames = [
+    'main',
+    ...branches
+      .map(b => b.branch)
+      .filter(b => b && b !== 'main')
+      .sort((a, b) => a.localeCompare(b)),
+  ]
 
   const navigate = async (branch) => {
     if (switching) return
@@ -1093,6 +1216,8 @@ function WorkspaceImpl({
   basePath,
   title = 'Storyboard',
   subtitle,
+  logo,
+  logoIcon = 'iconoir/key-command',
   showAllArtifacts = false,
   showPrototypes = true,
   showCanvases = true,
@@ -1100,6 +1225,8 @@ function WorkspaceImpl({
 }) {
   const themeAttrs = useToolbarTheme()
   const ghUser = useGitHubUser(basePath)
+  const { currentBranch, branchBasePath } = useBranches(basePath)
+  const { artifactIndex } = useArtifactIndex(basePath)
   const [settingsOpen, setSettingsOpen] = useState(false)
 
   const handleRemoveToken = useCallback(() => {
@@ -1129,13 +1256,17 @@ function WorkspaceImpl({
   const knownRoutes = useMemo(() =>
     Object.keys(pageModules)
       .map(p => p.replace('/src/prototypes/', '').replace('.jsx', ''))
-      .filter(n => !n.startsWith('_') && n !== 'index' && n !== 'workspace' && n !== 'viewfinder'),
+      .filter(n => !n.startsWith('_') && n !== 'index' && n !== 'workspace' && n !== 'viewfinder' && n !== 'create'),
     [pageModules],
   )
 
   // canvasIndexTick is an intentional re-render trigger from HMR events
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const prototypeIndex = useMemo(() => buildPrototypeIndex(knownRoutes), [knownRoutes, canvasIndexTick])
+  const localPrototypeIndex = useMemo(() => buildPrototypeIndex(knownRoutes), [knownRoutes, canvasIndexTick])
+  const prototypeIndex = useMemo(
+    () => mergeArtifactIndexIntoPrototypeIndex(localPrototypeIndex, artifactIndex, currentBranch),
+    [localPrototypeIndex, artifactIndex, currentBranch],
+  )
 
   // Build unified items list from all sources
   const allItems = useMemo(() => {
@@ -1152,18 +1283,22 @@ function WorkspaceImpl({
           : `/${proto.dirName}`
 
       items.push({
-        id: `proto:${proto.dirName}`,
+        id: proto.id || `proto:${proto.dirName}`,
         name: proto.name,
         type: 'prototype',
         author: proto.author,
         gitAuthor: proto.gitAuthor,
         lastModified: proto.lastModified,
-        route,
+        route: proto.route || route,
         isExternal: proto.isExternal,
         externalUrl: proto.externalUrl,
         folder: proto.folder,
         description: proto.description,
         flows: proto.flows || [],
+        isPrivate: !!proto.isPrivate,
+        branches: proto.branches || [],
+        isBranchOnly: !!proto.isBranchOnly,
+        homeBranch: proto.homeBranch || null,
       })
     }
 
@@ -1175,18 +1310,22 @@ function WorkspaceImpl({
     // Canvases (ungrouped + from folders)
     const addCanvas = (canvas) => {
       items.push({
-        id: `canvas:${canvas.dirName}`,
+        id: canvas.id || `canvas:${canvas.dirName}`,
         name: canvas.name,
         type: 'canvas',
         author: canvas.author,
         gitAuthor: canvas.gitAuthor,
-        lastModified: null,
+        lastModified: canvas.lastModified || null,
         route: canvas.route,
         isExternal: false,
         externalUrl: null,
         folder: canvas.folder,
         description: canvas.description,
         pages: canvas.pages || null,
+        isPrivate: !!canvas.isPrivate,
+        branches: canvas.branches || [],
+        isBranchOnly: !!canvas.isBranchOnly,
+        homeBranch: canvas.homeBranch || null,
       })
     }
 
@@ -1200,9 +1339,10 @@ function WorkspaceImpl({
     for (const name of storyNames) {
       const data = getStoryData(name)
       if (!data) continue
+      const displayName = (name.split('/').pop() || name).replace(/^~/, '')
       items.push({
         id: `component:${name}`,
-        name: name.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
+        name: displayName.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
         type: 'component',
         author: null,
         gitAuthor: null,
@@ -1212,6 +1352,7 @@ function WorkspaceImpl({
         externalUrl: null,
         folder: null,
         description: null,
+        isPrivate: !!data._isPrivate || name.split('/').includes('drafts'),
       })
     }
 
@@ -1253,9 +1394,8 @@ function WorkspaceImpl({
   const recentIds = useRecent()
 
   // Filter by nav category
-  const typeMap = { prototypes: 'prototype', canvases: 'canvas', components: 'component' }
   const navFiltered = useMemo(() => {
-    let filtered = activeNav === 'all' ? allItems : allItems.filter(i => i.type === typeMap[activeNav])
+    let filtered = activeNav === 'all' ? allItems : allItems.filter(i => i.type === TYPE_MAP[activeNav])
     if (hiddenItems.size > 0) filtered = filtered.filter(i => !hiddenItems.has(i.id))
     return filtered
   }, [allItems, activeNav, hiddenItems])
@@ -1263,15 +1403,14 @@ function WorkspaceImpl({
   // Filter by tab
   const items = useMemo(() => {
     if (activeTab === 'Recent') {
-      const ordered = recentIds.map(id => itemMap[id]).filter(Boolean)
+      const ordered = recentIds.map(id => itemMap[id]).filter(item => item && !item.isBranchOnly)
       if (activeNav !== 'all') {
-        const typeMap = { prototypes: 'prototype', canvases: 'canvas', components: 'component' }
-        return ordered.filter(i => i.type === typeMap[activeNav])
+        return ordered.filter(i => i.type === TYPE_MAP[activeNav])
       }
       return ordered
     }
     const base = activeTab === 'Starred'
-      ? navFiltered.filter(i => starred.has(i.id))
+      ? navFiltered.filter(i => !i.isBranchOnly && starred.has(i.id))
       : navFiltered
     return [...base].sort((a, b) => {
       const aTime = a.lastModified ? new Date(a.lastModified).getTime() : 0
@@ -1298,6 +1437,7 @@ function WorkspaceImpl({
     const folders = Object.entries(folderItems).map(([dirName, fItems]) => ({
       dirName,
       name: folderMeta[dirName]?.name || dirName,
+      isPrivate: !!folderMeta[dirName]?.isPrivate || dirName === 'drafts',
       items: fItems,
     }))
     folders.sort((a, b) => {
@@ -1343,7 +1483,7 @@ function WorkspaceImpl({
   }), [visibleItems])
 
   // Starred items for sidebar
-  const starredItems = useMemo(() => visibleItems.filter(i => starred.has(i.id)), [visibleItems, starred])
+  const starredItems = useMemo(() => visibleItems.filter(i => !i.isBranchOnly && starred.has(i.id)), [visibleItems, starred])
 
   return (
     <div className={css.layout} {...themeAttrs}>
@@ -1357,7 +1497,9 @@ function WorkspaceImpl({
           >
             {sidebarOpen ? <XIcon size={18} /> : <ThreeBarsIcon size={18} />}
           </button>
-          <div className={`${css.logo} smooth-corners`}><Icon name="iconoir/key-command" size={22} color="#fff" /></div>
+          {logo
+            ? <div className={`${css.logo} smooth-corners`}>{logo}</div>
+            : <div className={`${css.logo} smooth-corners`}><Icon name={logoIcon} size={22} color="#fff" /></div>}
           <div>
             <div className={css.appName}>{title}</div>
             {subtitle && <div className={css.appSubtitle}>{subtitle}</div>}
@@ -1413,7 +1555,7 @@ function WorkspaceImpl({
               className={css.starredItem}
               href={s.isExternal ? s.externalUrl : withBase(basePath, s.route)}
               {...(s.isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-              onClick={() => trackRecent(s.id)}
+              onClick={() => trackRecentItem(s)}
             >
               <span className={css.starredIcon}>{getTypeIcon(s.type)}</span>
               {s.name}
@@ -1499,6 +1641,8 @@ function WorkspaceImpl({
                     collapsed={collapsedFolders.has(folder.dirName)}
                     onToggle={() => toggleFolder(folder.dirName)}
                     basePath={basePath}
+                    branchBasePath={branchBasePath}
+                    currentBranch={currentBranch}
                     starred={starred}
                     onToggleStar={toggleStar}
                     onItemDeleted={handleItemDeleted}
@@ -1511,6 +1655,8 @@ function WorkspaceImpl({
                         key={item.id}
                         item={item}
                         basePath={basePath}
+                        branchBasePath={branchBasePath}
+                        currentBranch={currentBranch}
                         starred={starred.has(item.id)}
                         onToggleStar={toggleStar}
                         onItemDeleted={handleItemDeleted}
@@ -1526,6 +1672,8 @@ function WorkspaceImpl({
                     key={item.id}
                     item={item}
                     basePath={basePath}
+                    branchBasePath={branchBasePath}
+                    currentBranch={currentBranch}
                     starred={starred.has(item.id)}
                     onToggleStar={toggleStar}
                     onItemDeleted={handleItemDeleted}

package/src/internals/Viewfinder.module.css

@@ -642,6 +642,23 @@
   color: inherit;
 }
 
+.cardPrivate {
+  opacity: 0.8;
+}
+
+.cardPrivate:hover {
+  opacity: 1;
+}
+
+.branchOnlyCard {
+  background: var(--bgColor-muted, #f6f8fa);
+  border-color: var(--borderColor-muted, #d8dee4);
+}
+
+.branchOnlyCard:hover {
+  border-color: var(--borderColor-accent-muted, #54aeff66);
+}
+
 .cardThumb {
   height: 140px;
   background: var(--bgColor-muted, #f5f5f5);
@@ -663,6 +680,33 @@
   color: var(--fgColor-muted, #555);
 }
 
+.branchOnlyBadge {
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  background: var(--bgColor-accent-muted, #ddf4ff);
+  color: var(--fgColor-accent, #0969da);
+}
+
+.cardPrivateBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fgColor-muted, #656d76);
+  background: none;
+  border: none;
+  padding: 2px;
+}
+
+.cardBadgeGroup {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
 /* Icon buttons (star, flows, etc.) */
 
 .iconBtn {
@@ -1036,6 +1080,25 @@
   flex: 1;
 }
 
+.folderSectionPrivate {
+  opacity: 0.8;
+}
+
+.folderSectionPrivate:hover {
+  opacity: 1;
+}
+
+.folderPrivateBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fgColor-muted, #656d76);
+  background: none;
+  border: none;
+  padding: 2px;
+  margin-right: 6px;
+}
+
 .folderCount {
   font-size: 14px;
   font-weight: 400;
@@ -1119,11 +1182,19 @@
 }
 
 .flowsItemLink {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 6px;
   color: inherit;
   text-decoration: none;
 }
 
+.flowsItemPrivateIcon {
+  color: var(--fgColor-muted, #656d76);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 /* Avatar stack */
 
 .avatarStack {