add reduce motion toggle and bump to v1.0.1

Add in-app reduce motion setting under Settings > Appearance so users
can disable animations without changing their OS preference. Applies a
.reduce-motion CSS class to kill all CSS transitions/animations and
wraps the app in MotionConfig to globally disable Framer Motion springs,
layout animations, and enter/exit transitions. Setting persists to disk.

Also removes leftover default Square*.png icons and bumps version to
1.0.1.
This commit is contained in:
Your Name
2026-02-16 17:51:23 +02:00
parent d1636745f1
commit 30263d6ac7
21 changed files with 1339 additions and 9 deletions

View File

@@ -21,6 +21,7 @@ interface AppState {
setView: (view: View) => void;
refreshBoards: () => Promise<void>;
addRecentBoard: (boardId: string) => void;
setReduceMotion: (reduceMotion: boolean) => void;
setBoardSortOrder: (order: BoardSortOrder) => void;
setBoardManualOrder: (ids: string[]) => void;
getSortedBoards: () => BoardMeta[];
@@ -36,6 +37,10 @@ function applyTheme(theme: AppSettings["theme"]): void {
}
}
function applyReduceMotion(on: boolean): void {
document.documentElement.classList.toggle("reduce-motion", on);
}
function applyAppearance(settings: AppSettings): void {
const root = document.documentElement;
root.style.fontSize = `${settings.uiZoom * 16}px`;
@@ -70,6 +75,7 @@ export const useAppStore = create<AppState>((set, get) => ({
boardSortOrder: "updated",
boardManualOrder: [],
lastNotificationCheck: null,
reduceMotion: false,
},
boards: [],
view: { type: "board-list" },
@@ -82,6 +88,7 @@ export const useAppStore = create<AppState>((set, get) => ({
set({ settings, boards, initialized: true });
applyTheme(settings.theme);
applyAppearance(settings);
applyReduceMotion(settings.reduceMotion);
// Due date notifications (once per hour)
const lastCheck = settings.lastNotificationCheck;
@@ -148,6 +155,11 @@ export const useAppStore = create<AppState>((set, get) => ({
updateAndSave(get, set, { defaultColumnWidth });
},
setReduceMotion: (reduceMotion) => {
updateAndSave(get, set, { reduceMotion });
applyReduceMotion(reduceMotion);
},
setView: (view) => set({ view }),
refreshBoards: async () => {