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.

1 files changed, 13 insertions, 24 deletions

diff --git a/ui/src/components/dotfiles/Aliases.tsx b/ui/src/components/dotfiles/Aliases.tsx
index 4854e6b5..61fd001c 100644
--- a/ui/src/components/dotfiles/Aliases.tsx
+++ b/ui/src/components/dotfiles/Aliases.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import DataTable from "@/components/ui/data-table";
 import { Button } from "@/components/ui/button";
@@ -8,34 +8,21 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
+import { ColumnDef } from "@tanstack/react-table";
+
 import { invoke } from "@tauri-apps/api/core";
 import Drawer from "@/components/Drawer";
 
-function loadAliases(
-  setAliases: React.Dispatch<React.SetStateAction<never[]>>,
-) {
-  invoke("aliases").then((aliases: any) => {
-    setAliases(aliases);
-  });
-}
-
-type Alias = {
-  name: string;
-  value: string;
-};
+import { Alias } from "@/state/models";
+import { useStore } from "@/state/store";
 
-function deleteAlias(
-  name: string,
-  setAliases: React.Dispatch<React.SetStateAction<never[]>>,
-) {
+function deleteAlias(name: string, refreshAliases: () => void) {
   invoke("delete_alias", { name: name })
     .then(() => {
-      console.log("Deleted alias");
-      loadAliases(setAliases);
+      refreshAliases();
     })
     .catch(() => {
       console.error("Failed to delete alias");
@@ -101,7 +88,9 @@ function AddAlias({ onAdd: onAdd }: { onAdd?: () => void }) {
 }
 
 export default function Aliases() {
-  let [aliases, setAliases] = useState([]);
+  const aliases = useStore((state) => state.aliases);
+  const refreshAliases = useStore((state) => state.refreshAliases);
+
   let [aliasDrawerOpen, setAliasDrawerOpen] = useState(false);
 
   const columns: ColumnDef<Alias>[] = [
@@ -129,7 +118,7 @@ export default function Aliases() {
             <DropdownMenuContent align="end">
               <DropdownMenuLabel>Actions</DropdownMenuLabel>
               <DropdownMenuItem
-                onClick={() => deleteAlias(alias.name, setAliases)}
+                onClick={() => deleteAlias(alias.name, refreshAliases)}
               >
                 Delete
               </DropdownMenuItem>
@@ -141,7 +130,7 @@ export default function Aliases() {
   ];
 
   useEffect(() => {
-    loadAliases(setAliases);
+    refreshAliases();
   }, []);
 
   return (
@@ -172,7 +161,7 @@ export default function Aliases() {
           >
             <AddAlias
               onAdd={() => {
-                loadAliases(setAliases);
+                refreshAliases();
                 setAliasDrawerOpen(false);
               }}
             />