From 390d4543c152820e9b286bfc39244de617d66fbc Mon Sep 17 00:00:00 2001
From: zhangmo8 <wegi866@gmail.com>
Date: Wed, 25 Mar 2026 17:38:46 +0800
Subject: [PATCH 1/4] feat: update sidebar item ux

---
 src/renderer/src/components/WindowSideBar.vue | 197 +++++++-
 .../components/WindowSideBarSessionItem.vue   | 430 ++++++++++++++++--
 .../renderer/components/WindowSideBar.test.ts |   2 +-
 .../WindowSideBarSessionItem.test.ts          | 113 +++--
 4 files changed, 655 insertions(+), 87 deletions(-)

diff --git a/src/renderer/src/components/WindowSideBar.vue b/src/renderer/src/components/WindowSideBar.vue
index 984cd42c6..90a7e73f1 100644
--- a/src/renderer/src/components/WindowSideBar.vue
+++ b/src/renderer/src/components/WindowSideBar.vue
@@ -141,13 +141,16 @@
         </div>
 
         <!-- Session list -->
-        <div class="flex-1 overflow-y-auto px-1.5">
+        <div ref="sessionListRef" class="session-list flex-1 overflow-y-auto px-1.5">
           <div v-if="pinnedSessions.length > 0" class="pt-2 space-y-0.5">
             <WindowSideBarSessionItem
               v-for="session in pinnedSessions"
               :key="`pinned-${session.id}`"
               :session="session"
               :active="sessionStore.activeSessionId === session.id"
+              region="pinned"
+              :hero-hidden="pinFlightSessionId === session.id"
+              :pin-feedback-mode="pinFeedbackSessionId === session.id ? pinFeedbackMode : null"
               @select="handleSessionClick"
               @toggle-pin="handleTogglePin"
               @rename="openRenameDialog"
@@ -179,6 +182,9 @@
               :key="session.id"
               :session="session"
               :active="sessionStore.activeSessionId === session.id"
+              region="grouped"
+              :hero-hidden="pinFlightSessionId === session.id"
+              :pin-feedback-mode="pinFeedbackSessionId === session.id ? pinFeedbackMode : null"
               @select="handleSessionClick"
               @toggle-pin="handleTogglePin"
               @rename="openRenameDialog"
