fix: merge kanban filter bar and project chips into single row

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>
This commit is contained in:
mARTin 2026-03-18 00:16:02 +01:00
parent 855760e39c
commit 43f05160c5
3 changed files with 26 additions and 35 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "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", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

View File

@ -1718,7 +1718,6 @@ h3 {
background: var(--weekly-bg, #fff); background: var(--weekly-bg, #fff);
flex-shrink: 0; flex-shrink: 0;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-end;
} }
.kanban-filter-search { .kanban-filter-search {
@ -3885,16 +3884,6 @@ h3 {
background: rgba(255,255,255,0.03) !important; 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 { .kanban-project-chip {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -6352,8 +6352,32 @@ export default function WeeklyView() {
return ( return (
<div className="kanban-wrapper"> <div className="kanban-wrapper">
{/* Filter Bar */} {/* Unified toolbar: projects on left, filters on right */}
<div className="kanban-filter-bar"> <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"> <div className="kanban-filter-search">
<Search size={14} className="kanban-filter-icon" /> <Search size={14} className="kanban-filter-icon" />
<input <input
@ -6407,29 +6431,7 @@ export default function WeeklyView() {
<X size={14} /> <X size={14} />
</button> </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> </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"> <div className="kanban-board">
{kanbanStages.map((stage) => { {kanbanStages.map((stage) => {
const stageTasks = filteredKanbanTasks.filter(t => (t.kanbanStage || null) === stage.id); const stageTasks = filteredKanbanTasks.filter(t => (t.kanbanStage || null) === stage.id);