style(Sidebar, Messages, ModelSettings): update icon styles and clean up unused imports

- Added 'icon' class to various icons in Sidebar for consistent styling.
- Removed unused loading state from Messages component.
- Cleaned up iconStyle variable in ModelSettings as it was no longer needed.

src/renderer/src/components/app/Sidebar.tsx

@@ -90,7 +90,7 @@ const Sidebar: FC = () => {
       <Menus>
         <Tooltip title={t('docs.title')} mouseEnterDelay={0.8} placement="right">
           <Icon theme={theme} onClick={onOpenDocs} className={minappShow && currentMinappId === docsId ? 'active' : ''}>
-            <CircleHelp size={20} />
+            <CircleHelp size={20} className="icon" />
           </Icon>
         </Tooltip>
         <Tooltip
@@ -98,7 +98,7 @@ const Sidebar: FC = () => {
           mouseEnterDelay={0.8}
           placement="right">
           <Icon theme={theme} onClick={() => toggleTheme()}>
-            {theme === 'dark' ? <Moon size={20} /> : <Sun size={20} />}
+            {theme === 'dark' ? <Moon size={20} className="icon" /> : <Sun size={20} className="icon" />}
           </Icon>
         </Tooltip>
         <Tooltip title={t('settings.title')} mouseEnterDelay={0.8} placement="right">
@@ -108,7 +108,7 @@ const Sidebar: FC = () => {
               await to('/settings/provider')
             }}>
             <Icon theme={theme} className={pathname.startsWith('/settings') && !minappShow ? 'active' : ''}>
-              <Settings size={20} />
+              <Settings size={20} className="icon" />
             </Icon>
           </StyledLink>
         </Tooltip>
@@ -130,13 +130,13 @@ const MainMenus: FC = () => {
   const isRoutes = (path: string): string => (pathname.startsWith(path) && !minappShow ? 'active' : '')
 
   const iconMap = {
-    assistants: <MessageSquareQuote size={18} />,
+    assistants: <MessageSquareQuote size={18} className="icon" />,
-    agents: <Sparkle size={18} />,
+    agents: <Sparkle size={18} className="icon" />,
-    paintings: <Palette size={18} />,
+    paintings: <Palette size={18} className="icon" />,
-    translate: <Languages size={18} />,
+    translate: <Languages size={18} className="icon" />,
-    minapp: <LayoutGrid size={18} />,
+    minapp: <LayoutGrid size={18} className="icon" />,
-    knowledge: <LibraryBig size={18} />,
+    knowledge: <LibraryBig size={18} className="icon" />,
-    files: <Folder size={17} />
+    files: <Folder size={17} className="icon" />
   }
 
   const pathMap = {
@@ -365,30 +365,19 @@ const Icon = styled.div<{ theme: string }>`
   box-sizing: border-box;
   -webkit-app-region: none;
   border: 0.5px solid transparent;
-  .iconfont,
-  .anticon {
-    color: var(--color-icon);
-    font-size: 20px;
-    text-decoration: none;
-  }
-  .anticon {
-    font-size: 17px;
-  }
   &:hover {
     background-color: ${({ theme }) => (theme === 'dark' ? 'var(--color-black)' : 'var(--color-white)')};
     opacity: 0.8;
     cursor: pointer;
-    .iconfont,
+    .icon {
-    .anticon {
       color: var(--color-icon-white);
     }
   }
   &.active {
     background-color: ${({ theme }) => (theme === 'dark' ? 'var(--color-black)' : 'var(--color-white)')};
     border: 0.5px solid var(--color-border);
-    .iconfont,
+    .icon {
-    .anticon {
+      color: var(--color-primary);
-      color: var(--color-icon-white);
     }
   }
 

src/renderer/src/pages/home/Messages/Messages.tsx

@@ -2,7 +2,7 @@ import Scrollbar from '@renderer/components/Scrollbar'
 import { LOAD_MORE_COUNT } from '@renderer/config/constant'
 import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
-import { useMessageOperations, useTopicLoading, useTopicMessages } from '@renderer/hooks/useMessageOperations'
+import { useMessageOperations, useTopicMessages } from '@renderer/hooks/useMessageOperations'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useShortcut } from '@renderer/hooks/useShortcuts'
 import { autoRenameTopic, getTopic } from '@renderer/hooks/useTopic'
@@ -49,7 +49,6 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic })
   const [isProcessingContext, setIsProcessingContext] = useState(false)
   const messages = useTopicMessages(topic)
   const { displayCount, updateMessages, clearTopicMessages, deleteMessage } = useMessageOperations(topic)
-  const loading = useTopicLoading(topic)
   const messagesRef = useRef<Message[]>(messages)
 
   useEffect(() => {

src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx

@@ -153,6 +153,4 @@ const ModelSettings: FC = () => {
   )
 }
 
-const iconStyle = { fontSize: 16, marginRight: 8 }
-
 export default ModelSettings