From 43f05160c547e02e3208fb68f0608d7179ff3697 Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Wed, 18 Mar 2026 00:16:02 +0100
Subject: [PATCH] fix: merge kanban filter bar and project chips into single
 row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Put + icon (create project) on far left, followed by project drop
chips, then a spacer, then search/filters on the right — all in
one unified toolbar row.

v1.47.1

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json                  |  2 +-
 src/app/globals.css           | 11 --------
 src/components/WeeklyView.tsx | 48 ++++++++++++++++++-----------------
 3 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index 4dc9b87..62cc749 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.47.0",
+  "version": "1.47.1",
   "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
   "main": "index.js",
   "scripts": {
diff --git a/src/app/globals.css b/src/app/globals.css
index 673cb2e..3c403ce 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1718,7 +1718,6 @@ h3 {
   background: var(--weekly-bg, #fff);
   flex-shrink: 0;
   flex-wrap: wrap;
-  justify-content: flex-end;
 }
 
 .kanban-filter-search {
@@ -3885,16 +3884,6 @@ h3 {
     background: rgba(255,255,255,0.03) !important;
 }
 
-/* Kanban project drop targets */
-.kanban-project-targets {
-  display: flex;
-  gap: 6px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--weekly-border, #e5e7eb);
-  background: var(--weekly-bg-alt, #f8f9fa);
-  flex-wrap: wrap;
-  flex-shrink: 0;
-}
 .kanban-project-chip {
   display: flex;
   align-items: center;
diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index 388b45f..d820c4c 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -6352,8 +6352,32 @@ export default function WeeklyView() {
 
                 return (
                     <div className="kanban-wrapper">
-                        {/* Filter Bar */}
+                        {/* Unified toolbar: projects on left, filters on right */}
                         <div className="kanban-filter-bar">
+                            {/* Left side: + button, project chips */}
+                            <button
+                                onClick={() => setShowProjectsSidebar(true)}
+                                className="kanban-project-chip"
+                                style={{ background: darkMode ? "#374151" : "#e5e7eb", color: darkMode ? "#9ca3af" : "#6b7280", cursor: "pointer", border: "2px dashed " + (darkMode ? "#4b5563" : "#d1d5db") }}
+                                title={t.projects || "Projects"}
+                            >
+                                <Plus size={12} />
+                            </button>
+                            {projects.map(p => (
+                                <div key={p.id} className="kanban-project-chip" style={{ background: (p.color || "#6366f1") + "18", color: p.color || "#6366f1" }} {...kanbanProjectDrop(p.id)}>
+                                    <ProjectIcon icon={p.icon} size={12} color={p.color || "#6366f1"} />
+                                    <span>{p.name}</span>
+                                </div>
+                            ))}
+                            {projects.length > 0 && (
+                                <div className="kanban-project-chip" style={{ background: darkMode ? "#1f2937" : "#f3f4f6", color: "#9ca3af" }} {...kanbanProjectDrop(null)}>
+                                    <X size={12} />
+                                    <span>{language === "de" ? "Kein Projekt" : "No project"}</span>
+                                </div>
+                            )}
+                            {/* Spacer pushes filters to right */}
+                            <div style={{ flex: 1 }} />
+                            {/* Right side: search + filters */}
                             <div className="kanban-filter-search">
                                 <Search size={14} className="kanban-filter-icon" />
                                 <input
@@ -6407,29 +6431,7 @@ export default function WeeklyView() {
                                     <X size={14} />
                                 </button>
                             )}
-                            <button
-                                onClick={() => setShowProjectsSidebar(true)}
-                                className="kanban-filter-select"
-                                style={{ display: "flex", alignItems: "center", gap: "4px", cursor: "pointer", fontWeight: 500 }}
-                            >
-                                <Plus size={12} /> {t.projects || "Projects"}
-                            </button>
                         </div>
-                        {/* Project drop targets — drag tasks here to assign */}
-                        {projects.length > 0 && (
-                            <div className="kanban-project-targets">
-                                {projects.map(p => (
-                                    <div key={p.id} className="kanban-project-chip" style={{ background: (p.color || "#6366f1") + "18", color: p.color || "#6366f1" }} {...kanbanProjectDrop(p.id)}>
-                                        <ProjectIcon icon={p.icon} size={12} color={p.color || "#6366f1"} />
-                                        <span>{p.name}</span>
-                                    </div>
-                                ))}
-                                <div className="kanban-project-chip" style={{ background: "#f3f4f6", color: "#9ca3af" }} {...kanbanProjectDrop(null)}>
-                                    <X size={12} />
-                                    <span>{language === "de" ? "Kein Projekt" : "No project"}</span>
-                                </div>
-                            </div>
-                        )}
                         <div className="kanban-board">
                             {kanbanStages.map((stage) => {
                                 const stageTasks = filteredKanbanTasks.filter(t => (t.kanbanStage || null) === stage.id);