refactor(layout): improve module header and sidebar toggle UX

src/components/ui/sidebar.tsx

@@ -256,29 +256,56 @@ function Sidebar({
 function SidebarTrigger({
   className,
   onClick,
+  tooltip,
   ...props
-}: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar();
+}: React.ComponentProps<typeof Button> & {
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+}) {
+  const { isMobile, toggleSidebar } = useSidebar();
 
-  return (
+  const button = (
     <Button
       data-sidebar="trigger"
       data-slot="sidebar-trigger"
       variant="ghost"
-      size="icon"
-      className={cn('size-7', className)}
+      size="icon-sm"
+      className={cn(
+        'rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground',
+        className,
+      )}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
       }}
       {...props}
     >
-      <PanelLeftIcon />
+      <PanelLeftIcon className="size-4" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
-}
 
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  );
+}
 function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
   const { toggleSidebar } = useSidebar();