diff --git a/pkgs/webview-ui/app/src/Form/form/index.tsx b/pkgs/webview-ui/app/src/Form/form/index.tsx index 3f0df30e3..aad823a6f 100644 --- a/pkgs/webview-ui/app/src/Form/form/index.tsx +++ b/pkgs/webview-ui/app/src/Form/form/index.tsx @@ -35,6 +35,8 @@ import { import cx from "classnames"; import { Label } from "../base/label"; import { SelectInput } from "../fields/Select"; +import { Button } from "@/src/components/button"; +import Icon from "@/src/components/icon"; function generateDefaults(schema: JSONSchema7): unknown { switch (schema.type) { @@ -385,15 +387,25 @@ export function ListValueDisplay(
{props.children}
- - - + + +
@@ -641,7 +653,14 @@ export function ArrayFields( }} // Button for adding new items components={{ - before: , + before: ( + + ), }} // Add the new item to the FieldArray handleSubmit={(values, event) => { @@ -827,8 +846,10 @@ export function ObjectFields( {key} - + + ), }} diff --git a/pkgs/webview-ui/app/src/components/BackButton.tsx b/pkgs/webview-ui/app/src/components/BackButton.tsx index 97acfed46..5db02fb5f 100644 --- a/pkgs/webview-ui/app/src/components/BackButton.tsx +++ b/pkgs/webview-ui/app/src/components/BackButton.tsx @@ -9,7 +9,7 @@ export const BackButton = () => { variant="light" class="w-fit" onClick={() => navigate(-1)} - startIcon={} + startIcon={} > ); }; diff --git a/pkgs/webview-ui/app/src/components/MachineListItem.tsx b/pkgs/webview-ui/app/src/components/MachineListItem.tsx index ba8f31e8a..0b60f7cfc 100644 --- a/pkgs/webview-ui/app/src/components/MachineListItem.tsx +++ b/pkgs/webview-ui/app/src/components/MachineListItem.tsx @@ -5,6 +5,7 @@ import { activeURI } from "../App"; import toast from "solid-toast"; import { A, useNavigate } from "@solidjs/router"; import { RndThumbnail } from "./noiseThumbnail"; +import Icon from "./icon"; type MachineDetails = SuccessQuery<"list_inventory_machines">["data"][string]; @@ -138,7 +139,7 @@ export const MachineListItem = (props: MachineListItemProps) => {
more_vert} + label={} >
  • diff --git a/pkgs/webview-ui/app/src/components/Menu.tsx b/pkgs/webview-ui/app/src/components/Menu.tsx index ba18a2d50..e1932a994 100644 --- a/pkgs/webview-ui/app/src/components/Menu.tsx +++ b/pkgs/webview-ui/app/src/components/Menu.tsx @@ -9,6 +9,7 @@ import { shift, } from "@floating-ui/dom"; import cx from "classnames"; +import { Button } from "./button"; interface MenuProps { /** @@ -53,7 +54,8 @@ export const Menu = (props: MenuProps) => { return (
    - +
    {
    - +
    diff --git a/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx b/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx index b44d9fc90..ecac8e546 100644 --- a/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx +++ b/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx @@ -29,7 +29,7 @@ export const SidebarHeader = (props: SidebarHeader) => { color="primary" inverted={true} > - {clanName.slice(0, 1)} + {clanName.slice(0, 1).toUpperCase()}
    ); diff --git a/pkgs/webview-ui/app/src/components/button/index.tsx b/pkgs/webview-ui/app/src/components/button/index.tsx index b9ae956ed..1571d2227 100644 --- a/pkgs/webview-ui/app/src/components/button/index.tsx +++ b/pkgs/webview-ui/app/src/components/button/index.tsx @@ -61,6 +61,7 @@ export const Button = (props: ButtonProps) => { "inline-flex items-center flex-shrink gap-2 justify-center", // Styles "border border-solid", + "p-4", sizePaddings[local.size || "default"], // Colors variantColors[local.variant || "dark"], diff --git a/pkgs/webview-ui/app/src/components/icon/index.tsx b/pkgs/webview-ui/app/src/components/icon/index.tsx index 175c44bf6..de68af2b7 100644 --- a/pkgs/webview-ui/app/src/components/icon/index.tsx +++ b/pkgs/webview-ui/app/src/components/icon/index.tsx @@ -1,4 +1,4 @@ -import { Component, JSX } from "solid-js"; +import { Component, JSX, splitProps } from "solid-js"; import ArrowBottom from "@/icons/arrow-bottom.svg"; import ArrowLeft from "@/icons/arrow-left.svg"; import ArrowRight from "@/icons/arrow-right.svg"; @@ -81,10 +81,18 @@ const Icon: Component = (props) => { Trash, Update, }; + const [local, iconProps] = splitProps(props, ["icon"]); - const IconComponent = icons[props.icon]; + const IconComponent = icons[local.icon]; return IconComponent ? ( - + ) : null; }; diff --git a/pkgs/webview-ui/app/src/index.tsx b/pkgs/webview-ui/app/src/index.tsx index 67046ee6a..acfa08f10 100644 --- a/pkgs/webview-ui/app/src/index.tsx +++ b/pkgs/webview-ui/app/src/index.tsx @@ -136,9 +136,10 @@ export const routes: AppRoute[] = [ { path: "/welcome", label: "", - hidden: true, + hidden: false, component: () => , }, + { path: "/api_testing", label: "api_testing", diff --git a/pkgs/webview-ui/app/src/layout/header.tsx b/pkgs/webview-ui/app/src/layout/header.tsx index 5c042deed..3924a299d 100644 --- a/pkgs/webview-ui/app/src/layout/header.tsx +++ b/pkgs/webview-ui/app/src/layout/header.tsx @@ -4,7 +4,8 @@ import { callApi } from "../api"; import { Accessor, Show } from "solid-js"; import { useNavigate } from "@solidjs/router"; -import ArrowBottom from "@/icons/arrow-bottom.svg"; +import Icon from "../components/icon"; +import { Button } from "../components/button"; interface HeaderProps { clan_dir: Accessor; @@ -28,7 +29,7 @@ export const Header = (props: HeaderProps) => { return (
    - +
    -
    - -
    - -
    -
    -     -     - - {(meta) => ( -
    -
    -
    - -
    -
    -
    - )} -     - - - {(meta) => [ - {meta().name}, - {meta()?.description}, - ]} - - -
    +
    {(d) => ( - + startIcon={} + > )} diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx index 9cee82730..55cde957e 100644 --- a/pkgs/webview-ui/app/src/layout/layout.tsx +++ b/pkgs/webview-ui/app/src/layout/layout.tsx @@ -18,14 +18,14 @@ export const Layout: Component = (props) => { }); return ( -
    +
    -
    +
    diff --git a/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx b/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx index ab773ee9a..0d318534f 100644 --- a/pkgs/webview-ui/app/src/routes/blockdevices/view.tsx +++ b/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 (
    - +
    {isFetching ? ( diff --git a/pkgs/webview-ui/app/src/routes/clans/create.tsx b/pkgs/webview-ui/app/src/routes/clans/create.tsx index 5e8c001bc..b7ac26f65 100644 --- a/pkgs/webview-ui/app/src/routes/clans/create.tsx +++ b/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 = () => { {
    - +
    }
    diff --git a/pkgs/webview-ui/app/src/routes/clans/details.tsx b/pkgs/webview-ui/app/src/routes/clans/details.tsx index 985d82c24..9e34001df 100644 --- a/pkgs/webview-ui/app/src/routes/clans/details.tsx +++ b/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) => { {
    - +
    }
    @@ -307,41 +299,39 @@ const AdminModuleForm = (props: AdminModuleFormProps) => { )} - + > )}
    - + startIcon={} + >
    {
    - +
    }
    diff --git a/pkgs/webview-ui/app/src/routes/clans/list.tsx b/pkgs/webview-ui/app/src/routes/clans/list.tsx index 525f259d8..ec3879a30 100644 --- a/pkgs/webview-ui/app/src/routes/clans/list.tsx +++ b/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) => {
    - - + - + class="btn btn-ghost btn-outline join-item" + endIcon={} + >
    { }} class="m-0 bg-transparent" > - +
    @@ -139,19 +145,19 @@ export const ClanList = () => {
    Registered Clans
    - + - + startIcon={} + >
    diff --git a/pkgs/webview-ui/app/src/routes/flash/view.tsx b/pkgs/webview-ui/app/src/routes/flash/view.tsx index 8eb07b8f6..46cfc2e54 100644 --- a/pkgs/webview-ui/app/src/routes/flash/view.tsx +++ b/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) => ( { e.preventDefault(); deviceQuery.refetch(); }} - > - refresh - + startIcon={} + > } formStore={formStore} selectProps={props} @@ -285,17 +287,19 @@ export const Flash = () => { adornment={{ position: "end", content: ( - + startIcon={ + passwordVisibility()[index()] ? ( + + ) : ( + + ) + } + > ), }} required @@ -304,25 +308,27 @@ export const Flash = () => { )}
    - + startIcon={} + >
    )}
    - + Add WiFi Network +
    @@ -434,18 +440,20 @@ export const Flash = () => {
    - +
    diff --git a/pkgs/webview-ui/app/src/routes/hosts/view.tsx b/pkgs/webview-ui/app/src/routes/hosts/view.tsx index 155507ef4..8c1523e44 100644 --- a/pkgs/webview-ui/app/src/routes/hosts/view.tsx +++ b/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 (
    - + startIcon={} + >
    diff --git a/pkgs/webview-ui/app/src/routes/machines/create.tsx b/pkgs/webview-ui/app/src/routes/machines/create.tsx index 5a2e9ea47..1c87c569b 100644 --- a/pkgs/webview-ui/app/src/routes/machines/create.tsx +++ b/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() { )}
    - +
    diff --git a/pkgs/webview-ui/app/src/routes/machines/details.tsx b/pkgs/webview-ui/app/src/routes/machines/details.tsx index 09ac35f8f..7b32dc311 100644 --- a/pkgs/webview-ui/app/src/routes/machines/details.tsx +++ b/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) => {
    - +
    @@ -252,25 +256,32 @@ const InstallMachine = (props: InstallMachineProps) => { } > - check Confirm Disk - + } > - +
    - +
    @@ -519,13 +530,12 @@ const MachineForm = (props: MachineDetailsProps) => { {
    - +
    }
    @@ -550,15 +560,19 @@ const MachineForm = (props: MachineDetailsProps) => { device.
    - +
    @@ -577,14 +591,14 @@ const MachineForm = (props: MachineDetailsProps) => { process.
    - +
@@ -761,41 +775,38 @@ function WifiModule(props: MachineWifiProps) { /> )} - + )} - + {
- +
} diff --git a/pkgs/webview-ui/app/src/routes/machines/list.tsx b/pkgs/webview-ui/app/src/routes/machines/list.tsx index e7c849f41..d4a5f706a 100644 --- a/pkgs/webview-ui/app/src/routes/machines/list.tsx +++ b/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 = () => {
- +
- +
@@ -117,12 +123,13 @@ export const MachineListView: Component = () => { No machines defined yet. Click below to define one. - +
diff --git a/pkgs/webview-ui/app/src/routes/modules/details.tsx b/pkgs/webview-ui/app/src/routes/modules/details.tsx index 7db0cc290..b814aab21 100644 --- a/pkgs/webview-ui/app/src/routes/modules/details.tsx +++ b/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) => { {props.data.readme}
- + {/* Add -> Select (required) roles, assign Machine */}
@@ -192,7 +193,7 @@ export const ModuleForm = (props: { id: string }) => { handleSubmit={handleSubmit} schema={schema} components={{ - after: , + after: , }} /> diff --git a/pkgs/webview-ui/app/src/routes/welcome/index.tsx b/pkgs/webview-ui/app/src/routes/welcome/index.tsx index 9e7ed6213..0c4474f0f 100644 --- a/pkgs/webview-ui/app/src/routes/welcome/index.tsx +++ b/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 = () => {

Welcome to Clan

Own the services you use.

- - +