@@ -241,7 +247,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
 import { Icon } from '@iconify/vue'
 import { Input } from '@shadcn/components/ui/input'
 import {
@@ -268,6 +274,11 @@ import AgentAvatar from './icons/AgentAvatar.vue'
 import WindowSideBarSessionItem from './WindowSideBarSessionItem.vue'
 import { useI18n } from 'vue-i18n'
 
+type PinFeedbackMode = 'pinning' | 'unpinning'
+
+const PIN_FEEDBACK_DURATION_MS = 560
+const PIN_FLIGHT_DURATION_MS = 360
+
 const windowPresenter = usePresenter('windowPresenter')
 const remoteControlPresenter = useRemoteControlPresenter()
 const { t } = useI18n()
@@ -279,6 +290,7 @@ const remoteControlStatus = ref<TelegramRemoteStatus | null>(null)
 let agentSwitchSeq = 0
 let agentSwitchQueue: Promise<void> = Promise.resolve()
 let remoteControlStatusTimer: ReturnType<typeof setInterval> | null = null
+let pinFeedbackTimer: number | null = null
 const selectedAgentName = computed(
   () => agentStore.selectedAgent?.name ?? t('chat.sidebar.allAgents')
 )
@@ -308,6 +320,10 @@ const remoteControlIconClass = computed(() => {
 
 const pinnedSessions = computed(() => sessionStore.getPinnedSessions(agentStore.selectedAgentId))
 const filteredGroups = computed(() => sessionStore.getFilteredGroups(agentStore.selectedAgentId))
+const pinFlightSessionId = ref<string | null>(null)
+const pinFeedbackSessionId = ref<string | null>(null)
+const pinFeedbackMode = ref<PinFeedbackMode | null>(null)
+const sessionListRef = ref<HTMLElement | null>(null)
 const renameTargetSession = ref<UISession | null>(null)
 const clearTargetSession = ref<UISession | null>(null)
 const deleteTargetSession = ref<UISession | null>(null)
@@ -439,9 +455,172 @@ const openDeleteDialog = (session: UISession) => {
   deleteTargetSession.value = session
 }
 
+const prefersReducedMotion = () =>
+  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false
+
+const clearPinFeedback = () => {
+  if (pinFeedbackTimer) {
+    window.clearTimeout(pinFeedbackTimer)
+    pinFeedbackTimer = null
+  }
+
+  pinFeedbackSessionId.value = null
+  pinFeedbackMode.value = null
+}
+
+const applyPinFeedback = (sessionId: string, nextPinned: boolean) => {
+  if (prefersReducedMotion()) {
+    clearPinFeedback()
+    return
+  }
+
+  if (pinFeedbackTimer) {
+    window.clearTimeout(pinFeedbackTimer)
+  }
+
+  pinFeedbackSessionId.value = sessionId
+  pinFeedbackMode.value = nextPinned ? 'pinning' : 'unpinning'
+  pinFeedbackTimer = window.setTimeout(() => {
+    pinFeedbackSessionId.value = null
+    pinFeedbackMode.value = null
+    pinFeedbackTimer = null
+  }, PIN_FEEDBACK_DURATION_MS)
+}
+
+const commitPinToggle = async (session: UISession, nextPinned: boolean, withFeedback = true) => {
+  await sessionStore.toggleSessionPinned(session.id, nextPinned)
+  if (withFeedback) {
+    applyPinFeedback(session.id, nextPinned)
+  }
+  await nextTick()
+}
+
+const waitForAnimationFrame = () =>
+  new Promise<void>((resolve) => {
+    window.requestAnimationFrame(() => resolve())
+  })
+
+const restoreSessionListScroll = (scrollTop: number | null) => {
+  if (scrollTop === null || !sessionListRef.value) {
+    return
+  }
+
+  sessionListRef.value.scrollTop = scrollTop
+}
+
+const getSessionItemElement = (sessionId: string, region: 'pinned' | 'grouped') =>
+  document.querySelector<HTMLElement>(
+    `.session-item[data-session-id="${sessionId}"][data-session-region="${region}"]`
+  )
+
+const createPinFlightClone = (sourceElement: HTMLElement, sourceRect: DOMRect) => {
+  const clone = sourceElement.cloneNode(true) as HTMLElement
+
+  clone.removeAttribute('style')
+  delete clone.dataset.pinFx
+  clone.dataset.heroHidden = 'false'
+  clone.setAttribute('aria-hidden', 'true')
+  clone.classList.add('sidebar-pin-flight')
+  Object.assign(clone.style, {
+    position: 'fixed',
+    left: `${sourceRect.left}px`,
+    top: `${sourceRect.top}px`,
+    width: `${sourceRect.width}px`,
+    height: `${sourceRect.height}px`,
+    margin: '0',
+    pointerEvents: 'none',
+    zIndex: '2147483647',
+    transformOrigin: 'top left',
+    willChange: 'transform',
+    contain: 'layout style paint'
+  })
+
+  return clone
+}
+
+const animatePinFlight = async (session: UISession, nextPinned: boolean) => {
+  const sourceRegion = session.isPinned ? 'pinned' : 'grouped'
+  const targetRegion = nextPinned ? 'pinned' : 'grouped'
+  const sourceElement = getSessionItemElement(session.id, sourceRegion)
+  const sourceRect = sourceElement?.getBoundingClientRect()
+  const preservedScrollTop = sessionListRef.value?.scrollTop ?? null
+
+  if (!sourceElement || !sourceRect || sourceRect.width === 0 || sourceRect.height === 0) {
+    await commitPinToggle(session, nextPinned)
+    return
+  }
+
+  const clone = createPinFlightClone(sourceElement, sourceRect)
+  document.body.appendChild(clone)
+  pinFlightSessionId.value = session.id
+  await nextTick()
+
+  try {
+    await commitPinToggle(session, nextPinned, false)
+    restoreSessionListScroll(preservedScrollTop)
+    await waitForAnimationFrame()
+    restoreSessionListScroll(preservedScrollTop)
+    await waitForAnimationFrame()
+
+    const targetElement = getSessionItemElement(session.id, targetRegion)
+    const targetRect = targetElement?.getBoundingClientRect()
+
+    if (!targetElement || !targetRect || targetRect.width === 0 || targetRect.height === 0) {
+      pinFlightSessionId.value = null
+      applyPinFeedback(session.id, nextPinned)
+      return
+    }
+
+    const deltaX = targetRect.left - sourceRect.left
+    const deltaY = targetRect.top - sourceRect.top
+    const scaleX = targetRect.width / sourceRect.width
+    const scaleY = targetRect.height / sourceRect.height
+
+    const animation = clone.animate(
+      [
+        {
+          transform: 'translate3d(0, 0, 0) scale(1)',
+          opacity: 1,
+          offset: 0
+        },
+        {
+          transform: `translate3d(${deltaX * 0.88}px, ${deltaY * 0.88}px, 0) scale(${1.015}, ${1.015})`,
+          opacity: 1,
+          offset: 0.72
+        },
+        {
+          transform: `translate3d(${deltaX}px, ${deltaY}px, 0) scale(${scaleX}, ${scaleY})`,
+          opacity: 1,
+          offset: 1
+        }
+      ],
+      {
+        duration: PIN_FLIGHT_DURATION_MS,
+        easing: 'cubic-bezier(0.22, 0.88, 0.24, 1)',
+        fill: 'forwards'
+      }
+    )
+
+    await animation.finished.catch(() => undefined)
+    pinFlightSessionId.value = null
+    await nextTick()
+    applyPinFeedback(session.id, nextPinned)
+  } finally {
+    pinFlightSessionId.value = null
+    clone.remove()
+  }
+}
+
 const handleTogglePin = async (session: UISession) => {
+  const nextPinned = !session.isPinned
+
   try {
-    await sessionStore.toggleSessionPinned(session.id, !session.isPinned)
+    if (prefersReducedMotion()) {
+      await commitPinToggle(session, nextPinned)
+      return
+    }
+
+    await animatePinFlight(session, nextPinned)
   } catch (error) {
     console.error('Failed to toggle pin status:', error)
   }
@@ -504,6 +683,9 @@ onUnmounted(() => {
     clearInterval(remoteControlStatusTimer)
     remoteControlStatusTimer = null
   }
+
+  pinFlightSessionId.value = null
+  clearPinFeedback()
 })
 </script>
 
@@ -512,7 +694,16 @@ onUnmounted(() => {
   -webkit-app-region: drag;
 }
 
+.session-list {
+  overflow-anchor: none;
+}
+
 button {
   -webkit-app-region: no-drag;
 }
+
+:global(.sidebar-pin-flight) {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
 </style>
diff --git a/src/renderer/src/components/WindowSideBarSessionItem.vue b/src/renderer/src/components/WindowSideBarSessionItem.vue
index ac777ee08..2363706d8 100644
--- a/src/renderer/src/components/WindowSideBarSessionItem.vue
+++ b/src/renderer/src/components/WindowSideBarSessionItem.vue
@@ -1,64 +1,424 @@
-<template>
-  <div
-    class="session-item no-drag flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-left transition-all duration-150"
-    :class="active ? 'bg-accent text-accent-foreground' : 'text-foreground/80 hover:bg-accent/50'"
-    @click="$emit('select', session)"
-  >
-    <span class="flex-1 text-sm truncate">{{ session.title }}</span>
-    <span v-if="session.status === 'working'" class="shrink-0">
-      <Icon icon="lucide:loader-2" class="w-3.5 h-3.5 text-primary animate-spin" />
-    </span>
-    <span v-else-if="session.status === 'completed'" class="shrink-0">
-      <Icon icon="lucide:check" class="w-3.5 h-3.5 text-green-500" />
-    </span>
-    <span v-else-if="session.status === 'error'" class="shrink-0">
-      <Icon icon="lucide:alert-circle" class="w-3.5 h-3.5 text-destructive" />
-    </span>
-    <span class="right-button flex gap-2 items-center opacity-0 transition-all">
-      <Icon
-        @click.stop="$emit('delete', session)"
-        icon="lucide:trash-2"
-        class="h-4 w-4 cursor-pointer hover:text-primary"
-      />
-      <Icon
-        @click.stop="$emit('toggle-pin', session)"
-        :icon="session.isPinned ? 'lucide:pin-off' : 'lucide:pin'"
-        class="h-4 w-4 hover:text-primary cursor-pointer"
-      />
-    </span>
-  </div>
-</template>
-
 <script setup lang="ts">
+import { computed, toRefs } from 'vue'
 import { Icon } from '@iconify/vue'
+import { useI18n } from 'vue-i18n'
 
 import type { UISession } from '@/stores/ui/session'
 
+type PinFeedbackMode = 'pinning' | 'unpinning'
+type SessionItemRegion = 'pinned' | 'grouped'
+
 defineOptions({
   name: 'WindowSideBarSessionItem'
 })
 
-defineProps<{
+const props = defineProps<{
   session: UISession
   active: boolean
+  region: SessionItemRegion
+  heroHidden?: boolean
+  pinFeedbackMode?: PinFeedbackMode | null
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   select: [session: UISession]
   'toggle-pin': [session: UISession]
   rename: [session: UISession]
   clear: [session: UISession]
   delete: [session: UISession]
 }>()
+
+const { t } = useI18n()
+const { session, active } = toRefs(props)
+
+const pinActionLabel = computed(() =>
+  session.value.isPinned ? t('thread.actions.unpin') : t('thread.actions.pin')
+)
 </script>
 
+<template>
+  <div
+    class="session-item no-drag flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-200"
+    :class="active ? 'bg-accent text-accent-foreground' : 'text-foreground/80 hover:bg-accent/50'"
+    :data-pin-fx="pinFeedbackMode ?? undefined"
+    :data-hero-hidden="heroHidden ? 'true' : undefined"
+    :data-session-region="region"
+    :data-session-id="session.id"
+    @click="emit('select', session)"
+  >
+    <button
+      type="button"
+      class="pin-button flex h-6 w-6 shrink-0 items-center justify-center rounded-md focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/40"
+      :class="session.isPinned ? 'pin-button--active' : 'pin-button--idle'"
+      :data-pin-fx="pinFeedbackMode ?? undefined"
+      :title="pinActionLabel"
+      :aria-label="pinActionLabel"
+      :aria-pressed="session.isPinned"
+      @click.stop="emit('toggle-pin', session)"
+    >
+      <Icon icon="lucide:pin" class="pin-button__icon h-4 w-4" />
+    </button>
+
+    <span
+      class="session-title min-w-0 flex-1 text-sm"
+      :class="{ 'session-title--loading': session.status === 'working' }"
+    >
+      <span class="session-title__label">
+        {{ session.title }}
+      </span>
+      <span v-if="session.status === 'working'" aria-hidden="true" class="session-title__sheen">
+        {{ session.title }}
+      </span>
+    </span>
+
+    <span v-if="session.status === 'completed'" class="shrink-0">
+      <Icon icon="lucide:check" class="h-3.5 w-3.5 text-green-500" />
+    </span>
+    <span v-else-if="session.status === 'error'" class="shrink-0">
+      <Icon icon="lucide:alert-circle" class="h-3.5 w-3.5 text-destructive" />
+    </span>
+
+    <span class="right-button flex shrink-0 items-center gap-2 transition-all duration-200">
+      <button
+        type="button"
+        class="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors duration-200 hover:text-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive/30"
+        :title="t('thread.actions.delete')"
+        :aria-label="t('thread.actions.delete')"
+        @click.stop="emit('delete', session)"
+      >
+        <Icon icon="lucide:trash-2" class="h-4 w-4" />
+      </button>
+    </span>
+  </div>
+</template>
+
 <style scoped>
 .no-drag {
   -webkit-app-region: no-drag;
 }
 
-.session-item:hover .right-button {
-  display: flex;
+.session-item {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  transform: translateZ(0);
+}
+
+.session-item[data-hero-hidden='true'] {
+  visibility: hidden;
+}
+
+.session-item > * {
+  position: relative;
+  z-index: 1;
+}
+
+.session-item::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: inherit;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.97);
+  background:
+    linear-gradient(
+      128deg,
+      color-mix(in srgb, var(--primary) 20%, transparent) 0%,
+      transparent 46%,
+      color-mix(in srgb, var(--primary) 16%, white 8%) 100%
+    ),
+    radial-gradient(
+      circle at 14% 50%,
+      color-mix(in srgb, var(--primary) 18%, transparent) 0%,
+      transparent 72%
+    );
+}
+
+.session-item[data-pin-fx='pinning'] {
+  animation: none;
+}
+
+.session-item[data-pin-fx='pinning']::after {
+  animation: session-item-pin-glow 420ms cubic-bezier(0.24, 0.84, 0.24, 1);
+}
+
+.session-item[data-pin-fx='unpinning'] {
+  animation: none;
+}
+
+.session-item[data-pin-fx='unpinning']::after {
+  animation: session-item-unpin-glow 360ms cubic-bezier(0.28, 0.11, 0.32, 1);
+}
+
+.pin-button {
+  position: relative;
+  overflow: hidden;
+  transition:
+    background-color 200ms ease,
+    color 200ms ease,
+    transform 200ms ease;
+}
+
+.pin-button::before {
+  content: '';
+  position: absolute;
+  inset: 0.18rem;
+  border-radius: 0.45rem;
+  background: radial-gradient(circle at 50% 45%, var(--primary) 0%, transparent 72%);
+  opacity: 0;
+  transform: scale(0.72);
+  transition:
+    opacity 200ms ease,
+    transform 200ms ease;
+}
+
+.pin-button:hover {
+  background: var(--accent);
+}
+
+.pin-button--idle {
+  color: var(--muted-foreground);
+}
+
+.pin-button--active {
+  color: var(--primary);
+}
+
+.pin-button--active::before {
+  opacity: 0.22;
+  transform: scale(1);
+}
+
+.pin-button__icon {
+  position: relative;
+  z-index: 1;
+  transition:
+    transform 200ms ease,
+    color 200ms ease;
+}
+
+.pin-button--idle .pin-button__icon {
+  transform: rotate(-12deg) scale(0.92);
+}
+
+.pin-button--active .pin-button__icon {
+  transform: translateY(-1px) scale(1);
+}
+
+.pin-button[data-pin-fx='pinning']::before {
+  animation: pin-button-bloom 560ms cubic-bezier(0.18, 0.88, 0.24, 1);
+}
+
+.pin-button[data-pin-fx='pinning'] .pin-button__icon {
+  animation: pin-icon-twist-in 560ms cubic-bezier(0.18, 0.88, 0.24, 1);
+}
+
+.pin-button[data-pin-fx='unpinning']::before {
+  animation: pin-button-release 460ms cubic-bezier(0.3, 0.07, 0.34, 1);
+}
+
+.pin-button[data-pin-fx='unpinning'] .pin-button__icon {
+  animation: pin-icon-twist-out 460ms cubic-bezier(0.3, 0.07, 0.34, 1);
+}
+
+.session-title {
+  position: relative;
+  display: block;
+}
+
+.session-title__label,
+.session-title__sheen {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-title--loading {
+  --session-loading-base: color-mix(in srgb, currentColor 66%, transparent);
+  --session-loading-bright: color-mix(in srgb, currentColor 30%, white);
+  contain: paint;
+}
+
+.session-title--loading .session-title__label {
+  color: var(--session-loading-base);
+}
+
+.session-title__sheen {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  color: var(--session-loading-bright);
+  opacity: 0.9;
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgb(255 255 255 / 0.04) 16%,
+    rgb(255 255 255 / 0.2) 34%,
+    rgb(255 255 255 / 0.94) 50%,
+    rgb(255 255 255 / 0.2) 66%,
+    rgb(255 255 255 / 0.04) 84%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgb(255 255 255 / 0.04) 16%,
+    rgb(255 255 255 / 0.2) 34%,
+    rgb(255 255 255 / 0.94) 50%,
+    rgb(255 255 255 / 0.2) 66%,
+    rgb(255 255 255 / 0.04) 84%,
+    transparent 100%
+  );
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 42% 100%;
+  mask-size: 42% 100%;
+  -webkit-mask-position: -26% 0;
+  mask-position: -26% 0;
+  will-change: mask-position;
+  animation: session-loading-sheen 2.5s cubic-bezier(0.4, 0.08, 0.22, 0.98) infinite;
+}
+
+.right-button {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(4px);
+}
+
+.session-item:hover .right-button,
+.session-item:focus-within .right-button {
   opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+}
+
+@keyframes session-loading-sheen {
+  from {
+    -webkit-mask-position: -26% 0;
+    mask-position: -26% 0;
+  }
+
+  to {
+    -webkit-mask-position: 126% 0;
+    mask-position: 126% 0;
+  }
+}
+
+@keyframes session-item-pin-glow {
+  0% {
+    opacity: 0;
+    transform: scale(0.985);
+  }
+
+  45% {
+    opacity: 0.72;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.015);
+  }
+}
+
+@keyframes session-item-unpin-glow {
+  0% {
+    opacity: 0;
+    transform: scale(0.992);
+  }
+
+  40% {
+    opacity: 0.32;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.008);
+  }
+}
+
+@keyframes pin-button-bloom {
+  0% {
+    opacity: 0.18;
+    transform: scale(0.68);
+  }
+
+  42% {
+    opacity: 0.42;
+    transform: scale(1.14);
+  }
+
+  100% {
+    opacity: 0.22;
+    transform: scale(1);
+  }
+}
+
+@keyframes pin-button-release {
+  0% {
+    opacity: 0.18;
+    transform: scale(1);
+  }
+
+  40% {
+    opacity: 0.12;
+    transform: scale(0.84);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0.72);
+  }
+}
+
+@keyframes pin-icon-twist-in {
+  0% {
+    transform: rotate(-18deg) scale(0.92);
+  }
+
+  52% {
+    transform: rotate(18deg) translateY(-1px) scale(1.12);
+  }
+
+  100% {
+    transform: translateY(-1px) scale(1);
+  }
+}
+
+@keyframes pin-icon-twist-out {
+  0% {
+    transform: translateY(-1px) scale(1);
+  }
+
+  45% {
+    transform: rotate(14deg) scale(0.96);
+  }
+
+  100% {
+    transform: rotate(-12deg) scale(0.92);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .session-item,
+  .session-item::after,
+  .pin-button::before,
+  .pin-button__icon,
+  .right-button {
+    animation: none;
+    transition: none;
+  }
+
+  .session-title--loading .session-title__label {
+    color: currentColor;
+  }
+
+  .session-title__sheen {
+    display: none;
+  }
 }
 </style>
diff --git a/test/renderer/components/WindowSideBar.test.ts b/test/renderer/components/WindowSideBar.test.ts
index 3888cf089..5f20029c9 100644
--- a/test/renderer/components/WindowSideBar.test.ts
+++ b/test/renderer/components/WindowSideBar.test.ts
@@ -239,7 +239,7 @@ describe('WindowSideBar agent switch', () => {
 
     const item = wrapper.findComponent({ name: 'WindowSideBarSessionItem' })
     item.vm.$emit('toggle-pin', session)
-    await wrapper.vm.$nextTick()
+    await flushPromises()
 
     expect(sessionStore.toggleSessionPinned).toHaveBeenCalledWith('normal-1', true)
   }, 10000)
diff --git a/test/renderer/components/WindowSideBarSessionItem.test.ts b/test/renderer/components/WindowSideBarSessionItem.test.ts
index 024cfa6c8..06d38beb4 100644
--- a/test/renderer/components/WindowSideBarSessionItem.test.ts
+++ b/test/renderer/components/WindowSideBarSessionItem.test.ts
@@ -1,22 +1,29 @@
 import { describe, expect, it, vi } from 'vitest'
-import { defineComponent } from 'vue'
 import { mount } from '@vue/test-utils'
 
-const createSession = (isPinned = false) => ({
+const createSession = (options?: {
+  isPinned?: boolean
+  status?: 'none' | 'working' | 'completed' | 'error'
+}) => ({
   id: 'session-1',
   title: 'Session Title',
   agentId: 'deepchat',
-  status: 'none' as const,
+  status: options?.status ?? ('none' as const),
   projectDir: '',
   providerId: 'provider-1',
   modelId: 'model-1',
-  isPinned,
+  isPinned: options?.isPinned ?? false,
   isDraft: false,
   createdAt: 1,
   updatedAt: 1
 })
 
-const mountComponent = async (isPinned = false) => {
+const mountComponent = async (options?: {
+  isPinned?: boolean
+  status?: 'none' | 'working' | 'completed' | 'error'
+  heroHidden?: boolean
+  pinFeedbackMode?: 'pinning' | 'unpinning' | null
+}) => {
   vi.resetModules()
 
   vi.doMock('vue-i18n', () => ({
@@ -25,30 +32,19 @@ const mountComponent = async (isPinned = false) => {
     })
   }))
 
-  const passthrough = defineComponent({
-    template: '<div><slot /></div>'
-  })
-
-  const contextMenuItemStub = defineComponent({
-    emits: ['select'],
-    template: '<button type="button" @click="$emit(\'select\')"><slot /></button>'
-  })
-
   const WindowSideBarSessionItem = (await import('@/components/WindowSideBarSessionItem.vue'))
     .default
 
   const wrapper = mount(WindowSideBarSessionItem, {
     props: {
-      session: createSession(isPinned),
-      active: false
+      session: createSession(options),
+      active: false,
+      region: options?.isPinned ? 'pinned' : 'grouped',
+      heroHidden: options?.heroHidden ?? false,
+      pinFeedbackMode: options?.pinFeedbackMode ?? null
     },
     global: {
       stubs: {
-        ContextMenu: passthrough,
-        ContextMenuTrigger: passthrough,
-        ContextMenuContent: passthrough,
-        ContextMenuSeparator: passthrough,
-        ContextMenuItem: contextMenuItemStub,
         Icon: true
       }
     }
@@ -61,42 +57,63 @@ describe('WindowSideBarSessionItem', () => {
   it('emits select when the list item is clicked', async () => {
     const wrapper = await mountComponent()
 
-    await wrapper.find('button').trigger('click')
+    await wrapper.find('.session-item').trigger('click')
 
     expect(wrapper.emitted('select')?.[0]).toEqual([expect.objectContaining({ id: 'session-1' })])
   }, 10000)
 
   it('renders the correct pin action label for pinned and unpinned sessions', async () => {
-    const unpinnedWrapper = await mountComponent(false)
-    const pinnedWrapper = await mountComponent(true)
+    const unpinnedWrapper = await mountComponent({ isPinned: false })
+    const pinnedWrapper = await mountComponent({ isPinned: true })
 
-    expect(unpinnedWrapper.text()).toContain('thread.actions.pin')
-    expect(pinnedWrapper.text()).toContain('thread.actions.unpin')
+    const unpinnedPinButton = unpinnedWrapper.find('[aria-label="thread.actions.pin"]')
+    const pinnedPinButton = pinnedWrapper.find('[aria-label="thread.actions.unpin"]')
+
+    expect(unpinnedPinButton.exists()).toBe(true)
+    expect(unpinnedPinButton.attributes('aria-pressed')).toBe('false')
+    expect(pinnedPinButton.exists()).toBe(true)
+    expect(pinnedPinButton.attributes('aria-pressed')).toBe('true')
   }, 10000)
 
-  it('emits context menu actions with the session payload', async () => {
+  it('emits toggle-pin and delete with the session payload', async () => {
     const wrapper = await mountComponent()
-    const menuButtons = wrapper.findAll('button')
-    const renameButton = menuButtons.find((button) =>
-      button.text().includes('thread.actions.rename')
-    )
-    const clearButton = menuButtons.find((button) =>
-      button.text().includes('thread.actions.cleanMessages')
-    )
-    const deleteButton = menuButtons.find((button) =>
-      button.text().includes('thread.actions.delete')
-    )
-
-    expect(renameButton).toBeTruthy()
-    expect(clearButton).toBeTruthy()
-    expect(deleteButton).toBeTruthy()
-
-    await renameButton!.trigger('click')
-    await clearButton!.trigger('click')
-    await deleteButton!.trigger('click')
-
-    expect(wrapper.emitted('rename')?.[0]).toEqual([expect.objectContaining({ id: 'session-1' })])
-    expect(wrapper.emitted('clear')?.[0]).toEqual([expect.objectContaining({ id: 'session-1' })])
+
+    await wrapper.find('[aria-label="thread.actions.pin"]').trigger('click')
+    await wrapper.find('[aria-label="thread.actions.delete"]').trigger('click')
+
+    expect(wrapper.emitted('toggle-pin')?.[0]).toEqual([
+      expect.objectContaining({ id: 'session-1' })
+    ])
     expect(wrapper.emitted('delete')?.[0]).toEqual([expect.objectContaining({ id: 'session-1' })])
   }, 10000)
+
+  it('applies the loading shimmer to the title without rendering loading text', async () => {
+    const wrapper = await mountComponent({ status: 'working' })
+
+    const title = wrapper.find('.session-title')
+    const sheen = wrapper.find('.session-title__sheen')
+
+    expect(title.classes()).toContain('session-title--loading')
+    expect(sheen.exists()).toBe(true)
+    expect(sheen.attributes('aria-hidden')).toBe('true')
+    expect(wrapper.find('.session-status-loading').exists()).toBe(false)
+    expect(wrapper.text()).not.toContain('common.loading')
+    expect(wrapper.find('[aria-label="thread.actions.pin"]').exists()).toBe(true)
+  }, 10000)
+
+  it('exposes hero transition and pin feedback state on the rendered item', async () => {
+    const wrapper = await mountComponent({
+      isPinned: true,
+      heroHidden: true,
+      pinFeedbackMode: 'pinning'
+    })
+
+    const item = wrapper.find('.session-item')
+    const pinButton = wrapper.find('.pin-button')
+
+    expect(item.attributes('data-pin-fx')).toBe('pinning')
+    expect(item.attributes('data-session-id')).toBe('session-1')
+    expect(item.attributes('data-hero-hidden')).toBe('true')
+    expect(pinButton.attributes('data-pin-fx')).toBe('pinning')
+  }, 10000)
 })

From e3d623c8964794576df7c0069b3399f8561b70b6 Mon Sep 17 00:00:00 2001
From: zhangmo8 <wegi866@gmail.com>
Date: Thu, 26 Mar 2026 10:30:54 +0800
Subject: [PATCH 2/4] feat: enhance session management with collapsible groups
 and pinned sessions

---
 src/renderer/src/components/WindowSideBar.vue | 334 ++++++++++--------
 .../components/WindowSideBarSessionItem.vue   |  16 +-
 src/renderer/src/i18n/da-DK/chat.json         |   1 +
 src/renderer/src/i18n/en-US/chat.json         |   1 +
 src/renderer/src/i18n/fa-IR/chat.json         |   1 +
 src/renderer/src/i18n/fr-FR/chat.json         |   1 +
 src/renderer/src/i18n/he-IL/chat.json         |   1 +
 src/renderer/src/i18n/ja-JP/chat.json         |   1 +
 src/renderer/src/i18n/ko-KR/chat.json         |   1 +
 src/renderer/src/i18n/pt-BR/chat.json         |   1 +
 src/renderer/src/i18n/ru-RU/chat.json         |   1 +
 src/renderer/src/i18n/zh-CN/chat.json         |   1 +
 src/renderer/src/i18n/zh-HK/chat.json         |   1 +
 src/renderer/src/i18n/zh-TW/chat.json         |   1 +
 .../renderer/components/WindowSideBar.test.ts | 113 +++++-
 15 files changed, 306 insertions(+), 169 deletions(-)

diff --git a/src/renderer/src/components/WindowSideBar.vue b/src/renderer/src/components/WindowSideBar.vue
index 90a7e73f1..b40661e98 100644
--- a/src/renderer/src/components/WindowSideBar.vue
+++ b/src/renderer/src/components/WindowSideBar.vue
@@ -140,94 +140,105 @@
           </div>
         </div>
 
+        <!-- Empty state -->
+        <div
+          v-if="pinnedSessions.length === 0 && filteredGroups.length === 0"
+          class="flex flex-col items-center justify-center h-full px-4 text-center"
+        >
+          <Icon icon="lucide:message-square-plus" class="w-8 h-8 text-muted-foreground/40 mb-3" />
+          <p class="text-sm text-muted-foreground/60">{{ t('chat.sidebar.emptyTitle') }}</p>
+          <p class="text-xs text-muted-foreground/40 mt-1">
+            {{ t('chat.sidebar.emptyDescription') }}
+          </p>
+        </div>
+
         <!-- Session list -->
         <div ref="sessionListRef" class="session-list flex-1 overflow-y-auto px-1.5">
-          <div v-if="pinnedSessions.length > 0" class="pt-2 space-y-0.5">
-            <WindowSideBarSessionItem
-              v-for="session in pinnedSessions"
-              :key="`pinned-${session.id}`"
-              :session="session"
-              :active="sessionStore.activeSessionId === session.id"
-              region="pinned"
-              :hero-hidden="pinFlightSessionId === session.id"
-              :pin-feedback-mode="pinFeedbackSessionId === session.id ? pinFeedbackMode : null"
-              @select="handleSessionClick"
-              @toggle-pin="handleTogglePin"
-              @rename="openRenameDialog"
-              @clear="openClearDialog"
-              @delete="openDeleteDialog"
-            />
-          </div>
-
-          <!-- Empty state -->
-          <div
-            v-if="pinnedSessions.length === 0 && filteredGroups.length === 0"
-            class="flex flex-col items-center justify-center h-full px-4 text-center"
-          >
-            <Icon icon="lucide:message-square-plus" class="w-8 h-8 text-muted-foreground/40 mb-3" />
-            <p class="text-sm text-muted-foreground/60">{{ t('chat.sidebar.emptyTitle') }}</p>
-            <p class="text-xs text-muted-foreground/40 mt-1">
-              {{ t('chat.sidebar.emptyDescription') }}
-            </p>
+          <div v-if="pinnedSessions.length > 0" class="pt-2">
+            <button
+              type="button"
+              class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs font-medium text-muted-foreground transition-colors duration-150 hover:bg-accent/40 hover:text-foreground"
+              data-group-id="__pinned__"
+              :aria-expanded="!isPinnedSectionCollapsed"
+              @click="togglePinnedSection"
+            >
+              <Icon
+                :icon="isPinnedSectionCollapsed ? 'lucide:chevron-right' : 'lucide:chevron-down'"
+                class="h-3 w-3 shrink-0"
+              />
+              <span class="shrink-0 size-6 flex items-center justify-center">
+                <Icon
+                  :icon="isPinnedSectionCollapsed ? 'lucide:folder-closed' : 'lucide:folder-open'"
+                  class="size-4"
+                />
+              </span>
+              <span class="truncate">
+                {{ t('chat.sidebar.pinned') }}
+              </span>
+            </button>
+
+            <Transition name="sidebar-group-collapse">
+              <div v-if="!isPinnedSectionCollapsed" class="space-y-0.5 pl-4">
+                <WindowSideBarSessionItem
+                  v-for="session in pinnedSessions"
+                  :key="`pinned-${session.id}`"
+                  :session="session"
+                  :active="sessionStore.activeSessionId === session.id"
+                  region="pinned"
+                  :hero-hidden="pinFlightSessionId === session.id"
+                  :pin-feedback-mode="pinFeedbackSessionId === session.id ? pinFeedbackMode : null"
+                  @select="handleSessionClick"
+                  @toggle-pin="handleTogglePin"
+                  @delete="openDeleteDialog"
+                />
+              </div>
+            </Transition>
           </div>
 
-          <template v-for="group in filteredGroups" :key="group.label">
-            <div class="px-1.5 pt-3 pb-1">
-              <span class="text-xs font-medium text-muted-foreground">{{
-                group.labelKey ? t(group.labelKey) : group.label
-              }}</span>
-            </div>
-            <WindowSideBarSessionItem
-              v-for="session in group.sessions"
-              :key="session.id"
-              :session="session"
-              :active="sessionStore.activeSessionId === session.id"
-              region="grouped"
-              :hero-hidden="pinFlightSessionId === session.id"
-              :pin-feedback-mode="pinFeedbackSessionId === session.id ? pinFeedbackMode : null"
-              @select="handleSessionClick"
-              @toggle-pin="handleTogglePin"
-              @rename="openRenameDialog"
-              @clear="openClearDialog"
-              @delete="openDeleteDialog"
-            />
+          <template v-for="group in filteredGroups" :key="getGroupIdentifier(group)">
+            <button
+              type="button"
+              class="mt-2 flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs font-medium text-muted-foreground transition-colors duration-150 hover:bg-accent/40 hover:text-foreground"
+              :data-group-id="getGroupIdentifier(group)"
+              :aria-expanded="!isGroupCollapsed(group)"
+              @click="toggleGroup(group)"
+            >
+              <Icon
+                :icon="isGroupCollapsed(group) ? 'lucide:chevron-right' : 'lucide:chevron-down'"
+                class="h-3 w-3 shrink-0"
+              />
+              <span class="shrink-0 size-6 flex items-center justify-center">
+                <Icon
+                  :icon="isPinnedSectionCollapsed ? 'lucide:folder-closed' : 'lucide:folder-open'"
+                  class="size-4"
+                />
+              </span>
+              <span class="truncate">
+                {{ getGroupLabel(group) }}
+              </span>
+            </button>
+            <Transition name="sidebar-group-collapse">
+              <div v-if="!isGroupCollapsed(group)" class="space-y-0.5 pl-4">
+                <WindowSideBarSessionItem
+                  v-for="session in group.sessions"
+                  :key="session.id"
+                  :session="session"
+                  :active="sessionStore.activeSessionId === session.id"
+                  region="grouped"
+                  :hero-hidden="pinFlightSessionId === session.id"
+                  :pin-feedback-mode="pinFeedbackSessionId === session.id ? pinFeedbackMode : null"
+                  @select="handleSessionClick"
+                  @toggle-pin="handleTogglePin"
+                  @delete="openDeleteDialog"
+                />
+              </div>
+            </Transition>
           </template>
         </div>
       </div>
     </div>
   </TooltipProvider>
 
-  <Dialog v-model:open="renameDialogOpen">
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>{{ t('dialog.rename.title') }}</DialogTitle>
-        <DialogDescription>{{ t('dialog.rename.description') }}</DialogDescription>
-      </DialogHeader>
-      <Input v-model="renameValue" />
-      <DialogFooter>
-        <Button variant="outline" @click="renameDialogOpen = false">{{
-          t('dialog.cancel')
-        }}</Button>
-        <Button variant="default" @click="handleRenameConfirm">{{ t('dialog.confirm') }}</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-
-  <Dialog v-model:open="clearDialogOpen">
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>{{ t('dialog.cleanMessages.title') }}</DialogTitle>
-        <DialogDescription>{{ t('dialog.cleanMessages.description') }}</DialogDescription>
-      </DialogHeader>
-      <DialogFooter>
-        <Button variant="outline" @click="clearDialogOpen = false">{{ t('dialog.cancel') }}</Button>
-        <Button variant="destructive" @click="handleClearConfirm">{{
-          t('dialog.cleanMessages.confirm')
-        }}</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-
   <Dialog v-model:open="deleteDialogOpen">
     <DialogContent>
       <DialogHeader>
@@ -247,9 +258,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
+import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
 import { Icon } from '@iconify/vue'
-import { Input } from '@shadcn/components/ui/input'
 import {
   Tooltip,
   TooltipContent,
@@ -268,7 +278,7 @@ import {
 import { usePresenter, useRemoteControlPresenter } from '@/composables/usePresenter'
 import { SETTINGS_EVENTS } from '@/events'
 import { useAgentStore } from '@/stores/ui/agent'
-import { useSessionStore, type UISession } from '@/stores/ui/session'
+import { useSessionStore, type SessionGroup, type UISession } from '@/stores/ui/session'
 import type { TelegramRemoteStatus } from '@shared/presenter'
 import AgentAvatar from './icons/AgentAvatar.vue'
 import WindowSideBarSessionItem from './WindowSideBarSessionItem.vue'
@@ -277,7 +287,7 @@ import { useI18n } from 'vue-i18n'
 type PinFeedbackMode = 'pinning' | 'unpinning'
 
 const PIN_FEEDBACK_DURATION_MS = 560
-const PIN_FLIGHT_DURATION_MS = 360
+const PIN_FLIGHT_DURATION_MS = 500
 
 const windowPresenter = usePresenter('windowPresenter')
 const remoteControlPresenter = useRemoteControlPresenter()
@@ -318,43 +328,92 @@ const remoteControlIconClass = computed(() => {
   return ['text-emerald-600 dark:text-emerald-400', state === 'starting' ? 'animate-pulse' : '']
 })
 
+const isPinnedSectionCollapsed = ref(false)
+const collapsedGroupIds = ref<Set<string>>(new Set())
 const pinnedSessions = computed(() => sessionStore.getPinnedSessions(agentStore.selectedAgentId))
 const filteredGroups = computed(() => sessionStore.getFilteredGroups(agentStore.selectedAgentId))
 const pinFlightSessionId = ref<string | null>(null)
 const pinFeedbackSessionId = ref<string | null>(null)
 const pinFeedbackMode = ref<PinFeedbackMode | null>(null)
 const sessionListRef = ref<HTMLElement | null>(null)
-const renameTargetSession = ref<UISession | null>(null)
-const clearTargetSession = ref<UISession | null>(null)
 const deleteTargetSession = ref<UISession | null>(null)
-const renameValue = ref('')
 
-const renameDialogOpen = computed({
-  get: () => renameTargetSession.value !== null,
+const deleteDialogOpen = computed({
+  get: () => deleteTargetSession.value !== null,
   set: (open: boolean) => {
     if (!open) {
-      renameTargetSession.value = null
+      deleteTargetSession.value = null
     }
   }
 })
 
-const clearDialogOpen = computed({
-  get: () => clearTargetSession.value !== null,
-  set: (open: boolean) => {
-    if (!open) {
-      clearTargetSession.value = null
-    }
+const getGroupIdentifier = (group: SessionGroup) => group.labelKey ?? group.label
+
+const getGroupLabel = (group: SessionGroup) => (group.labelKey ? t(group.labelKey) : group.label)
+
+const isGroupCollapsed = (group: SessionGroup) =>
+  collapsedGroupIds.value.has(getGroupIdentifier(group))
+
+const togglePinnedSection = () => {
+  isPinnedSectionCollapsed.value = !isPinnedSectionCollapsed.value
+}
+
+const toggleGroup = (group: SessionGroup) => {
+  const groupId = getGroupIdentifier(group)
+  const nextCollapsedGroupIds = new Set(collapsedGroupIds.value)
+
+  if (nextCollapsedGroupIds.has(groupId)) {
+    nextCollapsedGroupIds.delete(groupId)
+  } else {
+    nextCollapsedGroupIds.add(groupId)
   }
-})
 
-const deleteDialogOpen = computed({
-  get: () => deleteTargetSession.value !== null,
-  set: (open: boolean) => {
-    if (!open) {
-      deleteTargetSession.value = null
+  collapsedGroupIds.value = nextCollapsedGroupIds
+}
+
+watch(
+  [pinnedSessions, () => sessionStore.activeSessionId],
+  ([sessions, activeSessionId]) => {
+    if (sessions.length === 0) {
+      isPinnedSectionCollapsed.value = false
+      return
     }
-  }
-})
+
+    if (activeSessionId && sessions.some((session) => session.id === activeSessionId)) {
+      isPinnedSectionCollapsed.value = false
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  [filteredGroups, () => sessionStore.activeSessionId],
+  ([groups, activeSessionId]) => {
+    const validGroupIds = new Set(groups.map(getGroupIdentifier))
+    const nextCollapsedGroupIds = new Set(
+      [...collapsedGroupIds.value].filter((groupId) => validGroupIds.has(groupId))
+    )
+
+    if (activeSessionId) {
+      const activeGroup = groups.find((group) =>
+        group.sessions.some((session) => session.id === activeSessionId)
+      )
+
+      if (activeGroup) {
+        nextCollapsedGroupIds.delete(getGroupIdentifier(activeGroup))
+      }
+    }
+
+    const stateChanged =
+      nextCollapsedGroupIds.size !== collapsedGroupIds.value.size ||
+      [...nextCollapsedGroupIds].some((groupId) => !collapsedGroupIds.value.has(groupId))
+
+    if (stateChanged) {
+      collapsedGroupIds.value = nextCollapsedGroupIds
+    }
+  },
+  { immediate: true }
+)
 
 const openSettings = () => {
   const windowId = window.api.getWindowId()
@@ -433,25 +492,7 @@ const handleSessionClick = (session: { id: string }) => {
   void sessionStore.selectSession(session.id)
 }
 
-const closeAllSessionDialogs = () => {
-  renameTargetSession.value = null
-  clearTargetSession.value = null
-  deleteTargetSession.value = null
-}
-
-const openRenameDialog = (session: UISession) => {
-  closeAllSessionDialogs()
-  renameValue.value = session.title
-  renameTargetSession.value = session
-}
-
-const openClearDialog = (session: UISession) => {
-  closeAllSessionDialogs()
-  clearTargetSession.value = session
-}
-
 const openDeleteDialog = (session: UISession) => {
-  closeAllSessionDialogs()
   deleteTargetSession.value = session
 }
 
@@ -626,36 +667,6 @@ const handleTogglePin = async (session: UISession) => {
   }
 }
 
-const handleRenameConfirm = async () => {
-  const targetSession = renameTargetSession.value
-  if (!targetSession) {
-    return
-  }
-
-  try {
-    await sessionStore.renameSession(targetSession.id, renameValue.value)
-  } catch (error) {
-    console.error(t('common.error.renameChatFailed'), error)
-  }
-
-  renameTargetSession.value = null
-}
-
-const handleClearConfirm = async () => {
-  const targetSession = clearTargetSession.value
-  if (!targetSession) {
-    return
-  }
-
-  try {
-    await sessionStore.clearSessionMessages(targetSession.id)
-  } catch (error) {
-    console.error(t('common.error.cleanMessagesFailed'), error)
-  }
-
-  clearTargetSession.value = null
-}
-
 const handleDeleteConfirm = async () => {
   const targetSession = deleteTargetSession.value
   if (!targetSession) {
@@ -706,4 +717,27 @@ button {
   transform: translateZ(0);
   backface-visibility: hidden;
 }
+
+.sidebar-group-collapse-enter-active,
+.sidebar-group-collapse-leave-active {
+  overflow: hidden;
+  transition:
+    max-height 180ms ease,
+    opacity 160ms ease,
+    transform 180ms ease;
+}
+
+.sidebar-group-collapse-enter-from,
+.sidebar-group-collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.sidebar-group-collapse-enter-to,
+.sidebar-group-collapse-leave-from {
+  max-height: 720px;
+  opacity: 1;
+  transform: translateY(0);
+}
 </style>
diff --git a/src/renderer/src/components/WindowSideBarSessionItem.vue b/src/renderer/src/components/WindowSideBarSessionItem.vue
index 2363706d8..8a3fd44cd 100644
--- a/src/renderer/src/components/WindowSideBarSessionItem.vue
+++ b/src/renderer/src/components/WindowSideBarSessionItem.vue
@@ -23,8 +23,6 @@ const props = defineProps<{
 const emit = defineEmits<{
   select: [session: UISession]
   'toggle-pin': [session: UISession]
-  rename: [session: UISession]
-  clear: [session: UISession]
   delete: [session: UISession]
 }>()
 
@@ -38,7 +36,7 @@ const pinActionLabel = computed(() =>
 
 <template>
   <div
-    class="session-item no-drag flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-200"
+    class="session-item no-drag flex w-full items-center gap-1 rounded-md px-2 py-1.5 text-left transition-colors duration-200"
     :class="active ? 'bg-accent text-accent-foreground' : 'text-foreground/80 hover:bg-accent/50'"
     :data-pin-fx="pinFeedbackMode ?? undefined"
     :data-hero-hidden="heroHidden ? 'true' : undefined"
@@ -178,8 +176,20 @@ const pinActionLabel = computed(() =>
   background: var(--accent);
 }
 
+.session-item:hover .pin-button--idle,
+.session-item:focus-within .pin-button--idle,
+.session-item[data-pin-fx] .pin-button--idle,
+.pin-button[data-pin-fx] {
+  visibility: visible;
+}
+
+.sidebar-pin-flight .pin-button--idle {
+  visibility: visible;
+}
+
 .pin-button--idle {
   color: var(--muted-foreground);
+  visibility: hidden;
 }
 
 .pin-button--active {
diff --git a/src/renderer/src/i18n/da-DK/chat.json b/src/renderer/src/i18n/da-DK/chat.json
index c091c554f..6c41ea1f4 100644
--- a/src/renderer/src/i18n/da-DK/chat.json
+++ b/src/renderer/src/i18n/da-DK/chat.json
@@ -258,6 +258,7 @@
     },
     "groupByDate": "Gruppér efter dato",
     "groupByProject": "Gruppér efter projekt",
+    "pinned": "Fastgjorte",
     "emptyTitle": "Ingen samtaler endnu",
     "emptyDescription": "Start en ny samtale for at komme i gang"
   },
diff --git a/src/renderer/src/i18n/en-US/chat.json b/src/renderer/src/i18n/en-US/chat.json
index 23027b9cb..11fa8cc55 100644
--- a/src/renderer/src/i18n/en-US/chat.json
+++ b/src/renderer/src/i18n/en-US/chat.json
@@ -271,6 +271,7 @@
     },
     "groupByDate": "Group by date",
     "groupByProject": "Group by project",
+    "pinned": "Pinned",
     "emptyTitle": "No conversations yet",
     "emptyDescription": "Start a new chat to begin"
   }
diff --git a/src/renderer/src/i18n/fa-IR/chat.json b/src/renderer/src/i18n/fa-IR/chat.json
index cec1b2301..3ffc42f5b 100644
--- a/src/renderer/src/i18n/fa-IR/chat.json
+++ b/src/renderer/src/i18n/fa-IR/chat.json
@@ -258,6 +258,7 @@
     },
     "groupByDate": "گروه‌بندی بر اساس تاریخ",
     "groupByProject": "گروه‌بندی بر اساس پروژه",
+    "pinned": "سنجاق‌شده‌ها",
     "emptyTitle": "هنوز گفت‌وگویی وجود ندارد",
     "emptyDescription": "برای شروع، یک گفت‌وگوی جدید آغاز کنید"
   },
diff --git a/src/renderer/src/i18n/fr-FR/chat.json b/src/renderer/src/i18n/fr-FR/chat.json
index e9b4e1ed7..6bae15ce3 100644
--- a/src/renderer/src/i18n/fr-FR/chat.json
+++ b/src/renderer/src/i18n/fr-FR/chat.json
@@ -258,6 +258,7 @@
     },
     "groupByDate": "Grouper par date",
     "groupByProject": "Grouper par projet",
+    "pinned": "Épinglés",
     "emptyTitle": "Aucune conversation pour le moment",
     "emptyDescription": "Commencez une nouvelle discussion pour démarrer"
   },
diff --git a/src/renderer/src/i18n/he-IL/chat.json b/src/renderer/src/i18n/he-IL/chat.json
index 5785a1380..bc2269866 100644
--- a/src/renderer/src/i18n/he-IL/chat.json
+++ b/src/renderer/src/i18n/he-IL/chat.json
@@ -258,6 +258,7 @@
     },
     "groupByDate": "קבץ לפי תאריך",
     "groupByProject": "קבץ לפי פרויקט",
+    "pinned": "נעוצים",
     "emptyTitle": "עדיין אין שיחות",
     "emptyDescription": "התחילו שיחה חדשה כדי להתחיל"
   },
diff --git a/src/renderer/src/i18n/ja-JP/chat.json b/src/renderer/src/i18n/ja-JP/chat.json
index be1f572f5..11a5658e5 100644
--- a/src/renderer/src/i18n/ja-JP/chat.json
+++ b/src/renderer/src/i18n/ja-JP/chat.json
@@ -258,6 +258,7 @@
     },
     "groupByDate": "日付でグループ化",
     "groupByProject": "プロジェクトでグループ化",
+    "pinned": "ピン留め",
     "emptyTitle": "まだ会話がありません",
     "emptyDescription": "新しいチャットを始めましょう"
   },
diff --git a/src/renderer/src/i18n/ko-KR/chat.json b/src/renderer/src/i18n/ko-KR/chat.json
index 2c7cdc16a..d80204203 100644
--- a/src/renderer/src/i18n/ko-KR/chat.json
+++ b/src/renderer/src/i18n/ko-KR/chat.json
@@ -258,6 +258,7 @@
     },
     "groupByDate": "날짜별 그룹화",
     "groupByProject": "프로젝트별 그룹화",
+    "pinned": "고정됨",
     "emptyTitle": "아직 대화가 없습니다",
     "emptyDescription": "새 대화를 시작해 보세요"
   },
diff --git a/src/renderer/src/i18n/pt-BR/chat.json b/src/renderer/src/i18n/pt-BR/chat.json
index f3dcddfd6..92cb2ceb5 100644
--- a/src/renderer/src/i18n/pt-BR/chat.json
+++ b/src/renderer/src/i18n/pt-BR/chat.json
@@ -258,6 +258,7 @@
     },
     "groupByDate": "Agrupar por data",
     "groupByProject": "Agrupar por projeto",
+    "pinned": "Fixados",
     "emptyTitle": "Ainda não há conversas",
     "emptyDescription": "Inicie um novo chat para começar"
   },
diff --git a/src/renderer/src/i18n/ru-RU/chat.json b/src/renderer/src/i18n/ru-RU/chat.json
index 9fa2b7162..ee60c523b 100644
--- a/src/renderer/src/i18n/ru-RU/chat.json
+++ b/src/renderer/src/i18n/ru-RU/chat.json
@@ -258,6 +258,7 @@
     },
     "groupByDate": "Группировать по дате",
     "groupByProject": "Группировать по проекту",
+    "pinned": "Закрепленные",
     "emptyTitle": "Пока нет диалогов",
     "emptyDescription": "Начните новый чат, чтобы приступить"
   },
diff --git a/src/renderer/src/i18n/zh-CN/chat.json b/src/renderer/src/i18n/zh-CN/chat.json
index 538561917..856ccd0f3 100644
--- a/src/renderer/src/i18n/zh-CN/chat.json
+++ b/src/renderer/src/i18n/zh-CN/chat.json
@@ -271,6 +271,7 @@
     },
     "groupByDate": "按时间分组",
     "groupByProject": "按项目分组",
+    "pinned": "置顶会话",
     "emptyTitle": "还没有会话",
     "emptyDescription": "开始一个新会话吧"
   }
diff --git a/src/renderer/src/i18n/zh-HK/chat.json b/src/renderer/src/i18n/zh-HK/chat.json
index 410d9e680..95ca4a60b 100644
--- a/src/renderer/src/i18n/zh-HK/chat.json
+++ b/src/renderer/src/i18n/zh-HK/chat.json
@@ -258,6 +258,7 @@
     },
     "groupByDate": "按時間分組",
     "groupByProject": "按專案分組",
+    "pinned": "置頂會話",
     "emptyTitle": "還沒有對話",
     "emptyDescription": "開始一個新對話吧"
   },
diff --git a/src/renderer/src/i18n/zh-TW/chat.json b/src/renderer/src/i18n/zh-TW/chat.json
index bf4c0ce9d..291ae607d 100644
--- a/src/renderer/src/i18n/zh-TW/chat.json
+++ b/src/renderer/src/i18n/zh-TW/chat.json
@@ -258,6 +258,7 @@
     },
     "groupByDate": "依時間分組",
     "groupByProject": "依專案分組",
