formatter.nix: Add prettier

.gitea/workflows/deploy.yaml

@@ -1,6 +1,6 @@
 name: deploy
 on:
- push:
+  push:
     branches:
       - main
 jobs:
@@ -10,4 +10,4 @@ jobs:
       - uses: actions/checkout@v3
       - run: nix run .#deploy-docs
     env:
-      SSH_HOMEPAGE_KEY: ${{ secrets.SSH_HOMEPAGE_KEY }}
+      SSH_HOMEPAGE_KEY: ${{ secrets.SSH_HOMEPAGE_KEY }}

checks/secrets/sops/machines/machine/key.json

@@ -1,4 +1,4 @@
 {
   "publickey": "age15x8u838dwqflr3t6csf4tlghxm4tx77y379ncqxav7y2n8qp7yzqgrwt00",
   "type": "age"
-}
+}

checks/secrets/sops/users/admin/key.json

@@ -1,4 +1,4 @@
 {
   "publickey": "age15x8u838dwqflr3t6csf4tlghxm4tx77y379ncqxav7y2n8qp7yzqgrwt00",
   "type": "age"
-}
+}

docs/overrides/main.html

@@ -1,12 +1,19 @@
-{% extends "base.html" %}
-
-{% block extrahead %}
-<meta property="og:title" content="Clan - Documentation, Blog & Getting Started Guide" />
-<meta property="og:description" content="Documentation for Clan. The peer-to-peer machine deployment framework." />
-<meta property="og:image" content="https://clan.lol/static/dark-favicon/128x128.png" />
+{% extends "base.html" %} {% block extrahead %}
+<meta
+  property="og:title"
+  content="Clan - Documentation, Blog & Getting Started Guide"
+/>
+<meta
+  property="og:description"
+  content="Documentation for Clan. The peer-to-peer machine deployment framework."
+/>
+<meta
+  property="og:image"
+  content="https://clan.lol/static/dark-favicon/128x128.png"
+/>
 <meta property="og:url" content="https://docs.clan.lol" />
 <meta property="og:type" content="website" />
 <meta property="og:site_name" content="Clan" />
 <meta property="og:locale" content="en_US" />
 
-{% endblock %}
+{% endblock %}

docs/site/static/extra.css

@@ -1,13 +1,13 @@
 @font-face {
-    font-family: "Roboto";
-    src: url(./Roboto-Regular.ttf) format('truetype');
+  font-family: "Roboto";
+  src: url(./Roboto-Regular.ttf) format("truetype");
 }
 @font-face {
-    font-family: "Fira Code";
-    src: url(./FiraCode-VF.ttf) format('truetype');
+  font-family: "Fira Code";
+  src: url(./FiraCode-VF.ttf) format("truetype");
 }
 
 :root {
-    --md-text-font: "Roboto"; 
-    --md-code-font: "Fira Code";
-}
+  --md-text-font: "Roboto";
+  --md-code-font: "Fira Code";
+}

formatter.nix

@@ -11,6 +11,39 @@
       treefmt.programs.nixfmt.enable = true;
       treefmt.programs.nixfmt.package = pkgs.nixfmt-rfc-style;
       treefmt.programs.deadnix.enable = true;
