From 56d3803457189029fa19767999f388d914def0bd Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Mon, 13 Jul 2026 14:14:35 +0700
Subject: [PATCH] refactor: rename withMenuFilter prop to showMenuFilter in
 SidebarMenu component style: update text size and color in BookmarkDrawer and
 HistoryDrawer components

---
 .../modules/layouts/components/bookmark/index.tsx    |  4 ++--
 .../modules/layouts/components/history/index.tsx     |  4 ++--
 .../src/apps/modules/layouts/components/sidebar.tsx  | 12 ++++++------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/apps/modules/layouts/components/bookmark/index.tsx b/apps/web/src/apps/modules/layouts/components/bookmark/index.tsx
index 928b44e..182da14 100644
--- a/apps/web/src/apps/modules/layouts/components/bookmark/index.tsx
+++ b/apps/web/src/apps/modules/layouts/components/bookmark/index.tsx
@@ -68,8 +68,8 @@ export function BookmarkDrawer() {
       size="sm"
       title={
         <Group gap="sm">
-          <Bookmark size={18} style={{ color: 'var(--mantine-color-dimmed)' }} />
-          <Text fw={600} size="sm">
+          <Bookmark size={18} style={{ color: 'var(--mantine-color-text)' }} />
+          <Text fw={600} size="lg">
             {t('bookmark:title')}
           </Text>
         </Group>
diff --git a/apps/web/src/apps/modules/layouts/components/history/index.tsx b/apps/web/src/apps/modules/layouts/components/history/index.tsx
index 43e1f02..1101b01 100644
--- a/apps/web/src/apps/modules/layouts/components/history/index.tsx
+++ b/apps/web/src/apps/modules/layouts/components/history/index.tsx
@@ -110,8 +110,8 @@ export function HistoryDrawer() {
       size="sm"
       title={
         <Group gap="sm">
-          <History size={18} style={{ color: 'var(--mantine-color-dimmed)' }} />
-          <Text fw={600} size="sm">
+          <History size={18} style={{ color: 'var(--mantine-color-text)' }} />
+          <Text fw={600} size="lg">
             {t('history:title')}
           </Text>
         </Group>
diff --git a/apps/web/src/apps/modules/layouts/components/sidebar.tsx b/apps/web/src/apps/modules/layouts/components/sidebar.tsx
index 03d42cd..00693b0 100644
--- a/apps/web/src/apps/modules/layouts/components/sidebar.tsx
+++ b/apps/web/src/apps/modules/layouts/components/sidebar.tsx
@@ -25,7 +25,7 @@ interface SidebarMenuProps {
   /** Whether to show the collapse/expand toggle button (desktop only) */
   withToggle?: boolean;
   /** Whether to show the sticky menu filter input (default: true) */
-  withMenuFilter?: boolean;
+  showMenuFilter?: boolean;
   /** Whether to show the History button (default: true) */
   showHistory?: boolean;
   /** Whether to show the Bookmark button (default: true) */
@@ -226,7 +226,7 @@ export const SidebarMenu = memo(function SidebarMenu({
   items,
   variantOverride,
   withToggle = false,
-  withMenuFilter = true,
+  showMenuFilter = true,
   showHistory = true,
   showBookmark = true,
 }: SidebarMenuProps) {
@@ -381,7 +381,7 @@ export const SidebarMenu = memo(function SidebarMenu({
 
   // -- Mini (Collapsed) Mode ------------------------------------------------
   if (isMini) {
-    const hasTopSection = withMenuFilter || showHistory || showBookmark;
+    const hasTopSection = showMenuFilter || showHistory || showBookmark;
 
     return (
       <Box h="100%" style={{ display: 'flex', flexDirection: 'column' }}>
@@ -401,7 +401,7 @@ export const SidebarMenu = memo(function SidebarMenu({
               gap: '8px',
             }}
           >
-            {withMenuFilter && (
+            {showMenuFilter && (
               <ActionIcon
                 variant="subtle"
                 size="md"
@@ -469,7 +469,7 @@ export const SidebarMenu = memo(function SidebarMenu({
   }
 
   // -- Expanded Mode --------------------------------------------------------
-  const hasTopSection = withMenuFilter || showHistory || showBookmark;
+  const hasTopSection = showMenuFilter || showHistory || showBookmark;
 
   return (
     <Box h="100%" style={{ display: 'flex', flexDirection: 'column' }}>
@@ -488,7 +488,7 @@ export const SidebarMenu = memo(function SidebarMenu({
             gap: '12px',
           }}
         >
-          {withMenuFilter && (
+          {showMenuFilter && (
             <Box style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
               <TextInput
                 ref={inputRef}