feat: nexa integration, app - better loaders, service color hints, th…

…eme customization

chore: v0.2.5 bump

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@av/harbor-app",
   "private": true,
-  "version": "0.2.4",
+  "version": "0.2.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

app/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "harbor-app"
-version = "0.2.4"
+version = "0.2.5"
 description = "A companion app for Harbor LLM toolkit"
 authors = ["av"]
 edition = "2021"

app/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2.0.0-rc",
   "productName": "Harbor",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "identifier": "com.harbor.app",
   "build": {
     "beforeDevCommand": "bun run dev",

app/src/AppRoutes.tsx

@@ -21,7 +21,7 @@ export const ROUTES: Record<string, HarborRoute> = {
     },
     config: {
         id: 'config',
-        name: <span className="flex items-center gap-2"><IconBolt/>Profiles</span>,
+        name: <span className="flex items-center gap-2"><IconBolt />Profiles</span>,
         path: '/config',
         element: <Config />,
     },

app/src/Loading.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+export const TOGGLE_DELAY = 250;
+
+export const LoaderElements = {
+    linear: <progress className="progress my-2 max-w-56"></progress>,
+    overlay: (
+        <div className="absolute inset-0 p-6 flex items-center justify-center bg-base-200/60 pointer-events-none rounded-box">
+            <progress className="progress"></progress>
+        </div>
+    ),
+}
+
+export const Loader = ({ loading, loader = "linear" }: { loading: boolean, loader: keyof typeof LoaderElements }) => {
+    const [showLoader, setShowLoader] = useState(false);
+    const loaderComponent = LoaderElements[loader];
+
+    useEffect(() => {
+        let timer: number;
+
+        if (loading) {
+            timer = setTimeout(() => setShowLoader(true), TOGGLE_DELAY);
+        } else {
+            setShowLoader(false);
+        }
+        return () => clearTimeout(timer);
+    }, [loading]);
+
+    if (!showLoader) return null;
+
+    return loaderComponent;
+};

app/src/config/Config.tsx

@@ -1,15 +1,15 @@
 import { FC } from "react";
 import { useHarborConfig } from "./useHarborConfig";
 import { ProfileSelector } from "../settings/ProfileSelector";
-import { LinearLoader } from "../LinearLoading";
+import { Loader } from "../Loading";
 import { ScrollToTop } from "../ScrollToTop";
 
 export const Config: FC = () => {
   const { configs: profiles, loading } = useHarborConfig();
 
   return (
     <>
-      <LinearLoader loading={loading} />
+      <Loader loading={loading} />
       <ProfileSelector configs={profiles} />
       <ScrollToTop />
     </>

app/src/home/Doctor.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { Section } from "../Section";
 import { useHarbor } from "../useHarbor";
-import { LinearLoader } from "../LinearLoading";
+import { Loader } from "../Loading";
 import { IconButton } from "../IconButton";
 import { IconRotateCW } from "../Icons";
 
@@ -56,7 +56,7 @@ export const Doctor = () => {
             }
             children={
                 <>
-                    <LinearLoader loading={loading} />
+                    <Loader loading={loading} />
                     {error && <span>{error.message}</span>}
                     <span>{output}</span>
                 </>

app/src/home/ServiceCard.tsx

@@ -6,7 +6,7 @@ import {
     IconBandage,
     IconExternalLink,
 } from "../Icons";
-import { ACTION_ICONS, HarborService, HST } from "../serviceMetadata";
+import { ACTION_ICONS, HarborService, HST, HSTColorOpts, HSTColors } from "../serviceMetadata";
 import { runHarbor } from "../useHarbor";
 import { toasted } from "../utils";
 
@@ -40,7 +40,7 @@ export const ServiceCard = (
     const toggleService = () => {
         const msg = (str: string) => (
             <span>
-                <span className="kbd kbd-sm mr-2">{service.handle}</span>
+                <span className="font-bold mr-2">{service.handle}</span>
                 <span>{str}</span>
             </span>
         );
@@ -75,9 +75,12 @@ export const ServiceCard = (
         : ACTION_ICONS.up;
 
     const canLaunch = !service.tags.includes(HST.cli);
+    const gradientTag = service.tags.find(t => HSTColorOpts.includes(t as HST));
+
+    const gradientClass = gradientTag ? `bg-gradient-to-tr from-0% to-50% ${HSTColors[gradientTag]}` : "";
 
     return (
-        <div className="p-4 rounded-box cursor-default bg-base-300/35">
+        <div className={`p-4 rounded-box cursor-default bg-base-200/50 relative ${gradientClass}`}>
             <h2 className="flex items-center gap-1 text-2xl pb-2">
                 <span className="font-bold">{service.handle}</span>
 

app/src/home/ServiceList.tsx

@@ -5,7 +5,7 @@ import { Section } from "../Section";
 import { ServiceCard } from "./ServiceCard";
 import { useServiceList } from "./useServiceList";
 import { useArrayState } from "../useArrayState";
-import { LinearLoader } from "../LinearLoading";
+import { Loader } from "../Loading";
 import { IconButton } from "../IconButton";
 import { ACTION_ICONS, HarborService, HST } from "../serviceMetadata";
 import { runHarbor } from "../useHarbor";
@@ -122,8 +122,8 @@ export const ServiceList = () => {
                 </div>
             }
             children={
-                <>
-                    <LinearLoader loading={loading} />
+                <div className='relative rounded-box'>
+                    <Loader loading={loading} loader='overlay' />
                     {error && <div className="my-2">{error.message}</div>}
                     {services && (
                         <ul className="flex gap-4 flex-wrap">
@@ -142,7 +142,7 @@ export const ServiceList = () => {
                             })}
                         </ul>
                     )}
-                </>
+                </div>
             }
         />
     );

app/src/home/Version.tsx

@@ -1,4 +1,4 @@
-import { LinearLoader } from "../LinearLoading";
+import { Loader } from "../Loading";
 import { Section } from "../Section";
 import { useHarbor } from "../useHarbor";
 
@@ -11,7 +11,7 @@ export const Version = () => {
             header="Version"
             children={
                 <>
-                    <LinearLoader loading={loading} />
+                    <Loader loading={loading} />
                     {error && <span>{error.message}</span>}
                     <span>{result?.stdout}</span>
                 </>

app/src/serviceMetadata.tsx

@@ -1,7 +1,7 @@
 import { IconPlaneLanding, IconRocketLaunch } from "./Icons";
 
 export const ACTION_ICONS = {
-    loading: <span className="loading loading-ring loading-xs"></span>,
+    loading: <span className="loading loading-spinner loading-xs"></span>,
     up: <IconRocketLaunch />,
     down: <IconPlaneLanding />,
 };
@@ -19,6 +19,14 @@ export enum HST {
     audio = 'Audio',
 };
 
+export const HSTColors: Partial<Record<HST, string>> = {
+    [HST.backend]: 'from-primary/10',
+    [HST.frontend]: 'from-secondary/10',
+    [HST.satellite]: 'from-accent/10',
+};
+
+export const HSTColorOpts = Object.keys(HSTColors) as HST[];
+
 export type HarborService = {
     handle: string;
     isRunning: boolean;
@@ -176,5 +184,8 @@ export const serviceMetadata: Record<string, Partial<HarborService>> = {
     },
     anythingllm: {
         tags: [HST.frontend, HST.partial]
-    }
+    },
+    nexa: {
+        tags: [HST.backend, HST.partial],
+    },
 };

app/src/settings/Settings.tsx

@@ -4,7 +4,7 @@ import { THEMES, useTheme } from "../theme";
 import { useAutostart } from "../useAutostart";
 
 export const Settings = () => {
-  const [theme, setTheme] = useTheme();
+  const theme = useTheme();
   const autostart = useAutostart();
 
   const handleAutostartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -16,14 +16,38 @@ export const Settings = () => {
       <Section
         header=""
         children={
-          <div className="flex flex-col gap-4">
-            <h2 className="text-2xl font-bold">Theme</h2>
-            <p className="text-base-content/50">Saved automatically.</p>
+          <div className="flex flex-col gap-6">
+            <div>
+              <h2 className="text-2xl font-bold mt-4">Auto Start</h2>
+              <p className="text-base-content/50">
+                Launch Harbor App when your system starts.
+              </p>
+
+              <div className="form-control w-52">
+                <label className="label cursor-pointer">
+                  <span className="label-text">Enable Auto Start</span>
+                  <input
+                    type="checkbox"
+                    className="toggle"
+                    checked={autostart.enabled}
+                    disabled={autostart.loading}
+                    onChange={handleAutostartChange}
+                  />
+                </label>
+              </div>
+            </div>
+
+            <div>
+              <h2 className="text-2xl font-bold">Theme</h2>
+              <p className="text-base-content/50">
+                Customize the look and feel of Harbor App.
+              </p>
+            </div>
 
             <div className="flex items-center gap-4 z-10">
               <div className="dropdown">
                 <div tabIndex={0} role="button" className="btn m-1 capitalize">
-                  {theme}
+                  {theme.theme}
                   <IconChevronDown />
                 </div>
                 <ul
@@ -32,7 +56,7 @@ export const Settings = () => {
                 >
                   {THEMES.map((t) => {
                     return (
-                      <li onClick={() => setTheme(t)} key={t} value={t}>
+                      <li onClick={() => theme.setTheme(t)} key={t} value={t}>
                         <a className="capitalize">{t}</a>
                       </li>
                     );
@@ -50,24 +74,68 @@ export const Settings = () => {
                 <div className="badge badge-warning"></div>
                 <div className="badge badge-error"></div>
               </div>
+
+              <button className="btn btn-sm" onClick={() => theme.reset()}>Reset</button>
             </div>
 
-            <h2 className="text-2xl font-bold mt-4">Auto Start</h2>
-            <p className="text-base-content/50">
-              Launch Harbor App when your system starts.
-            </p>
-
-            <div className="form-control w-52">
-              <label className="label cursor-pointer">
-                <span className="label-text">Enable Auto Start</span>
-                <input
-                  type="checkbox"
-                  className="toggle"
-                  checked={autostart.enabled}
-                  disabled={autostart.loading}
-                  onChange={handleAutostartChange}
-                />
-              </label>
+            <div className="max-w-xl">
+              <h2 className="text-2xl font-bold">Hue</h2>
+              <p className="text-base-content/50 mb-4">
+                Adjust the hue of the theme color.
+              </p>
+
+              <input
+                type="range" min="0" max="360" value={theme.hue}
+                className="range" onChange={(e) => theme.setHue(parseInt(e.target.value))}
+              />
+            </div>
+
+            <div className="max-w-xl">
+              <h2 className="text-2xl font-bold">Saturation</h2>
+              <p className="text-base-content/50 mb-4">
+                How vibrant the colors are.
+              </p>
+
+              <input
+                type="range" min="0" max="100" value={theme.saturation}
+                className="range" onChange={(e) => theme.setSaturation(parseInt(e.target.value))}
+              />
+            </div>
+
+            <div className="max-w-xl">
+              <h2 className="text-2xl font-bold">Contrast</h2>
+              <p className="text-base-content/50 mb-4">
+                The difference between the lightest and darkest colors.
+              </p>
+
+              <input
+                type="range" min="0" max="200" value={theme.contrast}
+                className="range" onChange={(e) => theme.setContrast(parseInt(e.target.value))}
+              />
+            </div>
+
+            <div className="max-w-xl">
+              <h2 className="text-2xl font-bold">Brightness</h2>
+              <p className="text-base-content/50 mb-4">
+                The overall lightness or darkness of the theme.
+              </p>
+
+              <input
+                type="range" min="10" max="100" value={theme.brightness}
+                className="range" onChange={(e) => theme.setBrightness(parseInt(e.target.value))}
+              />
+            </div>
+
+            <div className="max-w-xl">
+              <h2 className="text-2xl font-bold">Invert</h2>
+              <p className="text-base-content/50 mb-4">
+                Change the colors to their opposites.
+              </p>
+
+              <input
+                type="range" min="0" max="100" value={theme.invert}
+                className="range" onChange={(e) => theme.setInvert(parseInt(e.target.value))}
+              />
             </div>
           </div>
         }