+      treefmt.settings.global.excludes = [
+        "*.png"
+        "*.jpeg"
+        "*.gitignore"
+        ".vscode/*"
+        "*.toml"
+        "*.clan-flake"
+        "*.code-workspace"
+        "*.pub"
+        "*.typed"
+        "*.age"
+        "*.list"
+        "*.desktop"
+      ];
+      treefmt.programs.prettier = {
+        enable = true;
+        includes = [
+          "*.cjs"
+          "*.css"
+          "*.html"
+          "*.js"
+          "*.json5"
+          "*.jsx"
+          "*.mdx"
+          "*.mjs"
+          "*.scss"
+          "*.ts"
+          "*.tsx"
+          "*.vue"
+          "*.yaml"
+          "*.yml"
+        ];
+      };
 
       treefmt.programs.mypy.directories =
         {

pkgs/clan-app/clan_app/assets/style.css

@@ -1,66 +1,63 @@
 /* Insert custom styles here */
 
 navigation-view {
-    padding: 5px;
-    /* padding-left: 5px;
+  padding: 5px;
+  /* padding-left: 5px;
     padding-right: 5px;
     padding-bottom: 5px; */
 }
 
 avatar {
-    margin: 2px;
+  margin: 2px;
 }
 
 .trust {
-    padding-top: 25px;
-    padding-bottom: 25px;
+  padding-top: 25px;
+  padding-bottom: 25px;
 }
 
 .join-list {
-    margin-top: 1px;
-    margin-left: 2px;
-    margin-right: 2px;
-
+  margin-top: 1px;
+  margin-left: 2px;
+  margin-right: 2px;
 }
 
 .progress-bar {
-    margin-right: 25px;
-    min-width: 200px;
+  margin-right: 25px;
+  min-width: 200px;
 }
 
 .group-list {
-	background-color: inherit;
+  background-color: inherit;
 }
 .group-list > .activatable:hover {
-	background-color: unset;
+  background-color: unset;
 }
 
 .group-list > row {
-    margin-top: 12px;
-    border-bottom: unset;
+  margin-top: 12px;
+  border-bottom: unset;
 }
 
-
 .vm-list {
-    margin-top: 25px; 
-    margin-bottom: 25px; 
+  margin-top: 25px;
+  margin-bottom: 25px;
 }
 
 .no-shadow {
-    box-shadow: none;	
+  box-shadow: none;
 }
 
 .search-entry {
-    margin-bottom: 12px; 
+  margin-bottom: 12px;
 }
 
 searchbar {
-    margin-bottom: 25px; 
+  margin-bottom: 25px;
 }
 
-
 .log-view {
-    margin-top: 12px;
-    font-family: monospace;
-    padding: 8px;
+  margin-top: 12px;
+  font-family: monospace;
+  padding: 8px;
 }

pkgs/clan-cli/.vscode/launch.json

@@ -1,26 +1,24 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Clan Webui",
-            "type": "python",
-            "request": "launch",
-            "module": "clan_cli.webui",
-            "justMyCode": false,
-            "args": [ "--reload", "--no-open", "--log-level", "debug" ],
-
-        },
-        {
-            "name": "Clan Cli VMs",
-            "type": "python",
-            "request": "launch",
-            "module": "clan_cli",
-            "justMyCode": false,
-            "args": [ "vms" ],
-
-        }
-    ]
-}
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Clan Webui",
+      "type": "python",
+      "request": "launch",
+      "module": "clan_cli.webui",
+      "justMyCode": false,
+      "args": ["--reload", "--no-open", "--log-level", "debug"]
+    },
+    {
+      "name": "Clan Cli VMs",
+      "type": "python",
+      "request": "launch",
+      "module": "clan_cli",
+      "justMyCode": false,
+      "args": ["vms"]
+    }
+  ]
+}

pkgs/clan-cli/.vscode/settings.json

@@ -1,22 +1,22 @@
 {
-    "python.testing.pytestArgs": [
-        // Coverage is not supported by vscode:
-        // https://github.com/Microsoft/vscode-python/issues/693
-        // Note that this will make pytest fail if pytest-cov is not installed,
-        // if that's the case, then this option needs to be be removed (overrides
-        // can be set at a workspace level, it's up to you to decide what's the
-        // best approach). You might also prefer to only set this option
-        // per-workspace (wherever coverage is used).
-        "--no-cov",
-        "tests"
-    ],
-    "python.testing.unittestEnabled": false,
-    "python.testing.pytestEnabled": true,
-    "search.exclude": {
-        "**/.direnv": true
-    },
-    "python.linting.mypyPath": "mypy",
-    "python.linting.mypyEnabled": true,
-    "python.linting.enabled": true,
-    "python.defaultInterpreterPath": "python"
-}
+  "python.testing.pytestArgs": [
+    // Coverage is not supported by vscode:
+    // https://github.com/Microsoft/vscode-python/issues/693
+    // Note that this will make pytest fail if pytest-cov is not installed,
+    // if that's the case, then this option needs to be be removed (overrides
+    // can be set at a workspace level, it's up to you to decide what's the
+    // best approach). You might also prefer to only set this option
+    // per-workspace (wherever coverage is used).
+    "--no-cov",
+    "tests"
+  ],
+  "python.testing.unittestEnabled": false,
+  "python.testing.pytestEnabled": true,
+  "search.exclude": {
+    "**/.direnv": true
+  },
+  "python.linting.mypyPath": "mypy",
+  "python.linting.mypyEnabled": true,
+  "python.linting.enabled": true,
+  "python.defaultInterpreterPath": "python"
+}

