@nextclaw/ui 0.12.9 → 0.12.11

package/src/components/config/channel-form-fields-section.tsx

@@ -1,29 +1,46 @@
-import type { Dispatch, SetStateAction } from 'react';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Switch } from '@/components/ui/switch';
-import { TagInput } from '@/components/common/TagInput';
-import { hintForPath } from '@/lib/config-hints';
-import { t } from '@/lib/i18n';
-import { Globe, Hash, KeyRound, Mail, Settings, ToggleLeft } from 'lucide-react';
-import type { ConfigUiHints } from '@/api/types';
-import type { ChannelField } from './channel-form-fields';
+import type { Dispatch, SetStateAction } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { TagInput } from "@/components/common/tag-input";
+import { hintForPath } from "@/lib/config-hints";
+import { t } from "@/lib/i18n";
+import {
+  Globe,
+  Hash,
+  KeyRound,
+  Mail,
+  Settings,
+  ToggleLeft,
+} from "lucide-react";
+import type { ConfigUiHints } from "@/api/types";
+import type { ChannelField } from "./channel-form-fields";
 
 function getFieldIcon(fieldName: string) {
-  if (fieldName.includes('token') || fieldName.includes('secret') || fieldName.includes('password')) {
+  if (
+    fieldName.includes("token") ||
+    fieldName.includes("secret") ||
+    fieldName.includes("password")
+  ) {
     return <KeyRound className="h-3.5 w-3.5 text-gray-500" />;
   }
-  if (fieldName.includes('url') || fieldName.includes('host')) {
+  if (fieldName.includes("url") || fieldName.includes("host")) {
     return <Globe className="h-3.5 w-3.5 text-gray-500" />;
   }
-  if (fieldName.includes('email') || fieldName.includes('mail')) {
+  if (fieldName.includes("email") || fieldName.includes("mail")) {
     return <Mail className="h-3.5 w-3.5 text-gray-500" />;
   }
-  if (fieldName.includes('id') || fieldName.includes('from')) {
+  if (fieldName.includes("id") || fieldName.includes("from")) {
     return <Hash className="h-3.5 w-3.5 text-gray-500" />;
   }
-  if (fieldName === 'enabled' || fieldName === 'consentGranted') {
+  if (fieldName === "enabled" || fieldName === "consentGranted") {
     return <ToggleLeft className="h-3.5 w-3.5 text-gray-500" />;
   }
   return <Settings className="h-3.5 w-3.5 text-gray-500" />;
@@ -46,79 +63,95 @@ export function ChannelFormFieldsSection({
   jsonDrafts,
   setJsonDrafts,
   updateField,
-  uiHints
+  uiHints,
 }: ChannelFormFieldsSectionProps) {
   return (
     <>
       {fields.map((field) => {
-        const hint = hintForPath(`channels.${channelName}.${field.name}`, uiHints);
+        const hint = hintForPath(
+          `channels.${channelName}.${field.name}`,
+          uiHints,
+        );
         const label = hint?.label ?? field.label;
         const placeholder = hint?.placeholder;
 
         return (
           <div key={field.name} className="space-y-2.5">
-            <Label htmlFor={field.name} className="flex items-center gap-2 text-sm font-medium text-gray-900">
+            <Label
+              htmlFor={field.name}
+              className="flex items-center gap-2 text-sm font-medium text-gray-900"
+            >
               {getFieldIcon(field.name)}
               {label}
             </Label>
 
-            {field.type === 'boolean' && (
+            {field.type === "boolean" && (
               <div className="flex items-center justify-between rounded-xl bg-gray-50 p-3">
                 <span className="text-sm text-gray-500">
-                  {(formData[field.name] as boolean) ? t('enabled') : t('disabled')}
+                  {(formData[field.name] as boolean)
+                    ? t("enabled")
+                    : t("disabled")}
                 </span>
                 <Switch
                   id={field.name}
                   checked={(formData[field.name] as boolean) || false}
-                  onCheckedChange={(checked) => updateField(field.name, checked)}
+                  onCheckedChange={(checked) =>
+                    updateField(field.name, checked)
+                  }
                   className="data-[state=checked]:bg-emerald-500"
                 />
               </div>
             )}
 
-            {(field.type === 'text' || field.type === 'email') && (
+            {(field.type === "text" || field.type === "email") && (
               <Input
                 id={field.name}
                 type={field.type}
-                value={(formData[field.name] as string) || ''}
-                onChange={(event) => updateField(field.name, event.target.value)}
+                value={(formData[field.name] as string) || ""}
+                onChange={(event) =>
+                  updateField(field.name, event.target.value)
+                }
                 placeholder={placeholder}
                 className="rounded-xl"
               />
             )}
 
-            {field.type === 'password' && (
+            {field.type === "password" && (
               <Input
                 id={field.name}
                 type="password"
-                value={(formData[field.name] as string) || ''}
-                onChange={(event) => updateField(field.name, event.target.value)}
-                placeholder={placeholder ?? t('leaveBlankToKeepUnchanged')}
+                value={(formData[field.name] as string) || ""}
+                onChange={(event) =>
+                  updateField(field.name, event.target.value)
+                }
+                placeholder={placeholder ?? t("leaveBlankToKeepUnchanged")}
                 className="rounded-xl"
               />
             )}
 
-            {field.type === 'number' && (
+            {field.type === "number" && (
               <Input
                 id={field.name}
                 type="number"
                 value={(formData[field.name] as number) || 0}
-                onChange={(event) => updateField(field.name, parseInt(event.target.value, 10) || 0)}
+                onChange={(event) =>
+                  updateField(field.name, parseInt(event.target.value, 10) || 0)
+                }
                 placeholder={placeholder}
                 className="rounded-xl"
               />
             )}
 
-            {field.type === 'tags' && (
+            {field.type === "tags" && (
               <TagInput
                 value={(formData[field.name] as string[]) || []}
                 onChange={(tags) => updateField(field.name, tags)}
               />
             )}
 
-            {field.type === 'select' && (
+            {field.type === "select" && (
               <Select
-                value={(formData[field.name] as string) || ''}
+                value={(formData[field.name] as string) || ""}
                 onValueChange={(value) => updateField(field.name, value)}
               >
                 <SelectTrigger className="rounded-xl">
@@ -134,14 +167,14 @@ export function ChannelFormFieldsSection({
               </Select>
             )}
 
-            {field.type === 'json' && (
+            {field.type === "json" && (
               <textarea
                 id={field.name}
-                value={jsonDrafts[field.name] ?? '{}'}
+                value={jsonDrafts[field.name] ?? "{}"}
                 onChange={(event) =>
                   setJsonDrafts((prev) => ({
                     ...prev,
-                    [field.name]: event.target.value
+                    [field.name]: event.target.value,
                   }))
                 }
                 className="min-h-[120px] w-full resize-none rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"

package/src/components/config/config-split-page.tsx

@@ -0,0 +1,109 @@
+import type { ButtonHTMLAttributes, HTMLAttributes } from "react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const CARD_CLASS =
+  "min-w-0 overflow-hidden rounded-2xl border border-gray-200/70 bg-white shadow-card xl:h-[calc(100vh-180px)] xl:max-h-[860px]";
+type DivProps = HTMLAttributes<HTMLDivElement>;
+type SectionProps = HTMLAttributes<HTMLElement>;
+
+function ConfigSplitPane({ className, ...props }: SectionProps) {
+  return <section className={cn(CARD_CLASS, "flex flex-col", className)} {...props} />;
+}
+
+export function ConfigSplitPage({ className, ...props }: DivProps) {
+  return (
+    <div
+      className={cn(
+        "grid min-h-0 grid-cols-1 gap-5 xl:flex-1 xl:grid-cols-[340px_minmax(0,1fr)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ConfigSplitPane as ConfigSplitSidebar, ConfigSplitPane as ConfigSplitDetailPane };
+
+export function ConfigSplitEmptyPane({ className, ...props }: SectionProps) {
+  return (
+    <section
+      className={cn(CARD_CLASS, "flex items-center justify-center px-6 py-12 text-center", className)}
+      {...props}
+    />
+  );
+}
+
+export function ConfigSplitPaneHeader({ className, ...props }: DivProps) {
+  return <div className={cn("shrink-0 border-b border-gray-100", className)} {...props} />;
+}
+
+export function ConfigSplitPaneBody({
+  className,
+  scrollOnDesktop = true,
+  ...props
+}: DivProps & { scrollOnDesktop?: boolean }) {
+  return (
+    <div
+      className={cn(
+        "min-h-0 flex-1",
+        scrollOnDesktop && "overflow-visible xl:overflow-y-auto xl:overscroll-contain",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ConfigSplitPaneFooter({ className, ...props }: DivProps) {
+  return <div className={cn("shrink-0 border-t border-gray-100", className)} {...props} />;
+}
+
+export function ConfigSelectionCard({
+  active = false,
+  className,
+  type = "button",
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> & { active?: boolean }) {
+  return (
+    <button
+      type={type}
+      className={cn(
+        "w-full rounded-xl border p-2.5 text-left transition-all",
+        active
+          ? "border-primary/30 bg-primary-50/40 shadow-sm"
+          : "border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ConfigSplitEmptyState({
+  icon: Icon,
+  title,
+  description,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-gray-200 bg-gray-50/70 px-4 py-10 text-center",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-white">
+        <Icon className="h-5 w-5 text-gray-300" />
+      </div>
+      <p className="text-sm font-medium text-gray-700">{title}</p>
+      {description ? <p className="mt-2 text-xs text-gray-500">{description}</p> : null}
+    </div>
+  );
+}

package/src/components/config/desktop-update-config.test.tsx

@@ -2,8 +2,8 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { DesktopUpdateConfig } from '@/components/config/desktop-update-config';
-import { useDesktopUpdateStore } from '@/desktop/stores/desktop-update.store';
 import { setLanguage } from '@/lib/i18n';
+import { useDesktopUpdateStore } from '@/platforms/desktop';
 
 const mocks = vi.hoisted(() => ({
   start: vi.fn(),
@@ -15,9 +15,15 @@ const mocks = vi.hoisted(() => ({
   updateChannel: vi.fn()
 }));
 
-vi.mock('@/desktop/managers/desktop-update.manager', () => ({
-  desktopUpdateManager: mocks
-}));
+vi.mock('@/platforms/desktop', async () => {
+  const actual = await vi.importActual<typeof import('@/platforms/desktop')>(
+    '@/platforms/desktop'
+  );
+  return {
+    ...actual,
+    desktopUpdateManager: mocks,
+  };
+});
 
 describe('DesktopUpdateConfig', () => {
   beforeEach(() => {

package/src/components/config/desktop-update-config.tsx

@@ -5,11 +5,13 @@ import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { PageHeader, PageLayout } from '@/components/layout/page-layout';
-import { desktopUpdateManager } from '@/desktop/managers/desktop-update.manager';
-import type { DesktopReleaseChannel } from '@/desktop/desktop-update.types';
-import { useDesktopUpdateStore } from '@/desktop/stores/desktop-update.store';
 import { formatDateTime, t } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
+import {
+  desktopUpdateManager,
+  type DesktopReleaseChannel,
+  useDesktopUpdateStore,
+} from '@/platforms/desktop';
 import { Download, ExternalLink, RefreshCw, RotateCw } from 'lucide-react';
 
 function formatVersion(value: string | null): string {

package/src/components/config/provider-enabled-field.tsx

@@ -1,6 +1,6 @@
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { t } from '@/lib/i18n';
+import { SettingRow } from "@/components/ui/setting-row";
+import { Switch } from "@/components/ui/switch";
+import { t } from "@/lib/i18n";
 
 type ProviderEnabledFieldProps = {
   enabled: boolean;
@@ -8,13 +8,20 @@ type ProviderEnabledFieldProps = {
 };
 
 export function ProviderEnabledField(props: ProviderEnabledFieldProps) {
+  const { enabled, onChange } = props;
+
   return (
-    <div className="flex items-center justify-between rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
-      <Label className="text-sm font-medium text-gray-900">{t('enabled')}</Label>
-      <div className="flex items-center gap-3">
-        <span className="text-xs text-gray-500">{props.enabled ? t('enabled') : t('disabled')}</span>
-        <Switch checked={props.enabled} onCheckedChange={props.onChange} />
-      </div>
-    </div>
+    <SettingRow
+      tone="muted"
+      title={t("enabled")}
+      control={
+        <div className="flex items-center gap-3">
+          <span className="text-xs text-gray-500">
+            {enabled ? t("enabled") : t("disabled")}
+          </span>
+          <Switch checked={enabled} onCheckedChange={onChange} />
+        </div>
+      }
+    />
   );
 }