chore(ui): improve navigation and buttons placement

core/http/static/general.css

@@ -39,6 +39,11 @@ body {
   background-color: var(--color-bg-primary);
 }
 
+/* Pages without sidebar (e.g. login): center content */
+.app-layout.no-sidebar .main-content {
+  margin-left: 0;
+}
+
 /* Chat page: fix viewport height so messages scroll and input stays fixed at bottom */
 .app-layout.chat-layout {
   height: 100vh;

core/http/views/404.html

@@ -19,15 +19,13 @@ <h1 class="hero-title mb-4">
                     404 - Page Not Found
                 </h1>
                 <p class="text-xl text-[var(--color-text-secondary)] mb-6">The page you're looking for doesn't exist or has been moved</p>
-                <div class="flex flex-wrap justify-center gap-4">
-                    <a href="./" 
-                       class="btn-primary">
-                        <i class="fas fa-home mr-2"></i>
+                <div class="flex flex-wrap justify-center gap-2">
+                    <a href="./" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-home"></i>
                         <span>Return Home</span>
                     </a>
-                    <a href="browse/"
-                       class="btn-secondary">
-                        <i class="fas fa-images mr-2"></i>
+                    <a href="browse/" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-images"></i>
                         <span>Browse Gallery</span>
                     </a>
                 </div>

core/http/views/agent-job-details.html

@@ -39,11 +39,11 @@ <h2 class="text-2xl font-semibold text-[var(--color-text-primary)]">Job Status</
                     }" 
                     class="px-4 py-2 rounded-lg text-sm font-semibold text-white" 
                     x-text="job.status ? job.status.toUpperCase() : 'LOADING...'"></span>
-                    <button x-show="job.status === 'pending' || job.status === 'running'" 
+                    <button type="button" x-show="job.status === 'pending' || job.status === 'running'" 
                             @click="cancelJob()" 
-                            class="btn-primary"
-                            style="background: var(--color-error);">
-                        <i class="fas fa-stop mr-2"></i>Cancel
+                            class="inline-flex items-center gap-1.5 text-xs text-red-400/90 hover:text-red-400 bg-transparent hover:bg-red-500/10 border border-[var(--color-border-subtle)] hover:border-red-500/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-stop"></i>
+                        <span>Cancel</span>
                     </button>
                 </div>
             </div>

core/http/views/backends.html

@@ -61,10 +61,10 @@ <h1 class="hero-title">
                         <span class="text-[var(--color-text-secondary)] mr-1">Capability:</span>
                         <span class="font-semibold text-[var(--color-primary)]" x-text="systemCapability"></span>
                     </div>
-                    <a href="https://localai.io/backends/" target="_blank" class="btn-primary">
-                        <i class="fas fa-info-circle mr-2"></i>
+                    <a href="https://localai.io/backends/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-info-circle"></i>
                         <span>Documentation</span>
-                        <i class="fas fa-external-link-alt ml-2 text-xs"></i>
+                        <i class="fas fa-external-link-alt text-[10px]"></i>
                     </a>
                 </div>
             </div>
@@ -119,12 +119,12 @@ <h3 class="text-lg font-semibold text-[var(--color-text-primary)]">Install Backe
                 </div>
 
                 <div class="flex items-center gap-4">
-                    <button 
+                    <button type="button"
                         @click="installExternalBackend()"
                         :disabled="installingExternal || !externalBackend.uri"
-                        class="btn-primary"
+                        class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--color-border-subtle)]"
                     >
-                        <i class="mr-2" :class="installingExternal ? 'fas fa-spinner fa-spin' : 'fas fa-download'"></i>
+                        <i class="text-[10px]" :class="installingExternal ? 'fas fa-spinner fa-spin' : 'fas fa-download'"></i>
                         <span x-text="installingExternal ? 'Installing...' : 'Install Backend'"></span>
                     </button>
                     <span x-show="externalBackendProgress" class="text-sm text-[var(--color-text-secondary)]" x-text="externalBackendProgress"></span>

core/http/views/error.html

@@ -19,15 +19,13 @@ <h1 class="hero-title mb-4" style="color: var(--color-error);">
                     {{if .ErrorCode}}{{.ErrorCode}}{{else}}Error{{end}}
                 </h1>
                 <p class="text-xl text-[var(--color-text-secondary)] mb-6">{{if .ErrorMessage}}{{.ErrorMessage}}{{else}}An unexpected error occurred{{end}}</p>