pkgs/clan-cli/tests/data/secrets.yaml

@@ -1,23 +1,23 @@
 secret-key: ENC[AES256_GCM,data:gjX4OmCUdd3TlA4p,iv:3yZVpyd6FqkITQY0nU2M1iubmzvkR6PfkK2m/s6nQh8=,tag:Abgp9xkiFFylZIyAlap6Ew==,type:str]
 nested:
-    secret-key: ENC[AES256_GCM,data:iUMgDhhIjwvd7wL4,iv:jiJIrh12dSu/sXX+z9ITVoEMNDMjwIlFBnyv40oN4LE=,tag:G9VmAa66Km1sc7JEhW5AvA==,type:str]
+  secret-key: ENC[AES256_GCM,data:iUMgDhhIjwvd7wL4,iv:jiJIrh12dSu/sXX+z9ITVoEMNDMjwIlFBnyv40oN4LE=,tag:G9VmAa66Km1sc7JEhW5AvA==,type:str]
 sops:
-    kms: []
-    gcp_kms: []
-    azure_kv: []
-    hc_vault: []
-    age:
-        - recipient: age14tva0txcrl0zes05x7gkx56qd6wd9q3nwecjac74xxzz4l47r44sv3fz62
-          enc: |
-            -----BEGIN AGE ENCRYPTED FILE-----
-            YWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSA0eWdRVjlydXlXOVZFQ3lO
-            bzU1eG9Iam5Ka29Sdlo0cHJ4b1R6bjdNSzBjCkgwRndCbWZQWHlDU0x1cWRmaGVt
-            N29lbjR6UjN0L2RhaXEzSG9zQmRsZGsKLS0tIEdsdWgxSmZwU3BWUDVxVWRSSC9M
-            eVZ6bjgwZnR2TTM5MkRYZWNFSFplQWsKmSzv12/dftL9jx2y35UZUGVK6xWdatE8
-            BGJiCvMlp0BQNrh2s/+YaEaBa48w8LL79U/XJnEZ+ZUwxmlbSTn6Hg==
-            -----END AGE ENCRYPTED FILE-----
-    lastmodified: "2023-08-08T14:27:20Z"
-    mac: ENC[AES256_GCM,data:iRWWX+L5Q5nKn3fBCLaWoz/mvqGnNnRd93gJmYXDZbRjFoHa9IFJZst5QDIDa1ZRYUe6G0/+lV5SBi+vwRm1pHysJ3c0ZWYjBP+e1jw3jLXxLV5gACsDC8by+6rFUCho0Xgu+Nqu2ehhNenjQQnCvDH5ivWbW70KFT5ynNgR9Tw=,iv:RYnnbLMC/hNfMwWPreMq9uvY0khajwQTZENO/P34ckY=,tag:Xi1PS5vM1c+sRkroHkPn1Q==,type:str]
-    pgp: []
-    unencrypted_suffix: _unencrypted
-    version: 3.7.3
+  kms: []
+  gcp_kms: []
+  azure_kv: []
+  hc_vault: []
+  age:
+    - recipient: age14tva0txcrl0zes05x7gkx56qd6wd9q3nwecjac74xxzz4l47r44sv3fz62
+      enc: |
+        -----BEGIN AGE ENCRYPTED FILE-----
+        YWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSA0eWdRVjlydXlXOVZFQ3lO
+        bzU1eG9Iam5Ka29Sdlo0cHJ4b1R6bjdNSzBjCkgwRndCbWZQWHlDU0x1cWRmaGVt
+        N29lbjR6UjN0L2RhaXEzSG9zQmRsZGsKLS0tIEdsdWgxSmZwU3BWUDVxVWRSSC9M
+        eVZ6bjgwZnR2TTM5MkRYZWNFSFplQWsKmSzv12/dftL9jx2y35UZUGVK6xWdatE8
+        BGJiCvMlp0BQNrh2s/+YaEaBa48w8LL79U/XJnEZ+ZUwxmlbSTn6Hg==
+        -----END AGE ENCRYPTED FILE-----
+  lastmodified: "2023-08-08T14:27:20Z"
+  mac: ENC[AES256_GCM,data:iRWWX+L5Q5nKn3fBCLaWoz/mvqGnNnRd93gJmYXDZbRjFoHa9IFJZst5QDIDa1ZRYUe6G0/+lV5SBi+vwRm1pHysJ3c0ZWYjBP+e1jw3jLXxLV5gACsDC8by+6rFUCho0Xgu+Nqu2ehhNenjQQnCvDH5ivWbW70KFT5ynNgR9Tw=,iv:RYnnbLMC/hNfMwWPreMq9uvY0khajwQTZENO/P34ckY=,tag:Xi1PS5vM1c+sRkroHkPn1Q==,type:str]
+  pgp: []
+  unencrypted_suffix: _unencrypted
+  version: 3.7.3

