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, 11 insertions, 7 deletions

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 5d1cd863..ae6ebdb1 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -1,14 +1,9 @@
 import "./App.css";
 
-import { Fragment, useState, useEffect, ReactElement } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+import { useState, ReactElement } from "react";
 import {
-  Bars3Icon,
-  ChartPieIcon,
   Cog6ToothIcon,
   HomeIcon,
-  XMarkIcon,
-  MagnifyingGlassIcon,
   ClockIcon,
   WrenchScrewdriverIcon,
 } from "@heroicons/react/24/outline";
@@ -18,16 +13,20 @@ function classNames(...classes: any) {
   return classes.filter(Boolean).join(" ");
 }
 
+import Home from "./pages/Home.tsx";
 import History from "./pages/History.tsx";
 import Dotfiles from "./pages/Dotfiles.tsx";
 
 enum Section {
+  Home,
   History,
   Dotfiles,
 }
 
 function renderMain(section: Section): ReactElement {
   switch (section) {
+    case Section.Home:
+      return <Home />;
     case Section.History:
       return <History />;
     case Section.Dotfiles:
@@ -39,10 +38,15 @@ function App() {
   // routers don't really work in Tauri. It's not a browser!
   // I think hashrouter may work, but I'd rather avoiding thinking of them as
   // pages
-  const [section, setSection] = useState(Section.History);
+  const [section, setSection] = useState(Section.Home);
 
   const navigation = [
     {
+      name: "Home",
+      icon: HomeIcon,
+      section: Section.Home,
+    },
+    {
       name: "History",
       icon: ClockIcon,
       section: Section.History,