clan-app: 3d UI Remove unused files and exports

pkgs/clan-app/ui/knip.json

@@ -0,0 +1,19 @@
+{
+  "ignore": [
+    "gtk.webview.js",
+    "stylelint.config.js",
+    "util.ts",
+    "src/components/v2/**",
+    "api/**",
+    "tailwind/**"
+  ],
+  "ignoreDependencies": [
+    "@babel/plugin-syntax-import-attributes",
+    "@storybook/addon-viewport",
+    "@typescript-eslint/parser",
+    "@vitest/coverage-v8",
+    "http-server",
+    "playwright",
+    "wait-on"
+  ]
+}

pkgs/clan-app/ui/package.json

@@ -12,6 +12,7 @@
     "check": "tsc --noEmit --skipLibCheck && eslint ./src",
     "test": "vitest run --project unit --typecheck",
     "storybook": "storybook",
+    "knip": "knip",
     "storybook-build": "storybook build",
     "storybook-dev": "storybook dev -p 6006",
     "test-storybook": "vitest run --project storybook",
@@ -43,6 +44,7 @@
     "eslint-plugin-tailwindcss": "^3.17.0",
     "http-server": "^14.1.1",
     "jsdom": "^26.1.0",
+    "knip": "^5.61.2",
     "playwright": "~1.52.0",
     "postcss": "^8.4.38",
     "postcss-url": "^10.1.3",
@@ -68,10 +70,8 @@
     "@tanstack/eslint-plugin-query": "^5.51.12",
     "@tanstack/solid-query": "^5.76.0",
     "corvu": "^0.7.1",
-    "material-icons": "^1.13.12",
     "nanoid": "^5.0.7",
     "solid-js": "^1.9.7",
-    "solid-markdown": "^2.0.13",
     "solid-toast": "^0.5.0",
     "three": "^0.176.0"
   },

pkgs/clan-app/ui/src/Form/base/index.tsx

@@ -6,7 +6,7 @@ import type {
 } from "@floating-ui/dom";
 import { computePosition } from "@floating-ui/dom";
 
