Refactor modals into partials and add missing i18n keys for settings

[Skillkiller]

Description

In the settings menu, there were two options that hadn't been translated yet (see #593). I have now implemented the missing i18n keys in the HTML files and added the corresponding German and English translations.

During implementation, I noticed that the buttons within the warning dialogs were also untranslated. I’ve addressed this by adding the necessary translation keys to both the HTML and the TypeScript logic.

To improve maintainability, I refactored these dialogs into separate HTML partials. This allowed me to remove redundant code from index.html and simple-index.html. Consequently, any future changes only need to be made in one central location rather than being applied twice.

Fixes #593

Type of change

• New feature (non-breaking change which adds functionality)

🧪 How Has This Been Tested?

1. Change language to non-English.
2. Go to Settings > Preferences.
3. Confirm that "Compact Mode" and "Advanced Settings" labels and descriptions are localized.

Checklist:

• Verified output manually
• Tested with relevant sample documents or data
• Wrote Vite Test Case (if applicable)

Expected Results:

Checklist:

• I have signed the Contributor License Agreement (CLA) or my organization has signed the Corporate CLA
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

• New Features

  • Added Compact Mode preference in settings to display tools as a compact list rather than card format
  • Introduced Advanced Settings option for configuring external processing modules (PyMuPDF, Ghostscript, CoherentPDF)

• Localization

  • Added comprehensive German language support for all settings interface elements
  • Improved localization support for warning and confirmation dialog buttons

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR extracts the "Settings/Shortcuts" and "Warning" modal markup from inline HTML in index.html and simple-index.html into reusable Handlebars partial templates. It adds German and English localization keys for new settings options (compact mode, advanced settings), and updates the warning modal confirm button to use localized strings instead of hardcoded English text.

Changes

Cohort / File(s)	Summary
Template Reorganization index.html, simple-index.html	Replaced inline modal markup (272 and 266 lines respectively) with Handlebars partial includes ({{> settings-modal }} and {{> warning-modal }}), removing the full modal DOM structures from these files.
New Modal Partials src/partials/settings-modal.html, src/partials/warning-modal.html	Added two new reusable HTML partials: settings modal with two-tab layout (Shortcuts and Preferences tabs), search functionality, preference toggles (Full Width, Compact Mode), and Advanced Settings link; warning modal with icon, title, message, and localized Cancel/Proceed buttons.
Localization Updates public/locales/de/common.json, public/locales/en/common.json	Added German and English translations for new settings UI labels: settings.compactMode, settings.compactModeDescription, settings.advancedSettings, settings.advancedSettingsDescription (references external processing modules: PyMuPDF, Ghostscript, CoherentPDF).
Button Label Localization src/js/main.ts	Updated warning modal confirm button labels in showWarningModal function to use i18n (t('warning.proceed') and t('alert.ok')) instead of hardcoded English strings.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Modal mixins dance, partial at a glance,
Handlebars twirl where templates now prance,
Locales bloom in Deutsch and English song,
Settings split clean, where buttons now belong!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description provides clear context, testing steps, rationale for refactoring, and links to the relevant issue with supporting screenshots.
Linked Issues check	✅ Passed	The PR successfully addresses issue #593 by adding missing translations for Compact Mode and Advanced Settings, localizing warning modal buttons, and improving maintainability through refactoring.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing issue #593: adding missing i18n keys, localizing warning buttons, and refactoring modals into partials for maintainability.
Title check	✅ Passed	The title accurately summarizes the main changes: refactoring modals into partials and adding missing i18n keys for settings features.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/partials/warning-modal.html`:
- Around line 1-45: The template uses a non-existent Tailwind class
"bg-gray-850" (seen on the modal container with id "warning-modal" / class list)
which breaks styling; fix by either adding a custom color token for
--color-gray-850 in your Tailwind `@theme` extension in styles.css (so
"bg-gray-850" becomes valid) or replace "bg-gray-850" with an existing palette
class such as "bg-gray-800" or "bg-gray-900" in the warning modal (and make the
same replacement for the identical occurrence in the settings modal).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f4a1a378-5bc7-4366-a7a7-83d717d7121c

📥 Commits

Reviewing files that changed from the base of the PR and between 651793b and 5cc2ec3.

📒 Files selected for processing (7)

• index.html
• public/locales/de/common.json
• public/locales/en/common.json
• simple-index.html
• src/js/main.ts
• src/partials/settings-modal.html
• src/partials/warning-modal.html