@aphrody/koharu-ui 0.0.0-stage → 0.1.0

package/src/components/preferences/SettingsPage.tsx

@@ -0,0 +1,336 @@
+'use client'
+
+import {
+  ArrowLeft,
+  Monitor,
+  Moon,
+  Sun,
+} from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { PipelinePreferences } from '@aphrody/koharu-ui/components/preferences/PipelinePreferences'
+import {
+  PreferencePage,
+  PreferenceRow,
+  PreferenceSection,
+} from '@aphrody/koharu-ui/components/preferences/PreferenceFields'
+import { ProviderPreferences } from '@aphrody/koharu-ui/components/preferences/ProviderPreferences'
+import { TranslationPreferences } from '@aphrody/koharu-ui/components/preferences/TranslationPreferences'
+import { TypesettingPreferences } from '@aphrody/koharu-ui/components/preferences/TypesettingPreferences'
+import { refreshPreferences, refreshTranslationModels, savePreferences } from '@aphrody/koharu-ui/lib/backend'
+import { supportedLanguages } from '@aphrody/koharu-ui/lib/i18n'
+import { receivePreferences, useKoharuStore, type ShortcutAction } from '@aphrody/koharu-ui/lib/store'
+import { settingsTabs, type SettingsTab } from '@aphrody/koharu-ui/navigation'
+import {
+  type PipelineConfig,
+  type Preferences,
+  type ProviderPreferences as ProviderSettings,
+  type TypesettingConfig,
+} from '@aphrody/koharu-bridge/protocol'
+import { Button } from '../../internal/components/button'
+import { Input } from '@aphrody/m3-primitives'
+import { ScrollArea } from '../../internal/components/scroll-area'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../internal/components/select'
+
+export function SettingsPage() {
+  const { t } = useTranslation()
+  const open = useKoharuStore((state) => state.settingsOpen)
+  const setOpen = useKoharuStore((state) => state.setSettingsOpen)
+  const preferences = useKoharuStore((state) => state.preferences)
+  const translationModels = useKoharuStore((state) => state.translationModels)
+  const [tab, setTab] = useState<SettingsTab>('appearance')
+  const [pipeline, setPipeline] = useState<PipelineConfig | null>(preferences?.pipeline ?? null)
+  const [providers, setProviders] = useState<ProviderSettings | null>(
+    preferences?.providers ?? null,
+  )
+  const [typesetting, setTypesetting] = useState<TypesettingConfig | null>(
+    preferences?.typesetting ?? null,
+  )
+  const translation = pipeline?.translation ?? null
+  const lastSaved = useRef<string | null>(null)
+  const lastSavedProviders = useRef<string | null>(null)
+  const saveGeneration = useRef(0)
+  const saveQueue = useRef<Promise<void>>(Promise.resolve())
+  const lastPending = useRef<{ serialized: string; promise: Promise<Preferences> } | null>(null)
+  const currentDraft = useRef<string | null>(null)
+  currentDraft.current =
+    pipeline && providers && typesetting ? JSON.stringify([pipeline, providers, typesetting]) : null
+
+  const saveDraft = useCallback(
+    async (
+      pipeline: PipelineConfig,
+      providers: ProviderSettings,
+      typesetting: TypesettingConfig,
+    ) => {
+      const serialized = JSON.stringify([pipeline, providers, typesetting])
+      if (serialized === lastSaved.current) {
+        const pending = lastPending.current
+        if (pending?.serialized === serialized) await pending.promise
+        return
+      }
+      lastSaved.current = serialized
+      const serializedProviders = JSON.stringify(providers)
+      const providersChanged = serializedProviders !== lastSavedProviders.current
+      const generation = ++saveGeneration.current
+      const pending = saveQueue.current
+        .catch(() => undefined)
+        .then(() => savePreferences(pipeline, providers, typesetting))
+      lastPending.current = { serialized, promise: pending }
+      saveQueue.current = pending.then(
+        () => undefined,
+        () => undefined,
+      )
+      let saved: Preferences
+      try {
+        saved = await pending
+      } catch (error) {
+        if (lastSaved.current === serialized) lastSaved.current = null
+        throw error
+      }
+      if (generation !== saveGeneration.current || currentDraft.current !== serialized) return
+      receivePreferences(saved)
+      if (providersChanged) {
+        lastSavedProviders.current = serializedProviders
+        void refreshTranslationModels(true).catch(() => undefined)
+      }
+    },
+    [],
+  )
+
+  useEffect(() => {
+    if (!open) return
+    void refreshPreferences().catch(() => undefined)
+    void refreshTranslationModels().catch(() => undefined)
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    setPipeline(preferences?.pipeline ?? null)
+    setProviders(preferences?.providers ?? null)
+    setTypesetting(preferences?.typesetting ?? null)
+    if (preferences) {
+      lastSaved.current = JSON.stringify([
+        preferences.pipeline,
+        preferences.providers,
+        preferences.typesetting,
+      ])
+      lastSavedProviders.current = JSON.stringify(preferences.providers)
+    }
+  }, [open, preferences])
+
+  useEffect(() => {
+    if (!open || !pipeline || !providers || !typesetting) return
+    const serialized = JSON.stringify([pipeline, providers, typesetting])
+    if (serialized === lastSaved.current) return
+    const timeout = window.setTimeout(() => {
+      void saveDraft(pipeline, providers, typesetting).catch(() => undefined)
+    }, 260)
+    return () => window.clearTimeout(timeout)
+  }, [open, pipeline, providers, saveDraft, typesetting])
+
+  if (!open) return null
+
+  return (
+    <section className='settings-page flex min-h-0 flex-1 bg-[var(--surface-sidebar)] text-foreground'>
+      <nav className='flex w-64 shrink-0 flex-col bg-[var(--surface-sidebar)] px-3 py-4'>
+        <Button
+          type='button'
+          variant='ghost'
+          className='mb-5 h-9 justify-start gap-2 rounded-lg px-2 text-[12px] text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground'
+          onClick={() => {
+            if (!pipeline || !providers || !typesetting) {
+              setOpen(false)
+              return
+            }
+            void saveDraft(pipeline, providers, typesetting)
+              .then(() => setOpen(false))
+              .catch(() => undefined)
+          }}
+        >
+          <ArrowLeft className='size-4' /> {t('settings.backToEditor')}
+        </Button>
+        <p className='mb-2 px-2 text-[10px] font-semibold tracking-[0.14em] text-muted-foreground uppercase'>
+          {t('settings.title')}
+        </p>
+        <div className='grid gap-1'>
+          {settingsTabs.map(([id, Icon]) => (
+            <Button
+              key={id}
+              type='button'
+              variant='ghost'
+              size='sm'
+              data-active={tab === id}
+              className='h-10 w-full justify-start gap-3 rounded-lg px-3 text-left text-[12px] text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground'
+              onClick={() => setTab(id)}
+            >
+              <Icon className='size-4' /> {t(`settings.tabs.${id}`)}
+            </Button>
+          ))}
+        </div>
+      </nav>
+      <main className='relative z-10 flex min-w-0 flex-1 flex-col overflow-hidden rounded-tl-2xl bg-[var(--surface-canvas)] shadow-[var(--shadow-content)]'>
+        <header className='flex h-14 shrink-0 items-center border-b border-border/80 px-8'>
+          <h1 className='text-[13px] font-semibold tracking-[-0.02em]'>{t('settings.title')}</h1>
+        </header>
+        <ScrollArea className='min-h-0 flex-1'>
+          <div className='mx-auto w-full max-w-4xl px-10 py-10'>
+            {tab === 'appearance' && <AppearancePreferences />}
+            {tab === 'pipeline' &&
+              (pipeline ? (
+                <PipelinePreferences value={pipeline} onChange={setPipeline} />
+              ) : (
+                <LoadingPreferences />
+              ))}
+            {tab === 'providers' &&
+              (providers ? (
+                <ProviderPreferences value={providers} onChange={setProviders} />
+              ) : (
+                <LoadingPreferences />
+              ))}
+            {tab === 'translation' &&
+              (translation ? (
+                <TranslationPreferences
+                  value={translation}
+                  modelChoices={translationModels}
+                  providers={providers?.entries ?? []}
+                  languages={preferences?.languages ?? []}
+                  onChange={(translation) =>
+                    setPipeline((current) => (current ? { ...current, translation } : current))
+                  }
+                />
+              ) : (
+                <LoadingPreferences />
+              ))}
+            {tab === 'typesetting' &&
+              (typesetting ? (
+                <TypesettingPreferences value={typesetting} onChange={setTypesetting} />
+              ) : (
+                <LoadingPreferences />
+              ))}
+            {tab === 'shortcuts' && <ShortcutPreferences />}
+          </div>
+        </ScrollArea>
+      </main>
+    </section>
+  )
+}
+
+function AppearancePreferences() {
+  const { theme, setTheme } = useTheme()
+  const { t, i18n } = useTranslation()
+  const themes = [
+    ['light', Sun],
+    ['dark', Moon],
+    ['system', Monitor],
+  ] as const
+
+  return (
+    <PreferencePage
+      title={t('settings.appearance.title')}
+      description={t('settings.appearance.description')}
+    >
+      <PreferenceSection title={t('settings.appearance.interface')}>
+        <PreferenceRow
+          title={t('settings.appearance.theme')}
+          description={t('settings.appearance.themeDescription')}
+        >
+          <div className='grid grid-cols-3 rounded-xl border border-input bg-background p-0.5'>
+            {themes.map(([value, Icon]) => (
+              <Button
+                key={value}
+                type='button'
+                variant='ghost'
+                size='sm'
+                data-active={theme === value}
+                className='h-9 gap-1.5 text-[10px] text-muted-foreground hover:text-foreground data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:hover:bg-primary/90 data-[active=true]:hover:text-primary-foreground'
+                onClick={() => setTheme(value)}
+              >
+                <Icon className='size-3.5' /> {t(`settings.appearance.themes.${value}`)}
+              </Button>
+            ))}
+          </div>
+        </PreferenceRow>
+        <PreferenceRow title={t('settings.appearance.language')}>
+          <Select
+            value={i18n.language}
+            items={Object.fromEntries(
+              supportedLanguages.map((language) => [language, t(`languages.${language}`)]),
+            )}
+            onValueChange={(language) => language && i18n.changeLanguage(language)}
+          >
+            <SelectTrigger className='h-8 w-full text-[11px]'>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {supportedLanguages.map((language) => (
+                <SelectItem key={language} value={language}>
+                  {t(`languages.${language}`)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </PreferenceRow>
+      </PreferenceSection>
+    </PreferencePage>
+  )
+}
+
+function ShortcutPreferences() {
+  const { t } = useTranslation()
+  const shortcuts = useKoharuStore((state) => state.shortcuts)
+  const setShortcut = useKoharuStore((state) => state.setShortcut)
+  const actions: ShortcutAction[] = [
+    'select',
+    'text',
+    'draw',
+    'eraser',
+    'color_picker',
+    'remove',
+    'pan',
+    'fit',
+  ]
+  return (
+    <PreferencePage
+      title={t('settings.shortcuts.title')}
+      description={t('settings.shortcuts.description')}
+    >
+      <PreferenceSection title={t('settings.shortcuts.tools')}>
+        {actions.map((action) => (
+          <PreferenceRow key={action} title={t(shortcutKeys[action])}>
+            <Input
+              aria-label={t('settings.shortcuts.inputLabel', { action: t(shortcutKeys[action]) })}
+              maxLength={1}
+              value={shortcuts[action]}
+              className='ml-auto h-8 w-14 text-center text-[12px] uppercase'
+              onChange={(event) => setShortcut(action, event.currentTarget.value)}
+            />
+          </PreferenceRow>
+        ))}
+      </PreferenceSection>
+    </PreferencePage>
+  )
+}
+
+function LoadingPreferences() {
+  const { t } = useTranslation()
+  return <p className='py-10 text-[12px] text-muted-foreground'>{t('settings.loading')}</p>
+}
+
+const shortcutKeys: Record<ShortcutAction, string> = {
+  select: 'tools.select',
+  text: 'tools.text',
+  draw: 'tools.draw',
+  eraser: 'tools.eraser',
+  color_picker: 'tools.color_picker',
+  remove: 'tools.remove',
+  pan: 'tools.pan',
+  fit: 'canvas.fit',
+}

package/src/components/preferences/TranslationPreferences.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ModelPicker } from '@aphrody/koharu-ui/components/controls/ModelPicker'
+import { GenerationPreferences } from '@aphrody/koharu-ui/components/preferences/GenerationPreferences'
+import {
+  PreferencePage,
+  PreferenceRow,
+  PreferenceSection,
+} from '@aphrody/koharu-ui/components/preferences/PreferenceFields'
+import { modelKey, orderedLanguageChoices, providerName } from '@aphrody/koharu-ui/lib/translation'
+import type {
+  LanguageChoice,
+  Model,
+  ProviderPreference,
+  TranslationConfig as TranslationSettings,
+} from '@aphrody/koharu-bridge/protocol'
+import { Badge } from '@aphrody/m3-primitives'
+import { Popover, PopoverContent, PopoverTrigger } from '../../internal/components/popover'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../internal/components/select'
+import { Textarea } from '../../internal/components/textarea'
+
+export function TranslationPreferences({
+  value,
+  modelChoices,
+  providers,
+  languages,
+  onChange,
+}: {
+  value: TranslationSettings
+  modelChoices: Model[]
+  providers: ProviderPreference[]
+  languages: LanguageChoice[]
+  onChange: (value: TranslationSettings) => void
+}) {
+  const { t } = useTranslation()
+  const [modelOpen, setModelOpen] = useState(false)
+  const selected =
+    modelChoices.find((candidate) => modelKey(candidate) === modelKey(value.model)) ?? null
+  const current: Model = selected ?? {
+    ...value.model,
+    model: value.model.model ?? null,
+    name: value.model.model ?? providerName(providers, value.model.provider),
+    quantizations: [],
+    vision: value.model.vision ?? false,
+    reasoning: value.model.reasoning ?? false,
+  }
+  const choices = selected ? modelChoices : [current, ...modelChoices]
+  const quantization =
+    current.quantizations.find((quantization) => quantization.id === value.model.quantization) ??
+    current.quantizations[0]
+  const languageChoices = useMemo(() => orderedLanguageChoices(languages), [languages])
+  return (
+    <PreferencePage
+      title={t('settings.translation.title')}
+      description={t('settings.translation.description')}
+    >
+      <PreferenceSection
+        title={t('settings.translation.model')}
+        description={t('settings.translation.modelDescription')}
+      >
+        <PreferenceRow
+          title={t('settings.translation.translationModel')}
+          description={t('settings.translation.translationModelDescription')}
+        >
+          <Popover open={modelOpen} onOpenChange={setModelOpen}>
+            <PopoverTrigger
+              type='button'
+              aria-label={t('settings.translation.translationModel')}
+              className='flex h-9 w-full min-w-0 items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 text-[11px] transition-colors outline-none hover:bg-foreground/[0.03] focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50'
+            >
+              <span className='min-w-0 flex-1 text-left'>
+                <ModelLabel
+                  model={current}
+                  providers={providers}
+                  quantization={quantization?.name ?? value.model.quantization}
+                />
+              </span>
+              <ChevronDown className='size-3.5 shrink-0 text-muted-foreground' />
+            </PopoverTrigger>
+            <PopoverContent
+              align='start'
+              sideOffset={4}
+              className='w-(--anchor-width) min-w-64 gap-0 overflow-hidden rounded-xl border border-border/50 p-1 shadow-sm ring-0'
+            >
+              <ModelPicker
+                value={value.model}
+                models={choices}
+                providers={providers}
+                onBack={() => setModelOpen(false)}
+                onSelect={(model) => {
+                  onChange({
+                    ...value,
+                    model,
+                  })
+                  setModelOpen(false)
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </PreferenceRow>
+      </PreferenceSection>
+
+      <GenerationPreferences
+        value={value.generation}
+        onChange={(generation) => onChange({ ...value, generation })}
+      />
+
+      <PreferenceSection title={t('settings.translation.output')}>
+        <PreferenceRow
+          title={t('model.targetLanguage')}
+          description={t('settings.translation.targetLanguageDescription')}
+        >
+          <Select
+            value={value.target_language}
+            items={Object.fromEntries(
+              languageChoices.map((language) => [language.tag, language.name]),
+            )}
+            onValueChange={(target_language) =>
+              target_language && onChange({ ...value, target_language })
+            }
+          >
+            <SelectTrigger
+              aria-label={t('model.targetLanguage')}
+              className='h-8 w-full text-[11px]'
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {languageChoices.map((language) => (
+                <SelectItem key={language.tag} value={language.tag}>
+                  {language.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </PreferenceRow>
+        <PreferenceRow
+          title={t('model.instructions')}
+          description={t('settings.translation.instructionsDescription')}
+          align='start'
+        >
+          <Textarea
+            aria-label={t('settings.translation.instructionsLabel')}
+            value={value.instructions ?? ''}
+            className='field-sizing-fixed min-h-24 resize-y overflow-y-auto text-[12px] leading-5'
+            placeholder={t('settings.translation.instructionsPlaceholder')}
+            onChange={(event) =>
+              onChange({ ...value, instructions: event.currentTarget.value || null })
+            }
+          />
+        </PreferenceRow>
+      </PreferenceSection>
+    </PreferencePage>
+  )
+}
+
+function ModelLabel({
+  model,
+  providers,
+  quantization,
+}: {
+  model: Model
+  providers: ProviderPreference[]
+  quantization: string | null | undefined
+}) {
+  return (
+    <span className='flex min-w-0 items-center gap-2'>
+      <Badge variant='outline' className='shrink-0 px-1.5 py-0 text-[9px] font-medium'>
+        {providerName(providers, model.provider)}
+      </Badge>
+      <span className='truncate'>
+        {model.name}
+        {quantization && <span className='text-muted-foreground'> · {quantization}</span>}
+      </span>
+    </span>
+  )
+}

package/src/components/preferences/TypesettingPreferences.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { Plus, Trash2 } from 'lucide-react'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { FontPicker } from '@aphrody/koharu-ui/components/controls/FontPicker'
+import { PreferencePage } from '@aphrody/koharu-ui/components/preferences/PreferenceFields'
+import { useFonts } from '@aphrody/koharu-ui/lib/queries'
+import type { TypesettingConfig } from '@aphrody/koharu-bridge/protocol'
+import { Button } from '../../internal/components/button'
+
+export function TypesettingPreferences({
+  value,
+  onChange,
+}: {
+  value: TypesettingConfig
+  onChange: (value: TypesettingConfig) => void
+}) {
+  const { t } = useTranslation()
+  const fonts = useFonts()
+  const families = fonts.data ?? []
+  const fontFamilies = useMemo(() => value.font_families ?? [], [value.font_families])
+  const selectedNames = useMemo(() => new Set(fontFamilies.map(normalizeFontName)), [fontFamilies])
+  const availableFamilies = families.filter(
+    (family) => !selectedNames.has(normalizeFontName(family.name)),
+  )
+
+  const replaceFamily = (index: number, family: string) => {
+    const next = [...fontFamilies]
+    next[index] = family
+    onChange({ ...value, font_families: next })
+  }
+
+  const removeFamily = (index: number) => {
+    onChange({
+      ...value,
+      font_families: fontFamilies.filter((_, candidate) => candidate !== index),
+    })
+  }
+
+  return (
+    <PreferencePage
+      title={t('settings.typesetting.title')}
+      description={t('settings.typesetting.description')}
+    >
+      <section aria-labelledby='typesetting-font-stack'>
+        <header className='mb-3'>
+          <h3 id='typesetting-font-stack' className='text-[12px] font-semibold'>
+            {t('settings.typesetting.fontFallback')}
+          </h3>
+          <p className='mt-0.5 text-[11px] leading-4 text-muted-foreground'>
+            {t('settings.typesetting.fontFallbackDescription')}
+          </p>
+        </header>
+        <div className='overflow-hidden rounded-xl border border-border/80 bg-[var(--surface-panel)]'>
+          {fontFamilies.length > 0 ? (
+            <ol
+              className='divide-y divide-border/80'
+              aria-label={t('settings.typesetting.defaultFamilies')}
+            >
+              {fontFamilies.map((family, index) => {
+                const choices = families.filter(
+                  (candidate) =>
+                    normalizeFontName(candidate.name) === normalizeFontName(family) ||
+                    !selectedNames.has(normalizeFontName(candidate.name)),
+                )
+                return (
+                  <li
+                    key={`${normalizeFontName(family)}-${index}`}
+                    className='group flex min-w-0 items-center gap-3 px-3 py-2'
+                  >
+                    <span
+                      aria-hidden='true'
+                      className='flex size-6 shrink-0 items-center justify-center rounded-md bg-muted text-[9px] font-semibold text-muted-foreground tabular-nums'
+                    >
+                      {String(index + 1).padStart(2, '0')}
+                    </span>
+                    <div className='min-w-0 flex-1'>
+                      <FontPicker
+                        value={family}
+                        families={choices}
+                        ariaLabel={t('settings.typesetting.familyLabel', { index: index + 1 })}
+                        onChange={(next) => replaceFamily(index, next)}
+                      />
+                    </div>
+                    <Button
+                      type='button'
+                      variant='ghost'
+                      size='icon-sm'
+                      aria-label={t('settings.typesetting.removeFamily', { family })}
+                      title={t('settings.typesetting.removeFamily', { family })}
+                      className='shrink-0 text-muted-foreground hover:bg-destructive/10 hover:text-destructive'
+                      onClick={() => removeFamily(index)}
+                    >
+                      <Trash2 className='size-3.5' />
+                    </Button>
+                  </li>
+                )
+              })}
+            </ol>
+          ) : (
+            <p role='status' className='px-4 py-5 text-[11px] text-muted-foreground'>
+              {t('settings.typesetting.empty')}
+            </p>
+          )}
+          <div className='flex min-w-0 items-center gap-3 border-t border-border/80 bg-muted/20 px-3 py-2'>
+            <span className='flex size-6 shrink-0 items-center justify-center text-muted-foreground'>
+              <Plus className='size-3.5' />
+            </span>
+            <div className='min-w-0 flex-1'>
+              <FontPicker
+                value=''
+                families={availableFamilies}
+                disabled={fonts.isPending || availableFamilies.length === 0}
+                ariaLabel={t('settings.typesetting.addFamily')}
+                placeholder={
+                  fonts.isPending
+                    ? t('settings.typesetting.loadingFonts')
+                    : t('settings.typesetting.addFamily')
+                }
+                onChange={(family) =>
+                  onChange({ ...value, font_families: [...fontFamilies, family] })
+                }
+              />
+            </div>
+            <span aria-hidden='true' className='size-7 shrink-0' />
+          </div>
+        </div>
+        {fonts.isError && (
+          <p role='status' className='mt-2 text-[10px] leading-4 text-destructive'>
+            {t('settings.typesetting.loadError')}
+          </p>
+        )}
+      </section>
+    </PreferencePage>
+  )
+}
+
+function normalizeFontName(value: string): string {
+  return value.normalize('NFKC').trim().replace(/\s+/g, ' ').toLowerCase()
+}