-                <div class="flex flex-wrap justify-center gap-4">
-                    <a href="./" 
-                       class="btn-primary">
-                        <i class="fas fa-home mr-2"></i>
+                <div class="flex flex-wrap justify-center gap-2">
+                    <a href="./" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-home"></i>
                         <span>Return Home</span>
                     </a>
-                    <a href="browse/"
-                       class="btn-secondary">
-                        <i class="fas fa-images mr-2"></i>
+                    <a href="browse/" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                        <i class="fas fa-images"></i>
                         <span>Browse Gallery</span>
                     </a>
                 </div>

core/http/views/explorer.html

@@ -195,9 +195,8 @@ <h1 class="hero-title">
         </div>
             <div class="flow-root">
             <!-- Toggle button for showing/hiding the form -->
-            <button class="btn-primary float-right mb-2" @click="toggleForm()">
-                <!-- Conditional icon display -->
-                <i :class="showForm ? 'fa-solid fa-times' : 'fa-solid fa-plus'" class="mr-2"></i>
+            <button type="button" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors float-right mb-2" @click="toggleForm()">
+                <i :class="showForm ? 'fa-solid fa-times' : 'fa-solid fa-plus'"></i>
                 <span x-text="showForm ? 'Close' : 'Add New Network'"></span>
             </button>
         </div>
@@ -216,7 +215,7 @@ <h2 class="h2"><i class="fa-solid fa-plus"></i> Add New Network</h2>
                     <label for="token">Token</label>
                     <textarea id="token" x-model="newNetwork.token" placeholder="Enter token" class="input"></textarea>
                 </div>
-                <button @click="addNetwork" class="btn-primary"><i class="fa-solid fa-plus"></i> Add Network</button>
+                <button type="button" @click="addNetwork" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors"><i class="fa-solid fa-plus"></i> <span>Add Network</span></button>
                 <template x-if="errorMessage">
                     <p class="error" x-text="errorMessage"></p>
                 </template>

core/http/views/index.html

@@ -87,19 +87,19 @@ <h3 class="text-lg font-bold text-[var(--color-text-primary)] mb-4 flex items-ce
                 </div>
             </div>
 
-            <div class="flex flex-wrap justify-center gap-4 mb-8">
-                <a href="/browse/" class="btn-primary">
-                    <i class="fas fa-images mr-2"></i>
-                    Browse Model Gallery
+            <div class="flex flex-wrap justify-center gap-2 mb-8">
+                <a href="/browse/" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                    <i class="fas fa-images"></i>
+                    <span>Browse Model Gallery</span>
                 </a>
-                <a href="/import-model" class="btn-primary">
-                    <i class="fas fa-upload mr-2"></i>
-                    Import Model
+                <a href="/import-model" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                    <i class="fas fa-upload"></i>
+                    <span>Import Model</span>
                 </a>
-                <a href="https://localai.io/basics/getting_started/" target="_blank" class="btn-secondary">
-                    <i class="fas fa-graduation-cap mr-2"></i>
-                    Getting Started
-                    <i class="fas fa-external-link-alt ml-2 text-sm"></i>
+                <a href="https://localai.io/basics/getting_started/" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                    <i class="fas fa-graduation-cap"></i>
+                    <span>Getting Started</span>
+                    <i class="fas fa-external-link-alt text-[10px]"></i>
                 </a>
             </div>
             {{ else }}

core/http/views/login.html

@@ -3,7 +3,7 @@
 {{template "views/partials/head" .}}
 
 <body class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">
-<div class="app-layout">
+<div class="app-layout no-sidebar">
   <main class="main-content">
     <div class="main-content-inner">
 
@@ -44,11 +44,9 @@ <h2 class="h2">
                     </div>
 
                     <div>
-                        <button 
-                            type="submit" 
-                            class="btn-primary w-full"
-                        >
-                            <i class="fas fa-sign-in-alt mr-2"></i>
+                        <button type="submit"
+                            class="inline-flex items-center justify-center gap-1.5 w-full text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] bg-transparent hover:bg-[var(--color-primary)]/10 border border-[var(--color-border-subtle)] hover:border-[var(--color-primary)]/30 rounded-md py-1.5 px-2.5 transition-colors">
+                            <i class="fas fa-sign-in-alt"></i>
                             <span>Login</span>
                         </button>
                     </div>