refactor: standardize theme colors, update UI components, and refine auth redirection logic

apps/web/src/apps/modules/layouts/components/bookmark/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { Drawer, Text, Stack, NavLink, ThemeIcon, ActionIcon, ScrollArea, Group } from '@repo/ui/components';
 import { useAppEvent } from '@repo/core-events';
 import { useTranslation } from '@repo/core-i18n';
-import { Bookmark, Trash2 } from 'lucide-react';
+import { Bookmark, Trash } from 'lucide-react';
 import { LAYOUT_EVENTS } from '../../../../../core/constants/events';
 import { appDatabase, AppDatabaseKey } from '../../../../../core/storage/local';
 import { Link } from 'react-router-dom';
@@ -85,11 +85,11 @@ export function BookmarkDrawer() {
           <Group justify="flex-end" px="md" py="xs">
             <Text
               size="xs"
-              c="red"
+              c="var(--mantine-color-error-6)"
               style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '4px' }}
               onClick={handleClearAll}
             >
-              <Trash2 size={12} /> {t('bookmark:clearAll')}
+              <Trash size={12} /> {t('bookmark:clearAll')}
             </Text>
           </Group>
           <ScrollArea flex={1} type="scroll" px="xs" py="xs" pb={'xl'}>
@@ -120,7 +120,7 @@ export function BookmarkDrawer() {
                   rightSection={
                     <ActionIcon
                       variant="subtle"
-                      color="red"
+                      color="var(--mantine-color-error-6)"
                       size="sm"
                       onClick={(e) => {
                         e.preventDefault();
@@ -128,7 +128,7 @@ export function BookmarkDrawer() {
                       }}
                       aria-label={t('bookmark:removeItem')}
                     >
-                      <Trash2 size={14} />
+                      <Trash size={14} />
                     </ActionIcon>
                   }
                   styles={{

apps/web/src/apps/modules/layouts/components/header.layout.tsx

@@ -63,7 +63,7 @@ export default function HeaderLayout() {
               {t('common:cancel')}
             </Button>
             <Button
-              color="red"
+              color="var(--mantine-color-error-6)"
               size="xs"
               onClick={() => {
                 modals.close('logout-confirmation');
@@ -237,7 +237,11 @@ export default function HeaderLayout() {
             <Menu.Divider />
 
             {/* Sign Out Section */}
-            <Menu.Item color="red" leftSection={<LogOut size={14} />} onClick={() => handleLogout()}>
+            <Menu.Item
+              color="var(--mantine-color-error-6)"
+              leftSection={<LogOut size={14} />}
+              onClick={() => handleLogout()}
+            >
               {t('common:signOut')}
             </Menu.Item>
           </Menu.Dropdown>

apps/web/src/apps/modules/layouts/components/history/index.tsx

@@ -13,7 +13,7 @@ import {
 } from '@repo/ui/components';
 import { useAppEvent } from '@repo/core-events';
 import { useTranslation } from '@repo/core-i18n';
-import { History, Clock, Trash2 } from 'lucide-react';
+import { History, Clock, Trash } from 'lucide-react';
 import { LAYOUT_EVENTS } from '../../../../../core/constants/events';
 import { appDatabase, AppDatabaseKey } from '../../../../../core/storage/local';
 import { Link } from 'react-router-dom';
@@ -129,7 +129,7 @@ export function HistoryDrawer() {
               <Menu.Target>
                 <UnstyledButton>
                   <Group gap={6} c="dimmed" style={{ transition: 'color 0.2s' }}>
-                    <Trash2 size={14} />
+                    <Trash size={14} />
                     <Text size="xs" fw={500} style={{ cursor: 'pointer' }}>
                       {t('history:clearRange')}
                     </Text>
@@ -142,7 +142,11 @@ export function HistoryDrawer() {
                 <Menu.Item onClick={() => handleClearRange('lastHour')}>{t('history:ranges.lastHour')}</Menu.Item>
                 <Menu.Item onClick={() => handleClearRange('today')}>{t('history:ranges.today')}</Menu.Item>
                 <Menu.Divider />
-                <Menu.Item color="red" leftSection={<Trash2 size={14} />} onClick={() => handleClearRange('allTime')}>
+                <Menu.Item
+                  color="var(--mantine-color-error-6)"
+                  leftSection={<Trash size={14} />}
+                  onClick={() => handleClearRange('allTime')}
+                >
                   {t('history:ranges.allTime')}
                 </Menu.Item>
               </Menu.Dropdown>
@@ -177,7 +181,7 @@ export function HistoryDrawer() {
                   rightSection={
                     <ActionIcon
                       variant="subtle"
-                      color="red"
+                      color="var(--mantine-color-error-6)"
                       size="sm"
                       onClick={(e) => {
                         e.preventDefault();
@@ -185,7 +189,7 @@ export function HistoryDrawer() {
                       }}
                       aria-label={t('history:removeItem')}
                     >
-                      <Trash2 size={14} />
+                      <Trash size={14} />
                     </ActionIcon>
                   }
                   styles={{

apps/web/src/apps/modules/layouts/components/notifications/notification-dropdown.tsx

@@ -67,7 +67,14 @@ export function NotificationDropdown({ children }: NotificationDropdownProps) {
       <Popover.Target>
         {/* Trigger wrapped around the Bell icon */}
         <Box onClick={() => setOpened((o) => !o)} style={{ cursor: 'pointer' }}>
-          <Indicator inline size={9} offset={4} color="red" withBorder disabled={unreadCount === 0}>
+          <Indicator
+            inline
+            size={9}
+            offset={4}
+            color="var(--mantine-color-error-6)"
+            withBorder
+            disabled={unreadCount === 0}
+          >
             {children}
           </Indicator>
         </Box>

apps/web/src/apps/modules/system/setting/index.tsx

@@ -99,7 +99,7 @@ export default function SettingPage() {
           <Button variant="default" onClick={handleCancelSwitch}>
             {t('setting:unsaved.cancel')}
           </Button>
-          <Button color="red" onClick={handleDiscardChanges}>
+          <Button color="var(--mantine-color-error-6)" onClick={handleDiscardChanges}>
             {t('setting:unsaved.discard')}
           </Button>
         </Group>

apps/web/src/core/lib/auth.helper.ts

@@ -25,15 +25,21 @@ export async function terminateAuthSession(options: TerminateOptions = {}) {
    */
   let loginUrl = '/auth/login';
 
-  if (preserveRedirect) {
-    const currentPath = window.location.pathname + window.location.search;
-    loginUrl += `?redirect=${encodeURIComponent(currentPath)}`;
-  }
+  // Check if the current page is NOT the login page
+  const isNotLoginPage = !window.location.pathname.includes('/auth/login');
 
-  /**
-   * Redirect without saving history to prevent infinite back-loops
-   */
-  window.location.replace(loginUrl);
+  if (isNotLoginPage) {
+    // Set redirect parameters only if requested AND the user is not currently on the login page
+    if (preserveRedirect) {
+      const currentPath = window.location.pathname + window.location.search;
+      loginUrl += `?redirect=${encodeURIComponent(currentPath)}`;
+    }
+
+    /**
+     * Redirect without saving history to prevent infinite back-loops
+     */
+    window.location.replace(loginUrl);
+  }
 }
 
 export async function initiateAuthSession(respLogin: any) {