Erol Haagenrud
aaec9c811d
Fullfører ADR-063 -- backend var allerede committet (206beef). Bruker
ba eksplisitt om at Claude selv implementerer frontend-promptet siden
V0-kreditter var oppbrukt.
lib/mentions.ts: ren offset-/diff-logikk (deteksjon, innsetting,
diff-justering ved redigering, tekst-segmentering), 15 enhetstester.
components/mention-input.tsx: MentionTextarea (autocomplete-dropdown,
tastaturnavigasjon) + TaggedText (lenker til /my-friends/{id}). Koblet
inn i round-messages.tsx (innlegg) og post-engagement.tsx (kommentarer,
delt av flere meldingssystemer -- roundId/tags gjort valgfrie for å
ikke bryte de org-scopede callerne uten tagging).
Rettet også et hull oppdaget underveis: backendens GET /feed manglet
tags (kun list_round_messages/comments hadde det) -- det er nettopp
/my-feed-siden som var det opprinnelige brukseksempelet.
Scratch-verifisert (egen DB/rolle/MinIO/API-/frontend-container, to
ekte testbrukere, venn-relasjon, felles runde): autocomplete, tagging
i både innlegg og kommentar, rendring som lenke i rundevisning OG i
aggregert feed, varsel opprettet, personvern-scoping bekreftet (kun
faktiske relasjoner tilbys, ikke seg selv, ikke fremmede), lys+mørk.
tsc --noEmit rent, 45/45 vitest grønt. teecup_db urørt.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
439 lines
17 KiB
TypeScript
439 lines
17 KiB
TypeScript
"use client"
|
||
|
||
import { useCallback, useEffect, useRef, useState } from "react"
|
||
import { Camera, ImagePlus, Send, Trash2, X } from "lucide-react"
|
||
import { MentionTextarea, TaggedText } from "./mention-input"
|
||
import type { Tag } from "@/lib/mentions"
|
||
import { PostEngagement, type ReactionSummary } from "./post-engagement"
|
||
|
||
/** Rå meldingsform fra backend. */
|
||
export type ApiRoundMessage = {
|
||
id: string
|
||
round_id: string
|
||
author_user_id: string
|
||
author_display_name: string
|
||
body: string | null
|
||
image_url: string | null
|
||
created_at: string // ISO 8601
|
||
reactions: ReactionSummary[]
|
||
comment_count: number
|
||
tags: Tag[]
|
||
}
|
||
|
||
export type RoundMessagesProps = {
|
||
roundId: string
|
||
currentUserId: string
|
||
roundOwnerUserId: string
|
||
// Økes av round-detail.tsx sitt "/ws/rounds/{id}/live"-signal (samme
|
||
// "noe endret seg, hent på nytt"-mønster som resten av rundens
|
||
// sanntid) -- trigger en ny henting av meldingslisten uten å måtte
|
||
// koble en egen WebSocket til akkurat denne komponenten.
|
||
refreshKey?: number
|
||
}
|
||
|
||
// "image/*" (ikke en eksplisitt liste av MIME-typer) -- mange mobilnett-
|
||
// lesere viser bare galleri, ikke kamera, i filvelgeren når accept lister
|
||
// flere eksplisitte typer. Server-siden validerer uansett strengt mot
|
||
// storage.ALLOWED_INPUT_CONTENT_TYPES, så dette svekker ingen kontroll.
|
||
const ACCEPTED_IMAGE_TYPES = "image/*"
|
||
// Funnet 2026-08-06 (ekte enhet, Android/Chrome, installert som PWA): siden
|
||
// Android 13 bruker Chrome systemets eget bilde-vlger ("Photo Picker") for
|
||
// <input type=file accept="image/*"> UTEN capture-attributt -- den viser
|
||
// KUN galleri, aldri et kamera-alternativ. Løsning: to atskilte knapper/
|
||
// inputs -- én med capture="environment" (rett til kamera), én uten (rett
|
||
// til galleri) -- i stedet for å stole på at nettleseren tilbyr begge i
|
||
// samme velger.
|
||
const MAX_IMAGE_HEIGHT = 300
|
||
// Samme grense som storage.MAX_UPLOAD_BYTES (server-siden) -- sjekket
|
||
// klient-side også for en umiddelbar, presis feilmelding uten en unødvendig
|
||
// tur-retur til serveren for noe som uansett vil bli avvist.
|
||
const MAX_UPLOAD_BYTES = 20 * 1024 * 1024
|
||
|
||
/** Leser {detail:{code,message}} fra et feil-svar, samme kontrakt som
|
||
* resten av API-et (app/errors.py). Faller tilbake til en generisk
|
||
* norsk melding hvis svaret ikke har denne formen (f.eks. et rått 502
|
||
* fra en proxy, ikke fra selve API-et). */
|
||
async function readErrorMessage(res: Response, fallback: string): Promise<string> {
|
||
try {
|
||
const data = await res.json()
|
||
const message = data?.detail?.message
|
||
if (typeof message === "string" && message.length > 0) return message
|
||
} catch {
|
||
// Ikke JSON -- bruk fallback.
|
||
}
|
||
return fallback
|
||
}
|
||
|
||
/** Kort, norsk relativt tidsstempel (f.eks. "nå", "5 min", "2 t", "i går"). */
|
||
function formatRelativeTime(iso: string): { label: string; title: string } {
|
||
const then = new Date(iso)
|
||
const title = then.toLocaleString("nb-NO", {
|
||
day: "2-digit",
|
||
month: "short",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
})
|
||
|
||
const diffMs = Date.now() - then.getTime()
|
||
const diffSec = Math.round(diffMs / 1000)
|
||
const diffMin = Math.round(diffSec / 60)
|
||
const diffHour = Math.round(diffMin / 60)
|
||
const diffDay = Math.round(diffHour / 24)
|
||
|
||
let label: string
|
||
if (diffSec < 45) label = "nå nettopp"
|
||
else if (diffMin < 60) label = `for ${diffMin} min siden`
|
||
else if (diffHour < 24) label = `for ${diffHour} t siden`
|
||
else if (diffDay === 1) label = "i går"
|
||
else if (diffDay < 7) label = `for ${diffDay} dager siden`
|
||
else
|
||
label = then.toLocaleDateString("nb-NO", {
|
||
day: "numeric",
|
||
month: "short",
|
||
})
|
||
|
||
return { label, title }
|
||
}
|
||
|
||
export function RoundMessages({ roundId, currentUserId, roundOwnerUserId, refreshKey }: RoundMessagesProps) {
|
||
const [messages, setMessages] = useState<ApiRoundMessage[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [loadError, setLoadError] = useState<string | null>(null)
|
||
|
||
const [body, setBody] = useState("")
|
||
const [tags, setTags] = useState<Tag[]>([])
|
||
const [imageFile, setImageFile] = useState<File | null>(null)
|
||
const [imagePreview, setImagePreview] = useState<string | null>(null)
|
||
const [posting, setPosting] = useState(false)
|
||
const [postError, setPostError] = useState<string | null>(null)
|
||
const [deletingId, setDeletingId] = useState<string | null>(null)
|
||
|
||
const fileInputRef = useRef<HTMLInputElement | null>(null)
|
||
const cameraInputRef = useRef<HTMLInputElement | null>(null)
|
||
|
||
// Hent meldinger ved mount, og på nytt hver gang refreshKey endres
|
||
// (WS-signal fra round-detail.tsx).
|
||
useEffect(() => {
|
||
const controller = new AbortController()
|
||
async function load() {
|
||
setLoading(true)
|
||
setLoadError(null)
|
||
try {
|
||
const res = await fetch(`/rounds/${roundId}/messages`, {
|
||
credentials: "include",
|
||
signal: controller.signal,
|
||
})
|
||
if (!res.ok) throw new Error(`Status ${res.status}`)
|
||
const data: ApiRoundMessage[] = await res.json()
|
||
setMessages(data)
|
||
} catch (err) {
|
||
if ((err as Error).name === "AbortError") return
|
||
setLoadError("Kunne ikke laste kommentarene. Prøv å laste siden på nytt.")
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
load()
|
||
return () => controller.abort()
|
||
}, [roundId, refreshKey])
|
||
|
||
// Rydd opp objekt-URL-en for bildeforhåndsvisning.
|
||
useEffect(() => {
|
||
return () => {
|
||
if (imagePreview) URL.revokeObjectURL(imagePreview)
|
||
}
|
||
}, [imagePreview])
|
||
|
||
const clearSelectedImage = useCallback(() => {
|
||
setImageFile(null)
|
||
setImagePreview((prev) => {
|
||
if (prev) URL.revokeObjectURL(prev)
|
||
return null
|
||
})
|
||
if (fileInputRef.current) fileInputRef.current.value = ""
|
||
if (cameraInputRef.current) cameraInputRef.current.value = ""
|
||
}, [])
|
||
|
||
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||
const file = e.target.files?.[0]
|
||
if (!file) return
|
||
if (file.size > MAX_UPLOAD_BYTES) {
|
||
setPostError("Bildet er for stort (maks 20 MB). Velg et mindre bilde.")
|
||
e.target.value = ""
|
||
return
|
||
}
|
||
setPostError(null)
|
||
setImageFile(file)
|
||
setImagePreview((prev) => {
|
||
if (prev) URL.revokeObjectURL(prev)
|
||
return URL.createObjectURL(file)
|
||
})
|
||
}
|
||
|
||
const trimmedBody = body.trim()
|
||
const canPost = (trimmedBody.length > 0 || imageFile != null) && !posting
|
||
|
||
async function handlePost(e: React.FormEvent) {
|
||
e.preventDefault()
|
||
if (!canPost) return
|
||
|
||
setPosting(true)
|
||
setPostError(null)
|
||
try {
|
||
const formData = new FormData()
|
||
if (trimmedBody.length > 0) formData.append("body", trimmedBody)
|
||
if (imageFile) formData.append("image", imageFile)
|
||
if (tags.length > 0) formData.append("tags", JSON.stringify(tags))
|
||
|
||
const res = await fetch(`/rounds/${roundId}/messages`, {
|
||
method: "POST",
|
||
credentials: "include",
|
||
body: formData,
|
||
})
|
||
if (res.status !== 201) {
|
||
setPostError(await readErrorMessage(res, "Kunne ikke poste kommentaren. Prøv igjen."))
|
||
return
|
||
}
|
||
|
||
const created: ApiRoundMessage = await res.json()
|
||
// Legg øverst — nyeste først (2026-08-06, samme rekkefølge som
|
||
// backend nå returnerer listen i).
|
||
setMessages((prev) => [created, ...prev])
|
||
setBody("")
|
||
setTags([])
|
||
clearSelectedImage()
|
||
} catch {
|
||
setPostError("Kunne ikke poste kommentaren. Sjekk tilkoblingen og prøv igjen.")
|
||
} finally {
|
||
setPosting(false)
|
||
}
|
||
}
|
||
|
||
async function handleDelete(id: string) {
|
||
setDeletingId(id)
|
||
setPostError(null)
|
||
try {
|
||
const res = await fetch(`/rounds/${roundId}/messages/${id}`, {
|
||
method: "DELETE",
|
||
credentials: "include",
|
||
})
|
||
if (res.status !== 204) throw new Error(`Status ${res.status}`)
|
||
setMessages((prev) => prev.filter((m) => m.id !== id))
|
||
} catch {
|
||
setPostError("Kunne ikke slette kommentaren. Prøv igjen.")
|
||
} finally {
|
||
setDeletingId(null)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<section className="flex flex-col gap-4" aria-label="Kommentarer og bilder fra runden">
|
||
{/* Composer */}
|
||
<form
|
||
onSubmit={handlePost}
|
||
className="flex flex-col gap-3 rounded-2xl border border-border bg-card p-4 sm:p-5"
|
||
>
|
||
<label htmlFor="round-message-body" className="sr-only">
|
||
Skriv en kommentar
|
||
</label>
|
||
<MentionTextarea
|
||
roundId={roundId}
|
||
id="round-message-body"
|
||
value={body}
|
||
tags={tags}
|
||
onChange={(v, t) => {
|
||
setBody(v)
|
||
setTags(t)
|
||
if (postError) setPostError(null)
|
||
}}
|
||
placeholder="Skriv en kommentar... (skriv @ for å tagge noen)"
|
||
rows={3}
|
||
className="w-full resize-y rounded-xl border border-border bg-background px-3 py-2.5 text-base text-foreground outline-none transition-all duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
|
||
/>
|
||
|
||
{/* Valgt bilde – forhåndsvisning */}
|
||
{imagePreview && (
|
||
<div className="flex items-center gap-3 rounded-xl border border-border bg-muted p-2.5">
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={imagePreview || "/placeholder.svg"}
|
||
alt="Forhåndsvisning av valgt bilde"
|
||
className="size-14 shrink-0 rounded-lg object-cover"
|
||
/>
|
||
<span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
|
||
{imageFile?.name}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={clearSelectedImage}
|
||
className="inline-flex h-11 min-w-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-muted-foreground outline-none transition-all duration-200 ease-in-out hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98]"
|
||
>
|
||
<X aria-hidden="true" className="size-4" />
|
||
Fjern
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
{/* To atskilte inputs -- se MAX_IMAGE_HEIGHT-kommentaren over:
|
||
Android sin systembilde-vlger (Photo Picker) viser ALDRI
|
||
et kamera-alternativ når accept="image/*" mangler
|
||
capture, uansett hvilken nettleser. capture="environment"
|
||
her sender rett til kamera i stedet for å stole på at
|
||
velgeren tilbyr det. */}
|
||
<input
|
||
ref={cameraInputRef}
|
||
type="file"
|
||
accept={ACCEPTED_IMAGE_TYPES}
|
||
capture="environment"
|
||
onChange={handleFileChange}
|
||
className="sr-only"
|
||
aria-hidden="true"
|
||
tabIndex={-1}
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => cameraInputRef.current?.click()}
|
||
className="inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 text-base font-medium text-foreground outline-none transition-all duration-200 ease-in-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98]"
|
||
>
|
||
<Camera aria-hidden="true" className="size-5" />
|
||
Ta bilde
|
||
</button>
|
||
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept={ACCEPTED_IMAGE_TYPES}
|
||
onChange={handleFileChange}
|
||
className="sr-only"
|
||
aria-hidden="true"
|
||
tabIndex={-1}
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
className="inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 text-base font-medium text-foreground outline-none transition-all duration-200 ease-in-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98]"
|
||
>
|
||
<ImagePlus aria-hidden="true" className="size-5" />
|
||
Velg fra galleri
|
||
</button>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={!canPost}
|
||
className="inline-flex h-11 min-w-11 items-center justify-center gap-2 rounded-lg bg-primary px-5 text-base font-medium text-primary-foreground outline-none transition-all duration-200 ease-in-out hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50"
|
||
>
|
||
{posting ? (
|
||
<span
|
||
aria-hidden="true"
|
||
className="size-4 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground"
|
||
/>
|
||
) : (
|
||
<Send aria-hidden="true" className="size-5" />
|
||
)}
|
||
{posting ? "Poster..." : "Post"}
|
||
</button>
|
||
</div>
|
||
|
||
{postError && (
|
||
<p role="alert" className="text-sm font-medium text-destructive">
|
||
{postError}
|
||
</p>
|
||
)}
|
||
</form>
|
||
|
||
{/* Meldingsliste */}
|
||
{loading ? (
|
||
<div className="flex justify-center py-12" aria-live="polite" aria-busy="true">
|
||
<span
|
||
aria-hidden="true"
|
||
className="size-8 animate-spin rounded-full border-4 border-primary/20 border-t-primary"
|
||
/>
|
||
<span className="sr-only">Laster kommentarer...</span>
|
||
</div>
|
||
) : loadError ? (
|
||
<p role="alert" className="rounded-2xl border border-border bg-card p-5 text-base text-destructive">
|
||
{loadError}
|
||
</p>
|
||
) : messages.length === 0 ? (
|
||
<p className="rounded-2xl border border-border bg-card p-5 text-base text-muted-foreground">
|
||
Ingen kommentarer ennå — vær den første til å dele et bilde eller en kommentar fra runden.
|
||
</p>
|
||
) : (
|
||
<ul className="divide-y divide-border overflow-hidden rounded-2xl border border-border bg-card">
|
||
{messages.map((m) => {
|
||
const canDelete = m.author_user_id === currentUserId || roundOwnerUserId === currentUserId
|
||
const isDeleting = deletingId === m.id
|
||
const { label, title } = formatRelativeTime(m.created_at)
|
||
return (
|
||
<li key={m.id} className="flex flex-col gap-3 p-4 sm:p-5">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="flex min-w-0 flex-col">
|
||
<span className="truncate text-base font-semibold text-foreground">
|
||
{m.author_display_name}
|
||
</span>
|
||
<time
|
||
dateTime={m.created_at}
|
||
title={title}
|
||
className="text-sm font-medium text-muted-foreground"
|
||
>
|
||
{label}
|
||
</time>
|
||
</div>
|
||
|
||
{canDelete && (
|
||
<button
|
||
type="button"
|
||
onClick={() => handleDelete(m.id)}
|
||
disabled={isDeleting}
|
||
className="inline-flex h-11 min-w-11 shrink-0 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive outline-none transition-all duration-200 ease-in-out hover:bg-destructive/10 focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50"
|
||
>
|
||
{isDeleting ? (
|
||
<span
|
||
aria-hidden="true"
|
||
className="size-4 animate-spin rounded-full border-2 border-destructive/30 border-t-destructive"
|
||
/>
|
||
) : (
|
||
<Trash2 aria-hidden="true" className="size-4" />
|
||
)}
|
||
Slett
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{m.image_url && (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img
|
||
src={m.image_url || "/placeholder.svg"}
|
||
alt={`Bilde delt av ${m.author_display_name}`}
|
||
style={{ maxHeight: MAX_IMAGE_HEIGHT }}
|
||
className="w-full rounded-xl object-cover"
|
||
/>
|
||
)}
|
||
|
||
{m.body && (
|
||
<p className="text-base leading-relaxed text-foreground whitespace-pre-wrap">
|
||
<TaggedText body={m.body} tags={m.tags} />
|
||
</p>
|
||
)}
|
||
|
||
<PostEngagement
|
||
apiBase={`/rounds/${roundId}/messages/${m.id}`}
|
||
roundId={roundId}
|
||
currentUserId={currentUserId || null}
|
||
initialReactions={m.reactions}
|
||
initialCommentCount={m.comment_count}
|
||
canModerate={roundOwnerUserId === currentUserId}
|
||
/>
|
||
</li>
|
||
)
|
||
})}
|
||
</ul>
|
||
)}
|
||
</section>
|
||
)
|
||
}
|
||
|
||
export default RoundMessages
|