Rest timer polishing. Rest timer sets done

This commit is contained in:
AG
2025-12-11 21:46:38 +02:00
parent c509a8be24
commit 138fe0c432
8 changed files with 286 additions and 134 deletions

View File

@@ -110,7 +110,7 @@ const ActiveSessionView: React.FC<ActiveSessionViewProps> = ({ tracker, activeSe
if (timer.status !== 'RUNNING') {
timer.reset(nextTime);
timer.start();
// timer.start(); // Removed per user request: disable auto-start
}
};

View File

@@ -38,7 +38,7 @@ const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang }) => {
const handleLogSet = async () => {
await handleLogSporadicSet();
// Always usage default/current setting for sporadic
timer.start();
// timer.start(); // Removed per user request: disable auto-start
};
const handleDurationChange = async (newVal: number) => {

View File

@@ -139,22 +139,53 @@ const RestTimerFAB: React.FC<RestTimerFABProps> = ({ timer, onDurationChange })
<button onClick={(e) => setEditValue(v => adjustEdit(v, 5))} className="w-10 h-10 flex items-center justify-center bg-surface-container-high text-on-surface rounded-full shadow-elevation-2 hover:brightness-110"><Plus size={20} /></button>
{/* Manual Input Field */}
<div className="bg-surface-container shadow-sm rounded px-2 py-1 my-1 flex items-center justify-center min-w-[60px]">
<div className="bg-surface-container shadow-sm rounded px-2 py-1 my-1 flex items-center justify-center">
<input
type="text"
className="bg-transparent text-on-surface font-mono font-bold text-lg text-center w-full focus:outline-none"
className="bg-transparent text-on-surface font-mono font-bold text-lg text-right w-[5.4ch] focus:outline-none"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onChange={(e) => {
let val = e.target.value;
// Filter non-digits and non-colon
val = val.replace(/[^0-9:]/g, '');
// Limit length to 5
if (val.length > 5) {
val = val.substring(0, 5);
}
// Validate Seconds part if colon exists
if (val.includes(':')) {
const parts = val.split(':');
if (parts.length > 1) {
const minutes = parts[0];
let seconds = parts[1];
// Clamp seconds to 59
if (seconds.length > 0) {
const secNum = parseInt(seconds, 10);
if (!isNaN(secNum) && secNum > 59) {
seconds = '59';
}
}
val = `${minutes}:${seconds}`;
}
}
setInputValue(val);
}}
onFocus={(e) => e.target.select()}
onBlur={handleInputBlur}
onKeyDown={(e) => {
if (e.key === 'Enter') e.currentTarget.blur();
}}
placeholder="00:00"
/>
</div>
<button onClick={(e) => setEditValue(v => adjustEdit(v, -5))} className="w-10 h-10 flex items-center justify-center bg-surface-container-high text-on-surface rounded-full shadow-elevation-2 hover:brightness-110"><Minus size={20} /></button>
<button onClick={saveEdit} className="w-10 h-10 flex items-center justify-center bg-primary text-on-primary rounded-full shadow-elevation-2 mt-1 hover:brightness-110"><Check size={20} /></button>
<button onClick={saveEdit} className="w-10 h-10 flex items-center justify-center bg-primary text-on-primary rounded-full shadow-elevation-2 mt-1 hover:brightness-110" aria-label="Save"><Check size={20} /></button>
</div>
) : (
<div className="flex flex-col items-end gap-3 animate-in slide-in-from-bottom-4 fade-in duration-200 mb-4 mr-1">
@@ -177,8 +208,8 @@ const RestTimerFAB: React.FC<RestTimerFABProps> = ({ timer, onDurationChange })
<button
onClick={handleToggle}
className={`w-16 h-16 rounded-full flex items-center justify-center shadow-elevation-3 hover:scale-105 transition-all active:scale-95 ${isEditing
? 'bg-error-container text-on-error-container hover:bg-error-container/80' // Light Red for cancel/close
: 'bg-primary text-on-primary'
? 'bg-error-container text-on-error-container hover:bg-error-container/80' // Light Red for cancel/close
: 'bg-primary text-on-primary'
}`}
>
{isEditing ? <X size={28} /> : <span className="font-mono text-sm font-bold">{formatSeconds(timeLeft)}</span>}