various improvements

src/features/core/components/back-button.tsx

@@ -2,7 +2,7 @@ import { Box } from "@mantine/core"
 import { ArrowLeftIcon } from "@phosphor-icons/react"
 import { useRouter } from "@tanstack/react-router"
 
-const BackButton = () => {
+const BackButton = ({ top=20, left=20 }: { top?: number, left?: number }) => {
   const router = useRouter()
 
   return (
@@ -10,8 +10,8 @@ const BackButton = () => {
       style={{ cursor: 'pointer', zIndex: 1000 }}
       onClick={() => router.history.back()}
       pos='absolute'
-      left={16}
-      top={0}
+      left={left}
+      top={top}
     >
       <ArrowLeftIcon weight='bold' size={20} />
     </Box>

src/features/core/components/header.tsx

@@ -1,12 +1,16 @@
 import { Title, AppShell, Flex } from "@mantine/core";
 import { HeaderConfig } from "../types/header-config";
+import useRouterConfig from "../hooks/use-router-config";
+import BackButton from "./back-button";
 
 interface HeaderProps extends HeaderConfig {}
 
 const Header = ({ collapsed, title }: HeaderProps) => {
+  const { header } = useRouterConfig();
 
   return (
     <AppShell.Header id='app-header' display={collapsed ? 'none' : 'block'}>
+      { header.withBackButton && <BackButton /> }
       <Flex justify='center' align='center' h='100%' px='md'>
         <Title order={2}>{title}</Title>
       </Flex>

src/features/core/components/settings-button.tsx

@@ -5,6 +5,8 @@ import { memo } from "react";
 
 interface SettingButtonProps {
   to: string;
+  top?: number;
+  right?: number;
 }
 
 const SettingsButton = ({ to }: SettingButtonProps) => {
@@ -15,8 +17,8 @@ const SettingsButton = ({ to }: SettingButtonProps) => {
       style={{ cursor: 'pointer', zIndex: 1000 }}
       onClick={() => navigate({ to })}
       pos='absolute'
-      right={16}
-      top={0}
+      right={20}
+      top={6}
     >
       <GearIcon weight='bold' size={20} />
     </Box>