From 91cda175c72d1dd17107950fe97bb20f3f50b92d Mon Sep 17 00:00:00 2001 From: Gamosoft Date: Fri, 29 May 2026 12:30:23 +0200 Subject: [PATCH] added sidebar --- documentation/FEATURES.md | 1 + frontend/app.js | 41 ++++++++++++++++++++ frontend/index.html | 81 +++++++++++++++++++++++++++++++++------ locales/de-DE.json | 2 + locales/en-GB.json | 2 + locales/en-US.json | 2 + locales/es-ES.json | 2 + locales/fr-FR.json | 2 + locales/hu-HU.json | 2 + locales/it-IT.json | 2 + locales/ja-JP.json | 2 + locales/ru-RU.json | 2 + locales/sl-SI.json | 2 + locales/zh-CN.json | 2 + 14 files changed, 134 insertions(+), 11 deletions(-) diff --git a/documentation/FEATURES.md b/documentation/FEATURES.md index 7179b46..4a61c9c 100644 --- a/documentation/FEATURES.md +++ b/documentation/FEATURES.md @@ -119,6 +119,7 @@ To link to a heading, convert the heading text to a slug: **lowercase, spaces ### Layout - **Resizable sidebar** - Drag to adjust width +- **Collapsible sidebar panel** - Show/hide the sidebar contents while keeping the icon rail in place - **View mode memory** - Remembers Edit/Split/Preview preference - **Responsive design** - Works on all screen sizes diff --git a/frontend/app.js b/frontend/app.js index 6c450e8..627790d 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -42,6 +42,7 @@ const LOCAL_SETTINGS = { tagsExpanded: { key: 'tagsExpanded', type: 'boolean', default: false }, hideUnderscoreFolders: { key: 'hideUnderscoreFolders', type: 'boolean', default: false }, tabInsertsTab: { key: 'tabInsertsTab', type: 'boolean', default: false }, + sidebarPanelCollapsed: { key: 'sidebarPanelCollapsed', type: 'boolean', default: false }, // String settings sortMode: { key: 'sortMode', type: 'string', default: 'a-z' }, // Number settings with validation @@ -273,6 +274,11 @@ function noteApp() { lastSaved: false, linkCopied: false, zenMode: false, + // Hides only the .sidebar-panel content (files / search / tags / outline / etc.) while + // keeping the icon rail visible — a lighter "focus mode" than zenMode. Persisted via + // LOCAL_SETTINGS so it survives reload; hydrated by loadLocalSettings() at app init, + // which is why the initial value here matches the LOCAL_SETTINGS default. + sidebarPanelCollapsed: false, previousViewMode: 'split', favorites: [], favoritesSet: new Set(), // For O(1) lookups @@ -1050,6 +1056,41 @@ function noteApp() { localStorage.setItem('tabInsertsTab', this.tabInsertsTab); }, + // Hide / show only the sidebar PANEL (files, search, outline, etc.); the icon rail + // stays put so users can still switch panels with one click after re-expanding. + // Width is animated via CSS; sidebarWidth itself is intentionally NOT touched, so a + // user's custom drag-resized width is restored automatically on expand. + toggleSidebarPanel() { + this.sidebarPanelCollapsed = !this.sidebarPanelCollapsed; + localStorage.setItem('sidebarPanelCollapsed', this.sidebarPanelCollapsed); + }, + + // Switch the active sidebar panel (Files / Search / Tags / Outline / Backlinks / Shared + // / Settings) with smart toggle behaviour for the icon rail: + // + // collapsed + click any icon X → expand + switch to X + // expanded, on Y + click icon X → switch to X (no collapse change) + // expanded, on X + click icon X → collapse (symmetric "click active to close") + // + // That third rule matches the VS Code / Cursor / JetBrains / Obsidian convention where + // re-clicking the active sidebar icon hides the panel. Without it, the only way to + // collapse would be the dedicated toggle button, which is fine but leaves an asymmetry. + // + // On mobile (≤768px) the desktop collapse is CSS-overridden, so the panel is always + // visible; we deliberately skip toggling in that case so a one-off mobile tap doesn't + // silently clear the user's persisted desktop preference. + openSidebarPanel(panelName) { + const isDesktop = window.innerWidth > 768; + if (isDesktop && this.activePanel === panelName && !this.sidebarPanelCollapsed) { + this.toggleSidebarPanel(); + return; + } + this.activePanel = panelName; + if (isDesktop && this.sidebarPanelCollapsed) { + this.toggleSidebarPanel(); + } + }, + // Handle Tab key in editor (inserts tab if setting enabled; Shift+Tab outdents matching lines) handleTabKey(event) { if (!this.tabInsertsTab) return; diff --git a/frontend/index.html b/frontend/index.html index 21583d5..b1018fc 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -940,8 +940,28 @@ flex-direction: column; min-width: 0; overflow: hidden; + transition: flex-basis 180ms ease, width 180ms ease, opacity 120ms ease; } - + + /* Collapsed state: panel shrinks to 0 width so the editor can claim the freed space. + The icon rail (which is outside .sidebar-panel) stays visible — only the inner + file/search/outline area disappears. flex: 0 0 0 overrides the default flex: 1 so + the panel actually shrinks instead of competing for space with the rail. */ + .sidebar-panel.sidebar-panel-collapsed { + flex: 0 0 0; + width: 0; + opacity: 0; + pointer-events: none; + } + + /* Smooth the outer sidebar wrap so the editor gains the space gradually rather than + snapping. Mobile (≤768px) uses position: fixed + left transition for its slide-in + drawer pattern, so this width transition is desktop-only by virtue of being shadowed + there by !important rules. */ + .mobile-sidebar { + transition: width 180ms ease, min-width 180ms ease, max-width 180ms ease; + } + .sidebar-panel-header { padding: 12px; border-bottom: 1px solid var(--border-primary); @@ -1235,6 +1255,18 @@ .mobile-sidebar-open { left: 0; } + + /* On mobile, the sidebar is an overlay drawer — the desktop "collapse panel" + feature must be disregarded. Otherwise a previously-persisted collapsed state + would carry over and the drawer would open empty (icon-rail buttons would do + nothing visible). The desktop toggle button itself is already hidden on mobile + (`hidden md:flex`), so the user has no way to undo it from here. */ + .sidebar-panel.sidebar-panel-collapsed { + flex: 1; + width: auto; + opacity: 1; + pointer-events: auto; + } /* Add bottom padding to scrollable sidebar content for tab bar */ .mobile-sidebar .overflow-y-auto { @@ -1406,7 +1438,9 @@
@@ -1423,7 +1457,7 @@
- + + + +
-
+
@@ -2255,6 +2313,7 @@ style="width: 4px; cursor: col-resize; background-color: transparent; transition: background-color 0.2s;" @mouseover="$el.style.backgroundColor='var(--accent-primary)'" @mouseout="if(!isResizing) $el.style.backgroundColor='transparent'" + x-show="!sidebarPanelCollapsed" >
diff --git a/locales/de-DE.json b/locales/de-DE.json index 7d09f1e..676445c 100644 --- a/locales/de-DE.json +++ b/locales/de-DE.json @@ -62,6 +62,8 @@ "sort_smallest": "Nach kleinsten sortieren (nur Dateien)", "toggle_sidebar": "Seitenleiste umschalten", "go_to_homepage": "Zur Startseite", + "hide_panel": "Seitenleiste ausblenden", + "show_panel": "Seitenleiste einblenden", "files": "Dateien", "search": "Suchen", "search_title": "SUCHE", diff --git a/locales/en-GB.json b/locales/en-GB.json index 6a7dfde..e16183c 100644 --- a/locales/en-GB.json +++ b/locales/en-GB.json @@ -61,6 +61,8 @@ "sort_smallest": "Sort by smallest (files only)", "toggle_sidebar": "Toggle sidebar", "go_to_homepage": "Go to homepage", + "hide_panel": "Hide sidebar panel", + "show_panel": "Show sidebar panel", "files": "Files", "search": "Search", "search_title": "SEARCH", diff --git a/locales/en-US.json b/locales/en-US.json index 80073a5..e748977 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -62,6 +62,8 @@ "sort_smallest": "Sort by smallest (files only)", "toggle_sidebar": "Toggle sidebar", "go_to_homepage": "Go to homepage", + "hide_panel": "Hide sidebar panel", + "show_panel": "Show sidebar panel", "files": "Files", "search": "Search", "search_title": "SEARCH", diff --git a/locales/es-ES.json b/locales/es-ES.json index b1a7b3d..c63cb9e 100644 --- a/locales/es-ES.json +++ b/locales/es-ES.json @@ -62,6 +62,8 @@ "sort_smallest": "Ordenar por más pequeño (solo archivos)", "toggle_sidebar": "Alternar barra lateral", "go_to_homepage": "Ir al inicio", + "hide_panel": "Ocultar el panel lateral", + "show_panel": "Mostrar el panel lateral", "files": "Archivos", "search": "Buscar", "search_title": "BÚSQUEDA", diff --git a/locales/fr-FR.json b/locales/fr-FR.json index ec14661..87856d4 100644 --- a/locales/fr-FR.json +++ b/locales/fr-FR.json @@ -62,6 +62,8 @@ "sort_smallest": "Trier par plus petit (fichiers uniquement)", "toggle_sidebar": "Afficher/Masquer la barre latérale", "go_to_homepage": "Aller à l'accueil", + "hide_panel": "Masquer le panneau latéral", + "show_panel": "Afficher le panneau latéral", "files": "Fichiers", "search": "Rechercher", "search_title": "RECHERCHE", diff --git a/locales/hu-HU.json b/locales/hu-HU.json index 8e34b6f..d5042df 100644 --- a/locales/hu-HU.json +++ b/locales/hu-HU.json @@ -62,6 +62,8 @@ "sort_smallest": "Legkisebb elöl (csak fájlok)", "toggle_sidebar": "Oldalsáv megjelenítése", "go_to_homepage": "Ugrás a kezdőlapra", + "hide_panel": "Oldalsáv elrejtése", + "show_panel": "Oldalsáv megjelenítése", "files": "Fájlok", "search": "Keresés", "search_title": "KERESÉS", diff --git a/locales/it-IT.json b/locales/it-IT.json index 45a3813..eecb066 100644 --- a/locales/it-IT.json +++ b/locales/it-IT.json @@ -61,6 +61,8 @@ "sort_smallest": "Ordina per più piccolo (solo file)", "toggle_sidebar": "Mostra/nascondi barra laterale", "go_to_homepage": "Vai alla home", + "hide_panel": "Nascondi il pannello laterale", + "show_panel": "Mostra il pannello laterale", "files": "File", "search": "Cerca", "search_title": "CERCA", diff --git a/locales/ja-JP.json b/locales/ja-JP.json index 905a64e..01510dd 100644 --- a/locales/ja-JP.json +++ b/locales/ja-JP.json @@ -61,6 +61,8 @@ "sort_smallest": "小さい順（ファイルのみ）", "toggle_sidebar": "サイドバー切替", "go_to_homepage": "ホームへ", + "hide_panel": "サイドバーを非表示", + "show_panel": "サイドバーを表示", "files": "ファイル", "search": "検索", "search_title": "検索", diff --git a/locales/ru-RU.json b/locales/ru-RU.json index 75f7309..c76f608 100644 --- a/locales/ru-RU.json +++ b/locales/ru-RU.json @@ -61,6 +61,8 @@ "sort_smallest": "Сначала маленькие (только файлы)", "toggle_sidebar": "Показать/скрыть боковую панель", "go_to_homepage": "На главную", + "hide_panel": "Скрыть боковую панель", + "show_panel": "Показать боковую панель", "files": "Файлы", "search": "Поиск", "search_title": "ПОИСК", diff --git a/locales/sl-SI.json b/locales/sl-SI.json index 04511f1..68c42bf 100644 --- a/locales/sl-SI.json +++ b/locales/sl-SI.json @@ -61,6 +61,8 @@ "sort_smallest": "Razvrsti po najmanjših (samo datoteke)", "toggle_sidebar": "Preklopi stransko vrstico", "go_to_homepage": "Pojdi na začetno stran", + "hide_panel": "Skrij stranski pano", + "show_panel": "Pokaži stranski pano", "files": "Datoteke", "search": "Iskanje", "search_title": "ISKANJE", diff --git a/locales/zh-CN.json b/locales/zh-CN.json index 52c36dc..db52d20 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -61,6 +61,8 @@ "sort_smallest": "按最小排序（仅文件）", "toggle_sidebar": "切换侧边栏", "go_to_homepage": "前往主页", + "hide_panel": "隐藏侧边栏", + "show_panel": "显示侧边栏", "files": "文件", "search": "搜索", "search_title": "搜索",