+    "pinned": "置頂會話",
     "emptyTitle": "還沒有對話",
     "emptyDescription": "開始新的對話吧"
   },
diff --git a/test/renderer/components/WindowSideBar.test.ts b/test/renderer/components/WindowSideBar.test.ts
index 5f20029c9..a659f1bdd 100644
--- a/test/renderer/components/WindowSideBar.test.ts
+++ b/test/renderer/components/WindowSideBar.test.ts
@@ -3,6 +3,7 @@ import { defineComponent, reactive } from 'vue'
 import { flushPromises, mount } from '@vue/test-utils'
 
 type SetupOptions = {
+  groupMode?: 'time' | 'project'
   pinnedSessions?: Array<{ id: string; title: string; status: string; isPinned?: boolean }>
   groups?: Array<{
     label: string
@@ -40,7 +41,7 @@ const setup = async (options: SetupOptions = {}) => {
   })
 
   const sessionStore = reactive({
-    groupMode: 'time' as const,
+    groupMode: (options.groupMode ?? 'time') as 'time' | 'project',
     activeSessionId: 'session-1' as string | null,
     hasActiveSession: true,
     selectSession: vi.fn(async (id: string) => {
@@ -216,10 +217,38 @@ describe('WindowSideBar agent switch', () => {
     await wrapper.vm.$nextTick()
 
     expect(wrapper.text()).toContain('Pinned Session')
+    expect(wrapper.text()).toContain('chat.sidebar.pinned')
     expect(wrapper.text()).toContain('common.time.today')
     expect(wrapper.text()).toContain('Normal Session')
   }, 10000)
 
+  it('collapses and expands pinned sessions from the pinned folder header', async () => {
+    const { wrapper } = await setup({
+      pinnedSessions: [
+        {
+          id: 'pinned-1',
+          title: 'Pinned Session',
+          status: 'none'
+        }
+      ]
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('chat.sidebar.pinned')
+    expect(wrapper.text()).toContain('Pinned Session')
+
+    await wrapper.find('[data-group-id="__pinned__"]').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).not.toContain('Pinned Session')
+
+    await wrapper.find('[data-group-id="__pinned__"]').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('Pinned Session')
+  }, 10000)
+
   it('toggles pinned state from a session item action', async () => {
     const session = {
       id: 'normal-1',
@@ -244,7 +273,73 @@ describe('WindowSideBar agent switch', () => {
     expect(sessionStore.toggleSessionPinned).toHaveBeenCalledWith('normal-1', true)
   }, 10000)
 
-  it('opens dialogs and dispatches rename, clear, and delete actions', async () => {
+  it('collapses and expands time groups from the folder header', async () => {
+    const { wrapper } = await setup({
+      groups: [
+        {
+          label: 'common.time.today',
+          labelKey: 'common.time.today',
+          sessions: [
+            {
+              id: 'time-1',
+              title: 'Today Session',
+              status: 'none'
+            }
+          ]
+        }
+      ]
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('common.time.today')
+    expect(wrapper.text()).toContain('Today Session')
+
+    await wrapper.find('[data-group-id="common.time.today"]').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).not.toContain('Today Session')
+
+    await wrapper.find('[data-group-id="common.time.today"]').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('Today Session')
+  }, 10000)
+
+  it('collapses and expands project groups from the folder header', async () => {
+    const { wrapper } = await setup({
+      groupMode: 'project',
+      groups: [
+        {
+          label: 'DeepChat',
+          sessions: [
+            {
+              id: 'project-1',
+              title: 'Project Session',
+              status: 'none'
+            }
+          ]
+        }
+      ]
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('DeepChat')
+    expect(wrapper.text()).toContain('Project Session')
+
+    await wrapper.find('[data-group-id="DeepChat"]').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).not.toContain('Project Session')
+
+    await wrapper.find('[data-group-id="DeepChat"]').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('Project Session')
+  }, 10000)
+
+  it('opens the delete dialog and dispatches delete actions', async () => {
     const session = {
       id: 'normal-1',
       title: 'Normal Session',
@@ -263,20 +358,6 @@ describe('WindowSideBar agent switch', () => {
 
     const item = wrapper.findComponent({ name: 'WindowSideBarSessionItem' })
 
-    item.vm.$emit('rename', session)
-    await wrapper.vm.$nextTick()
-    expect(wrapper.text()).toContain('dialog.rename.title')
-    ;(wrapper.vm as any).renameValue = 'Renamed Session'
-    await (wrapper.vm as any).handleRenameConfirm()
-    expect(sessionStore.renameSession).toHaveBeenCalledWith('normal-1', 'Renamed Session')
-
-    item.vm.$emit('clear', session)
-    await wrapper.vm.$nextTick()
-    expect(wrapper.text()).toContain('dialog.cleanMessages.title')
-
-    await (wrapper.vm as any).handleClearConfirm()
-    expect(sessionStore.clearSessionMessages).toHaveBeenCalledWith('normal-1')
-
     item.vm.$emit('delete', session)
     await wrapper.vm.$nextTick()
     expect(wrapper.text()).toContain('dialog.delete.title')

From faf1690ce9e83bd523bab7aa959c4c7cc6e2a2b7 Mon Sep 17 00:00:00 2001
From: zhangmo8 <wegi866@gmail.com>
Date: Thu, 26 Mar 2026 11:32:27 +0800
Subject: [PATCH 3/4] chore: update

---
 src/renderer/src/components/WindowSideBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/src/components/WindowSideBar.vue b/src/renderer/src/components/WindowSideBar.vue
index 7b06a8885..d2817a173 100644
--- a/src/renderer/src/components/WindowSideBar.vue
+++ b/src/renderer/src/components/WindowSideBar.vue
@@ -281,7 +281,7 @@ import { usePresenter, useRemoteControlPresenter } from '@/composables/usePresen
 import { SETTINGS_EVENTS } from '@/events'
 import { useAgentStore } from '@/stores/ui/agent'
 import { useSessionStore, type SessionGroup, type UISession } from '@/stores/ui/session'
-import type { TelegramRemoteStatus } from '@shared/presenter'
+import type { TelegramRemoteStatus, FeishuRemoteStatus, RemoteRuntimeState } from '@shared/presenter'
 import AgentAvatar from './icons/AgentAvatar.vue'
 import WindowSideBarSessionItem from './WindowSideBarSessionItem.vue'
 import { useI18n } from 'vue-i18n'

From fb095b637d3faa124225e672452f0fb2d363f23c Mon Sep 17 00:00:00 2001
From: zhangmo8 <wegi866@gmail.com>
Date: Thu, 26 Mar 2026 12:33:43 +0800
Subject: [PATCH 4/4] chore: update

---
 src/renderer/src/components/WindowSideBar.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/components/WindowSideBar.vue b/src/renderer/src/components/WindowSideBar.vue
index d2817a173..6e4204761 100644
--- a/src/renderer/src/components/WindowSideBar.vue
+++ b/src/renderer/src/components/WindowSideBar.vue
@@ -281,7 +281,11 @@ import { usePresenter, useRemoteControlPresenter } from '@/composables/usePresen
 import { SETTINGS_EVENTS } from '@/events'
 import { useAgentStore } from '@/stores/ui/agent'
 import { useSessionStore, type SessionGroup, type UISession } from '@/stores/ui/session'
-import type { TelegramRemoteStatus, FeishuRemoteStatus, RemoteRuntimeState } from '@shared/presenter'
+import type {
+  TelegramRemoteStatus,
+  FeishuRemoteStatus,
+  RemoteRuntimeState
+} from '@shared/presenter'
 import AgentAvatar from './icons/AgentAvatar.vue'
 import WindowSideBarSessionItem from './WindowSideBarSessionItem.vue'
 import { useI18n } from 'vue-i18n'