th/hyprcrd
3
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.0.5 — Read feature (mobile zen reader on the relay)

Browse Source 
Per-card opt-in push to the relay for distraction-free mobile reading.
Not tag-based: a real cards.read_push column so the reading state
stays independent of whatever tags the user organises by.

hyprcrd
- cards.read_push column (0/1, default 0) via Database migration.
- POST /api/cards + PATCH /api/cards/{id} accept read_push; save hook
  posts the card (title+body, encrypted) and referenced images
  to the relay's /api/read endpoint. First inline image is flagged
  as the hero. Toggle-off / DELETE wipes the remote copy.
- Detail-bar toggle button ("Read" → "On relay") with filled book
  icon + inverted accent background when active; outline book icon
  in the bottom meta row of the board card when read_push=1.

relay
- read_items + read_attachments tables, encrypted under the
  inter-tenant key like messages (dual-format envelope).
- Client API: POST /api/read, DELETE /api/read/{uid}, POST
  /api/read-attachments. Session API: GET /api/read (list),
  GET /api/read/{uid} (single decrypted), GET /api/read-attachments/
  {uid}/{filename} (serves decrypted image bytes).
- Payload size caps raised to 15MB (attachments) / 2MB (items).
- New nav tab + view: list with thumbnails, click opens a zen reader
  overlay. Reader caps article width at 680px, bumps type to 17px/1.7,
  renders a minimal markdown subset (headings, lists, code fences,
  blockquotes, links, inline images), rewrites uploads/ references
  to the session-authed image endpoint. Escape closes the reader.
- Mobile-first: wider touch targets, tighter padding at ≤640px.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.7 committed 2026-04-18 16:10:04 +02:00
1 parent f986a41ccc
commit 1e51bdec7c
12 files changed
+840 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

