UI/treewide: replace all {button,icon} component

pkgs/webview-ui/app/src/routes/blockdevices/view.tsx

@@ -2,6 +2,8 @@ import { callApi } from "@/src/api";
 import { Component, For, Show } from "solid-js";
 
 import { createQuery } from "@tanstack/solid-query";
+import { Button } from "@/src/components/button";
+import Icon from "@/src/components/icon";
 
 export const BlockDevicesView: Component = () => {
   const {
@@ -22,9 +24,10 @@ export const BlockDevicesView: Component = () => {
   return (
     <div>
       <div class="tooltip tooltip-bottom" data-tip="Refresh">
-        <button class="btn btn-ghost" onClick={() => loadDevices()}>
-          <span class="material-icons ">refresh</span>
-        </button>
+        <Button
+          onClick={() => loadDevices()}
+          startIcon={<Icon icon="Reload" />}
+        ></Button>
       </div>
       <div class="flex max-w-screen-lg flex-col gap-4">
         {isFetching ? (

pkgs/webview-ui/app/src/routes/clans/create.tsx

@@ -10,6 +10,8 @@ import toast from "solid-toast";
 import { setActiveURI, setClanList } from "@/src/App";
 import { TextInput } from "@/src/components/TextInput";
 import { useNavigate } from "@solidjs/router";
+import { Button } from "@/src/components/button";
+import Icon from "@/src/components/icon";
 
 type CreateForm = Meta & {
   template: string;
@@ -176,13 +178,13 @@ export const CreateClan = () => {
           </Field>
           {
             <div class="card-actions justify-end">
-              <button
-                class="btn btn-primary"
+              <Button
                 type="submit"
                 disabled={formStore.submitting}
+                endIcon={<Icon icon="Plus" />}
               >
                 Create
-              </button>
+              </Button>
             </div>
           }
         </div>

pkgs/webview-ui/app/src/routes/clans/details.tsx

@@ -1,16 +1,7 @@
-import {
-  callApi,
-  ClanService,
-  ClanServiceInstance,
-  SuccessQuery,
-} from "@/src/api";
+import { callApi, ClanServiceInstance, SuccessQuery } from "@/src/api";
 import { BackButton } from "@/src/components/BackButton";
 import { useParams } from "@solidjs/router";
-import {
-  createQuery,
-  QueryClient,
-  useQueryClient,
-} from "@tanstack/solid-query";
+import { createQuery, useQueryClient } from "@tanstack/solid-query";
 import { createSignal, For, Match, Switch } from "solid-js";
 import { Show } from "solid-js";
 import {
@@ -25,6 +16,8 @@ import {
 import { TextInput } from "@/src/components/TextInput";
 import toast from "solid-toast";
 import { get_single_service, set_single_service } from "@/src/api/inventory";
+import { Button } from "@/src/components/button";
+import Icon from "@/src/components/icon";
 
 interface AdminModuleFormProps {
   admin: AdminData;
@@ -157,13 +150,12 @@ const EditClanForm = (props: EditClanFormProps) => {
         </Field>
         {
           <div class="card-actions justify-end">
-            <button
-              class="btn btn-primary"
+            <Button
               type="submit"
               disabled={formStore.submitting || !formStore.dirty}
             >
               Save
-            </button>
+            </Button>
           </div>
         }
       </div>
@@ -307,41 +299,39 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
                     </>
                   )}
                 </Field>
-                <button
-                  class="btn btn-ghost col-span-1 self-end"
+                <Button
+                  variant="light"
+                  class="col-span-1 self-end"
+                  startIcon={<Icon icon="Trash" />}
                   onClick={(e) => {
                     e.preventDefault();
                     setKeys((c) => c.filter((_, i) => i !== idx()));
                     setValue(formStore, `allowedKeys.${idx()}.name`, "");
                     setValue(formStore, `allowedKeys.${idx()}.value`, "");
                   }}
-                >
-                  <span class="material-icons">delete</span>
-                </button>
+                ></Button>
               </>
             )}
           </For>
           <div class="my-2 flex w-full gap-2">
-            <button
-              class="btn btn-square btn-ghost"
+            <Button
+              variant="light"
               onClick={(e) => {
                 e.preventDefault();
                 setKeys((c) => [...c, 1]);
               }}
-            >
-              <span class="material-icons">add</span>
-            </button>
+              startIcon={<Icon icon="Plus" />}
+            ></Button>
           </div>
         </div>
         {
           <div class="card-actions justify-end">
-            <button
-              class="btn btn-primary"
+            <Button
               type="submit"
               disabled={formStore.submitting || !formStore.dirty}
             >
               Save
-            </button>
+            </Button>
           </div>
         }
       </div>

pkgs/webview-ui/app/src/routes/clans/list.tsx

@@ -6,6 +6,8 @@ import { useFloating } from "@/src/floating";
 import { autoUpdate, flip, hide, offset, shift } from "@floating-ui/dom";
 import { useNavigate, A } from "@solidjs/router";
 import { registerClan } from "@/src/hooks";
+import { Button } from "@/src/components/button";
+import Icon from "@/src/components/icon";
 
 interface ClanItemProps {
   clan_dir: string;
@@ -61,33 +63,32 @@ const ClanItem = (props: ClanItemProps) => {
     <div class="stat">
       <div class="stat-figure text-primary-800">
         <div class="join">
-          <button
-            class="join-item btn-sm"
+          <Button
+            size="s"
+            variant="light"
+            class="join-item"
             onClick={() => navigate(`/clans/${window.btoa(clan_dir)}`)}
-          >
-            <span class="material-icons">edit</span>
-          </button>
-          <button
-            class=" join-item btn-sm"
-            classList={{
-              "btn btn-ghost btn-outline": activeURI() !== clan_dir,
-              "badge badge-primary": activeURI() === clan_dir,
-            }}
-            disabled={activeURI() === clan_dir}
+            endIcon={<Icon icon="Settings" />}
+          ></Button>
+          <Button
+            size="s"
+            variant="light"
+            class="join-item "
             onClick={() => {
               setActiveURI(clan_dir);
             }}
           >
             {activeURI() === clan_dir ? "active" : "select"}
-          </button>
-          <button
+          </Button>
+          <Button
+            size="s"
+            variant="light"
             popovertarget={`clan-delete-popover-${clan_dir}`}
             popovertargetaction="toggle"
             ref={setReference}
-            class="btn btn-ghost btn-outline join-item btn-sm"
-          >
-            Remove
-          </button>
+            class="btn btn-ghost btn-outline join-item"
+            endIcon={<Icon icon="Trash" />}
+          ></Button>
           <div
             popover="auto"
             role="tooltip"
@@ -100,9 +101,14 @@ const ClanItem = (props: ClanItemProps) => {
             }}
             class="m-0 bg-transparent"
           >
-            <button class="btn bg-[#ffdd2c]" onClick={handleRemove}>
+            <Button
+              size="s"
+              onClick={handleRemove}
+              variant="dark"
+              endIcon={<Icon icon="Trash" />}
+            >
               Remove from App
-            </button>
+            </Button>
           </div>
         </div>
       </div>
@@ -139,19 +145,19 @@ export const ClanList = () => {
           <div class="label-text text-2xl text-neutral">Registered Clans</div>
           <div class="flex gap-2">
             <span class="tooltip tooltip-top" data-tip="Register clan">
-              <button class="btn btn-square btn-ghost" onClick={registerClan}>
-                <span class="material-icons">post_add</span>
-              </button>
+              <Button
+                variant="light"
+                onClick={registerClan}
+                startIcon={<Icon icon="List" />}
+              ></Button>
             </span>
             <span class="tooltip tooltip-top" data-tip="Create new clan">
-              <button
-                class="btn btn-square btn-ghost"
+              <Button
                 onClick={() => {
                   navigate("create");
                 }}
-              >
-                <span class="material-icons">add</span>
-              </button>
+                startIcon={<Icon icon="Plus" />}
+              ></Button>
             </span>
           </div>
         </div>

pkgs/webview-ui/app/src/routes/flash/view.tsx

@@ -1,5 +1,7 @@
 import { callApi } from "@/src/api";
+import { Button } from "@/src/components/button";
 import { FileInput } from "@/src/components/FileInput";
+import Icon from "@/src/components/icon";
 import { SelectInput } from "@/src/components/SelectInput";
 import { TextInput } from "@/src/components/TextInput";
 import {
@@ -209,15 +211,15 @@ export const Flash = () => {
           {(field, props) => (
             <SelectInput
               topRightLabel={
-                <button
-                  class="btn btn-ghost btn-sm"
+                <Button
+                  size="s"
+                  variant="light"
                   onClick={(e) => {
                     e.preventDefault();
                     deviceQuery.refetch();
                   }}
-                >
-                  <span class="material-icons text-sm">refresh</span>
-                </button>
+                  startIcon={<Icon icon="Reload" />}
+                ></Button>
               }
               formStore={formStore}
               selectProps={props}
@@ -285,17 +287,19 @@ export const Flash = () => {
                         adornment={{
                           position: "end",
                           content: (
-                            <button
+                            <Button
+                              variant="light"
                               type="button"
                               class="flex justify-center opacity-70"
                               onClick={() => togglePasswordVisibility(index())}
-                            >
-                              <span class="material-icons">
-                                {passwordVisibility()[index()]
-                                  ? "visibility_off"
-                                  : "visibility"}
-                              </span>
-                            </button>
+                              startIcon={
+                                passwordVisibility()[index()] ? (
+                                  <Icon icon="EyeClose" />
+                                ) : (
+                                  <Icon icon="EyeOpen" />
+                                )
+                              }
+                            ></Button>
                           ),
                         }}
                         required
@@ -304,25 +308,27 @@ export const Flash = () => {
                   )}
                 </Field>
                 <div class="col-span-1 self-end">
-                  <button
+                  <Button
                     type="button"
-                    class="btn btn-ghost "
+                    variant="light"
+                    class="h-12"
                     onClick={() => removeWifiNetwork(index())}
-                  >
-                    <span class="material-icons">delete</span>
-                  </button>
+                    startIcon={<Icon icon="Trash" />}
+                  ></Button>
                 </div>
               </div>
             )}
           </For>
           <div class="">
-            <button
+            <Button
               type="button"
-              class="btn btn-ghost btn-sm"
+              size="s"
+              variant="light"
               onClick={addWifiNetwork}
+              startIcon={<Icon icon="Plus" />}
             >
-              <span class="material-icons">add</span>Add WiFi Network
-            </button>
+              Add WiFi Network
+            </Button>
           </div>
         </div>
 
@@ -434,18 +440,20 @@ export const Flash = () => {
 
         <hr></hr>
         <div class="mt-2 flex justify-end pt-2">
-          <button
-            class="btn btn-error self-end"
+          <Button
+            class="self-end"
             type="submit"
             disabled={formStore.submitting}
+            startIcon={
+              formStore.submitting ? (
+                <Icon icon="Load" />
+              ) : (
+                <Icon icon="Flash" />
+              )
+            }
           >
-            {formStore.submitting ? (
-              <span class="loading loading-spinner"></span>
-            ) : (
-              <span class="material-icons">bolt</span>
-            )}
             {formStore.submitting ? "Flashing..." : "Flash Installer"}
-          </button>
+          </Button>
         </div>
       </Form>
     </div>

pkgs/webview-ui/app/src/routes/hosts/view.tsx

@@ -1,5 +1,7 @@
 import { type Component, createSignal, For, Show } from "solid-js";
 import { OperationResponse, pyApi } from "@/src/api";
+import { Button } from "@/src/components/button";
+import Icon from "@/src/components/icon";
 
 type ServiceModel = Extract<
   OperationResponse<"show_mdns">,
@@ -12,12 +14,11 @@ export const HostList: Component = () => {
   return (
     <div>
       <div class="tooltip tooltip-bottom" data-tip="Refresh install targets">
-        <button
-          class="btn btn-ghost"
+        <Button
+          variant="light"
           onClick={() => pyApi.show_mdns.dispatch({})}
-        >
-          <span class="material-icons ">refresh</span>
-        </button>
+          startIcon={<Icon icon="Update" />}
+        ></Button>
       </div>
       <div class="flex flex-wrap gap-2">
         <Show when={services()}>

pkgs/webview-ui/app/src/routes/machines/create.tsx

@@ -1,5 +1,7 @@
 import { callApi, OperationArgs } from "@/src/api";
 import { activeURI } from "@/src/App";
+import { Button } from "@/src/components/button";
+import Icon from "@/src/components/icon";
 import { TextInput } from "@/src/components/TextInput";
 import { createForm, required, reset } from "@modular-forms/solid";
 import { useNavigate } from "@solidjs/router";
@@ -108,26 +110,21 @@ export function CreateMachine() {
             )}
           </Field>
           <div class="mt-12 flex justify-end">
-            <button
-              class="btn btn-primary"
+            <Button
               type="submit"
-              classList={{
-                "btn-disabled": formStore.submitting,
-              }}
+              disabled={formStore.submitting}
+              startIcon={
+                formStore.submitting ? (
+                  <Icon icon="Load" />
+                ) : (
+                  <Icon icon="Plus" />
+                )
+              }
             >
-              <Switch
-                fallback={
-                  <>
-                    <span class="loading loading-spinner loading-sm"></span>
-                    Creating
-                  </>
-                }
-              >
-                <Match when={!formStore.submitting}>
-                  <span class="material-icons">add</span>Create
-                </Match>
+              <Switch fallback={<>Creating</>}>
+                <Match when={!formStore.submitting}>Create</Match>
               </Switch>
-            </button>
+            </Button>
           </div>
         </Form>
       </div>

pkgs/webview-ui/app/src/routes/machines/details.tsx

@@ -3,7 +3,9 @@ import { set_single_disk_id } from "@/src/api/disk";
 import { get_iwd_service } from "@/src/api/wifi";
 import { activeURI } from "@/src/App";
 import { BackButton } from "@/src/components/BackButton";
+import { Button } from "@/src/components/button";
 import { FileInput } from "@/src/components/FileInput";
+import Icon from "@/src/components/icon";
 import { SelectInput } from "@/src/components/SelectInput";
 import { TextInput } from "@/src/components/TextInput";
 import { selectSshKeys } from "@/src/hooks";
@@ -192,13 +194,15 @@ const InstallMachine = (props: InstallMachineProps) => {
               </Match>
             </Switch>
             <div class="">
-              <button
-                class="btn btn-ghost btn-sm btn-wide"
+              <Button
+                variant="light"
+                size="s"
+                class="w-full"
                 onclick={generateReport}
               >
                 <span class="material-icons">manage_search</span>
                 Generate report
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -252,25 +256,32 @@ const InstallMachine = (props: InstallMachineProps) => {
           <Show
             when={confirmDisk()}
             fallback={
-              <button
+              <Button
                 class="btn btn-primary btn-wide"
                 onClick={handleDiskConfirm}
                 disabled={!hasDisk()}
+                startIcon={<Icon icon="Flash" />}
               >
-                <span class="material-icons">check</span>
                 Confirm Disk
-              </button>
+              </Button>
             }
           >
-            <button class="btn btn-primary btn-wide" type="submit">
-              <span class="material-icons">send_to_mobile</span>
+            <Button
+              class="w-full"
+              type="submit"
+              startIcon={<Icon icon="Flash" />}
+            >
               Install
-            </button>
+            </Button>
           </Show>
           <form method="dialog">
-            <button onClick={() => setConfirmDisk(false)} class="btn">
+            <Button
+              variant="light"
+              onClick={() => setConfirmDisk(false)}
+              class="btn"
+            >
               Close
-            </button>
+            </Button>
           </form>
         </div>
       </Form>
@@ -519,13 +530,12 @@ const MachineForm = (props: MachineDetailsProps) => {
 
           {
             <div class="card-actions justify-end">
-              <button
-                class="btn btn-primary"
+              <Button
                 type="submit"
                 disabled={formStore.submitting || !formStore.dirty}
               >
                 Save
-              </button>
+              </Button>
             </div>
           }
         </div>
@@ -550,15 +560,19 @@ const MachineForm = (props: MachineDetailsProps) => {
             device.
           </span>
           <div class="tooltip w-fit" data-tip="Machine must be online">
-            <button
-              class="btn btn-primary btn-sm btn-wide"
-              disabled={!online()}
-              // @ts-expect-error: This string method is not supported by ts
-              onClick="install_modal.showModal()"
+            <Button
+              class="w-full"
+              // disabled={!online()}
+              onClick={() => {
+                const modal = document.getElementById(
+                  "install_modal",
+                ) as HTMLDialogElement | null;
+                modal?.showModal();
+              }}
+              endIcon={<Icon icon="Flash" />}
             >
-              <span class="material-icons">send_to_mobile</span>
               Install
-            </button>
+            </Button>
           </div>
 
           <dialog id="install_modal" class="modal backdrop:bg-transparent">
@@ -577,14 +591,14 @@ const MachineForm = (props: MachineDetailsProps) => {
             process.
           </span>
           <div class="tooltip w-fit" data-tip="Machine must be online">
-            <button
-              class="btn btn-primary btn-sm btn-wide"
+            <Button
+              class="w-full"
               disabled={!online()}
               onClick={() => handleUpdate()}
+              endIcon={<Icon icon="Update" />}
             >
-              <span class="material-icons">update</span>
               Update
-            </button>
+            </Button>
           </div>
         </div>
       </div>
@@ -761,41 +775,38 @@ function WifiModule(props: MachineWifiProps) {
                 />
               )}
             </Field>
-            <button class="btn btn-ghost self-end">
-              <span
-                class="material-icons"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setNets((c) => c.filter((_, i) => i !== idx()));
-                  setValue(formStore, `networks.${idx()}.ssid`, undefined);
-                  setValue(formStore, `networks.${idx()}.password`, undefined);
-                }}
-              >
-                delete
-              </span>
-            </button>
+            <Button
+              variant="light"
+              class="self-end"
+              type="button"
+              onClick={() => {
+                setNets((c) => c.filter((_, i) => i !== idx()));
+                setValue(formStore, `networks.${idx()}.ssid`, undefined);
+                setValue(formStore, `networks.${idx()}.password`, undefined);
+              }}
+              startIcon={<Icon icon="Trash" />}
+            ></Button>
           </div>
         )}
       </For>
-      <button
+      <Button
         class="btn btn-ghost btn-sm my-1 flex items-center justify-center"
         onClick={(e) => {
-          e.preventDefault();
           setNets([...nets(), 1]);
         }}
+        type="button"
+        startIcon={<Icon icon="Plus" />}
       >
-        <span class="material-icons">add</span>
         Add Network
-      </button>
+      </Button>
       {
         <div class="card-actions mt-4 justify-end">
-          <button
-            class="btn btn-primary"
+          <Button
             type="submit"
             disabled={formStore.submitting || !formStore.dirty}
           >
             Save
-          </button>
+          </Button>
         </div>
       }
     </Form>

pkgs/webview-ui/app/src/routes/machines/list.tsx

@@ -9,6 +9,8 @@ import {
   useQueryClient,
 } from "@tanstack/solid-query";
 import { useNavigate } from "@solidjs/router";
+import { Button } from "@/src/components/button";
+import Icon from "@/src/components/icon";
 
 type MachinesModel = Extract<
   OperationResponse<"list_inventory_machines">,
@@ -80,14 +82,18 @@ export const MachineListView: Component = () => {
     <div>
       <div class="tooltip tooltip-bottom" data-tip="Open Clan"></div>
       <div class="tooltip tooltip-bottom" data-tip="Refresh">
-        <button class="btn btn-ghost" onClick={() => refresh()}>
-          <span class="material-icons ">refresh</span>
-        </button>
+        <Button
+          variant="light"
+          onClick={() => refresh()}
+          startIcon={<Icon icon="Reload" />}
+        ></Button>
       </div>
       <div class="tooltip tooltip-bottom" data-tip="Create machine">
-        <button class="btn btn-ghost" onClick={() => navigate("create")}>
-          <span class="material-icons ">add</span>
-        </button>
+        <Button
+          variant="light"
+          onClick={() => navigate("create")}
+          startIcon={<Icon icon="Plus" />}
+        ></Button>
       </div>
       <Switch>
         <Match when={inventoryQuery.isLoading}>
@@ -117,12 +123,13 @@ export const MachineListView: Component = () => {
             <span class="text-lg text-neutral">
               No machines defined yet. Click below to define one.
             </span>
-            <button
-              class="btn btn-square btn-ghost size-28 overflow-hidden p-2"
+            <Button
+              variant="light"
+              class="size-28 overflow-hidden p-2"
               onClick={() => navigate("/machines/create")}
             >
               <span class="material-icons text-6xl font-light">add</span>
-            </button>
+            </Button>
           </div>
         </Match>
         <Match when={!inventoryQuery.isLoading}>

pkgs/webview-ui/app/src/routes/modules/details.tsx

@@ -25,6 +25,8 @@ import {
   SubmitHandler,
 } from "@modular-forms/solid";
 import { DynForm } from "@/src/Form/form";
+import { Button } from "@/src/components/button";
+import Icon from "@/src/components/icon";
 
 export const ModuleDetails = () => {
   const params = useParams();
@@ -116,10 +118,9 @@ const Details = (props: DetailsProps) => {
         <SolidMarkdown>{props.data.readme}</SolidMarkdown>
       </div>
       <div class="my-2 flex w-full gap-2">
-        <button class="btn btn-primary" onClick={add}>
-          <span class="material-icons ">add</span>
+        <Button variant="light" onClick={add} startIcon={<Icon icon="Plus" />}>
           Add to Clan
-        </button>
+        </Button>
         {/* Add -> Select (required) roles, assign Machine */}
       </div>
       <ModuleForm id={props.id} />
@@ -192,7 +193,7 @@ export const ModuleForm = (props: { id: string }) => {
                       handleSubmit={handleSubmit}
                       schema={schema}
                       components={{
-                        after: <button class="btn btn-primary">Submit</button>,
+                        after: <Button>Submit</Button>,
                       }}
                     />
                   </div>

pkgs/webview-ui/app/src/routes/welcome/index.tsx

@@ -1,4 +1,5 @@
 import { setActiveURI } from "@/src/App";
+import { Button } from "@/src/components/button";
 import { registerClan } from "@/src/hooks";
 import { useNavigate } from "@solidjs/router";
 
@@ -11,14 +12,12 @@ export const Welcome = () => {
           <h1 class="text-5xl font-bold">Welcome to Clan</h1>
           <p class="py-6">Own the services you use.</p>
           <div class="flex flex-col items-start gap-2">
-            <button
-              class="btn btn-primary w-full"
-              onClick={() => navigate("/clans/create")}
-            >
+            <Button class="w-full" onClick={() => navigate("/clans/create")}>
               Build your own
-            </button>
-            <button
-              class="link w-full text-right text-primary-800"
+            </Button>
+            <Button
+              variant="light"
+              class="!link w-full text-right !text-primary-800"
               onClick={async () => {
                 const uri = await registerClan();
                 if (uri) {
@@ -28,7 +27,7 @@ export const Welcome = () => {
               }}
             >
               Or select folder
-            </button>
+            </Button>
           </div>
         </div>
       </div>