Add offline translation caching for seamless offline experience

- Implemented TranslationCache class with IndexedDB storage
- Cache translations automatically with 30-day expiration
- Added cache management UI in settings modal
  - Shows cache count and size
  - Toggle to enable/disable caching
  - Clear cache button
- Check cache first before API calls (when enabled)
- Automatic cleanup when reaching 1000 entries limit
- Show "(cached)" indicator for cached translations
- Works completely offline after translations are cached

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-06-02 21:56:31 -06:00
parent 05ad940079
commit 08791d2fed
4 changed files with 376 additions and 6 deletions

View File

@@ -286,6 +286,29 @@
Error notifications
</label>
</div>
<hr>
<h6>Offline Cache</h6>
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center mb-2">
<span>Cached translations:</span>
<span id="cacheCount" class="badge bg-primary">0</span>
</div>
<div class="d-flex justify-content-between align-items-center mb-2">
<span>Cache size:</span>
<span id="cacheSize" class="badge bg-secondary">0 KB</span>
</div>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="offlineMode" checked>
<label class="form-check-label" for="offlineMode">
Enable offline caching
</label>
</div>
<button type="button" class="btn btn-sm btn-outline-danger" id="clearCache">
<i class="fas fa-trash"></i> Clear Cache
</button>
</div>
</div>
<div class="modal-footer">
<div id="settingsSaveStatus" class="text-success me-auto" style="display: none;">