From fc637bc25d3d40e94f48b6fa244bb153118a5f59 Mon Sep 17 00:00:00 2001 From: Sandro Date: Sat, 31 Oct 2026 09:44:12 +0100 Subject: [PATCH] feat(kanban): button to stretch the board to the full window width Co-Authored-By: Claude Opus 5.5 --- CHANGELOG.md | 9 ++- frontend/package-lock.json | 4 +- frontend/package.json | 2 +- frontend/src/App.tsx | 7 ++- frontend/src/features/triage/TasksView.tsx | 70 ++++++++++++++++++---- 5 files changed, 74 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b62fb4..7cf3999 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,10 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V ## [Unreleased] -## [0.15.2] - 2026-10-31 +## [0.16.0] - 2026-10-31 + +### Added +- Kanban: Neben „Spalten anpassen“ streckt ein kleiner Knopf (diagonale Pfeile) das Board auf die volle Fensterbreite; alle Spalten stehen dann nebeneinander. Die Einstellung merkt sich der Browser, am Handy gibt es den Knopf nicht. ### Fixed - Aufgaben: Ein neuer Quick-Dump-Eintrag (z. B. per Spracheingabe über das gehaltene Plus) tauchte kurz oben in den Aufgaben auf, obwohl er in die Triage gehört. Live-Änderungen nehmen jetzt nur noch echte Aufgaben auf; eine per „Rückgängig“ zurück in die Triage geholte Aufgabe verschwindet auch sofort aus der Liste. @@ -371,8 +374,8 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V - Geteilte Listen (Einkaufs-, Pack- und Checklisten) mit `#Kategorie`-Gruppierung, Mengenangaben und Echtzeit-Abhaken. - Benutzer-, Gruppen- und Admin-Verwaltung (Ersteinrichtungs-Assistent, Einladungscodes, Profilbilder, persönliche API-Keys & Webhook-Ingest `/api/v1/webhooks/ingest`, JSON-Datenexport) sowie CSS-Theme-Engine mit 4 Themes (`Dark`, `Light`, `High Contrast`, `Soft`) und PWA-Unterstützung. -[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.15.2...dev -[0.15.2]: https://git.dsit.me/sandrodach/MindSift/compare/v0.15.1...v0.15.2 +[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.16.0...dev +[0.16.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.15.1...v0.16.0 [0.15.1]: https://git.dsit.me/sandrodach/MindSift/compare/v0.15.0...v0.15.1 [0.15.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.14.3...v0.15.0 [0.14.3]: https://git.dsit.me/sandrodach/MindSift/compare/v0.14.2...v0.14.3 diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 188cf03..3ab07bd 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1,12 +1,12 @@ { "name": "mindsift-frontend", - "version": "0.15.2", + "version": "0.16.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "mindsift-frontend", - "version": "0.15.2", + "version": "0.16.0", "license": "Unlicense", "dependencies": { "@fontsource-variable/inter": "5.3.0", diff --git a/frontend/package.json b/frontend/package.json index 3aee7e4..7a1e08d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "mindsift-frontend", "private": true, - "version": "0.15.2", + "version": "0.16.0", "license": "Unlicense", "type": "module", "scripts": { diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0aa65d3..c27800c 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -164,6 +164,8 @@ export const App: React.FC = () => { const [deck, setDeck] = useState([]); const [lists, setLists] = useState([]); const [activeTab, setActiveTab] = useState('triage'); + // Kanban asked for the full window width (reported by the tasks view) + const [tasksWide, setTasksWide] = useState(false); const [previousTab, setPreviousTab] = useState('triage'); const [selectedDocId, setSelectedDocId] = useState(null); const [selectedBlockId, setSelectedBlockId] = useState(null); @@ -1168,7 +1170,9 @@ export const App: React.FC = () => { {/* Main Container */} {/* The workspace fills the window exactly and scrolls only inside the note, never the page */}
@@ -1192,6 +1196,7 @@ export const App: React.FC = () => { refreshTrigger={refreshRevision} initialSelectedTaskId={selectedTaskId} openTasksCount={stats.tasksOpenCount} + onWideChange={setTasksWide} /> )} diff --git a/frontend/src/features/triage/TasksView.tsx b/frontend/src/features/triage/TasksView.tsx index 3153c9e..2fbc642 100644 --- a/frontend/src/features/triage/TasksView.tsx +++ b/frontend/src/features/triage/TasksView.tsx @@ -8,6 +8,8 @@ import { FileText, LayoutList, Columns, + Maximize2, + Minimize2, ArrowRight, ArrowLeft, Edit3, @@ -59,8 +61,11 @@ interface TasksViewProps { refreshTrigger?: number; initialSelectedTaskId?: string | null; openTasksCount?: number; // all open tasks incl. shared lists (same as the nav bar counter) + onWideChange?: (wide: boolean) => void; // Kanban stretched to the full window width } +const KANBAN_WIDE_KEY = 'mindsift:kanban_wide'; + export const TasksView: React.FC = ({ currentUser, onRefreshStats, @@ -68,8 +73,31 @@ export const TasksView: React.FC = ({ refreshTrigger = 0, initialSelectedTaskId, openTasksCount, + onWideChange, }) => { const [viewMode, setViewMode] = useState<'list' | 'kanban'>('list'); + // Wide Kanban: the board takes the whole window and shows every column in one row + const [kanbanWide, setKanbanWide] = useState(() => { + try { + return localStorage.getItem(KANBAN_WIDE_KEY) === '1'; + } catch { + return false; + } + }); + const toggleKanbanWide = () => { + const next = !kanbanWide; + setKanbanWide(next); + try { + localStorage.setItem(KANBAN_WIDE_KEY, next ? '1' : '0'); + } catch { + // only a convenience + } + }; + const isKanbanWide = viewMode === 'kanban' && kanbanWide; + useEffect(() => { + onWideChange?.(isKanbanWide); + }, [isKanbanWide, onWideChange]); + useEffect(() => () => onWideChange?.(false), [onWideChange]); const [filter, setFilter] = useState<'open' | 'done' | 'discarded'>('open'); const [tasks, setTasks] = useState([]); const [taskLists, setTaskLists] = useState([]); @@ -1650,16 +1678,31 @@ export const TasksView: React.FC = ({ {/* Group By & Sort By Dropdowns & Manage Columns button */}
{viewMode === 'kanban' ? ( - !isSelectedListReadOnly && ( - - ) + <> + {!isSelectedListReadOnly && ( + + )} + + ) : ( <> {/* Group By */} @@ -2112,7 +2155,12 @@ export const TasksView: React.FC = ({ {viewMode === 'kanban' ? ( /* DYNAMIC KANBAN BOARD */
-
+
{activeColumns.map((col, colIdx) => { const colTasks = kanbanTasks.filter((t) => { if (col.isDone) {