refactor: misc component updates, styles, and gitignore

.gitignore

@@ -38,3 +38,6 @@ contracts/out/
 /blob-report/
 /playwright/.cache/
 /playwright/.auth/
+
+*storybook.log
+storybook-static

packages/website/src/components/AccessKeyBucketScopeFields.tsx

@@ -4,8 +4,8 @@ import { SpinnerIcon } from '@phosphor-icons/react/dist/ssr';
 import type { AccessKeyBucketScope, ListBucketsResponse } from '@filone/shared';
 
 import { apiRequest } from '../lib/api.js';
-import { Checkbox } from './Checkbox.js';
-import { Icon } from './Icon.js';
+import { Checkbox } from './Checkbox/index.js';
+import { Icon } from './Icon/index.js';
 
 type AccessKeyBucketScopeFieldsProps = {
   bucketScope: AccessKeyBucketScope;
@@ -89,7 +89,7 @@ export function AccessKeyBucketScopeFields({
           {loading && (
             <div className="flex items-center justify-center py-6" role="status">
               <span className="text-brand-700 animate-spin">
-                <Icon component={SpinnerIcon} size={20} />
+                <Icon component={SpinnerIcon} size="md" />
               </span>
               <span className="sr-only">Loading buckets</span>
             </div>

packages/website/src/components/AccessKeyPermissionsFields.tsx

@@ -1,5 +1,5 @@
 import type { AccessKeyPermission } from '@filone/shared';
-import { Checkbox } from './Checkbox';
+import { Checkbox } from './Checkbox/index.js';
 
 type PermissionOption = {
   value: AccessKeyPermission;

packages/website/src/components/AccessKeysTable.tsx

@@ -1,69 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
 
-import {
-  CopySimpleIcon,
-  DotsThreeIcon,
-  KeyIcon,
-  PlusIcon,
-  TrashIcon,
-} from '@phosphor-icons/react/dist/ssr';
+import { DotsThreeIcon, KeyIcon, PlusIcon, TrashIcon } from '@phosphor-icons/react/dist/ssr';
 
 import type { AccessKey } from '@filone/shared';
 
+import { Badge } from './Badge/index.js';
 import { Button } from './Button';
+import { CopyButton } from './CopyButton';
 import { formatDate } from '../lib/time.js';
-import { useCopyToClipboard } from '../lib/use-copy-to-clipboard.js';
-
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-
-function StatusBadge({ status }: { status: AccessKey['status'] }) {
-  if (status === 'active') {
-    return (
-      <span className="rounded-full border border-green-200 bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">
-        Active
-      </span>
-    );
-  }
-  return (
-    <span className="rounded-full border border-zinc-200 bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-600">
-      Inactive
-    </span>
-  );
-}
-
-function PermissionBadge({ permission }: { permission: string }) {
-  return (
-    <span className="rounded-full border border-zinc-200 bg-zinc-100 px-2 py-0.5 text-[10px] font-medium uppercase text-zinc-600">
-      {permission}
-    </span>
-  );
-}
-
-function BucketBadge({ name }: { name: string }) {
-  return (
-    <span className="rounded-full bg-zinc-100 px-2.5 py-0.5 text-[10px] font-normal text-zinc-800">
-      {name}
-    </span>
-  );
-}
-
-function CopyButton({ value }: { value: string }) {
-  const { copied, copy } = useCopyToClipboard();
-
-  return (
-    <button
-      type="button"
-      onClick={() => void copy(value)}
-      title={copied ? 'Copied' : 'Copy'}
-      aria-label={copied ? 'Copied to clipboard' : 'Copy to clipboard'}
-      className="rounded p-0.5 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-700"
-    >
-      <CopySimpleIcon size={12} />
-    </button>
-  );
-}
 
 function ActionMenu({ onDelete }: { onDelete: () => void }) {
   const [open, setOpen] = useState(false);
@@ -159,7 +103,8 @@ export function AccessKeysTable({
         <p className="mb-1 text-sm font-medium text-zinc-900">{emptyTitle}</p>
         <p className="mb-4 text-sm text-zinc-500">{emptyDescription}</p>
         {onCreateOpen && (
-          <Button variant="filled" icon={PlusIcon} onClick={onCreateOpen}>
+          <Button variant="default" onClick={onCreateOpen}>
+            <PlusIcon className="size-4" />
             Create your first key
           </Button>
         )}
@@ -204,7 +149,7 @@ export function AccessKeysTable({
                 <p className="text-sm font-medium text-zinc-900">{key.keyName}</p>
                 <div className="flex items-center gap-1">
                   <p className="font-mono text-xs text-zinc-500">{key.accessKeyId}</p>
-                  <CopyButton value={key.accessKeyId} />
+                  <CopyButton value={key.accessKeyId} size={12} className="rounded p-0.5" />
                 </div>
               </td>
 
@@ -213,9 +158,15 @@ export function AccessKeysTable({
                 <td className="px-4 py-3">
                   <div className="flex flex-wrap gap-1">
                     {key.bucketScope === 'all' ? (
-                      <BucketBadge name="All Buckets" />
+                      <Badge className="border-transparent text-[10px] font-normal">
+                        All Buckets
+                      </Badge>
                     ) : (
-                      (key.buckets ?? []).map((b) => <BucketBadge key={b} name={b} />)
+                      (key.buckets ?? []).map((b) => (
+                        <Badge key={b} className="border-transparent text-[10px] font-normal">
+                          {b}
+                        </Badge>
+                      ))
                     )}
                   </div>
                 </td>
@@ -226,15 +177,19 @@ export function AccessKeysTable({
                 <td className="px-4 py-3">
                   <div className="flex flex-wrap gap-1">
                     {(key.permissions ?? []).map((p) => (
-                      <PermissionBadge key={p} permission={p} />
+                      <Badge key={p} className="text-[10px] uppercase">
+                        {p}
+                      </Badge>
                     ))}
                   </div>
                 </td>
               )}
 
               {/* Status */}
               <td className="px-4 py-3">
-                <StatusBadge status={key.status} />
+                <Badge variant={key.status === 'active' ? 'success' : 'default'}>
+                  {key.status === 'active' ? 'Active' : 'Inactive'}
+                </Badge>
               </td>
 
               {/* Last Used */}

packages/website/src/components/AddBucketKeyModal.tsx

@@ -7,9 +7,10 @@ import { expiresAtFromForm } from '../lib/time.js';
 import { AccessKeyExpirationFields } from './AccessKeyExpirationFields.js';
 import type { ExpirationOption } from './AccessKeyExpirationFields.js';
 import { AccessKeyPermissionsFields } from './AccessKeyPermissionsFields.js';
-import { Button } from './Button.js';
-import { Input } from './Input.js';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from './Modal/index.js';
+import { Button } from './Button';
+import { Input } from './Input/index.js';
+import { Label } from './Label/index.js';
+import { Dialog, DialogBody, DialogFooter, DialogHeader } from './Dialog';
 import { SaveCredentialsModal } from './SaveCredentialsModal.js';
 import { useToast } from './Toast/index.js';
 
@@ -107,19 +108,23 @@ export function AddBucketKeyModal({
   const canSubmit = keyName.trim().length > 0 && permissions.length > 0 && !creating;
 
   return (
-    <Modal open={open} onClose={handleClose} size="md">
-      <ModalHeader onClose={handleClose}>Create API key for {bucketName}</ModalHeader>
-      <ModalBody>
+    <Dialog open={open} onClose={handleClose} size="md">
+      <DialogHeader onClose={handleClose}>Create API key for {bucketName}</DialogHeader>
+      <DialogBody>
         <div className="flex flex-col gap-4">
           {/* Key name */}
           <div className="flex flex-col gap-1.5">
-            <label className="text-sm font-medium text-zinc-700">Key name</label>
-            <Input value={keyName} onChange={setKeyName} placeholder="e.g., Production API Key" />
+            <Label>Key name</Label>
+            <Input
+              value={keyName}
+              onChange={(e) => setKeyName(e.target.value)}
+              placeholder="e.g., Production API Key"
+            />
           </div>
 
           {/* Permissions */}
           <div className="flex flex-col gap-2">
-            <label className="text-sm font-medium text-zinc-700">Permissions</label>
+            <Label>Permissions</Label>
             <AccessKeyPermissionsFields value={permissions} onChange={setPermissions} />
             {permissions.length === 0 && (
               <p className="text-xs text-red-600">Select at least one permission.</p>
@@ -128,7 +133,7 @@ export function AddBucketKeyModal({
 
           {/* Expiration */}
           <div className="flex flex-col gap-2">
-            <label className="text-sm font-medium text-zinc-700">Expiration</label>
+            <Label>Expiration</Label>
             <AccessKeyExpirationFields
               value={expiration}
               customDate={customDate}
@@ -137,17 +142,17 @@ export function AddBucketKeyModal({
             />
           </div>
         </div>
-      </ModalBody>
-      <ModalFooter>
+      </DialogBody>
+      <DialogFooter>
         <div className="flex justify-end gap-2">
           <Button variant="ghost" onClick={handleClose}>
             Cancel
           </Button>
-          <Button variant="filled" disabled={!canSubmit} onClick={handleCreate}>
+          <Button variant="default" disabled={!canSubmit} onClick={handleCreate}>
             {creating ? 'Creating...' : 'Create & add key'}
           </Button>
         </div>
-      </ModalFooter>
-    </Modal>
+      </DialogFooter>
+    </Dialog>
   );
 }

packages/website/src/components/BaseLink.tsx

@@ -1,17 +1,44 @@
-import type { AnchorHTMLAttributes } from 'react';
+import { Component } from 'react';
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
 
 import { Link } from '@tanstack/react-router';
 
 export type BaseLinkProps = {
   href: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
   className?: string;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
 
 function isInternalLink(href: string): boolean {
   return href.startsWith('/') || href.startsWith('#');
 }
 
+/** Falls back to a plain <a> if no router context is available (e.g. Storybook). */
+class RouterLinkSafe extends Component<
+  { to: string; children?: ReactNode } & Record<string, unknown>,
+  { hasError: boolean }
+> {
+  state = { hasError: false };
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  render() {
+    const { to, children, ...rest } = this.props;
+    if (this.state.hasError) {
+      return (
+        <a href={to} {...rest}>
+          {children}
+        </a>
+      );
+    }
+    return (
+      <Link to={to} {...rest}>
+        {children}
+      </Link>
+    );
+  }
+}
+
 export function BaseLink({ href, children, ...rest }: BaseLinkProps) {
   if (href.startsWith('mailto:')) {
     return (
@@ -23,9 +50,9 @@ export function BaseLink({ href, children, ...rest }: BaseLinkProps) {
 
   if (isInternalLink(href)) {
     return (
-      <Link to={href} {...rest}>
+      <RouterLinkSafe to={href} {...rest}>
         {children}
-      </Link>
+      </RouterLinkSafe>
     );
   }
 

packages/website/src/components/SidebarNav.tsx

@@ -11,8 +11,8 @@ import {
   ChatCircleIcon,
 } from '@phosphor-icons/react/dist/ssr';
 import { Link, useMatchRoute } from '@tanstack/react-router';
-import { ProgressBar } from './ProgressBar.js';
-import { Button } from './Button.js';
+import { ProgressBar } from './ProgressBar/index.js';
+import { Button } from './Button';
 import { SubscriptionStatus, getUsageLimits, formatBytes } from '@filone/shared';
 import type { BillingInfo, UsageResponse } from '@filone/shared';
 import { getBilling, getUsage } from '../lib/api.js';
@@ -167,8 +167,8 @@ export function SidebarNav({ collapsed, onToggle }: SidebarNavProps) {
             </div>
           </div>
           <div className="mt-3">
-            <Button variant="filled" href="/billing" className="w-full justify-center text-xs">
-              Upgrade
+            <Button variant="default" asChild className="w-full justify-center text-xs">
+              <Link to="/billing">Upgrade</Link>
             </Button>
           </div>
         </div>
@@ -182,8 +182,8 @@ export function SidebarNav({ collapsed, onToggle }: SidebarNavProps) {
             upgrade or download your data.
           </p>
           <div className="mt-3">
-            <Button variant="filled" href="/billing" className="w-full justify-center text-xs">
-              Upgrade
+            <Button variant="default" asChild className="w-full justify-center text-xs">
+              <Link to="/billing">Upgrade</Link>
             </Button>
           </div>
         </div>
@@ -197,8 +197,8 @@ export function SidebarNav({ collapsed, onToggle }: SidebarNavProps) {
             reactivate or download your data.
           </p>
           <div className="mt-3">
-            <Button variant="filled" href="/billing" className="w-full justify-center text-xs">
-              Reactivate
+            <Button variant="default" asChild className="w-full justify-center text-xs">
+              <Link to="/billing">Reactivate</Link>
             </Button>
           </div>
         </div>
@@ -212,8 +212,8 @@ export function SidebarNav({ collapsed, onToggle }: SidebarNavProps) {
             {graceDays !== null ? ` ${graceDays} days remaining.` : ''}
           </p>
           <div className="mt-3">
-            <Button variant="filled" href="/billing" className="w-full justify-center text-xs">
-              Update payment
+            <Button variant="default" asChild className="w-full justify-center text-xs">
+              <Link to="/billing">Update payment</Link>
             </Button>
           </div>
         </div>
@@ -226,8 +226,8 @@ export function SidebarNav({ collapsed, onToggle }: SidebarNavProps) {
             Account canceled. Reactivate to regain access.
           </p>
           <div className="mt-3">
-            <Button variant="filled" href="/billing" className="w-full justify-center text-xs">
-              Reactivate
+            <Button variant="default" asChild className="w-full justify-center text-xs">
+              <Link to="/billing">Reactivate</Link>
             </Button>
           </div>
         </div>

packages/website/src/lib/use-file-upload.ts

@@ -42,9 +42,9 @@ export function useFileUpload({ bucketName, tags, onSuccess }: UseFileUploadOpti
     }
   }, []);
 
-  const handleObjectNameChange = useCallback((value: string) => {
+  const handleObjectNameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     userEditedName.current = true;
-    setObjectName(value);
+    setObjectName(e.target.value);
   }, []);
 
   const handleUpload = useCallback(async () => {

packages/website/src/styles.css

@@ -1,2 +1,3 @@
 @import 'tailwindcss';
+@import '@fontsource-variable/inconsolata';
 @import './styles/globals.css';

packages/website/src/styles/globals.css

@@ -1,5 +1,4 @@
 @import './button.css';
-@import './modal.css';
 @import './state-card.css';
 @import './table.css';
 @import './tabs.css';
@@ -33,6 +32,8 @@
 @theme inline {
   --font-sans: var(--font-funnel-sans);
   --font-heading: var(--font-aspekta);
+  --font-mono:
+    'Inconsolata Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
 @utility brand-outline {