feat: add breadcrumbs to folder setting (#296)

src-web/commands/openFolderSettings.tsx

@@ -1,21 +1,14 @@
 import { getModel } from '@yaakapp-internal/models';
-import { Icon } from '../components/core/Icon';
-import { HStack } from '../components/core/Stacks';
 import type { FolderSettingsTab } from '../components/FolderSettingsDialog';
 import { FolderSettingsDialog } from '../components/FolderSettingsDialog';
 import { showDialog } from '../lib/dialog';
-import { resolvedModelName } from '../lib/resolvedModelName';
 
 export function openFolderSettings(folderId: string, tab?: FolderSettingsTab) {
   const folder = getModel('folder', folderId);
+  if (folder == null) return;
   showDialog({
     id: 'folder-settings',
-    title: (
+    title: null,
-      <HStack space={2} alignItems="center">
-        <Icon icon="folder_cog" size="xl" color="secondary" />
-        {resolvedModelName(folder)}
-      </HStack>
-    ),
     size: 'lg',
     className: 'h-[50rem]',
     noPadding: true,

src-web/components/FolderSettingsDialog.tsx

@@ -1,12 +1,18 @@
-import { createWorkspaceModel, foldersAtom, patchModel } from '@yaakapp-internal/models';
+import {
+  createWorkspaceModel,
+  foldersAtom,
+  patchModel,
+} from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
-import { useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import { useAuthTab } from '../hooks/useAuthTab';
 import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
 import { useHeadersTab } from '../hooks/useHeadersTab';
 import { useInheritedHeaders } from '../hooks/useInheritedHeaders';
+import { useModelAncestors } from '../hooks/useModelAncestors';
 import { Button } from './core/Button';
 import { CountBadge } from './core/CountBadge';
+import { Icon } from './core/Icon';
 import { Input } from './core/Input';
 import { Link } from './core/Link';
 import { VStack } from './core/Stacks';
@@ -37,6 +43,8 @@ export type FolderSettingsTab =
 export function FolderSettingsDialog({ folderId, tab }: Props) {
   const folders = useAtomValue(foldersAtom);
   const folder = folders.find((f) => f.id === folderId) ?? null;
+  const ancestors = useModelAncestors(folder);
+  const breadcrumbs = useMemo(() => ancestors.toReversed(), [ancestors]);
   const authTab = useAuthTab(TAB_AUTH, folder);
   const headersTab = useHeadersTab(TAB_HEADERS, folder);
   const inheritedHeaders = useInheritedHeaders(folder);
@@ -67,10 +75,40 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
   if (folder == null) return null;
 
   return (
+    <div className="h-full flex flex-col">
+      <div className="flex items-center gap-3 px-6 pr-10 mt-4 mb-2 min-w-0 text-xl">
+        <Icon icon="folder_cog" size="lg" color="secondary" className="flex-shrink-0" />
+        <div className="flex items-center gap-1.5 font-semibold text-text min-w-0 overflow-hidden flex-1">
+          {breadcrumbs.map((item, index) => (
+            <Fragment key={item.id}>
+              {index > 0 && (
+                <Icon
+                  icon="chevron_right"
+                  size="lg"
+                  className="opacity-50 flex-shrink-0"
+                />
+              )}
+              <span className="text-text-subtle truncate min-w-0" title={item.name}>
+                {item.name}
+              </span>
+            </Fragment>
+          ))}
+          {breadcrumbs.length > 0 && (
+            <Icon icon="chevron_right" size="lg" className="opacity-50 flex-shrink-0" />
+          )}
+          <span
+            className="whitespace-nowrap"
+            title={folder.name}
+          >
+            {folder.name}
+          </span>
+        </div>
+      </div>
+
       <Tabs
         defaultValue={tab ?? TAB_GENERAL}
         label="Folder Settings"
-      className="pt-2 pb-2 pl-3 pr-1"
+        className="pt-2 pb-2 pl-3 pr-1 flex-1"
         layout="horizontal"
         addBorders
         tabs={tabs}
@@ -138,5 +176,6 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
           )}
         </TabContent>
       </Tabs>
+    </div>
   );
 }

src-web/components/Workspace.tsx

@@ -135,6 +135,7 @@ export function Workspace() {
           open={!floatingSidebarHidden}
           portalName="sidebar"
           onClose={() => setFloatingSidebarHidden(true)}
+          zIndex={20}
         >
           <m.div
             initial={{ opacity: 0, x: -20 }}