config.php
+1 -1
View File
@@ -1,7 +1,7 @@
<?php <?php
define('APP_NAME', 'hyprcrd'); define('APP_NAME', 'hyprcrd');
define('APP_VERSION', '2.0.4'); define('APP_VERSION', '2.0.5');
// APP_DEBUG: gates verbose error responses (curl traces, upstream bodies). // APP_DEBUG: gates verbose error responses (curl traces, upstream bodies).
// Off by default; enable via env for local troubleshooting only. // Off by default; enable via env for local troubleshooting only.
electron/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "hyprcrd", "name": "hyprcrd",
"version": "2.0.4", "version": "2.0.5",
"description": "hyprcrd — self-hosted card manager", "description": "hyprcrd — self-hosted card manager",
"main": "main.js", "main": "main.js",
"scripts": { "scripts": {
public/index.php
+147 -9
View File
@@ -283,6 +283,97 @@ if (str_starts_with($route, '/api/')) {
return implode(',', array_unique($tags)); return implode(',', array_unique($tags));
} }
// Read-later push helpers — called after card insert/update when
// cards.read_push is 1, or when the user toggles it off and we need
// to wipe the remote copy. Failures are logged and swallowed so
// relay trouble never blocks a local save.
function pushCardToRelayRead(array $card, PDO $db): void {
$relayUrl = $db->query("SELECT value FROM settings WHERE key = 'relay_url'")->fetchColumn();
$relayKey = $db->query("SELECT value FROM settings WHERE key = 'relay_key'")->fetchColumn();
$relayUser = $db->query("SELECT value FROM settings WHERE key = 'relay_username'")->fetchColumn();
if (!$relayUrl || !$relayKey || !$relayUser) return;
$relayUid = $card['relay_uid'] ?? null;
if (!$relayUid) {
$relayUid = bin2hex(random_bytes(16));
$db->prepare('UPDATE cards SET relay_uid = ? WHERE id = ?')->execute([$relayUid, $card['id']]);
}
$body = (string)($card['body'] ?? '');
// Hero = first uploads/<hex>.<ext> reference. All inline images
// get pushed as attachments so the reader can resolve them.
preg_match_all('#uploads/([a-f0-9]+\.[a-z0-9]+)#i', $body, $matches);
$imageFilenames = array_unique(array_map('strtolower', $matches[1] ?? []));
$heroFilename = $imageFilenames[0] ?? '';
$payload = json_encode([
'relay_uid' => $relayUid,
'title' => hyprcrdRelayEncrypt((string)($card['title'] ?? ''), $relayKey),
'body' => hyprcrdRelayEncrypt($body, $relayKey),
'hero_filename' => $heroFilename,
]);
$ch = curl_init(rtrim($relayUrl, '/') . '/api/read');
curl_setopt_array($ch, [
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POST => true,
CURLOPT_POSTFIELDS => $payload,
CURLOPT_HTTPHEADER => ['Content-Type: application/json', 'X-Relay-User: ' . $relayUser, 'X-Relay-Key: ' . $relayKey],
CURLOPT_TIMEOUT => 10,
]);
hyprcrdApplySafeCurlOpts($ch);
$resp = curl_exec($ch);
$status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($status < 200 || $status >= 300) {
@error_log('[hyprcrd] read push failed: HTTP ' . $status . ' ' . substr((string)$resp, 0, 200));
return; // don't bother uploading images if the item didn't land
}
// Upload referenced images as read-attachments (encrypted blob,
// same envelope format as collab-attachments).
$uploadDir = UPLOAD_DIR;
foreach ($imageFilenames as $fn) {
$filePath = $uploadDir . '/' . $fn;
if (!is_file($filePath)) continue;
$bytes = file_get_contents($filePath);
if ($bytes === false) continue;
$attPayload = json_encode([
'relay_uid' => $relayUid,
'filename' => $fn,
'data' => hyprcrdRelayEncrypt(base64_encode($bytes), $relayKey),
]);
$ach = curl_init(rtrim($relayUrl, '/') . '/api/read-attachments');
curl_setopt_array($ach, [
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POST => true,
CURLOPT_POSTFIELDS => $attPayload,
CURLOPT_HTTPHEADER => ['Content-Type: application/json', 'X-Relay-User: ' . $relayUser, 'X-Relay-Key: ' . $relayKey],
CURLOPT_TIMEOUT => 30,
]);
hyprcrdApplySafeCurlOpts($ach);
curl_exec($ach);
curl_close($ach);
}
}
function deleteCardFromRelayRead(string $relayUid, PDO $db): void {
if ($relayUid === '') return;
$relayUrl = $db->query("SELECT value FROM settings WHERE key = 'relay_url'")->fetchColumn();
$relayKey = $db->query("SELECT value FROM settings WHERE key = 'relay_key'")->fetchColumn();
$relayUser = $db->query("SELECT value FROM settings WHERE key = 'relay_username'")->fetchColumn();
if (!$relayUrl || !$relayKey || !$relayUser) return;
$ch = curl_init(rtrim($relayUrl, '/') . '/api/read/' . urlencode($relayUid));
curl_setopt_array($ch, [
CURLOPT_RETURNTRANSFER => true,
CURLOPT_CUSTOMREQUEST => 'DELETE',
CURLOPT_HTTPHEADER => ['X-Relay-User: ' . $relayUser, 'X-Relay-Key: ' . $relayKey],
CURLOPT_TIMEOUT => 10,
]);
hyprcrdApplySafeCurlOpts($ch);
curl_exec($ch);
curl_close($ch);
}
// Plugin route handlers (registered by plugin backend.php files). // Plugin route handlers (registered by plugin backend.php files).
// Each handler is responsible for calling exit() on a match. // Each handler is responsible for calling exit() on a match.
PluginManager::instance()->dispatchRoute($route, $method); PluginManager::instance()->dispatchRoute($route, $method);
@@ -294,7 +385,8 @@ if (str_starts_with($route, '/api/')) {
if ($title === '') { http_response_code(400); echo json_encode(['error' => 'title is required']); exit; } if ($title === '') { http_response_code(400); echo json_encode(['error' => 'title is required']); exit; }
$pos = $input['position'] ?? 0; $pos = $input['position'] ?? 0;
$body = $input['body'] ?? ''; $body = $input['body'] ?? '';
$db->prepare('INSERT INTO cards (title, body, color, bucket_id, parent_id, position, tags, due_date, scratchpad) VALUES (:title, :body, :color, :bucket_id, :parent_id, :position, :tags, :due_date, :scratchpad)')->execute([ $readPush = !empty($input['read_push']) ? 1 : 0;
$db->prepare('INSERT INTO cards (title, body, color, bucket_id, parent_id, position, tags, due_date, scratchpad, read_push) VALUES (:title, :body, :color, :bucket_id, :parent_id, :position, :tags, :due_date, :scratchpad, :read_push)')->execute([
'title' => $title, 'body' => $body, 'color' => validColor($input['color'] ?? null), 'title' => $title, 'body' => $body, 'color' => validColor($input['color'] ?? null),
'bucket_id' => validInt($input['bucket_id'] ?? null, null), 'bucket_id' => validInt($input['bucket_id'] ?? null, null),
'parent_id' => validInt($input['parent_id'] ?? null, null), 'parent_id' => validInt($input['parent_id'] ?? null, null),
@@ -302,8 +394,16 @@ if (str_starts_with($route, '/api/')) {
'tags' => extractTags($body), 'tags' => extractTags($body),
'due_date' => $input['due_date'] ?? null, 'due_date' => $input['due_date'] ?? null,
'scratchpad' => $input['scratchpad'] ?? null, 'scratchpad' => $input['scratchpad'] ?? null,
'read_push' => $readPush,
]); ]);
echo json_encode($db->query('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id = ' . $db->lastInsertId())->fetch()); $saved = $db->query('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id = ' . $db->lastInsertId())->fetch();
if ($readPush && $saved) {
pushCardToRelayRead($saved, $db);
// relay_uid may have been generated inside the push helper;
// re-read so the client sees it on the response.
$saved = $db->query('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id = ' . (int)$saved['id'])->fetch();
}
echo json_encode($saved);
exit; exit;
} }
@@ -323,17 +423,21 @@ if (str_starts_with($route, '/api/')) {
} }
if ($route === '/api/cards/meta' && $method === 'GET') { if ($route === '/api/cards/meta' && $method === 'GET') {
echo json_encode($db->query('SELECT c.id, c.title, c.color, c.tags, c.bucket_id, c.parent_id, c.position, c.created_at, c.updated_at, c.due_date, c.caldav_uid, c.caldav_rrule, c.relay_uid, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id ORDER BY c.position ASC, c.created_at DESC')->fetchAll()); echo json_encode($db->query('SELECT c.id, c.title, c.color, c.tags, c.bucket_id, c.parent_id, c.position, c.created_at, c.updated_at, c.due_date, c.caldav_uid, c.caldav_rrule, c.relay_uid, c.read_push, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id ORDER BY c.position ASC, c.created_at DESC')->fetchAll());
exit; exit;
} }
if (preg_match('#^/api/cards/(\d+)$#', $route, $m) && $method === 'DELETE') { if (preg_match('#^/api/cards/(\d+)$#', $route, $m) && $method === 'DELETE') {
// CalDAV tombstone for synced cards // CalDAV tombstone for synced cards, plus a read-list wipe so the
$card = $db->prepare('SELECT caldav_uid FROM cards WHERE id = :id'); // mobile reader stops showing cards that no longer exist locally.
$card = $db->prepare('SELECT caldav_uid, relay_uid, read_push FROM cards WHERE id = :id');
$card->execute(['id' => $m[1]]); $card->execute(['id' => $m[1]]);
$uid = $card->fetchColumn(); $cardRow = $card->fetch();
if ($uid) { if ($cardRow && !empty($cardRow['caldav_uid'])) {
$db->prepare('INSERT OR REPLACE INTO caldav_tombstones (caldav_uid, card_id) VALUES (?, ?)')->execute([$uid, $m[1]]); $db->prepare('INSERT OR REPLACE INTO caldav_tombstones (caldav_uid, card_id) VALUES (?, ?)')->execute([$cardRow['caldav_uid'], $m[1]]);
}
if ($cardRow && (int)($cardRow['read_push'] ?? 0) === 1 && !empty($cardRow['relay_uid'])) {
deleteCardFromRelayRead((string)$cardRow['relay_uid'], $db);
} }
$db->prepare('DELETE FROM cards WHERE id = :id')->execute(['id' => $m[1]]); $db->prepare('DELETE FROM cards WHERE id = :id')->execute(['id' => $m[1]]);
echo json_encode(['ok' => true]); exit; echo json_encode(['ok' => true]); exit;
@@ -367,10 +471,41 @@ if (str_starts_with($route, '/api/')) {
foreach (['title', 'body', 'color', 'position', 'bucket_id', 'parent_id', 'due_date', 'scratchpad'] as $f) { foreach (['title', 'body', 'color', 'position', 'bucket_id', 'parent_id', 'due_date', 'scratchpad'] as $f) {
if (array_key_exists($f, $input)) { $fields[] = "$f = :$f"; $params[$f] = $input[$f]; } if (array_key_exists($f, $input)) { $fields[] = "$f = :$f"; $params[$f] = $input[$f]; }
} }
if (array_key_exists('read_push', $input)) {
$fields[] = 'read_push = :read_push';
$params['read_push'] = !empty($input['read_push']) ? 1 : 0;
}
if (array_key_exists('body', $input)) { $fields[] = 'tags = :tags'; $params['tags'] = extractTags($input['body']); } if (array_key_exists('body', $input)) { $fields[] = 'tags = :tags'; $params['tags'] = extractTags($input['body']); }
// Snapshot the previous read_push / relay_uid before the write so we
// can detect a toggle-off and remove the remote copy afterwards.
// The history-tracking block above only loads $old when a tracked
// field changed; we need it unconditionally when read_push is in
// play, so backfill here if missing.
$prevRead = null; $prevRelayUid = null;
if (array_key_exists('read_push', $input) && !isset($old)) {
$snap = $db->prepare('SELECT read_push, relay_uid FROM cards WHERE id = :id');
$snap->execute(['id' => $m[1]]);
$old = $snap->fetch() ?: null;
}
if (isset($old) && $old) { $prevRead = (int)($old['read_push'] ?? 0); $prevRelayUid = $old['relay_uid'] ?? null; }
if ($fields) { $fields[] = 'updated_at = datetime("now")'; $db->prepare('UPDATE cards SET ' . implode(', ', $fields) . ' WHERE id = :id')->execute($params); } if ($fields) { $fields[] = 'updated_at = datetime("now")'; $db->prepare('UPDATE cards SET ' . implode(', ', $fields) . ' WHERE id = :id')->execute($params); }
$card = $db->prepare('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id = :id'); $card = $db->prepare('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id = :id');
$card->execute(['id' => $m[1]]); echo json_encode($card->fetch()); exit; $card->execute(['id' => $m[1]]); $savedCard = $card->fetch();
// Relay sync:
// - if card currently wants to be in the read list, push (idempotent
// upsert keeps the remote copy in sync on every edit).
// - if the user just toggled it off, clean up remotely.
if ($savedCard) {
$nowRead = (int)($savedCard['read_push'] ?? 0);
if ($nowRead === 1) {
pushCardToRelayRead($savedCard, $db);
// Re-read to surface any newly-generated relay_uid on the wire.
$card->execute(['id' => $m[1]]); $savedCard = $card->fetch();
} elseif ($prevRead === 1 && $prevRelayUid) {
deleteCardFromRelayRead($prevRelayUid, $db);
}
}
echo json_encode($savedCard); exit;
} }
// Plugins // Plugins
@@ -2224,6 +2359,9 @@ if (str_starts_with($route, '/api/')) {
<button id="detail-zen" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-help="Zen mode\nFull-screen distraction-free reading.\nDrag edges to resize."> <button id="detail-zen" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-help="Zen mode\nFull-screen distraction-free reading.\nDrag edges to resize.">
<i class="ph ph-corners-out text-sm"></i> <i class="ph ph-corners-out text-sm"></i>
</button> </button>
<button id="detail-read-toggle" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-help="Read later\nPush this card to your relay account so you can read it in the distraction-free mobile reader.">
<i id="detail-read-icon" class="ph ph-book-open text-sm"></i><span id="detail-read-label" class="font-pixel text-[10px]">Read</span>
</button>
<div class="flex-1"></div> <div class="flex-1"></div>
<button id="split-right-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-help="Split view\nShows cards sharing tags, links,\nor content with this card."> <button id="split-right-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-help="Split view\nShows cards sharing tags, links,\nor content with this card.">
<i class="ph ph-split-horizontal text-sm"></i><span class="font-pixel text-[10px]">Split</span> <i class="ph ph-split-horizontal text-sm"></i><span class="font-pixel text-[10px]">Split</span>
public/js/modules/board.js
+1
View File
@@ -486,6 +486,7 @@ export function renderCardHtml(c, inGroup = false, recent = []) {
<div class="mt-auto pt-2 flex items-center gap-2 text-[10px] ${hasCover ? 'text-t-text' : 'text-t-dim'} font-pixel"> <div class="mt-auto pt-2 flex items-center gap-2 text-[10px] ${hasCover ? 'text-t-text' : 'text-t-dim'} font-pixel">
${c.due_date ? `<span class="due-pill" style="background:${overdue ? 'var(--t-danger)' : cardColor};"><i class="ph ph-clock-countdown" style="font-size:9px;"></i>${c.due_date}</span>` : `<span class="flex items-center gap-1"><i class="ph ph-clock text-xs"></i>${(c.updated_at || c.created_at || '').substring(0, 10)}</span>`} ${c.due_date ? `<span class="due-pill" style="background:${overdue ? 'var(--t-danger)' : cardColor};"><i class="ph ph-clock-countdown" style="font-size:9px;"></i>${c.due_date}</span>` : `<span class="flex items-center gap-1"><i class="ph ph-clock text-xs"></i>${(c.updated_at || c.created_at || '').substring(0, 10)}</span>`}
${c.bucket_name ? `<span class="flex items-center gap-1"><i class="ph ph-folder text-xs"></i>${esc(c.bucket_name)}</span>` : ''} ${c.bucket_name ? `<span class="flex items-center gap-1"><i class="ph ph-folder text-xs"></i>${esc(c.bucket_name)}</span>` : ''}
${Number(c.read_push) ? '<span class="flex items-center gap-1 text-t-accent" title="On your relay\'s Read list"><i class="ph ph-book-open text-xs"></i></span>' : ''}
</div> </div>
</div> </div>
</div>`; </div>`;
public/js/modules/detail.js
+40
View File
@@ -570,10 +570,50 @@ function updateDoneButton(card) {
if (label) label.textContent = isDone ? 'Undone' : 'Done'; if (label) label.textContent = isDone ? 'Undone' : 'Done';
} }
function updateReadButton(card) {
const isOn = !!Number(card?.read_push || 0);
const btn = $('detail-read-toggle');
const icon = $('detail-read-icon');
const label = $('detail-read-label');
if (!btn) return;
// Off state reuses the neutral control-bar style; on state inverts
// (accent-filled tile with dark text) so "this card sits on the relay
// right now" is visually unmistakable, matching typical toggle UIs.
btn.classList.toggle('bg-t-accent', isOn);
btn.classList.toggle('border-t-accent', isOn);
btn.classList.toggle('text-t-bg', isOn);
btn.classList.toggle('text-t-muted', !isOn);
btn.classList.toggle('hover:border-t-accent', !isOn);
btn.classList.toggle('hover:text-t-accent', !isOn);
if (icon) icon.className = (isOn ? 'ph-fill ph-book-open' : 'ph ph-book-open') + ' text-sm';
if (label) label.textContent = isOn ? 'On relay' : 'Read';
btn.title = isOn
? 'On relay — click to remove from your Read list'
: 'Push this card to your relay\'s Read list for distraction-free mobile reading';
}
$('detail-read-toggle')?.addEventListener('click', async () => {
const card = state.viewingCard;
if (!card) return;
const next = Number(card.read_push || 0) ? 0 : 1;
try {
const updated = await api(`api/cards/${card.id}`, { method: 'PATCH', body: { read_push: next } });
if (updated && !updated.error) {
card.read_push = updated.read_push;
card.relay_uid = updated.relay_uid;
const c = state.cards.find(x => x.id == card.id);
if (c) { c.read_push = updated.read_push; c.relay_uid = updated.relay_uid; }
updateReadButton(card);
window._renderBoard?.();
}
} catch (_) { /* network error: silently ignore */ }
});
function showContent(card) { function showContent(card) {
$('detail-color').style.background = card.color; $('detail-color').style.background = card.color;
titleEl.textContent = card.title; titleEl.textContent = card.title;
updateDoneButton(card); updateDoneButton(card);
updateReadButton(card);
const doneCorner = $('detail-done-corner'); const doneCorner = $('detail-done-corner');
if (doneCorner) doneCorner.classList.toggle('hidden', !(card.tags || '').split(',').includes('done')); if (doneCorner) doneCorner.classList.toggle('hidden', !(card.tags || '').split(',').includes('done'));
bodyEl.innerHTML = renderMd(card.body); bodyEl.innerHTML = renderMd(card.body);
relay/inc/bootstrap.php
+33
View File
@@ -381,6 +381,39 @@ $db->exec('CREATE TABLE IF NOT EXISTS collab_card_locks (
)'); )');
$db->exec('CREATE INDEX IF NOT EXISTS idx_collab_card_locks_expires ON collab_card_locks(expires_at)'); $db->exec('CREATE INDEX IF NOT EXISTS idx_collab_card_locks_expires ON collab_card_locks(expires_at)');
// Read-later items: cards the tenant opted into sending to the relay for
// distraction-free reading in the mobile zen view. Stored at-rest under the
// inter-tenant key (same pattern as messages). Hard-deleted on removal —
// no offline-sync need, the hyprcrd client is the source of truth.
$db->exec('CREATE TABLE IF NOT EXISTS read_items (
id INTEGER PRIMARY KEY AUTOINCREMENT,
tenant_id INTEGER NOT NULL,
relay_uid TEXT NOT NULL,
title TEXT NOT NULL DEFAULT "",
body TEXT NOT NULL DEFAULT "",
hero_filename TEXT,
created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
UNIQUE (tenant_id, relay_uid),
FOREIGN KEY (tenant_id) REFERENCES tenants(id) ON DELETE CASCADE
)');
$db->exec('CREATE INDEX IF NOT EXISTS idx_read_items_tenant_updated ON read_items(tenant_id, updated_at DESC)');
// Read attachments (inline images referenced by read items). Encrypted blobs
// scoped to a tenant + read_item. The reader UI serves these through a
// session endpoint so the browser sees decrypted bytes.
$db->exec('CREATE TABLE IF NOT EXISTS read_attachments (
id INTEGER PRIMARY KEY AUTOINCREMENT,
tenant_id INTEGER NOT NULL,
relay_uid TEXT NOT NULL,
filename TEXT NOT NULL,
data TEXT NOT NULL,
created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
UNIQUE (tenant_id, relay_uid, filename),
FOREIGN KEY (tenant_id) REFERENCES tenants(id) ON DELETE CASCADE
)');
$db->exec('CREATE INDEX IF NOT EXISTS idx_read_att_lookup ON read_attachments(tenant_id, relay_uid)');
$db->exec('CREATE TABLE IF NOT EXISTS sessions ( $db->exec('CREATE TABLE IF NOT EXISTS sessions (
id TEXT PRIMARY KEY, id TEXT PRIMARY KEY,
tenant_id INTEGER NOT NULL, tenant_id INTEGER NOT NULL,
relay/inc/routes/read.php
+182
View File
@@ -0,0 +1,182 @@
<?php
// Read-later routes:
// POST /api/read (client API: upsert an item)
// DELETE /api/read/{uid} (client or session: remove)
// GET /api/read (session: list own items)
// GET /api/read/{uid} (session: one item, decrypted)
// POST /api/read-attachments (client API: upload image blob)
// GET /api/read-attachments/{uid}/{fn} (session: serve decrypted bytes)
//
// Encryption mirrors messages / collab-cards: client encrypts with their
// own secret, relay decrypts with senderSecret, re-encrypts under the
// inter-tenant key for at-rest storage, decrypts again for the session
// UI. Hard delete — no tombstones (no offline-sync requirement, the
// hyprcrd client is the source of truth).
if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
// Session tenant is set by routes/public.php earlier in the chain;
// client-API auth is lazy so we don't hit authClient() when the session
// alone suffices.
$clientTenant = $clientTenant ?? authClient($db);
// ── Client API: upsert an item ────────────────────────────────────
if ($route === '/api/read' && $method === 'POST') {
if (!$clientTenant) jsonResponse(['error' => 'unauthorized'], 401);
if (empty($clientTenant['secret_encrypted'])) {
jsonResponse(['error' => 'sender has no client secret set'], 400);
}
$input = json_decode(file_get_contents('php://input'), true) ?: [];
$relayUid = trim((string)($input['relay_uid'] ?? ''));
$encTitle = (string)($input['title'] ?? '');
$encBody = (string)($input['body'] ?? '');
$heroFilename = trim((string)($input['hero_filename'] ?? ''));
if ($relayUid === '' || $encBody === '') {
jsonResponse(['error' => 'relay_uid and body required'], 400);
}
// Hero filename follows the hyprcrd upload naming scheme; empty is
// valid (no inline images).
if ($heroFilename !== '' && !preg_match('/^[a-f0-9]{8,64}\.[a-z0-9]{1,8}$/', $heroFilename)) {
jsonResponse(['error' => 'invalid hero_filename'], 400);
}
$senderSecret = masterDecrypt($clientTenant['secret_encrypted'], $MASTER_KEY);
if (!$senderSecret) jsonResponse(['error' => 'sender secret unavailable'], 500);
$interKey = getInterTenantKey($db, $MASTER_KEY);
if (!$interKey) jsonResponse(['error' => 'relay super-shared key not set'], 500);
$plainTitle = clientDecrypt($encTitle, $senderSecret);
$plainBody = clientDecrypt($encBody, $senderSecret);
if ($plainBody === '') jsonResponse(['error' => 'body decrypt failed'], 400);
$storedTitle = clientEncrypt($plainTitle, $interKey);
$storedBody = clientEncrypt($plainBody, $interKey);
$db->prepare("
INSERT INTO read_items (tenant_id, relay_uid, title, body, hero_filename, updated_at)
VALUES (:t, :u, :ti, :bo, :hf, datetime('now'))
ON CONFLICT(tenant_id, relay_uid) DO UPDATE SET
title = excluded.title,
body = excluded.body,
hero_filename = excluded.hero_filename,
updated_at = excluded.updated_at
")->execute([
't' => $clientTenant['id'],
'u' => $relayUid,
'ti' => $storedTitle,
'bo' => $storedBody,
'hf' => $heroFilename !== '' ? $heroFilename : null,
]);
jsonResponse(['ok' => true, 'relay_uid' => $relayUid]);
}
// ── DELETE /api/read/{uid} ────────────────────────────────────────
if (preg_match('#^/api/read/([a-zA-Z0-9_-]+)$#', $route, $m) && $method === 'DELETE') {
$tenant = $clientTenant ?: $sessionTenant;
if (!$tenant) jsonResponse(['error' => 'unauthorized'], 401);
$uid = $m[1];
$db->prepare('DELETE FROM read_attachments WHERE tenant_id = :t AND relay_uid = :u')
->execute(['t' => $tenant['id'], 'u' => $uid]);
$db->prepare('DELETE FROM read_items WHERE tenant_id = :t AND relay_uid = :u')
->execute(['t' => $tenant['id'], 'u' => $uid]);
jsonResponse(['ok' => true]);
}
// ── Session: list own items (for the relay UI) ────────────────────
if ($route === '/api/read' && $method === 'GET' && $sessionTenant) {
$interKey = getInterTenantKey($db, $MASTER_KEY);
if (!$interKey) jsonResponse(['error' => 'relay super-shared key not set'], 500);
$stmt = $db->prepare('
SELECT relay_uid, title, hero_filename, created_at, updated_at, length(body) AS body_len
FROM read_items WHERE tenant_id = :t
ORDER BY updated_at DESC
LIMIT 200
');
$stmt->execute(['t' => $sessionTenant['id']]);
$out = [];
foreach ($stmt->fetchAll() as $row) {
$out[] = [
'relay_uid' => $row['relay_uid'],
'title' => clientDecrypt($row['title'] ?? '', $interKey),
'hero_filename' => $row['hero_filename'],
'created_at' => $row['created_at'],
'updated_at' => $row['updated_at'],
];
}
jsonResponse(['items' => $out]);
}
// ── Session: one item with body ───────────────────────────────────
if (preg_match('#^/api/read/([a-zA-Z0-9_-]+)$#', $route, $m) && $method === 'GET' && $sessionTenant) {
$uid = $m[1];
$interKey = getInterTenantKey($db, $MASTER_KEY);
if (!$interKey) jsonResponse(['error' => 'relay super-shared key not set'], 500);
$stmt = $db->prepare('SELECT relay_uid, title, body, hero_filename, created_at, updated_at FROM read_items WHERE tenant_id = :t AND relay_uid = :u');
$stmt->execute(['t' => $sessionTenant['id'], 'u' => $uid]);
$row = $stmt->fetch();
if (!$row) jsonResponse(['error' => 'not found'], 404);
jsonResponse([
'relay_uid' => $row['relay_uid'],
'title' => clientDecrypt($row['title'] ?? '', $interKey),
'body' => clientDecrypt($row['body'] ?? '', $interKey),
'hero_filename' => $row['hero_filename'],
'created_at' => $row['created_at'],
'updated_at' => $row['updated_at'],
]);
}
// ── Client API: upload inline image blob ──────────────────────────
if ($route === '/api/read-attachments' && $method === 'POST') {
if (!$clientTenant) jsonResponse(['error' => 'unauthorized'], 401);
if (empty($clientTenant['secret_encrypted'])) {
jsonResponse(['error' => 'sender has no client secret set'], 400);
}
$input = json_decode(file_get_contents('php://input'), true) ?: [];
$relayUid = (string)($input['relay_uid'] ?? '');
$filename = (string)($input['filename'] ?? '');
$data = (string)($input['data'] ?? '');
if (!$relayUid || !$filename || !$data) jsonResponse(['error' => 'relay_uid, filename, data required'], 400);
if (!preg_match('/^[a-f0-9]{8,64}\.[a-z0-9]{1,8}$/', $filename)) jsonResponse(['error' => 'invalid filename'], 400);
$senderSecret = masterDecrypt($clientTenant['secret_encrypted'], $MASTER_KEY);
if (!$senderSecret) jsonResponse(['error' => 'sender secret unavailable'], 500);
$interKey = getInterTenantKey($db, $MASTER_KEY);
if (!$interKey) jsonResponse(['error' => 'relay super-shared key not set'], 500);
$plain = clientDecrypt($data, $senderSecret);
if ($plain === '') jsonResponse(['error' => 'attachment decrypt failed'], 400);
$stored = clientEncrypt($plain, $interKey);
$db->prepare('INSERT INTO read_attachments (tenant_id, relay_uid, filename, data) VALUES (:t, :u, :f, :d)
ON CONFLICT(tenant_id, relay_uid, filename) DO UPDATE SET data = excluded.data')
->execute(['t' => $clientTenant['id'], 'u' => $relayUid, 'f' => $filename, 'd' => $stored]);
jsonResponse(['ok' => true]);
}
// ── Session: serve decrypted image bytes ──────────────────────────
if (preg_match('#^/api/read-attachments/([a-zA-Z0-9_-]+)/([a-f0-9]+\.[a-z0-9]{1,8})$#', $route, $m) && $method === 'GET' && $sessionTenant) {
$uid = $m[1];
$filename = $m[2];
$interKey = getInterTenantKey($db, $MASTER_KEY);
if (!$interKey) { http_response_code(500); exit; }
$stmt = $db->prepare('SELECT data FROM read_attachments WHERE tenant_id = :t AND relay_uid = :u AND filename = :f');
$stmt->execute(['t' => $sessionTenant['id'], 'u' => $uid, 'f' => $filename]);
$enc = $stmt->fetchColumn();
if (!$enc) { http_response_code(404); exit; }
$b64 = clientDecrypt($enc, $interKey);
$bytes = base64_decode($b64, true);
if ($bytes === false) { http_response_code(500); exit; }
$ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
$mimes = ['png' => 'image/png', 'jpg' => 'image/jpeg', 'jpeg' => 'image/jpeg', 'gif' => 'image/gif', 'webp' => 'image/webp'];
header('Content-Type: ' . ($mimes[$ext] ?? 'application/octet-stream'));
header('Cache-Control: private, max-age=3600');
echo $bytes;
exit;
}
relay/index.php
+6 -2
View File
@@ -69,8 +69,11 @@ if (str_starts_with($route, '/api/')) {
// Attachment routes handle binary blobs; everything else is JSON metadata. // Attachment routes handle binary blobs; everything else is JSON metadata.
// A ~150KB image becomes a ~275KB envelope after base64 + GCM framing, // A ~150KB image becomes a ~275KB envelope after base64 + GCM framing,
// so 256KB would silently drop any non-trivial image on collab pushes. // so 256KB would silently drop any non-trivial image on collab pushes.
$isAttachmentRoute = in_array($route, ['/api/attachments', '/api/attachments/upload', '/api/collab-attachments'], true); $isAttachmentRoute = in_array($route, ['/api/attachments', '/api/attachments/upload', '/api/collab-attachments', '/api/read-attachments'], true);
$sizeLimit = $isAttachmentRoute ? 15728640 : 262144; // Read items carry the full card body (markdown), which can be much
// longer than a chat message — raise the JSON-metadata cap for the
// read endpoint too.
$sizeLimit = $isAttachmentRoute ? 15728640 : ($route === '/api/read' ? 2097152 : 262144);
if ($contentLength > $sizeLimit) jsonResponse(['error' => 'payload too large'], 413); if ($contentLength > $sizeLimit) jsonResponse(['error' => 'payload too large'], 413);
// Each route file contains its handlers as if-blocks that exit on // Each route file contains its handlers as if-blocks that exit on
@@ -85,6 +88,7 @@ if (str_starts_with($route, '/api/')) {
require __DIR__ . '/inc/routes/collab-cards.php'; require __DIR__ . '/inc/routes/collab-cards.php';
require __DIR__ . '/inc/routes/collab-locks.php'; require __DIR__ . '/inc/routes/collab-locks.php';
require __DIR__ . '/inc/routes/shopping.php'; require __DIR__ . '/inc/routes/shopping.php';
require __DIR__ . '/inc/routes/read.php';
jsonResponse(['error' => 'not found'], 404); jsonResponse(['error' => 'not found'], 404);
} }
relay/ui/app.js
+194 -4
View File
@@ -68,17 +68,18 @@ function showView(name) {
if (me && me.password_changed === false && !['setup', 'login', 'change-password'].includes(name)) { if (me && me.password_changed === false && !['setup', 'login', 'change-password'].includes(name)) {
name = 'change-password'; name = 'change-password';
} }
['setup', 'login', 'change-password', 'compose', 'inbox', 'account', 'admin', 'chat', 'shopping'].forEach(v => { ['setup', 'login', 'change-password', 'compose', 'inbox', 'account', 'admin', 'chat', 'shopping', 'read'].forEach(v => {
$('view-' + v)?.classList.add('hidden'); $('view-' + v)?.classList.add('hidden');
}); });
$('view-' + name)?.classList.remove('hidden'); $('view-' + name)?.classList.remove('hidden');
if (['compose', 'inbox', 'account', 'admin', 'chat', 'shopping'].includes(name)) { if (['compose', 'inbox', 'account', 'admin', 'chat', 'shopping', 'read'].includes(name)) {
$('nav-buttons').classList.remove('hidden'); $('nav-buttons').classList.remove('hidden');
$('nav-compose').classList.toggle('active', name === 'compose'); $('nav-compose').classList.toggle('active', name === 'compose');
$('nav-inbox')?.classList.toggle('active', name === 'inbox'); $('nav-inbox')?.classList.toggle('active', name === 'inbox');
$('nav-chat')?.classList.toggle('active', name === 'chat'); $('nav-chat')?.classList.toggle('active', name === 'chat');
$('nav-shopping')?.classList.toggle('active', name === 'shopping'); $('nav-shopping')?.classList.toggle('active', name === 'shopping');
$('nav-read')?.classList.toggle('active', name === 'read');
$('nav-account').classList.toggle('active', name === 'account'); $('nav-account').classList.toggle('active', name === 'account');
$('nav-admin').classList.toggle('active', name === 'admin'); $('nav-admin').classList.toggle('active', name === 'admin');
$('nav-burger')?.classList.remove('hidden'); $('nav-burger')?.classList.remove('hidden');
@@ -119,9 +120,14 @@ function showView(name) {
} else { } else {
stopShoppingPoll(); stopShoppingPoll();
} }
if (name === 'read') {
loadReadList();
// Close any open article when switching into the list view.
closeReader();
}
// Remember the active view so a page reload lands back here // Remember the active view so a page reload lands back here
// instead of defaulting to compose every time. // instead of defaulting to compose every time.
if (['compose', 'inbox', 'account', 'admin', 'chat', 'shopping'].includes(name)) { if (['compose', 'inbox', 'account', 'admin', 'chat', 'shopping', 'read'].includes(name)) {
try { localStorage.setItem('relay-last-view', name); } catch {} try { localStorage.setItem('relay-last-view', name); } catch {}
} }
if (name === 'admin') { if (name === 'admin') {
@@ -278,7 +284,7 @@ function routePostLogin(status) {
toast('set your client secret to start using the relay'); toast('set your client secret to start using the relay');
} else { } else {
const last = localStorage.getItem('relay-last-view') || 'compose'; const last = localStorage.getItem('relay-last-view') || 'compose';
showView(['compose', 'inbox', 'account', 'admin', 'chat', 'shopping'].includes(last) ? last : 'compose'); showView(['compose', 'inbox', 'account', 'admin', 'chat', 'shopping', 'read'].includes(last) ? last : 'compose');
} }
} }
@@ -1179,3 +1185,187 @@ document.addEventListener('keydown', e => {
if (document.activeElement?.id === 'compose-body' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); sendCompose(); } if (document.activeElement?.id === 'compose-body' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); sendCompose(); }
} }
}); });
// ── Read view: list + zen reader ──────────────────────────────────
//
// The hyprcrd client pushes cards here when the user toggles "Read later"
// on a card. This view renders the list, and the reader overlay renders
// the markdown in a mobile-first, distraction-free column. Images in the
// body are rewritten to the relay's session-authed image endpoint.
let readCurrentUid = null;
async function loadReadList() {
const list = $('read-items');
const empty = $('read-empty');
if (!list) return;
list.innerHTML = '';
try {
const res = await api('api/read');
const items = res?.items || [];
if (!items.length) {
empty.classList.remove('hidden');
return;
}
empty.classList.add('hidden');
list.innerHTML = items.map(it => {
const title = it.title?.trim() || '(untitled)';
const thumb = it.hero_filename
? `<div class="read-item-thumb" style="background-image:url('api/read-attachments/${encodeURIComponent(it.relay_uid)}/${encodeURIComponent(it.hero_filename)}');"></div>`
: `<div class="read-item-thumb read-item-thumb-placeholder"><i class="ph ph-book-open"></i></div>`;
return `
<li class="read-item" data-uid="${escapeHtml(it.relay_uid)}">
${thumb}
<div class="read-item-body">
<div class="read-item-title">${escapeHtml(title)}</div>
<div class="read-item-meta">${escapeHtml(formatRelTime(it.updated_at))}</div>
</div>
</li>`;
}).join('');
list.querySelectorAll('.read-item').forEach(el => {
el.addEventListener('click', () => openReader(el.dataset.uid));
});
} catch (e) {
list.innerHTML = `<li style="color:var(--danger);font-size:12px;">Failed to load: ${escapeHtml(e.message)}</li>`;
}
}
async function openReader(uid) {
const reader = $('read-reader');
const article = $('read-article');
if (!reader || !article) return;
readCurrentUid = uid;
article.innerHTML = '<p style="color:var(--dim);">loading…</p>';
reader.classList.remove('hidden');
reader.scrollTop = 0;
try {
const res = await api('api/read/' + encodeURIComponent(uid));
if (res?.error) throw new Error(res.error);
article.innerHTML = renderReadArticle(res);
} catch (e) {
article.innerHTML = `<p style="color:var(--danger);">Failed to load: ${escapeHtml(e.message)}</p>`;
}
}
function closeReader() {
readCurrentUid = null;
$('read-reader')?.classList.add('hidden');
}
function renderReadArticle(item) {
const title = item.title?.trim() || '(untitled)';
const rawBody = item.body || '';
// Hero: first uploads/<hex>.<ext> reference in body. Rewrite to the
// session-authed relay endpoint so the <img src> resolves server-side
// against the tenant's own read_attachments rows.
const uid = encodeURIComponent(item.relay_uid);
const bodyForRender = rawBody.replace(
/uploads\/([a-f0-9]+\.[a-z0-9]+)/gi,
(_m, fn) => `api/read-attachments/${uid}/${encodeURIComponent(fn)}`
);
const hero = item.hero_filename
? `<img class="read-hero" src="api/read-attachments/${uid}/${encodeURIComponent(item.hero_filename)}" alt="">`
: '';
const date = item.updated_at ? formatRelTime(item.updated_at) : '';
return `
${hero}
<h1 class="read-title">${escapeHtml(title)}</h1>
<div class="read-date">${escapeHtml(date)}</div>
${renderMarkdown(bodyForRender)}
`;
}
// Tiny inline markdown renderer. Covers the cases hyprcrd cards actually
// use: paragraphs, headings, bold/italic, inline code, links, bullet +
// numbered lists, blockquotes, hr, fenced code blocks, inline images.
// We do NOT pull a full library in — this matches the UI's existing
// minimal-deps stance (fonts + phosphor, nothing else).
function renderMarkdown(src) {
if (!src) return '';
const placeholders = [];
const stash = (html) => { placeholders.push(html); return `\u0000${placeholders.length - 1}\u0000`; };
// Fenced code
src = src.replace(/```(\w+)?\n([\s\S]*?)```/g, (_m, _lang, code) =>
stash(`<pre><code>${escapeHtml(code)}</code></pre>`));
// Inline code
src = src.replace(/`([^`\n]+)`/g, (_m, c) => stash(`<code>${escapeHtml(c)}</code>`));
// Escape remaining HTML
src = escapeHtml(src);
// Restore stashed code first (before we mangle further)
src = src.replace(/\u0000(\d+)\u0000/g, (_m, i) => placeholders[Number(i)]);
// Images: ![alt](url)
src = src.replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (_m, alt, url) =>
`<img src="${escapeAttr(url)}" alt="${escapeAttr(alt)}">`);
// Links: [text](url)
src = src.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, text, url) =>
`<a href="${escapeAttr(url)}" target="_blank" rel="noopener">${text}</a>`);
// Headings (## etc.), line-anchored
src = src.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
src = src.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
src = src.replace(/^#\s+(.+)$/gm, '<h1>$1</h1>');
// HR
src = src.replace(/^---+$/gm, '<hr>');
// Blockquotes: consecutive "> " lines collapse into one <blockquote>
src = src.replace(/(^|\n)((?:> [^\n]*\n?)+)/g, (_m, pre, block) => {
const inner = block.replace(/^> ?/gm, '').trim();
return `${pre}<blockquote>${inner.replace(/\n/g, '<br>')}</blockquote>\n`;
});
// Lists: grouped runs of "- " / "* " / "N." items
src = src.replace(/(^|\n)((?:[-*]\s+[^\n]+\n?)+)/g, (_m, pre, block) => {
const items = block.trim().split(/\n/).map(l => l.replace(/^[-*]\s+/, '')).map(i => `<li>${i}</li>`).join('');
return `${pre}<ul>${items}</ul>\n`;
});
src = src.replace(/(^|\n)((?:\d+\.\s+[^\n]+\n?)+)/g, (_m, pre, block) => {
const items = block.trim().split(/\n/).map(l => l.replace(/^\d+\.\s+/, '')).map(i => `<li>${i}</li>`).join('');
return `${pre}<ol>${items}</ol>\n`;
});
// Bold + italic (do bold first to avoid partial capture)
src = src.replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
src = src.replace(/(?<!\w)\*([^*\n]+)\*(?!\w)/g, '<em>$1</em>');
// Paragraphs: wrap any run of non-block-level lines. Block-level tags
// we've already emitted stay as-is.
const blocks = src.split(/\n{2,}/);
return blocks.map(b => {
const t = b.trim();
if (!t) return '';
if (/^<(h[1-6]|ul|ol|pre|blockquote|hr|img)/.test(t)) return t;
return `<p>${t.replace(/\n/g, '<br>')}</p>`;
}).join('\n');
}
function escapeAttr(s) {
return String(s ?? '').replace(/["&<>]/g, c => ({ '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
}
$('read-back')?.addEventListener('click', closeReader);
$('read-delete')?.addEventListener('click', async () => {
if (!readCurrentUid) return;
if (!await relayConfirm('Remove this item from your read list?', { okLabel: 'Remove', danger: true })) return;
const uid = readCurrentUid;
try {
await api('api/read/' + encodeURIComponent(uid), { method: 'DELETE' });
closeReader();
loadReadList();
toast('removed');
} catch (e) {
toast(e.message || 'failed', true);
}
});
// Browser back should close the reader first, then leave the view.
window.addEventListener('keydown', e => {
if (e.key === 'Escape' && readCurrentUid) {
e.preventDefault();
closeReader();
}
});
relay/ui/layout.php
+21
View File
@@ -28,6 +28,7 @@ if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
<button id="nav-inbox" class="nav-btn" onclick="showView('inbox')"><i class="ph ph-tray"></i> inbox</button> <button id="nav-inbox" class="nav-btn" onclick="showView('inbox')"><i class="ph ph-tray"></i> inbox</button>
<button id="nav-chat" class="nav-btn" onclick="showView('chat')"><i class="ph ph-chat-circle-dots"></i> chat</button> <button id="nav-chat" class="nav-btn" onclick="showView('chat')"><i class="ph ph-chat-circle-dots"></i> chat</button>
<button id="nav-shopping" class="nav-btn" onclick="showView('shopping')"><i class="ph ph-shopping-cart"></i> shopping</button> <button id="nav-shopping" class="nav-btn" onclick="showView('shopping')"><i class="ph ph-shopping-cart"></i> shopping</button>
<button id="nav-read" class="nav-btn" onclick="showView('read')"><i class="ph ph-book-open"></i> read</button>
<button id="nav-account" class="nav-btn" onclick="showView('account')"><i class="ph ph-user-circle"></i> account</button> <button id="nav-account" class="nav-btn" onclick="showView('account')"><i class="ph ph-user-circle"></i> account</button>
<button id="nav-admin" class="nav-btn hidden" onclick="showView('admin')"><i class="ph ph-users"></i> users</button> <button id="nav-admin" class="nav-btn hidden" onclick="showView('admin')"><i class="ph ph-users"></i> users</button>
<button class="nav-btn danger" onclick="doLogout()"><i class="ph ph-sign-out"></i> logout</button> <button class="nav-btn danger" onclick="doLogout()"><i class="ph ph-sign-out"></i> logout</button>
@@ -234,6 +235,26 @@ if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
</div> </div>
</div> </div>
<!-- ── Read view: list + zen reader ── -->
<div id="view-read" class="hidden">
<div id="read-list" class="read-wrap">
<div id="read-empty" class="read-empty hidden">
<i class="ph ph-book-open read-empty-icon"></i>
<p>No items yet. Toggle <strong>Read later</strong> on a card in hyprcrd to send it here.</p>
</div>
<ul id="read-items" class="read-items"></ul>
</div>
<!-- Zen reader overlay -->
<div id="read-reader" class="read-reader hidden">
<div class="read-reader-bar">
<button id="read-back" class="read-reader-btn" aria-label="back"><i class="ph ph-arrow-left"></i></button>
<span class="spacer"></span>
<button id="read-delete" class="read-reader-btn read-reader-btn-danger" aria-label="delete" title="delete from read list"><i class="ph ph-trash"></i></button>
</div>
<article id="read-article" class="read-article"></article>
</div>
</div>
<!-- ── Chat view ── --> <!-- ── Chat view ── -->
<div id="view-chat" class="hidden"> <div id="view-chat" class="hidden">
<div class="chat-layout"> <div class="chat-layout">
relay/ui/style.css
+207
View File
@@ -839,3 +839,210 @@ header .nav-btn .ph { font-size:11px; vertical-align:-1px; margin-right:2px; }
.auth-form h2 { font-size: 16px; margin-bottom: 8px; } .auth-form h2 { font-size: 16px; margin-bottom: 8px; }
.auth-form .auth-icon { font-size: 44px; } .auth-form .auth-icon { font-size: 44px; }
} }
/* ─────────────────────────────────────────────────────────────────
* Read view — list + distraction-free zen reader. Mobile-first; the
* article width is capped tight for comfortable line-lengths and the
* type scale is larger than anywhere else in the UI because this is
* meant for actual reading, not scanning.
* ───────────────────────────────────────────────────────────────── */
.read-wrap {
max-width: 720px;
margin: 0 auto;
padding: 24px 16px 48px;
}
.read-empty {
text-align: center;
padding: 64px 24px;
color: var(--dim);
font-size: 13px;
line-height: 1.6;
}
.read-empty-icon { font-size: 48px; display: block; margin: 0 auto 16px; color: var(--muted); }
.read-items {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.read-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px 16px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
display: flex;
gap: 14px;
align-items: center;
}
.read-item:hover { border-color: var(--accent); background: var(--raised); }
.read-item-thumb {
width: 64px; height: 64px; flex-shrink: 0;
border-radius: var(--radius);
background: var(--bg) center/cover no-repeat;
border: 1px solid var(--border);
}
.read-item-thumb-placeholder {
display: flex; align-items: center; justify-content: center;
color: var(--dim);
font-size: 24px;
}
.read-item-body { flex: 1; min-width: 0; }
.read-item-title {
color: var(--bright);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.read-item-meta {
font-family: var(--pixel);
font-size: 9px;
color: var(--dim);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Reader overlay: covers the main content area; header stays visible
* so the user can navigate back via the burger / nav buttons. */
.read-reader {
position: fixed;
inset: 56px 0 0 0;
background: var(--bg);
z-index: 80;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.read-reader-bar {
position: sticky;
top: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border);
z-index: 2;
}
.read-reader-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
width: 36px; height: 36px;
border-radius: var(--radius);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
transition: border-color 0.15s, color 0.15s;
}
.read-reader-btn:hover { border-color: var(--accent); color: var(--accent); }
.read-reader-btn-danger:hover { border-color: var(--danger); color: var(--danger); }
.read-article {
max-width: 680px;
width: 100%;
margin: 0 auto;
padding: 24px 20px 96px;
font-size: 17px;
line-height: 1.7;
color: var(--text);
}
.read-article .read-hero {
display: block;
width: 100%;
max-height: 360px;
object-fit: cover;
border-radius: var(--radius-lg);
margin-bottom: 24px;
background: var(--surface);
}
.read-article h1.read-title {
font-family: var(--mono);
font-size: 26px;
line-height: 1.25;
font-weight: 700;
color: var(--bright);
margin-bottom: 6px;
}
.read-article .read-date {
font-family: var(--pixel);
font-size: 10px;
color: var(--dim);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 28px;
}
.read-article h1, .read-article h2, .read-article h3 {
color: var(--bright);
line-height: 1.3;
margin-top: 28px;
margin-bottom: 12px;
}
.read-article h2 { font-size: 20px; }
.read-article h3 { font-size: 17px; }
.read-article p { margin: 0 0 16px; }
.read-article a { color: var(--accent); text-decoration: underline; }
.read-article ul, .read-article ol { padding-left: 24px; margin: 0 0 16px; }
.read-article li { margin-bottom: 6px; }
.read-article code {
font-family: var(--mono);
font-size: 0.9em;
background: var(--surface);
padding: 1px 5px;
border-radius: 3px;
}
.read-article pre {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px 16px;
overflow-x: auto;
margin: 0 0 16px;
}
.read-article pre code { background: none; padding: 0; }
.read-article blockquote {
border-left: 3px solid var(--accent);
padding-left: 14px;
color: var(--muted);
margin: 0 0 16px;
}
.read-article img {
max-width: 100%;
height: auto;
border-radius: var(--radius);
margin: 12px 0;
}
.read-article hr {
border: none;
border-top: 1px solid var(--border);
margin: 28px 0;
}
.read-article table {
border-collapse: collapse;
margin: 0 0 16px;
width: 100%;
}
.read-article th, .read-article td {
border: 1px solid var(--border);
padding: 8px 10px;
text-align: left;
}
/* Mobile: pad tighter, bump touch targets */
@media (max-width: 640px) {
.read-article { font-size: 16px; padding: 20px 16px 96px; }
.read-article h1.read-title { font-size: 22px; }
.read-reader { inset: 52px 0 0 0; }
.read-reader-btn { width: 40px; height: 40px; font-size: 18px; }
.read-item-thumb { width: 52px; height: 52px; }
}
src/Database.php
+7
View File
@@ -124,6 +124,13 @@ class Database
if (!in_array('relay_uid', $colNames)) { if (!in_array('relay_uid', $colNames)) {
self::$pdo->exec('ALTER TABLE cards ADD COLUMN relay_uid TEXT DEFAULT NULL'); self::$pdo->exec('ALTER TABLE cards ADD COLUMN relay_uid TEXT DEFAULT NULL');
} }
// Read-later push: when 1, saves propagate the card to the relay's
// /api/read endpoint so the user can read it in the mobile-friendly
// zen reader. Explicitly NOT tag-based (so reading-mode is
// independent of whatever tags the user already organises by).
if (!in_array('read_push', $colNames)) {
self::$pdo->exec('ALTER TABLE cards ADD COLUMN read_push INTEGER NOT NULL DEFAULT 0');
}
// Relay pushed message IDs (skip on own poll) // Relay pushed message IDs (skip on own poll)
self::$pdo->exec(' self::$pdo->exec('