feat: add system settings with model connectivity and encrypted storage

web/src/assets/styles/views/settings-view.css

@@ -18,7 +18,7 @@
   min-width: 0;
   min-height: 0;
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 10px;
   padding: 22px 16px 18px;
   border-right: 1px solid #e7edf3;
@@ -65,10 +65,7 @@
 .settings-nav-item {
   width: 100%;
   min-height: 74px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 12px;
+  display: block;
   padding: 14px 14px 14px 16px;
   border: 1px solid transparent;
   border-radius: 18px;
@@ -115,42 +112,6 @@
   line-height: 1.45;
 }
 
-.nav-item-state {
-  width: 26px;
-  height: 26px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: #f1f5f9;
-  color: #94a3b8;
-  font-size: 14px;
-}
-
-.settings-nav-item.complete .nav-item-state {
-  background: #ecfdf5;
-  color: #059669;
-}
-
-.settings-nav-foot {
-  display: grid;
-  gap: 4px;
-  padding: 16px 12px 2px;
-  border-top: 1px solid #eef3f7;
-}
-
-.settings-nav-foot span {
-  color: #64748b;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.settings-nav-foot strong {
-  color: #0f172a;
-  font-size: 16px;
-  font-weight: 820;
-}
-
 .settings-body {
   min-width: 0;
   min-height: 0;
@@ -211,25 +172,6 @@
   gap: 12px;
 }
 
-.section-status {
-  min-height: 36px;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 13px;
-  border-radius: 999px;
-  background: #fff7ed;
-  color: #c2410c;
-  font-size: 12px;
-  font-weight: 800;
-  white-space: nowrap;
-}
-
-.section-status.complete {
-  background: #ecfdf5;
-  color: #059669;
-}
-
 .save-button {
   min-height: 42px;
   display: inline-flex;
@@ -265,6 +207,12 @@
   padding: 24px 28px 28px;
 }
 
+.model-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+
 .settings-card {
   padding: 22px 22px 24px;
   border: 1px solid #e8eef3;
@@ -280,6 +228,13 @@
   margin-bottom: 18px;
 }
 
+.card-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 0 0 auto;
+}
+
 .card-head h4 {
   color: #0f172a;
   font-size: 18px;
@@ -294,6 +249,37 @@
   line-height: 1.65;
 }
 
+.test-button {
+  min-height: 38px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 14px;
+  border: 1px solid rgba(16, 185, 129, 0.18);
+  border-radius: 12px;
+  background: #f7fffb;
+  color: #047857;
+  font-size: 13px;
+  font-weight: 800;
+  transition:
+    border-color 180ms var(--ease),
+    background 180ms var(--ease),
+    color 180ms var(--ease),
+    transform 180ms var(--ease);
+}
+
+.test-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  border-color: rgba(16, 185, 129, 0.34);
+  background: #ecfdf5;
+}
+
+.test-button:disabled {
+  cursor: wait;
+  opacity: 0.78;
+}
+
 .form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -363,6 +349,38 @@
   box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
 }
 
+.test-feedback {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-top: 16px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.6;
+}
+
+.test-feedback i {
+  margin-top: 2px;
+  font-size: 15px;
+}
+
+.test-feedback.is-success {
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.test-feedback.is-error {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.test-feedback.is-testing {
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
 .logo-field {
   align-self: stretch;
 }
@@ -587,8 +605,7 @@
     justify-items: stretch;
   }
 
-  .save-button,
-  .section-status {
+  .save-button {
     justify-content: center;
   }
 }
@@ -620,6 +637,7 @@
     padding-inline: 20px;
   }
 
+  .model-grid,
   .form-grid,
   .profile-grid {
     grid-template-columns: 1fr;