fix extra titles

src/App.vue

@@ -152,18 +152,16 @@ onMounted(() => {
 <template>
   <div class="app-shell">
     <aside class="sidebar">
-      <div class="sidebar-header">
-        <p class="eyebrow">Desktop Utility</p>
-        <h1>Browser Assistant</h1>
-        <p class="sidebar-copy">
-          Scan local Chromium profiles, extensions, and bookmarks in one place.
-        </p>
+      <div class="sidebar-toolbar">
+        <div class="sidebar-title-group">
+          <h1>Browser Assistant</h1>
+          <p>Local Chromium profile manager</p>
+        </div>
+        <button class="refresh-button" type="button" @click="scanBrowsers">
+          {{ loading ? "Scanning..." : "Refresh" }}
+        </button>
       </div>
 
-      <button class="refresh-button" type="button" @click="scanBrowsers">
-        {{ loading ? "Scanning..." : "Refresh Data" }}
-      </button>
-
       <div v-if="browsers.length" class="browser-nav">
         <button
           v-for="browser in browsers"
@@ -176,11 +174,7 @@ onMounted(() => {
           <div class="browser-nav-icon">{{ browserMonogram(browser.browserId) }}</div>
           <div class="browser-nav-body">
             <strong>{{ browser.browserName }}</strong>
-            <span>
-              {{ browser.stats.profileCount }} profiles ·
-              {{ browser.stats.extensionCount }} extensions ·
-              {{ browser.stats.bookmarkCount }} bookmarks
-            </span>
+            <span>{{ browser.dataRoot }}</span>
           </div>
         </button>
       </div>
@@ -204,30 +198,6 @@ onMounted(() => {
       </section>
 
       <template v-else-if="currentBrowser">
-        <header class="hero-card" :class="currentBrowser.browserId">
-          <div class="hero-main">
-            <p class="eyebrow">Current Browser</p>
-            <h2>{{ currentBrowser.browserName }}</h2>
-            <p class="hero-copy">
-              Local data root: <span>{{ currentBrowser.dataRoot }}</span>
-            </p>
-          </div>
-          <div class="hero-stats">
-            <div class="stat-card">
-              <span>Profiles</span>
-              <strong>{{ currentBrowser.stats.profileCount }}</strong>
-            </div>
-            <div class="stat-card">
-              <span>Extensions</span>
-              <strong>{{ currentBrowser.stats.extensionCount }}</strong>
-            </div>
-            <div class="stat-card">
-              <span>Bookmarks</span>
-              <strong>{{ currentBrowser.stats.bookmarkCount }}</strong>
-            </div>
-          </div>
-        </header>
-
         <section class="section-tabs">
           <button
             class="section-tab"
@@ -259,14 +229,6 @@ onMounted(() => {
         </section>
 
         <section v-if="activeSection === 'profiles'" class="content-section">
-          <div class="section-heading">
-            <div>
-              <p class="eyebrow">Profiles</p>
-              <h3>User Profiles</h3>
-            </div>
-            <span class="count-pill">{{ currentBrowser.profiles.length }}</span>
-          </div>
-
           <div v-if="currentBrowser.profiles.length" class="stack-list">
             <article
               v-for="profile in currentBrowser.profiles"
@@ -296,14 +258,6 @@ onMounted(() => {
         </section>
 
         <section v-else-if="activeSection === 'extensions'" class="content-section">
-          <div class="section-heading">
-            <div>
-              <p class="eyebrow">Extensions</p>
-              <h3>Installed Extensions</h3>
-            </div>
-            <span class="count-pill">{{ currentBrowser.extensions.length }}</span>
-          </div>
-
           <div v-if="currentBrowser.extensions.length" class="stack-list">
             <article
               v-for="extension in currentBrowser.extensions"
@@ -357,14 +311,6 @@ onMounted(() => {
         </section>
 
         <section v-else class="content-section">
-          <div class="section-heading">
-            <div>
-              <p class="eyebrow">Bookmarks</p>
-              <h3>Saved Bookmarks</h3>
-            </div>
-            <span class="count-pill">{{ currentBrowser.bookmarks.length }}</span>
-          </div>
-
           <div v-if="currentBrowser.bookmarks.length" class="bookmark-list">
             <article
               v-for="bookmark in currentBrowser.bookmarks"

src/styles.css

@@ -74,7 +74,7 @@ button {
 .sidebar {
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 12px;
   padding: 20px 16px;
   border: 1px solid var(--panel-border);
   border-radius: 22px;
@@ -82,9 +82,7 @@ button {
   box-shadow: var(--shadow);
 }
 
-.sidebar-header h1,
-.hero-main h2,
-.section-heading h3,
+.sidebar-toolbar h1,
 .state-panel h2,
 .profile-topline h4,
 .extension-topline h4,
@@ -94,17 +92,34 @@ button {
   letter-spacing: -0.03em;
 }
 
-.sidebar-header h1 {
-  font-size: 1.72rem;
-  line-height: 1;
+.sidebar-toolbar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 2px 2px 8px;
+}
+
+.sidebar-title-group {
+  min-width: 0;
+}
+
+.sidebar-toolbar h1 {
+  font-size: 1.52rem;
+  line-height: 1.02;
+  letter-spacing: -0.04em;
+}
+
+.sidebar-title-group p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 0.84rem;
+  line-height: 1.35;
 }
 
-.sidebar-copy,
-.hero-copy,
 .state-panel p,
 .meta-line,
 .profile-email,
-.profile-path,
 .bookmark-url,
 .browser-nav-body span,
 .sidebar-empty p {
@@ -112,25 +127,20 @@ button {
   color: var(--muted);
 }
 
-.eyebrow {
-  margin: 0 0 6px;
-  color: var(--muted-soft);
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-
 .refresh-button {
-  padding: 11px 14px;
-  border-radius: 15px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  padding: 9px 13px;
+  border-radius: 12px;
   background: linear-gradient(135deg, #10213f 0%, #213f75 100%);
   color: #fff;
   cursor: pointer;
+  font-size: 0.86rem;
+  font-weight: 600;
   transition:
     transform 160ms ease,
     box-shadow 160ms ease;
-  box-shadow: 0 16px 30px rgba(20, 44, 82, 0.22);
+  box-shadow: 0 12px 24px rgba(20, 44, 82, 0.18);
 }
 
 .refresh-button:hover {
@@ -140,7 +150,7 @@ button {
 .browser-nav {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 
 .browser-nav-item {
@@ -202,18 +212,15 @@ button {
   background: linear-gradient(135deg, #10213f, #365f9f);
 }
 
-.browser-nav-item.chrome .browser-nav-icon,
-.hero-card.chrome {
+.browser-nav-item.chrome .browser-nav-icon {
   --accent: var(--chrome);
 }
 
-.browser-nav-item.edge .browser-nav-icon,
-.hero-card.edge {
+.browser-nav-item.edge .browser-nav-icon {
   --accent: var(--edge);
 }
 
-.browser-nav-item.brave .browser-nav-icon,
-.hero-card.brave {
+.browser-nav-item.brave .browser-nav-icon {
   --accent: var(--brave);
 }
 
@@ -233,8 +240,7 @@ button {
   min-width: 0;
 }
 
-.browser-nav-body strong,
-.stat-card strong {
+.browser-nav-body strong {
   display: block;
   color: var(--text);
 }
@@ -244,6 +250,9 @@ button {
   margin-top: 2px;
   font-size: 0.8rem;
   line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .sidebar-empty {
@@ -258,7 +267,6 @@ button {
   overflow: auto;
 }
 
-.hero-card,
 .section-tabs,
 .content-section,
 .state-panel {
@@ -268,56 +276,15 @@ button {
   box-shadow: var(--shadow);
 }
 
-.hero-card {
-  display: flex;
-  justify-content: space-between;
-  gap: 18px;
-  padding: 20px;
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72)),
-    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, white), rgba(255, 255, 255, 0));
-}
-
-.hero-copy span {
-  color: var(--text);
-  word-break: break-all;
-}
-
-.hero-stats {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(120px, 1fr));
-  gap: 10px;
-  width: min(460px, 100%);
-}
-
-.stat-card {
-  padding: 14px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.72);
-  border: 1px solid rgba(148, 163, 184, 0.18);
-}
-
-.stat-card span {
-  display: block;
-  color: var(--muted-soft);
-  font-size: 0.78rem;
-}
-
-.stat-card strong {
-  margin-top: 6px;
-  font-size: 1.7rem;
-  letter-spacing: -0.05em;
-}
-
 .content-section {
-  margin-top: 12px;
-  padding: 18px;
+  margin-top: 10px;
+  padding: 16px;
 }
 
 .section-tabs {
   display: flex;
   gap: 10px;
-  margin-top: 12px;
+  margin-top: 0;
   padding: 8px;
 }
 
@@ -350,14 +317,6 @@ button {
   box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
 }
 
-.section-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 12px;
-}
-
 .count-pill,
 .badge {
   display: inline-flex;
@@ -498,6 +457,15 @@ button {
   gap: 8px;
 }
 
+.eyebrow {
+  margin: 0 0 6px;
+  color: var(--muted-soft);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
 .state-panel {
   min-height: 320px;
   place-content: center;
@@ -517,22 +485,9 @@ button {
   .content-panel {
     padding: 0;
   }
-
-  .hero-card {
-    flex-direction: column;
-  }
-
-  .hero-stats {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    width: 100%;
-  }
 }
 
 @media (max-width: 720px) {
-  .hero-stats {
-    grid-template-columns: 1fr;
-  }
-
   .profile-card,
   .extension-card,
   .bookmark-card {