feat: about page

koharu/capabilities/default.json

@@ -8,6 +8,13 @@
   ],
   "permissions": [
     "core:default",
-    "core:window:allow-set-progress-bar"
+    "core:window:default",
+    "core:window:allow-close",
+    "core:window:allow-set-progress-bar",
+    "core:window:allow-start-dragging",
+    "core:window:allow-minimize",
+    "core:window:allow-maximize",
+    "core:window:allow-toggle-maximize",
+    "core:window:allow-internal-toggle-maximize"
   ]
 }

koharu/tauri.conf.json

@@ -18,7 +18,8 @@
         "width": 1024,
         "height": 768,
         "center": true,
-        "title": "Koharu"
+        "title": "Koharu",
+        "decorations": false
       },
       {
         "label": "splashscreen",

ui/app/(app)/about/page.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter } from 'next/navigation'
+import {
+  ChevronLeftIcon,
+  CheckCircleIcon,
+  AlertCircleIcon,
+  LoaderIcon,
+} from 'lucide-react'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { invoke, isTauri } from '@/lib/backend'
+import { useAppStore } from '@/lib/store'
+import Image from 'next/image'
+
+const GITHUB_REPO = 'mayocream/koharu'
+
+type VersionStatus = 'loading' | 'latest' | 'outdated' | 'error'
+
+export default function AboutPage() {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const { openExternal } = useAppStore()
+
+  const [appVersion, setAppVersion] = useState<string>()
+  const [latestVersion, setLatestVersion] = useState<string>()
+  const [versionStatus, setVersionStatus] = useState<VersionStatus>('loading')
+
+  useEffect(() => {
+    const checkVersion = async () => {
+      try {
+        if (isTauri()) {
+          const version = await invoke<string>('app_version')
+          setAppVersion(version)
+
+          const res = await fetch(
+            `https://api.github.com/repos/${GITHUB_REPO}/releases/latest`,
+          )
+          if (res.ok) {
+            const data = await res.json()
+            const latest = data.tag_name?.replace(/^v/, '') || data.name
+            setLatestVersion(latest)
+            setVersionStatus(version === latest ? 'latest' : 'outdated')
+          } else {
+            setVersionStatus('error')
+          }
+        } else {
+          setAppVersion('dev')
+          setVersionStatus('latest')
+        }
+      } catch {
+        setVersionStatus('error')
+      }
+    }
+
+    void checkVersion()
+  }, [])
+
+  return (
+    <div className='bg-muted flex flex-1 flex-col overflow-hidden'>
+      <ScrollArea className='flex-1'>
+        <div className='px-4 py-6'>
+          <div className='relative mx-auto max-w-xl'>
+            {/* Header with back button */}
+            <div className='mb-8 flex items-center'>
+              <button
+                onClick={() => router.push('/')}
+                className='text-muted-foreground hover:bg-accent hover:text-foreground absolute -left-14 flex size-10 items-center justify-center rounded-full transition'
+              >
+                <ChevronLeftIcon className='size-6' />
+              </button>
+              <h1 className='text-foreground text-2xl font-bold'>
+                {t('settings.about')}
+              </h1>
+            </div>
+
+            {/* App Info */}
+            <div className='mb-8 flex flex-col items-center text-center'>
+              <Image
+                src='/icon-large.png'
+                alt='Koharu'
+                width={96}
+                height={96}
+                className='mb-4'
+                draggable={false}
+              />
+              <h2 className='text-foreground mb-1 text-xl font-bold'>Koharu</h2>
+              <p className='text-muted-foreground text-sm'>
+                {t('settings.aboutTagline')}
+              </p>
+            </div>
+
+            {/* Version & Info Card */}
+            <div className='bg-card border-border rounded-lg border p-4'>
+              <div className='space-y-3 text-sm'>
+                <div className='flex items-center justify-between'>
+                  <span className='text-muted-foreground'>
+                    {t('settings.aboutVersion')}
+                  </span>
+                  <div className='flex items-center gap-2'>
+                    <span className='text-foreground font-medium'>
+                      {appVersion || '...'}
+                    </span>
+                    {versionStatus === 'loading' && (
+                      <LoaderIcon className='text-muted-foreground size-4 animate-spin' />
+                    )}
+                    {versionStatus === 'latest' && (
+                      <span className='flex items-center gap-1 text-xs text-green-500'>
+                        <CheckCircleIcon className='size-3.5' />
+                        {t('settings.aboutLatest')}
+                      </span>
+                    )}
+                    {versionStatus === 'outdated' && (
+                      <button
+                        onClick={() =>
+                          openExternal(
+                            `https://github.com/${GITHUB_REPO}/releases/latest`,
+                          )
+                        }
+                        className='flex items-center gap-1 text-xs text-amber-500 hover:underline'
+                      >
+                        <AlertCircleIcon className='size-3.5' />
+                        {t('settings.aboutUpdate', { version: latestVersion })}
+                      </button>
+                    )}
+                  </div>
+                </div>
+                <div className='flex items-center justify-between'>
+                  <span className='text-muted-foreground'>
+                    {t('settings.aboutAuthor')}
+                  </span>
+                  <button
+                    onClick={() => openExternal('https://github.com/mayocream')}
+                    className='text-foreground font-medium hover:underline'
+                  >
+                    Mayo
+                  </button>
+                </div>
+                <div className='flex items-center justify-between'>
+                  <span className='text-muted-foreground'>
+                    {t('settings.aboutRepository')}
+                  </span>
+                  <button
+                    onClick={() =>
+                      openExternal(`https://github.com/${GITHUB_REPO}`)
+                    }
+                    className='text-foreground font-medium hover:underline'
+                  >
+                    GitHub
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}

ui/app/(app)/layout.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { MenuBar } from '@/components/MenuBar'
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className='bg-background flex h-screen w-screen flex-col overflow-hidden'>
+      <MenuBar />
+      {children}
+    </div>
+  )
+}

