feat: introduce cloud backup & restore (beta), enhance UI, and refactor code#437
Open
feat: introduce cloud backup & restore (beta), enhance UI, and refactor code#437
Conversation
Remove the in-file token validation and checksum verification helpers from the backup page, including isTokenValid, validateReadableToken(), onTokenInput(), and the commented verifyChecksum implementation. Update the token input field (placeholder and maxlength reduced to 23) and change the button enable check to a simple length check (tokenInput.length !== 23). Also simplify backupMeta and restorePreview comments by removing checksum references. This shifts validation/verification responsibility away from the client and simplifies the UI logic.
Replace terminology and wiring from 'token' to 'backup key' throughout the cloud backup/restore page. Key changes: rename localStorage key variable, savedToken/tokenInput/hasCopiedToken -> savedBackupKey/backupKeyInput/hasCopiedBackupKey; rename persist/forget/copy/validate/generate handlers; update API header to 'x-backup-key' and endpoint paths (/tokens/* -> /backupKey/*); update user-facing text, placeholders and error messages to reference backup key; keep restore/apply logic unchanged. This is a straightforward rename/refactor to reflect the new backup key naming and API contract.
Reset restorePreview when no changes are found and refactor the restore/preview UI. The detailed per-setting formatter (formatValue) and the verbose diff list were removed; the preview now shows only the count of changed settings (changedSettingsCount) computed from getChangedSettings. The restore flow is split into explicit steps (fetch/preview vs confirm/apply), the Restore button is hidden once a preview is loaded, and the Apply action now uses showConfirm before calling the restore handler. Various layout/text tweaks clarify that local settings remain untouched until confirmation and that applying will replace settings and reload the page.
Add a 'Share' button to the backup page alongside the existing copy/forget actions. The button uses the Web Share API (navigator.share) when available; otherwise it falls back to writing the backup key to the clipboard and calls showAlert to notify the user. Reuses existing buttonClasses styling.
apiFetch now attempts to read the user's IANA timezone via Intl.DateTimeFormat().resolvedOptions().timeZone and, when available, includes it as an x-user-timezone header on every request. The change is wrapped in a try/catch so timezone detection is optional/failsafe; existing behavior of sending x-backup-key and parsing JSON on error responses is preserved. This lets the server store/return backup/restore timestamps in the user's local time.
Switch from saving a plain backup key string to storing a JSON object (cloudBackupAndRestoreData) that includes the backupKey and three timestamps (keyCreatedAt, lastBackedUpAt, lastRestoredAt). Add readBackupData/writeBackupData helpers, track and update timestamps when generating a key, performing a backup, and performing a restore, and clear local timestamps when forgetting the local key. Update UI to show those timestamps, adjust behavior when entering a key from another device (preserve existing timestamps rather than overwrite creation date), remove backupMeta usage, and add a Web Share API fallback that copies the key to clipboard.
Add three new SVG icon components (CloudBackup, CloudRestore, Share) and update src/routes/backup/+page.svelte to import those plus Copy and Trash. Replace several text-only action buttons (Copy, Share, Forget, Backup, Restore) with icon+label buttons, adding spacing classes (text-sm, space-x-2) while keeping existing disabled styling and behavior to improve UI clarity and consistency.
Add two new SVG components (GenerateBackupKey.svelte, InputBackupKey.svelte) and import them into the backup page. Update src/routes/backup/+page.svelte to use the new icons, shorten some button labels (e.g. 'Generate Backup Key' -> 'Generate Key', 'Enter Your Backup Key' -> 'Enter Key'), and adjust button classes (replace 'text-sm space-x-2' with 'h-max whitespace-nowrap' and keep disabled styling). These are purely UI/layout changes to improve icon usage and button spacing; no functional logic was modified.
Clarify and rename the QuranWBW backup API identifier: change the comment to "QuranWBW's Cloud Backup API" and replace the apiBase constant with cloudBackupAPI. Update the fetch call to use the new variable name. No functional change, just improved naming and clarity.
Enhance UI by adding Check and Cross icons to backup page buttons (Validate/Save, Cancel, Apply) and converting several offline page action buttons to icon+label layout with improved responsive spacing. Also adjust offline page button structure to a vertical stack on small screens and show progress percentage alongside icons while downloading. Update service-worker to ignore requests to cloud-backup-api.quranwbw.com so those API calls are not served from the cache.
Move local backup/restore UI to the dedicated Backup & Restore page, add import/export functionality, and polish related components. Changes include: - src/components/ui/Modals/ConfirmationAlertModal.svelte: add Check/Cross icons and update confirm/cancel/okay button content. - src/components/ui/SettingsDrawer/SettingsDrawer.svelte: remove inline import/export controls and file input; update copy to link users to the new /backup page. - src/routes/backup/+page.svelte: add a Local Backup & Restore section with export/import buttons, hidden file input, trigger/import handlers, and updated page copy/title. - src/utils/settingsManager.js: implement robust mergeWithDefaults with type checks, implement importSettings and exportSettings (file validation, encoding/decoding, download, persistence, and umami tracking), and improve comments and filename normalization. These changes centralize backup flows, support offline local backups, and add safer import/export handling.
Wrap the Local Backup & Restore section in a container div (adds spacing, overflow-auto) and adjust the placement of the conditional closing tag. Also tidy indentation and align the section's inner markup in src/routes/backup/+page.svelte. No functional changes — markup/layout cleanup for readability.
Merge the separate cloud "Save" and "Restore" sections into a single "Cloud Backup & Restore" area. Buttons for Backup and Restore are now shown side-by-side with responsive layout, timestamps for last backed up/restored are displayed together, and the restore flow enters an inline preview/confirmation state showing changed setting counts. Also add a conditional disabled class to the backup-key validate button when the key length is incorrect, and make small copy/spacing adjustments.
Add Umami analytics calls across backup flows and rename the local-key removal action for clarity. Key changes: - Renamed forgetLocalBackupKey to deleteLocalBackupKey and updated the button label from "Forget" to "Delete" (preserves cloud backup). - Added window.umami?.track calls for events: Backup Key Deleted, Backup Key Generated, Backup Key Entered, Backup Key Copied, Backup Key Shared, Cloud Backup Failed, Cloud Backup Success, Cloud Restore Success, Cloud Restore Applied, and Cloud Restore Cancelled. - Updated explanatory text about stored keys to mention unused keys are purged from the cloud after 30 days. These changes are primarily telemetry/UI wording and do not alter core backup/restore logic.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.