From e1ea875c2187ae1b881db4fe2da9f7a3864da7fb Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sun, 8 Sep 2024 22:55:58 +0800
Subject: [PATCH] feat: Add list styling and optimize DragableList component

- Added list styling functionality to the DragableList component.
- Removed unused imports and updated container height to accommodate additional content.
---
 .../src/components/DragableList/index.tsx     |  7 +++--
 src/renderer/src/pages/home/Topics.tsx        | 31 +++----------------
 2 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/src/renderer/src/components/DragableList/index.tsx b/src/renderer/src/components/DragableList/index.tsx
index e6e64a97..41c613fb 100644
--- a/src/renderer/src/components/DragableList/index.tsx
+++ b/src/renderer/src/components/DragableList/index.tsx
@@ -13,13 +13,14 @@ import { FC } from 'react'
 interface Props<T> {
   list: T[]
   style?: React.CSSProperties
+  listStyle?: React.CSSProperties
   children: (item: T, index: number) => React.ReactNode
   onUpdate: (list: T[]) => void
   onDragStart?: OnDragStartResponder
   onDragEnd?: OnDragEndResponder
 }
 
-const DragableList: FC<Props<any>> = ({ children, list, style, onDragStart, onUpdate, onDragEnd }) => {
+const DragableList: FC<Props<any>> = ({ children, list, style, listStyle, onDragStart, onUpdate, onDragEnd }) => {
   const _onDragEnd = (result: DropResult, provided: ResponderProvided) => {
     onDragEnd?.(result, provided)
     if (result.destination) {
@@ -34,7 +35,7 @@ const DragableList: FC<Props<any>> = ({ children, list, style, onDragStart, onUp
     <DragDropContext onDragStart={onDragStart} onDragEnd={_onDragEnd}>
       <Droppable droppableId="droppable">
         {(provided) => (
-          <div {...provided.droppableProps} ref={provided.innerRef}>
+          <div {...provided.droppableProps} ref={provided.innerRef} style={{ ...style }}>
             {list.map((item, index) => (
               <Draggable key={`draggable_${item.id}_${index}`} draggableId={item.id} index={index}>
                 {(provided) => (
@@ -42,7 +43,7 @@ const DragableList: FC<Props<any>> = ({ children, list, style, onDragStart, onUp
                     ref={provided.innerRef}
                     {...provided.draggableProps}
                     {...provided.dragHandleProps}
-                    style={{ ...provided.draggableProps.style, marginBottom: 8, ...style }}>
+                    style={{ ...provided.draggableProps.style, marginBottom: 8, ...listStyle }}>
                     {children(item, index)}
                   </div>
                 )}
diff --git a/src/renderer/src/pages/home/Topics.tsx b/src/renderer/src/pages/home/Topics.tsx
index 28ceee2d..75f3d078 100644
--- a/src/renderer/src/pages/home/Topics.tsx
+++ b/src/renderer/src/pages/home/Topics.tsx
@@ -6,9 +6,9 @@ import { fetchMessagesSummary } from '@renderer/services/api'
 import LocalStorage from '@renderer/services/storage'
 import { useAppSelector } from '@renderer/store'
 import { Assistant, Topic } from '@renderer/types'
-import { Button, Dropdown, MenuProps } from 'antd'
-import { findIndex, take } from 'lodash'
-import { FC, useCallback, useState } from 'react'
+import { Dropdown, MenuProps } from 'antd'
+import { findIndex } from 'lodash'
+import { FC, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -20,8 +20,6 @@ interface Props {
 
 const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic }) => {
   const { assistant, removeTopic, updateTopic, updateTopics } = useAssistant(_assistant.id)
-  const [showAll, setShowAll] = useState(false)
-  const [draging, setDraging] = useState(false)
   const { t } = useTranslation()
   const generating = useAppSelector((state) => state.runtime.generating)
 
@@ -99,14 +97,7 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
 
   return (
     <Container>
-      <DragableList
-        list={take(assistant.topics, showAll ? assistant.topics.length : 14)}
-        onUpdate={updateTopics}
-        onDragStart={() => {
-          setShowAll(true)
-          setDraging(true)
-        }}
-        onDragEnd={() => setDraging(false)}>
+      <DragableList list={assistant.topics} onUpdate={updateTopics}>
         {(topic) => {
           const isActive = topic.id === activeTopic?.id
           return (
@@ -128,13 +119,6 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
           )
         }}
       </DragableList>
-      {!draging && assistant.topics.length > 15 && (
-        <Footer>
-          <Button type="link" onClick={() => setShowAll(!showAll)}>
-            {showAll ? t('button.collapse') : t('button.show.all')}
-          </Button>
-        </Footer>
-      )}
     </Container>
   )
 }
@@ -145,7 +129,7 @@ const Container = styled.div`
   flex-direction: column;
   padding-top: 10px;
   overflow-y: scroll;
-  height: calc(100vh - var(--navbar-height));
+  max-height: calc(100vh - var(--navbar-height) - 140px);
 `
 
 const TopicListItem = styled.div`
@@ -204,9 +188,4 @@ const MenuButton = styled.div`
   }
 `
 
-const Footer = styled.div`
-  margin: 0 4px;
-  margin-bottom: 10px;
-`
-
 export default Topics