feat: add client-side permission gating to all write-action UIs

Gate all mutating UI elements with useCanDo() permission checks: - BudgetPanel (budget_edit), PackingListPanel (packing_edit) - DayPlanSidebar, DayDetailPanel (day_edit) - ReservationsPanel, ReservationModal (reservation_edit) - CollabNotes, CollabPolls, CollabChat (collab_edit) - FileManager (file_edit, file_delete, file_upload) - PlaceFormModal, PlaceInspector, PlacesSidebar (place_edit, file_upload) - TripFormModal (trip_edit, trip_cover_upload) - DashboardPage (trip_edit, trip_cover_upload, trip_delete, trip_archive) - TripMembersModal (member_manage, share_manage) Also: fix redundant getTripOwnerId queries in trips.ts, remove dead getTripOwnerId function, fix TripMembersModal grid when share hidden, fix canRemove logic, guard TripListItem empty actions div.
2026-06-21 14:21:46 +00:00 · 2026-03-31 22:06:52 +02:00
parent d74133745a
commit 5f71b85c06
17 changed files with 333 additions and 221 deletions
@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom'
 import { ArrowUp, Trash2, Reply, ChevronUp, MessageCircle, Smile, X } from 'lucide-react'
 import { collabApi } from '../../api/client'
 import { useSettingsStore } from '../../store/settingsStore'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
 import type { User } from '../../types'