pkgs/clan-vm-manager/clan_vm_manager/assets/style.css

@@ -1,66 +1,63 @@
 /* Insert custom styles here */
 
 navigation-view {
-    padding: 5px;
-    /* padding-left: 5px;
+  padding: 5px;
+  /* padding-left: 5px;
     padding-right: 5px;
     padding-bottom: 5px; */
 }
 
 avatar {
-    margin: 2px;
+  margin: 2px;
 }
 
 .trust {
-    padding-top: 25px;
-    padding-bottom: 25px;
+  padding-top: 25px;
+  padding-bottom: 25px;
 }
 
 .join-list {
-    margin-top: 1px;
-    margin-left: 2px;
-    margin-right: 2px;
-
+  margin-top: 1px;
+  margin-left: 2px;
+  margin-right: 2px;
 }
 
 .progress-bar {
-    margin-right: 25px;
-    min-width: 200px;
+  margin-right: 25px;
+  min-width: 200px;
 }
 
 .group-list {
-	background-color: inherit;
+  background-color: inherit;
 }
 .group-list > .activatable:hover {
-	background-color: unset;
+  background-color: unset;
 }
 
 .group-list > row {
-    margin-top: 12px;
-    border-bottom: unset;
+  margin-top: 12px;
+  border-bottom: unset;
 }
 
-
 .vm-list {
-    margin-top: 25px; 
-    margin-bottom: 25px; 
+  margin-top: 25px;
+  margin-bottom: 25px;
 }
 
 .no-shadow {
-    box-shadow: none;	
+  box-shadow: none;
 }
 
 .search-entry {
-    margin-bottom: 12px; 
+  margin-bottom: 12px;
 }
 
 searchbar {
-    margin-bottom: 25px; 
+  margin-bottom: 25px;
 }
 
-
 .log-view {
-    margin-top: 12px;
-    font-family: monospace;
-    padding: 8px;
+  margin-top: 12px;
+  font-family: monospace;
+  padding: 8px;
 }

pkgs/webview-ui/app/eslint.config.mjs

@@ -28,5 +28,5 @@ export default tseslint.config(
       "no-unused-vars": "off",
       "@typescript-eslint/no-unused-vars": "off",
     },
-  }
+  },
 );

pkgs/webview-ui/app/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Solid App</title>

pkgs/webview-ui/app/src/api.ts

@@ -134,19 +134,21 @@ export const callApi = <K extends OperationNames>(
   });
 };
 
