@nextclaw/ui 0.15.1 → 0.15.3

package/src/features/settings/components/config/provider-models-section.tsx

@@ -99,7 +99,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
       ) : null}
 
       {models.length === 0 ? (
-        <div className="rounded-xl border border-dashed border-border bg-muted/60 px-4 py-6 text-center">
+        <div className="rounded-xl border border-dashed border-border/65 bg-muted/30 px-4 py-6 text-center">
           <p className="text-sm text-muted-foreground">{t('providerModelsEmptyShort')}</p>
           {!showModelInput ? (
             <button
@@ -123,14 +123,14 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
             return (
               <div
                 key={modelName}
-                className="group inline-flex max-w-full items-center gap-1 rounded-full border border-border bg-card px-3 py-1.5"
+                className="group inline-flex max-w-full items-center gap-1 rounded-full border border-border/55 bg-muted/45 px-3 py-1.5"
               >
                 <span className="max-w-[140px] truncate text-sm text-foreground sm:max-w-[220px]">{modelName}</span>
                 <Popover>
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-accent hover:text-accent-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                      className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
                       aria-label={t('providerModelThinkingTitle')}
                       title={t('providerModelThinkingTitle')}
                     >
@@ -138,7 +138,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                     </button>
                   </PopoverTrigger>
                   <PopoverContent className="w-80 space-y-3">
-                    <div className="flex items-center justify-between gap-3 rounded-lg border border-border bg-muted/60 px-3 py-2">
+                    <div className="flex items-center justify-between gap-3 rounded-lg bg-muted/50 px-3 py-2">
                       <div className="min-w-0">
                         <p className="text-xs font-semibold text-foreground">{t('providerModelVisionTitle')}</p>
                         <p className="text-xs text-muted-foreground">{t('providerModelVisionHint')}</p>
@@ -159,8 +159,8 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                             onClick={() => onToggleModelThinkingLevel(modelName, level)}
                             className={`rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${
                               selected
-                                ? 'border-primary bg-primary text-white'
-                                : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:bg-accent/70 hover:text-accent-foreground'
+                                ? 'border-foreground/15 bg-foreground text-background'
+                                : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground'
                             }`}
                           >
                             {formatThinkingLevelLabel(level)}
@@ -198,7 +198,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                 <button
                   type="button"
                   onClick={() => onRemoveModel(modelName)}
-                  className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-accent hover:text-accent-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                  className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
                   aria-label={t('remove')}
                 >
                   <X className="h-3 w-3" />

package/src/features/settings/components/config/provider-pill-selector.tsx

@@ -16,7 +16,7 @@ export function ProviderPillSelector(props: ProviderPillSelectorProps) {
             type="button"
             onClick={() => onChange(option.value)}
             aria-pressed={selected}
-            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-primary bg-primary text-primary-foreground shadow-sm' : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:bg-accent/70 hover:text-accent-foreground'}`}
+            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-foreground/15 bg-foreground text-background' : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground'}`}
           >
             {option.label}
           </button>

package/src/features/settings/components/config/secrets-config-form.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { Plus, Save, Trash2 } from 'lucide-react';
 import { Button } from '@/shared/components/ui/button';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
@@ -272,12 +273,12 @@ export function SecretsConfigForm(props: {
         onRemove={(index) => setState((prev) => ({ ...prev, refs: prev.refs.filter((_, cursor) => cursor !== index) }))}
         onAdd={() => setState((prev) => ({ ...prev, refs: [...prev.refs, createRefRow()] }))}
       />
-      <div className="flex justify-end">
-        <Button type="button" onClick={handleSave} disabled={isPending}>
-          <Save className="mr-2 h-4 w-4" />
+      <FormActions>
+        <Button type="button" size="sm" onClick={handleSave} disabled={isPending}>
+          <Save className="mr-1.5 h-3.5 w-3.5" />
           {isPending ? t('saving') : t('save')}
         </Button>
-      </div>
+      </FormActions>
     </PageLayout>
   );
 }

package/src/features/settings/pages/model-config-page.tsx

@@ -3,13 +3,14 @@ import { Card } from '@/shared/components/ui/card';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
 import { Skeleton } from '@/shared/components/ui/skeleton';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { ProviderScopedModelInput } from '@/shared/components/common/provider-scoped-model-input';
 import { useConfig, useConfigSchema, useProviderTemplates, useProviders, useUpdateModel } from '@/shared/hooks/use-config';
 import { hintForPath } from '@/shared/lib/config-hints';
 import { t } from '@/shared/lib/i18n';
 import { buildProviderModelCatalog } from '@/shared/lib/provider-models';
 import { PageLayout, PageHeader } from '@/app/components/layout/page-layout';
-import { DOCS_DEFAULT_BASE_URL } from '@/shared/components/doc-browser/doc-browser-context';
+import { getDocsUrl } from '@/shared/components/doc-browser/doc-browser-context';
 import { BookOpen, Folder, Loader2, Sparkles } from 'lucide-react';
 import { useMemo, useState } from 'react';
 
@@ -37,48 +38,48 @@ function ModelConfigForm(props: {
         event.preventDefault();
         onSubmit({ model, workspace });
       }}
-      className="space-y-8"
+      className="space-y-5"
     >
-      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-        <div className="rounded-2xl border border-gray-200 bg-white p-8 shadow-card">
-          <div className="mb-8 flex items-center gap-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
-              <Sparkles className="h-5 w-5" />
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+        <div className="rounded-2xl border border-border/75 bg-card p-6">
+          <div className="mb-6 flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+              <Sparkles className="h-4 w-4" />
             </div>
-            <h3 className="text-lg font-bold text-gray-900">{t('defaultModel')}</h3>
+            <h3 className="text-base font-semibold text-foreground">{t('defaultModel')}</h3>
           </div>
           <div className="space-y-2">
-            <Label htmlFor="model" className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+            <Label htmlFor="model" className="text-xs font-medium text-muted-foreground">
               {modelLabel}
             </Label>
             <ProviderScopedModelInput id="model" value={model} onChange={setModel} providerCatalog={providerCatalog} modelPlaceholder={modelPlaceholder} />
-            <p className="text-xs text-gray-400">{modelHelpText}</p>
-            <a href={`${DOCS_DEFAULT_BASE_URL}/guide/model-selection`} className="inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
+            <p className="text-xs text-muted-foreground/80">{modelHelpText}</p>
+            <a href={getDocsUrl('/guide/model-selection')} className="inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover">
               <BookOpen className="h-3.5 w-3.5" />
               {t('channelsGuideTitle')}
             </a>
           </div>
         </div>
-        <div className="rounded-2xl border border-gray-200 bg-white p-8 shadow-card">
-          <div className="mb-8 flex items-center gap-4">
-            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
-              <Folder className="h-5 w-5" />
+        <div className="rounded-2xl border border-border/75 bg-card p-6">
+          <div className="mb-6 flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+              <Folder className="h-4 w-4" />
             </div>
-            <h3 className="text-lg font-bold text-gray-900">{t('workspace')}</h3>
+            <h3 className="text-base font-semibold text-foreground">{t('workspace')}</h3>
           </div>
           <div className="space-y-2">
-            <Label htmlFor="workspace" className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+            <Label htmlFor="workspace" className="text-xs font-medium text-muted-foreground">
               {workspaceLabel}
             </Label>
             <Input id="workspace" value={workspace} onChange={(event) => setWorkspace(event.target.value)} placeholder={workspacePlaceholder} className="rounded-xl" />
           </div>
         </div>
       </div>
-      <div className="flex justify-end pt-4">
-        <Button type="submit" disabled={isPending} size="lg">
-          {isPending ? <Loader2 className="h-5 w-5 animate-spin" /> : t('saveChanges')}
+      <FormActions>
+        <Button type="submit" disabled={isPending} size="sm">
+          {isPending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : t('saveChanges')}
         </Button>
-      </div>
+      </FormActions>
     </form>
   );
 }
@@ -108,9 +109,9 @@ export function ModelConfigPage() {
           <Skeleton className="h-8 w-32" />
           <Skeleton className="h-4 w-48" />
         </div>
-        <Card className="rounded-2xl border-gray-200 p-6">
-          <div className="mb-6 flex items-center gap-4">
-            <Skeleton className="h-12 w-12 rounded-xl" />
+        <Card hover={false} className="rounded-2xl border-border/75 p-6 shadow-none">
+          <div className="mb-6 flex items-center gap-3">
+            <Skeleton className="h-9 w-9 rounded-lg" />
             <div className="space-y-2">
               <Skeleton className="h-5 w-24" />
               <Skeleton className="h-3 w-32" />
@@ -119,7 +120,7 @@ export function ModelConfigPage() {
           <Skeleton className="mb-2 h-4 w-20" />
           <Skeleton className="h-10 w-full rounded-xl" />
         </Card>
-        <Card className="rounded-2xl border-gray-200 p-6">
+        <Card hover={false} className="rounded-2xl border-border/75 p-6 shadow-none">
           <Skeleton className="mb-2 h-5 w-24" />
           <Skeleton className="h-10 w-full rounded-xl" />
         </Card>

package/src/features/settings/pages/providers-config-page.tsx

@@ -137,7 +137,7 @@ export function ProvidersConfigPage() {
                 <div className="grid max-h-[24rem] grid-cols-2 gap-2 overflow-y-auto sm:grid-cols-3">
                   <button
                     type="button"
-                    className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border bg-card px-3 py-2 text-left transition-colors hover:border-primary/40 hover:bg-accent/70"
+                    className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border/70 bg-muted/20 px-3 py-2 text-left transition-colors hover:border-border hover:bg-muted/45"
                     onClick={async () => {
                       try {
                         const result = await createProvider.mutateAsync({ data: { providerType: null } });
@@ -150,7 +150,7 @@ export function ProvidersConfigPage() {
                       }
                     }}
                   >
-                    <LogoBadge name="custom" className="h-8 w-8 rounded-lg border border-border bg-background" />
+                    <LogoBadge name="custom" className="h-8 w-8 rounded-lg border border-border/60 bg-muted/50" />
                     <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground">
                       {t('providerAddCustom')}
                     </span>
@@ -159,7 +159,7 @@ export function ProvidersConfigPage() {
                     <button
                       key={template.providerType}
                       type="button"
-                      className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border bg-card px-3 py-2 text-left transition-colors hover:border-primary/40 hover:bg-accent/70"
+                      className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border/55 bg-muted/15 px-3 py-2 text-left transition-colors hover:border-border/80 hover:bg-muted/40"
                       onClick={async () => {
                         try {
                           const result = await createProvider.mutateAsync({ data: { providerType: template.providerType } });
@@ -175,7 +175,7 @@ export function ProvidersConfigPage() {
                       <LogoBadge
                         name={template.providerType}
                         src={template.logo ? `/logos/${template.logo}` : null}
-                        className="h-8 w-8 rounded-lg border border-border bg-background"
+                        className="h-8 w-8 rounded-lg border border-border/55 bg-background"
                         imgClassName="h-4 w-4 object-contain"
                       />
                       <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground">
@@ -221,10 +221,10 @@ export function ProvidersConfigPage() {
                   role="button"
                   tabIndex={0}
                   className={cn(
-                    'w-full rounded-xl border p-2.5 text-left transition-all',
+                    'group w-full rounded-xl border p-2.5 text-left transition-colors',
                     resolvedSelectedProvider === provider.providerId
-                      ? 'border-primary/35 bg-primary-50/45 text-foreground shadow-sm'
-                      : 'border-border bg-card text-muted-foreground hover:border-primary/35 hover:bg-accent/70 hover:text-accent-foreground',
+                      ? 'border-border/70 bg-muted/65 text-foreground'
+                      : 'border-transparent bg-transparent text-muted-foreground hover:border-border/50 hover:bg-muted/40 hover:text-foreground',
                   )}
                 >
                   <div className="relative min-h-10">
@@ -232,10 +232,7 @@ export function ProvidersConfigPage() {
                       <LogoBadge
                         name={provider.providerType ?? provider.providerId}
                         src={template?.logo ? `/logos/${template.logo}` : null}
-                        className={cn(
-                          'h-10 w-10 rounded-lg border',
-                          isReady ? 'border-primary/35 bg-background' : 'border-border bg-background',
-                        )}
+                        className="h-10 w-10 rounded-lg border border-border/55 bg-muted/40"
                         imgClassName="h-5 w-5 object-contain"
                         fallback={<span className="text-sm font-semibold uppercase text-muted-foreground">{provider.providerId[0]}</span>}
                       />
@@ -247,7 +244,7 @@ export function ProvidersConfigPage() {
                         </p>
                       </div>
                     </div>
-                    <div className="absolute right-0 top-0 flex items-center gap-1.5">
+                    <div className="absolute right-0 top-0 flex items-center gap-1.5 opacity-70 transition-opacity group-hover:opacity-100">
                       <div onClick={(event) => event.stopPropagation()}>
                         <Switch
                           checked={isEnabled}
@@ -268,7 +265,7 @@ export function ProvidersConfigPage() {
                         <PopoverTrigger asChild>
                           <button
                             type="button"
-                            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-accent hover:text-accent-foreground"
+                            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-muted hover:text-foreground"
                             onClick={(event) => event.stopPropagation()}
                             title={t('more')}
                           >

package/src/features/settings/pages/search-config-page.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { ExternalLink, KeyRound, Search as SearchIcon } from "lucide-react";
 import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
 import { Button } from "@/shared/components/ui/button";
+import { FormActions } from "@/shared/components/ui/actions/form-actions";
 import { Input } from "@/shared/components/ui/input";
 import { Label } from "@/shared/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/components/ui/select";
@@ -456,11 +457,13 @@ function SearchConfigForm(props: {
               />
             </ConfigSplitPaneBody>
 
-            <ConfigSplitPaneFooter className="flex justify-end px-6 py-4">
-              <Button type="submit" disabled={isPending}>
-                <KeyRound className="mr-2 h-4 w-4" />
-                {isPending ? t("saving") : t("saveChanges")}
-              </Button>
+            <ConfigSplitPaneFooter>
+              <FormActions>
+                <Button type="submit" size="sm" disabled={isPending}>
+                  <KeyRound className="mr-1.5 h-3.5 w-3.5" />
+                  {isPending ? t("saving") : t("saveChanges")}
+                </Button>
+              </FormActions>
             </ConfigSplitPaneFooter>
           </form>
         </ConfigSplitDetailPane>

package/src/features/side-dock/components/side-dock.tsx

@@ -95,7 +95,7 @@ function SideDockButton({
             onClick={() => onOpen(item)}
             className={cn(
               'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
-              'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
               active
                 ? 'bg-primary/10 text-primary'
                 : 'bg-transparent',
@@ -113,7 +113,7 @@ function SideDockButton({
               event.stopPropagation();
               onUnpin(item);
             }}
-            className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm ring-1 ring-border/70 transition-colors hover:bg-muted hover:text-foreground group-hover:flex focus-visible:flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm ring-1 ring-border/70 transition-colors hover:bg-muted hover:text-foreground group-hover:flex focus-visible:flex focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
             <X className="h-3 w-3" aria-hidden="true" />
           </button>
@@ -144,7 +144,7 @@ function SideDockActionButton({
           onClick={onClick}
           className={cn(
             'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
-            'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
           )}
         >
           <Icon className="h-5 w-5" aria-hidden="true" />

package/src/features/system-status/components/config/runtime-config-editor.tsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 import { Save } from 'lucide-react';
 import type { ConfigView, RuntimeConfigUpdate } from '@/shared/lib/api';
 import { Button } from '@/shared/components/ui/button';
+import { FormActions } from '@/shared/components/ui/actions/form-actions';
 import { PageLayout } from '@/app/components/layout/page-layout';
 import { t } from '@/shared/lib/i18n';
 import { RuntimeConfigOverview } from '@/features/system-status/components/config/runtime-config-overview';
@@ -111,12 +112,12 @@ export function RuntimeConfigEditor({
         onRemoveBinding={(index) => setBindings((previous) => previous.filter((_, cursor) => cursor !== index))}
         onAddBinding={() => setBindings((previous) => [...previous, createEmptyRuntimeBinding()])}
       />
-      <div className="flex justify-end">
-        <Button type="button" onClick={handleSave} disabled={updateRuntime.isPending}>
-          <Save className="h-4 w-4 mr-2" />
+      <FormActions>
+        <Button type="button" size="sm" onClick={handleSave} disabled={updateRuntime.isPending}>
+          <Save className="mr-1.5 h-3.5 w-3.5" />
           {updateRuntime.isPending ? t('saving') : t('saveRuntimeSettings')}
         </Button>
-      </div>
+      </FormActions>
     </PageLayout>
   );
 }