From 81f3a4262081b2cc22b880e256aa95a7c7457ce6 Mon Sep 17 00:00:00 2001 From: mARTin-B78 Date: Mon, 11 May 2026 12:51:17 +0200 Subject: [PATCH] feat: task edit alignment + settings tabs + mobile sidebar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Someday task edit: add icon/checkbox column spacers before the textarea so the edit field aligns exactly with the task text column - Settings tabs: remove outer padding, use space-around + nowrap so all 9 icons fit in a single row without wrapping - Mobile: left sidebar rail (PanelLeftOpen button) — slides in from left with nav controls (prev/next day/week, today), actions (search, calendar jump, projects, focus, quick settings), and bottom controls (dark mode, settings, sign out). CSS class .mobile-left-sidebar and .mobile-rail-btn added for easy customization. v1.110.0 --- package.json | 2 +- src/app/globals.css | 36 +++++++++++++++++++++ src/components/SettingsSidebar.tsx | 10 +++--- src/components/WeeklyView.tsx | 52 ++++++++++++++++++++++++++++-- 4 files changed, 92 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index ae0ff47..ee9baa1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "my-weekly-todo-list", - "version": "1.109.2", + "version": "1.110.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": { diff --git a/src/app/globals.css b/src/app/globals.css index be68a27..0f59051 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -4791,6 +4791,42 @@ h3 { opacity: 0.7; } +/* --- Mobile Left Sidebar Rail --- */ +.mobile-left-sidebar { + scrollbar-width: none; +} +.mobile-left-sidebar::-webkit-scrollbar { + display: none; +} + +.mobile-rail-btn { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 10px; + border: none; + background: none; + cursor: pointer; + color: var(--weekly-text-light, #888); + transition: background 0.15s, color 0.15s; + flex-shrink: 0; +} +.mobile-rail-btn:hover, +.mobile-rail-btn:active { + background: var(--weekly-hover-bg, rgba(0, 0, 0, 0.07)); + color: var(--weekly-text, #333); +} +.dark-mode .mobile-rail-btn:hover, +.dark-mode .mobile-rail-btn:active { + background: rgba(255, 255, 255, 0.08); + color: #e5e7eb; +} +.mobile-rail-backdrop { + -webkit-tap-highlight-color: transparent; +} + /* --- Mobile Quick Actions in Sidebar --- */ .mobile-quick-nav-btn { min-width: 44px; diff --git a/src/components/SettingsSidebar.tsx b/src/components/SettingsSidebar.tsx index aa4d57f..62b40cb 100644 --- a/src/components/SettingsSidebar.tsx +++ b/src/components/SettingsSidebar.tsx @@ -951,11 +951,11 @@ function SettingsSidebar({ className="weekly-settings-tabs" style={{ display: "flex", - justifyContent: "center", - flexWrap: "wrap", - gap: "4px", + justifyContent: "space-around", + flexWrap: "nowrap", + gap: "0", borderBottom: "1px solid var(--weekly-border, #eee)", - padding: "0 24px", + padding: "0", }} > {([ @@ -975,7 +975,7 @@ function SettingsSidebar({ title={tab.label} className="settings-tab-btn" style={{ - padding: "10px 14px", + padding: "10px 8px", borderBottom: activeTab === tab.key ? "2px solid var(--weekly-text, black)" diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx index 0bcfd92..e05bb8e 100644 --- a/src/components/WeeklyView.tsx +++ b/src/components/WeeklyView.tsx @@ -94,6 +94,7 @@ import { Star, LogOut, Briefcase, + SlidersHorizontal, } from "lucide-react"; const stripHtml = (html: string) => html.replace(/<[^>]*>/g, '').trim(); @@ -922,6 +923,7 @@ export default function WeeklyView() { const [selectedDay, setSelectedDay] = useState(null); const [showMobileFabSheet, setShowMobileFabSheet] = useState(false); + const [showMobileRail, setShowMobileRail] = useState(false); const [showMobileFabMenu, setShowMobileFabMenu] = useState(false); const [mobileStickyDay, setMobileStickyDay] = useState(null); const [mobileStickyDayVisible, setMobileStickyDayVisible] = useState(false); @@ -6061,8 +6063,8 @@ export default function WeeklyView() { {/* Mobile Header */} {isMobile && (
- {/* Left: Quick settings */} - @@ -6110,6 +6112,47 @@ export default function WeeklyView() {
)} + {/* Mobile left sidebar */} + {isMobile && showMobileRail && ( + <> +
setShowMobileRail(false)} + style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.35)", zIndex: 200 }} + /> +
+ {/* Close */} + +
+ {/* Navigation */} + + + + + +
+ {/* Actions */} + + + + + +
+
+ + + +
+ + )} + {/* Desktop Header: Left, Center, Right */}
{/* LEFT SECTION: View Switcher, Days, Hours, Slot Duration — only shown in top-toolbar mode */} @@ -10268,6 +10311,10 @@ function TaskItem({ }} > {isEditing ? ( + <> + {/* Someday: match icon + checkbox column widths so textarea aligns with task text */} + {isSomeday && showProjectIcons && } + {isSomeday && showTaskCheckboxes && }
{variant === "minimal" ? (