-export interface UseFloatingOptions<
+interface UseFloatingOptions<
   R extends ReferenceElement,
   F extends HTMLElement,
 > extends Partial<ComputePositionConfig> {
@@ -23,7 +23,7 @@ interface UseFloatingState extends Omit<ComputePositionReturn, "x" | "y"> {
   y?: number | null;
 }
 
-export interface UseFloatingResult extends UseFloatingState {
+interface UseFloatingResult extends UseFloatingState {
   update(): void;
 }
 

pkgs/clan-app/ui/src/Form/fields/FormSection.tsx

@@ -3,6 +3,6 @@ import { JSX } from "solid-js";
 interface FormSectionProps {
   children: JSX.Element;
 }
-export const FormSection = (props: FormSectionProps) => {
+const FormSection = (props: FormSectionProps) => {
   return <div class="p-2">{props.children}</div>;
 };

pkgs/clan-app/ui/src/Form/fields/Select.tsx

@@ -21,7 +21,7 @@ import { FieldLayout } from "./layout";
 import Icon from "@/src/components/icon";
 import { useContext } from "corvu/dialog";
 
-export interface Option {
+interface Option {
   value: string;
   label: string;
   disabled?: boolean;

pkgs/clan-app/ui/src/Form/form/index.tsx

@@ -139,7 +139,7 @@ interface SchemaFieldsProps<T extends FieldValues, R extends ResponseData> {
   readonly: boolean;
   parent: JSONSchema7;
 }
-export function SchemaFields<T extends FieldValues, R extends ResponseData>(
+function SchemaFields<T extends FieldValues, R extends ResponseData>(
   props: SchemaFieldsProps<T, R>,
 ) {
   return (
@@ -172,7 +172,7 @@ export function SchemaFields<T extends FieldValues, R extends ResponseData>(
   );
 }
 
-export function StringField<T extends FieldValues, R extends ResponseData>(
+function StringField<T extends FieldValues, R extends ResponseData>(
   props: SchemaFieldsProps<T, R>,
 ) {
   if (
@@ -325,7 +325,7 @@ export function StringField<T extends FieldValues, R extends ResponseData>(
 interface OptionSchemaProps {
   itemSpec: JSONSchema7Type;
 }
-export function OptionSchema(props: OptionSchemaProps) {
+function OptionSchema(props: OptionSchemaProps) {
   return (
     <Switch
       fallback={<option class="text-error-700">Item spec unhandled</option>}
@@ -344,7 +344,7 @@ interface ValueDisplayProps<T extends FieldValues, R extends ResponseData>
   idx: number;
   of: number;
 }
-export function ListValueDisplay<T extends FieldValues, R extends ResponseData>(
+function ListValueDisplay<T extends FieldValues, R extends ResponseData>(
   props: ValueDisplayProps<T, R>,
 ) {
   const removeItem = (e: Event) => {
@@ -446,7 +446,7 @@ const OnlyStringItems = (props: OnlyStringItems) => {
   );
 };
 
-export function ArrayFields<T extends FieldValues, R extends ResponseData>(
+function ArrayFields<T extends FieldValues, R extends ResponseData>(
   props: SchemaFieldsProps<T, R>,
 ) {
   if (props.schema.type !== "array") {
@@ -711,7 +711,7 @@ interface ObjectFieldPropertyLabelProps {
   schema: JSONSchema7;
   fallback: JSX.Element;
 }
-export function ObjectFieldPropertyLabel(props: ObjectFieldPropertyLabelProps) {
+function ObjectFieldPropertyLabel(props: ObjectFieldPropertyLabelProps) {
   return (
     <Switch fallback={props.fallback}>
       {/* @ts-expect-error: $exportedModuleInfo should exist since we export it */}
@@ -722,7 +722,7 @@ export function ObjectFieldPropertyLabel(props: ObjectFieldPropertyLabelProps) {
   );
 }
 
-export function ObjectFields<T extends FieldValues, R extends ResponseData>(
+function ObjectFields<T extends FieldValues, R extends ResponseData>(
   props: SchemaFieldsProps<T, R>,
 ) {
   if (props.schema.type !== "object") {

pkgs/clan-app/ui/src/api/index.tsx

@@ -7,11 +7,11 @@ import {
   ErrorToastComponent,
   CancelToastComponent,
 } from "@/src/components/toast";
-export type OperationNames = keyof API;
+type OperationNames = keyof API;
 export type OperationArgs<T extends OperationNames> = API[T]["arguments"];
 export type OperationResponse<T extends OperationNames> = API[T]["return"];
 
-export type ApiEnvelope<T> =
+type ApiEnvelope<T> =
   | {
       status: "success";
       data: T;
@@ -19,9 +19,9 @@ export type ApiEnvelope<T> =
     }
   | ApiError;
 
-export type Services = NonNullable<Inventory["services"]>;
+type Services = NonNullable<Inventory["services"]>;
-export type ServiceNames = keyof Services;
+type ServiceNames = keyof Services;
-export type ClanService<T extends ServiceNames> = Services[T];
+type ClanService<T extends ServiceNames> = Services[T];
 export type ClanServiceInstance<T extends ServiceNames> = NonNullable<
   Services[T]
 >[string];
@@ -32,15 +32,15 @@ export type SuccessQuery<T extends OperationNames> = Extract<
 >;
 export type SuccessData<T extends OperationNames> = SuccessQuery<T>["data"];
 
-export type ErrorQuery<T extends OperationNames> = Extract<
+type ErrorQuery<T extends OperationNames> = Extract<
   OperationResponse<T>,
   { status: "error" }
 >;
-export type ErrorData<T extends OperationNames> = ErrorQuery<T>["errors"];
+type ErrorData<T extends OperationNames> = ErrorQuery<T>["errors"];
 
-export type ClanOperations = Record<OperationNames, (str: string) => void>;
+type ClanOperations = Record<OperationNames, (str: string) => void>;
 
-export interface GtkResponse<T> {
+interface GtkResponse<T> {
   result: T;
   op_key: string;
 }

pkgs/clan-app/ui/src/api/wifi.ts

@@ -1,20 +0,0 @@
-import { callApi } from ".";
-import { Schema as Inventory } from "@/api/Inventory";
-
-export const instance_name = (machine_name: string) =>
-  `${machine_name}_wifi_0` as const;
-
-export async function get_iwd_service(base_path: string, machine_name: string) {
-  const r = await callApi("get_inventory", {
-    flake: { identifier: base_path },
-  }).promise;
-  if (r.status == "error") {
-    return null;
-  }
-  // @FIXME: Clean this up once we implement the feature
-  // @ts-expect-error: This doesn't check currently
-  const inventory: Inventory = r.data;
-
-  const instance_key = instance_name(machine_name);
-  return inventory.services?.iwd?.[instance_key] || null;
-}

pkgs/clan-app/ui/src/components/Button/Button.tsx

@@ -42,7 +42,7 @@ const sizeFont: Record<Size, string> = {
   s: cx("text-[0.75rem]"),
 };
 
-export interface ButtonProps
+interface ButtonProps
   extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: Variants;
   size?: Size;

pkgs/clan-app/ui/src/components/SelectInput.tsx

@@ -1,54 +0,0 @@
-import { FieldValues, FormStore, ResponseData } from "@modular-forms/solid";
-import { Show } from "solid-js";
-import { type JSX } from "solid-js";
-import cx from "classnames";
-
-interface SelectInputProps<T extends FieldValues, R extends ResponseData> {
-  formStore: FormStore<T, R>;
-  value: string;
-  options: JSX.Element;
-  selectProps: JSX.HTMLAttributes<HTMLSelectElement>;
-  label: JSX.Element;
-  error?: string;
-  required?: boolean;
-  topRightLabel?: JSX.Element;
-  class?: string;
-}
-
-export function SelectInput<T extends FieldValues, R extends ResponseData>(
-  props: SelectInputProps<T, R>,
-) {
-  return (
-    <label
-      class={cx(" w-full", props.class)}
-      aria-disabled={props.formStore.submitting}
-    >
-      <div class="">
-        <span
-          class=" block"
-          classList={{
-            "after:ml-0.5 after:text-primary after:content-['*']":
-              props.required,
-          }}
-        >
-          {props.label}
-        </span>
-        <Show when={props.topRightLabel}>
-          <span class="">{props.topRightLabel}</span>
-        </Show>
-      </div>
-      <select
-        {...props.selectProps}
-        required={props.required}
-        class="w-full"
-        value={props.value}
-      >
-        {props.options}
-      </select>
-
-      {props.error && (
-        <span class=" font-bold text-error-700">{props.error}</span>
-      )}
-    </label>
-  );
-}

pkgs/clan-app/ui/src/components/Sidebar/index.tsx

@@ -8,7 +8,7 @@ import "./css/sidebar.css";
 import Icon, { IconVariant } from "../icon";
 import { clanMetaQuery } from "@/src/queries/clan-meta";
 
-export const SidebarSection = (props: {
+const SidebarSection = (props: {
   title: string;
   icon: IconVariant;
   children: JSX.Element;

pkgs/clan-app/ui/src/components/TagList/TagList.tsx

@@ -2,7 +2,7 @@ import { Component, For } from "solid-js";
 import { Typography } from "@/src/components/Typography";
 import "./TagList.css";
 
-export interface TagListProps {
+interface TagListProps {
   values: string[];
 }
 

pkgs/clan-app/ui/src/components/Typography/index.tsx

@@ -3,7 +3,7 @@ import { Dynamic } from "solid-js/web";
 import cx from "classnames";
 import "./css/typography.css";
 
-export type Hierarchy = "body" | "title" | "headline" | "label";
+type Hierarchy = "body" | "title" | "headline" | "label";
 type Color = "primary" | "secondary" | "tertiary";
 type Weight = "normal" | "medium" | "bold";
 type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "div";

pkgs/clan-app/ui/src/components/group/index.tsx

@@ -12,7 +12,7 @@ export const Group = (props: GroupProps) => (
   </div>
 );
 
-export type SectionVariant = "attention" | "danger";
+type SectionVariant = "attention" | "danger";
 
 interface SectionHeaderProps {
   variant: SectionVariant;

pkgs/clan-app/ui/src/components/noiseThumbnail/index.tsx

@@ -108,7 +108,7 @@ export const RndThumbnail = (props: RndThumbnailProps) => {
   return <img src={imageSrc()} alt={props.name} />;
 };
 
-export const RndThumbnailShow = () => {
+const RndThumbnailShow = () => {
   const names = ["hsjobeki", "mic92", "lassulus", "D", "A", "D", "B", "C"];
 
   return (

pkgs/clan-app/ui/src/components/toast/index.tsx

@@ -68,7 +68,7 @@ const WarningIcon: Component = () => (
 
 // --- Base Props and Styles ---
 
-export interface BaseToastProps {
+interface BaseToastProps {
   t: Toast;
   message: string;
   onCancel?: () => void; // Optional custom function on X click
@@ -254,7 +254,7 @@ export const CancelToastComponent: Component<BaseToastProps> = (props) => {
 };
 
 // Warning Toast
-export const WarningToastComponent: Component<BaseToastProps> = (props) => {
+const WarningToastComponent: Component<BaseToastProps> = (props) => {
   let timeoutId: number | undefined;
   const [clicked, setClicked] = createSignal(false);
   const [exiting, setExiting] = createSignal(false);

pkgs/clan-app/ui/src/components/v2/index.css

@@ -1,5 +1,4 @@
-@import "material-icons/iconfont/filled.css";
+/* Material icons removed - using custom icons */
-/* List of icons: https://marella.me/material-icons/demo/ */
 /* @import url(./components/Typography/css/typography.css); */
 
 @tailwind base;

pkgs/clan-app/ui/src/floating/index.tsx

@@ -6,7 +6,7 @@ import type {
 } from "@floating-ui/dom";
 import { computePosition } from "@floating-ui/dom";
 
-export interface UseFloatingOptions<
+interface UseFloatingOptions<
   R extends ReferenceElement,
   F extends HTMLElement,
 > extends Partial<ComputePositionConfig> {
@@ -23,7 +23,7 @@ interface UseFloatingState extends Omit<ComputePositionReturn, "x" | "y"> {
   y?: number | null;
 }
 
-export interface UseFloatingResult extends UseFloatingState {
+interface UseFloatingResult extends UseFloatingState {
   update(): void;
 }
 

pkgs/clan-app/ui/src/hooks/index.ts

@@ -23,7 +23,7 @@ export const registerClan = async () => {
  * Opens the custom file dialog
  * Returns a native FileList to allow interaction with the native input type="file"
  */
-export const selectSshKeys = async (): Promise<FileList> => {
+const selectSshKeys = async (): Promise<FileList> => {
   const dataTransfer = new DataTransfer();
 
   const response = await callApi("open_file", {

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

@@ -1,5 +1,4 @@
-@import "material-icons/iconfont/filled.css";
+/* Material icons removed - using custom icons */
-/* List of icons: https://marella.me/material-icons/demo/ */
 /* @import url(./components/Typography/css/typography.css); */
 
 @tailwind base;

pkgs/clan-app/ui/src/queries/index.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/solid-query";
 import { callApi } from "../api";
 import toast from "solid-toast";
 
-export interface ModulesFilter {
+interface ModulesFilter {
   features: string[];
 }
 export const createModulesQuery = (

pkgs/clan-app/ui/src/routes/colors/view.tsx

@@ -1,13 +0,0 @@
-export const colors = () => {
-  return (
-    <div class="grid grid-cols-3 gap-2">
-      <div class="h-10 w-20 bg-red-500">red</div>
-      <div class="h-10 w-20 bg-green-500">green</div>
-      <div class="h-10 w-20 bg-blue-500">blue</div>
-      <div class="h-10 w-20 bg-yellow-500">yellow</div>
-      <div class="h-10 w-20 bg-purple-500">purple</div>
-      <div class="h-10 w-20 bg-cyan-500">cyan</div>
-      <div class="h-10 w-20 bg-pink-500">pink</div>
-    </div>
-  );
-};

pkgs/clan-app/ui/src/routes/deploy/index.tsx

@@ -1,6 +0,0 @@
-import { callApi } from "@/src/api";
-import { createQuery } from "@tanstack/solid-query";
-
-export const Deploy = () => {
-  return <div>Deloy view</div>;
-};

pkgs/clan-app/ui/src/routes/disk/view.tsx

@@ -1,31 +0,0 @@
-import { callApi } from "@/src/api";
-import { useQuery } from "@tanstack/solid-query";
-import { useClanContext } from "@/src/contexts/clan";
-
-export function DiskView() {
-  const { activeClanURI } = useClanContext();
-
-  const query = useQuery(() => ({
-    queryKey: ["disk", activeClanURI()],
-    queryFn: async () => {
-      const currUri = activeClanURI();
-      if (currUri) {
-        // Example of calling an API
-        const result = await callApi("get_inventory", {
-          flake: { identifier: currUri },
-        }).promise;
-        if (result.status === "error") throw new Error("Failed to fetch data");
-        return result.data;
-      }
-    },
-  }));
-  return (
-    <div>
-      <h1>Configure Disk</h1>
-      <p>
-        Select machine then configure the disk. Required before installing for
-        the first time.
-      </p>
-    </div>
-  );
-}

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

@@ -34,7 +34,7 @@ interface Wifi extends FieldValues {
   password: string;
 }
 
-export interface FlashFormValues extends FieldValues {
+interface FlashFormValues extends FieldValues {
   machine: {
     devicePath: string;
     flake: string;

pkgs/clan-app/ui/src/routes/machines/install/vars-step.tsx

@@ -19,7 +19,7 @@ import { useClanContext } from "@/src/contexts/clan";
 
 export type VarsValues = FieldValues & Record<string, Record<string, string>>;
 
-export interface VarsFormProps {
+interface VarsFormProps {
   machine_id: string;
   dir: string;
   handleSubmit: SubmitHandler<VarsValues>;
@@ -27,7 +27,7 @@ export interface VarsFormProps {
   footer: JSX.Element;
 }
 
-export const VarsForm = (props: VarsFormProps) => {
+const VarsForm = (props: VarsFormProps) => {
   const [formStore, { Form, Field }] = createForm<VarsValues>({});
 
   const handleSubmit: SubmitHandler<VarsValues> = async (values, event) => {

pkgs/clan-app/ui/src/routes/modules/add.tsx

@@ -32,7 +32,7 @@ interface AddModuleProps {
   id: string;
 }
 
-export const AddModule = (props: AddModuleProps) => {
+const AddModule = (props: AddModuleProps) => {
   const { activeClanURI } = useClanContext();
   const tags = tagsQuery(activeClanURI());
   const machines = machinesQuery(activeClanURI());

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

@@ -140,7 +140,7 @@ interface SchemaFormProps {
   path: string[];
 }
 
-export const ModuleForm = (props: { id: string }) => {
+const ModuleForm = (props: { id: string }) => {
   // TODO: Fetch the synced schema for all the modules at runtime
   // We use static schema file at build time for now. (Different versions might have different schema at runtime)
   const schemaQuery = createQuery(() => ({

pkgs/clan-app/ui/src/stores/clan.tsx

@@ -80,7 +80,6 @@ const removeClanURI = (uri: string) => {
 
 export {
   store,
-  setStore,
   activeClanURI,
   setActiveClanURI,
   clanURIs,