Import source: src/stores/ui-store
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
|
||||
import { create } from "zustand";
|
||||
import { persist } from "zustand/middleware";
|
||||
import { favoriteDefaults } from "@/lib/routes";
|
||||
import type { Density } from "@/lib/design-tokens";
|
||||
|
||||
type Theme = "light" | "dark" | "system";
|
||||
|
||||
export type AccentId = "azure" | "violet" | "emerald" | "sunset" | "rose" | "cyan";
|
||||
export type GlassLevel = "off" | "subtle" | "standard" | "heavy";
|
||||
export type RadiusScale = "sharp" | "rounded" | "soft";
|
||||
|
||||
export const appearanceDefaults = {
|
||||
theme: "dark" as Theme,
|
||||
accent: "azure" as AccentId,
|
||||
glass: "subtle" as GlassLevel,
|
||||
radius: "rounded" as RadiusScale,
|
||||
ambiance: false,
|
||||
density: "compact" as Density,
|
||||
};
|
||||
|
||||
type UiState = {
|
||||
sidebarCollapsed: boolean;
|
||||
mobileSidebarOpen: boolean;
|
||||
commandOpen: boolean;
|
||||
density: Density;
|
||||
theme: Theme;
|
||||
accent: AccentId;
|
||||
glass: GlassLevel;
|
||||
radius: RadiusScale;
|
||||
ambiance: boolean;
|
||||
favorites: string[];
|
||||
recent: string[];
|
||||
toggleSidebar: () => void;
|
||||
setMobileSidebarOpen: (open: boolean) => void;
|
||||
setCommandOpen: (open: boolean) => void;
|
||||
setDensity: (density: Density) => void;
|
||||
setTheme: (theme: Theme) => void;
|
||||
setAccent: (accent: AccentId) => void;
|
||||
setGlass: (glass: GlassLevel) => void;
|
||||
setRadius: (radius: RadiusScale) => void;
|
||||
setAmbiance: (ambiance: boolean) => void;
|
||||
toggleFavorite: (path: string) => void;
|
||||
rememberRoute: (path: string) => void;
|
||||
restoreDefaults: () => void;
|
||||
resetAppearance: () => void;
|
||||
};
|
||||
|
||||
export const useUiStore = create<UiState>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
sidebarCollapsed: false,
|
||||
mobileSidebarOpen: false,
|
||||
commandOpen: false,
|
||||
density: appearanceDefaults.density,
|
||||
theme: appearanceDefaults.theme,
|
||||
accent: appearanceDefaults.accent,
|
||||
glass: appearanceDefaults.glass,
|
||||
radius: appearanceDefaults.radius,
|
||||
ambiance: appearanceDefaults.ambiance,
|
||||
favorites: favoriteDefaults,
|
||||
recent: ["/dashboard", "/files", "/domains/example.com/dns"],
|
||||
toggleSidebar: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
|
||||
setMobileSidebarOpen: (open) => set({ mobileSidebarOpen: open }),
|
||||
setCommandOpen: (open) => set({ commandOpen: open }),
|
||||
setDensity: (density) => set({ density }),
|
||||
setTheme: (theme) => set({ theme }),
|
||||
setAccent: (accent) => set({ accent }),
|
||||
setGlass: (glass) => set({ glass }),
|
||||
setRadius: (radius) => set({ radius }),
|
||||
setAmbiance: (ambiance) => set({ ambiance }),
|
||||
toggleFavorite: (path) => {
|
||||
const favorites = get().favorites;
|
||||
set({
|
||||
favorites: favorites.includes(path)
|
||||
? favorites.filter((item) => item !== path)
|
||||
: [...favorites, path],
|
||||
});
|
||||
},
|
||||
rememberRoute: (path) => {
|
||||
const recent = [path, ...get().recent.filter((item) => item !== path)].slice(0, 8);
|
||||
set({ recent });
|
||||
},
|
||||
restoreDefaults: () => set({ favorites: favoriteDefaults, density: "compact" }),
|
||||
resetAppearance: () => set({ ...appearanceDefaults }),
|
||||
}),
|
||||
{ name: "coaxyspanel-ui" },
|
||||
),
|
||||
);
|
||||
Reference in New Issue
Block a user