feat(app): rename providers to connection, enhance UX

src/components/Settings/Sections/Models/Section.tsx

@@ -39,22 +39,50 @@ const Models = ({
       <div className="border-t border-light-200 dark:border-dark-200" />
       <div className="flex flex-row justify-between items-center px-6 ">
         <p className="text-xs lg:text-sm text-black/70 dark:text-white/70">
-          Manage model provider
+          Manage connections
         </p>
         <AddProvider modelProviders={fields} setProviders={setProviders} />
       </div>
       <div className="flex flex-col px-6 gap-y-4">
-        {providers.map((provider) => (
-          <ModelProvider
-            key={`provider-${provider.id}`}
-            fields={
-              (fields.find((f) => f.key === provider.type)?.fields ??
-                []) as UIConfigField[]
-            }
-            modelProvider={provider}
-            setProviders={setProviders}
-          />
-        ))}
+        {providers.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 px-4 rounded-lg border-2 border-dashed border-light-200 dark:border-dark-200 bg-light-secondary/10 dark:bg-dark-secondary/10">
+            <div className="p-3 rounded-full bg-sky-500/10 dark:bg-sky-500/10 mb-3">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-8 h-8 text-sky-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 10V3L4 14h7v7l9-11h-7z"
+                />
+              </svg>
+            </div>
+            <p className="text-sm font-medium text-black/70 dark:text-white/70 mb-1">
+              No connections yet
+            </p>
+            <p className="text-xs text-black/50 dark:text-white/50 text-center max-w-sm mb-4">
+              Add your first connection to start using AI models. Connect to
+              OpenAI, Anthropic, Ollama, and more.
+            </p>
+          </div>
+        ) : (
+          providers.map((provider) => (
+            <ModelProvider
+              key={`provider-${provider.id}`}
+              fields={
+                (fields.find((f) => f.key === provider.type)?.fields ??
+                  []) as UIConfigField[]
+              }
+              modelProvider={provider}
+              setProviders={setProviders}
+            />
+          ))
+        )}
       </div>
     </div>
   );