feat: inline kanban stage editing, remove from settings sidebar

- Column headers are now editable: click the name to rename, click
  the color dot to change color, hover to reveal delete button
- "+" column at the end to add new stages
- Removed kanban stages section from settings sidebar

v1.48.0

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.47.5",
+  "version": "1.48.0",
   "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": {

src/app/globals.css

@@ -1839,6 +1839,36 @@ h3 {
   padding: 1px 7px;
 }
 
+.kanban-column-delete {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #9ca3af;
+  padding: 2px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+.kanban-column-delete:hover {
+  color: #ef4444;
+  background: rgba(239,68,68,0.1);
+}
+.kanban-column-header:hover .kanban-column-delete {
+  display: flex;
+}
+.kanban-column-add {
+  min-width: 60px !important;
+  max-width: 60px !important;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.15s;
+  border: 2px dashed #d1d5db;
+  background: transparent !important;
+}
+.kanban-column-add:hover {
+  opacity: 1;
+}
+
 .kanban-column-body {
   flex: 1;
   padding: 8px;

src/components/WeeklyView.tsx

@@ -6433,14 +6433,48 @@ export default function WeeklyView() {
                             )}
                         </div>
                         <div className="kanban-board">
-                            {kanbanStages.map((stage) => {
+                            {kanbanStages.map((stage, idx) => {
                                 const stageTasks = filteredKanbanTasks.filter(t => (t.kanbanStage || null) === stage.id);
                                 return (
                                     <div key={stage.id} className="kanban-column" {...kanbanColumnDrop(stage.id)}>
                                         <div className="kanban-column-header" style={{ borderBottomColor: stage.color }}>
-                                            <span className="kanban-column-dot" style={{ background: stage.color }} />
+                                            <input
-                                            <span className="kanban-column-title">{stage.name}</span>
+                                                type="color"
+                                                value={stage.color}
+                                                onChange={(e) => {
+                                                    const updated = kanbanStages.map((s, i) => i === idx ? { ...s, color: e.target.value } : s);
+                                                    saveKanbanStages(updated);
+                                                }}
+                                                title={language === "de" ? "Farbe ändern" : "Change color"}
+                                                style={{ width: "14px", height: "14px", border: "none", cursor: "pointer", padding: 0, borderRadius: "50%", flexShrink: 0 }}
+                                            />
+                                            <span
+                                                className="kanban-column-title"
+                                                contentEditable
+                                                suppressContentEditableWarning
+                                                onBlur={(e) => {
+                                                    const name = (e.target as HTMLElement).textContent || stage.name;
+                                                    if (name !== stage.name) {
+                                                        const updated = kanbanStages.map((s, i) => i === idx ? { ...s, name } : s);
+                                                        saveKanbanStages(updated);
+                                                    }
+                                                }}
+                                                onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); (e.target as HTMLElement).blur(); } }}
+                                            >
+                                                {stage.name}
+                                            </span>
                                             <span className="kanban-column-count">{stageTasks.length}</span>
+                                            <button
+                                                onClick={() => {
+                                                    if (confirm(language === "de" ? `Phase "${stage.name}" löschen?` : `Delete stage "${stage.name}"?`)) {
+                                                        saveKanbanStages(kanbanStages.filter((_, i) => i !== idx));
+                                                    }
+                                                }}
+                                                className="kanban-column-delete"
+                                                title={language === "de" ? "Phase löschen" : "Delete stage"}
+                                            >
+                                                <X size={12} />
+                                            </button>
                                         </div>
                                         <div className="kanban-column-body">
                                             {stageTasks.map(renderKanbanCard)}
@@ -6448,6 +6482,18 @@ export default function WeeklyView() {
                                     </div>
                                 );
                             })}
+                            {/* Add stage column */}
+                            <div
+                                className="kanban-column kanban-column-add"
+                                onClick={() => {
+                                    const id = `stage-${Date.now()}`;
+                                    saveKanbanStages([...kanbanStages, { id, name: t.stageName, color: "#6b7280" }]);
+                                }}
+                            >
+                                <div className="kanban-column-header" style={{ borderBottomColor: "transparent", cursor: "pointer", justifyContent: "center", color: "#9ca3af" }}>
+                                    <Plus size={16} />
+                                </div>
+                            </div>
                             {/* Unassigned column */}
                             {(() => {
                                 const unassigned = filteredKanbanTasks.filter(t => !t.kanbanStage && !t.completed);
@@ -11191,62 +11237,7 @@ function SettingsSidebar({
                                 )}
                             </div>
 
-                            {/* Kanban Stages Settings */}
+                            {/* Kanban Stages — moved to inline kanban view */}
-                            <div style={{ marginTop: "24px", borderTop: "1px solid var(--border-color, #e5e7eb)", paddingTop: "16px" }}>
-                                <h4 style={{ fontSize: "0.95rem", fontWeight: 700, marginBottom: "8px", display: "flex", alignItems: "center", gap: "6px" }}>
-                                    <LayoutGrid size={16} /> {t.kanbanStages}
-                                </h4>
-                                <p style={{ fontSize: "0.8rem", color: "#888", marginBottom: "12px" }}>{t.kanbanStagesDesc}</p>
-                                <div style={{ display: "flex", flexDirection: "column", gap: "6px", marginBottom: "12px" }}>
-                                    {kanbanStages.map((stage, idx) => (
-                                        <div key={stage.id} style={{ display: "flex", alignItems: "center", gap: "8px", padding: "4px 8px", borderRadius: "6px", background: "var(--bg-secondary, #f9fafb)" }}>
-                                            <input
-                                                type="color"
-                                                value={stage.color}
-                                                onChange={(e) => {
-                                                    const updated = kanbanStages.map((s, i) => i === idx ? { ...s, color: e.target.value } : s);
-                                                    saveKanbanStages(updated);
-                                                }}
-                                                style={{ width: "24px", height: "24px", border: "none", cursor: "pointer", padding: 0 }}
-                                            />
-                                            <input
-                                                type="text"
-                                                defaultValue={stage.name}
-                                                onBlur={(e) => {
-                                                    const updated = kanbanStages.map((s, i) => i === idx ? { ...s, name: e.target.value } : s);
-                                                    saveKanbanStages(updated);
-                                                }}
-                                                onKeyDown={(e) => { if (e.key === "Enter") (e.target as HTMLInputElement).blur(); }}
-                                                className="weekly-input"
-                                                style={{ flex: 1, padding: "4px 8px", fontSize: "0.85rem" }}
-                                            />
-                                            <button
-                                                onClick={() => {
-                                                    const updated = kanbanStages.filter((_, i) => i !== idx);
-                                                    saveKanbanStages(updated);
-                                                }}
-                                                style={{ padding: "2px", opacity: 0.5, cursor: "pointer", color: "#ef4444", background: "none", border: "none" }}
-                                                title="Delete"
-                                            >
-                                                <X size={14} />
-                                            </button>
-                                        </div>
-                                    ))}
-                                </div>
-                                <button
-                                    onClick={() => {
-                                        const id = `stage-${Date.now()}`;
-                                        saveKanbanStages([...kanbanStages, { id, name: t.stageName, color: "#6b7280" }]);
-                                    }}
-                                    style={{
-                                        display: "flex", alignItems: "center", gap: "4px",
-                                        background: "none", border: "1px dashed #ccc", borderRadius: "6px",
-                                        padding: "6px 12px", cursor: "pointer", color: "#888", fontSize: "0.85rem",
-                                    }}
-                                >
-                                    <Plus size={14} /> {t.addStage}
-                                </button>
-                            </div>
 
                             {/* Weather Settings */}
                             <div style={{ marginTop: "24px", borderTop: "1px solid var(--border-color, #e5e7eb)", paddingTop: "16px" }}>