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:
@@ -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 () => {
|
||||
|
||||
Reference in New Issue
Block a user