feat(ui): screen refresh redesign — home, edit, settings, and window management

apps/threshold/src-tauri/capabilities/default.json

@@ -21,9 +21,6 @@
 		"fs:allow-write-text-file",
 		"core:window:allow-show",
 		"core:window:allow-set-focus",
-		"core:window:allow-maximize",
-		"core:window:allow-unmaximize",
-		"core:window:allow-toggle-maximize",
 		"core:window:allow-minimize",
 		"core:window:allow-unminimize",
 		"core:window:allow-close",

apps/threshold/src-tauri/capabilities/desktop.json

@@ -7,7 +7,6 @@
 	"permissions": [
 		"window-state:default",
 		"core:webview:allow-create-webview-window",
-		"core:window:allow-destroy",
-		"core:window:allow-set-size"
+		"core:window:allow-destroy"
 	]
 }

apps/threshold/src-tauri/src/lib.rs

@@ -83,7 +83,11 @@ pub fn run() {
 
     #[cfg(not(any(target_os = "android", target_os = "ios")))]
     {
-        builder = builder.plugin(tauri_plugin_window_state::Builder::new().build());
+        builder = builder.plugin(
+            tauri_plugin_window_state::Builder::new()
+                .with_state_flags(tauri_plugin_window_state::StateFlags::POSITION)
+                .build(),
+        );
     }
 
     builder = builder.invoke_handler(tauri::generate_handler![

apps/threshold/src-tauri/tauri.conf.json

@@ -13,9 +13,9 @@
 		"windows": [
 			{
 				"title": "Threshold",
-				"width": 450,
-				"height": 800,
-				"resizable": true,
+				"width": 760,
+				"height": 680,
+				"resizable": false,
 				"maximizable": false,
 				"decorations": false,
 				"visible": true

apps/threshold/src/App.tsx

@@ -84,9 +84,12 @@ const App: React.FC = () => {
 			try {
 				try {
 					await win.setDecorations(false); // Force removal of native title bar
-					await win.unmaximize();
 					// await win.setSize(new LogicalSize(450, 800));
-					await win.center();
+					// Only centre on first launch (no saved position yet)
+					const pos = await win.outerPosition();
+					if (pos.x === 0 && pos.y === 0) {
+						await win.center();
+					}
 				} catch (e) {
 					console.error('Failed to resize/decorate window:', e);
 				}

apps/threshold/src/components/AlarmItem.tsx

@@ -6,6 +6,8 @@ import { format } from 'date-fns';
 import { TimeFormatHelper } from '../utils/TimeFormatHelper';
 import { PlatformUtils } from '../utils/PlatformUtils';
 import { SwipeToDeleteRow } from './SwipeToDeleteRow';
+import { accentRailSx } from '../theme/alarmCardStyles';
+import { UI } from '../theme/uiTokens';
 
 interface AlarmItemProps {
 	alarm: AlarmRecord;
@@ -49,21 +51,23 @@ export const AlarmItem: React.FC<AlarmItemProps> = ({
 			onClick={!isMobile ? onClick : undefined}
 			sx={{
 				width: '100%',
-				// Mobile "bubble" styling is handled by the wrapper now
 				mb: isMobile ? 0 : undefined,
 				display: 'flex',
 				justifyContent: 'space-between',
 				alignItems: 'center',
 				p: 2,
+				pl: 1.5,
 				cursor: 'pointer',
-				borderRadius: isMobile ? '16px' : undefined, // Bubble look on mobile, default on desktop
-				// Ionic items are usually list items.
-				// Let's keep card look but maybe reduced elevation or spacing on mobile
-				boxShadow: isMobile ? 'none' : undefined, // Remove shadow inside the swipe row
+				position: 'relative',
+				overflow: 'hidden',
+				borderRadius: isMobile ? UI.card.borderRadius : undefined,
+				boxShadow: isMobile ? 'none' : undefined,
 				bgcolor: 'background.paper',
-				borderBottom: isMobile ? 'none' : undefined, // Remove list separator look
+				borderBottom: isMobile ? 'none' : undefined,
 			}}
 		>
+			{/* Accent rail */}
+			<Box sx={accentRailSx(alarm.enabled)} />
 			<Box sx={{ display: 'flex', flexDirection: 'column' }}>
 				<Typography variant="h5" component="div" sx={{ fontWeight: 'bold' }}>
 					{timeDisplay}

apps/threshold/src/components/DaySelector.tsx

@@ -31,7 +31,8 @@ export const DaySelector: React.FC<DaySelectorProps> = ({ selectedDays, onChange
                     key={index}
                     aria-label={label}
                     sx={{
-                        border: '1px solid rgba(0, 0, 0, 0.12)',
+                        border: '1px solid',
+                        borderColor: 'divider',
                         '&.Mui-selected': {
                             backgroundColor: 'primary.main',
                             color: 'primary.contrastText',

apps/threshold/src/components/NextAlarmBanner.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { alpha, useTheme } from '@mui/material/styles';
+import { AccessTime as AccessTimeIcon } from '@mui/icons-material';
+import { AlarmRecord } from '../types/alarm';
+import { TimeFormatHelper } from '../utils/TimeFormatHelper';
+import { UI } from '../theme/uiTokens';
+
+interface NextAlarmBannerProps {
+	alarms: AlarmRecord[];
+	is24h: boolean;
+}
+
+export const NextAlarmBanner: React.FC<NextAlarmBannerProps> = ({ alarms, is24h }) => {
+	const theme = useTheme();
+
+	const now = Date.now();
+	const nextAlarm = alarms
+		.filter((a) => a.enabled && a.nextTrigger && a.nextTrigger > now)
+		.sort((a, b) => a.nextTrigger! - b.nextTrigger!)
+		[0];
+
+	if (!nextAlarm) return null;
+
+	const triggerDate = new Date(nextAlarm.nextTrigger!);
+	const diffMs = nextAlarm.nextTrigger! - now;
+	const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+	const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+
+	const countdownParts: string[] = [];
+	if (diffHours > 0) countdownParts.push(`${diffHours}h`);
+	countdownParts.push(`${diffMinutes}m`);
+	const countdown = countdownParts.join(' ');
+
+	const formattedTime = TimeFormatHelper.format(triggerDate, is24h);
+
+	const ariaLabel = `Next alarm in ${countdown}, at ${formattedTime}`;
+
+	return (
+		<Box
+			role="status"
+			aria-label={ariaLabel}
+			sx={{
+				background: `linear-gradient(to right, ${alpha(theme.palette.primary.main, 0.16)}, ${alpha(theme.palette.primary.main, 0.03)})`,
+				borderRadius: UI.banner.borderRadius,
+				px: 2,
+				py: 1.5,
+				mb: 2,
+				display: 'flex',
+				alignItems: 'center',
+				gap: 1.5,
+			}}
+		>
+			<AccessTimeIcon sx={{ color: 'primary.main', fontSize: 20 }} />
+			<Typography variant="body2" sx={{ fontWeight: 600, color: 'primary.main' }}>
+				Next alarm in {countdown}  ·  Scheduled: {formattedTime}
+			</Typography>
+		</Box>
+	);
+};

apps/threshold/src/components/PullToRefresh.tsx

@@ -0,0 +1,111 @@
+import React, { useRef, useState, useCallback } from 'react';
+import { Box, CircularProgress } from '@mui/material';
+import { motion, useMotionValue, useTransform, animate } from 'motion/react';
+
+const PULL_THRESHOLD = 72;
+
+interface PullToRefreshProps {
+	onRefresh: () => void;
+	children: React.ReactNode;
+}
+
+export const PullToRefresh: React.FC<PullToRefreshProps> = ({ onRefresh, children }) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [isRefreshing, setIsRefreshing] = useState(false);
+	const [isDragging, setIsDragging] = useState(false);
+	const pullY = useMotionValue(0);
+	const spinnerOpacity = useTransform(pullY, [0, PULL_THRESHOLD], [0, 1]);
+	const spinnerScale = useTransform(pullY, [0, PULL_THRESHOLD], [0.5, 1]);
+
+	const prefersReducedMotion =
+		typeof window !== 'undefined' &&
+		window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+	const startYRef = useRef<number | null>(null);
+
+	const handlePointerDown = useCallback((e: React.PointerEvent) => {
+		const el = containerRef.current;
+		if (!el || el.scrollTop > 0 || isRefreshing) return;
+		startYRef.current = e.clientY;
+		setIsDragging(true);
+	}, [isRefreshing]);
+
+	const handlePointerMove = useCallback((e: React.PointerEvent) => {
+		if (!isDragging || startYRef.current === null) return;
+		const el = containerRef.current;
+		if (!el || el.scrollTop > 0) {
+			setIsDragging(false);
+			pullY.set(0);
+			startYRef.current = null;
+			return;
+		}
+		const delta = Math.max(0, e.clientY - startYRef.current);
+		// Dampen the pull for a natural feel
+		const dampened = Math.min(delta * 0.5, PULL_THRESHOLD * 1.5);
+		pullY.set(dampened);
+	}, [isDragging, pullY]);
+
+	const handlePointerUp = useCallback(() => {
+		if (!isDragging) return;
+		setIsDragging(false);
+		startYRef.current = null;
+
+		const currentPull = pullY.get();
+		if (currentPull >= PULL_THRESHOLD) {
+			setIsRefreshing(true);
+			onRefresh();
+			// Reset after a short delay to show the spinner
+			setTimeout(() => {
+				setIsRefreshing(false);
+				if (prefersReducedMotion) {
+					pullY.set(0);
+				} else {
+					animate(pullY, 0, { type: 'spring', stiffness: 300, damping: 30 });
+				}
+			}, 600);
+		} else {
+			if (prefersReducedMotion) {
+				pullY.set(0);
+			} else {
+				animate(pullY, 0, { type: 'spring', stiffness: 300, damping: 30 });
+			}
+		}
+	}, [isDragging, pullY, onRefresh, prefersReducedMotion]);
+
+	return (
+		<Box
+			ref={containerRef}
+			onPointerDown={handlePointerDown}
+			onPointerMove={handlePointerMove}
+			onPointerUp={handlePointerUp}
+			onPointerCancel={handlePointerUp}
+			sx={{
+				position: 'relative',
+				touchAction: 'pan-x',
+				overflowY: 'auto',
+				flexGrow: 1,
+			}}
+		>
+			{/* Pull indicator */}
+			<motion.div
+				style={{
+					display: 'flex',
+					justifyContent: 'center',
+					alignItems: 'center',
+					overflow: 'hidden',
+					height: pullY,
+					opacity: spinnerOpacity,
+					scale: spinnerScale,
+				}}
+			>
+				<CircularProgress
+					size={28}
+					color="primary"
+					variant={isRefreshing ? 'indeterminate' : 'determinate'}
+					value={isRefreshing ? undefined : 100}
+				/>
+			</motion.div>
+			{children}
+		</Box>
+	);
+};

apps/threshold/src/components/SwipeToDeleteRow.tsx

@@ -19,6 +19,9 @@ export const SwipeToDeleteRow: React.FC<SwipeToDeleteRowProps> = ({
     const x = useMotionValue(0);
     const controls = useAnimation();
     const [isDeleting, setIsDeleting] = useState(false);
+    const prefersReducedMotion =
+        typeof window !== 'undefined' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -49,17 +52,26 @@ export const SwipeToDeleteRow: React.FC<SwipeToDeleteRowProps> = ({
 
         if ((isPastThreshold || isFastFling) && !isDeleting) {
             setIsDeleting(true);
-            // Animate off screen in the direction of the swipe
-            const direction = offset > 0 ? 1 : -1;
-            await controls.start({
-                x: direction * width * 1.5,
-                transition: { duration: 0.2 }
-            });
-            // Trigger delete callback
-            onDelete();
+            if (prefersReducedMotion) {
+                onDelete();
+            } else {
+                // Animate off screen in the direction of the swipe
+                const direction = offset > 0 ? 1 : -1;
+                await controls.start({
+                    x: direction * width * 1.5,
+                    transition: { duration: 0.2 }
+                });
+                onDelete();
+            }
         } else {
             // Spring back to start
-            controls.start({ x: 0, transition: { type: 'spring', stiffness: 400, damping: 25 } });
+            if (prefersReducedMotion) {
+                await controls.start({ x: 0, transition: { duration: 0 } });
+            } else {
+                await controls.start({ x: 0, transition: { type: 'spring', stiffness: 400, damping: 25 } });
+            }
+            // Reset drag flag so subsequent taps register as clicks
+            isDrag.current = false;
         }
     };