source: Klonkt/src/views/partials/profile-sheet.ejs@ 03fa548

main
Last change on this file since 03fa548 was 535f955, checked in by roboburr <roboburr@…>, 3 months ago

feat: post likes + favourites page for logged-in users

  • New post_likes table (unique per post+user).
  • ♥ like button on the post (shared partial, htmx toggle via POST /posts/:id/like); shows the like count. Anonymous → button links to login.
  • /favorieten page (requireAuth) shows your liked posts (solo: own site, hub: across all sites with correct links). Link in account menu (sheet + topnav).

Co-Authored-By: Claude <noreply@…>
  • Property mode set to 100644
File size: 15.1 KB
Line 
1<%
2// Profile bottom sheet — mobile-only.
3//
4// Triggered by tapping any element with [data-profile-sheet-toggle]
5// (the Profiel tab in bottom-tab.ejs sets this).
6//
7// UX matches .audio-sheet for consistency: slide-up from bottom,
8// drag-to-dismiss, blur backdrop, safe-area-aware. Hidden ≥768px
9// (desktop uses the user dropdown in top-nav).
10//
11// Extension point: add more <li> blocks in any of the menu groups.
12
13if (!user) return;
14
15const _isAdmin = (user.role === 'god' || user.role === 'admin');
16const _canPost = !!((typeof canMutate === 'undefined' || canMutate)
17 && typeof permissions !== 'undefined'
18 && permissions
19 && permissions.canCreatePost
20 && permissions.canCreatePost(user, site));
21const _roleLabel = (user.role === 'god' || user.role === 'admin') ? 'beheerder'
22 : (user.role === 'editor') ? 'redacteur'
23 : '';
24// Site-scoped link (post-aanmaken) heeft in hub de /user/<slug>-prefix nodig.
25const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
26%>
27
28<div class="profile-sheet" id="profile-sheet" aria-hidden="true" role="dialog" aria-label="Profiel menu">
29 <div class="profile-sheet-backdrop" id="profile-sheet-backdrop"></div>
30 <div class="profile-sheet-panel">
31
32 <div class="profile-sheet-drag-zone" id="profile-sheet-drag-zone">
33 <button type="button" class="profile-sheet-handle" id="profile-sheet-close" aria-label="Sluiten"></button>
34 </div>
35
36 <!-- Identity header -->
37 <div class="profile-sheet-header">
38 <% if (user.avatar_url) { %>
39 <img class="profile-sheet-avatar profile-sheet-avatar-img" src="<%= user.avatar_url %>" alt="" aria-hidden="true">
40 <% } else { %>
41 <div class="profile-sheet-avatar" aria-hidden="true"><%= user.username.charAt(0).toUpperCase() %></div>
42 <% } %>
43 <div class="profile-sheet-meta">
44 <div class="profile-sheet-name"><%= user.username %></div>
45 <% if (_roleLabel) { %><div class="profile-sheet-role"><%= _roleLabel %></div><% } %>
46 </div>
47 </div>
48
49 <!-- Group 1: primary destinations -->
50 <ul class="profile-sheet-menu" role="menu">
51 <li role="none">
52 <a href="/account" class="profile-sheet-item" role="menuitem" data-close-sheet>
53 <svg class="psi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
54 <span class="psi-label">Account</span>
55 <svg class="psi-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
56 </a>
57 </li>
58 <li role="none">
59 <a href="/favorieten" class="profile-sheet-item" role="menuitem" data-close-sheet
60 hx-get="/favorieten?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
61 hx-push-url="/favorieten" hx-indicator="#pcms-loading">
62 <svg class="psi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
63 <span class="psi-label">Favorieten</span>
64 <svg class="psi-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
65 </a>
66 </li>
67 <% if (typeof canSeeBeheer !== 'undefined' && canSeeBeheer) { %>
68 <li role="none">
69 <a href="/admin" class="profile-sheet-item" role="menuitem" data-close-sheet>
70 <svg class="psi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z"/></svg>
71 <span class="psi-label">Beheer</span>
72 <svg class="psi-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
73 </a>
74 </li>
75 <% } %>
76 <% if (_canPost) { %>
77 <li role="none">
78 <a href="<%= _base %>/posts/new" class="profile-sheet-item" role="menuitem" data-close-sheet
79 hx-get="<%= _base %>/posts/new?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
80 hx-push-url="<%= _base %>/posts/new" hx-indicator="#pcms-loading">
81 <svg class="psi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
82 <span class="psi-label">Nieuwe post</span>
83 <svg class="psi-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
84 </a>
85 </li>
86 <% } %>
87 </ul>
88
89 <div class="profile-sheet-divider" role="separator"></div>
90
91 <!-- Group 2: preferences (inline toggles) -->
92 <ul class="profile-sheet-menu" role="menu">
93 <li role="none">
94 <button type="button" class="profile-sheet-item" id="profile-sheet-theme" role="menuitemcheckbox">
95 <svg class="psi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
96 <span class="psi-label">Thema</span>
97 <span class="psi-meta" id="profile-sheet-theme-state">Donker</span>
98 </button>
99 </li>
100 </ul>
101
102 <div class="profile-sheet-divider" role="separator"></div>
103
104 <!-- Group 3: destructive actions -->
105 <ul class="profile-sheet-menu" role="menu">
106 <li role="none">
107 <a href="/auth/logout" class="profile-sheet-item is-destructive" role="menuitem">
108 <svg class="psi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
109 <span class="psi-label">Uitloggen</span>
110 </a>
111 </li>
112 </ul>
113
114 </div>
115</div>
116
117<style>
118/* ============================================================
119 PROFILE SHEET — mobile bottom-sheet menu
120 Hidden ≥768px (desktop uses .user-menu dropdown in top-nav).
121 ============================================================ */
122
123.profile-sheet {
124 position: fixed;
125 inset: 0;
126 z-index: 1100; /* same as audio-sheet — modal layer */
127 pointer-events: none;
128 opacity: 0;
129 transition: opacity .2s ease;
130}
131.profile-sheet.is-open {
132 pointer-events: auto;
133 opacity: 1;
134}
135
136@media (min-width: 768px) {
137 /* Desktop has its own user-menu dropdown */
138 .profile-sheet { display: none !important; }
139}
140
141body.profile-sheet-locked { overflow: hidden; }
142
143.profile-sheet-backdrop {
144 position: absolute;
145 inset: 0;
146 background: color-mix(in srgb, var(--ink, #000) 35%, transparent);
147 backdrop-filter: blur(6px);
148 -webkit-backdrop-filter: blur(6px);
149}
150
151.profile-sheet-panel {
152 position: absolute;
153 left: 0; right: 0; bottom: 0;
154 background: var(--paper);
155 color: var(--ink);
156 border-top-left-radius: 22px;
157 border-top-right-radius: 22px;
158 box-shadow: 0 -20px 60px rgba(0, 0, 0, .25);
159 padding-bottom: max(.75rem, env(safe-area-inset-bottom, 0));
160 transform: translateY(100%);
161 transition: transform .3s cubic-bezier(.22, .9, .3, 1);
162 display: flex;
163 flex-direction: column;
164 max-height: 85vh;
165 overflow-y: auto;
166 overscroll-behavior: contain;
167}
168.profile-sheet.is-open .profile-sheet-panel {
169 transform: translateY(var(--pcms-drag-y, 0px));
170}
171.profile-sheet-panel.is-dragging { transition: none; will-change: transform; }
172
173[data-theme="dark"] .profile-sheet-panel {
174 box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
175}
176
177/* ── Drag handle zone ───────────────────────────── */
178.profile-sheet-drag-zone {
179 flex-shrink: 0;
180 padding: 12px 16px 4px;
181 /* MUST be 'none' so JS pointer events get the gesture (see audio-sheet) */
182 touch-action: none;
183 user-select: none;
184 -webkit-user-select: none;
185 cursor: grab;
186}
187.profile-sheet-drag-zone:active { cursor: grabbing; }
188@media (hover: hover) and (pointer: fine) {
189 /* On desktop the sheet isn't shown anyway, but be safe */
190 .profile-sheet-drag-zone { touch-action: auto; cursor: default; }
191}
192
193.profile-sheet-handle {
194 display: block;
195 margin: 0 auto;
196 width: 44px;
197 height: 4px;
198 border-radius: 2px;
199 background: color-mix(in srgb, var(--ink, #000) 25%, transparent);
200 border: 0;
201 padding: 0;
202 position: relative;
203}
204.profile-sheet-handle::before {
205 /* Larger invisible tap target on the handle itself */
206 content: "";
207 position: absolute;
208 inset: -16px -32px;
209}
210
211/* ── Identity header ────────────────────────────── */
212.profile-sheet-header {
213 display: flex;
214 align-items: center;
215 gap: 14px;
216 padding: 8px 20px 18px;
217}
218.profile-sheet-avatar {
219 width: 48px;
220 height: 48px;
221 display: flex;
222 align-items: center;
223 justify-content: center;
224 border-radius: 50%;
225 background: var(--paper-2); /* neutral so transparent avatars blend */
226 color: var(--accent); /* fallback initial color */
227 font-family: var(--font-ui);
228 font-weight: 700;
229 font-size: 20px;
230 flex-shrink: 0;
231 overflow: hidden;
232}
233.profile-sheet-avatar-img {
234 /* When rendered as <img>, fill the round container edge-to-edge. */
235 object-fit: cover;
236}
237.profile-sheet-meta { min-width: 0; }
238.profile-sheet-name {
239 font-family: var(--font-display, var(--font-ui));
240 font-size: 1.2rem;
241 font-weight: 600;
242 line-height: 1.2;
243 color: var(--ink);
244}
245.profile-sheet-role {
246 font-family: var(--font-ui);
247 font-size: .82rem;
248 color: var(--ink-soft);
249 margin-top: 3px;
250 text-transform: lowercase;
251 letter-spacing: .02em;
252}
253
254/* ── Menu list ──────────────────────────────────── */
255.profile-sheet-menu {
256 list-style: none;
257 margin: 0;
258 padding: 0;
259}
260.profile-sheet-divider {
261 height: 1px;
262 background: var(--rule);
263 margin: 4px 20px;
264}
265.profile-sheet-item {
266 display: flex;
267 align-items: center;
268 gap: 14px;
269 width: 100%;
270 min-height: 52px;
271 padding: 12px 20px;
272 background: transparent;
273 border: 0;
274 color: var(--ink);
275 text-decoration: none;
276 font-family: var(--font-ui);
277 font-size: 1rem;
278 text-align: left;
279 cursor: pointer;
280 -webkit-tap-highlight-color: transparent;
281 transition: background .12s ease, transform .12s ease;
282}
283.profile-sheet-item:active {
284 background: var(--paper-2);
285 transform: scale(0.99);
286}
287@media (hover: hover) {
288 .profile-sheet-item:hover { background: var(--paper-2); }
289}
290
291.psi-icon {
292 width: 22px;
293 height: 22px;
294 flex-shrink: 0;
295 color: var(--ink-soft);
296}
297.psi-label {
298 flex: 1;
299 min-width: 0;
300}
301.psi-chev {
302 width: 16px;
303 height: 16px;
304 color: var(--ink-muted);
305 flex-shrink: 0;
306}
307.psi-meta {
308 font-size: .85rem;
309 color: var(--ink-soft);
310 font-family: var(--font-ui);
311}
312
313.profile-sheet-item.is-destructive { color: #dc2626; }
314.profile-sheet-item.is-destructive .psi-icon { color: currentColor; }
315[data-theme="dark"] .profile-sheet-item.is-destructive { color: #f87171; }
316</style>
317
318<script>
319(function() {
320 const sheet = document.getElementById('profile-sheet');
321 if (!sheet) return;
322
323 const backdrop = document.getElementById('profile-sheet-backdrop');
324 const panel = sheet.querySelector('.profile-sheet-panel');
325 const closeBtn = document.getElementById('profile-sheet-close');
326 const dragZone = document.getElementById('profile-sheet-drag-zone');
327 const themeBtn = document.getElementById('profile-sheet-theme');
328 const themeLbl = document.getElementById('profile-sheet-theme-state');
329
330 function openSheet() {
331 sheet.classList.add('is-open');
332 sheet.setAttribute('aria-hidden', 'false');
333 document.body.classList.add('profile-sheet-locked');
334 syncTheme();
335 }
336 function closeSheet() {
337 sheet.classList.remove('is-open');
338 sheet.setAttribute('aria-hidden', 'true');
339 document.body.classList.remove('profile-sheet-locked');
340 panel.style.removeProperty('--pcms-drag-y');
341 }
342
343 // Open: any element with [data-profile-sheet-toggle]
344 document.addEventListener('click', function(e) {
345 const trigger = e.target.closest('[data-profile-sheet-toggle]');
346 if (trigger) {
347 e.preventDefault();
348 openSheet();
349 }
350 });
351
352 // Close: backdrop tap, handle tap, ESC, or any [data-close-sheet] item
353 if (backdrop) backdrop.addEventListener('click', closeSheet);
354 if (closeBtn) closeBtn.addEventListener('click', closeSheet);
355 document.addEventListener('keydown', (e) => {
356 if (e.key === 'Escape' && sheet.classList.contains('is-open')) closeSheet();
357 });
358
359 // Menu items that navigate: close synchronously before nav fires
360 sheet.querySelectorAll('[data-close-sheet]').forEach((el) => {
361 el.addEventListener('click', closeSheet);
362 });
363
364 // Drag-down-to-close on touch.
365 // Uses --pcms-drag-y custom property rather than overwriting the panel's
366 // transform string. This composes correctly with any horizontal centering
367 // (currently none here, but the pattern matches audio-sheet for safety).
368 let startY = 0, lastY = 0, dragging = false;
369 function onDown(e) {
370 if (e.pointerType !== 'touch') return;
371 if (panel.scrollTop > 0) return;
372 startY = lastY = e.clientY;
373 dragging = true;
374 panel.classList.add('is-dragging');
375 }
376 function onMove(e) {
377 if (!dragging) return;
378 lastY = e.clientY;
379 const dy = Math.max(0, lastY - startY);
380 panel.style.setProperty('--pcms-drag-y', dy + 'px');
381 }
382 function onUp() {
383 if (!dragging) return;
384 dragging = false;
385 panel.classList.remove('is-dragging');
386 const dy = lastY - startY;
387 if (dy > 80) closeSheet();
388 else panel.style.removeProperty('--pcms-drag-y');
389 }
390 if (window.PointerEvent && dragZone) {
391 dragZone.addEventListener('pointerdown', onDown);
392 document.addEventListener('pointermove', onMove);
393 document.addEventListener('pointerup', onUp);
394 document.addEventListener('pointercancel', onUp);
395 }
396
397 // Theme toggle inside sheet — syncs label
398 function syncTheme() {
399 if (!themeLbl) return;
400 const t = document.documentElement.getAttribute('data-theme') || 'dark';
401 themeLbl.textContent = t === 'dark' ? 'Donker' : 'Licht';
402 }
403 if (themeBtn) {
404 themeBtn.addEventListener('click', function() {
405 const cur = document.documentElement.getAttribute('data-theme') || 'dark';
406 const next = cur === 'dark' ? 'light' : 'dark';
407 document.documentElement.setAttribute('data-theme', next);
408 try { localStorage.setItem('pcms-theme', next); } catch (e) {}
409 syncTheme();
410 });
411 }
412})();
413</script>
Note: See TracBrowser for help on using the repository browser.