feat(workspace): align workspace UI with tasks and lists, add top tabs and collapsible sidebar
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 58s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 58s
This commit is contained in:
sandrodach committed
1 parent
7baab8faa2
commit
59ddca91f3
2 files changed
+252
-362
No files matched your search
@@ -19,6 +19,9 @@ import {
|
||||
Sparkles,
|
||||
ArrowLeft,
|
||||
CheckSquare,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
ChevronLeft,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
Document,
|
||||
@@ -268,6 +271,23 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
const [newFolderName, setNewFolderName] = useState<string>('');
|
||||
const [newFolderIsShared, setNewFolderIsShared] = useState<boolean>(false);
|
||||
const [mobileShowDetail, setMobileShowDetail] = useState<boolean>(Boolean(initialDocId));
|
||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState<boolean>(() => {
|
||||
try {
|
||||
return localStorage.getItem('mindsift:workspace_sidebar_collapsed') === 'true';
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
const toggleSidebar = useCallback(() => {
|
||||
setIsSidebarCollapsed((prev) => {
|
||||
const next = !prev;
|
||||
try {
|
||||
localStorage.setItem('mindsift:workspace_sidebar_collapsed', String(next));
|
||||
} catch {}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Drag and Drop state
|
||||
const [draggingDocId, setDraggingDocId] = useState<string | null>(null);
|
||||
@@ -1003,117 +1023,155 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
}, [tagsSummary, tagSearchQuery, tagSortBy]);
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-4rem)] bg-canvas rounded-card border border-border overflow-hidden shadow-panel">
|
||||
{/* LEFT MASTER SIDEBAR */}
|
||||
<aside
|
||||
className={`${
|
||||
mobileShowDetail ? 'hidden lg:flex' : 'flex'
|
||||
} w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-canvas border-r border-border`}
|
||||
>
|
||||
{/* Sidebar Header & Actions */}
|
||||
<div className="p-3 border-b border-border space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xs font-bold text-main uppercase tracking-wider">
|
||||
Notizen & Outliner
|
||||
</h2>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewFolderModal(true)}
|
||||
className="btn-action p-1 text-muted hover:text-main"
|
||||
title="Neuer Ordner"
|
||||
>
|
||||
<FolderPlus className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleCreateDocument('')}
|
||||
className="h-7 px-2.5 bg-canvas hover:bg-panel border border-border border-dashed rounded-btn text-xs text-muted hover:text-main inline-flex items-center gap-1 transition-colors cursor-pointer"
|
||||
title="Neue Notiz anlegen"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<span>Notiz</span>
|
||||
</button>
|
||||
<div className="w-full space-y-3">
|
||||
{/* Top Header: Workspace Tabs & Actions */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
|
||||
{/* Workspace selector tabs */}
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('editor')}
|
||||
className={`h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer ${
|
||||
subView === 'editor'
|
||||
? 'bg-panel border-accent text-main'
|
||||
: 'bg-canvas border-border text-muted hover:text-main'
|
||||
}`}
|
||||
>
|
||||
<FileText className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Notizen</span>
|
||||
{docs.length > 0 && <span className="ml-1 badge-neutral text-[10px]">{docs.length}</span>}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSubView('todos');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
className={`h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer ${
|
||||
subView === 'todos'
|
||||
? 'bg-panel border-accent text-main'
|
||||
: 'bg-canvas border-border text-muted hover:text-main'
|
||||
}`}
|
||||
>
|
||||
<Check className="w-3.5 h-3.5 text-status-ok" />
|
||||
<span>To-Dos</span>
|
||||
{totalOpenTodos > 0 && <span className="ml-1 badge-neutral text-[10px]">{totalOpenTodos}</span>}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSubView('tags');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
className={`h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer ${
|
||||
subView === 'tags' || subView === 'tag_detail'
|
||||
? 'bg-panel border-accent text-main'
|
||||
: 'bg-canvas border-border text-muted hover:text-main'
|
||||
}`}
|
||||
>
|
||||
<Hash className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Hashtags</span>
|
||||
{tagsSummary.length > 0 && <span className="ml-1 badge-neutral text-[10px]">{tagsSummary.length}</span>}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Right Action buttons */}
|
||||
<div className="flex items-center gap-2">
|
||||
{subView === 'editor' && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleSidebar}
|
||||
className={`hidden sm:flex h-8 px-2.5 text-xs font-medium border rounded-btn transition-colors items-center gap-1.5 cursor-pointer ${
|
||||
isSidebarCollapsed
|
||||
? 'bg-panel border-accent text-accent'
|
||||
: 'bg-canvas border-border text-muted hover:text-main'
|
||||
}`}
|
||||
title={isSidebarCollapsed ? 'Ordnerleiste einblenden' : 'Ordnerleiste einklappen'}
|
||||
>
|
||||
{isSidebarCollapsed ? (
|
||||
<PanelLeftOpen className="w-3.5 h-3.5" />
|
||||
) : (
|
||||
<PanelLeftClose className="w-3.5 h-3.5" />
|
||||
)}
|
||||
<span>{isSidebarCollapsed ? 'Ordner anzeigen' : 'Ordner einklappen'}</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleCreateDocument('')}
|
||||
className="h-8 px-2.5 bg-canvas hover:bg-panel border border-border border-dashed rounded-btn text-xs text-muted hover:text-main flex items-center gap-1 transition-colors cursor-pointer"
|
||||
title="Neue Notiz anlegen"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<span>Neue Notiz</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Workspace Split Pane */}
|
||||
<div className="flex h-[calc(100vh-7.5rem)] bg-canvas rounded-card border border-border overflow-hidden shadow-panel">
|
||||
{/* LEFT MASTER SIDEBAR */}
|
||||
<aside
|
||||
className={`${
|
||||
isSidebarCollapsed
|
||||
? 'hidden'
|
||||
: mobileShowDetail
|
||||
? 'hidden lg:flex'
|
||||
: 'flex'
|
||||
} w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-canvas border-r border-border transition-all duration-200`}
|
||||
>
|
||||
{/* Sidebar Header & Actions */}
|
||||
<div className="p-3 border-b border-border space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xs font-bold text-main uppercase tracking-wider">
|
||||
Notizen & Outliner
|
||||
</h2>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewFolderModal(true)}
|
||||
className="btn-action p-1 text-muted hover:text-main"
|
||||
title="Neuer Ordner"
|
||||
>
|
||||
<FolderPlus className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleCreateDocument('')}
|
||||
className="h-7 px-2.5 bg-canvas hover:bg-panel border border-border border-dashed rounded-btn text-xs text-muted hover:text-main inline-flex items-center gap-1 transition-colors cursor-pointer"
|
||||
title="Neue Notiz anlegen"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<span>Notiz</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
<div className="relative">
|
||||
<Search className="w-3.5 h-3.5 text-faint absolute left-2.5 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Notizen oder #Tags suchen…"
|
||||
className="input-field w-full pl-8 pr-6 py-1 text-xs"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-faint hover:text-main"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
<div className="relative">
|
||||
<Search className="w-3.5 h-3.5 text-faint absolute left-2.5 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Notizen oder #Tags suchen…"
|
||||
className="input-field w-full pl-8 pr-6 py-1 text-xs"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-faint hover:text-main"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sub-view Switcher: Notizen vs. To-Dos vs. Hashtags */}
|
||||
<div className="grid grid-cols-3 gap-1 p-0.5 rounded-btn bg-canvas border border-border text-xs">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('editor')}
|
||||
className={`py-1.5 px-1 rounded-btn font-medium transition-colors flex items-center justify-center gap-1 cursor-pointer truncate ${
|
||||
subView === 'editor'
|
||||
? 'bg-panel-elevated text-main font-semibold shadow-xs'
|
||||
: 'text-muted hover:text-main'
|
||||
}`}
|
||||
title="Notizen & Dokumente"
|
||||
>
|
||||
<FileText className="w-3.5 h-3.5 text-accent shrink-0" />
|
||||
<span className="truncate">Notizen</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSubView('todos');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
className={`py-1.5 px-1 rounded-btn font-medium transition-colors flex items-center justify-center gap-1 cursor-pointer truncate ${
|
||||
subView === 'todos'
|
||||
? 'bg-panel-elevated text-main font-semibold shadow-xs'
|
||||
: 'text-muted hover:text-main'
|
||||
}`}
|
||||
title="To-Dos Rollup"
|
||||
>
|
||||
<Check className="w-3.5 h-3.5 text-status-ok shrink-0" />
|
||||
<span className="truncate">To-Dos</span>
|
||||
{totalOpenTodos > 0 && (
|
||||
<span className="badge-neutral text-[9px] px-1 py-0">{totalOpenTodos}</span>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSubView('tags');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
className={`py-1.5 px-1 rounded-btn font-medium transition-colors flex items-center justify-center gap-1 cursor-pointer truncate ${
|
||||
subView === 'tags' || subView === 'tag_detail'
|
||||
? 'bg-panel-elevated text-main font-semibold shadow-xs'
|
||||
: 'text-muted hover:text-main'
|
||||
}`}
|
||||
title="Hashtag Kacheln & Übersicht"
|
||||
>
|
||||
<Hash className="w-3.5 h-3.5 text-accent shrink-0" />
|
||||
<span className="truncate">Hashtags</span>
|
||||
{tagsSummary.length > 0 && (
|
||||
<span className="badge-neutral text-[9px] px-1 py-0">{tagsSummary.length}</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scrollable Navigation Tree */}
|
||||
<div className="flex-1 overflow-y-auto p-2 space-y-3">
|
||||
{/* Drop target for moving docs or folders to root */}
|
||||
@@ -1273,7 +1331,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
{/* RIGHT DETAIL AREA (STRICTLY ISOLATED BY KEY) */}
|
||||
<main
|
||||
className={`${
|
||||
mobileShowDetail ? 'flex' : 'hidden lg:flex'
|
||||
mobileShowDetail ? 'flex' : isSidebarCollapsed ? 'flex' : 'hidden lg:flex'
|
||||
} flex-1 flex-col min-w-0 h-full overflow-hidden bg-canvas`}
|
||||
>
|
||||
{subView === 'editor' && selectedDocId ? (
|
||||
@@ -1298,49 +1356,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
========================================================================= */
|
||||
<div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
|
||||
<div className="max-w-4xl mx-auto space-y-5">
|
||||
{/* Top Navigation Tabs */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-3">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('editor')}
|
||||
className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
|
||||
>
|
||||
<FileText className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Notizen</span>
|
||||
<span className="badge-neutral text-[10px]">{docs.length}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSubView('todos');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
|
||||
>
|
||||
<Check className="w-3.5 h-3.5 text-status-ok" />
|
||||
<span>To-Dos</span>
|
||||
<span className="badge-neutral text-[10px]">{totalOpenTodos}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-panel border-accent text-main font-semibold shadow-xs"
|
||||
>
|
||||
<Hash className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Hashtags</span>
|
||||
<span className="badge-neutral text-[10px]">{tagsSummary.length}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('editor')}
|
||||
className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
|
||||
>
|
||||
Zum Editor
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Header with Title and Search Controls */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
@@ -1507,58 +1522,16 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
) : subView === 'tag_detail' && selectedTag ? (
|
||||
<div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
|
||||
<div className="max-w-3xl mx-auto space-y-4">
|
||||
{/* Top Navigation Tabs */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-3">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('editor')}
|
||||
className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
|
||||
>
|
||||
<FileText className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Notizen</span>
|
||||
<span className="badge-neutral text-[10px]">{docs.length}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSubView('todos');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
|
||||
>
|
||||
<Check className="w-3.5 h-3.5 text-status-ok" />
|
||||
<span>To-Dos</span>
|
||||
<span className="badge-neutral text-[10px]">{totalOpenTodos}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('tags')}
|
||||
className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-panel border-accent text-main font-semibold shadow-xs"
|
||||
>
|
||||
<Hash className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Hashtags</span>
|
||||
<span className="badge-neutral text-[10px]">{tagsSummary.length}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('tags')}
|
||||
className="btn-action inline-flex items-center gap-1 px-2.5 py-1 text-xs text-muted hover:text-main cursor-pointer"
|
||||
>
|
||||
<ArrowLeft className="w-3.5 h-3.5" />
|
||||
<span>Alle Kacheln</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('editor')}
|
||||
className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
|
||||
>
|
||||
Zum Editor
|
||||
</button>
|
||||
</div>
|
||||
{/* Back to all tags */}
|
||||
<div className="flex items-center justify-between border-b border-border pb-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('tags')}
|
||||
className="btn-action inline-flex items-center gap-1.5 px-2.5 py-1 text-xs text-muted hover:text-main cursor-pointer"
|
||||
>
|
||||
<ArrowLeft className="w-3.5 h-3.5" />
|
||||
<span>Alle Hashtag-Kacheln</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tag Context Header */}
|
||||
@@ -1755,49 +1728,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
) : subView === 'todos' ? (
|
||||
<div className="flex-1 overflow-y-auto p-4 sm:p-8 bg-canvas">
|
||||
<div className="max-w-3xl mx-auto space-y-4">
|
||||
{/* Top Navigation Tabs */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-3">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('editor')}
|
||||
className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
|
||||
>
|
||||
<FileText className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Notizen</span>
|
||||
<span className="badge-neutral text-[10px]">{docs.length}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-panel border-accent text-main font-semibold shadow-xs"
|
||||
>
|
||||
<Check className="w-3.5 h-3.5 text-status-ok" />
|
||||
<span>To-Dos</span>
|
||||
<span className="badge-neutral text-[10px]">{totalOpenTodos}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSubView('tags');
|
||||
setMobileShowDetail(true);
|
||||
}}
|
||||
className="h-8 px-3 text-xs font-medium border rounded-btn transition-colors flex items-center gap-1.5 cursor-pointer bg-canvas border-border text-muted hover:text-main"
|
||||
>
|
||||
<Hash className="w-3.5 h-3.5 text-accent" />
|
||||
<span>Hashtags</span>
|
||||
<span className="badge-neutral text-[10px]">{tagsSummary.length}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('editor')}
|
||||
className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
|
||||
>
|
||||
Zum Editor
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between border-b border-border pb-3 gap-2">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-main">
|
||||
@@ -1865,14 +1795,6 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
<span>Ordner</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubView('editor')}
|
||||
className="btn-action px-3 py-1 text-xs text-main cursor-pointer"
|
||||
>
|
||||
Zum Editor
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2272,16 +2194,30 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
Keine Notiz ausgewählt
|
||||
</h3>
|
||||
<p className="text-xs text-muted max-w-sm mb-3">
|
||||
Wähle links in der Seitenleiste eine bestehende Notiz aus oder erstelle eine neue.
|
||||
{isSidebarCollapsed
|
||||
? 'Die Ordnerleiste ist eingeklappt. Blende sie ein oder erstelle eine neue Notiz.'
|
||||
: 'Wähle links in der Seitenleiste eine bestehende Notiz aus oder erstelle eine neue.'}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleCreateDocument('')}
|
||||
className="btn-primary inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<span>Notiz erstellen</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
{isSidebarCollapsed && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleSidebar}
|
||||
className="btn-action inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold cursor-pointer"
|
||||
>
|
||||
<PanelLeftOpen className="w-3.5 h-3.5" />
|
||||
<span>Ordner anzeigen</span>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleCreateDocument('')}
|
||||
className="btn-primary inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
<span>Notiz erstellen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
@@ -2402,6 +2338,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user