mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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": {

11
src/app/globals.css
View File

@ -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;

48
src/components/WeeklyView.tsx
View File

@ -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);