Skip to content

Refactor modals into partials and add missing i18n keys for settings #658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Skillkiller wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Refactor modals into partials and add missing i18n keys for settings #658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f4ab00e
fix: add shortcuts modal from index.html
Skillkiller Apr 14, 2026
f393962
feat: extract settings modal for use in simple and normal index page
Skillkiller Apr 14, 2026
d408149
feat: extract warning modal for use in simple and normal index page
Skillkiller Apr 14, 2026
412bfcd
feat: update warning modal buttons for internationalization support
Skillkiller Apr 14, 2026
5cc2ec3
feat: add compact mode and advanced settings to localization
Skillkiller Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
274 changes: 2 additions & 272 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -588,280 +588,10 @@ <h3 class="text-xl font-bold">Document Preview</h3>
</div>

<!-- Shortcuts Modal -->
<div
id="shortcuts-modal"
class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"
>
<div
class="bg-gray-800 w-full max-w-2xl rounded-xl border border-gray-700 shadow-2xl flex flex-col max-h-[80vh]"
>
<div
class="p-6 border-b border-gray-700 flex justify-between items-center"
>
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="settings" class="w-6 h-6 text-indigo-400"></i>
<span data-i18n="settings.title">Settings</span>
</h3>
<button
id="close-shortcuts-modal"
class="text-gray-400 hover:text-white transition-colors"
>
<i data-lucide="x" class="w-6 h-6"></i>
</button>
</div>

<!-- Tabs -->
<div class="flex border-b border-gray-700">
<button
id="shortcuts-tab-btn"
class="flex-1 py-3 text-sm font-medium bg-indigo-600 text-white"
>
<i data-lucide="keyboard" class="inline-block w-4 h-4 mr-1"></i>
<span data-i18n="settings.shortcuts">Shortcuts</span>
</button>
<button
id="preferences-tab-btn"
class="flex-1 py-3 text-sm font-medium text-gray-300 hover:text-white"
>
<i data-lucide="sliders" class="inline-block w-4 h-4 mr-1"></i>
<span data-i18n="settings.preferences">Preferences</span>
</button>
</div>

<!-- Shortcuts Tab Content -->
<div id="shortcuts-tab-content" class="p-6 overflow-y-auto flex-grow">
<div class="flex justify-between items-center mb-6">
<div class="relative flex-grow mr-4">
<i
data-lucide="search"
class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-500"
></i>
<input
type="text"
id="shortcut-search"
data-i18n-placeholder="settings.searchShortcuts"
placeholder="Search shortcuts..."
class="w-full bg-gray-900 border border-gray-700 text-white rounded-lg pl-10 pr-4 py-2 focus:ring-indigo-500 focus:border-indigo-500"
/>
</div>
</div>

<div
class="mb-4 p-3 bg-indigo-900/20 border border-indigo-500/30 rounded-lg flex items-start gap-3"
>
<i
data-lucide="info"
class="w-5 h-5 text-indigo-400 flex-shrink-0 mt-0.5"
></i>
<p class="text-sm text-indigo-200">
<span data-i18n="settings.shortcutsInfo"
>Press and hold keys to set a shortcut. Changes are
<strong>auto-saved</strong>.</span
>
<br /><span
class="text-yellow-300"
data-i18n="settings.shortcutsWarning"
>⚠️ Avoid common browser shortcuts (Cmd/Ctrl+W, Cmd/Ctrl+T,
Cmd/Ctrl+N etc.) as they may not work reliably.</span
>
</p>
</div>

<div id="shortcuts-list" class="space-y-2">
<!-- Shortcuts will be populated here -->
</div>
</div>

<!-- Preferences Tab Content -->
<div
id="preferences-tab-content"
class="hidden p-6 overflow-y-auto flex-grow"
>
<h4
class="text-lg font-semibold text-white mb-4"
data-i18n="settings.displayPreferences"
>
Display Preferences
</h4>

<div class="space-y-4">
<div
class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700"
>
<div class="flex-1">
<label
for="full-width-toggle"
class="text-sm font-medium text-gray-200 cursor-pointer"
data-i18n="settings.fullWidthMode"
>
Full Width Mode
</label>
<p
class="text-xs text-gray-400 mt-1"
data-i18n="settings.fullWidthDescription"
>
Use the full screen width for all tools instead of a
centered container
</p>
</div>
<label
class="relative inline-flex items-center cursor-pointer ml-4"
>
<input
type="checkbox"
id="full-width-toggle"
class="sr-only peer"
/>
<div
class="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"
></div>
</label>
</div>

<div
class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700"
>
<div class="flex-1">
<label
for="compact-mode-toggle"
class="text-sm font-medium text-gray-200 cursor-pointer"
data-i18n="settings.compactMode"
>
Compact Mode
</label>
<p
class="text-xs text-gray-400 mt-1"
data-i18n="settings.compactModeDescription"
>
Display tools as a compact list instead of cards
</p>
</div>
<label
class="relative inline-flex items-center cursor-pointer ml-4"
>
<input
type="checkbox"
id="compact-mode-toggle"
class="sr-only peer"
/>
<div
class="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"
></div>
</label>
</div>

