diff --git a/package.json b/package.json index b824823..0d138e6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "my-weekly-todo-list", - "version": "1.25.0", + "version": "1.25.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 5b25730..e12f3d1 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1559,6 +1559,33 @@ h3 { color: var(--weekly-text, #333); } +/* Mobile Someday Tabs Bar */ +.someday-tabs-mobile { + display: none; +} + +@media (max-width: 768px) { + .someday-tabs-mobile { + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; + padding: 6px 8px; + overflow-x: auto; + border-bottom: 1px solid var(--weekly-border); + scrollbar-width: none; + } + + .someday-tabs-mobile::-webkit-scrollbar { + display: none; + } + + /* Hide the vertical tabs in label column on mobile */ + .someday-tabs { + display: none !important; + } +} + /* Preferences Slide-in Panel */ .preferences-panel { position: fixed; diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx index 7ec6944..793d090 100644 --- a/src/components/WeeklyView.tsx +++ b/src/components/WeeklyView.tsx @@ -1429,6 +1429,8 @@ export default function WeeklyView() { const [activeSomedayTab, setActiveSomedayTab] = useState(null); const [editingTabName, setEditingTabName] = useState(null); const [renamingTabValue, setRenamingTabValue] = useState(""); + const [newTabForListId, setNewTabForListId] = useState(null); + const [newTabNameValue, setNewTabNameValue] = useState(""); useEffect(() => { if (typeof window !== "undefined") { @@ -6486,6 +6488,22 @@ export default function WeeklyView() { )}
+ {/* Mobile tabs bar (visible only on small screens) */} + {somedayExpanded && somedayTabs.length > 0 && ( +
+ + {somedayTabs.map(tab => ( + + ))} +
+ )} {somedayExpanded && (
{ const val = e.target.value; if (val === "__new__") { - const name = prompt(t.newTabName || "New tab name:"); - if (name?.trim()) assignListToTab(list.id, name.trim()); + e.target.value = list.tab || ""; + setNewTabForListId(list.id); + setNewTabNameValue(""); } else { assignListToTab(list.id, val || null); } @@ -6781,6 +6800,40 @@ export default function WeeklyView() {
+ {newTabForListId === list.id && ( + setNewTabNameValue(e.target.value)} + onBlur={() => { + if (newTabNameValue.trim()) { + assignListToTab(list.id, newTabNameValue.trim()); + } + setNewTabForListId(null); + setNewTabNameValue(""); + }} + onKeyDown={(e) => { + if (e.key === "Enter") e.currentTarget.blur(); + if (e.key === "Escape") { + setNewTabForListId(null); + setNewTabNameValue(""); + } + }} + placeholder={t.newTabName || "Tab name..."} + autoFocus + onClick={(e) => e.stopPropagation()} + style={{ + fontSize: "0.7rem", + border: "1px solid var(--weekly-border)", + borderRadius: "4px", + padding: "2px 6px", + background: "var(--weekly-bg)", + color: "var(--weekly-text)", + width: "80px", + outline: "none", + }} + /> + )}