@yancyyu/openhermit 1.5.8

package/src/renderer/components/settings/SettingsView.tsx

@@ -0,0 +1,153 @@
+/**
+ * SettingsView - Main settings panel with all app configuration options.
+ * Provides UI for managing runtime, channels, and advanced options.
+ */
+
+import { useEffect, useState } from 'react';
+
+import { useStore } from '@renderer/store';
+import { Loader2 } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { useSettingsConfig, useSettingsHandlers } from './hooks';
+import { AdvancedSection, GeneralSection, HarnessSection, PlatformsSection } from './sections';
+import { type SettingsSection, SettingsTabs } from './SettingsTabs';
+
+export const SettingsView = (): React.JSX.Element | null => {
+  const [activeSection, setActiveSection] = useState<SettingsSection>('general');
+  const { pendingSettingsSection, clearPendingSettingsSection } = useStore(
+    useShallow((s) => ({
+      pendingSettingsSection: s.pendingSettingsSection,
+      clearPendingSettingsSection: s.clearPendingSettingsSection,
+    }))
+  );
+
+  // Consume pending section (avoid setState during render)
+  useEffect(() => {
+    if (pendingSettingsSection) {
+      const nextSection: SettingsSection =
+        pendingSettingsSection === 'channels' ||
+        pendingSettingsSection === 'harness' ||
+        pendingSettingsSection === 'advanced'
+          ? pendingSettingsSection
+          : 'general';
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional sync on prop change
+      setActiveSection(nextSection);
+      clearPendingSettingsSection();
+    }
+  }, [pendingSettingsSection, clearPendingSettingsSection]);
+
+  const {
+    config,
+    safeConfig,
+    loading,
+    saving,
+    error,
+    setError,
+    setSaving,
+    setConfig,
+    setOptimisticConfig,
+    updateConfig,
+  } = useSettingsConfig();
+
+  const handlers = useSettingsHandlers({
+    config,
+    setSaving,
+    setError,
+    setConfig,
+    setOptimisticConfig,
+    updateConfig,
+  });
+
+  // Loading state
+  if (loading) {
+    return (
+      <div
+        className="flex flex-1 items-center justify-center"
+        style={{ backgroundColor: 'var(--color-surface)' }}
+      >
+        <div className="flex items-center gap-3" style={{ color: 'var(--color-text-muted)' }}>
+          <Loader2 className="size-5 animate-spin" />
+          <span>正在加载设置...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error && !config) {
+    return (
+      <div
+        className="flex flex-1 items-center justify-center"
+        style={{ backgroundColor: 'var(--color-surface)' }}
+      >
+        <div className="text-center">
+          <p className="mb-4 text-red-400">{error}</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="rounded-md px-4 py-2 transition-colors"
+            style={{
+              backgroundColor: 'var(--color-surface-raised)',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            重试
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!config) return null;
+
+  return (
+    <div className="flex-1 overflow-auto" style={{ backgroundColor: 'var(--color-surface)' }}>
+      <div className="mx-auto max-w-2xl px-6 py-8">
+        {/* Header */}
+        <div className="mb-6">
+          <h1 className="text-lg font-medium" style={{ color: 'var(--color-text)' }}>
+            设置
+          </h1>
+          <p className="text-sm" style={{ color: 'var(--color-text-muted)' }}>
+            管理应用偏好设置
+          </p>
+          {error && (
+            <div className="mt-4 rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2">
+              <p className="text-sm text-red-400">{error}</p>
+            </div>
+          )}
+        </div>
+
+        {/* Tabs */}
+        <SettingsTabs activeSection={activeSection} onSectionChange={setActiveSection} />
+
+        {/* Content */}
+        <div className="mt-4">
+          {activeSection === 'general' && (
+            <GeneralSection
+              safeConfig={safeConfig}
+              saving={saving}
+              onGeneralToggle={handlers.handleGeneralToggle}
+              onThemeChange={handlers.handleThemeChange}
+              onLanguageChange={handlers.handleLanguageChange}
+            />
+          )}
+
+          {activeSection === 'channels' && <PlatformsSection />}
+
+          {activeSection === 'harness' && <HarnessSection />}
+
+          {activeSection === 'advanced' && (
+            <AdvancedSection
+              saving={saving}
+              onResetToDefaults={handlers.handleResetToDefaults}
+              onExportConfig={handlers.handleExportConfig}
+              onImportConfig={handlers.handleImportConfig}
+              onOpenInEditor={handlers.handleOpenInEditor}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/settings/components/SettingRow.tsx

@@ -0,0 +1,44 @@
+/**
+ * SettingRow - Setting row component for consistent layout.
+ * Linear-style clean row with optional icon.
+ */
+
+interface SettingRowProps {
+  readonly label: string;
+  readonly description?: string;
+  readonly icon?: React.ReactNode;
+  readonly children: React.ReactNode;
+}
+
+export const SettingRow = ({
+  label,
+  description,
+  icon,
+  children,
+}: SettingRowProps): React.JSX.Element => {
+  return (
+    <div
+      className="flex items-center justify-between border-b py-3"
+      style={{ borderColor: 'var(--color-border-subtle)' }}
+    >
+      <div className="flex items-start gap-2.5">
+        {icon ? (
+          <div className="mt-0.5 shrink-0" style={{ color: 'var(--color-text-muted)' }}>
+            {icon}
+          </div>
+        ) : null}
+        <div>
+          <div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
+            {label}
+          </div>
+          {description && (
+            <div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+              {description}
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="shrink-0">{children}</div>
+    </div>
+  );
+};

package/src/renderer/components/settings/components/SettingsSectionHeader.tsx

@@ -0,0 +1,24 @@
+/**
+ * SettingsSectionHeader - Section header component.
+ * Linear-style subtle label with optional icon.
+ */
+
+interface SettingsSectionHeaderProps {
+  readonly title: string;
+  readonly icon?: React.ReactNode;
+}
+
+export const SettingsSectionHeader = ({
+  title,
+  icon,
+}: SettingsSectionHeaderProps): React.JSX.Element => {
+  return (
+    <h3
+      className="mb-2 mt-6 flex items-center gap-1.5 text-xs font-medium uppercase tracking-widest first:mt-0"
+      style={{ color: 'var(--color-text-muted)' }}
+    >
+      {icon}
+      {title}
+    </h3>
+  );
+};

package/src/renderer/components/settings/components/SettingsSelect.tsx

@@ -0,0 +1,100 @@
+/**
+ * SettingsSelect - Custom dropdown select component with styled dropdown menu.
+ * Avoids browser default select styling for a consistent dark theme experience.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+
+import { Check, ChevronDown } from 'lucide-react';
+
+interface SettingsSelectProps<T extends string | number> {
+  readonly value: T;
+  readonly options: readonly { value: T; label: string }[];
+  readonly onChange: (value: T) => void;
+  readonly disabled?: boolean;
+  readonly dropUp?: boolean;
+  /** When true, trigger spans full width and dropdown aligns left */
+  readonly fullWidth?: boolean;
+}
+
+export const SettingsSelect = <T extends string | number>({
+  value,
+  options,
+  onChange,
+  disabled = false,
+  dropUp = false,
+  fullWidth = false,
+}: SettingsSelectProps<T>): React.JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Find current label
+  const currentLabel = options.find((opt) => opt.value === value)?.label ?? 'Select...';
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent): void => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen]);
+
+  const handleSelect = (optionValue: T): void => {
+    onChange(optionValue);
+    setIsOpen(false);
+  };
+
+  return (
+    <div ref={containerRef} className="relative">
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`flex h-8 items-center justify-between gap-2 rounded-md border bg-transparent px-2 text-sm transition-all duration-150 focus:outline-none focus:ring-1 focus:ring-zinc-700 ${fullWidth ? 'w-full' : 'min-w-[140px]'} ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${isOpen ? 'ring-1 ring-zinc-700' : ''} `}
+        style={{
+          color: 'var(--color-text-secondary)',
+          borderColor: isOpen ? 'var(--color-border)' : 'var(--color-border-subtle)',
+        }}
+      >
+        <span className="truncate">{currentLabel}</span>
+        <ChevronDown
+          className={`size-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+          style={{ color: 'var(--color-text-muted)' }}
+        />
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div
+          className={`absolute z-50 min-w-max overflow-hidden rounded-md border py-1 shadow-xl shadow-black/20 ${fullWidth ? 'inset-x-0' : 'right-0'} ${dropUp ? 'bottom-full mb-1' : 'top-full mt-1'}`}
+          style={{
+            backgroundColor: 'var(--color-surface-raised)',
+            borderColor: 'var(--color-border-subtle)',
+          }}
+        >
+          {options.map((option) => (
+            <button
+              key={String(option.value)}
+              type="button"
+              onClick={() => handleSelect(option.value)}
+              className={`flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm transition-colors duration-100 ${
+                value === option.value ? 'bg-indigo-500/10 text-indigo-400' : 'hover:bg-white/5'
+              } `}
+              style={value !== option.value ? { color: 'var(--color-text-secondary)' } : undefined}
+            >
+              <span className="whitespace-nowrap">{option.label}</span>
+              {value === option.value && <Check className="size-4 shrink-0 text-indigo-400" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/settings/components/SettingsToggle.tsx

@@ -0,0 +1,45 @@
+/**
+ * SettingsToggle - Toggle switch component for boolean settings.
+ * Linear-style design with white thumb and focus ring.
+ */
+
+interface SettingsToggleProps {
+  readonly enabled: boolean;
+  readonly onChange: (value: boolean) => void;
+  readonly disabled?: boolean;
+}
+
+export const SettingsToggle = ({
+  enabled,
+  onChange,
+  disabled = false,
+}: SettingsToggleProps): React.JSX.Element => {
+  const handleClick = (): void => {
+    if (!disabled) {
+      onChange(!enabled);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={enabled}
+      disabled={disabled}
+      onClick={handleClick}
+      className="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-[#141416]"
+      style={{
+        backgroundColor: enabled ? '#6366f1' : '#3f3f46',
+        opacity: disabled ? 0.5 : 1,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+      }}
+    >
+      <span
+        className="pointer-events-none inline-block size-4 rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+        style={{
+          transform: enabled ? 'translateX(1rem)' : 'translateX(0)',
+        }}
+      />
+    </button>
+  );
+};

package/src/renderer/components/settings/components/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Settings shared components barrel export.
+ */
+
+export { SettingRow } from './SettingRow';
+export { SettingsSectionHeader } from './SettingsSectionHeader';
+export { SettingsSelect } from './SettingsSelect';
+export { SettingsToggle } from './SettingsToggle';

package/src/renderer/components/settings/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Settings hooks barrel export.
+ */
+
+export { useSettingsConfig } from './useSettingsConfig';
+export { useSettingsHandlers } from './useSettingsHandlers';

package/src/renderer/components/settings/hooks/useSettingsConfig.ts

@@ -0,0 +1,270 @@
+/**
+ * useSettingsConfig - Hook for managing settings configuration state.
+ * Handles loading, saving, and providing safe defaults for config.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { api } from '@renderer/api';
+import { useStore } from '@renderer/store';
+import { useShallow } from 'zustand/react/shallow';
+
+import type { AppConfig } from '@renderer/types/data';
+
+// Get the setState function from the store to update appConfig globally
+const setStoreState = useStore.setState;
+
+/** Repository item for ignored repositories list */
+export interface RepositoryDropdownItem {
+  id: string;
+  name: string;
+  path: string;
+  worktreeCount: number;
+  totalSessions: number;
+}
+
+export interface SafeConfig {
+  general: {
+    launchAtLogin: boolean;
+    showDockIcon: boolean;
+    theme: 'dark' | 'light' | 'system';
+    defaultTab: 'dashboard' | 'last-session';
+    multimodelEnabled: boolean;
+    claudeRootPath: string | null;
+    agentLanguage: string;
+    autoExpandAIGroups: boolean;
+    useNativeTitleBar: boolean;
+    telemetryEnabled: boolean;
+  };
+  notifications: {
+    enabled: boolean;
+    soundEnabled: boolean;
+    ignoredRegex: string[];
+    ignoredRepositories: string[];
+    snoozedUntil: number | null;
+    snoozeMinutes: number;
+    includeSubagentErrors: boolean;
+    notifyOnLeadInbox: boolean;
+    notifyOnUserInbox: boolean;
+    notifyOnClarifications: boolean;
+    notifyOnStatusChange: boolean;
+    notifyOnTaskComments: boolean;
+    notifyOnTaskCreated: boolean;
+    notifyOnAllTasksCompleted: boolean;
+    notifyOnCrossTeamMessage: boolean;
+    notifyOnTeamLaunched: boolean;
+    notifyOnToolApproval: boolean;
+    autoResumeOnRateLimit: boolean;
+    statusChangeOnlySolo: boolean;
+    statusChangeStatuses: string[];
+    triggers: AppConfig['notifications']['triggers'];
+  };
+  display: {
+    showTimestamps: boolean;
+    compactMode: boolean;
+    syntaxHighlighting: boolean;
+  };
+}
+
+interface UseSettingsConfigReturn {
+  config: AppConfig | null;
+  safeConfig: SafeConfig;
+  loading: boolean;
+  saving: boolean;
+  error: string | null;
+  setError: (error: string | null) => void;
+  setSaving: (saving: boolean) => void;
+  setConfig: (config: AppConfig | null) => void;
+  setOptimisticConfig: React.Dispatch<React.SetStateAction<AppConfig | null>>;
+  updateConfig: (
+    section: keyof AppConfig,
+    data: Partial<AppConfig[keyof AppConfig]>
+  ) => Promise<void>;
+  ignoredRepositoryItems: RepositoryDropdownItem[];
+  excludedRepositoryIds: string[];
+  isSnoozed: boolean;
+}
+
+export function useSettingsConfig(): UseSettingsConfigReturn {
+  const { repositoryGroups, fetchRepositoryGroups } = useStore(
+    useShallow((s) => ({
+      repositoryGroups: s.repositoryGroups,
+      fetchRepositoryGroups: s.fetchRepositoryGroups,
+    }))
+  );
+
+  const [config, setConfig] = useState<AppConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Local optimistic state for immediate visual feedback on toggles
+  const [optimisticConfig, setOptimisticConfig] = useState<AppConfig | null>(null);
+
+  // Fetch config on mount
+  useEffect(() => {
+    const loadConfig = async (): Promise<void> => {
+      try {
+        setLoading(true);
+        setError(null);
+        const loadedConfig = await api.config.get();
+        setConfig(loadedConfig);
+        setOptimisticConfig(loadedConfig);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load settings');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void loadConfig();
+  }, []);
+
+  // Fetch repository groups for ignored repositories dropdown
+  useEffect(() => {
+    if (repositoryGroups.length === 0) {
+      void fetchRepositoryGroups();
+    }
+  }, [repositoryGroups.length, fetchRepositoryGroups]);
+
+  // Update a config section with optimistic update for immediate UI feedback
+  const updateConfig = useCallback(
+    async (section: keyof AppConfig, data: Partial<AppConfig[keyof AppConfig]>) => {
+      // Optimistic update - immediately reflect the change in UI
+      setOptimisticConfig((prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          [section]: {
+            ...prev[section],
+            ...data,
+          },
+        };
+      });
+
+      try {
+        setSaving(true);
+        const updatedConfig = await api.config.update(section, data as object);
+        setConfig(updatedConfig);
+        setOptimisticConfig(updatedConfig);
+        // Update global store so other components (like useTheme) see the change
+        setStoreState({ appConfig: updatedConfig });
+      } catch (err) {
+        // Revert optimistic update on error
+        setOptimisticConfig(config);
+        setError(err instanceof Error ? err.message : 'Failed to save settings');
+      } finally {
+        setSaving(false);
+      }
+    },
+    [config]
+  );
+
+  // Use optimistic config for UI display (falls back to config if not set)
+  const displayConfig = optimisticConfig ?? config;
+
+  // Create safe config with defaults to prevent null reference errors
+  const safeConfig = useMemo(
+    (): SafeConfig => ({
+      general: {
+        launchAtLogin: displayConfig?.general?.launchAtLogin ?? false,
+        showDockIcon: displayConfig?.general?.showDockIcon ?? true,
+        theme: displayConfig?.general?.theme ?? 'dark',
+        defaultTab: displayConfig?.general?.defaultTab ?? 'dashboard',
+        multimodelEnabled: displayConfig?.general?.multimodelEnabled ?? false,
+        claudeRootPath: displayConfig?.general?.claudeRootPath ?? null,
+        agentLanguage: displayConfig?.general?.agentLanguage ?? 'system',
+        autoExpandAIGroups: displayConfig?.general?.autoExpandAIGroups ?? false,
+        useNativeTitleBar: displayConfig?.general?.useNativeTitleBar ?? false,
+        telemetryEnabled: displayConfig?.general?.telemetryEnabled ?? true,
+      },
+      notifications: {
+        enabled: displayConfig?.notifications?.enabled ?? true,
+        soundEnabled: displayConfig?.notifications?.soundEnabled ?? true,
+        ignoredRegex: displayConfig?.notifications?.ignoredRegex ?? [],
+        ignoredRepositories: displayConfig?.notifications?.ignoredRepositories ?? [],
+        snoozedUntil: displayConfig?.notifications?.snoozedUntil ?? null,
+        snoozeMinutes: displayConfig?.notifications?.snoozeMinutes ?? 30,
+        includeSubagentErrors: displayConfig?.notifications?.includeSubagentErrors ?? false,
+        notifyOnLeadInbox: displayConfig?.notifications?.notifyOnLeadInbox ?? false,
+        notifyOnUserInbox: displayConfig?.notifications?.notifyOnUserInbox ?? true,
+        notifyOnClarifications: displayConfig?.notifications?.notifyOnClarifications ?? true,
+        notifyOnStatusChange: displayConfig?.notifications?.notifyOnStatusChange ?? true,
+        notifyOnTaskComments: displayConfig?.notifications?.notifyOnTaskComments ?? true,
+        notifyOnTaskCreated: displayConfig?.notifications?.notifyOnTaskCreated ?? true,
+        notifyOnAllTasksCompleted: displayConfig?.notifications?.notifyOnAllTasksCompleted ?? true,
+        notifyOnCrossTeamMessage: displayConfig?.notifications?.notifyOnCrossTeamMessage ?? true,
+        notifyOnTeamLaunched: displayConfig?.notifications?.notifyOnTeamLaunched ?? true,
+        notifyOnToolApproval: displayConfig?.notifications?.notifyOnToolApproval ?? true,
+        autoResumeOnRateLimit: displayConfig?.notifications?.autoResumeOnRateLimit ?? false,
+        statusChangeOnlySolo: displayConfig?.notifications?.statusChangeOnlySolo ?? true,
+        statusChangeStatuses: displayConfig?.notifications?.statusChangeStatuses ?? [
+          'in_progress',
+          'completed',
+        ],
+        triggers: displayConfig?.notifications?.triggers ?? [],
+      },
+      display: {
+        showTimestamps: displayConfig?.display?.showTimestamps ?? true,
+        compactMode: displayConfig?.display?.compactMode ?? false,
+        syntaxHighlighting: displayConfig?.display?.syntaxHighlighting ?? true,
+      },
+    }),
+    [displayConfig]
+  );
+
+  // Convert ignored repository IDs to RepositoryDropdownItem[] for display
+  const ignoredRepositoryItems = useMemo((): RepositoryDropdownItem[] => {
+    const items: RepositoryDropdownItem[] = [];
+    const ignoredRepositories = safeConfig.notifications.ignoredRepositories;
+
+    for (const repositoryId of ignoredRepositories) {
+      // Find repository group by ID
+      const group = repositoryGroups.find((g) => g.id === repositoryId);
+      if (group) {
+        items.push({
+          id: group.id,
+          name: group.name,
+          path: group.worktrees[0]?.path ?? '',
+          worktreeCount: group.worktrees.length,
+          totalSessions: group.totalSessions,
+        });
+      } else {
+        // If not found, create a placeholder item
+        items.push({
+          id: repositoryId,
+          name: repositoryId,
+          path: '',
+          worktreeCount: 0,
+          totalSessions: 0,
+        });
+      }
+    }
+
+    return items;
+  }, [safeConfig.notifications.ignoredRepositories, repositoryGroups]);
+
+  // Get excluded repository IDs for dropdown
+  const excludedRepositoryIds = safeConfig.notifications.ignoredRepositories;
+
+  // Check if snoozed
+  const isSnoozed =
+    safeConfig.notifications.snoozedUntil !== null &&
+    safeConfig.notifications.snoozedUntil > Date.now();
+
+  return {
+    config,
+    safeConfig,
+    loading,
+    saving,
+    error,
+    setError,
+    setSaving,
+    setConfig,
+    setOptimisticConfig,
+    updateConfig,
+    ignoredRepositoryItems,
+    excludedRepositoryIds,
+    isSnoozed,
+  };
+}