From 3fcd164fd838dad07492728947f52a192c20efd1 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 26 Oct 2026 07:19:55 +0100
Subject: [PATCH] fix(workspace): center floating file explorer dialog on
 mobile

---
 .../src/features/workspace/WorkspaceView.tsx  | 589 +++++++++---------
 1 file changed, 299 insertions(+), 290 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 25d2196..0127323 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -3189,6 +3189,278 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
   const isEmpty = docs.length === 0 && allFolderPaths.length === 0;
 
+  const renderExplorerBody = () => (
+    <>
+      <div className="p-2.5 sm:p-2 panel-header space-y-2 flex-shrink-0">
+        <div className="relative">
+          <Search className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted absolute left-2.5 top-1/2 -translate-y-1/2" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Dateien durchsuchen…"
+            className="w-full h-9 sm:h-7 pl-8 sm:pl-7 pr-2 input-field text-sm sm:text-xs"
+          />
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => {
+              setShowMobileFileDrawer(false);
+              handleCreateDoc(null);
+            }}
+            className="flex-1 btn-action min-h-[38px] sm:min-h-0 justify-center cursor-pointer"
+            title="Neue Datei erstellen"
+          >
+            <FilePlus className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted" />
+            <span>Neue Datei</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={() => handleStartCreateFolder(null)}
+            className="flex-1 btn-action min-h-[38px] sm:min-h-0 justify-center cursor-pointer"
+            title="Neuen Ordner erstellen"
+          >
+            <FolderPlus className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted" />
+            <span>Neuer Ordner</span>
+          </button>
+        </div>
+      </div>
+
+      {isCreatingFolder && newFolderParent === null && (
+        <div className="p-2 panel-header bg-canvas flex items-center gap-1.5 flex-shrink-0">
+          <Folder className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted flex-shrink-0" />
+          <input
+            type="text"
+            autoFocus
+            value={newFolderName}
+            onChange={(e) => setNewFolderName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleConfirmCreateFolder();
+              if (e.key === 'Escape') setIsCreatingFolder(false);
+            }}
+            placeholder="Neuer Ordnername…"
+            className="flex-1 h-8 sm:h-6 px-2 sm:px-1.5 input-field text-xs"
+          />
+          <button
+            type="button"
+            onClick={handleConfirmCreateFolder}
+            className="p-1.5 sm:p-1 text-accent hover:text-main rounded-btn cursor-pointer"
+          >
+            <Check className="w-4 h-4 sm:w-3 sm:h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setIsCreatingFolder(false)}
+            className="p-1.5 sm:p-1 text-muted hover:text-main rounded-btn cursor-pointer"
+          >
+            <X className="w-4 h-4 sm:w-3 sm:h-3" />
+          </button>
+        </div>
+      )}
+
+      {/* Empty workspace state */}
+      {isEmpty ? (
+        <div className="p-4 text-center text-xs text-muted space-y-2 flex-1">
+          <Folder className="w-8 h-8 text-faint mx-auto" />
+          <p className="font-semibold text-main">Noch keine Notizen</p>
+          <p className="text-[11px] text-faint mb-3 max-w-xs mx-auto leading-relaxed">
+            Erstelle eine neue Datei oder lege Ordner an, um deine Dokumente übersichtlich zu strukturieren.
+          </p>
+          <div className="flex items-center justify-center gap-2">
+            <button
+              type="button"
+              onClick={() => {
+                setShowMobileFileDrawer(false);
+                handleCreateDoc(null);
+              }}
+              className="btn-action min-h-[38px] sm:min-h-0 cursor-pointer"
+            >
+              <FilePlus className="w-3.5 h-3.5 text-muted" />
+              <span>Neue Datei</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => handleStartCreateFolder(null)}
+              className="btn-action min-h-[38px] sm:min-h-0 cursor-pointer"
+            >
+              <FolderPlus className="w-3.5 h-3.5 text-muted" />
+              <span>Neuer Ordner</span>
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="py-1 flex-1 lg:max-h-[calc(100vh-240px)] overflow-y-auto">
+          {/* Drag target for Root when dragging a note or a folder */}
+          {(draggingDocId || draggingFolderPath) && (
+            <div
+              onDragOver={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setDragOverFolder('__root__');
+              }}
+              onDragLeave={(e) => {
+                e.preventDefault();
+                if (dragOverFolder === '__root__') setDragOverFolder(null);
+              }}
+              onDrop={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const droppedFolder =
+                  e.dataTransfer.getData('application/mindsift-folder-path') ||
+                  draggingFolderPath;
+                setDragOverFolder(null);
+                setDraggingDocId(null);
+                setDraggingFolderPath(null);
+
+                if (droppedFolder) {
+                  handleMoveFolder(droppedFolder, '');
+                } else {
+                  handleDropDocToFolder('', e);
+                }
+              }}
+              className={`mx-2 my-1.5 p-2 border-2 border-dashed rounded-btn text-center text-xs transition-colors ${
+                dragOverFolder === '__root__'
+                  ? 'border-accent bg-accent/20 text-main font-semibold'
+                  : 'border-border text-muted bg-canvas'
+              }`}
+            >
+              {draggingFolderPath
+                ? '📁 Ordner in Hauptverzeichnis verschieben'
+                : '📁 In Hauptverzeichnis verschieben (ohne Ordner)'}
+            </div>
+          )}
+
+          {/* Angepinnte Notizen (Favorites) - Collapsible */}
+          {pinnedDocs.length > 0 && !searchQuery && (
+            <div className="mb-2 pb-1.5 border-b border-border">
+              <button
+                type="button"
+                onClick={() => setIsPinnedCollapsed((prev) => !prev)}
+                className="w-full px-2 py-1.5 sm:py-1 text-[10px] font-bold text-accent uppercase tracking-wider flex items-center justify-between hover:bg-canvas/40 rounded transition-colors"
+                title={isPinnedCollapsed ? 'Angepinnte Notizen aufklappen' : 'Angepinnte Notizen einklappen'}
+              >
+                <div className="flex items-center gap-1.5">
+                  <Pin className="w-3 h-3 text-accent" />
+                  <span>Angepinnte Notizen ({pinnedDocs.length})</span>
+                </div>
+                <ChevronDown
+                  className={`w-3 h-3 text-muted transition-transform duration-200 ${
+                    isPinnedCollapsed ? '-rotate-90' : ''
+                  }`}
+                />
+              </button>
+              {!isPinnedCollapsed && (
+                <div className="space-y-0.5 px-1 mt-1">
+                  {pinnedDocs.map((doc) => {
+                    const isSelected = selectedDoc?.id === doc.id && workspaceMode === 'editor';
+                    return (
+                      <div
+                        key={`pinned-${doc.id}`}
+                        draggable
+                        onDragStart={(e) => {
+                          e.stopPropagation();
+                          e.dataTransfer.setData('application/mindsift-doc-id', doc.id);
+                          e.dataTransfer.setData('text/plain', doc.id);
+                          setDraggingDocId(doc.id);
+                        }}
+                        onDragEnd={() => setDraggingDocId(null)}
+                        onClick={() => {
+                          setSelectedDoc(doc);
+                          setZoomedBlockId(null);
+                          setWorkspaceMode('editor');
+                          setShowMobileFileDrawer(false);
+                        }}
+                        className={`group flex items-center justify-between px-2 py-2.5 sm:py-1.5 rounded-btn transition-colors cursor-pointer text-sm sm:text-xs ${
+                          isSelected
+                            ? 'bg-panel-elevated border-l-2 border-accent text-main font-medium'
+                            : 'text-muted hover:text-main hover:bg-canvas/50'
+                        }`}
+                        title="Angepinnte Notiz öffnen"
+                      >
+                        <div className="flex items-center gap-2 min-w-0 flex-1">
+                          <span className="text-base sm:text-sm flex-shrink-0">{doc.icon || '📄'}</span>
+                          <span className="truncate">{doc.title || 'Unbenannt'}</span>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            persistDocument({ ...doc, isPinned: false }, true);
+                          }}
+                          className="opacity-100 sm:opacity-0 sm:group-hover:opacity-100 p-1 sm:p-0.5 text-muted hover:text-accent rounded transition-opacity"
+                          title="Von Angepinnt entfernen"
+                        >
+                          <Pin className="w-3.5 h-3.5 sm:w-3 sm:h-3 text-accent" />
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Themen & Hashtags (Collapsible) - directly under Pinned Notes */}
+          {workspaceTags.length > 0 && !searchQuery && (
+            <div className="mb-2 pb-1.5 border-b border-border">
+              <button
+                type="button"
+                onClick={() => setIsTagsCollapsed((prev) => !prev)}
+                className="w-full px-2 py-1.5 sm:py-1 text-[10px] font-bold text-muted uppercase tracking-wider flex items-center justify-between hover:bg-canvas/40 rounded transition-colors"
+                title={isTagsCollapsed ? 'Themen & Hashtags aufklappen' : 'Themen & Hashtags einklappen'}
+              >
+                <div className="flex items-center gap-1.5 text-accent">
+                  <Hash className="w-3 h-3" />
+                  <span>Themen & Hashtags ({workspaceTags.length})</span>
+                </div>
+                <ChevronDown
+                  className={`w-3 h-3 text-muted transition-transform duration-200 ${
+                    isTagsCollapsed ? '-rotate-90' : ''
+                  }`}
+                />
+              </button>
+              {!isTagsCollapsed && (
+                <div className="flex flex-wrap gap-1.5 sm:gap-1 px-1.5 py-1 mt-1 max-h-36 overflow-y-auto">
+                  {workspaceTags.map((wt) => (
+                    <button
+                      key={wt.tag}
+                      type="button"
+                      onClick={() => {
+                        setShowMobileFileDrawer(false);
+                        openTagPage(wt.tag);
+                      }}
+                      className={`px-2.5 py-1 sm:px-2 sm:py-0.5 rounded-pill text-xs sm:text-[11px] font-medium border flex items-center gap-1 transition-colors ${
+                        selectedTag === wt.tag
+                          ? 'bg-accent/20 border-accent text-accent font-semibold'
+                          : 'bg-canvas border-border text-muted hover:border-accent/40 hover:text-main'
+                      }`}
+                      title={`#${wt.tag} (${wt.count} Abschnitte)`}
+                    >
+                      <span>#{wt.tag}</span>
+                      <span className="text-[9px] opacity-60">({wt.count})</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {rootTree.map(renderFolder)}
+          {rootDocs.map((doc) => renderDocItem(doc, 0))}
+
+          {filteredDocs.length === 0 && searchQuery && (
+            <div className="p-4 text-center text-xs text-faint">
+              Keine Dateien gefunden für &quot;{searchQuery}&quot;
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+
   return (
     <div className="w-full space-y-2">
 
@@ -3269,308 +3541,45 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       {/* ===================================================================== */}
       {workspaceMode === 'editor' && (
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
-          {/* Mobile Backdrop for File Tree Slide-Over Drawer */}
+          {/* Mobile Centered Floating Explorer Dialog ("in der Mitte schweben") */}
           {showMobileFileDrawer && (
             <div
-              className="fixed inset-0 !m-0 bg-black/50 backdrop-blur-xs z-40 lg:hidden animate-in fade-in duration-150"
+              className="fixed inset-0 !m-0 z-50 flex items-center justify-center p-3.5 sm:p-4 bg-black/60 backdrop-blur-xs lg:hidden animate-in fade-in duration-150"
               onClick={() => setShowMobileFileDrawer(false)}
-            />
-          )}
-
-          {/* Left Document & Folder Explorer Tree (Desktop Sidebar + Mobile Slide-Over Drawer) */}
-          <div
-            className={`${
-              showMobileFileDrawer
-                ? 'fixed inset-y-0 left-0 z-50 w-[86vw] max-w-sm bg-panel border-r border-border shadow-2xl flex'
-                : 'hidden lg:flex'
-            } lg:col-span-4 panel-surface flex-col self-start max-h-screen lg:max-h-none`}
-          >
-            {/* Mobile Drawer Top Header */}
-            <div className="flex lg:hidden items-center justify-between px-3.5 py-3 border-b border-border bg-panel">
-              <div className="flex items-center gap-2">
-                <FolderTree className="w-4 h-4 text-accent" />
-                <span className="text-sm font-bold text-main">Dateibaum & Ordner</span>
-              </div>
-              <button
-                type="button"
-                onClick={() => setShowMobileFileDrawer(false)}
-                className="p-1.5 text-muted hover:text-main rounded-btn"
-                title="Schließen"
+            >
+              <div
+                className="w-full max-w-md max-h-[85vh] bg-panel border border-border rounded-2xl shadow-panel flex flex-col overflow-hidden animate-in zoom-in-95 duration-150"
+                onClick={(e) => e.stopPropagation()}
               >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-
-            <div className="p-2.5 sm:p-2 panel-header space-y-2">
-              <div className="relative">
-                <Search className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted absolute left-2.5 top-1/2 -translate-y-1/2" />
-                <input
-                  type="text"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  placeholder="Dateien durchsuchen…"
-                  className="w-full h-9 sm:h-7 pl-8 sm:pl-7 pr-2 input-field text-sm sm:text-xs"
-                />
-              </div>
-
-              <div className="flex items-center gap-1.5">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowMobileFileDrawer(false);
-                    handleCreateDoc(null);
-                  }}
-                  className="flex-1 btn-action min-h-[38px] sm:min-h-0 justify-center"
-                  title="Neue Datei erstellen"
-                >
-                  <FilePlus className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted" />
-                  <span>Neue Datei</span>
-                </button>
-
-                <button
-                  type="button"
-                  onClick={() => handleStartCreateFolder(null)}
-                  className="flex-1 btn-action min-h-[38px] sm:min-h-0 justify-center"
-                  title="Neuen Ordner erstellen"
-                >
-                  <FolderPlus className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted" />
-                  <span>Neuer Ordner</span>
-                </button>
-              </div>
-            </div>
-
-            {isCreatingFolder && newFolderParent === null && (
-              <div className="p-2 panel-header bg-canvas flex items-center gap-1.5">
-                <Folder className="w-4 h-4 sm:w-3.5 sm:h-3.5 text-muted flex-shrink-0" />
-                <input
-                  type="text"
-                  autoFocus
-                  value={newFolderName}
-                  onChange={(e) => setNewFolderName(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') handleConfirmCreateFolder();
-                    if (e.key === 'Escape') setIsCreatingFolder(false);
-                  }}
-                  placeholder="Neuer Ordnername…"
-                  className="flex-1 h-8 sm:h-6 px-2 sm:px-1.5 input-field text-xs"
-                />
-                <button
-                  type="button"
-                  onClick={handleConfirmCreateFolder}
-                  className="p-1.5 sm:p-1 text-accent hover:text-main rounded-btn"
-                  title="Bestätigen"
-                >
-                  <Check className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setIsCreatingFolder(false)}
-                  className="p-1.5 sm:p-1 text-muted hover:text-main rounded-btn"
-                  title="Abbrechen"
-                >
-                  <X className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
-                </button>
-              </div>
-            )}
-
-            {isEmpty ? (
-              <div className="p-6 my-3 mx-2 border border-dashed border-border bg-canvas/50 text-center rounded-card">
-                <Folder className="w-7 h-7 text-faint mx-auto mb-2" />
-                <h5 className="text-xs font-semibold text-muted mb-1">Keine Dateien vorhanden</h5>
-                <p className="text-[11px] text-faint mb-3 max-w-xs mx-auto leading-relaxed">
-                  Erstelle eine neue Datei oder lege Ordner an, um deine Dokumente übersichtlich zu strukturieren.
-                </p>
-                <div className="flex items-center justify-center gap-2">
+                {/* Mobile Dialog Header */}
+                <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-panel flex-shrink-0">
+                  <div className="flex items-center gap-2">
+                    <div className="w-7 h-7 rounded-btn bg-accent/15 text-accent flex items-center justify-center">
+                      <FolderTree className="w-4 h-4" />
+                    </div>
+                    <span className="text-sm font-semibold text-main">Dateibaum & Ordner</span>
+                  </div>
                   <button
                     type="button"
-                    onClick={() => {
-                      setShowMobileFileDrawer(false);
-                      handleCreateDoc(null);
-                    }}
-                    className="btn-action min-h-[38px] sm:min-h-0"
+                    onClick={() => setShowMobileFileDrawer(false)}
+                    className="p-1.5 text-faint hover:text-main rounded-btn transition-colors cursor-pointer"
+                    title="Schließen"
                   >
-                    <FilePlus className="w-3.5 h-3.5 text-muted" />
-                    <span>Neue Datei</span>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => handleStartCreateFolder(null)}
-                    className="btn-action min-h-[38px] sm:min-h-0"
-                  >
-                    <FolderPlus className="w-3.5 h-3.5 text-muted" />
-                    <span>Neuer Ordner</span>
+                    <X className="w-5 h-5" />
                   </button>
                 </div>
+
+                <div className="flex-1 overflow-y-auto flex flex-col">
+                  {renderExplorerBody()}
+                </div>
               </div>
-            ) : (
-              <div className="py-1 flex-1 lg:max-h-[calc(100vh-240px)] overflow-y-auto">
-                {/* Drag target for Root when dragging a note or a folder */}
-                {(draggingDocId || draggingFolderPath) && (
-                  <div
-                    onDragOver={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      setDragOverFolder('__root__');
-                    }}
-                    onDragLeave={(e) => {
-                      e.preventDefault();
-                      if (dragOverFolder === '__root__') setDragOverFolder(null);
-                    }}
-                    onDrop={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      const droppedFolder =
-                        e.dataTransfer.getData('application/mindsift-folder-path') ||
-                        draggingFolderPath;
-                      setDragOverFolder(null);
-                      setDraggingDocId(null);
-                      setDraggingFolderPath(null);
+            </div>
+          )}
 
-                      if (droppedFolder) {
-                        handleMoveFolder(droppedFolder, '');
-                      } else {
-                        handleDropDocToFolder('', e);
-                      }
-                    }}
-                    className={`mx-2 my-1.5 p-2 border-2 border-dashed rounded-btn text-center text-xs transition-colors ${
-                      dragOverFolder === '__root__'
-                        ? 'border-accent bg-accent/20 text-main font-semibold'
-                        : 'border-border text-muted bg-canvas'
-                    }`}
-                  >
-                    {draggingFolderPath
-                      ? '📁 Ordner in Hauptverzeichnis verschieben'
-                      : '📁 In Hauptverzeichnis verschieben (ohne Ordner)'}
-                  </div>
-                )}
-
-                {/* Angepinnte Notizen (Favorites) - Collapsible */}
-                {pinnedDocs.length > 0 && !searchQuery && (
-                  <div className="mb-2 pb-1.5 border-b border-border">
-                    <button
-                      type="button"
-                      onClick={() => setIsPinnedCollapsed((prev) => !prev)}
-                      className="w-full px-2 py-1.5 sm:py-1 text-[10px] font-bold text-accent uppercase tracking-wider flex items-center justify-between hover:bg-canvas/40 rounded transition-colors"
-                      title={isPinnedCollapsed ? 'Angepinnte Notizen aufklappen' : 'Angepinnte Notizen einklappen'}
-                    >
-                      <div className="flex items-center gap-1.5">
-                        <Pin className="w-3 h-3 text-accent" />
-                        <span>Angepinnte Notizen ({pinnedDocs.length})</span>
-                      </div>
-                      <ChevronDown
-                        className={`w-3 h-3 text-muted transition-transform duration-200 ${
-                          isPinnedCollapsed ? '-rotate-90' : ''
-                        }`}
-                      />
-                    </button>
-                    {!isPinnedCollapsed && (
-                      <div className="space-y-0.5 px-1 mt-1">
-                        {pinnedDocs.map((doc) => {
-                          const isSelected = selectedDoc?.id === doc.id && workspaceMode === 'editor';
-                          return (
-                            <div
-                              key={`pinned-${doc.id}`}
-                              draggable
-                              onDragStart={(e) => {
-                                e.stopPropagation();
-                                e.dataTransfer.setData('application/mindsift-doc-id', doc.id);
-                                e.dataTransfer.setData('text/plain', doc.id);
-                                setDraggingDocId(doc.id);
-                              }}
-                              onDragEnd={() => setDraggingDocId(null)}
-                              onClick={() => {
-                                setSelectedDoc(doc);
-                                setZoomedBlockId(null);
-                                setWorkspaceMode('editor');
-                                setShowMobileFileDrawer(false);
-                              }}
-                              className={`group flex items-center justify-between px-2 py-2.5 sm:py-1.5 rounded-btn transition-colors cursor-pointer text-sm sm:text-xs ${
-                                isSelected
-                                  ? 'bg-panel-elevated border-l-2 border-accent text-main font-medium'
-                                  : 'text-muted hover:text-main hover:bg-canvas/50'
-                              }`}
-                              title="Angepinnte Notiz öffnen"
-                            >
-                              <div className="flex items-center gap-2 min-w-0 flex-1">
-                                <span className="text-base sm:text-sm flex-shrink-0">{doc.icon || '📄'}</span>
-                                <span className="truncate">{doc.title || 'Unbenannt'}</span>
-                              </div>
-                              <button
-                                type="button"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  persistDocument({ ...doc, isPinned: false }, true);
-                                }}
-                                className="opacity-100 sm:opacity-0 sm:group-hover:opacity-100 p-1 sm:p-0.5 text-muted hover:text-accent rounded transition-opacity"
-                                title="Von Angepinnt entfernen"
-                              >
-                                <Pin className="w-3.5 h-3.5 sm:w-3 sm:h-3 text-accent" />
-                              </button>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </div>
-                )}
-
-                {/* Themen & Hashtags (Collapsible) - directly under Pinned Notes */}
-                {workspaceTags.length > 0 && !searchQuery && (
-                  <div className="mb-2 pb-1.5 border-b border-border">
-                    <button
-                      type="button"
-                      onClick={() => setIsTagsCollapsed((prev) => !prev)}
-                      className="w-full px-2 py-1.5 sm:py-1 text-[10px] font-bold text-muted uppercase tracking-wider flex items-center justify-between hover:bg-canvas/40 rounded transition-colors"
-                      title={isTagsCollapsed ? 'Themen & Hashtags aufklappen' : 'Themen & Hashtags einklappen'}
-                    >
-                      <div className="flex items-center gap-1.5 text-accent">
-                        <Hash className="w-3 h-3" />
-                        <span>Themen & Hashtags ({workspaceTags.length})</span>
-                      </div>
-                      <ChevronDown
-                        className={`w-3 h-3 text-muted transition-transform duration-200 ${
-                          isTagsCollapsed ? '-rotate-90' : ''
-                        }`}
-                      />
-                    </button>
-                    {!isTagsCollapsed && (
-                      <div className="flex flex-wrap gap-1.5 sm:gap-1 px-1.5 py-1 mt-1 max-h-36 overflow-y-auto">
-                        {workspaceTags.map((wt) => (
-                          <button
-                            key={wt.tag}
-                            type="button"
-                            onClick={() => {
-                              setShowMobileFileDrawer(false);
-                              openTagPage(wt.tag);
-                            }}
-                            className={`px-2.5 py-1 sm:px-2 sm:py-0.5 rounded-pill text-xs sm:text-[11px] font-medium border flex items-center gap-1 transition-colors ${
-                              selectedTag === wt.tag
-                                ? 'bg-accent/20 border-accent text-accent font-semibold'
-                                : 'bg-canvas border-border text-muted hover:border-accent/40 hover:text-main'
-                            }`}
-                            title={`#${wt.tag} (${wt.count} Abschnitte)`}
-                          >
-                            <span>#{wt.tag}</span>
-                            <span className="text-[9px] opacity-60">({wt.count})</span>
-                          </button>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                )}
-
-                {rootTree.map(renderFolder)}
-                {rootDocs.map((doc) => renderDocItem(doc, 0))}
-
-                {filteredDocs.length === 0 && searchQuery && (
-                  <div className="p-4 text-center text-xs text-faint">
-                    Keine Dateien gefunden für &quot;{searchQuery}&quot;
-                  </div>
-                )}
-              </div>
-            )}
+          {/* Desktop Left Document & Folder Explorer Tree (Sidebar) */}
+          <div className="hidden lg:flex lg:col-span-4 panel-surface flex-col self-start max-h-screen lg:max-h-none">
+            {renderExplorerBody()}
           </div>
-
           {/* Right Logseq Outliner Editor */}
           <div className="lg:col-span-8">
             {selectedDoc ? (