mirror of
https://github.com/priyanshujain/margin-mail.git
synced 2026-10-02 11:07:06 +00:00
build the app, and ship it on Linux and Windows as well as macOS
The client itself: the sync engine and mirror, the Gmail and IMAP providers, the screener, the three boxes and two piles, compose and send, the sanitiser and tracker stripping, contacts, clips, backup, notifications and the guide. The pipeline that ships it. Three runners now build in parallel and the publish gate wants all four platform keys in latest.json before a release leaves draft. Linux gets two more packages Tauri does not build: a flatpak repackaged from the deb against GNOME 48, and a Nix package that relinks the deb against nixpkgs so it runs as a native Wayland client rather than through Xwayland. CI runs the Rust suite on all three desktops rather than on Linux alone, and rebuilds the flatpak manifest on every push to main. Two things that were only ever exercised on macOS and were wrong everywhere else. The menu bar was built by adjusting the submenus macOS is given, so on a platform whose default menu has no File or View the new File menu landed after Edit, Check for Updates landed nowhere, and the three places and the reading pane had no menu at all. The deb declared libwebkit2gtk-4.1-0 and libgtk-3-0 twice, because tauri.conf.json named the dependencies Tauri already emits. The updater key exists now, so releases can sign their artifacts.
This commit is contained in:
pj committed
1 parent
088ec9c6e4
commit
eb59cb5f8d
423 files changed
+93217
-251
No files matched your search
@@ -0,0 +1,371 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Settings</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
<style>
|
||||
/* Settings is a place, so it takes the stage: a rail of sections on the left, one section on the
|
||||
right. These are its own pieces; every value is a token. */
|
||||
.settings {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.settings-rail {
|
||||
flex: none;
|
||||
width: 210px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
padding: 12px 10px;
|
||||
border-right: 1px solid var(--line);
|
||||
background: var(--sidebar);
|
||||
}
|
||||
|
||||
.settings-rail h1 {
|
||||
margin: 4px 8px 10px;
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.settings-tab {
|
||||
padding: 7px 10px;
|
||||
border-radius: var(--r-sm);
|
||||
color: var(--ink-soft);
|
||||
font-size: var(--t-3);
|
||||
text-align: left;
|
||||
transition: background 120ms var(--ease), color 120ms var(--ease);
|
||||
}
|
||||
|
||||
.settings-tab:hover {
|
||||
background: var(--accent-wash);
|
||||
}
|
||||
|
||||
.settings-tab[data-active] {
|
||||
background: var(--accent-wash);
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
padding: 24px 36px 40px;
|
||||
}
|
||||
|
||||
.settings-inner {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
margin: 0;
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.settings-note {
|
||||
margin: 6px 0 20px;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.acct {
|
||||
margin-bottom: 12px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-lg);
|
||||
background: var(--raised);
|
||||
}
|
||||
|
||||
.acct-head {
|
||||
display: grid;
|
||||
grid-template-columns: 36px 1fr auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.acct-head .avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.acct-name {
|
||||
font-weight: 600;
|
||||
font-size: var(--t-4);
|
||||
}
|
||||
|
||||
.acct-addr {
|
||||
color: var(--ink-faint);
|
||||
font-size: var(--t-2);
|
||||
}
|
||||
|
||||
.swatches {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: var(--r-pill);
|
||||
}
|
||||
|
||||
.swatch[data-hue="1"] { background: var(--hue-1); }
|
||||
.swatch[data-hue="2"] { background: var(--hue-2); }
|
||||
.swatch[data-hue="3"] { background: var(--hue-3); }
|
||||
.swatch[data-hue="4"] { background: var(--hue-4); }
|
||||
.swatch[data-hue="5"] { background: var(--hue-5); }
|
||||
.swatch[data-hue="6"] { background: var(--hue-6); }
|
||||
.swatch[data-hue="7"] { background: var(--hue-7); }
|
||||
.swatch[data-hue="8"] { background: var(--hue-8); }
|
||||
|
||||
.swatch[data-on] {
|
||||
box-shadow: 0 0 0 2px var(--raised), 0 0 0 3px var(--ink-soft);
|
||||
}
|
||||
|
||||
.set-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
margin-top: 12px;
|
||||
padding-top: 11px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.set-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: var(--t-2);
|
||||
}
|
||||
|
||||
.set-row .lab {
|
||||
flex: none;
|
||||
width: 84px;
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
|
||||
.set-row .val {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scopes {
|
||||
margin-top: 12px;
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.scopes .section {
|
||||
padding: 4px 0 4px;
|
||||
}
|
||||
|
||||
.scope {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
min-height: 26px;
|
||||
font-size: var(--t-2);
|
||||
}
|
||||
|
||||
.scope .tick {
|
||||
flex: none;
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
|
||||
.scope .what {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.scope .state {
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
|
||||
.scope[data-missing] .what {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.scope-why {
|
||||
margin: 1px 0 5px 25px;
|
||||
color: var(--ink-faint);
|
||||
font-size: var(--t-2);
|
||||
}
|
||||
|
||||
.acct-foot {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.settings-quiet {
|
||||
margin: 18px 0 0;
|
||||
color: var(--ink-faint);
|
||||
font-size: var(--t-2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
|
||||
<symbol id="i-places" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></symbol>
|
||||
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></symbol>
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||||
<symbol id="i-check" viewBox="0 0 24 24"><path d="m5 12 5 5L19 7"/></symbol>
|
||||
<symbol id="i-minus" viewBox="0 0 24 24"><path d="M6 12h12"/></symbol>
|
||||
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 6v12M6 12h12"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="titlebar">
|
||||
<div class="traffic"><i></i><i></i><i></i></div>
|
||||
<div class="lead">
|
||||
<button class="account-chip">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
[email protected]
|
||||
<svg class="chev" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-switch">
|
||||
<button class="view-option"><span class="key">1</span>Inbox</button>
|
||||
<button class="view-option"><span class="key">2</span>Feed</button>
|
||||
<button class="view-option"><span class="key">3</span>Paper Trail</button>
|
||||
</div>
|
||||
<div class="trail">
|
||||
<button class="icon-button" title="Search /"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-search"/></svg></button>
|
||||
<button class="icon-button" title="Places ⌘K"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-places"/></svg></button>
|
||||
<button class="write-button"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pen"/></svg>Write<span class="key">c</span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stage">
|
||||
<section class="settings">
|
||||
<nav class="settings-rail">
|
||||
<h1>Settings</h1>
|
||||
<button class="settings-tab" data-active>Accounts</button>
|
||||
<button class="settings-tab">Appearance</button>
|
||||
<button class="settings-tab">Mail</button>
|
||||
<button class="settings-tab">Privacy</button>
|
||||
<button class="settings-tab">Screener</button>
|
||||
<button class="settings-tab">Piles and snooze</button>
|
||||
<button class="settings-tab">Writing</button>
|
||||
<button class="settings-tab">Notifications</button>
|
||||
<button class="settings-tab">Keyboard</button>
|
||||
<button class="settings-tab">Backup</button>
|
||||
<button class="settings-tab">Data</button>
|
||||
<button class="settings-tab">About</button>
|
||||
</nav>
|
||||
|
||||
<div class="settings-panel">
|
||||
<div class="settings-inner">
|
||||
<h2 class="settings-title">Accounts</h2>
|
||||
<p class="settings-note">Two accounts, each with its own places, rules and piles. The colour is the edge on a row in All accounts.</p>
|
||||
|
||||
<div class="acct">
|
||||
<div class="acct-head">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
<div>
|
||||
<div class="acct-name">Priyanshu Jain</div>
|
||||
<div class="acct-addr">[email protected]</div>
|
||||
</div>
|
||||
<div class="swatches">
|
||||
<span class="swatch" data-hue="1"></span>
|
||||
<span class="swatch" data-hue="2"></span>
|
||||
<span class="swatch" data-hue="3"></span>
|
||||
<span class="swatch" data-hue="4" data-on></span>
|
||||
<span class="swatch" data-hue="5"></span>
|
||||
<span class="swatch" data-hue="6"></span>
|
||||
<span class="swatch" data-hue="7"></span>
|
||||
<span class="swatch" data-hue="8"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-rows">
|
||||
<div class="set-row"><span class="lab">Signature</span><span class="val">Priyanshu Jain · 73ai</span></div>
|
||||
<div class="set-row"><span class="lab">Aliases</span><span class="val">[email protected], [email protected]</span></div>
|
||||
</div>
|
||||
|
||||
<div class="scopes">
|
||||
<div class="section">Permissions</div>
|
||||
|
||||
<div class="scope">
|
||||
<svg class="tick" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-check"/></svg>
|
||||
<span class="what">Read and change your mail</span><span class="state">Granted</span>
|
||||
</div>
|
||||
<div class="scope">
|
||||
<svg class="tick" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-check"/></svg>
|
||||
<span class="what">Read your signature and aliases</span><span class="state">Granted</span>
|
||||
</div>
|
||||
<div class="scope">
|
||||
<svg class="tick" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-check"/></svg>
|
||||
<span class="what">Read your contacts</span><span class="state">Granted</span>
|
||||
</div>
|
||||
<div class="scope">
|
||||
<svg class="tick" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-check"/></svg>
|
||||
<span class="what">Read the people you have written to</span><span class="state">Granted</span>
|
||||
</div>
|
||||
<div class="scope">
|
||||
<svg class="tick" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-check"/></svg>
|
||||
<span class="what">Keep a backup in your Drive</span><span class="state">Granted</span>
|
||||
</div>
|
||||
<div class="scope" data-missing>
|
||||
<svg class="tick" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-minus"/></svg>
|
||||
<span class="what">Answer calendar invitations</span>
|
||||
<button class="button">Grant</button>
|
||||
</div>
|
||||
<p class="scope-why">Calendar is not connected, so an invitation renders but Accept, Maybe and Decline do nothing. Granting reopens the Google consent page.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acct">
|
||||
<div class="acct-head">
|
||||
<span class="avatar" data-hue="2">PS</span>
|
||||
<div>
|
||||
<div class="acct-name">Personal</div>
|
||||
<div class="acct-addr">[email protected]</div>
|
||||
</div>
|
||||
<div class="swatches">
|
||||
<span class="swatch" data-hue="1"></span>
|
||||
<span class="swatch" data-hue="2" data-on></span>
|
||||
<span class="swatch" data-hue="3"></span>
|
||||
<span class="swatch" data-hue="4"></span>
|
||||
<span class="swatch" data-hue="5"></span>
|
||||
<span class="swatch" data-hue="6"></span>
|
||||
<span class="swatch" data-hue="7"></span>
|
||||
<span class="swatch" data-hue="8"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-rows">
|
||||
<div class="set-row"><span class="lab">Signature</span><span class="val">Not set</span></div>
|
||||
<div class="set-row"><span class="lab">Aliases</span><span class="val">None on the provider</span></div>
|
||||
<div class="set-row"><span class="lab">Permissions</span><span class="val">All granted</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acct-foot">
|
||||
<button class="button"><svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-plus"/></svg>Add account</button>
|
||||
<button class="button" data-variant="ghost">Remove an account</button>
|
||||
</div>
|
||||
|
||||
<p class="settings-quiet">Margin Mail, Margin and Margin Calendar share one Google client, so your Google account lists them once, as Margin, and revoking it revokes all three.</p>
|
||||
<div class="acct-foot"><button class="button">Bring your own OAuth client</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user