diff --git a/apps/browser-extension/src/entrypoints/popup/components/Folders/FolderBreadcrumb.tsx b/apps/browser-extension/src/entrypoints/popup/components/Folders/FolderBreadcrumb.tsx index 3e96d4f1b..229c8520a 100644 --- a/apps/browser-extension/src/entrypoints/popup/components/Folders/FolderBreadcrumb.tsx +++ b/apps/browser-extension/src/entrypoints/popup/components/Folders/FolderBreadcrumb.tsx @@ -17,11 +17,6 @@ type FolderBreadcrumbProps = { * If null/undefined, no breadcrumbs are shown. */ folderId: string | null | undefined; - /** - * Optional refresh key to force re-computation of breadcrumbs - * (e.g., when folder is renamed). - */ - refreshKey?: number; /** * Optional root path to navigate to when clicking the root breadcrumb. * Defaults to '/items'. @@ -40,7 +35,6 @@ type FolderBreadcrumbProps = { */ const FolderBreadcrumb: React.FC = ({ folderId, - refreshKey = 0, rootPath = '/items', rootLabel, }) => { diff --git a/apps/browser-extension/src/entrypoints/popup/pages/items/ItemsList.tsx b/apps/browser-extension/src/entrypoints/popup/pages/items/ItemsList.tsx index 1dfa59867..4d93209db 100644 --- a/apps/browser-extension/src/entrypoints/popup/pages/items/ItemsList.tsx +++ b/apps/browser-extension/src/entrypoints/popup/pages/items/ItemsList.tsx @@ -24,6 +24,7 @@ import type { Folder } from '@/utils/db/repositories/FolderRepository'; import type { CredentialSortOrder } from '@/utils/db/repositories/SettingsRepository'; import type { Item, ItemType } from '@/utils/dist/core/models/vault'; import { ItemTypes } from '@/utils/dist/core/models/vault'; +import { canHaveSubfolders } from '@/utils/folderUtils'; import { LocalPreferencesService } from '@/utils/LocalPreferencesService'; import { useMinDurationLoading } from '@/hooks/useMinDurationLoading'; @@ -568,6 +569,21 @@ const ItemsList: React.FC = () => { const folders = getFoldersWithCounts(); + /** + * Check if the current folder can have subfolders (not at max depth). + * At root level (currentFolderId = null), we can always create folders. + */ + const canCreateSubfolder = useMemo(() => { + if (!currentFolderId) { + return true; // Root level, always allowed + } + if (!dbContext?.sqliteClient) { + return false; + } + const allFolders = dbContext.sqliteClient.folders.getAll(); + return canHaveSubfolders(currentFolderId, allFolders); + }, [currentFolderId, dbContext?.sqliteClient]); + /** * Check if all items are in folders (no items at root level but items exist in folders). * This is used to show a helpful message when the user has imported credentials that were all in folders. @@ -911,28 +927,32 @@ const ItemsList: React.FC = () => { ) : hasItemsInFoldersOnly && filteredItems.length === 0 && !currentFolderId && !searchTerm ? ( /* Show message when all items are in folders and we're at root level */ <> - {/* Folders as inline pills */} -
- {folders.map(folder => ( - handleFolderClick(folder.id, folder.name)} - /> - ))} - -
+ {/* Folders as inline pills - only render wrapper if there are folders OR if we can create subfolders */} + {(folders.length > 0 || canCreateSubfolder) && ( +
+ {folders.map(folder => ( + handleFolderClick(folder.id, folder.name)} + /> + ))} + {canCreateSubfolder && ( + + )} +
+ )}

{t('items.allItemsInFolders')}

@@ -942,7 +962,8 @@ const ItemsList: React.FC = () => { {/* Folders as inline pills - show when not searching */} {/* At root: show only if showFolders is enabled */} {/* Inside folder: always show subfolders and create button */} - {!searchTerm && (currentFolderId || showFolders) && ( + {/* Only render wrapper if there are folders OR if we can create subfolders */} + {!searchTerm && (currentFolderId || showFolders) && (folders.length > 0 || canCreateSubfolder) && (
{folders.map(folder => ( { onClick={() => handleFolderClick(folder.id, folder.name)} /> ))} - + {canCreateSubfolder && ( + + )}
)} diff --git a/apps/browser-extension/src/utils/folderUtils.ts b/apps/browser-extension/src/utils/folderUtils.ts index b368f1730..9ad535c77 100644 --- a/apps/browser-extension/src/utils/folderUtils.ts +++ b/apps/browser-extension/src/utils/folderUtils.ts @@ -2,8 +2,10 @@ import type { Folder } from './db/repositories/FolderRepository'; /** * Maximum allowed folder nesting depth. + * Structure: Root (0) > Level 1 (1) > Level 2 (2) > Level 3 (3) > Level 4 (4) + * Folders at depth 4 cannot have subfolders. */ -export const MAX_FOLDER_DEPTH = 5; +export const MAX_FOLDER_DEPTH = 4; /** * Folder tree node with hierarchical structure.