-const deserialize = <T>(fn: (response: T) => void) => (str: string) => {
-  try {
-    const r = JSON.parse(str) as T;
-    console.log("Received: ", r);
-    fn(r);
-  } catch (e) {
-    console.log("Error parsing JSON: ", e);
-    window.localStorage.setItem("error", str);
-    console.error(str);
-    console.error("See localStorage 'error'");
-    alert(`Error parsing JSON: ${e}`);
-  }
-};
+const deserialize =
+  <T>(fn: (response: T) => void) =>
+  (str: string) => {
+    try {
+      const r = JSON.parse(str) as T;
+      console.log("Received: ", r);
+      fn(r);
+    } catch (e) {
+      console.log("Error parsing JSON: ", e);
+      window.localStorage.setItem("error", str);
+      console.error(str);
+      console.error("See localStorage 'error'");
+      alert(`Error parsing JSON: ${e}`);
+    }
+  };
 
 // Create the API object
 

pkgs/webview-ui/app/src/components/MachineListItem.tsx

@@ -94,18 +94,21 @@ export const MachineListItem = (props: MachineListItemProps) => {
             <div class="flex flex-row flex-wrap gap-4 py-2">
               <div class="badge badge-primary flex flex-row gap-1 py-4 align-middle">
                 <span>System:</span>
-                {hwInfo()[name]?.system
-                  ? <span class="text-primary">{hwInfo()[name]?.system}</span>
-                  : <span class="text-warning">Not set</span>}
+                {hwInfo()[name]?.system ? (
+                  <span class="text-primary">{hwInfo()[name]?.system}</span>
+                ) : (
+                  <span class="text-warning">Not set</span>
+                )}
               </div>
 
               <div class="badge badge-ghost flex flex-row gap-1 py-4 align-middle">
                 <span>Target Host:</span>
-                {deploymentInfo()[name]
-                  ? <span class="text-primary">{deploymentInfo()[name]}</span>
-                  : <span class="text-warning">Not set</span>}
-                {
-                  /* <Show
+                {deploymentInfo()[name] ? (
+                  <span class="text-primary">{deploymentInfo()[name]}</span>
+                ) : (
+                  <span class="text-warning">Not set</span>
+                )}
+                {/* <Show
                   when={deploymentInfo()[name]}
                   fallback={
                     <Switch fallback={<div class="skeleton h-8 w-full"></div>}>
@@ -116,8 +119,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
                   }
                 >
                   {(i) => + i()}
-                </Show> */
-                }
+                </Show> */}
               </div>
             </div>
             {/* Show only the first error at the bottom */}

pkgs/webview-ui/app/src/index.css

@@ -1,10 +1,10 @@
-@import 'material-icons/iconfont/filled.css';
+@import "material-icons/iconfont/filled.css";
 /* List of icons: https://marella.me/material-icons/demo/ */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 html {
-    overflow-x: hidden;
-    overflow-y: scroll;
-}
+  overflow-x: hidden;
+  overflow-y: scroll;
+}

pkgs/webview-ui/app/src/layout/layout.tsx

