chore: refactor packages/app files (#13236)

Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>
Co-authored-by: Frank <[email protected]>

1 files changed, 21 insertions, 14 deletions

diff --git a/packages/app/src/components/settings-models.tsx b/packages/app/src/components/settings-models.tsx
index 1807d561e..3a0b7a4fb 100644
--- a/packages/app/src/components/settings-models.tsx
+++ b/packages/app/src/components/settings-models.tsx
@@ -12,6 +12,25 @@ import { popularProviders } from "@/hooks/use-providers"
 
 type ModelItem = ReturnType<ReturnType<typeof useModels>["list"]>[number]
 
+const ListLoadingState: Component<{ label: string }> = (props) => {
+  return (
+    <div class="flex flex-col items-center justify-center py-12 text-center">
+      <span class="text-14-regular text-text-weak">{props.label}</span>
+    </div>
+  )
+}
+
+const ListEmptyState: Component<{ message: string; filter: string }> = (props) => {
+  return (
+    <div class="flex flex-col items-center justify-center py-12 text-center">
+      <span class="text-14-regular text-text-weak">{props.message}</span>
+      <Show when={props.filter}>
+        <span class="text-14-regular text-text-strong mt-1">&quot;{props.filter}&quot;</span>
+      </Show>
+    </div>
+  )
+}
+
 export const SettingsModels: Component = () => {
   const language = useLanguage()
   const models = useModels()
@@ -68,24 +87,12 @@ export const SettingsModels: Component = () => {
         <Show
           when={!list.grouped.loading}
           fallback={
-            <div class="flex flex-col items-center justify-center py-12 text-center">
-              <span class="text-14-regular text-text-weak">
-                {language.t("common.loading")}
-                {language.t("common.loading.ellipsis")}
-              </span>
-            </div>
+            <ListLoadingState label={`${language.t("common.loading")}${language.t("common.loading.ellipsis")}`} />
           }
         >
           <Show
             when={list.flat().length > 0}
-            fallback={
-              <div class="flex flex-col items-center justify-center py-12 text-center">
-                <span class="text-14-regular text-text-weak">{language.t("dialog.model.empty")}</span>
-                <Show when={list.filter()}>
-                  <span class="text-14-regular text-text-strong mt-1">&quot;{list.filter()}&quot;</span>
-                </Show>
-              </div>
-            }
+            fallback={<ListEmptyState message={language.t("dialog.model.empty")} filter={list.filter()} />}
           >
             <For each={list.grouped.latest}>
               {(group) => (