<!-- Advanced Settings Link -->
<a
href="wasm-settings.html"
class="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700 hover:bg-gray-800 hover:border-indigo-500/50 transition-all group"
>
<div class="flex-1">
<span
class="text-sm font-medium text-gray-200 group-hover:text-white"
>
Advanced Settings
</span>
<p class="text-xs text-gray-400 mt-1">
Configure external processing modules (PyMuPDF, Ghostscript,
CoherentPDF)
</p>
</div>
<i
data-lucide="chevron-right"
class="w-5 h-5 text-gray-500 group-hover:text-indigo-400 transition-colors"
></i>
</a>
</div>
</div>

<div
class="p-6 border-t border-gray-700 flex justify-between items-center bg-gray-850 rounded-b-xl"
>
<div id="shortcuts-tab-footer" class="flex gap-3">
<button
id="import-shortcuts-btn"
class="text-gray-400 hover:text-white text-sm font-medium flex items-center gap-1 transition-colors"
>
<i data-lucide="upload" class="w-4 h-4"></i>
<span data-i18n="settings.import">Import</span>
</button>
<button
id="export-shortcuts-btn"
class="text-gray-400 hover:text-white text-sm font-medium flex items-center gap-1 transition-colors"
>
<i data-lucide="download" class="w-4 h-4"></i>
<span data-i18n="settings.export">Export</span>
</button>
</div>
<div id="preferences-tab-footer" class="hidden w-full">
<p
class="text-xs text-gray-400 text-center"
data-i18n="settings.settingsAutoSaved"
>
Settings are automatically saved
</p>
</div>
<button
id="reset-shortcuts-btn"
class="text-red-400 hover:text-red-300 text-sm font-medium transition-colors"
>
<span data-i18n="settings.resetToDefaults"
>Reset to Defaults</span
>
</button>
</div>
</div>
</div>
{{> settings-modal }}

<!-- Warning Modal -->
<div
id="warning-modal"
class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden items-center justify-center p-4"
>
<div
class="bg-gray-800 rounded-xl border border-gray-700 shadow-2xl max-w-md w-full overflow-hidden animate-scale-in"
>
<div class="p-6">
<div class="flex items-start gap-4 mb-4">
<div
id="warning-icon"
class="w-12 h-12 flex items-center justify-center rounded-full bg-yellow-500/10 flex-shrink-0"
>
<i
data-lucide="alert-triangle"
class="w-6 h-6 text-yellow-500"
></i>
</div>
<div class="flex-1">
<h3
id="warning-title"
class="text-xl font-bold text-white mb-2"
>
Warning
</h3>
<p
id="warning-message"
class="text-gray-300 text-sm leading-relaxed"
></p>
</div>
</div>
</div>
<div class="flex gap-3 p-4 bg-gray-850 border-t border-gray-700">
<button
id="warning-cancel-btn"
class="flex-1 px-4 py-2.5 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-medium transition-colors"
>
Cancel
</button>
<button
id="warning-confirm-btn"
class="flex-1 px-4 py-2.5 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg font-medium transition-colors"
>
Proceed
</button>
</div>
</div>
</div>
{{> warning-modal }}

<div
id="password-modal"
Expand Down
4 changes: 4 additions & 0 deletions public/locales/de/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,10 @@
"resetToDefaults": "Auf Standard zurücksetzen",
"fullWidthMode": "Volle Breite",
"fullWidthDescription": "Verwende die volle Bildschirmbreite für alle Werkzeuge anstelle eines zentrierten Containers",
"compactMode": "Kompaktmodus",
"compactModeDescription": "Werkzeuge als kompakte Liste statt als Karten anzeigen",
"advancedSettings": "Erweiterte Einstellungen",
"advancedSettingsDescription": "Externe Verarbeitungsmodule konfigurieren (PyMuPDF, Ghostscript, CoherentPDF)",
"settingsAutoSaved": "Einstellungen werden automatisch gespeichert",
"clickToSet": "Klicke zum Festlegen",
"pressKeys": "Tasten drücken...",
Expand Down
4 changes: 4 additions & 0 deletions public/locales/en/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,10 @@
"resetToDefaults": "Reset to Defaults",
"fullWidthMode": "Full Width Mode",
"fullWidthDescription": "Use the full screen width for all tools instead of a centered container",
"compactMode": "Compact Mode",
"compactModeDescription": "Display tools as a compact list instead of cards",
"advancedSettings": "Advanced Settings",
"advancedSettingsDescription": "Configure external processing modules (PyMuPDF, Ghostscript, CoherentPDF)",
"settingsAutoSaved": "Settings are automatically saved",
"clickToSet": "Click to set",
"pressKeys": "Press keys...",
Expand Down
Loading
Loading