Skip to content

Fix incoming mail, richer compose, attachment previews, and a mobile polish pass #138

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
AlaqmarG wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Fix incoming mail, richer compose, attachment previews, and a mobile polish pass #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a7fc464
Fix incoming mail links and add richer compose formatting + attachmen…
AlaqmarG Sep 16, 2026
2bc9a0a
Widen the PDF and text attachment preview panels
AlaqmarG Sep 16, 2026
774e9dc
Fix Insert Link silently doing nothing without a text selection
AlaqmarG Sep 16, 2026
a0f4f3c
Fix mobile mail experience: modals trapped behind the tab bar, crampe…
AlaqmarG Sep 16, 2026
94e3a4f
Fix mobile polish issues: tiny message body, palette exit, safe-area …
AlaqmarG Sep 16, 2026
85979ec
Mobile polish pass across the rest of the admin: dashboard, analytics…
AlaqmarG Sep 16, 2026
b0ded7f
Fix washed-out modal backdrops in dark mode
AlaqmarG Sep 17, 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
134 changes: 69 additions & 65 deletions app/admin/analytics/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,74 +425,78 @@ export default function AnalyticsPage() {
</dl>

<div className="mt-6 grid gap-6">
<Card title="Where the money goes" hint="Last 30 days, USD">
<SplitBar
segments={costs.last30.lines.map((line) => ({
label: line.label,
value: line.amount,
}))}
format={usd}
/>
<div className="mt-5 overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="text-left text-xs font-bold uppercase tracking-wide text-subtle">
<th className="pb-2 font-bold">Item</th>
<th className="pb-2 text-right font-bold">
Quantity
</th>
<th className="pb-2 text-right font-bold">
Unit price
</th>
<th className="pb-2 text-right font-bold">Amount</th>
</tr>
</thead>
<tbody>
{costs.last30.lines.map((line) => (
<tr
key={line.key}
className="border-t-2 border-line/20 transition-colors duration-[var(--dur-fast)] ease-smooth hover:bg-tint"
>
<td className="py-2 pr-3">
<a
href={line.source}
target="_blank"
rel="noreferrer"
className="font-bold text-ink underline decoration-line/60 underline-offset-2 hover:decoration-brand"
>
{line.label}
</a>
{line.note && (
<span className="ml-2 whitespace-nowrap text-xs text-subtle">
{line.note}
</span>
)}
</td>
<td className="whitespace-nowrap py-2 pl-3 text-right tabular-nums text-subtle">
{quantity(line)}
</td>
<td className="whitespace-nowrap py-2 pl-3 text-right tabular-nums text-subtle">
${line.unitPrice}
<div className="min-w-0">
<Card title="Where the money goes" hint="Last 30 days, USD">
<SplitBar
segments={costs.last30.lines.map((line) => ({
label: line.label,
value: line.amount,
}))}
format={usd}
/>
<div className="mt-5 overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="text-left text-xs font-bold uppercase tracking-wide text-subtle">
<th className="pb-2 font-bold">Item</th>
<th className="pb-2 text-right font-bold">
Quantity
</th>
<th className="pb-2 text-right font-bold">
Unit price
</th>
<th className="pb-2 text-right font-bold">
Amount
</th>
</tr>
</thead>
<tbody>
{costs.last30.lines.map((line) => (
<tr
key={line.key}
className="border-t-2 border-line/20 transition-colors duration-[var(--dur-fast)] ease-smooth hover:bg-tint"
>
<td className="py-2 pr-3">
<a
href={line.source}
target="_blank"
rel="noreferrer"
className="font-bold text-ink underline decoration-line/60 underline-offset-2 hover:decoration-brand"
>
{line.label}
</a>
{line.note && (
<span className="ml-2 whitespace-nowrap text-xs text-subtle">
{line.note}
</span>
)}
</td>
<td className="whitespace-nowrap py-2 pl-3 text-right tabular-nums text-subtle">
{quantity(line)}
</td>
<td className="whitespace-nowrap py-2 pl-3 text-right tabular-nums text-subtle">
${line.unitPrice}
</td>
<td className="py-2 pl-3 text-right font-bold tabular-nums text-ink">
{usd(line.amount)}
</td>
</tr>
))}
</tbody>
<tfoot>
<tr className="border-t-2 border-line">
<td className="pt-2 font-bold text-ink" colSpan={3}>
Total
</td>
<td className="py-2 pl-3 text-right font-bold tabular-nums text-ink">
{usd(line.amount)}
<td className="pt-2 text-right font-extrabold tabular-nums text-brand">
{usd(costs.last30.total)}
</td>
</tr>
))}
</tbody>
<tfoot>
<tr className="border-t-2 border-line">
<td className="pt-2 font-bold text-ink" colSpan={3}>
Total
</td>
<td className="pt-2 text-right font-extrabold tabular-nums text-brand">
{usd(costs.last30.total)}
</td>
</tr>
</tfoot>
</table>
</div>
</Card>
</tfoot>
</table>
</div>
</Card>
</div>

<Card
title="Mail volume"
Expand Down
2 changes: 1 addition & 1 deletion app/admin/ask.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export function AskHost() {

return (
<div
className="fixed inset-0 z-[60] flex animate-fade-in items-center justify-center bg-ink/40 px-4"
className="fixed inset-0 z-[60] flex animate-fade-in items-center justify-center bg-ink/40 px-4 dark:bg-surface/80"
onMouseDown={(event) =>
event.target === event.currentTarget && settle(null)
}
Expand Down
20 changes: 11 additions & 9 deletions app/admin/documents/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -507,15 +507,17 @@ export default function DocumentsPage() {
key={doc.$key}
>
{doc.currentVersionId && (
<input
aria-label={`Select ${doc.title}`}
checked={checked.has(doc.$key)}
className="ml-1 size-4 shrink-0 accent-brand"
onChange={(e) =>
toggleChecked(doc.$key, e.target.checked)
}
type="checkbox"
/>
<label className="-m-2 flex shrink-0 cursor-pointer p-2">
<input
aria-label={`Select ${doc.title}`}
checked={checked.has(doc.$key)}
className="ml-1 size-4 shrink-0 accent-brand"
onChange={(e) =>
toggleChecked(doc.$key, e.target.checked)
}
type="checkbox"
/>
</label>
)}
<Link
className="flex min-w-0 flex-1 items-center gap-3"
Expand Down
2 changes: 1 addition & 1 deletion app/admin/events/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ function EventRow({

return (
<li className="flex flex-wrap items-start gap-4 rounded-[16px] border-2 border-line bg-surface p-3 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)] sm:p-4">
<div className="relative size-16 shrink-0 overflow-hidden rounded-[10px] border-2 border-line bg-tint">
<div className="relative min-h-16 w-16 shrink-0 self-stretch overflow-hidden rounded-[10px] border-2 border-line bg-tint">
{event.image?.url ? (
<Image
alt=""
Expand Down
13 changes: 9 additions & 4 deletions app/admin/events/ui.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import { useEffect } from "react";
import { createPortal } from "react-dom";

const base =
"inline-flex items-center justify-center gap-2 rounded-[10px] border-2 border-line px-4 py-2 text-sm font-bold disabled:pointer-events-none disabled:opacity-50";
Expand All @@ -9,7 +10,7 @@ export const btn = {
primary: `${base} bg-brand text-brand-ink shadow-brut-sm hover:-translate-y-0.5 motion-reduce:hover:translate-y-0`,
secondary: `${base} bg-surface text-ink shadow-brut-sm hover:-translate-y-0.5 hover:bg-tint motion-reduce:hover:translate-y-0`,
danger: `${base} border-destructive bg-destructive text-surface shadow-brut-sm hover:-translate-y-0.5 motion-reduce:hover:translate-y-0`,
quiet: `${base} border-transparent px-2.5 py-1.5 text-destructive hover:bg-tint`,
quiet: `${base} border-transparent px-2.5 py-2 text-destructive hover:bg-tint`,
};

export const field =
Expand Down Expand Up @@ -40,7 +41,10 @@ export function Sheet({
};
}, [onClose]);

return (
// Portaled to the document body: rendered under <main>, whose own
// fade-in animation creates a CSS stacking context that would otherwise
// trap this fixed overlay below the mobile tab bar.
return createPortal(
<div
aria-label={title}
aria-modal="true"
Expand All @@ -49,7 +53,7 @@ export function Sheet({
>
<div className="absolute inset-0 animate-fade-in bg-ink/40 dark:bg-surface/80" />
<div className="relative flex h-full w-full animate-rise-in flex-col bg-surface sm:h-auto sm:max-h-[86vh] sm:max-w-[660px] sm:animate-pop-in sm:rounded-[20px] sm:border-2 sm:border-line sm:shadow-brut">
<div className="flex items-center gap-3 border-b-2 border-line px-5 py-4">
<div className="flex items-center gap-3 border-b-2 border-line px-5 pb-4 pt-[max(1rem,env(safe-area-inset-top))] sm:pt-4">
<h2 className="text-lg font-extrabold text-ink">{title}</h2>
<button
aria-label="Close"
Expand All @@ -62,6 +66,7 @@ export function Sheet({
</div>
{children}
</div>
</div>
</div>,
document.body,
);
}
2 changes: 1 addition & 1 deletion app/admin/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ function AdminShell({ children }: { children: React.ReactNode }) {
return (
<PaletteProvider hasMail={hasMailbox} onLogout={handleLogout}>
<div className="flex min-h-screen flex-col">
<header className="flex items-center gap-3 border-b-2 border-line px-4 py-2.5 sm:px-6">
<header className="flex items-center gap-3 border-b-2 border-line px-4 pb-2.5 pt-[max(0.625rem,env(safe-area-inset-top))] sm:px-6">
{onMenu ? (
<span className="flex items-center gap-2.5">
<Image
Expand Down
2 changes: 1 addition & 1 deletion app/admin/mail/aliases/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const Tile = ({
detail: string;
children?: React.ReactNode;
}) => (
<div className="animate-rise-in rounded-[16px] border-2 border-line bg-surface p-3.5 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)]">
<div className="min-w-0 animate-rise-in rounded-[16px] border-2 border-line bg-surface p-3.5 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)]">
<div className="text-xs font-bold uppercase tracking-wide text-subtle">
{label}
</div>
Expand Down
Loading