Merge pull request #37 from scub-france/feature/ui-polish

Feature/UI polish

frontend/src/features/history/ui/HistoryList.vue

@@ -13,7 +13,14 @@
         <div class="item-main">
           <div class="item-header">
             <span class="item-filename">{{ analysis.documentFilename }}</span>
-            <span class="item-status" :class="statusClass(analysis.status)">
+            <span
+              v-if="analysis.status === 'COMPLETED'"
+              class="item-status status-completed"
+              :title="analysis.status"
+            >
+              <svg class="status-dot" viewBox="0 0 8 8" fill="currentColor"><circle cx="4" cy="4" r="4"/></svg>
+            </span>
+            <span v-else class="item-status" :class="statusClass(analysis.status)">
               {{ analysis.status }}
             </span>
           </div>
@@ -81,20 +88,26 @@ function duration(analysis: Analysis) {
 .history-items {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 6px;
+  padding: 12px;
 }
 
 .history-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 20px;
+  padding: 12px 16px;
-  border-bottom: 1px solid var(--border);
+  background: var(--bg-surface);
-  transition: background var(--transition);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  transition: all 150ms ease;
   cursor: pointer;
 }
 
-.history-item:hover { background: var(--bg-hover); }
+.history-item:hover {
+  border-color: var(--accent);
+  background: var(--bg-elevated);
+}
 
 .item-main { flex: 1; min-width: 0; }
 
@@ -122,9 +135,14 @@ function duration(analysis: Analysis) {
   flex-shrink: 0;
 }
 
+.status-dot {
+  width: 8px;
+  height: 8px;
+}
+
 .status-pending { background: rgba(234, 179, 8, 0.15); color: var(--warning); }
 .status-running { background: rgba(59, 130, 246, 0.15); color: var(--info); }
-.status-completed { background: rgba(34, 197, 94, 0.15); color: var(--success); }
+.status-completed { background: none; color: var(--success); padding: 0; }
 .status-failed { background: rgba(239, 68, 68, 0.15); color: var(--error); }
 
 .item-meta {

frontend/src/features/settings/ui/SettingsPanel.vue

@@ -40,14 +40,14 @@ const { t } = useI18n()
 .settings-panel {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 24px;
-  max-width: 500px;
+  max-width: 320px;
 }
 
 .setting-group {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 
 .setting-label {
@@ -59,33 +59,36 @@ const { t } = useI18n()
 }
 
 .setting-toggle {
-  display: flex;
+  display: inline-flex;
+  gap: 2px;
   background: var(--bg-elevated);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
-  overflow: hidden;
+  padding: 3px;
+  width: fit-content;
 }
 
 .setting-toggle button {
-  flex: 1;
+  padding: 6px 16px;
-  padding: 8px 16px;
   font-size: 13px;
   font-weight: 500;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   background: transparent;
   border: none;
+  border-radius: calc(var(--radius-sm) - 2px);
   cursor: pointer;
-  transition: all var(--transition);
+  transition: all 200ms ease;
 }
 
 .setting-toggle button:hover {
-  color: var(--text);
+  color: var(--text-secondary);
   background: var(--bg-hover);
 }
 
 .setting-toggle button.active {
   background: var(--accent-muted);
   color: var(--accent);
+  font-weight: 600;
 }
 
 .setting-input {

frontend/src/pages/DocumentsPage.vue

@@ -89,19 +89,25 @@ onMounted(() => {
 .doc-items {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 6px;
+  padding: 12px;
 }
 
 .doc-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 20px;
+  padding: 12px 16px;
-  border-bottom: 1px solid var(--border);
+  background: var(--bg-surface);
-  transition: background var(--transition);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  transition: all 150ms ease;
 }
 
-.doc-row:hover { background: var(--bg-hover); }
+.doc-row:hover {
+  border-color: var(--accent);
+  background: var(--bg-elevated);
+}
 
 .doc-row-info {
   display: flex;

frontend/src/pages/HomePage.vue

@@ -17,10 +17,12 @@
       <!-- Stats -->
       <div class="home-stats" v-if="docCount > 0 || analysisCount > 0">
         <div class="stat-card" @click="$router.push('/documents')">
+          <svg class="stat-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>
           <div class="stat-value">{{ docCount }}</div>
           <div class="stat-label">{{ t('home.documents') }}</div>
         </div>
         <div class="stat-card" @click="$router.push('/history')">
+          <svg class="stat-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>
           <div class="stat-value">{{ analysisCount }}</div>
           <div class="stat-label">{{ t('home.analyses') }}</div>
         </div>
@@ -171,10 +173,21 @@ onMounted(() => {
 }
 
 .stat-card:hover {
-  border-color: var(--border-light);
+  border-color: var(--accent);
   background: var(--bg-elevated);
 }
 
+.stat-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+
+.stat-card:hover .stat-icon {
+  color: var(--accent);
+}
+
 .stat-value {
   font-size: 28px;
   font-weight: 700;

frontend/src/pages/StudioPage.vue

@@ -551,12 +551,17 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   gap: 20px;
+  min-width: 0;
 }
 
 .topbar-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 
 .mode-toggle {