jan/web-app/src/routes/settings/appearance.tsx

import { createFileRoute } from '@tanstack/react-router'
import { route } from '@/constants/routes'
import SettingsMenu from '@/containers/SettingsMenu'
import HeaderPage from '@/containers/HeaderPage'
import { ColorPickerAppBgColor } from '@/containers/ColorPickerAppBgColor'
import { ColorPickerAppMainView } from '@/containers/ColorPickerAppMainView'
import { Card, CardItem } from '@/containers/Card'
import { useTranslation } from 'react-i18next'
import { ThemeSwitcher } from '@/containers/ThemeSwitcher'
import { FontSizeSwitcher } from '@/containers/FontSizeSwitcher'
import { ColorPickerAppPrimaryColor } from '@/containers/ColorPickerAppPrimaryColor'
import { ColorPickerAppAccentColor } from '@/containers/ColorPickerAppAccentColor'
import { ColorPickerAppDestructiveColor } from '@/containers/ColorPickerAppDestructiveColor'
import { useAppearance } from '@/hooks/useAppearance'
import { useCodeblock } from '@/hooks/useCodeblock'
import { Button } from '@/components/ui/button'
import CodeBlockStyleSwitcher from '@/containers/CodeBlockStyleSwitcher'
import { LineNumbersSwitcher } from '@/containers/LineNumbersSwitcher'
import { CodeBlockExample } from '@/containers/CodeBlockExample'
import { toast } from 'sonner'
import { ChatWidthSwitcher } from '@/containers/ChatWidthSwitcher'

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const Route = createFileRoute(route.settings.appearance as any)({
  component: Appareances,
})

function Appareances() {
  const { t } = useTranslation()
  const { resetAppearance } = useAppearance()
  const { resetCodeBlockStyle } = useCodeblock()

  return (
    <div className="flex flex-col h-full">
      <HeaderPage>
        <h1 className="font-medium">{t('common.settings')}</h1>
      </HeaderPage>
      <div className="flex h-full w-full">
        <SettingsMenu />
        <div className="p-4 w-full h-[calc(100%-32px)] overflow-y-auto">
          <div className="flex flex-col justify-between gap-4 gap-y-3 w-full">
            {/* Appearance */}
            <Card title="Appearance">
              <CardItem
                title="Theme"
                description="Match the OS theme."
                actions={<ThemeSwitcher />}
              />
              <CardItem
                title="Font Size"
                description="Adjust the app's font size."
                actions={<FontSizeSwitcher />}
              />

              <CardItem
                title="Window Background"
                description="Set the app window's background color."
                actions={<ColorPickerAppBgColor />}
              />
              <CardItem
                title="App Main View"
                description="Set the main content area's background color."
                actions={<ColorPickerAppMainView />}
              />
              <CardItem
                title="Primary"
                description="Set the primary color for UI components."
                actions={<ColorPickerAppPrimaryColor />}
              />
              <CardItem
                title="Accent"
                description="Set the accent color for UI highlights."
                actions={<ColorPickerAppAccentColor />}
              />
              <CardItem
                title="Destructive"
                description="Set the color for destructive actions."
                actions={<ColorPickerAppDestructiveColor />}
              />
              <CardItem
                title="Reset to Default"
                description="Reset all appearance settings to default."
                actions={
                  <Button
                    variant="destructive"
                    size="sm"
                    onClick={() => {
                      resetAppearance()
                      toast.success('Appearance Reset', {
                        id: 'reset-appearance',
                        description:
                          'Your appearance settings have been restored to default.',
                      })
                    }}
                  >
                    {t('common.reset')}
                  </Button>
                }
              />
            </Card>

            {/* Chat Message */}
            <Card>
              <CardItem
                title="Chat Width"
                description="Customize the width of the chat view."
              />
              <ChatWidthSwitcher />
            </Card>

            {/* Codeblock */}
            <Card>
              <CardItem
                title="Code Block"
                description="Choose a syntax highlighting style."
                actions={<CodeBlockStyleSwitcher />}
              />
              <CodeBlockExample />
              <CardItem
                title="Show Line Numbers"
                description="Display line numbers in code blocks."
                actions={<LineNumbersSwitcher />}
              />
              <CardItem
                title="Reset Code Block Style"
                description="Reset code block style to default."
                actions={
                  <Button
                    variant="destructive"
                    size="sm"
                    onClick={() => {
                      resetCodeBlockStyle()
                      toast.success('Code Block Reset', {
                        id: 'code-block-style',
                        description:
                          'Your Code Block style settings have been restored to default.',
                      })
                    }}
                  >
                    {t('common.reset')}
                  </Button>
                }
              />
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}