# Likes / Votes Toggle

A "like" or "vote" toggles a row in a join table: insert when the user toggles
on, delete when they toggle off. The pattern is the canonical Elements answer
for likes, hearts, upvotes, bookmarks, follows, and similar
one-row-per-user-per-thing reactions. Scope the LiveTable by the parent id so
each item's likes are their own partition; `insert.auth` gates who can add a
row, `delete.auth` restricts removal to the row's owner.

## Migration

Scaffold the migration with `elements create migration`. The `-tables` flag
stubs out the table with the standard primary key, timestamps, and
`touchUpdatedAt` trigger so you don't write that boilerplate by hand.

```bash
elements create migration 'add comment likes' -tables=commentLikes
```

That writes `app/migrations/<timestamp>-add-comment-likes.migration.sql`. Open
it and add the foreign-key columns plus the unique constraint, the parts
specific to this feature.

```sql
-- add comment likes

-- Auto-update updatedAt on row changes.
create or replace function touchUpdatedAt()
returns trigger
language plpgsql
as $$
begin
  new.updatedAt = now();
  return new;
end;
$$;

create table commentLikes (
  id uuid primary key default uuidGenerateV7(),
  createdAt timestamptz not null default now(),
  updatedAt timestamptz not null default now(),
  commentId uuid not null references comments(id) on delete cascade,
  userId uuid not null references users(id) on delete cascade,
  unique (commentId, userId)
);

create trigger commentLikesTouchUpdatedAt
  before update on commentLikes
  for each row execute function touchUpdatedAt();
```

The three lines added on top of the scaffold are `commentId`, `userId`, and
`unique (commentId, userId)`. The unique constraint is the safety net at the
database: even if two clicks race, only one row lands.

## Comment template

```bash
elements create template comment
```

That writes `app/shared/templates/comment/{index.html, style.css}`. Update
`index.html`.

The template declares its own LiveTable at module scope and exports it so parent
pages can scope it per row. The toggle helper sits next to the template since
it's only called from inside it.

`app/shared/templates/comment/index.html`:

```html
import "./style.css";
import { LiveTable, session } from "@elements/app";

export interface Comment {
  id: string;
  postId: string;
  userId: string;
  body: string;
}

export interface CommentLike {
  id: string;
  commentId: string;
  userId: string;
}

export let commentLikes = new LiveTable<CommentLike>({
  scope: "commentId",
  insert: { auth: (item, s) => s.isLoggedIn() },
  delete: { auth: (item, s) => item.userId === s.getOrThrow('userId') },
});

function toggle(commentId: string, likes: LiveTable<CommentLike>) {
  let mine = likes.find(l => l.userId === session.getOrThrow('userId'));

  if (mine) {
    likes.delete(mine);
  } else {
    likes.insert({ commentId, userId: session.getOrThrow('userId') });
  }
}

<CommentItem (c: Comment, likes: LiveTable<CommentLike>)>
  <p>{c.body}</p>
  <button onclick={() => toggle(c.id, likes)}>
    {likes.length} {likes.length === 1 ? "like" : "likes"}
  </button>
</CommentItem>
```

`scope: "commentId"` partitions the live channel per comment, so the count for
one comment only updates templates watching that comment. `insert.auth` requires
a logged-in user; `delete.auth` enforces that users can only un-like their own
rows. `likes.length` is reactive, so the button label updates on every insert
and delete.

## Post page

```bash
elements create page post
```

The page renders a list of comments and scopes the LiveTable per comment, then
ships the scoped instance to `<CommentItem>` via the `likes` attribute. The
scope call happens at template-render time on the server, and the scoped
LiveTable serializes to the browser as a live handle.

`app/pages/post/services.ts`:

```ts
export interface Post {
  id: string;
  title: string;
}
```

`app/pages/post/index.ts`:

```ts
import { sql } from "@elements/app";
import { Comment } from "#app/shared/templates/comment";
import post from "./template";
import { Post } from "./services";

export default function route(req, res) {
  let p = sql<Post>(`select * from posts where id = ${req.params.id}`).firstOrThrow("post not found");
  let comments = sql<Comment>(`select * from comments where postId = ${p.id}`).all();

  return new post({ post: p, comments });
}
```

`firstOrThrow("post not found")` raises `NotFoundError` (a safe 404) when no row
matches, so the client gets a clean response instead of a runtime null deref.

`app/pages/post/template.html`:

```html
import "./style.css";
import CommentItem, {
  commentLikes,
  Comment,
} from "#app/shared/templates/comment";
import { Post } from "./services";

<html class="post" (post: Post, comments: Comment[])>
  <h1>{post.title}</h1>
  <CommentItem e:for={c of comments} c={c} likes={commentLikes.scope(c.id)}/>
</html>
```

## Routes

Register the page in `index.ts`:

```ts
import post from "#app/pages/post";

// ...
app.route("/posts/:id", post);
```

## Notes

- The auto-fill behaviour of scope means `commentId` doesn't need to appear in
  the `insert(...)` payload above. `scope: "commentId"` plus the bound value
  will populate it. The example writes it explicitly for clarity.
- A second click while a delete is in flight is a no-op (the row is already gone
  from local state). Optimistic state guards the user from accidentally
  double-mutating.
- The same shape handles upvote / downvote (store the direction as a
  `value: 1 | -1` column), star ratings (store a `rating` int), or any other
  one-row-per-user-per-thing reaction.