@@ -353,6 +355,9 @@ interface CollabChatProps {
 export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
  const { t } = useTranslation()
  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
+  const can = useCanDo()
+  const trip = useTripStore((s) => s.trip)
+  const canEdit = can('collab_edit', trip)

  const [messages, setMessages] = useState([])
  const [loading, setLoading] = useState(true)
@@ -636,11 +641,11 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
                      style={{ position: 'relative' }}
                      onMouseEnter={() => setHoveredId(msg.id)}
                      onMouseLeave={() => setHoveredId(null)}
-                      onContextMenu={e => { e.preventDefault(); setReactMenu({ msgId: msg.id, x: e.clientX, y: e.clientY }) }}
+                      onContextMenu={e => { e.preventDefault(); if (canEdit) setReactMenu({ msgId: msg.id, x: e.clientX, y: e.clientY }) }}
                      onTouchEnd={e => {
                        const now = Date.now()
                        const lastTap = e.currentTarget.dataset.lastTap || 0
-                        if (now - lastTap < 300) {
+                        if (now - lastTap < 300 && canEdit) {
                          e.preventDefault()
                          const touch = e.changedTouches?.[0]
                          if (touch) setReactMenu({ msgId: msg.id, x: touch.clientX, y: touch.clientY })
@@ -703,7 +708,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
                        >
                          <Reply size={11} />
                        </button>
-                        {own && (
+                        {own && canEdit && (
                          <button onClick={() => handleDelete(msg.id)} title="Delete" style={{
                            width: 24, height: 24, borderRadius: '50%', border: 'none',
                            background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -735,7 +740,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
                          {msg.reactions.map(r => {
                            const myReaction = r.users.some(u => String(u.user_id) === String(currentUser.id))
                            return (
-                              <ReactionBadge key={r.emoji} reaction={r} currentUserId={currentUser.id} onReact={() => handleReact(msg.id, r.emoji)} />
+                              <ReactionBadge key={r.emoji} reaction={r} currentUserId={currentUser.id} onReact={() => canEdit && handleReact(msg.id, r.emoji)} />
                            )
                          })}
                        </div>
@@ -780,23 +785,27 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {

        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6 }}>
          {/* Emoji button */}
-          <button ref={emojiBtnRef} onClick={() => setShowEmoji(!showEmoji)} style={{
-            width: 34, height: 34, borderRadius: '50%', border: 'none',
-            background: showEmoji ? 'var(--bg-hover)' : 'transparent',
-            color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: 'pointer', padding: 0, flexShrink: 0, transition: 'background 0.15s',
-          }}>
-            <Smile size={20} />
-          </button>
+          {canEdit && (
+            <button ref={emojiBtnRef} onClick={() => setShowEmoji(!showEmoji)} style={{
+              width: 34, height: 34, borderRadius: '50%', border: 'none',
+              background: showEmoji ? 'var(--bg-hover)' : 'transparent',
+              color: 'var(--text-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+              cursor: 'pointer', padding: 0, flexShrink: 0, transition: 'background 0.15s',
+            }}>
+              <Smile size={20} />
+            </button>
+          )}

          <textarea
            ref={textareaRef}
            rows={1}
+            disabled={!canEdit}
            style={{
              flex: 1, resize: 'none', border: '1px solid var(--border-primary)', borderRadius: 20,
              padding: '8px 14px', fontSize: 14, lineHeight: 1.4, fontFamily: 'inherit',
              background: 'var(--bg-input)', color: 'var(--text-primary)', outline: 'none',
              maxHeight: 100, overflowY: 'hidden',
+              opacity: canEdit ? 1 : 0.5,
            }}
            placeholder={t('collab.chat.placeholder')}
            value={text}
@@ -805,15 +814,17 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
          />

          {/* Send */}
-          <button onClick={handleSend} disabled={!text.trim() || sending} style={{
-            width: 34, height: 34, borderRadius: '50%', border: 'none',
-            background: text.trim() ? '#007AFF' : 'var(--border-primary)',
-            color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: text.trim() ? 'pointer' : 'default', flexShrink: 0,
-            transition: 'background 0.15s',
-          }}>
-            <ArrowUp size={18} strokeWidth={2.5} />
-          </button>
+          {canEdit && (
+            <button onClick={handleSend} disabled={!text.trim() || sending} style={{
+              width: 34, height: 34, borderRadius: '50%', border: 'none',
+              background: text.trim() ? '#007AFF' : 'var(--border-primary)',
+              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
+              cursor: text.trim() ? 'pointer' : 'default', flexShrink: 0,
+              transition: 'background 0.15s',
+            }}>
+              <ArrowUp size={18} strokeWidth={2.5} />
+            </button>
+          )}
        </div>
      </div>

@@ -5,6 +5,8 @@ import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { Plus, Trash2, Pin, PinOff, Pencil, X, Check, StickyNote, Settings, ExternalLink, Maximize2 } from 'lucide-react'
 import { collabApi } from '../../api/client'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
 import type { User } from '../../types'
@@ -226,6 +228,9 @@ interface NoteFormModalProps {
 }

 function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategories, categoryColors, getCategoryColor, note, tripId, t }: NoteFormModalProps) {
+  const can = useCanDo()
+  const tripObj = useTripStore((s) => s.trip)
+  const canUploadFiles = can('file_upload', tripObj)
  const isEdit = !!note
  const allCategories = [...new Set([...existingCategories, ...Object.keys(categoryColors || {})])].filter(Boolean)

@@ -298,6 +303,7 @@ function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategories, ca
        }}
        onClick={e => e.stopPropagation()}
        onPaste={e => {
+          if (!canUploadFiles) return
          const items = e.clipboardData?.items
          if (!items) return
          for (const item of Array.from(items)) {
@@ -450,7 +456,7 @@ function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategories, ca
          </div>

          {/* File attachments */}
-          <div>
+          {canUploadFiles && <div>
            <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4, fontFamily: FONT }}>
              {t('collab.notes.attachFiles')}
            </div>
@@ -483,7 +489,7 @@ function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategories, ca
                <Plus size={11} /> {t('files.attach') || 'Add'}
              </label>
            </div>
-          </div>
+          </div>}

          {/* Submit */}
          <button
@@ -689,6 +695,7 @@ function CategorySettingsModal({ onClose, categories, categoryColors, onSave, on
 interface NoteCardProps {
  note: CollabNote
  currentUser: User
+  canEdit: boolean
  onUpdate: (noteId: number, data: Partial<CollabNote>) => Promise<void>
  onDelete: (noteId: number) => Promise<void>
  onEdit: (note: CollabNote) => void
@@ -699,7 +706,7 @@ interface NoteCardProps {
  t: (key: string) => string
 }

-function NoteCard({ note, currentUser, onUpdate, onDelete, onEdit, onView, onPreviewFile, getCategoryColor, tripId, t }: NoteCardProps) {
+function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdit, onView, onPreviewFile, getCategoryColor, tripId, t }: NoteCardProps) {
  const [hovered, setHovered] = useState(false)

  const author = note.author || note.user || { username: note.username, avatar: note.avatar_url || (note.avatar ? `/uploads/avatars/${note.avatar}` : null) }
@@ -760,24 +767,24 @@ function NoteCard({ note, currentUser, onUpdate, onDelete, onEdit, onView, onPre
                <Maximize2 size={10} />
              </button>
            )}
-            <button onClick={handleTogglePin} title={note.pinned ? t('collab.notes.unpin') : t('collab.notes.pin')}
+            {canEdit && <button onClick={handleTogglePin} title={note.pinned ? t('collab.notes.unpin') : t('collab.notes.pin')}
              style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}
              onMouseEnter={e => e.currentTarget.style.color = color}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
              {note.pinned ? <PinOff size={10} /> : <Pin size={10} />}
-            </button>
-            <button onClick={() => onEdit?.(note)} title={t('collab.notes.edit')}
+            </button>}
+            {canEdit && <button onClick={() => onEdit?.(note)} title={t('collab.notes.edit')}
              style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
              <Pencil size={10} />
-            </button>
-            <button onClick={handleDelete} title={t('collab.notes.delete')}
+            </button>}
+            {canEdit && <button onClick={handleDelete} title={t('collab.notes.delete')}
              style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}
              onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
              <Trash2 size={10} />
-            </button>
+            </button>}
            <div style={{ width: 1, height: 12, background: 'var(--border-faint)', flexShrink: 0, marginLeft: 1, marginRight: 1 }} />
            {/* Author avatar */}
            <div style={{ position: 'relative', flexShrink: 0 }}
@@ -879,6 +886,9 @@ interface CollabNotesProps {

 export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
  const { t } = useTranslation()
+  const can = useCanDo()
+  const trip = useTripStore((s) => s.trip)
+  const canEdit = can('collab_edit', trip)
  const [notes, setNotes] = useState([])
  const [loading, setLoading] = useState(true)
  const [showNewModal, setShowNewModal] = useState(false)
@@ -1130,11 +1140,11 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
            <Settings size={14} />
          </button>
-          <button onClick={() => setShowNewModal(true)}
+          {canEdit && <button onClick={() => setShowNewModal(true)}
            style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px', background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600, fontFamily: FONT, border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' }}>
            <Plus size={12} />
            {t('collab.notes.new')}
-          </button>
+          </button>}
        </div>
      </div>

@@ -1252,6 +1262,7 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
                key={note.id}
                note={note}
                currentUser={currentUser}
+                canEdit={canEdit}
                onUpdate={handleUpdateNote}
                onDelete={handleDeleteNote}
                onEdit={setEditingNote}
@@ -1303,12 +1314,12 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
                )}
              </div>
              <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
-                <button onClick={() => { setViewingNote(null); setEditingNote(viewingNote) }}
+                {canEdit && <button onClick={() => { setViewingNote(null); setEditingNote(viewingNote) }}
                  style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
                  onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
                  <Pencil size={16} />
-                </button>
+                </button>}
                <button onClick={() => setViewingNote(null)}
                  style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
                  onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
@@ -3,6 +3,8 @@ import { Plus, Trash2, X, Check, BarChart3, Lock, Clock } from 'lucide-react'
 import { collabApi } from '../../api/client'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
 import ReactDOM from 'react-dom'
 import type { User } from '../../types'

@@ -190,13 +192,14 @@ function VoterChip({ voter, offset }: VoterChipProps) {
 interface PollCardProps {
  poll: Poll
  currentUser: User
+  canEdit: boolean
  onVote: (pollId: number, optionId: number) => Promise<void>
  onClose: (pollId: number) => Promise<void>
  onDelete: (pollId: number) => Promise<void>
  t: (key: string) => string
 }

-function PollCard({ poll, currentUser, onVote, onClose, onDelete, t }: PollCardProps) {
+function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }: PollCardProps) {
  const total = totalVotes(poll)
  const isClosed = poll.is_closed || isExpired(poll.deadline)
  const remaining = timeRemaining(poll.deadline)
@@ -238,22 +241,24 @@ function PollCard({ poll, currentUser, onVote, onClose, onDelete, t }: PollCardP
          </div>
        </div>
        {/* Actions */}
-        <div style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
-          {!isClosed && (
-            <button onClick={() => onClose(poll.id)} title={t('collab.polls.close')}
+        {canEdit && (
+          <div style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
+            {!isClosed && (
+              <button onClick={() => onClose(poll.id)} title={t('collab.polls.close')}
+                style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
+                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+                onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                <Lock size={12} />
+              </button>
+            )}
+            <button onClick={() => onDelete(poll.id)} title={t('collab.polls.delete')}
              style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
+              onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Lock size={12} />
+              <Trash2 size={12} />
            </button>
-          )}
-          <button onClick={() => onDelete(poll.id)} title={t('collab.polls.delete')}
-            style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-            onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
-            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-            <Trash2 size={12} />
-          </button>
-        </div>
+          </div>
+        )}
      </div>

      {/* Options */}
@@ -265,15 +270,15 @@ function PollCard({ poll, currentUser, onVote, onClose, onDelete, t }: PollCardP
          const isWinner = isClosed && count === Math.max(...(poll.options || []).map(o => o.voters?.length || 0)) && count > 0

          return (
-            <button key={idx} onClick={() => !isClosed && onVote(poll.id, idx)}
-              disabled={isClosed}
+            <button key={idx} onClick={() => !isClosed && canEdit && onVote(poll.id, idx)}
+              disabled={isClosed || !canEdit}
              style={{
                position: 'relative', display: 'flex', alignItems: 'center', gap: 8,
-                padding: '10px 12px', borderRadius: 10, border: 'none', cursor: isClosed ? 'default' : 'pointer',
+                padding: '10px 12px', borderRadius: 10, border: 'none', cursor: (isClosed || !canEdit) ? 'default' : 'pointer',
                background: 'var(--bg-secondary)', fontFamily: FONT, textAlign: 'left', width: '100%',
                overflow: 'hidden', transition: 'transform 0.1s',
              }}
-              onMouseEnter={e => { if (!isClosed) e.currentTarget.style.transform = 'scale(1.01)' }}
+              onMouseEnter={e => { if (!isClosed && canEdit) e.currentTarget.style.transform = 'scale(1.01)' }}
              onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
            >
              {/* Progress bar background */}
@@ -337,6 +342,9 @@ interface CollabPollsProps {

 export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
  const { t } = useTranslation()
+  const can = useCanDo()
+  const trip = useTripStore((s) => s.trip)
+  const canEdit = can('collab_edit', trip)
  const [polls, setPolls] = useState([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
@@ -426,13 +434,15 @@ export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
          <BarChart3 size={14} color="var(--text-faint)" />
          {t('collab.polls.title')}
        </h3>
-        <button onClick={() => setShowForm(true)} style={{
-          display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px',
-          background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600,
-          fontFamily: FONT, border: 'none', cursor: 'pointer',
-        }}>
-          <Plus size={12} /> {t('collab.polls.new')}
-        </button>
+        {canEdit && (
+          <button onClick={() => setShowForm(true)} style={{
+            display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px',
+            background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600,
+            fontFamily: FONT, border: 'none', cursor: 'pointer',
+          }}>
+            <Plus size={12} /> {t('collab.polls.new')}
+          </button>
+        )}
      </div>

      {/* Content */}
@@ -446,7 +456,7 @@ export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {activePolls.length > 0 && activePolls.map(poll => (
-              <PollCard key={poll.id} poll={poll} currentUser={currentUser} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
+              <PollCard key={poll.id} poll={poll} currentUser={currentUser} canEdit={canEdit} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
            ))}
            {closedPolls.length > 0 && (
              <>
@@ -456,7 +466,7 @@ export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
                  </div>
                )}
                {closedPolls.map(poll => (
-                  <PollCard key={poll.id} poll={poll} currentUser={currentUser} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
+                  <PollCard key={poll.id} poll={poll} currentUser={currentUser} canEdit={canEdit} onVote={handleVote} onClose={handleClose} onDelete={handleDelete} t={t} />
                ))}
              </>
            )}