src-advisory/SRCmail
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add extra-compact density option and fix font size scaling

Browse Source 
- Add 'extra-compact' density level that hides avatars and preview
  text, showing only sender and subject for maximum information density
- Add visual density preview in appearance settings showing a 3-row
  email list mockup that reflects each density option
- Fix global font size setting only changing line height by moving
  font-size from body to :root so rem-based Tailwind classes scale
- Apply extra-compact behavior to email list items, thread list items,
  thread email items, and thread conversation view (EmailCard)
- Update email list virtualizer size estimates for extra-compact
- Add extra-compact translations for all 8 locales
This commit is contained in:
Linus Rath
2026-03-14 18:59:00 +01:00
parent 838de8e5da
commit d5404de224
16 changed files with 128 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+2 -1
View File
@@ -3,6 +3,8 @@
@custom-variant dark (&:where(.dark, .dark *));
:root {
font-size: var(--font-size-base);
--color-border: #e2e8f0;
--color-input: #e2e8f0;
--color-ring: #94a3b8;
@@ -79,7 +81,6 @@ body {
system-ui,
-apple-system,
sans-serif;
font-size: var(--font-size-base);
font-feature-settings:
"rlig" 1,
"calt" 1;
components/email/email-list-item.tsx
+10 -7
View File
@@ -24,6 +24,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu }: Email
const t = useTranslations('email_viewer');
const { selectedEmailIds, toggleEmailSelection, selectRangeEmails, selectedMailbox, clearSelection } = useEmailStore();
const showPreview = useSettingsStore((state) => state.showPreview);
const density = useSettingsStore((state) => state.density);
const emailKeywords = useSettingsStore((state) => state.emailKeywords);
const { identities } = useAuthStore();
const isChecked = selectedEmailIds.has(email.id);
@@ -116,12 +117,14 @@ export function EmailListItem({ email, selected, onClick, onContextMenu }: Email
)}
{/* Avatar */}
<Avatar
name={sender?.name}
email={sender?.email}
size="md"
className="flex-shrink-0 shadow-sm"
/>
{density !== 'extra-compact' && (
<Avatar
name={sender?.name}
email={sender?.email}
size="md"
className="flex-shrink-0 shadow-sm"
/>
)}
{/* Content */}
<div className="flex-1 min-w-0">
@@ -183,7 +186,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu }: Email
</div>
{/* Third Line: Preview (controlled by showPreview setting) */}
{showPreview && (
{showPreview && density !== 'extra-compact' && (
<p className={cn(
"text-sm leading-relaxed line-clamp-2",
isUnread
components/email/email-list.tsx
+2 -2
View File
@@ -100,8 +100,8 @@ export function EmailList({
const showPreview = useSettingsStore((state) => state.showPreview);
const estimateSize = useCallback(() => {
const base = { compact: 60, regular: 84, comfortable: 104 }[density];
return showPreview ? base + 36 : base;
const base = { 'extra-compact': 32, compact: 60, regular: 84, comfortable: 104 }[density];
return (showPreview && density !== 'extra-compact') ? base + 36 : base;
}, [density, showPreview]);
const virtualizer = useVirtualizer({
components/email/thread-conversation-view.tsx
+10 -7
View File
@@ -221,6 +221,7 @@ function EmailCard({
}: EmailCardProps) {
const t = useTranslations();
const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
const density = useSettingsStore((state) => state.density);
const sender = email.from?.[0];
const isUnread = !email.keywords?.$seen;
const isStarred = email.keywords?.$flagged;
@@ -428,12 +429,14 @@ function EmailCard({
)}
style={{ gap: 'var(--density-item-gap)', padding: 'var(--density-card-p)' }}
>
<Avatar
name={sender?.name}
email={sender?.email}
size="md"
className="flex-shrink-0"
/>
{density !== 'extra-compact' && (
<Avatar
name={sender?.name}
email={sender?.email}
size="md"
className="flex-shrink-0"
/>
)}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-0.5">
<span className={cn(
@@ -452,7 +455,7 @@ function EmailCard({
<div className="text-sm text-muted-foreground">
{formatDate(email.receivedAt)}
</div>
{!isExpanded && (
{!isExpanded && density !== 'extra-compact' && (
<p className="text-sm text-muted-foreground mt-1 line-clamp-2">
{email.preview || "No preview available"}
</p>
components/email/thread-email-item.tsx
+10 -6
View File
@@ -7,6 +7,7 @@ import { Avatar } from "@/components/ui/avatar";
import { Paperclip, Star, Circle, CheckSquare, Square } from "lucide-react";
import { useEmailDrag } from "@/hooks/use-email-drag";
import { useEmailStore } from "@/stores/email-store";
import { useSettingsStore } from "@/stores/settings-store";
interface ThreadEmailItemProps {
email: Email;
@@ -27,6 +28,7 @@ export function ThreadEmailItem({
const isStarred = email.keywords?.$flagged;
const sender = email.from?.[0];
const { selectedMailbox, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection } = useEmailStore();
const density = useSettingsStore((state) => state.density);
const isChecked = selectedEmailIds.has(email.id);
const { dragHandlers, isDragging } = useEmailDrag({
@@ -104,12 +106,14 @@ export function ThreadEmailItem({
)}
{/* Small Avatar */}
<Avatar
name={sender?.name}
email={sender?.email}
size="sm"
className="flex-shrink-0"
/>
{density !== 'extra-compact' && (
<Avatar
name={sender?.name}
email={sender?.email}
size="sm"
className="flex-shrink-0"
/>
)}
{/* Content */}
<div className="flex-1 min-w-0">
components/email/thread-list-item.tsx
+20 -14
View File
@@ -42,6 +42,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
const sender = email.from?.[0];
const { selectedMailbox, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection } = useEmailStore();
const emailKeywords = useSettingsStore((state) => state.emailKeywords);
const density = useSettingsStore((state) => state.density);
const isChecked = selectedEmailIds.has(email.id);
// Resolve color and keyword definition from keyword definitions if not passed directly
@@ -128,12 +129,14 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
</div>
)}
<Avatar
name={sender?.name}
email={sender?.email}
size="md"
className="flex-shrink-0 shadow-sm"
/>
{density !== 'extra-compact' && (
<Avatar
name={sender?.name}
email={sender?.email}
size="md"
className="flex-shrink-0 shadow-sm"
/>
)}
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2 mb-1">
@@ -185,7 +188,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
{email.subject || "(no subject)"}
</div>
{showPreview && (
{showPreview && density !== 'extra-compact' && (
<p className={cn(
"text-sm leading-relaxed line-clamp-2",
isUnread
@@ -216,6 +219,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
}, ref) {
const t = useTranslations('threads');
const showPreview = useSettingsStore((state) => state.showPreview);
const density = useSettingsStore((state) => state.density);
const isMobile = useUIStore((state) => state.isMobile);
const { latestEmail, participantNames, hasUnread, hasStarred, hasAttachment, emailCount } = thread;
@@ -377,12 +381,14 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
</div>
)}
<Avatar
name={latestEmail.from?.[0]?.name}
email={latestEmail.from?.[0]?.email}
size="md"
className="flex-shrink-0 shadow-sm"
/>
{density !== 'extra-compact' && (
<Avatar
name={latestEmail.from?.[0]?.name}
email={latestEmail.from?.[0]?.email}
size="md"
className="flex-shrink-0 shadow-sm"
/>
)}
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2 mb-1">
@@ -446,7 +452,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
{latestEmail.subject || "(no subject)"}
</div>
{showPreview && (
{showPreview && density !== 'extra-compact' && (
<p className={cn(
"text-sm leading-relaxed line-clamp-2",
hasUnread
components/settings/appearance-settings.tsx
+57 -2
View File
@@ -2,9 +2,62 @@
import { useTranslations } from 'next-intl';
import { useThemeStore } from '@/stores/theme-store';
import { useSettingsStore, type ToolbarPosition } from '@/stores/settings-store';
import { useSettingsStore, type ToolbarPosition, type Density } from '@/stores/settings-store';
import { LanguageSwitcher } from '@/components/ui/language-switcher';
import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
import { cn } from '@/lib/utils';
const DENSITY_PREVIEW: Record<Density, { py: string; gap: string; showAvatar: boolean; showPreview: boolean }> = {
'extra-compact': { py: 'py-0.5', gap: 'gap-1.5', showAvatar: false, showPreview: false },
compact: { py: 'py-1', gap: 'gap-2', showAvatar: true, showPreview: false },
regular: { py: 'py-2.5', gap: 'gap-3', showAvatar: true, showPreview: true },
comfortable: { py: 'py-4', gap: 'gap-4', showAvatar: true, showPreview: true },
};
function DensityPreview({ density }: { density: Density }) {
const cfg = DENSITY_PREVIEW[density];
const rows = [
{ unread: true, sender: 'Alice Johnson', subject: 'Project update — Q1 roadmap', preview: 'Here are the latest numbers from…' },
{ unread: false, sender: 'Bob Smith', subject: 'Re: Meeting notes', preview: 'Thanks, will review and get back...' },
{ unread: true, sender: 'Carol Lee', subject: 'Invoice #4092', preview: 'Please find attached the invoice…' },
];
return (
<div className="mt-3 rounded-lg border border-border overflow-hidden bg-background text-xs select-none">
{rows.map((row, i) => (
<div
key={i}
className={cn(
"flex items-center px-3 border-b border-border last:border-b-0",
cfg.py,
cfg.gap
)}
>
{cfg.showAvatar && (
<div className={cn(
"flex-shrink-0 rounded-full bg-muted",
density === 'comfortable' ? "w-8 h-8" : "w-6 h-6"
)} />
)}
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2">
<span className={cn("truncate", row.unread ? "font-semibold text-foreground" : "text-muted-foreground")}>
{row.sender}
</span>
<span className="text-[10px] text-muted-foreground flex-shrink-0 tabular-nums">12:00</span>
</div>
<div className={cn("truncate", row.unread ? "font-medium text-foreground" : "text-foreground/80")}>
{row.subject}
</div>
{cfg.showPreview && (
<div className="truncate text-muted-foreground/70">{row.preview}</div>
)}
</div>
</div>
))}
</div>
);
}
export function AppearanceSettings() {
const t = useTranslations('settings.appearance');
@@ -49,14 +102,16 @@ export function AppearanceSettings() {
<RadioGroup
value={density}
onChange={(value) =>
updateSetting('density', value as 'compact' | 'regular' | 'comfortable')
updateSetting('density', value as Density)
}
options={[
{ value: 'extra-compact', label: t('list_density.extra_compact') },
{ value: 'compact', label: t('list_density.compact') },
{ value: 'regular', label: t('list_density.regular') },
{ value: 'comfortable', label: t('list_density.comfortable') },
]}
/>
<DensityPreview density={density} />
</SettingItem>
{/* Toolbar Position */}
locales/de/common.json
+1
View File
@@ -512,6 +512,7 @@
"list_density": {
"label": "Dichte",
"description": "Abstände in der Benutzeroberfläche steuern",
"extra_compact": "Sehr kompakt",
"compact": "Kompakt",
"regular": "Normal",
"comfortable": "Komfortabel"
locales/en/common.json
+1
View File
@@ -512,6 +512,7 @@
"list_density": {
"label": "Density",
"description": "Control spacing and padding across the UI",
"extra_compact": "Extra Compact",
"compact": "Compact",
"regular": "Regular",
"comfortable": "Comfortable"
locales/es/common.json
+1
View File
@@ -512,6 +512,7 @@
"list_density": {
"label": "Densidad",
"description": "Controle el espaciado en toda la interfaz",
"extra_compact": "Extra compacto",
"compact": "Compacto",
"regular": "Regular",
"comfortable": "Cómodo"
locales/fr/common.json
+1
View File
@@ -512,6 +512,7 @@
"list_density": {
"label": "Densité",
"description": "Contrôlez l'espacement dans toute l'interface",
"extra_compact": "Très compacte",
"compact": "Compacte",
"regular": "Normale",
"comfortable": "Confortable"
locales/it/common.json
+1
View File
@@ -512,6 +512,7 @@
"list_density": {
"label": "Densità",
"description": "Controlla la spaziatura in tutta l'interfaccia",
"extra_compact": "Molto compatto",
"compact": "Compatto",
"regular": "Normale",
"comfortable": "Comodo"
locales/ja/common.json
+1
View File
@@ -512,6 +512,7 @@
"list_density": {
"label": "密度",
"description": "UI全体の間隔を調整",
"extra_compact": "極小",
"compact": "コンパクト",
"regular": "標準",
"comfortable": "ゆったり"
locales/nl/common.json
+1
View File
@@ -512,6 +512,7 @@
"list_density": {
"label": "Dichtheid",
"description": "Regeleer de ruimte in de gehele interface",
"extra_compact": "Extra compact",
"compact": "Compact",
"regular": "Normaal",
"comfortable": "Comfortabel"
locales/pt/common.json
+1
View File
@@ -512,6 +512,7 @@
"list_density": {
"label": "Densidade",
"description": "Controle o espaçamento em toda a interface",
"extra_compact": "Extra compacto",
"compact": "Compacto",
"regular": "Regular",
"comfortable": "Confortável"
stores/settings-store.ts
+9 -1
View File
@@ -19,7 +19,7 @@ let isLoadingFromServer = false;
const SYNC_DEBOUNCE_MS = 2000;
export type FontSize = 'small' | 'medium' | 'large';
export type Density = 'compact' | 'regular' | 'comfortable';
export type Density = 'extra-compact' | 'compact' | 'regular' | 'comfortable';
/** @deprecated Use Density instead */
export type ListDensity = Density;
export type DeleteAction = 'trash' | 'permanent';
@@ -438,6 +438,14 @@ function applyDensity(density: Density) {
const root = document.documentElement;
const densityValues = {
'extra-compact': {
'--list-item-height': 'auto',
'--density-item-py': '2px',
'--density-item-gap': '6px',
'--density-header-py': '4px',
'--density-card-p': '8px',
'--density-sidebar-py': '0px',
},
compact: {
'--list-item-height': 'auto',
'--density-item-py': '4px',