Skip to content

feat: add PDF attachment preview preferences #89

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

Merged
Rasalas merged 1 commit into from
May 1, 2026
Merged

feat: add PDF attachment preview preferences #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
47 changes: 30 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,20 +127,12 @@
</div>
<!-- Theme Menu -->
<div id="themeMenu" class="theme-menu">
<button id="themeToggle" class="theme-toggle" aria-label="Change theme" title="Change theme (T)">
<!-- Sun Icon (for dark mode - shows sun to switch to light) -->
<svg id="themeIconSun" class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
<!-- Moon Icon (for light mode - shows moon to switch to dark) -->
<svg id="themeIconMoon" class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
<!-- System Icon -->
<svg id="themeIconSystem" class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
</svg>
</button>
<button id="themeToggle" class="theme-toggle" aria-label="Settings" title="Settings">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.075.04.149.083.221.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.431.992a7.723 7.723 0 0 1 0 .255c-.007.378.138.75.431.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.333.183-.583.495-.646.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.397-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.645-.87a6.52 6.52 0 0 1-.22-.127c-.326-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.241.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.379-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.75.072 1.076-.124.072-.044.146-.086.22-.128.333-.183.583-.495.645-.869l.214-1.28Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
</button>
<div id="themeMenuDropdown" class="theme-menu-dropdown">
<div class="theme-menu-section">
<div class="theme-menu-label">App Theme</div>
Expand Down Expand Up @@ -203,12 +195,12 @@
</button>
</div>
<div class="theme-menu-section">
<div class="theme-menu-label">Inline Images</div>
<div class="theme-menu-label">Inline Image Attachments</div>
<button class="theme-menu-item" data-type="inline-images" data-inline-images="collapsed">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 7.5h16.5m-16.5 4.5h9m-9 4.5h7.5" />
</svg>
<span>Collapsed by default</span>
<span>Collapsed</span>
<svg class="check-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
</svg>
Expand All @@ -217,7 +209,28 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.159 2.159M3.75 19.5h16.5A1.5 1.5 0 0 0 21.75 18V6A1.5 1.5 0 0 0 20.25 4.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm11.25-10.5h.008v.008H15V9Z" />
</svg>
<span>Expanded by default</span>
<span>Expanded</span>
<svg class="check-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
</svg>
</button>
</div>
<div class="theme-menu-section">
<div class="theme-menu-label">PDF Attachments</div>
<button class="theme-menu-item" data-type="pdf-attachments" data-pdf-open-mode="in-app">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.5h16.5v15H3.75v-15Zm3 4.5h10.5M6.75 12h10.5m-10.5 3h6" />
</svg>
<span>Open in app</span>
<svg class="check-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
</svg>
</button>
<button class="theme-menu-item" data-type="pdf-attachments" data-pdf-open-mode="external">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
</svg>
<span>Open externally</span>
<svg class="check-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
</svg>
Expand Down
31 changes: 31 additions & 0 deletions src/js/UserPreferences.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { storage } from './storage.js';

export const PDF_ATTACHMENT_OPEN_MODE = {
IN_APP: 'in-app',
EXTERNAL: 'external'
};

export const PDF_ATTACHMENT_OPEN_MODE_STORAGE_KEY = 'msgReader_pdfAttachmentOpenMode';

export function getPdfAttachmentOpenMode() {
const savedValue = storage.get(
PDF_ATTACHMENT_OPEN_MODE_STORAGE_KEY,
PDF_ATTACHMENT_OPEN_MODE.IN_APP
);

return Object.values(PDF_ATTACHMENT_OPEN_MODE).includes(savedValue)
? savedValue
: PDF_ATTACHMENT_OPEN_MODE.IN_APP;
}

export function setPdfAttachmentOpenMode(openMode) {
if (!Object.values(PDF_ATTACHMENT_OPEN_MODE).includes(openMode)) {
return false;
}

return storage.set(PDF_ATTACHMENT_OPEN_MODE_STORAGE_KEY, openMode);
}

export function pdfAttachmentsOpenInApp() {
return getPdfAttachmentOpenMode() === PDF_ATTACHMENT_OPEN_MODE.IN_APP;
}
35 changes: 14 additions & 21 deletions src/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,15 @@ import FileHandler from './FileHandler.js';
import KeyboardManager from './KeyboardManager.js';
import { extractMsg, extractEml } from './utils.js';
import { isTauri, getPendingFiles, onFileOpen, onFileDrop, checkForUpdates } from './tauri-bridge.js';
import { themeManager, THEMES, EMAIL_THEMES } from './ThemeManager.js';
import { themeManager } from './ThemeManager.js';
import {
getInlineImageAttachmentVisibility,
setInlineImageAttachmentVisibility
} from './InlineImagePreference.js';
import {
getPdfAttachmentOpenMode,
setPdfAttachmentOpenMode
} from './UserPreferences.js';
import { devModeManager } from './DevModeManager.js';
import { DevPanel } from './ui/DevPanel.js';

Expand Down Expand Up @@ -252,6 +256,8 @@ function initTheme() {
document.dispatchEvent(new CustomEvent('inline-image-attachment-visibility-change', {
detail: { visibility: item.dataset.inlineImages }
}));
} else if (type === 'pdf-attachments') {
setPdfAttachmentOpenMode(item.dataset.pdfOpenMode);
}

updateThemeUI();
Expand All @@ -273,31 +279,14 @@ function initTheme() {
}

/**
* Update theme-related UI elements
* Updates icons, active states in dropdown menu
* Update settings UI elements
* Updates active states in dropdown menu
*/
function updateThemeUI() {
const savedTheme = themeManager.getSavedTheme();
const activeTheme = themeManager.getActiveTheme();
const savedEmailTheme = themeManager.getSavedEmailTheme();
const inlineImageVisibility = getInlineImageAttachmentVisibility();

// Update toggle button icon
const sunIcon = document.getElementById('themeIconSun');
const moonIcon = document.getElementById('themeIconMoon');
const systemIcon = document.getElementById('themeIconSystem');

sunIcon?.classList.remove('active');
moonIcon?.classList.remove('active');
systemIcon?.classList.remove('active');

if (savedTheme === THEMES.SYSTEM) {
systemIcon?.classList.add('active');
} else if (activeTheme === THEMES.DARK) {
sunIcon?.classList.add('active'); // Show sun when dark (to switch to light)
} else {
moonIcon?.classList.add('active'); // Show moon when light (to switch to dark)
}
const pdfAttachmentOpenMode = getPdfAttachmentOpenMode();

// Update active states in dropdown menu
document.querySelectorAll('.theme-menu-item[data-type="app"]').forEach(item => {
Expand All @@ -311,6 +300,10 @@ function updateThemeUI() {
document.querySelectorAll('.theme-menu-item[data-type="inline-images"]').forEach(item => {
item.classList.toggle('active', item.dataset.inlineImages === inlineImageVisibility);
});

document.querySelectorAll('.theme-menu-item[data-type="pdf-attachments"]').forEach(item => {
item.classList.toggle('active', item.dataset.pdfOpenMode === pdfAttachmentOpenMode);
});
}

// Initialize the app when the DOM is loaded
Expand Down
Loading