From ac5bedd73fc3f2dfd320c4a7b274006d09892aa8 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Thu, 16 Apr 2026 15:12:19 -0400
Subject: [PATCH] op ui

---
 src/App.vue    | 32 +++++++++++++-------------------
 src/styles.css | 39 ++++++++++++++-------------------------
 2 files changed, 27 insertions(+), 44 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 74aed5d..08ba4e5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -73,31 +73,25 @@ const {
         <p>No supported Chromium browser data was found yet.</p>
       </div>
 
+      <button
+        class="browser-nav-item utility sidebar-utility-nav"
+        :class="{ active: page === 'configuration' }"
+        type="button"
+        @click="page = 'configuration'"
+      >
+        <div class="browser-nav-icon config-nav-icon">CF</div>
+        <div class="browser-nav-body">
+          <strong>Configuration</strong>
+          <span>Manage custom scan sources and paths</span>
+        </div>
+      </button>
+
       <button class="refresh-button sidebar-refresh" type="button" @click="refreshAll">
         {{ loading || configsLoading ? "Refreshing..." : "Refresh" }}
       </button>
     </aside>
 
     <main class="content-panel">
-      <section class="page-tabs">
-        <button
-          class="page-tab"
-          :class="{ active: page === 'browserData' }"
-          type="button"
-          @click="page = 'browserData'"
-        >
-          Browser Data
-        </button>
-        <button
-          class="page-tab"
-          :class="{ active: page === 'configuration' }"
-          type="button"
-          @click="page = 'configuration'"
-        >
-          Configuration
-        </button>
-      </section>
-
       <template v-if="page === 'configuration'">
         <section class="content-scroll-area">
           <section class="content-section">
diff --git a/src/styles.css b/src/styles.css
index a2bfe1e..4c5b40a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -197,6 +197,11 @@ button {
   background: rgba(234, 88, 12, 0.12);
 }
 
+.browser-nav-item.utility.active {
+  background: rgba(15, 23, 42, 0.08);
+  border-color: rgba(15, 23, 42, 0.1);
+}
+
 .browser-nav-icon,
 .profile-avatar,
 .extension-icon {
@@ -241,6 +246,14 @@ button {
   background: linear-gradient(135deg, #c2410c, #fb923c);
 }
 
+.config-nav-icon {
+  background: linear-gradient(135deg, #334155, #64748b);
+}
+
+.sidebar-utility-nav {
+  margin-top: auto;
+}
+
 .browser-nav-body {
   min-width: 0;
 }
@@ -276,30 +289,6 @@ button {
   overflow: hidden;
 }
 
-.page-tabs {
-  display: flex;
-  gap: 10px;
-  flex-shrink: 0;
-}
-
-.page-tab {
-  padding: 10px 14px;
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.58);
-  color: var(--muted);
-  cursor: pointer;
-  transition:
-    background 160ms ease,
-    color 160ms ease,
-    box-shadow 160ms ease;
-}
-
-.page-tab.active {
-  color: var(--text);
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 240, 255, 0.92));
-  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
-}
-
 .section-tabs,
 .content-section,
 .state-panel {
@@ -805,7 +794,7 @@ button {
 }
 
 .sidebar-refresh {
-  margin-top: auto;
+  margin-top: 10px;
   align-self: stretch;
 }