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

fix: remove visible hours UI controls

Browse Source 
The scrollable time grid already shows all 24 hours and auto-scrolls
to the preferred start hour on load, making the start/end hour
filter controls redundant. Removed from sidebar, header, and
full settings modal.

v1.75.1

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
mARTin 2026-03-25 21:05:02 +01:00
parent c05b31d1c6
commit 62848255d7
2 changed files with 1 additions and 89 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.75.0",
"version": "1.75.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": {

88
src/components/WeeklyView.tsx
View File

@ -6489,19 +6489,6 @@ export default function WeeklyView() {
</div>
)}
{/* Visible Hours (only with time grid) */}
{showTimeGrid && (
<div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
<Clock size={14} style={{ color: darkMode ? "#9ca3af" : "#6b7280", flexShrink: 0 }} />
<input type="number" min={0} max={23} value={startHour} onChange={(e) => { const h = Math.max(0, Math.min(23, parseInt(e.target.value) || 0)); setStartHour(h); saveSetting("startHour", h); }}
style={{ width: "44px", padding: "4px 4px", borderRadius: "6px", border: `1px solid ${darkMode ? "#555" : "#e5e7eb"}`, background: darkMode ? "#1f2937" : "#f3f4f6", color: darkMode ? "#e5e7eb" : "#333", fontSize: "0.8rem", textAlign: "center", outline: "none" }} />
<span style={{ fontSize: "0.7rem", color: darkMode ? "#9ca3af" : "#6b7280" }}>–</span>
<input type="number" min={1} max={24} value={endHour} onChange={(e) => { const h = Math.max(1, Math.min(24, parseInt(e.target.value) || 24)); setEndHour(h); saveSetting("endHour", h); }}
style={{ width: "44px", padding: "4px 4px", borderRadius: "6px", border: `1px solid ${darkMode ? "#555" : "#e5e7eb"}`, background: darkMode ? "#1f2937" : "#f3f4f6", color: darkMode ? "#e5e7eb" : "#333", fontSize: "0.8rem", textAlign: "center", outline: "none" }} />
<span style={{ fontSize: "0.7rem", color: darkMode ? "#9ca3af" : "#6b7280" }}>h</span>
</div>
)}
{/* Text size */}
<div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
<span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>
@ -6768,49 +6755,6 @@ export default function WeeklyView() {
))}
</div>
{/* Time Range — desktop only (available in sidebar on tablet) */}
{showTimeGrid && (
<div
className="header-desktop-only items-center gap-2 text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 rounded p-1 px-2"
title="Visible Hours"
>
<Clock size={16} className="text-gray-500" />
<div className="flex items-center gap-1">
<input
type="number"
min="0"
max={effectiveEndHour - 1}
value={effectiveStartHour}
onChange={(e) => {
const val = Math.max(
0,
Math.min(parseInt(e.target.value) || 0, effectiveEndHour - 1),
);
setStartHour(val);
saveSetting("startHour", val);
}}
className="w-10 p-0.5 border border-gray-200 dark:border-gray-700 rounded text-center bg-transparent focus:outline-none focus:border-teal-500"
/>
<span>-</span>
<input
type="number"
min={effectiveStartHour + 1}
max="24"
value={effectiveEndHour}
onChange={(e) => {
const val = Math.max(
effectiveStartHour + 1,
Math.min(parseInt(e.target.value) || 24, 24),
);
setEndHour(val);
saveSetting("endHour", val);
}}
className="w-10 p-0.5 border border-gray-200 dark:border-gray-700 rounded text-center bg-transparent focus:outline-none focus:border-teal-500"
/>
</div>
</div>
)}
{/* Slot Duration — desktop only (available in sidebar on tablet) */}
{showTimeGrid && (
<div
@ -12519,38 +12463,6 @@ function SettingsSidebar({
</select>
</div>
<div style={{ display: "flex", gap: "12px" }}>
<div style={{ flex: 1 }}>
<label style={{ display: "block", fontSize: "0.9rem", fontWeight: 600, marginBottom: "4px" }}>
{t.startHour}
</label>
<input
type="number" min="0" max="23"
value={(perView.getEffective("startHour", profile.startHour ?? 8) as number)}
onChange={(e) => {
const h = parseInt(e.target.value) || 0;
perView.saveViewSetting("startHour", h, true);
}}
className="weekly-input"
style={{ width: "100%", padding: "8px", border: "1px solid #ddd", borderRadius: "4px" }}
/>
</div>
<div style={{ flex: 1 }}>
<label style={{ display: "block", fontSize: "0.9rem", fontWeight: 600, marginBottom: "4px" }}>
{t.endHour}
</label>
<input
type="number" min="1" max="24"
value={(perView.getEffective("endHour", profile.endHour ?? 18) as number)}
onChange={(e) => {
const h = parseInt(e.target.value) || 0;
perView.saveViewSetting("endHour", h, true);
}}
className="weekly-input"
style={{ width: "100%", padding: "8px", border: "1px solid #ddd", borderRadius: "4px" }}
/>
</div>
</div>
<div>
<label style={{ display: "block", fontSize: "0.9rem", fontWeight: 600, marginBottom: "4px" }}>