From 0aa0541958aa3563ac5e30d05fcb230089dd07de Mon Sep 17 00:00:00 2001
From: oabrivard <olivier@abrivard.fr>
Date: Thu, 26 Mar 2026 09:35:26 +0100
Subject: [PATCH] refactor: standardize createResource and use Button component

Convert LlmLogs from onMount+signals to createResource for idiomatic
reactive data fetching. Replace duplicated inline save/add button markup
in Settings and Sources with the shared Button component.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/LlmLogs.tsx  | 29 ++++++++---------------------
 frontend/src/pages/Settings.tsx | 17 +++++------------
 frontend/src/pages/Sources.tsx  | 17 +++++------------
 3 files changed, 18 insertions(+), 45 deletions(-)

diff --git a/frontend/src/pages/LlmLogs.tsx b/frontend/src/pages/LlmLogs.tsx
index b98d2a3..9288763 100644
--- a/frontend/src/pages/LlmLogs.tsx
+++ b/frontend/src/pages/LlmLogs.tsx
@@ -1,4 +1,4 @@
-import { type Component, createSignal, onMount, For, Show } from 'solid-js';
+import { type Component, createResource, For, Show } from 'solid-js';
 import { useParams, A } from '@solidjs/router';
 import { useI18n } from '~/i18n';
 import { llmLogsApi } from '~/api/llmLogs';
@@ -36,20 +36,7 @@ const LlmLogs: Component = () => {
   const { t } = useI18n();
   const params = useParams<{ jobId: string }>();
 
-  const [logs, setLogs] = createSignal<LlmCallLogEntry[]>([]);
-  const [loading, setLoading] = createSignal(true);
-  const [error, setError] = createSignal<string | null>(null);
-
-  onMount(async () => {
-    try {
-      const data = await llmLogsApi.getByJobId(params.jobId);
-      setLogs(data);
-    } catch {
-      setError(t('common.error'));
-    } finally {
-      setLoading(false);
-    }
-  });
+  const [logs] = createResource(() => params.jobId, llmLogsApi.getByJobId);
 
   return (
     <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -64,23 +51,23 @@ const LlmLogs: Component = () => {
 
       <h1 class="text-2xl font-bold text-gray-900 mb-6">{t('llmLogs.title')}</h1>
 
-      <Show when={!loading()} fallback={<LoadingSpinner />}>
-        <Show when={error()}>
+      <Show when={!logs.loading} fallback={<LoadingSpinner />}>
+        <Show when={logs.error}>
           <div class="bg-red-50 border border-red-200 rounded-md p-4 text-sm text-red-800">
-            {error()}
+            {t('common.error')}
           </div>
         </Show>
 
         <Show
-          when={logs().length > 0}
+          when={(logs() ?? []).length > 0}
           fallback={
-            <Show when={!error()}>
+            <Show when={!logs.error}>
               <p class="text-gray-500 text-sm">{t('llmLogs.empty')}</p>
             </Show>
           }
         >
           <div class="space-y-4">
-            <For each={logs()}>
+            <For each={logs() ?? []}>
               {(entry) => (
                 <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                   <div class="flex items-center gap-3 px-5 py-3 border-b border-gray-100 bg-gray-50">
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index c6f1751..3d54d33 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -8,6 +8,7 @@ import {
   createEffect,
 } from 'solid-js';
 import { Settings as SettingsIcon, Save, Plus, Trash2, Info, Download, Upload } from 'lucide-solid';
+import Button from '~/components/ui/Button';
 import { settingsApi } from '~/api/settings';
 import { configApi } from '~/api/config';
 import { apiKeysApi } from '~/api/apiKeys';
@@ -640,21 +641,13 @@ const Settings: Component = () => {
 
         {/* Save button */}
         <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-          <button
+          <Button
             onClick={handleSave}
-            disabled={saving()}
-            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+            loading={saving()}
+            icon={Save}
           >
-            <Show
-              when={!saving()}
-              fallback={
-                <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
-              }
-            >
-              <Save class="h-4 w-4 mr-2" />
-            </Show>
             {t('settings.save')}
-          </button>
+          </Button>
         </div>
       </div>
 
diff --git a/frontend/src/pages/Sources.tsx b/frontend/src/pages/Sources.tsx
index 19be72c..41aba23 100644
--- a/frontend/src/pages/Sources.tsx
+++ b/frontend/src/pages/Sources.tsx
@@ -13,6 +13,7 @@ import {
   Download,
   Upload,
 } from 'lucide-solid';
+import Button from '~/components/ui/Button';
 import { sourcesApi } from '~/api/sources';
 import { useI18n } from '~/i18n';
 import { isApiError } from '~/types';
@@ -307,21 +308,13 @@ const Sources: Component = () => {
                   onInput={(e) => setNewUrl(e.currentTarget.value)}
                 />
               </div>
-              <button
+              <Button
                 type="submit"
-                disabled={adding()}
-                class="inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+                loading={adding()}
+                icon={Plus}
               >
-                <Show
-                  when={!adding()}
-                  fallback={
-                    <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
-                  }
-                >
-                  <Plus class="-ml-1 mr-2 h-5 w-5" />
-                </Show>
                 {t('sources.add')}
-              </button>
+              </Button>
             </form>
             <Show when={addError()}>
               {(msg) => (