ui/app/{page.tsx → (app)/page.tsx}

@@ -1,6 +1,5 @@
 'use client'
 
-import { MenuBar } from '@/components/MenuBar'
 import { Panels } from '@/components/Panels'
 import { Workspace, StatusBar } from '@/components/Canvas'
 import { Navigator } from '@/components/Navigator'
@@ -8,8 +7,7 @@ import { ActivityBubble } from '@/components/ActivityBubble'
 
 export default function Page() {
   return (
-    <main className='bg-background relative flex h-screen w-screen flex-col overflow-hidden'>
-      <MenuBar />
+    <div className='flex flex-1 flex-col'>
       <ActivityBubble />
       <div className='flex min-h-0 flex-1'>
         <Navigator />
@@ -19,6 +17,6 @@ export default function Page() {
         </div>
         <Panels />
       </div>
-    </main>
+    </div>
   )
 }

ui/app/(app)/settings/page.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useTheme } from 'next-themes'
+import { useTranslation } from 'react-i18next'
+import { useRouter } from 'next/navigation'
+import {
+  SunIcon,
+  MoonIcon,
+  MonitorIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from 'lucide-react'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+
+const THEME_OPTIONS = [
+  { value: 'light', icon: SunIcon, labelKey: 'settings.themeLight' },
+  { value: 'dark', icon: MoonIcon, labelKey: 'settings.themeDark' },
+  { value: 'system', icon: MonitorIcon, labelKey: 'settings.themeSystem' },
+] as const
+
+export default function SettingsPage() {
+  const { t, i18n } = useTranslation()
+  const { theme, setTheme } = useTheme()
+  const router = useRouter()
+  const locales = useMemo(
+    () => Object.keys(i18n.options.resources || {}),
+    [i18n.options.resources],
+  )
+
+  return (
+    <div className='bg-muted flex flex-1 flex-col overflow-hidden'>
+      <ScrollArea className='flex-1'>
+        <div className='px-4 py-6'>
+          {/* Content column */}
+          <div className='relative mx-auto max-w-xl'>
+            {/* Header with back button */}
+            <div className='mb-8 flex items-center'>
+              <button
+                onClick={() => router.push('/')}
+                className='text-muted-foreground hover:bg-accent hover:text-foreground absolute -left-14 flex size-10 items-center justify-center rounded-full transition'
+              >
+                <ChevronLeftIcon className='size-6' />
+              </button>
+              <h1 className='text-foreground text-2xl font-bold'>
+                {t('settings.title')}
+              </h1>
+            </div>
+
+            {/* Appearance Section */}
+            <section className='mb-8'>
+              <h2 className='text-foreground mb-1 text-sm font-bold'>
+                {t('settings.appearance')}
+              </h2>
+              <p className='text-muted-foreground mb-4 text-sm'>
+                {t('settings.appearanceDescription')}
+              </p>
+
+              <div className='space-y-3'>
+                <div className='text-foreground text-sm'>
+                  {t('settings.theme')}
+                </div>
+                <div className='flex gap-2'>
+                  {THEME_OPTIONS.map(({ value, icon: Icon, labelKey }) => (
+                    <button
+                      key={value}
+                      onClick={() => setTheme(value)}
+                      data-active={theme === value}
+                      className='border-border bg-card text-muted-foreground hover:border-foreground/30 data-[active=true]:border-primary data-[active=true]:text-foreground flex flex-1 flex-col items-center gap-2 rounded-lg border p-3 transition'
+                    >
+                      <Icon className='size-5' />
+                      <span className='text-xs font-medium'>{t(labelKey)}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </section>
+
+            {/* Language Section */}
+            <section className='mb-8'>
+              <h2 className='text-foreground mb-1 text-sm font-bold'>
+                {t('settings.language')}
+              </h2>
+              <p className='text-muted-foreground mb-4 text-sm'>
+                {t('settings.languageDescription')}
+              </p>
+
+              <Select
+                value={i18n.language}
+                onValueChange={(value) => i18n.changeLanguage(value)}
+              >
+                <SelectTrigger className='w-full'>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {locales.map((code) => (
+                    <SelectItem key={code} value={code}>
+                      {t(`menu.languages.${code}`)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </section>
+
+            {/* Divider */}
+            <div className='border-border mb-8 border-t' />
+
+            {/* About Link */}
+            <button
+              onClick={() => router.push('/about')}
+              className='hover:bg-accent flex w-full items-center justify-between rounded-lg px-3 py-3 text-left transition'
+            >
+              <span className='text-foreground text-sm font-medium'>
+                {t('settings.about')}
+              </span>
+              <ChevronRightIcon className='text-muted-foreground size-5' />
+            </button>
+          </div>
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}

ui/app/settings/page.tsx

@@ -1,62 +0,0 @@
-'use client'
-
-import { useTheme } from 'next-themes'
-import { useTranslation } from 'react-i18next'
-import { useRouter } from 'next/navigation'
-import { ArrowLeftIcon, SunIcon, MoonIcon, MonitorIcon } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-
-const THEME_OPTIONS = [
-  { value: 'light', icon: SunIcon, labelKey: 'settings.themeLight' },
-  { value: 'dark', icon: MoonIcon, labelKey: 'settings.themeDark' },
-  { value: 'system', icon: MonitorIcon, labelKey: 'settings.themeSystem' },
-] as const
-
-export default function SettingsPage() {
-  const { t } = useTranslation()
-  const router = useRouter()
-  const { theme, setTheme } = useTheme()
-
-  return (
-    <main className='bg-muted flex h-screen w-screen flex-col'>
-      <header className='border-border bg-background flex h-12 items-center gap-3 border-b px-3'>
-        <Button
-          variant='ghost'
-          size='icon'
-          className='size-8'
-          onClick={() => router.back()}
-        >
-          <ArrowLeftIcon className='size-4' />
-        </Button>
-        <h1 className='text-foreground text-sm font-semibold'>
-          {t('settings.title')}
-        </h1>
-      </header>
-
-      <div className='flex-1 overflow-auto'>
-        <div className='p-4'>
-          <div className='space-y-4'>
-            <div className='space-y-3'>
-              <div className='text-muted-foreground text-xs font-semibold tracking-wide uppercase'>
-                {t('settings.theme')}
-              </div>
-              <div className='grid grid-cols-3 gap-3'>
-                {THEME_OPTIONS.map(({ value, icon: Icon, labelKey }) => (
-                  <button
-                    key={value}
-                    onClick={() => setTheme(value)}
-                    data-active={theme === value}
-                    className='border-border bg-card text-muted-foreground hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent data-[active=true]:text-accent-foreground flex flex-col items-center gap-2 rounded-lg border p-4 transition'
-                  >
-                    <Icon className='size-6' />
-                    <span className='text-xs font-medium'>{t(labelKey)}</span>
-                  </button>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  )
-}

ui/components/MenuBar.tsx

@@ -1,18 +1,18 @@
 'use client'
 
-import { useEffect, useState, useMemo } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
-import { invoke } from '@/lib/backend'
+import { windowControls, isTauri, listen } from '@/lib/backend'
 import { useTranslation } from 'react-i18next'
 import { useAppStore } from '@/lib/store'
 import { fitCanvasToViewport, resetCanvasScale } from '@/components/Canvas'
+import { Minus, Square, X, Copy } from 'lucide-react'
+import Image from 'next/image'
 import {
   Menubar,
   MenubarContent,
   MenubarItem,
   MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
   MenubarSeparator,
   MenubarTrigger,
 } from '@/components/ui/menubar'
@@ -24,13 +24,9 @@ type MenuItem = {
 }
 
 export function MenuBar() {
-  const { t, i18n } = useTranslation()
+  const { t } = useTranslation()
   const router = useRouter()
-  const locales = useMemo(
-    () => Object.keys(i18n.options.resources || {}),
-    [i18n.options.resources],
-  )
-  const [appVersion, setAppVersion] = useState<string>()
+  const [isMaximized, setIsMaximized] = useState(false)
   const {
     openDocuments,
     openExternal,
@@ -40,19 +36,33 @@ export function MenuBar() {
     exportDocument,
     saveDocuments,
   } = useAppStore()
+
+  const updateMaximizedState = useCallback(async () => {
+    const maximized = await windowControls.isMaximized()
+    setIsMaximized(maximized)
+  }, [])
+
+  useEffect(() => {
+    // Prefetch pages for smoother navigation
+    router.prefetch('/settings')
+    router.prefetch('/about')
+  }, [router])
+
   useEffect(() => {
-    const loadVersion = async () => {
-      try {
-        const version = await invoke<string>('app_version')
-        setAppVersion(version)
-      } catch (error) {
-        console.error('Failed to load app version', error)
-        setAppVersion(undefined)
-      }
+    if (!isTauri()) return
+
+    void updateMaximizedState()
+
+    let unlisten: (() => void) | undefined
+    const setup = async () => {
+      unlisten = await listen('tauri://resize', () => {
+        void updateMaximizedState()
+      })
     }
+    void setup()
 
-    void loadVersion()
-  }, [])
+    return () => unlisten?.()
+  }, [updateMaximizedState])
 
   const fileMenuItems: MenuItem[] = [
     { label: t('menu.openFile'), onSelect: openDocuments },
@@ -76,30 +86,34 @@ export function MenuBar() {
         { label: t('menu.processAll'), onSelect: processAllImages },
       ],
     },
+  ]
+
+  const helpMenuItems: MenuItem[] = [
     {
-      label: t('menu.help'),
-      items: [
-        {
-          label: appVersion
-            ? t('menu.version', { version: appVersion })
-            : t('menu.versionUnknown'),
-          disabled: true,
-        },
-        {
-          label: t('menu.discord'),
-          onSelect: () => openExternal('https://discord.gg/mHvHkxGnUY'),
-        },
-        {
-          label: t('menu.github'),
-          onSelect: () => openExternal('https://github.com/mayocream/koharu'),
-        },
-      ],
+      label: t('menu.discord'),
+      onSelect: () => openExternal('https://discord.gg/mHvHkxGnUY'),
+    },
+    {
+      label: t('menu.github'),
+      onSelect: () => openExternal('https://github.com/mayocream/koharu'),
     },
   ]
 
   return (
-    <div className='border-border bg-background text-foreground flex h-8 items-center gap-1 border-b px-1.5 text-[13px]'>
-      <Menubar className='h-auto gap-1 border-none bg-transparent p-0 shadow-none'>
+    <div className='border-border bg-background text-foreground flex h-8 items-center border-b text-[13px]'>
+      {/* Logo */}
+      <div className='flex h-full items-center pl-2 select-none'>
+        <Image
+          src='/icon.png'
+          alt='Koharu'
+          width={18}
+          height={18}
+          draggable={false}
+        />
+      </div>
+
+      {/* Menu items */}
+      <Menubar className='h-auto gap-1 border-none bg-transparent p-0 px-1.5 shadow-none'>
         <MenubarMenu>
           <MenubarTrigger className='hover:bg-accent data-[state=open]:bg-accent rounded px-3 py-1.5 font-medium'>
             {t('menu.file')}
@@ -167,7 +181,7 @@ export function MenuBar() {
         ))}
         <MenubarMenu>
           <MenubarTrigger className='hover:bg-accent data-[state=open]:bg-accent rounded px-3 py-1.5 font-medium'>
-            {t('menu.language')}
+            {t('menu.help')}
           </MenubarTrigger>
           <MenubarContent
             className='min-w-36'
@@ -175,27 +189,72 @@ export function MenuBar() {
             sideOffset={5}
             alignOffset={-3}
           >
-            <MenubarRadioGroup
-              value={i18n.language}
-              onValueChange={(value) => {
-                if (value !== i18n.language) {
-                  void i18n.changeLanguage(value)
+            {helpMenuItems.map((item) => (
+              <MenubarItem
+                key={item.label}
+                className='text-[13px]'
+                disabled={item.disabled}
+                onSelect={
+                  item.onSelect
+                    ? () => {
+                        void item.onSelect?.()
+                      }
+                    : undefined
                 }
-              }}
+              >
+                {item.label}
+              </MenubarItem>
+            ))}
+            <MenubarSeparator />
+            <MenubarItem
+              className='text-[13px]'
+              onSelect={() => router.push('/about')}
             >
-              {locales.map((code) => (
-                <MenubarRadioItem
-                  key={code}
-                  value={code}
-                  className='text-[13px]'
-                >
-                  {t(`menu.languages.${code}`)}
-                </MenubarRadioItem>
-              ))}
-            </MenubarRadioGroup>
+              {t('settings.about')}
+            </MenubarItem>
           </MenubarContent>
         </MenubarMenu>
       </Menubar>
+
+      {/* Draggable region */}
+      <div
+        data-tauri-drag-region
+        className='flex h-full flex-1 items-center justify-center'
+      />
+
+      {/* Window controls */}
+      {isTauri() && (
+        <div className='flex h-full items-center'>
+          <button
+            type='button'
+            onClick={() => void windowControls.minimize()}
+            className='hover:bg-accent flex h-full w-12 items-center justify-center transition-colors'
+            aria-label='Minimize'
+          >
+            <Minus className='size-4' />
+          </button>
+          <button
+            type='button'
+            onClick={() => void windowControls.toggleMaximize()}
+            className='hover:bg-accent flex h-full w-12 items-center justify-center transition-colors'
+            aria-label={isMaximized ? 'Restore' : 'Maximize'}
+          >
+            {isMaximized ? (
+              <Copy className='size-3.5' />
+            ) : (
+              <Square className='size-3.5' />
+            )}
+          </button>
+          <button
+            type='button'
+            onClick={() => void windowControls.close()}
+            className='flex h-full w-12 items-center justify-center transition-colors hover:bg-red-500 hover:text-white'
+            aria-label='Close'
+          >
+            <X className='size-4' />
+          </button>
+        </div>
+      )}
     </div>
   )
 }

ui/lib/backend.ts

@@ -249,3 +249,31 @@ export async function fetchThumbnail(index: number): Promise<Blob> {
 }
 
 export const isTauri = isTauriEnv
+
+export const windowControls = {
+  async minimize() {
+    if (isTauriEnv()) {
+      const { getCurrentWindow } = await import('@tauri-apps/api/window')
+      return getCurrentWindow().minimize()
+    }
+  },
+  async toggleMaximize() {
+    if (isTauriEnv()) {
+      const { getCurrentWindow } = await import('@tauri-apps/api/window')
+      return getCurrentWindow().toggleMaximize()
+    }
+  },
+  async close() {
+    if (isTauriEnv()) {
+      const { getCurrentWindow } = await import('@tauri-apps/api/window')
+      return getCurrentWindow().close()
+    }
+  },
+  async isMaximized(): Promise<boolean> {
+    if (isTauriEnv()) {
+      const { getCurrentWindow } = await import('@tauri-apps/api/window')
+      return getCurrentWindow().isMaximized()
+    }
+    return false
+  },
+}

ui/public/locales/en-US/translation.json

@@ -147,9 +147,22 @@
   },
   "settings": {
     "title": "Settings",
+    "appearance": "Appearance",
+    "appearanceDescription": "Customize how Koharu looks on your device.",
     "theme": "Theme",
+    "themeDescription": "Select your preferred color scheme.",
     "themeLight": "Light",
     "themeDark": "Dark",
-    "themeSystem": "System"
+    "themeSystem": "System",
+    "language": "Language",
+    "languageDescription": "Select your preferred language.",
+    "about": "About",
+    "aboutDescription": "Information about this application.",
+    "aboutTagline": "Manga translation tool",
+    "aboutVersion": "Version",
+    "aboutLatest": "Latest",
+    "aboutUpdate": "Update available ({{version}})",
+    "aboutAuthor": "Author",
+    "aboutRepository": "Repository"
   }
 }

ui/public/locales/ja-JP/translation.json

@@ -147,9 +147,22 @@
   },
   "settings": {
     "title": "設定",
+    "appearance": "外観",
+    "appearanceDescription": "Koharu の外観をカスタマイズします。",
     "theme": "テーマ",
+    "themeDescription": "お好みの配色を選択してください。",
     "themeLight": "ライト",
     "themeDark": "ダーク",
-    "themeSystem": "システム"
+    "themeSystem": "システム",
+    "language": "言語",
+    "languageDescription": "お好みの言語を選択してください。",
+    "about": "このアプリについて",
+    "aboutDescription": "このアプリケーションに関する情報。",
+    "aboutTagline": "漫画翻訳ツール",
+    "aboutVersion": "バージョン",
+    "aboutLatest": "最新",
+    "aboutUpdate": "アップデートあり ({{version}})",
+    "aboutAuthor": "作者",
+    "aboutRepository": "リポジトリ"
   }
 }

ui/public/locales/zh-CN/translation.json

@@ -147,9 +147,22 @@
   },
   "settings": {
     "title": "设置",
+    "appearance": "外观",
+    "appearanceDescription": "自定义 Koharu 在您设备上的外观。",
     "theme": "主题",
+    "themeDescription": "选择您偏好的配色方案。",
     "themeLight": "浅色",
     "themeDark": "深色",
-    "themeSystem": "跟随系统"
+    "themeSystem": "跟随系统",
+    "language": "语言",
+    "languageDescription": "选择您偏好的语言。",
+    "about": "关于",
+    "aboutDescription": "关于此应用程序的信息。",
+    "aboutTagline": "漫画翻译工具",
+    "aboutVersion": "版本",
+    "aboutLatest": "最新",
+    "aboutUpdate": "有更新可用 ({{version}})",
+    "aboutAuthor": "作者",
+    "aboutRepository": "代码仓库"
   }
 }

ui/public/locales/zh-TW/translation.json

@@ -147,9 +147,22 @@
   },
   "settings": {
     "title": "設定",
+    "appearance": "外觀",
+    "appearanceDescription": "自訂 Koharu 在您裝置上的外觀。",
     "theme": "主題",
+    "themeDescription": "選擇您偏好的配色方案。",
     "themeLight": "淺色",
     "themeDark": "深色",
-    "themeSystem": "跟隨系統"
+    "themeSystem": "跟隨系統",
+    "language": "語言",
+    "languageDescription": "選擇您偏好的語言。",
+    "about": "關於",
+    "aboutDescription": "關於此應用程式的資訊。",
+    "aboutTagline": "漫畫翻譯工具",
+    "aboutVersion": "版本",
+    "aboutLatest": "最新",
+    "aboutUpdate": "有更新可用 ({{version}})",
+    "aboutAuthor": "作者",
+    "aboutRepository": "原始碼"
   }
 }