kaneo (minimalist kanban) fork to experiment adding a tangled integration
github.com/usekaneo/kaneo
1import { create } from "zustand";
2import { createJSONStorage, persist } from "zustand/middleware";
3
4type UserPreferencesStore = {
5 theme: "light" | "dark" | "system";
6 setTheme: (
7 theme: "light" | "dark" | "system",
8 coordinates?: { x: number; y: number },
9 ) => void;
10
11 viewMode: "board" | "list";
12 setViewMode: (mode: "board" | "list") => void;
13
14 compactMode: boolean;
15 setCompactMode: (compact: boolean) => void;
16
17 showTaskNumbers: boolean;
18 setShowTaskNumbers: (show: boolean) => void;
19 toggleTaskNumbers: () => void;
20 showAssignees: boolean;
21 setShowAssignees: (show: boolean) => void;
22 toggleAssignees: () => void;
23 showDueDates: boolean;
24 setShowDueDates: (show: boolean) => void;
25 toggleDueDates: () => void;
26 showLabels: boolean;
27 setShowLabels: (show: boolean) => void;
28 toggleLabels: () => void;
29 showPriority: boolean;
30 setShowPriority: (show: boolean) => void;
31 togglePriority: () => void;
32 resetDisplayPreferences: () => void;
33
34 sidebarDefaultOpen: boolean;
35 setSidebarDefaultOpen: (open: boolean) => void;
36
37 weekStartsOn: 0 | 1;
38 setWeekStartsOn: (weekStartsOn: 0 | 1) => void;
39};
40
41export const useUserPreferencesStore = create<UserPreferencesStore>()(
42 persist(
43 (set) => ({
44 theme: "dark",
45 setTheme: (
46 theme: "light" | "dark" | "system",
47 coordinates?: { x: number; y: number },
48 ) => {
49 if (coordinates) {
50 document.documentElement.style.setProperty(
51 "--x",
52 `${coordinates.x}%`,
53 );
54 document.documentElement.style.setProperty(
55 "--y",
56 `${coordinates.y}%`,
57 );
58 } else {
59 document.documentElement.style.removeProperty("--x");
60 document.documentElement.style.removeProperty("--y");
61 }
62
63 if ("startViewTransition" in document) {
64 document.startViewTransition(() => {
65 set({ theme });
66 });
67 } else {
68 set({ theme });
69 }
70 },
71
72 viewMode: "board",
73 setViewMode: (mode) => set({ viewMode: mode }),
74
75 compactMode: false,
76 setCompactMode: (compact) => set({ compactMode: compact }),
77
78 showTaskNumbers: true,
79 setShowTaskNumbers: (show) => set({ showTaskNumbers: show }),
80 toggleTaskNumbers: () =>
81 set((state) => ({ showTaskNumbers: !state.showTaskNumbers })),
82 showAssignees: true,
83 setShowAssignees: (show) => set({ showAssignees: show }),
84 toggleAssignees: () =>
85 set((state) => ({ showAssignees: !state.showAssignees })),
86 showDueDates: true,
87 setShowDueDates: (show) => set({ showDueDates: show }),
88 toggleDueDates: () =>
89 set((state) => ({ showDueDates: !state.showDueDates })),
90 showLabels: true,
91 setShowLabels: (show) => set({ showLabels: show }),
92 toggleLabels: () => set((state) => ({ showLabels: !state.showLabels })),
93 showPriority: true,
94 setShowPriority: (show) => set({ showPriority: show }),
95 togglePriority: () =>
96 set((state) => ({ showPriority: !state.showPriority })),
97 resetDisplayPreferences: () =>
98 set({
99 showAssignees: true,
100 showDueDates: true,
101 showLabels: true,
102 showTaskNumbers: true,
103 showPriority: true,
104 }),
105
106 sidebarDefaultOpen: true,
107 setSidebarDefaultOpen: (open) => set({ sidebarDefaultOpen: open }),
108
109 weekStartsOn: 0,
110 setWeekStartsOn: (weekStartsOn) => set({ weekStartsOn }),
111 }),
112 {
113 name: "user-preferences",
114 storage: createJSONStorage(() => localStorage),
115 },
116 ),
117);