Merge pull request #205 from SWangHash/yjt_fix_settings_ui_main

fix: settings UI consistency — empty states, MCP layout, remove power…

Author: SWangHash

src/web-ui/src/infrastructure/config/components/AIModelConfig.scss

@@ -377,7 +377,7 @@
 
     border: 1px dashed var(--border-base);
     border-radius: $size-radius-sm;
-    background: transparent;
+    background: var(--element-bg-subtle);
 
     svg {
       opacity: 0.5;

src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss

@@ -241,7 +241,10 @@
   }
 
   &__empty {
-    padding: $size-gap-4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $size-gap-6 $size-gap-4;
     color: var(--color-text-muted);
     font-size: var(--font-size-sm);
     text-align: center;

src/web-ui/src/infrastructure/config/components/BasicsConfig.tsx

@@ -241,100 +241,6 @@ function BasicsAutoUpdateSection() {
   );
 }
 
-function BasicsPreventSleepSection() {
-  const { t } = useTranslation('settings/basics');
-  const isTauri = typeof window !== 'undefined' && '__TAURI__' in window;
-  const [enabled, setEnabled] = useState(false);
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
-
-  const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => {
-    setMessage({ type, text });
-    setTimeout(() => setMessage(null), 3000);
-  }, []);
-
-  useEffect(() => {
-    if (!isTauri) {
-      setLoading(false);
-      return;
-    }
-
-    let cancelled = false;
-    void (async () => {
-      try {
-        setLoading(true);
-        const value = await systemAPI.getPreventSleepEnabled();
-        if (!cancelled) {
-          setEnabled(value);
-        }
-      } catch (error) {
-        log.error('Failed to load prevent-sleep preference', error);
-        if (!cancelled) {
-          showMessage('error', t('preventSleep.messages.loadFailed'));
-        }
-      } finally {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [isTauri, showMessage, t]);
-
-  const handleToggle = useCallback(
-    async (next: boolean) => {
-      const previous = enabled;
-      setEnabled(next);
-      setSaving(true);
-      try {
-        await systemAPI.setPreventSleepEnabled(next);
-        showMessage('success', t('preventSleep.messages.saved'));
-      } catch (error) {
-        setEnabled(previous);
-        log.error('Failed to set prevent-sleep preference', { next, error });
-        showMessage('error', t('preventSleep.messages.saveFailed'));
-      } finally {
-        setSaving(false);
-      }
-    },
-    [enabled, showMessage, t]
-  );
-
-  if (!isTauri) {
-    return null;
-  }
-
-  if (loading) {
-    return <ConfigPageLoading text={t('preventSleep.messages.loading')} />;
-  }
-
-  return (
-    <ConfigPageSection
-      title={t('preventSleep.sections.title')}
-      description={t('preventSleep.sections.hint')}
-    >
-      <ConfigPageMessage message={message} />
-      <ConfigPageRow
-        label={t('preventSleep.toggleLabel')}
-        description={t('preventSleep.toggleDescription')}
-        align="center"
-      >
-        <Switch
-          checked={enabled}
-          onChange={(event) => {
-            void handleToggle(event.target.checked);
-          }}
-          disabled={saving}
-        />
-      </ConfigPageRow>
-    </ConfigPageSection>
-  );
-}
-
 function BasicsLoggingSection() {
   const { t } = useTranslation('settings/basics');
   const [configLevel, setConfigLevel] = useState<BackendLogLevel>('info');
@@ -1238,7 +1144,6 @@ const BasicsConfig: React.FC = () => {
       <ConfigPageHeader title={t('title')} subtitle={t('subtitle')} />
       <ConfigPageContent className="bitfun-basics-config__content">
         <BasicsLaunchAtLoginSection />
-        <BasicsPreventSleepSection />
         <BasicsAutoUpdateSection />
         <BasicsWindowBehaviorSection />
         <BasicsLoggingSection />

src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss

@@ -542,14 +542,18 @@
   }
 
   &__mcp-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-gap-2);
+    padding: var(--size-gap-6) var(--size-gap-4);
     color: var(--color-text-secondary);
-    font-size: 13px;
-    display: grid;
-    gap: 8px;
-    padding: 12px 0;
+    font-size: var(--font-size-sm);
+    text-align: center;
 
     code {
-      font-size: 12px;
+      font-size: var(--font-size-xs);
       color: var(--color-text-muted);
     }
   }

src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss

@@ -1,14 +1,9 @@
 @use '../../../component-library/styles/tokens' as *;
 
 .bitfun-mcp-tools {
-  .bitfun-collection-empty {
-    justify-content: flex-start;
-    padding: $size-gap-2 0;
-    font-size: var(--font-size-xs);
-  }
   // ─── JSON editor (MCP) ─────────────────────────────────────────────────────
   &__json-editor {
-    padding: $size-gap-3 0;
+    padding: $size-gap-3;
     border-bottom: 1px solid var(--border-subtle);
     display: flex;
     flex-direction: column;
@@ -40,7 +35,7 @@
 
   &__json-actions {
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     gap: $size-gap-2;
   }
 

src/web-ui/src/infrastructure/config/components/VoiceInputConfig.scss

@@ -283,7 +283,11 @@
   }
 
   &__empty {
-    color: var(--color-text-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $size-gap-6 $size-gap-4;
+    color: var(--color-text-muted);
     font-size: var(--font-size-sm);
   }
 }

src/web-ui/src/shared/notification-system/components/NotificationItem.scss

@@ -117,11 +117,11 @@
     transition: all $motion-base $easing-standard;
 
     &--primary {
-      background: var(--color-accent-600);
-      color: var(--color-text-primary);
+      background: color-mix(in srgb, var(--color-accent-500) 25%, var(--element-bg-base));
+      color: var(--color-accent-500);
 
       &:hover {
-        background: var(--color-accent-500);
+        background: color-mix(in srgb, var(--color-accent-500) 35%, var(--element-bg-base));
       }
 
       &:active {