website: new Calendar/Bookmarks/Shopping sections, relay rewrite, v2.0.0

Content catch-up from v1.3.3 → v2.0.0: three new feature sections,
relay section expanded to cover group chat / persistent history /
shopping / inbox view, footer version bumped, TODO trimmed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.7 committed 2026-04-17 17:05:56 +02:00
1 parent d83de30d6d
commit 1dfffa5d6d
2 files changed
+151 -64

No files matched your search

+29 -53
View File
@@ -1,67 +1,43 @@
# Website TODO
Audit (app 1.9.17 vs. current site 1.3.3) found the site is ~14 releases
behind on content and missing entire feature categories. Items grouped
by priority so it's obvious what's must-have vs. polish.
Updated 2026-04-17, app at 2.0.0.
## P0 — critical freshness gap
## P0 — done
- [ ] **Bump footer version** to the actual app version (pull from
`config.php` APP_VERSION or `electron/package.json`). Today shows
`v1.3.3`, app is `1.9.17`.
- [ ] **Refresh hero screenshot** (`screenshot.png`). Probably 1+ year
stale; current board has new bucket bar with fade edges, loading
spinner, peer strip in chat, etc.
- [ ] **New section: Calendar + CalDAV.** Completely absent today.
Cover: month grid, journal entries (`YYYY-MM-DD` titled cards),
appointments via `#termin` template (Zeit/Bis/Ort/Teilnehmer),
bidirectional ownCloud/Nextcloud sync, day-popup quick-add. This
is a big differentiator vs. Obsidian/Notion and currently hidden.
- [ ] **Rewrite Relay section.** Today only mentions 1:1 chat + collab
buckets. Add: group chat (named rooms, member mgmt, persistent
history, backfill on new device), disposable vs. persistent 1:1
threads, shared-bucket inbox in relay UI, sync-event toasts.
- [ ] **Flesh out bundled plugins.** Currently lists names only. Add
a short paragraph + tiny screenshot each for: TIM (time calc),
Terminal, Slideshow, Logseq-Import, Canvas (ASCII art).
- [x] **Bump footer version** to 2.0.0
- [x] **Favicon** added (favicon.svg linked in head)
- [x] **New section: Calendar + CalDAV** — month grid visual, journal/termin/geburtstag, CalDAV sync
- [x] **Relay section rewritten** — group chat, persistent history, shopping lists, inbox view, admin last-seen, disposable threads
- [x] **New section: Bookmarks** — column-based bookmark manager, favicon fetch, card-links, DnD
- [x] **New section: Shopping** — phone-synced checklists, multi-list, headings, relay UI integration
- [x] **Deploy plugins list expanded** — bookmarks, shopping, TIM, terminal added
## P0 — still open
- [ ] **Refresh hero screenshot** (`screenshot.png`). Board has new bucket bar with fade edges, loading spinner, shopping/bookmarks buttons, etc.
## P1 — substance
- [ ] **Screenshots gallery section.** Only one screenshot (hero) exists.
Shoot + embed: calendar month view, day-popup with templates,
chat flyout with peer strip, group chat + member list, detail
split view, superview, gallery plugin, Gitea issue browser.
Thumbnails with click-to-zoom.
- [ ] **Screenshots gallery section.** Shoot + embed: calendar month view, day-popup, chat flyout with peer strip, group chat + member list, detail split view, superview, gallery plugin, Gitea issue browser, bookmarks overlay, shopping phone view. Thumbnails with click-to-zoom.
- [ ] **"Daily use" section** with three concrete workflows:
1. Journaling + calendar sync (date cards → ownCloud)
2. Team collab (shared bucket + group chat + shared-bucket inbox)
3. Gitea ticket-to-card flow
- [ ] **CTA buttons point to real landing targets**, not raw
`README.md`. Minimum: a `/install.html` with Docker, Electron
and PHP-hosting tabs.
- [ ] **Mention Superview + Split View + Find-and-Replace** explicitly.
Today buried or absent. Same for Undo/Redo across all mutations
and the editor draft auto-backup.
1. Journaling + calendar sync (date cards -> ownCloud)
2. Team collab (shared bucket + group chat)
3. Shopping list: write on desktop, check off on phone
- [ ] **CTA buttons point to real landing targets**, not raw README.md. Minimum: a /install.html with Docker, Electron and PHP-hosting tabs.
- [ ] **Mention Superview + Split View + Find-and-Replace + Saved Searches** explicitly. Same for Undo/Redo and editor draft auto-backup.
## P2 — nice-to-have
- [ ] Animated hero demo (GIF or ≤30s mp4): create card, tag-click,
detail open, calendar jump. No voiceover, just the keystrokes.
- [ ] Keyboard shortcut reference expanded (app has ~40+; site shows
~20). Maybe collapsible per-category.
- [ ] Theming preview: 3–4 design-token presets side by side so the
"fully themed" claim has a picture behind it.
- [ ] Visible changelog / "recently added" box so the site doesn't
drift 14 releases behind again.
- [ ] Comparison table vs. Obsidian / Notion / Joplin — privacy +
self-hosted + collab + calendar all-in-one is the pitch.
- [ ] Vault-key explainer (multi-instance CalDAV sharing, separate
from login password). Niche but unique to hyprcrd.
- [ ] Animated hero demo (GIF or <=30s mp4)
- [ ] Keyboard shortcut reference expanded (app has ~40+; site shows ~20)
- [ ] Theming preview: 3-4 design-token presets side by side
- [ ] Visible changelog / "recently added" box
- [ ] Comparison table vs. Obsidian / Notion / Joplin
- [ ] Vault-key explainer
## Not doing (deliberate)
- Pricing page — open-source/MIT, no revenue model to surface.
- User testimonials / case studies — no real users to quote.
- Community links (Discord/Matrix) — none exist yet.
- Mobile app shots — there isn't a mobile app, only mobile-friendly
relay UI.
- Pricing page — open-source/MIT
- User testimonials — no real users to quote
- Community links (Discord/Matrix) — none exist yet
- Mobile app shots — no mobile app, only mobile-friendly relay UI
+122 -11
View File
@@ -399,6 +399,49 @@ See also: <span class="link">[[Infra checklist]]</span>
</div>
</section>
<section class="section" id="calendar">
<div class="section-label">CALENDAR</div>
<div class="feat">
<div class="feat-text">
<h3>Cards become events.<br>Events stay synced.</h3>
<p>A month-grid calendar built into hyprcrd. Journal entries, appointments, and birthdays — all just cards with the right title or tag. Bidirectional CalDAV sync with ownCloud and Nextcloud.</p>
<ul>
<li>Journal entries: title = <code>YYYY-MM-DD</code>, one per day, no tag needed</li>
<li>Appointments: <code>#termin</code> tag + structured template (time, end, location, attendees)</li>
<li>Birthdays: <code>#geburtstag</code> tag, recurring annually</li>
<li>Click any day to create a journal entry, appointment, or birthday</li>
<li>CalDAV sync: bidirectional push/pull with ownCloud, Nextcloud, or any CalDAV server</li>
<li>Per-calendar color + icon configuration</li>
<li>Upcoming-event notifications with configurable lookahead</li>
</ul>
</div>
<div class="feat-visual">
<div style="font-family:var(--mono);font-size:11px;color:var(--tx);line-height:2;">
<div style="text-align:center;margin-bottom:12px;"><span style="color:var(--ac);font-family:var(--pixel);font-size:10px;">APRIL 2026</span></div>
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;">
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Mo</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Tu</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">We</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Th</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Fr</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Sa</span>
<span style="color:var(--hi);font-family:var(--pixel);font-size:9px;">Su</span>
<span style="opacity:0.3">30</span><span style="opacity:0.3">31</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span>
<span>13</span><span>14</span><span style="color:var(--ac);border:1px solid var(--ac);border-radius:3px;">15</span><span>16</span><span style="color:var(--yl);">17</span><span>18</span><span>19</span>
<span>20</span><span>21</span><span>22</span><span style="color:var(--pk);">23</span><span>24</span><span>25</span><span>26</span>
<span>27</span><span>28</span><span>29</span><span>30</span><span style="opacity:0.3">1</span><span style="opacity:0.3">2</span><span style="opacity:0.3">3</span>
</div>
<div style="margin-top:12px;font-size:10px;display:flex;gap:12px;justify-content:center;">
<span><span style="color:var(--ac);">&bull;</span> journal</span>
<span><span style="color:var(--yl);">&bull;</span> termin</span>
<span><span style="color:var(--pk);">&bull;</span> geburtstag</span>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="gitea">
<div class="section-label"><span class="accent">GITEA</span></div>
<div class="feat reverse">
@@ -477,14 +520,16 @@ See also: <span class="link">[[Infra checklist]]</span>
<div class="feat">
<div class="feat-text">
<h3>Sync between devices.<br>Share with people.</h3>
<p>A self-hosted message relay that connects multiple hyprcrd instances. Per-user encryption. Collaborative buckets with exclusive card locking. Encrypted chat with read receipts.</p>
<p>A self-hosted message relay that connects multiple hyprcrd instances. Per-user encryption. Collaborative buckets. Group chat with persistent history. Shopping lists on your phone.</p>
<ul>
<li>Multi-tenant: each user gets their own login + encryption secret</li>
<li>Cards sync between devices — push from one, poll from another</li>
<li>Collaborative buckets: shared editing with exclusive locks</li>
<li>Chat: encrypted messages with delivery + read receipts</li>
<li>Compose + inbox UI works on mobile</li>
<li>24h ephemeral — the relay routes, it doesn't archive</li>
<li>Collaborative buckets: shared editing with exclusive card locking</li>
<li>Group chat: named rooms, member management, persistent history that backfills on new devices</li>
<li>1:1 chat with delivery + read receipts, disposable or persistent threads</li>
<li>Shopping lists: check off items on your phone, changes sync back to hyprcrd</li>
<li>Dedicated inbox view with inbox, shared buckets, and sent messages</li>
<li>Admin dashboard: user management, last-seen tracking</li>
<li>AES-256-CBC at every hop, bcrypt passwords, master key at rest</li>
</ul>
</div>
@@ -500,11 +545,11 @@ See also: <span class="link">[[Infra checklist]]</span>
<div style="margin-bottom:20px;padding-left:24px;border-left:2px solid var(--bdr);">
<span style="font-size:11px;color:var(--tx);">
1. authenticate sender<br>
2. decrypt with alice's secret<br>
2. decrypt with sender's secret<br>
3. re-encrypt with inter-tenant key<br>
4. store (24h TTL)<br>
5. on bob's poll: decrypt<br>
6. re-encrypt with bob's secret<br>
4. store (persistent or ephemeral)<br>
5. on recipient's poll: decrypt<br>
6. re-encrypt with recipient's secret<br>
7. deliver
</span>
</div>
@@ -520,6 +565,72 @@ See also: <span class="link">[[Infra checklist]]</span>
</div>
</section>
<section class="section" id="bookmarks">
<div class="section-label">BOOKMARKS</div>
<div class="feat">
<div class="feat-text">
<h3>Column-based bookmarks.<br>Stored as cards.</h3>
<p>A bookmark list is a card. Organise links in named columns, drag to reorder, paste a URL and the title + favicon are fetched automatically. Link to other cards for cross-referencing.</p>
<ul>
<li>Tag any card with <code>#bookmarks</code> to turn it into a bookmark list</li>
<li>Named columns: create, rename, delete, drag items between them</li>
<li>Paste a URL from clipboard: title + favicon fetched server-side and stored as data: URI</li>
<li>Full-width column-width slider per list</li>
<li>Card links: <code>card:123</code> opens the linked card or switches to another bookmark list</li>
<li>Multiple lists with different names, colors, and bucket assignments</li>
<li>Board tiles show card color + link icon, no body preview</li>
</ul>
</div>
<div class="feat-visual">
<div style="display:flex;gap:12px;font-family:var(--mono);font-size:11px;">
<div style="flex:1;border:1px solid var(--bdr);border-radius:6px;padding:10px;">
<div style="font-family:var(--pixel);font-size:9px;color:var(--ac);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bdr);">Dev</div>
<div style="display:flex;flex-direction:column;gap:4px;">
<div style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--s2);border:1px solid var(--bdr);border-radius:4px;"><span style="color:var(--ac);">&#9679;</span><span style="color:var(--hi);">GitHub</span></div>
<div style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--s2);border:1px solid var(--bdr);border-radius:4px;"><span style="color:var(--ac);">&#9679;</span><span style="color:var(--hi);">MDN</span></div>
</div>
</div>
<div style="flex:1;border:1px solid var(--bdr);border-radius:6px;padding:10px;">
<div style="font-family:var(--pixel);font-size:9px;color:var(--ac);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bdr);">News</div>
<div style="display:flex;flex-direction:column;gap:4px;">
<div style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--s2);border:1px solid var(--bdr);border-radius:4px;"><span style="color:var(--yl);">&#9679;</span><span style="color:var(--hi);">HN</span></div>
<div style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--s2);border:1px solid var(--bdr);border-radius:4px;"><span style="color:var(--yl);">&#9679;</span><span style="color:var(--hi);">Lobsters</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="shopping">
<div class="section-label">SHOPPING</div>
<div class="feat">
<div class="feat-text">
<h3>Write the list on desktop.<br>Check it off on your phone.</h3>
<p>Tag a card with <code>#einkauf</code> or <code>#shopping</code>. Activate it via the Shopping button. The card's checkbox items sync to the relay and appear as a phone-friendly checklist. Tap to check off, changes sync back.</p>
<ul>
<li>Multiple shopping lists: activate any combination, all show on the phone</li>
<li>Drag-and-drop ordering in the picker, order syncs to the phone</li>
<li>Markdown headings (<code># Produce</code>) group items into sections</li>
<li>Phone only toggles checkboxes — text editing stays in hyprcrd</li>
<li>4-second poll on phone, instant push from hyprcrd on every edit</li>
<li>Works inside the relay UI: same login, same session, no separate app</li>
</ul>
</div>
<div class="feat-visual">
<div style="max-width:240px;margin:0 auto;font-family:var(--mono);font-size:13px;">
<div style="font-family:var(--pixel);font-size:10px;color:var(--ac);text-align:center;margin-bottom:12px;">Shopping</div>
<div style="font-weight:600;font-size:12px;color:var(--hi);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bdr);">Baumarkt</div>
<div style="display:flex;flex-direction:column;gap:6px;">
<div style="padding:10px 12px;background:var(--s2);border:1px solid var(--bdr);border-radius:8px;color:var(--hi);">Bretter</div>
<div style="padding:10px 12px;background:var(--s2);border:1px solid var(--bdr);border-radius:8px;color:var(--hi);">Kleber</div>
<div style="padding:10px 12px;background:var(--s2);border:1px solid var(--bdr);border-radius:8px;color:var(--hi);opacity:0.35;text-decoration:line-through;">Schrauben</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="email">
<div class="section-label">EMAIL</div>
<div class="feat">
@@ -635,7 +746,7 @@ See also: <span class="link">[[Infra checklist]]</span>
<li>One SQLite file — back up by copying <code>data/hyprcrd.db</code></li>
<li>Export as JSON+media ZIP or Obsidian/Logseq markdown vault</li>
<li>Plugin system: drop a folder, reload, feature appears</li>
<li>Bundled: chat, email, Gitea, canvas, slideshows, Logseq import, watch</li>
<li>Bundled: chat, email, Gitea, bookmarks, shopping lists, canvas, TIM (time calc), terminal, slideshows, Logseq import, watch</li>
<li>Fully themed: design tokens, presets, build your own</li>
<li>MIT licensed</li>
</ul>
@@ -678,7 +789,7 @@ See also: <span class="link">[[Infra checklist]]</span>
</main>
<footer>hyprcrd &middot; MIT license &middot; v1.3.3</footer>
<footer>hyprcrd &middot; MIT license &middot; v2.0.0</footer>
<script>
(function() {