Simplify layout and add timer editing

Made-with: Cursor

Author: user

src/app/page.tsx

@@ -36,7 +36,7 @@ export default function HomePage() {
   const [mounted, setMounted] = useState(false);
 
   const t = useMemo(() => getMessages(locale), [locale]);
-  const { settings, setTheme, setShowMilliseconds, setCompactMode, setDefaultInputMode } = useSettings();
+  const { settings, setTheme, setShowMilliseconds } = useSettings();
   const {
     sessions,
     hydrated,
@@ -46,6 +46,7 @@ export default function HomePage() {
     clearHistory,
     getActiveSessions,
     removeSession,
+    updateSessionTarget,
   } = useSession();
   const { permission, supported, requestPermission, sendNotification } = useNotifications();
   const pip = usePictureInPicture(targetDate);
@@ -230,16 +231,29 @@ export default function HomePage() {
     setShowComplete(false);
   }, []);
 
+  const handleEditSession = useCallback(
+    (id: string, nextTarget: Date) => {
+      updateSessionTarget(id, nextTarget);
+      if (id === selectedSessionId) {
+        const duration = nextTarget.getTime() - Date.now();
+        if (duration > 0) {
+          setTargetDate(nextTarget);
+          setTotalDuration(duration);
+          setShowComplete(false);
+        }
+      }
+    },
+    [updateSessionTarget, selectedSessionId],
+  );
+
   if (!mounted) return null;
 
   const isActive = targetDate !== null && !showComplete;
-  const contentMax = settings.compactMode ? "max-w-5xl" : "max-w-6xl";
-  const cardPadding = settings.compactMode ? "p-5 sm:p-7" : "p-6 sm:p-10";
 
   return (
     <LocaleContext value={{ locale, setLocale, t }}>
       <div className="flex min-h-dvh min-h-[100dvh] flex-col overflow-x-hidden touch-pan-y">
-        <header className="mx-auto flex w-full items-center justify-between gap-2 px-4 py-3 pt-[max(0.75rem,env(safe-area-inset-top))] sm:px-6 sm:py-4 shrink-0">
+        <header className="mx-auto flex w-full max-w-6xl items-center justify-between gap-2 px-4 py-3 pt-[max(0.75rem,env(safe-area-inset-top))] sm:px-6 sm:py-4 shrink-0">
           <h1 className="text-lg font-bold text-gradient sm:text-xl md:text-2xl">Count23</h1>
           <div className="flex items-center gap-2">
             <button
@@ -259,7 +273,7 @@ export default function HomePage() {
           </div>
         </header>
 
-        <main className={`mx-auto flex w-full ${contentMax} flex-1 flex-col items-center justify-center px-4 pb-8`}>
+        <main className="mx-auto flex w-full max-w-6xl flex-1 flex-col items-center justify-center px-4 pb-8">
           <AnimatePresence mode="wait">
             {showComplete ? (
               <motion.div key="success" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
@@ -273,7 +287,7 @@ export default function HomePage() {
                 animate={{ opacity: 1, scale: 1 }}
                 exit={{ opacity: 0, scale: 0.95 }}
               >
-                <div className={`glass-card glow-blue w-full max-w-xl ${cardPadding}`}>
+                <div className="glass-card glow-blue w-full max-w-xl p-6 sm:p-10">
                   <CountdownCircle
                     state={state}
                     labels={{
@@ -310,12 +324,8 @@ export default function HomePage() {
                   <p className="text-sm text-slate-400">{t.app.tagline}</p>
                 </div>
 
-                <div className={`glass-card w-full max-w-xl ${settings.compactMode ? "p-6 sm:p-7" : "p-8 sm:p-10"}`}>
-                  <TimeInput
-                    onStart={handleStart}
-                    compact={settings.compactMode}
-                    defaultMode={settings.defaultInputMode}
-                  />
+                <div className="glass-card w-full max-w-xl p-7 sm:p-10">
+                  <TimeInput onStart={handleStart} />
                 </div>
               </motion.div>
             )}
@@ -335,6 +345,7 @@ export default function HomePage() {
                   selectedSessionId={selectedSessionId}
                   onSelectSession={setSelectedSessionId}
                   onCancelSession={handleCancel}
+                  onEditSession={handleEditSession}
                   onClearHistory={clearHistory}
                   onRemoveSession={removeSession}
                   onAddTimer={() => setShowAddForm(true)}
@@ -345,7 +356,7 @@ export default function HomePage() {
 
           {showAddForm && isActive && (
             <motion.div
-              className={`mt-4 w-full max-w-2xl glass-card ${settings.compactMode ? "p-4" : "p-6"}`}
+              className="mt-4 w-full max-w-2xl glass-card p-6"
               initial={{ opacity: 0, height: 0 }}
               animate={{ opacity: 1, height: "auto" }}
               exit={{ opacity: 0, height: 0 }}
@@ -360,11 +371,7 @@ export default function HomePage() {
                   {t.timer.cancel}
                 </button>
               </div>
-              <TimeInput
-                onStart={handleStart}
-                compact={settings.compactMode}
-                defaultMode={settings.defaultInputMode}
-              />
+              <TimeInput onStart={handleStart} />
             </motion.div>
           )}
         </main>
@@ -381,24 +388,16 @@ export default function HomePage() {
             close: t.settings.close,
             theme: t.settings.theme,
             showMilliseconds: t.settings.showMilliseconds,
-            compactMode: t.settings.compactMode,
-            defaultInputMode: t.settings.defaultInputMode,
             themes: {
               midnight: t.settings.themeMidnight,
               ocean: t.settings.themeOcean,
               sunset: t.settings.themeSunset,
               forest: t.settings.themeForest,
             },
-            modes: {
-              quick: t.timer.modeQuick,
-              datetime: t.timer.modePickDate,
-            },
           }}
           onClose={() => setShowSettings(false)}
           onThemeChange={setTheme}
           onShowMillisecondsChange={setShowMilliseconds}
-          onCompactModeChange={setCompactMode}
-          onDefaultInputModeChange={setDefaultInputMode}
         />
       </div>
     </LocaleContext>

src/features/countdown/components/SessionList.tsx

@@ -1,8 +1,15 @@
 "use client";
 
+import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useLocale } from "@/features/i18n";
-import { formatTimeLocale, formatRemaining } from "../utils/time";
+import {
+  formatTimeLocale,
+  formatRemaining,
+  formatTargetDisplay,
+  parseFutureDatetimeLocal,
+  toDatetimeLocalValue,
+} from "../utils/time";
 import type { CountdownSession } from "../types";
 
 interface SessionListProps {
@@ -11,6 +18,7 @@ interface SessionListProps {
   selectedSessionId: string | null;
   onSelectSession: (id: string) => void;
   onCancelSession: (sessionId: string) => void;
+  onEditSession: (id: string, target: Date) => void;
   onClearHistory: () => void;
   onRemoveSession: (id: string) => void;
   onAddTimer: () => void;
@@ -28,11 +36,15 @@ export function SessionList({
   selectedSessionId,
   onSelectSession,
   onCancelSession,
+  onEditSession,
   onClearHistory,
   onRemoveSession,
   onAddTimer,
 }: SessionListProps) {
   const { t, locale } = useLocale();
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState("");
+  const [editError, setEditError] = useState<string | null>(null);
 
   const historySessions = sessions.filter((s) => s.status !== "active");
   const hasHistory = historySessions.length > 0;
@@ -51,24 +63,24 @@ export function SessionList({
   }
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-5">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold uppercase tracking-wider text-slate-400">
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400">
           {t.sessions.title}
         </h3>
         {activeSessions.length > 0 && (
           <button
             type="button"
             onClick={onAddTimer}
-            className="text-xs font-medium text-blue-400 hover:text-blue-300 transition-colors"
+            className="rounded-full border border-white/15 bg-white/5 px-3 py-1.5 text-xs font-medium text-slate-200 transition-colors hover:bg-white/10"
           >
             + {t.sessions.addTimer}
           </button>
         )}
       </div>
 
       {activeSessions.length > 0 && (
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2.5">
           <span className="text-[10px] uppercase tracking-wider text-slate-500">
             {t.sessions.active}
           </span>
@@ -77,6 +89,7 @@ export function SessionList({
               const target = new Date(session.targetTime);
               const remaining = Math.max(0, target.getTime() - Date.now());
               const isSelected = session.id === selectedSessionId;
+              const isEditing = editingId === session.id;
               return (
                 <motion.div
                   key={session.id}
@@ -85,33 +98,94 @@ export function SessionList({
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, x: -12 }}
                   onClick={() => onSelectSession(session.id)}
-                  className={`flex items-center justify-between rounded-xl px-4 py-3 border cursor-pointer transition-colors
-                    ${isSelected ? "bg-blue-500/20 border-blue-500/40" : "bg-white/[0.03] border-white/5 hover:bg-white/[0.06]"}`}
+                  className={`rounded-2xl border p-4 cursor-pointer transition-colors ${
+                    isSelected ? "bg-blue-500/20 border-blue-500/40" : "bg-white/[0.03] border-white/10 hover:bg-white/[0.06]"
+                  }`}
                 >
-                  <div className="flex flex-col gap-0.5 min-w-0">
-                    <span className="text-sm font-medium text-slate-200 truncate">
-                      {formatTimeLocale(target, locale)}
-                    </span>
-                    <span className="text-xs text-slate-500 tabular-nums">
-                      {formatRemaining(remaining)} left
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2 shrink-0">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <span className="block text-base font-semibold text-slate-100 truncate">
+                        {formatTargetDisplay(target, locale)}
+                      </span>
+                      <span className="text-xs text-slate-400 tabular-nums">
+                        {formatRemaining(remaining)} left
+                      </span>
+                    </div>
                     <span className={`rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase ${STATUS_STYLES.active}`}>
-                      {isSelected ? "•" : ""} {t.sessions.active}
+                      {isSelected ? "• " : ""}
+                      {t.sessions.active}
                     </span>
+                  </div>
+
+                  <div className="mt-3 flex flex-wrap items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setEditingId(session.id);
+                        setEditValue(toDatetimeLocalValue(target));
+                        setEditError(null);
+                      }}
+                      className="rounded-lg border border-white/15 bg-white/5 px-3 py-1.5 text-xs font-medium text-slate-200 hover:bg-white/10"
+                    >
+                      {t.sessions.edit}
+                    </button>
                     <button
                       type="button"
                       onClick={(e) => {
                         e.stopPropagation();
                         onCancelSession(session.id);
                       }}
-                      className="rounded-lg px-2 py-1 text-[10px] font-medium text-red-400 hover:bg-red-500/20 transition-colors"
+                      className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-1.5 text-xs font-medium text-red-300 hover:bg-red-500/20 transition-colors"
                       aria-label={t.timer.cancel}
                     >
                       {t.timer.cancel}
                     </button>
                   </div>
+
+                  {isEditing && (
+                    <div className="mt-3 rounded-xl border border-white/10 bg-black/20 p-3" onClick={(e) => e.stopPropagation()}>
+                      <label className="mb-2 block text-[11px] uppercase tracking-wider text-slate-400">{t.sessions.editTarget}</label>
+                      <input
+                        type="datetime-local"
+                        value={editValue}
+                        min={toDatetimeLocalValue(new Date())}
+                        onChange={(e) => {
+                          setEditValue(e.target.value);
+                          setEditError(null);
+                        }}
+                        className="w-full rounded-lg border border-white/15 bg-white/5 px-3 py-2 text-sm text-slate-100 outline-none focus:border-blue-500/50"
+                      />
+                      {editError && <p className="mt-2 text-xs text-amber-400">{editError}</p>}
+                      <div className="mt-3 flex items-center gap-2">
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const parsed = parseFutureDatetimeLocal(editValue);
+                            if (!parsed) {
+                              setEditError(t.timer.errorPast);
+                              return;
+                            }
+                            onEditSession(session.id, parsed);
+                            setEditingId(null);
+                          }}
+                          className="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-500"
+                        >
+                          {t.sessions.save}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setEditingId(null);
+                            setEditError(null);
+                          }}
+                          className="rounded-lg border border-white/15 px-3 py-1.5 text-xs text-slate-300 hover:bg-white/10"
+                        >
+                          {t.settings.close}
+                        </button>
+                      </div>
+                    </div>
+                  )}
                 </motion.div>
               );
             })}
@@ -120,7 +194,7 @@ export function SessionList({
       )}
 
       {hasHistory && (
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2.5">
           <div className="flex items-center justify-between">
             <span className="text-[10px] uppercase tracking-wider text-slate-500">
               {t.sessions.completed} / {t.sessions.cancelled}

src/features/countdown/components/TimeInput.tsx

@@ -15,13 +15,11 @@ const DRAFT_KEY = "count23_input_draft";
 
 interface TimeInputProps {
   onStart: (target: Date) => void;
-  defaultMode?: InputMode;
-  compact?: boolean;
 }
 
-export function TimeInput({ onStart, defaultMode = "quick", compact = false }: TimeInputProps) {
+export function TimeInput({ onStart }: TimeInputProps) {
   const { t } = useLocale();
-  const [mode, setMode] = useState<InputMode>(defaultMode);
+  const [mode, setMode] = useState<InputMode>("datetime");
   const [timeValue, setTimeValue] = useState("");
   const [datetimeValue, setDatetimeValue] = useState("");
   const [minLocal, setMinLocal] = useState(() => toDatetimeLocalValue(new Date()));
@@ -31,10 +29,6 @@ export function TimeInput({ onStart, defaultMode = "quick", compact = false }: T
     setMinLocal(toDatetimeLocalValue(new Date()));
   }, []);
 
-  useEffect(() => {
-    setMode(defaultMode);
-  }, [defaultMode]);
-
   useEffect(() => {
     if (typeof window === "undefined") return;
     const raw = localStorage.getItem(DRAFT_KEY);
@@ -100,7 +94,7 @@ export function TimeInput({ onStart, defaultMode = "quick", compact = false }: T
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
-      className={`flex flex-col items-center ${compact ? "gap-3" : "gap-4"}`}
+      className="flex flex-col items-center gap-4"
     >
       <div
         className="flex w-full max-w-sm flex-wrap justify-center gap-1 rounded-xl border border-white/10 bg-white/5 p-1"