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

1 files changed, 2 insertions, 8 deletions

diff --git a/ui/src/pages/Home.tsx b/ui/src/pages/Home.tsx
index 51c1e934..750db969 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}