feat(gui): cache zustand store in localstorage (#2168)

* fix(gui): use the store to cache week start

* feat(gui): cache zustand store in localStorage

This means that before we've loaded any data, we can still display
something up-to-date. Avoid flashing!

I'll probably want to switch this to the tauri sqlite plugin later

3 files changed, 13 insertions, 11 deletions

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 9b5242a7d..c643720ae 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -105,7 +105,7 @@ function App() {
                 </ul>
               </li>
               <li className="mt-auto">
-                {user && !user.isLoggedIn() && (
+                {user && user.username === "" && !user.username && (
                   <Dialog>
                     <DialogTrigger className="w-full">
                       <Button
diff --git a/ui/src/pages/Home.tsx b/ui/src/pages/Home.tsx
index 51c1e934a..750db969c 100644
--- a/ui/src/pages/Home.tsx
+++ b/ui/src/pages/Home.tsx
@@ -53,11 +53,10 @@ const explicitTheme: ThemeInput = {
 };
 
 export default function Home() {
-  const [weekStart, setWeekStart] = useState(0);
-
   const homeInfo = useStore((state) => state.homeInfo);
   const user = useStore((state) => state.user);
   const calendar = useStore((state) => state.calendar);
+  const weekStart = useStore((state) => state.weekStart);
 
   const refreshHomeInfo = useStore((state) => state.refreshHomeInfo);
   const refreshUser = useStore((state) => state.refreshUser);
@@ -66,10 +65,6 @@ export default function Home() {
   const { toast } = useToast();
 
   useEffect(() => {
-    let locale = new Intl.Locale(navigator.language);
-    let weekinfo = locale.getWeekInfo();
-    setWeekStart(weekinfo.firstDay);
-
     refreshHomeInfo();
     refreshUser();
     refreshCalendar();
@@ -110,7 +105,6 @@ export default function Home() {
         <Header name={user.username} />
 
         <div className="pt-10">
-          <h2 className="text-xl font-bold">Sync</h2>
           <Stats
             stats={[
               {
@@ -132,7 +126,7 @@ export default function Home() {
           />
         </div>
 
-        <div className="pt-10">
+        <div className="pt-10 flex justify-around">
           <ActivityCalendar
             theme={explicitTheme}
             data={calendar}
diff --git a/ui/src/state/store.ts b/ui/src/state/store.ts
index 822abc263..21fbdf14f 100644
--- a/ui/src/state/store.ts
+++ b/ui/src/state/store.ts
@@ -1,4 +1,6 @@
 import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+
 import { parseISO } from "date-fns";
 
 import { fetch } from "@tauri-apps/plugin-http";
@@ -26,6 +28,7 @@ interface AtuinState {
   vars: Var[];
   shellHistory: ShellHistory[];
   calendar: any[];
+  weekStart: number;
 
   refreshHomeInfo: () => void;
   refreshCalendar: () => void;
@@ -36,13 +39,14 @@ interface AtuinState {
   historyNextPage: (query?: string) => void;
 }
 
-export const useStore = create<AtuinState>()((set, get) => ({
+let state = (set, get): AtuinState => ({
   user: DefaultUser,
   homeInfo: DefaultHomeInfo,
   aliases: [],
   vars: [],
   shellHistory: [],
   calendar: [],
+  weekStart: new Intl.Locale(navigator.language).getWeekInfo().firstDay,
 
   refreshAliases: () => {
     invoke("aliases").then((aliases: any) => {
@@ -135,4 +139,8 @@ export const useStore = create<AtuinState>()((set, get) => ({
       });
     }
   },
-}));
+});
+
+export const useStore = create<AtuinState>()(
+  persist(state, { name: "atuin-storage" }),
+);