@@ -32,8 +32,7 @@ export const Layout: Component<LayoutProps> = (props) => {
             for="toplevel-drawer"
             aria-label="close sidebar"
             class="drawer-overlay"
-          >
-          </label>
+          ></label>
           <Sidebar route={route} setRoute={setRoute} />
         </div>
       </div>

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

@@ -27,35 +27,35 @@ export const BlockDevicesView: Component = () => {
         </button>
       </div>
       <div class="flex max-w-screen-lg flex-col gap-4">
-        {isFetching
-          ? <span class="loading loading-bars"></span>
-          : (
-            <Show when={devices}>
-              {(devices) => (
-                <For each={devices().blockdevices}>
-                  {(device) => (
-                    <div class="stats shadow">
-                      <div class="stat w-28 py-8">
-                        <div class="stat-title">Name</div>
-                        <div class="stat-value">
-                          {" "}
-                          <span class="material-icons">storage</span>{" "}
-                          {device.name}
-                        </div>
-                        <div class="stat-desc"></div>
-                      </div>
-
-                      <div class="stat w-28">
-                        <div class="stat-title">Size</div>
-                        <div class="stat-value">{device.size}</div>
-                        <div class="stat-desc"></div>
+        {isFetching ? (
+          <span class="loading loading-bars"></span>
+        ) : (
+          <Show when={devices}>
+            {(devices) => (
+              <For each={devices().blockdevices}>
+                {(device) => (
+                  <div class="stats shadow">
+                    <div class="stat w-28 py-8">
+                      <div class="stat-title">Name</div>
+                      <div class="stat-value">
+                        {" "}
+                        <span class="material-icons">storage</span>{" "}
+                        {device.name}
                       </div>
+                      <div class="stat-desc"></div>
                     </div>
-                  )}
-                </For>
-              )}
-            </Show>
-          )}
+
+                    <div class="stat w-28">
+                      <div class="stat-title">Size</div>
+                      <div class="stat-value">{device.size}</div>
+                      <div class="stat-desc"></div>
+                    </div>
+                  </div>
+                )}
+              </For>
+            )}
+          </Show>
+        )}
       </div>
     </div>
   );

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

@@ -1,16 +1,14 @@
-import { route } from "@/src/App";
-import { callApi, OperationArgs, OperationResponse, pyApi } from "@/src/api";
+import { callApi, OperationResponse } from "@/src/api";
 import {
   createForm,
   required,
+  FieldValues,
   setValue,
-  SubmitHandler,
 } from "@modular-forms/solid";
 import { createQuery } from "@tanstack/solid-query";
 import { createEffect, createSignal, For } from "solid-js";
-import { effect } from "solid-js/web";
 
-type FlashFormValues = {
+interface FlashFormValues extends FieldValues {
   machine: {
     devicePath: string;
     flake: string;
@@ -19,7 +17,7 @@ type FlashFormValues = {
   language: string;
   keymap: string;
   sshKeys: string[];
-};
+}
 
 type BlockDevices = Extract<
   OperationResponse<"show_block_devices">,
@@ -59,10 +57,7 @@ export const Flash = () => {
     }
   });
 
-  const {
-    data: devices,
-    isFetching,
-  } = createQuery(() => ({
+  const { data: devices, isFetching } = createQuery(() => ({
     queryKey: ["block_devices"],
     queryFn: async () => {
       const result = await callApi("show_block_devices", {});
@@ -72,10 +67,7 @@ export const Flash = () => {
     staleTime: 1000 * 60 * 2, // 1 minutes
   }));
 
-  const {
-    data: keymaps,
-    isFetching: isFetchingKeymaps,
-  } = createQuery(() => ({
+  const { data: keymaps, isFetching: isFetchingKeymaps } = createQuery(() => ({
     queryKey: ["list_keymaps"],
     queryFn: async () => {
       const result = await callApi("list_possible_keymaps", {});
@@ -85,18 +77,17 @@ export const Flash = () => {
     staleTime: 1000 * 60 * 15, // 15 minutes
   }));
 
-  const {
-    data: languages,
-    isFetching: isFetchingLanguages,
-  } = createQuery(() => ({
-    queryKey: ["list_languages"],
-    queryFn: async () => {
-      const result = await callApi("list_possible_languages", {});
-      if (result.status === "error") throw new Error("Failed to fetch data");
-      return result.data;
-    },
-    staleTime: 1000 * 60 * 15, // 15 minutes
-  }));
+  const { data: languages, isFetching: isFetchingLanguages } = createQuery(
+    () => ({
+      queryKey: ["list_languages"],
+      queryFn: async () => {
+        const result = await callApi("list_possible_languages", {});
+        if (result.status === "error") throw new Error("Failed to fetch data");
+        return result.data;
+      },
+      staleTime: 1000 * 60 * 15, // 15 minutes
+    }),
+  );
 
   const handleSubmit = async (values: FlashFormValues) => {
     setIsFlashing(true);
@@ -109,7 +100,7 @@ export const Flash = () => {
           },
         },
         mode: "format",
-        disks: { "main": values.disk },
+        disks: { main: values.disk },
         system_config: {
           language: values.language,
           keymap: values.keymap,
@@ -191,7 +182,9 @@ export const Flash = () => {
                   class="select select-bordered w-full"
                   {...props}
                 >
-                  <option value="" disabled>Select a disk</option>
+                  <option value="" disabled>
+                    Select a disk
+                  </option>
                   <For each={devices?.blockdevices}>
                     {(device) => (
                       <option value={device.path}>
@@ -227,11 +220,7 @@ export const Flash = () => {
                 >
                   <option>en_US.UTF-8</option>
                   <For each={languages}>
-                    {(language) => (
-                      <option value={language}>
-                        {language}
-                      </option>
-                    )}
+                    {(language) => <option value={language}>{language}</option>}
                   </For>
                 </select>
                 <div class="label">
@@ -261,17 +250,12 @@ export const Flash = () => {
                 >
                   <option>en</option>
                   <For each={keymaps}>
-                    {(keymap) => (
-                      <option value={keymap}>
-                        {keymap}
-                      </option>
-                    )}
+                    {(keymap) => <option value={keymap}>{keymap}</option>}
                   </For>
                 </select>
                 <div class="label">
                   {isFetchingKeymaps && (
-                    <span class="label-text
-                    -alt">
+                    <span class="label-text-alt">
                       <span class="loading loading-bars"></span>
                     </span>
                   )}
@@ -312,9 +296,11 @@ export const Flash = () => {
           )}
         </Field>
         <button class="btn btn-error" type="submit" disabled={isFlashing()}>
-          {isFlashing()
-            ? <span class="loading loading-spinner"></span>
-            : <span class="material-icons">bolt</span>}
+          {isFlashing() ? (
+            <span class="loading loading-spinner"></span>
+          ) : (
+            <span class="material-icons">bolt</span>
+          )}
           {isFlashing() ? "Flashing..." : "Flash Installer"}
         </button>
       </Form>

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

@@ -91,8 +91,7 @@ export const MachineListView: Component = () => {
           <span class="material-icons ">add</span>
         </button>
       </div>
-      {
-        /* <Show when={services()}>
+      {/* <Show when={services()}>
         {(services) => (
           <For each={Object.values(services())}>
             {(service) => (
@@ -138,8 +137,7 @@ export const MachineListView: Component = () => {
             )}
           </For>
         )}
-      </Show> */
-      }
+      </Show> */}
       <Switch>
         <Match when={loading()}>
           {/* Loading skeleton */}

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

@@ -33,17 +33,17 @@ export const registerClan = async () => {
     });
     console.log({ loc }, loc.status);
     if (loc.status === "success" && loc.data) {
-      // @ts-expect-error: data is a string
+      const data = loc.data[0];
       setClanList((s) => {
-        const res = new Set([...s, loc.data]);
+        const res = new Set([...s, data]);
         return Array.from(res);
       });
-      setActiveURI(loc.data);
+      setActiveURI(data);
       setRoute((r) => {
         if (r === "welcome") return "machines";
         return r;
       });
-      return loc.data;
+      return data;
     }
   } catch (e) {
     //
@@ -145,7 +145,7 @@ const ClanDetails = (props: ClanDetailsProps) => {
                       return false;
                     }
                     return true;
-                  })
+                  }),
                 );
               }}
             >

pkgs/webview-ui/app/tests/types.test.ts

@@ -44,13 +44,13 @@ describe.concurrent("API types work properly", () => {
       .parameter(0)
       .toMatchTypeOf<
         | {
-          status: "success";
-          data: {
-            machine_name: string;
-            machine_icon?: string | null;
-            machine_description?: string | null;
-          };
-        }
+            status: "success";
+            data: {
+              machine_name: string;
+              machine_icon?: string | null;
+              machine_description?: string | null;
+            };
+          }
         | { status: "error"; errors: any }
       >();
   });

pkgs/webview-ui/app/util.ts

@@ -20,7 +20,8 @@ export function isValidHostname(value: string | null | undefined) {
   const isValid = labels.every(function (label) {
     const validLabelChars = /^([a-zA-Z0-9-]+)$/g;
 
-    const validLabel = validLabelChars.test(label) &&
+    const validLabel =
+      validLabelChars.test(label) &&
       label.length < 64 &&
       !label.startsWith("-") &&
       !label.endsWith("-");