new stuff

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.cjs",
+    "css": "src/globals.css",
+    "baseColor": "gray",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "/src/components",
+    "utils": "/src/utils"
+  }
+}

package.json

@@ -12,21 +12,36 @@
   "dependencies": {
     "@formkit/auto-animate": "^1.0.0-beta.6",
     "@headlessui/react": "^1.7.10",
+    "@hookform/resolvers": "^3.3.1",
     "@jhnnsrs/fakts": "^0.1.1",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.3",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-scroll-area": "^1.0.4",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "@tailwindcss/container-queries": "^0.1.0",
-    "@tauri-apps/api": "^1.2.0",
+    "@tauri-apps/api": "^1.4.0",
     "@tauri-apps/tauri-forage": "^1.0.0-beta.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "formik": "^2.2.9",
     "formik-wizard-form": "^2.1.0",
+    "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.46.1",
     "react-icons": "^4.8.0",
     "react-router-dom": "^6.8.1",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
     "yaml": "^2.2.1",
-    "yup": "^1.0.0"
+    "yup": "^1.0.0",
+    "zod": "^3.22.2"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^1.2.3",
+    "@tauri-apps/cli": "^1.4.0",
     "@types/node": "^18.7.10",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",

src-tauri/Cargo.toml

@@ -10,12 +10,12 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = { version = "1.3", features = [] }
+tauri-build = { version = "1.4.0", features = [] }
 
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.3", features = ["dialog-all", "fs-all", "shell-all", "system-tray"] }
+tauri = { version = "1.4.1", features = ["dialog-all", "fs-all", "shell-all", "system-tray"] }
 bollard = "0.14.0"
 network-interface = "0.1.6"
 dns-lookup = "1.0.8"

src/App.tsx

@@ -1,29 +1,32 @@
-import React, { useState } from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { BeaconContext } from "./beacon/context";
+import "./globals.css";
+import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 import { BeaconProvider } from "./beacon/provider";
 import { CommunicationProvider } from "./communication/communication-provider";
-import { HealthProvider } from "./health/health-provider";
-import { Dashboard, DashboardScreen } from "./screens/Dashboard";
-import { Home } from "./screens/Home";
-import { Setup } from "./screens/wizard/Setup";
-import { StorageProvider } from "./storage/storage-provider";
-import { Command } from "@tauri-apps/api/shell";
 import { BindingsProvider } from "./interface/provider";
+import { DashboardScreen } from "./screens/Dashboard";
+import { Home } from "./screens/Home";
 import { LogScreen } from "./screens/LogScreen";
-import { SettingsProvider } from "./settings/settings-provider";
 import { Settings } from "./screens/Settings";
+import { Setup } from "./screens/wizard/Setup";
+import { SettingsProvider } from "./settings/settings-provider";
+import { StorageProvider } from "./storage/storage-provider";
+import { AppMenu } from "./components/AppMenu";
+import { AnimatePresence } from "framer-motion";
 
 function App() {
+
+  const location = useLocation();
+
   return (
     <CommunicationProvider>
       <BindingsProvider>
         <BeaconProvider>
           <SettingsProvider>
             <StorageProvider>
-              <div className="h-screen w-screen bg-back-900 text-white w-screen flex h-full overflow-y-hidden">
-                <BrowserRouter>
-                  <Routes>
+              <div className="h-screen w-screen bg-back-900 text-white w-screen flex h-full overflow-y-hidden flex flex-col">
+
+                <AppMenu/>
+                  <Routes  location={location} key={location.pathname}>
                     <Route path="/" element={<Home />} />
                     <Route path="/settings" element={<Settings />} />
                     <Route path="/setup" element={<Setup />} />
@@ -37,7 +40,6 @@ function App() {
                       element={<LogScreen />}
                     />
                   </Routes>
-                </BrowserRouter>
               </div>
             </StorageProvider>
           </SettingsProvider>

src/CommandButton.tsx

@@ -2,6 +2,7 @@ import { ChildProcess } from "@tauri-apps/api/shell";
 import { CommandParams, useCommand } from "./hooks/useCommand";
 import { callbackify } from "util";
 import { useState } from "react";
+import { Button } from "./components/ui/button";
 
 export const CommandButton = (props: {
   params: CommandParams;
@@ -13,7 +14,7 @@ export const CommandButton = (props: {
 
   return (
     <>
-      <button
+      <Button
         onClick={() => {
           console.log("run");
           run().then((x) => {
@@ -32,7 +33,7 @@ export const CommandButton = (props: {
       >
         {running && props.runningTitle ? props.runningTitle : props.title}
         {finished?.code == 1 && <div className="text-red-400">Error</div>}
-      </button>
+      </Button>
     </>
   );
 };
@@ -49,7 +50,7 @@ export const DangerousCommandButton = (props: {
   const to = props.to || 10;
   return (
     <>
-      <button
+      <Button
         onClick={() => {
           console.log("run");
           if (countDown == to) {
@@ -77,7 +78,7 @@ export const DangerousCommandButton = (props: {
         {countDown > 1 &&
           countDown < 11 &&
           ` ( ${to - countDown} more clicks to confirm)`}
-      </button>
+      </Button>
     </>
   );
 };