Implement client-side threads/comments for track pages

[Copilot]

Adds thread-based commenting system for track pages: API endpoints, client stores, UI components, and i18n support.

API endpoints (src/routes/api/threads/)

• GET /api/threads?entityType=track&entityId=...&limit=...&cursor=... — Fetch threads for a track with cursor-based pagination on (last_activity_at, id). Returns threads with grouped comments.
• GET /api/threads/recent?limit=...&cursor=... — Global recent activity feed.
• POST /api/threads — Create thread + root comment via create_thread_with_comment RPC. Validates kind (comment|question), body non-empty, entityId UUID format.
• POST /api/threads/[threadId]/comments — Post reply to thread. Supports parentCommentId for nested replies.

All POST routes require auth. All routes return clean JSON errors, never raw DB errors.

Types (src/lib/types/threads.ts)

Thread, Comment, ThreadWithComments, ThreadsResponse, request/response types for create and reply.

Client store (src/lib/stores/threads.ts)

Svelte stores for thread state + fetchThreads, createThread, postReply actions that call the API and refresh state.

UI components

• ThreadList — Renders threads with load-more pagination
• ThreadItem — Thread card: root comment, expandable replies, inline reply form
• ThreadForm — New thread creation with body + kind toggle

Track page integration

Added "Comments" tab to tracks/[track_id] alongside existing Timeline/Versions/Lyrics tabs.

i18n

17 translation keys added to both en.yml and fr.yml under threads.*.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Introduce threads of comments</issue_title>
<issue_description># Acknowledgment

• Do not implement unrelated features
• Always build, check and lint before submitting your work
• If anything is unclear, ask a question
• If anything should be challenged because you think there is a better solution than the one I specified, ask me

Context

You are working on Melogram (SvelteKit + Supabase). We already implemented threads/comments tables in Supabase.

Data model (Postgres/Supabase)

• public.threads: id (uuid), entity_type (text), entity_id (uuid), kind (enum thread_kind: 'comment'|'question'), created_by (uuid), created_at, comment_count (int), last_activity_at (timestamptz)
• public.comments: id (uuid), thread_id (uuid), user_id (uuid), body (text), parent_comment_id (uuid nullable), is_published (boolean), created_at, updated_at

RLS is enabled. SELECT on threads is public. Comments SELECT returns only published comments, except the author can also see their own unpublished comments. INSERT/UPDATE/DELETE are limited to the authenticated author.

RPC Function

There is an RPC function

public.create_thread_with_comment(
  p_entity_type text,
  p_entity_id uuid,
  p_kind thread_kind,
  p_body text,
  p_is_published boolean default true
) returns (thread_id uuid, comment_id uuid)

Goal

Implement the client-side comments feature for TRACK pages using SvelteKit routes/api (server endpoints) to:

1. Fetch recent threads and comments globally (latest activity)
2. Fetch threads for a given track (entity_type='track', entity_id=trackId) with pagination
3. Create a new thread on a track page with its root comment, with the user choosing kind ('comment' or 'question')
4. Post replies to an existing thread (insert into comments with thread_id; parent_comment_id can be null for flat replies, or set to the root comment id if the UI supports nested replies)
5. Return response payloads optimized for UI rendering: thread info + an array of comments (at least root + latest replies), plus counts and timestamps.

Implementation constraints / conventions

• Use SvelteKit server routes under routes/api, e.g.:
  • GET /api/threads?entityType=track&entityId=...&limit=...&cursor=...
  • GET /api/threads/recent?limit=...&cursor=... (global feed)
  • POST /api/threads (creates thread + root comment via RPC create_thread_with_comment)
  • POST /api/threads/[threadId]/comments (adds a reply comment)
• Use the Supabase server client on the server routes (get user session, enforce auth for POST).
• For GET routes: order threads by last_activity_at DESC; include comment_count and last_activity_at.
• For comments retrieval: fetch published comments for the returned thread_ids, ordered by created_at ASC or DESC depending on UI; group them by thread_id in the API response.
• Implement cursor-based pagination using (last_activity_at, id) for stable ordering. If that’s too much, implement offset/limit but prefer cursor.
• Ensure request validation (entityType must be 'track', entityId must be uuid, kind must be 'comment'|'question', body must be non-empty).
• The API should not expose internal DB errors raw; return clean JSON errors.

UI requirements (track page)

• Display a list of threads for the track in the "Chronology" tab, newest activity first.
• Each thread shows root comment snippet, author profile image, author name (if available), created_at.
• Allow creating a new thread: input body + toggle kind (comment vs question).

Please implement

• All SvelteKit routes/api endpoints listed above
• Design with atomic approach: client-side Svelte dedicated components + stores/actions needed for track page comments
• Typescript types for Thread, Comment, API responses
• Minimal UI wiring (fetch on load, create thread, reply, refresh state)
• Use translations keys instead of hardcoded strings</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Introduce threads of comments #83

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
melogram	Ready	Preview, Comment	Feb 19, 2026 11:43pm

[alexisbohns]

I don't understand why but I can't log-in with Google anymore. I tried on the Vercel Preview of the PR and it's not working. I'm never logged when I come back from Google. It's perfectly working on another PR's preview. Is there something that can be broken by this PR on authentication?

[Copilot]

I don't understand why but I can't log-in with Google anymore. I tried on the Vercel Preview of the PR and it's not working. I'm never logged when I come back from Google. It's perfectly working on an...

This PR doesn't modify any authentication-related files. The only files changed are new thread/comment components, API routes, types, stores, translations, and the track page (+page.svelte). None of these touch hooks.server.ts, supabaseClient.ts, auth/callback, +layout.server.ts, or app.d.ts.

The login issue is likely caused by the Vercel preview URL not being included in Google OAuth's authorized redirect URIs. Each preview deployment gets a unique URL, and Google will reject the callback if that URL isn't whitelisted. You may need to add the preview URL pattern (or a wildcard) to your Google OAuth app's authorized redirect URIs and to Supabase's redirect allowlist.

[alexisbohns]

But it would also not work on other Vercel previews. The problem is only on this PR, I can't test it. The wildcard has already been set on Supabase for the redirection.