style: unify provider UI sidebar items and add button styles

Author: otakugard

apps/web/src/components/add-provider/index.vue

@@ -11,11 +11,11 @@
     >
       <template #trigger>
         <Button
-          class="w-full shadow-none! text-muted-foreground mb-4"
+          class="w-full shadow-none! text-muted-foreground h-9 px-3 rounded-md border-border bg-background hover:bg-accent"
           variant="outline"
         >
           <Plus
-            class="mr-1"
+            class="mr-1 size-4"
           /> {{ $t('provider.addBtn') }}
         </Button>
       </template>

apps/web/src/pages/email/components/add-email-provider.vue

@@ -11,11 +11,11 @@
     >
       <template #trigger>
         <Button
-          class="w-full shadow-none! text-muted-foreground mb-4"
+          class="w-full shadow-none! text-muted-foreground h-9 px-3 rounded-md border-border bg-background hover:bg-accent"
           variant="outline"
         >
           <Plus
-            class="mr-1"
+            class="mr-1 size-4"
           /> {{ $t('email.add') }}
         </Button>
       </template>

apps/web/src/pages/email/index.vue

@@ -70,14 +70,16 @@ const openStatus = reactive({ addOpen: false })
         <SidebarMenuItem>
           <SidebarMenuButton
             as-child
-            class="justify-start py-5! px-4"
+            :is-active="curProvider?.id === item.id"
+            class="justify-start py-0! px-0 h-11 before:hidden"
           >
             <Toggle
-              :class="['py-4 border', curProvider?.id === item.id ? 'border-border' : 'border-transparent']"
+              class="w-full justify-start h-11 px-3 border-0 bg-transparent! transition-colors gap-3"
               :model-value="selectProvider(item.name ?? '').value"
               @update:model-value="(isSelect) => { if (isSelect) curProvider = item }"
             >
-              {{ item.name }}
+              <Mail class="size-4 shrink-0" />
+              <span class="truncate text-xs font-medium">{{ item.name }}</span>
             </Toggle>
           </SidebarMenuButton>
         </SidebarMenuItem>

apps/web/src/pages/memory/components/add-memory-provider.vue

@@ -3,10 +3,10 @@
     <DialogTrigger as-child>
       <Button
         variant="outline"
-        class="w-full mb-4 text-muted-foreground"
+        class="w-full shadow-none! text-muted-foreground h-9 px-3 rounded-md border-border bg-background hover:bg-accent"
       >
         <Plus
-          class="mr-2"
+          class="mr-1 size-4"
         />
         {{ $t('memory.add') }}
       </Button>

apps/web/src/pages/memory/index.vue

@@ -63,17 +63,18 @@ const openStatus = reactive({ addOpen: false })
         <SidebarMenuItem>
           <SidebarMenuButton
             as-child
-            class="justify-start py-5! px-4"
+            :is-active="selectProvider(item.name).value"
+            class="justify-start py-0! px-0 h-11 before:hidden"
           >
             <Toggle
-              :class="`py-4 border border-transparent ${curProvider?.id === item.id ? 'border-inherit' : ''}`"
+              class="w-full justify-start h-11 px-3 border-0 bg-transparent! transition-colors gap-3"
               :model-value="selectProvider(item.name).value"
               @update:model-value="(isSelect) => { if (isSelect) curProvider = item }"
             >
               <Brain
-                class="mr-2 size-4 text-primary"
+                class="size-4 shrink-0"
               />
-              {{ item.name }}
+              <span class="truncate text-xs font-medium">{{ item.name }}</span>
             </Toggle>
           </SidebarMenuButton>
         </SidebarMenuItem>

apps/web/src/pages/providers/index.vue

@@ -94,13 +94,11 @@ const openStatus = reactive({
         <SidebarMenuItem>
           <SidebarMenuButton
             as-child
-            class="justify-start py-5! px-4"
+            :is-active="selectProvider(providerItem.id ?? '').value"
+            class="justify-start py-0! px-0 h-11 before:hidden"
           >
             <Toggle
-              :class="[
-                'py-4 border',
-                curProvider?.id === providerItem.id ? 'border-border' : 'border-transparent',
-              ]"
+              class="w-full justify-start h-11 px-3 border-0 bg-transparent! transition-colors gap-3"
               :model-value="selectProvider(providerItem.id ?? '').value"
               @update:model-value="(isSelect) => {
                 if (isSelect) {
@@ -109,15 +107,15 @@ const openStatus = reactive({
               }"
             >
               <span class="relative shrink-0">
-                <span class="flex size-7 items-center justify-center rounded-full bg-muted">
+                <span class="flex size-6 items-center justify-center rounded-full bg-muted">
                   <ProviderIcon
                     v-if="providerItem.icon"
                     :icon="providerItem.icon"
-                    size="1.25em"
+                    size="1em"
                   />
                   <span
                     v-else
-                    class="text-xs font-medium text-muted-foreground"
+                    class="text-[10px] font-medium text-muted-foreground"
                   >
                     {{ getInitials(providerItem.name) }}
                   </span>
@@ -128,7 +126,7 @@ const openStatus = reactive({
                   variant="success"
                 />
               </span>
-              <span class="truncate">{{ providerItem.name }}</span>
+              <span class="truncate text-xs font-medium">{{ providerItem.name }}</span>
             </Toggle>
           </SidebarMenuButton>
         </SidebarMenuItem>

apps/web/src/pages/web-search/components/add-search-provider.vue

@@ -11,10 +11,10 @@
     >
       <template #trigger>
         <Button
-          class="w-full shadow-none! text-muted-foreground mb-4"
+          class="w-full shadow-none! text-muted-foreground h-9 px-3 rounded-md border-border bg-background hover:bg-accent"
           variant="outline"
         >
-          <Plus class="mr-1" /> {{ $t('webSearch.add') }}
+          <Plus class="mr-1 size-4" /> {{ $t('webSearch.add') }}
         </Button>
       </template>
       <template #body>

detail-design-2.0-docs/2026-05-14-Provider-UI-Unification.md

@@ -0,0 +1,18 @@
+# Delivery: Provider UI Unification (2026-05-14)
+
+## Context
+Standardizing the interface for managing various providers (Email, Memory, Search) to create a predictable and cohesive user experience.
+
+## Key Changes
+- **Unified "Add" Buttons**: Standardized the appearance of the "Add Provider" buttons across Email, Memory, and Web Search components.
+- **Sidebar Navigation Alignment**: Aligned the sidebar list item styles for all provider-related pages, ensuring consistent padding, height, and icon placement.
+- **Status Indicators**: Refined the visual presentation of provider status within the sidebar lists.
+
+## File Modifications
+- `apps/web/src/components/add-provider/index.vue`
+- `apps/web/src/pages/email/components/add-email-provider.vue`
+- `apps/web/src/pages/memory/components/add-memory-provider.vue`
+- `apps/web/src/pages/web-search/components/add-search-provider.vue`
+- `apps/web/src/pages/email/index.vue`
+- `apps/web/src/pages/memory/index.vue`
+- `apps/web/src/pages/providers/index.vue`