icons

frontend/src/app/useWorkspaceSurface.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { ChevronsRightIcon } from '../ui/icons';
+import { SidebarExpandIcon } from '../ui/icons';
 import { createDocumentsSurface } from '../documents/DocumentsPanel';
 import { createDocumentViewerSurface } from '../preview/DocumentViewerPanel';
 import { createDesktopSurface } from '../DesktopWorkspace';
@@ -37,7 +37,7 @@ export const useWorkspaceSurface = ({
         aria-label="Expand sidebar"
         title="Expand sidebar"
       >
-        <ChevronsRightIcon />
+        <SidebarExpandIcon />
       </button>
     );
   }, [sidebarCollapsed, onExpandSidebar]);

frontend/src/detail/DetailPanel.jsx

@@ -3,7 +3,7 @@ import {
   DownloadIcon,
   ArrowLeftIcon,
   ArrowRightIcon,
-  ChevronsRightIcon,
+  DetailPanelCollapseIcon,
   AnalyzeIcon,
   WindowMaximizeIcon,
 } from '../ui/icons';
@@ -860,7 +860,7 @@ const DetailPanel = ({
         aria-label="Close detail panel"
         title="Close detail panel"
       >
-        <ChevronsRightIcon />
+        <DetailPanelCollapseIcon />
       </button>
     ),
   ];

frontend/src/sidebar/Sidebar.jsx

@@ -5,7 +5,7 @@ import {
   TrashIcon,
   EditIcon,
   FolderIcon,
-  ChevronsLeftIcon,
+  SidebarCollapseIcon,
   LogoutIcon,
   ChevronDownIcon,
   SettingsIcon,
@@ -533,7 +533,7 @@ const Sidebar = ({
                     aria-label="Collapse sidebar"
                     title="Collapse sidebar"
                   >
-                    <ChevronsLeftIcon />
+                    <SidebarCollapseIcon />
                   </button>
                 ),
               ]

frontend/src/ui/icons.js

@@ -10,8 +10,6 @@ import {
   IconArrowLeft,
   IconArrowRight,
   IconArrowUp,
-  IconChevronsRight,
-  IconChevronsLeft,
   IconAnalyze,
   IconWindowMaximize,
   IconTextScan2,
@@ -28,6 +26,9 @@ import {
   IconSun,
   IconMoon,
   IconDeviceLaptop,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
+  IconLayoutSidebarRightCollapse,
 } from '@tabler/icons-react';
 import FolderSvg from '../assets/folder.svg';
 
@@ -139,8 +140,8 @@ export const ArrowRightIcon = ({ className, size = '1em', stroke = 1.6, ...rest
   />
 );
 
-export const ChevronsLeftIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
-  <IconChevronsLeft
+export const SidebarCollapseIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconLayoutSidebarLeftCollapse
     className={composeClassName('icon', className)}
     size={size}
     stroke={stroke}
@@ -148,8 +149,17 @@ export const ChevronsLeftIcon = ({ className, size = '1em', stroke = 1.6, ...res
   />
 );
 
-export const ChevronsRightIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
-  <IconChevronsRight
+export const SidebarExpandIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconLayoutSidebarLeftExpand
+    className={composeClassName('icon', className)}
+    size={size}
+    stroke={stroke}
+    {...rest}
+  />
+);
+
+export const DetailPanelCollapseIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconLayoutSidebarRightCollapse
     className={composeClassName('icon', className)}
     size={size}
     stroke={stroke}
@@ -356,8 +366,9 @@ export default {
   DownloadIcon,
   ViewListIcon,
   ViewGridIcon,
-  ChevronsLeftIcon,
-  ChevronsRightIcon,
+  SidebarCollapseIcon,
+  SidebarExpandIcon,
+  DetailPanelCollapseIcon,
   AnalyzeIcon,
   WindowMaximizeIcon,
   FolderPlusIcon,