Update KOReader Sync settings (#1030)

* feat(settings): refactor and implement KOReader Sync settings page

Refactors the KOReader Sync settings section into its own dedicated page and implements the full connection and configuration flow.

The previous implementation in the main server settings was outdated and incomplete. This change aligns the frontend with the latest backend logic and provides a complete user experience.

Key changes include:
- Separated the UI into two states: a login form for initial connection and a configuration panel for existing connections.
- Implemented `connectKoSyncAccount` and `logoutKoSyncAccount` mutations to handle authentication with the KOReader Sync server.
- Updated the `SERVER_SETTINGS` GraphQL fragment to use the new `koreaderSyncStrategyForward` and `koreaderSyncStrategyBackward` fields, removing the deprecated `koreaderSyncStrategy`.
- Moved all KOReader Sync settings from the generic Server Settings page to a dedicated route at `/settings/koreader-sync`.
- Restructured and improved i18n keys for better clarity and consistency.

Ran `yarn gql:codegen` to regenerate GraphQL types and helpers.

* Extract credentials login into component

* Update to server changes and cleanup

---------

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

src/features/settings/Settings.constants.ts

@@ -13,7 +13,14 @@ import { GlobalUpdateSkipEntriesSettings, MetadataServerSettings } from '@/featu
 import { GridLayout, TranslationKey } from '@/base/Base.types.ts';
 import { getDefaultLanguages } from '@/base/utils/Languages.ts';
 import { SelectSettingValue, SelectSettingValueDisplayInfo } from '@/base/components/settings/SelectSetting.tsx';
-import { AuthMode, WebUiChannel, WebUiFlavor, WebUiInterface } from '@/lib/graphql/generated/graphql.ts';
+import {
+    AuthMode,
+    KoreaderSyncChecksumMethod,
+    KoreaderSyncConflictStrategy,
+    WebUiChannel,
+    WebUiFlavor,
+    WebUiInterface,
+} from '@/lib/graphql/generated/graphql.ts';
 import { ThemeMode } from '@/features/theme/AppTheme.types.ts';
 
 export const MANGA_GRID_WIDTH = {
@@ -207,3 +214,45 @@ export const KOREADER_SYNC_PERCENTAGE_TOLERANCE = {
     max: 1,
     step: 0.05,
 };
+
+export const KOREADER_SYNC_CONFLICT_STRATEGIES = Object.values(KoreaderSyncConflictStrategy);
+export const KOREADER_SYNC_CONFLICT_STRATEGY_TO_TRANSLATION_KEYS: Record<
+    KoreaderSyncConflictStrategy,
+    SelectSettingValueDisplayInfo
+> = {
+    [KoreaderSyncConflictStrategy.Disabled]: {
+        text: 'settings.server.koreader.sync.strategy.option.disabled',
+    },
+    [KoreaderSyncConflictStrategy.KeepLocal]: {
+        text: 'settings.server.koreader.sync.strategy.option.keep_local',
+    },
+    [KoreaderSyncConflictStrategy.KeepRemote]: {
+        text: 'settings.server.koreader.sync.strategy.option.keep_remote',
+    },
+    [KoreaderSyncConflictStrategy.Prompt]: {
+        text: 'settings.server.koreader.sync.strategy.option.prompt',
+    },
+};
+export const KOREADER_SYNC_CONFLICT_STRATEGY_SELECT_VALUES: SelectSettingValue<KoreaderSyncConflictStrategy>[] =
+    KOREADER_SYNC_CONFLICT_STRATEGIES.map((strategy) => [
+        strategy,
+        KOREADER_SYNC_CONFLICT_STRATEGY_TO_TRANSLATION_KEYS[strategy],
+    ]);
+
+export const KOREADER_SYNC_CHECKSUM_METHODES = Object.values(KoreaderSyncChecksumMethod);
+export const KOREADER_SYNC_CHECKSUM_METHOD_TO_TRANSLATION_KEYS: Record<
+    KoreaderSyncChecksumMethod,
+    SelectSettingValueDisplayInfo
+> = {
+    [KoreaderSyncChecksumMethod.Binary]: {
+        text: 'settings.server.koreader.sync.check_sum_method.binary',
+    },
+    [KoreaderSyncChecksumMethod.Filename]: {
+        text: 'settings.server.koreader.sync.check_sum_method.filename',
+    },
+};
+export const KOREADER_SYNC_CHECKSUM_METHOD_SELECT_VALUES: SelectSettingValue<KoreaderSyncChecksumMethod>[] =
+    KOREADER_SYNC_CHECKSUM_METHODES.map((method) => [
+        method,
+        KOREADER_SYNC_CHECKSUM_METHOD_TO_TRANSLATION_KEYS[method],
+    ]);