feat(workspace): sidebar as a plain file explorer
This commit is contained in:
sandrodach committed
1 parent
6a5e82431f
commit
9f3c78dde0
2 files changed
+261
-105
No files matched your search
@@ -911,7 +911,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
);
|
||||
|
||||
const rootDocs = useMemo(
|
||||
() => docs.filter((d) => !d.folderPath),
|
||||
() => docs.filter((d) => !d.folderPath && !d.isPinned),
|
||||
[docs]
|
||||
);
|
||||
|
||||
@@ -1330,114 +1330,105 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
|
||||
{/* Scrollable Navigation Tree */}
|
||||
<div className="flex-1 overflow-y-auto p-2 space-y-3">
|
||||
{/* Pinned Notes */}
|
||||
{pinnedDocs.length > 0 && (
|
||||
{pinnedDocs.length === 0 && folderTree.length === 0 && rootDocs.length === 0 ? (
|
||||
<div className="px-2 py-2 text-xs text-muted">Noch keine Notizen</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="px-2 mb-1 flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider text-faint">
|
||||
<Pin className="w-3 h-3 text-status-warn" />
|
||||
<span>Angeheftet</span>
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
{pinnedDocs.map((d) => (
|
||||
<div
|
||||
key={`pin-${d.id}`}
|
||||
draggable
|
||||
onDragStart={(e) => handleDocDragStart(e, d.id)}
|
||||
onClick={() => {
|
||||
setSelectedDocId(d.id);
|
||||
setSubView('editor');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer border transition-colors ${
|
||||
selectedDocId === d.id && subView === 'editor'
|
||||
? 'bg-panel-elevated text-main font-semibold border-border/80'
|
||||
: 'border-transparent text-main hover:bg-panel-elevated'
|
||||
}`}
|
||||
>
|
||||
<span>{d.icon || '📝'}</span>
|
||||
<span className="truncate flex-1">{d.title || 'Unbenannte Notiz'}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Pinned Notes */}
|
||||
{pinnedDocs.length > 0 && (
|
||||
<div
|
||||
className={`space-y-0.5 ${
|
||||
folderTree.length > 0 || rootDocs.length > 0
|
||||
? 'border-b border-border pb-1.5 mb-1.5'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{pinnedDocs.map((d) => (
|
||||
<div
|
||||
key={`pin-${d.id}`}
|
||||
draggable
|
||||
onDragStart={(e) => handleDocDragStart(e, d.id)}
|
||||
onClick={() => {
|
||||
setSelectedDocId(d.id);
|
||||
setSubView('editor');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer border transition-colors ${
|
||||
selectedDocId === d.id && subView === 'editor'
|
||||
? 'bg-panel-elevated text-main font-semibold border-border/80'
|
||||
: 'border-transparent text-main hover:bg-panel-elevated'
|
||||
}`}
|
||||
>
|
||||
<span className="shrink-0">{d.icon || '📝'}</span>
|
||||
<span className="truncate flex-1">{d.title || 'Unbenannte Notiz'}</span>
|
||||
{d.sharedWith && d.sharedWith.length > 0 && (
|
||||
<Users className="w-3 h-3 text-status-ok shrink-0" />
|
||||
)}
|
||||
<Pin className="w-3 h-3 text-muted shrink-0" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Folders and Root Documents */}
|
||||
{(folderTree.length > 0 || rootDocs.length > 0) && (
|
||||
<div className="space-y-0.5">
|
||||
{folderTree.map((node) => (
|
||||
<FolderTreeItem
|
||||
key={node.fullPath}
|
||||
node={node}
|
||||
depth={0}
|
||||
expandedFolders={expandedFolders}
|
||||
setExpandedFolders={setExpandedFolders}
|
||||
selectedDocId={selectedDocId}
|
||||
subView={subView}
|
||||
dragOverFolder={dragOverFolder}
|
||||
setDragOverFolder={setDragOverFolder}
|
||||
handleDropOnFolder={handleDropOnFolder}
|
||||
handleFolderDragStart={handleFolderDragStart}
|
||||
handleDocDragStart={handleDocDragStart}
|
||||
handleCreateDocument={handleCreateDocument}
|
||||
handleOpenNewFolder={handleOpenNewFolder}
|
||||
handleShareFolderClick={handleShareFolderClick}
|
||||
handleDeleteFolder={handleDeleteFolder}
|
||||
onSelectDoc={(id) => {
|
||||
setSelectedDocId(id);
|
||||
setTargetBlockId(null);
|
||||
setNewlyCreatedDocId(null);
|
||||
setSubView('editor');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{rootDocs.map((d) => (
|
||||
<div
|
||||
key={d.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDocDragStart(e, d.id)}
|
||||
onClick={() => {
|
||||
setSelectedDocId(d.id);
|
||||
setSubView('editor');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer border transition-colors ${
|
||||
selectedDocId === d.id && subView === 'editor'
|
||||
? 'bg-panel-elevated text-main font-semibold border-border/80'
|
||||
: 'border-transparent text-main hover:bg-panel-elevated'
|
||||
}`}
|
||||
>
|
||||
<span className="shrink-0">{d.icon || '📝'}</span>
|
||||
<span className="truncate flex-1">{d.title || 'Unbenannte Notiz'}</span>
|
||||
{d.sharedWith && d.sharedWith.length > 0 && (
|
||||
<Users className="w-3 h-3 text-status-ok shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Folders Tree with Recursive Hierarchical Nesting */}
|
||||
{folderTree.length > 0 && (
|
||||
<div>
|
||||
<div className="px-2 mb-1 text-[10px] font-bold uppercase tracking-wider text-faint">
|
||||
Ordner
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
{folderTree.map((node) => (
|
||||
<FolderTreeItem
|
||||
key={node.fullPath}
|
||||
node={node}
|
||||
depth={0}
|
||||
expandedFolders={expandedFolders}
|
||||
setExpandedFolders={setExpandedFolders}
|
||||
selectedDocId={selectedDocId}
|
||||
subView={subView}
|
||||
dragOverFolder={dragOverFolder}
|
||||
setDragOverFolder={setDragOverFolder}
|
||||
handleDropOnFolder={handleDropOnFolder}
|
||||
handleFolderDragStart={handleFolderDragStart}
|
||||
handleDocDragStart={handleDocDragStart}
|
||||
handleCreateDocument={handleCreateDocument}
|
||||
handleOpenNewFolder={handleOpenNewFolder}
|
||||
handleShareFolderClick={handleShareFolderClick}
|
||||
handleDeleteFolder={handleDeleteFolder}
|
||||
onSelectDoc={(id) => {
|
||||
setSelectedDocId(id);
|
||||
setTargetBlockId(null);
|
||||
setNewlyCreatedDocId(null);
|
||||
setSubView('editor');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Root Documents */}
|
||||
<div>
|
||||
<div className="px-2 mb-1 text-[10px] font-bold uppercase tracking-wider text-faint">
|
||||
Notizen (Hauptebene)
|
||||
</div>
|
||||
{rootDocs.length === 0 ? (
|
||||
<div className="px-2 py-2 text-xs text-faint italic">
|
||||
Keine Notizen auf der Hauptebene.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-0.5">
|
||||
{rootDocs.map((d) => (
|
||||
<div
|
||||
key={d.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDocDragStart(e, d.id)}
|
||||
onClick={() => {
|
||||
setSelectedDocId(d.id);
|
||||
setSubView('editor');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-btn text-left text-xs cursor-pointer border transition-colors ${
|
||||
selectedDocId === d.id && subView === 'editor'
|
||||
? 'bg-panel-elevated text-main font-semibold border-border/80'
|
||||
: 'border-transparent text-main hover:bg-panel-elevated'
|
||||
}`}
|
||||
>
|
||||
<span>{d.icon || '📝'}</span>
|
||||
<span className="truncate flex-1">{d.title || 'Unbenannte Notiz'}</span>
|
||||
{d.sharedWith && d.sharedWith.length > 0 && (
|
||||
<Users className="w-3 h-3 text-status-ok shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom drop target for moving to root */}
|
||||
{(draggingDocId || draggingFolderPath) && (
|
||||
<div
|
||||
|
||||
Reference in new issue
Block a user