@flame0510/project-aether 1.2.0 → 1.4.0

package/app/components/ui/RemoveButton.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+/**
+ * Remove an item from a list.
+ *
+ * A small `×` at the end of a row, rather than a "Remove" label: the word reads
+ * as an action already carried out, which is wrong wherever the change only
+ * lands on save.
+ *
+ * One style everywhere — the `danger` treatment the credentials page already
+ * used. Whether the removal is immediate or pending is said in the tooltip, not
+ * in the colour: two tones for the same gesture made the button look like two
+ * different controls.
+ *
+ * Deliberately separate from dismissing a dialog, which looks similar and means
+ * something else. See rule 8 in docs/FRONTEND-ARCHITECTURE.md.
+ */
+import { Button } from './Button';
+
+export function RemoveButton({
+  onClick,
+  label,
+  disabled,
+  title,
+}: {
+  onClick: () => void;
+  /** What is being removed. Becomes the accessible name: "Remove <label>". */
+  label: string;
+  disabled?: boolean;
+  /** Override when the consequence is worth spelling out, e.g. a pending edit. */
+  title?: string;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="danger"
+      size="sm"
+      disabled={disabled}
+      aria-label={`Remove ${label}`}
+      title={title ?? `Remove ${label}`}
+      onClick={onClick}
+    >
+      ×
+    </Button>
+  );
+}

package/app/components/ui/Select.tsx

@@ -5,7 +5,8 @@ import { useId, type SelectHTMLAttributes, type ReactNode } from 'react';
 interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   label?: string;
   error?: string;
-  options: { value: string; label: ReactNode }[];
+  /** `disabled` shows a value that exists but may not be chosen, e.g. a current setting no longer on offer. */
+  options: { value: string; label: ReactNode; disabled?: boolean }[];
 }
 
 export function Select({ label, error, options, id, className = '', ...rest }: SelectProps) {
@@ -17,7 +18,7 @@ export function Select({ label, error, options, id, className = '', ...rest }: S
       {label && <label className="ui-field__label" htmlFor={selectId}>{label}</label>}
       <select id={selectId} className={`ui-select ${error ? 'ui-select--error' : ''} ${className}`} {...rest}>
         {options.map((o) => (
-          <option key={o.value} value={o.value}>{o.label}</option>
+          <option key={o.value} value={o.value} disabled={o.disabled}>{o.label}</option>
         ))}
       </select>
       {error && <div className="ui-field__error">{error}</div>}

package/app/components/ui/index.ts

@@ -1,6 +1,7 @@
 export * from './ConfirmModal';
 export * from './Badge';
 export * from './Button';
+export * from './RemoveButton';
 export * from './FilterBar';
 export * from './Input';
 export * from './LoadingSpinner';

package/app/credentials/PageClient.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { Page, PageHeader, Button, Modal, Input, Pill } from '@/app/components/ui';
+import { Page, PageHeader, Button, Modal, Input, Pill, RemoveButton } from '@/app/components/ui';
 import { CredentialCardsSkeleton, AgentSyncRowsSkeleton } from '@/app/components/Skeleton';
 import type { CredentialProfile } from '@/lib/credentials/vault';
 import type { CredentialProviderDef } from '@/lib/credentials/providers';
@@ -499,7 +499,7 @@ export default function CredentialsPageClient() {
                             && !detectFailed
                             && !detectData.some((d) => d.error)
                             && !detectData.some((d) => d.matchedProfiles?.some((m) => m.profileId === p.id)) && (
-                            <Button type="button" variant="danger" size="sm" disabled={!!busy} onClick={() => setDeleteId(p.id)}>×</Button>
+                            <RemoveButton label={p.label ?? p.id} disabled={!!busy} onClick={() => setDeleteId(p.id)} />
                           )}
                         </div>
                       </div>