Changeset c745659 in Klonkt for src/views/pages

Timestamp:

06/26/2026 11:25:14 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

3289a64

Parents:

eacd3d6

Message:

feat(fedi): comment boost is a toggle with state + coloured action icons

Inbound fediverse comments: the owner like/boost/reply controls are now coloured SVG
icons (gold star / green repeat / accent arrow), matching the News feed. Boost is a
real toggle — ap_interactions.acted_boost remembers what you boosted, the button shows
an 'on' state, and clicking again retracts it (Undo Announce). Like stays fire-and-forget
(no unlike in AS).

File:

• src/views/pages/post.ejs (modified) (1 diff)

src/views/pages/post.ejs

@@ -325 +325 @@
 .comment-delete-btn:hover { color: #c33; }
 
+/* Owner comment-action icons — same visual language as the News feed, compact (30px). */
+.fedi-cact { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; padding: 0; box-sizing: border-box;
+  display: inline-flex; align-items: center; justify-content: center; list-style: none;
+  border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent);
+  background: color-mix(in srgb, var(--ink, #000) 3%, transparent);
+  color: var(--ink-soft, #888); cursor: pointer; -webkit-tap-highlight-color: transparent;
+  transition: background .12s, border-color .12s, transform .1s; }
+.fedi-cact::-webkit-details-marker { display: none; }
+.fedi-cact svg { width: 15px; height: 15px; display: block; }
+.fedi-cact:active { transform: scale(.9); }
+.fedi-cact-like svg { color: #e8b04b; }
+.fedi-cact-like:hover { background: color-mix(in srgb, #e8b04b 15%, transparent); border-color: color-mix(in srgb, #e8b04b 50%, transparent); }
+.fedi-cact-boost svg { color: #2fa85a; }
+.fedi-cact-boost:hover { background: color-mix(in srgb, #2fa85a 15%, transparent); border-color: color-mix(in srgb, #2fa85a 50%, transparent); }
+.fedi-cact-boost.is-on { background: color-mix(in srgb, #2fa85a 18%, transparent); border-color: color-mix(in srgb, #2fa85a 60%, transparent); }
+.fedi-cact-reply svg { color: var(--accent, #06c); }
+.fedi-cact-reply:hover { background: color-mix(in srgb, var(--accent, #888) 14%, transparent); border-color: color-mix(in srgb, var(--accent, #888) 50%, transparent); }
+
 .comment-replies {
   margin-top: 1rem;