feat(gui): work on home page, sort state (#1956)

1. Start on a home page, can sort onboarding/etc from there
2. Introduce zustand for state management. It's nice!

Did a production build and clicked around for a while. Memory usage
seems nice and chill.

2 files changed, 106 insertions, 0 deletions

diff --git a/ui/src/state/models.ts b/ui/src/state/models.ts
new file mode 100644
index 00000000..f11ce651
--- /dev/null
+++ b/ui/src/state/models.ts
@@ -0,0 +1,34 @@
+export interface User {
+  username: string;
+}
+
+export const DefaultUser: User = {
+  username: "",
+};
+
+export interface HomeInfo {
+  historyCount: number;
+  recordCount: number;
+  lastSyncTime: Date;
+}
+
+export const DefaultHomeInfo: HomeInfo = {
+  historyCount: 0,
+  recordCount: 0,
+  lastSyncTime: new Date(),
+};
+
+export interface ShellHistory {
+  id: string;
+  timestamp: number;
+  command: string;
+  user: string;
+  host: string;
+  cwd: string;
+  duration: number;
+}
+
+export interface Alias {
+  name: string;
+  value: string;
+}
diff --git a/ui/src/state/store.ts b/ui/src/state/store.ts
new file mode 100644
index 00000000..08410ba8
--- /dev/null
+++ b/ui/src/state/store.ts
@@ -0,0 +1,72 @@
+import { create } from "zustand";
+import { parseISO } from "date-fns";
+
+import {
+  User,
+  DefaultUser,
+  HomeInfo,
+  DefaultHomeInfo,
+  Alias,
+  ShellHistory,
+} from "./models";
+
+import { invoke } from "@tauri-apps/api/core";
+
+// I'll probs want to slice this up at some point, but for now a
+// big blobby lump of state is fine.
+// Totally just hoping that structure will be emergent in the future.
+interface AtuinState {
+  user: User;
+  homeInfo: HomeInfo;
+  aliases: Alias[];
+  shellHistory: ShellHistory[];
+
+  refreshHomeInfo: () => void;
+  refreshAliases: () => void;
+  refreshShellHistory: (query?: string) => void;
+}
+
+export const useStore = create<AtuinState>()((set) => ({
+  user: DefaultUser,
+  homeInfo: DefaultHomeInfo,
+  aliases: [],
+  shellHistory: [],
+
+  refreshAliases: () => {
+    invoke("aliases").then((aliases: any) => {
+      set({ aliases: aliases });
+    });
+  },
+
+  refreshShellHistory: (query?: string) => {
+    if (query) {
+      invoke("search", { query: query })
+        .then((res: any) => {
+          set({ shellHistory: res });
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    } else {
+      invoke("list").then((res: any) => {
+        set({ shellHistory: res });
+      });
+    }
+  },
+
+  refreshHomeInfo: () => {
+    invoke("home_info")
+      .then((res: any) => {
+        set({
+          homeInfo: {
+            historyCount: res.history_count,
+            recordCount: res.record_count,
+            lastSyncTime: parseISO(res.last_sync),
+          },
+        });
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  },
+}));