Refactor application structure and simplify implementation

src/ui/IconButton.tsx

@@ -1,9 +1,12 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-import { BusyRing } from './BusyRing';
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { BusyRing } from "./BusyRing";
 
-export type IconButtonVariant = 'neutral' | 'add' | 'danger';
+export type IconButtonVariant = "neutral" | "add" | "danger";
 
-export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+export interface IconButtonProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "title"
+> {
   label: string;
   icon: ReactNode;
   variant?: IconButtonVariant;
@@ -14,25 +17,27 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
 export function IconButton({
   label,
   icon,
-  variant = 'neutral',
+  variant = "neutral",
   loading = false,
   tooltip,
   className,
   disabled,
   ...props
 }: IconButtonProps) {
-  const tooltipText = tooltip === '' ? undefined : tooltip ?? label;
+  const tooltipText = tooltip === "" ? undefined : (tooltip ?? label);
   const classes = [
-    'ui-icon-button',
+    "ui-icon-button",
     `ui-icon-button--${variant}`,
-    loading ? 'is-loading' : '',
-    className ?? '',
-  ].filter(Boolean).join(' ');
+    loading ? "is-loading" : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   return (
     <button
       {...props}
-      type={props.type ?? 'button'}
+      type={props.type ?? "button"}
       className={classes}
       aria-label={label}
       data-tooltip={tooltipText}
@@ -44,4 +49,3 @@ export function IconButton({
     </button>
   );
 }
-