op sidebar ui

src/components/sidebar/AppSidebar.vue

@@ -23,8 +23,11 @@ const emit = defineEmits<{
     <div class="sidebar-toolbar">
       <div class="sidebar-title-group">
         <h1>Browser Assistant</h1>
-        <p>Local Chromium profile manager</p>
       </div>
+      <button class="refresh-icon-button" type="button" @click="emit('refresh')">
+        <span class="refresh-icon" aria-hidden="true"></span>
+        <span class="sr-only">{{ loading || configsLoading ? "Refreshing..." : "Refresh" }}</span>
+      </button>
     </div>
 
     <div v-if="browsers.length" class="browser-nav">
@@ -46,7 +49,6 @@ const emit = defineEmits<{
         </div>
         <div class="browser-nav-body">
           <strong>{{ browser.browserName }}</strong>
-          <span>{{ browser.dataRoot }}</span>
         </div>
       </button>
     </div>
@@ -66,12 +68,7 @@ const emit = defineEmits<{
       </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="emit('refresh')">
-      {{ loading || configsLoading ? "Refreshing..." : "Refresh" }}
-    </button>
   </aside>
 </template>

src/styles/app.css

@@ -16,8 +16,8 @@
 .sidebar {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
-  padding: 20px 16px;
+  padding: 16px 14px;
   min-height: 0;
   border: 1px solid var(--panel-border);
   border-radius: 22px;
@@ -37,7 +37,7 @@
 
 .sidebar-toolbar {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 2px 2px 8px;
@@ -48,18 +48,11 @@
 }
 
 .sidebar-toolbar h1 {
-  font-size: 1.52rem;
+  font-size: 1.34rem;
-  line-height: 1.02;
+  line-height: 1.04;
   letter-spacing: -0.04em;
 }
 
-.sidebar-title-group p {
-  margin: 6px 0 0;
-  color: var(--muted);
-  font-size: 0.84rem;
-  line-height: 1.35;
-}
-
 .state-panel p,
 .meta-line,
 .profile-email,
@@ -90,22 +83,77 @@
   transform: translateY(-1px);
 }
 
+.refresh-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 12px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.refresh-icon-button:hover {
+  transform: translateY(-1px);
+  border-color: rgba(100, 116, 139, 0.36);
+}
+
+.refresh-icon {
+  width: 13px;
+  height: 13px;
+  border: 1.8px solid #334155;
+  border-right-color: transparent;
+  border-radius: 50%;
+  position: relative;
+}
+
+.refresh-icon::after {
+  content: "";
+  position: absolute;
+  top: -2px;
+  right: -3px;
+  width: 6px;
+  height: 6px;
+  border-top: 1.8px solid #334155;
+  border-right: 1.8px solid #334155;
+  transform: rotate(18deg);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .browser-nav {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
   min-height: 0;
   overflow: auto;
-  padding-right: 2px;
+  padding: 2px 2px 0 0;
 }
 
 .browser-nav-item {
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 12px;
   width: 100%;
-  padding: 11px;
+  padding: 9px 10px;
-  border-radius: 16px;
+  border-radius: 14px;
   text-align: left;
   cursor: pointer;
   background: rgba(255, 255, 255, 0.54);
@@ -153,12 +201,12 @@
 }
 
 .browser-nav-icon {
-  width: 42px;
+  width: 34px;
-  height: 42px;
+  height: 34px;
   border-radius: 0;
   color: #fff;
   font-weight: 700;
-  font-size: 0.86rem;
+  font-size: 0.78rem;
   letter-spacing: 0.08em;
   background: transparent;
   overflow: visible;
@@ -173,8 +221,8 @@
 }
 
 .browser-nav-icon img {
-  max-width: 38px;
+  max-width: 30px;
-  max-height: 38px;
+  max-height: 30px;
 }
 
 .config-icon img {
@@ -197,6 +245,8 @@
 .browser-nav-body strong {
   display: block;
   color: var(--text);
+  font-size: 0.94rem;
+  line-height: 1.25;
 }
 
 .browser-nav-body span {
@@ -837,11 +887,6 @@
   padding: 28px;
 }
 
-.sidebar-refresh {
-  margin-top: 10px;
-  align-self: stretch;
-}
-
 .browser-nav,
 .content-scroll-area {
   scrollbar-width: thin;