✨ feat: Add scroll support for pinned assistants using ScrollShadow (#9319)

* ✨ feat: Add scroll support for pinned assistants using ScrollShadow

- Import ScrollShadow component from @lobehub/ui
- Wrap pinned assistants list with ScrollShadow for vertical scrolling
- Remove 9-item limitation to show all pinned assistants
- Maintain hotkey support for first 9 items
- Add proper styling and padding for consistent layout

Fixes #9316

Co-authored-by: Shinji-Li <ONLY-yours@users.noreply.github.com>

* fix: add some style

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Shinji-Li <ONLY-yours@users.noreply.github.com>

src/app/[variants]/(main)/_layout/Desktop/SideBar/PinList/index.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Tooltip } from '@lobehub/ui';
+import { Avatar, ScrollShadow, Tooltip } from '@lobehub/ui';
 import { Divider } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -82,33 +82,35 @@ const PinList = () => {
     hasList && (
       <>
         <Divider style={{ marginBottom: 8, marginTop: 4 }} />
-        <Flexbox flex={1} gap={12} height={'100%'}>
-          {list.slice(0, 9).map((item, index) => (
-            <Flexbox key={item.id} style={{ position: 'relative' }}>
-              <Tooltip
-                hotkey={hotkey.replaceAll(KeyEnum.Number, String(index + 1))}
-                placement={'right'}
-                title={sessionHelpers.getTitle(item.meta)}
-              >
-                <Flexbox
-                  className={cx(
-                    styles.ink,
-                    isPinned && activeId === item.id ? styles.inkActive : undefined,
-                  )}
+        <ScrollShadow height={"100%"} hideScrollBar={true} size={40}>
+          <Flexbox gap={12} style={{ padding: '0' }}>
+            {list.map((item, index) => (
+              <Flexbox key={item.id} style={{ position: 'relative' }}>
+                <Tooltip
+                  hotkey={index < 9 ? hotkey.replaceAll(KeyEnum.Number, String(index + 1)) : undefined}
+                  placement={'right'}
+                  title={sessionHelpers.getTitle(item.meta)}
                 >
-                  <Avatar
-                    avatar={sessionHelpers.getAvatar(item.meta)}
-                    background={item.meta.backgroundColor}
-                    onClick={() => {
-                      switchAgent(item.id);
-                    }}
-                    size={40}
-                  />
-                </Flexbox>
-              </Tooltip>
-            </Flexbox>
-          ))}
-        </Flexbox>
+                  <Flexbox
+                    className={cx(
+                      styles.ink,
+                      isPinned && activeId === item.id ? styles.inkActive : undefined,
+                    )}
+                  >
+                    <Avatar
+                      avatar={sessionHelpers.getAvatar(item.meta)}
+                      background={item.meta.backgroundColor}
+                      onClick={() => {
+                        switchAgent(item.id);
+                      }}
+                      size={40}
+                    />
+                  </Flexbox>
+                </Tooltip>
+              </Flexbox>
+            ))}
+          </Flexbox>
+        </ScrollShadow>
       </>
     )
   );

src/app/[variants]/(main)/_layout/Desktop/SideBar/index.tsx

@@ -52,7 +52,11 @@ const Nav = memo(() => {
         }}
         topActions={
           <Suspense>
-            <div className={electronStylish.nodrag}>
+            <div className={electronStylish.nodrag} style={{
+              display: 'flex',
+              flexDirection: 'column',
+              maxHeight: "calc(100vh - 150px)"
+            }}>
               <Top />
               {showPinList && <PinList />}
             </div>