From b8c88d7a581bd3c9505c146fa935c3ee8b6b2497 Mon Sep 17 00:00:00 2001
From: Zias van Nes <vanneszias@icloud.com>
Date: Thu, 6 Nov 2025 12:38:32 +0100
Subject: [PATCH] feat:comments

added comments feature.
- this makes sure the user has the ability to comment on a certain find.
it includes functionality to the api-sync layer so that multiple
components can stay in sync with the comments state.
- it also added the needed db migrations to the finds
- it adds some ui components needed to create, list and view comments
---
 drizzle/0006_strange_firebird.sql             |  11 +
 drizzle/meta/0006_snapshot.json               | 521 ++++++++++++++++++
 drizzle/meta/_journal.json                    |   7 +
 src/lib/components/Comment.svelte             | 141 +++++
 src/lib/components/CommentForm.svelte         | 117 ++++
 src/lib/components/CommentsList.svelte        | 200 +++++++
 src/lib/components/FindCard.svelte            |  33 +-
 src/lib/server/db/schema.ts                   |  15 +
 src/lib/stores/api-sync.ts                    | 234 ++++++++
 src/routes/+page.svelte                       |  32 +-
 .../api/finds/[findId]/comments/+server.ts    | 119 ++++
 .../api/finds/comments/[commentId]/+server.ts |  46 ++
 12 files changed, 1442 insertions(+), 34 deletions(-)
 create mode 100644 drizzle/0006_strange_firebird.sql
 create mode 100644 drizzle/meta/0006_snapshot.json
 create mode 100644 src/lib/components/Comment.svelte
 create mode 100644 src/lib/components/CommentForm.svelte
 create mode 100644 src/lib/components/CommentsList.svelte
 create mode 100644 src/routes/api/finds/[findId]/comments/+server.ts
 create mode 100644 src/routes/api/finds/comments/[commentId]/+server.ts

diff --git a/drizzle/0006_strange_firebird.sql b/drizzle/0006_strange_firebird.sql
new file mode 100644
index 0000000..9d4dc77
--- /dev/null
+++ b/drizzle/0006_strange_firebird.sql
@@ -0,0 +1,11 @@
+CREATE TABLE "find_comment" (
+	"id" text PRIMARY KEY NOT NULL,
+	"find_id" text NOT NULL,
+	"user_id" text NOT NULL,
+	"content" text NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"updated_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "find_comment" ADD CONSTRAINT "find_comment_find_id_find_id_fk" FOREIGN KEY ("find_id") REFERENCES "public"."find"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "find_comment" ADD CONSTRAINT "find_comment_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;
\ No newline at end of file
diff --git a/drizzle/meta/0006_snapshot.json b/drizzle/meta/0006_snapshot.json
new file mode 100644
index 0000000..bde298c
--- /dev/null
+++ b/drizzle/meta/0006_snapshot.json
@@ -0,0 +1,521 @@
+{
+  "id": "f487a86b-4f25-4d3c-a667-e383c352f3cc",
+  "prevId": "e0be0091-df6b-48be-9d64-8b4108d91651",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.find": {
+      "name": "find",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "latitude": {
+          "name": "latitude",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "longitude": {
+          "name": "longitude",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "location_name": {
+          "name": "location_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "category": {
+          "name": "category",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 1
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "find_user_id_user_id_fk": {
+          "name": "find_user_id_user_id_fk",
+          "tableFrom": "find",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.find_comment": {
+      "name": "find_comment",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "find_id": {
+          "name": "find_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "find_comment_find_id_find_id_fk": {
+          "name": "find_comment_find_id_find_id_fk",
+          "tableFrom": "find_comment",
+          "tableTo": "find",
+          "columnsFrom": [
+            "find_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "find_comment_user_id_user_id_fk": {
+          "name": "find_comment_user_id_user_id_fk",
+          "tableFrom": "find_comment",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.find_like": {
+      "name": "find_like",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "find_id": {
+          "name": "find_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "find_like_find_id_find_id_fk": {
+          "name": "find_like_find_id_find_id_fk",
+          "tableFrom": "find_like",
+          "tableTo": "find",
+          "columnsFrom": [
+            "find_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "find_like_user_id_user_id_fk": {
+          "name": "find_like_user_id_user_id_fk",
+          "tableFrom": "find_like",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.find_media": {
+      "name": "find_media",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "find_id": {
+          "name": "find_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "thumbnail_url": {
+          "name": "thumbnail_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "fallback_url": {
+          "name": "fallback_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "fallback_thumbnail_url": {
+          "name": "fallback_thumbnail_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "order_index": {
+          "name": "order_index",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "find_media_find_id_find_id_fk": {
+          "name": "find_media_find_id_find_id_fk",
+          "tableFrom": "find_media",
+          "tableTo": "find",
+          "columnsFrom": [
+            "find_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.friendship": {
+      "name": "friendship",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "friend_id": {
+          "name": "friend_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "friendship_user_id_user_id_fk": {
+          "name": "friendship_user_id_user_id_fk",
+          "tableFrom": "friendship",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "friendship_friend_id_user_id_fk": {
+          "name": "friendship_friend_id_user_id_fk",
+          "tableFrom": "friendship",
+          "tableTo": "user",
+          "columnsFrom": [
+            "friend_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "age": {
+          "name": "age",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "password_hash": {
+          "name": "password_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "google_id": {
+          "name": "google_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "profile_picture_url": {
+          "name": "profile_picture_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "user_username_unique": {
+          "name": "user_username_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "username"
+          ]
+        },
+        "user_google_id_unique": {
+          "name": "user_google_id_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "google_id"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
index fe58885..183feaf 100644
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -43,6 +43,13 @@
       "when": 1760631798851,
       "tag": "0005_rapid_warpath",
       "breakpoints": true
+    },
+    {
+      "idx": 6,
+      "version": "7",
+      "when": 1762428302491,
+      "tag": "0006_strange_firebird",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/src/lib/components/Comment.svelte b/src/lib/components/Comment.svelte
new file mode 100644
index 0000000..4085d32
--- /dev/null
+++ b/src/lib/components/Comment.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { Button } from '$lib/components/button';
+	import ProfilePicture from '$lib/components/ProfilePicture.svelte';
+	import { Trash2 } from '@lucide/svelte';
+	import type { CommentState } from '$lib/stores/api-sync';
+
+	interface CommentProps {
+		comment: CommentState;
+		showDeleteButton?: boolean;
+		onDelete?: (commentId: string) => void;
+	}
+
+	let { comment, showDeleteButton = false, onDelete }: CommentProps = $props();
+
+	function handleDelete() {
+		if (onDelete) {
+			onDelete(comment.id);
+		}
+	}
+
+	function formatDate(date: Date | string): string {
+		const dateObj = typeof date === 'string' ? new Date(date) : date;
+		const now = new Date();
+		const diff = now.getTime() - dateObj.getTime();
+		const minutes = Math.floor(diff / (1000 * 60));
+		const hours = Math.floor(diff / (1000 * 60 * 60));
+		const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+		if (minutes < 1) {
+			return 'just now';
+		} else if (minutes < 60) {
+			return `${minutes}m`;
+		} else if (hours < 24) {
+			return `${hours}h`;
+		} else if (days < 7) {
+			return `${days}d`;
+		} else {
+			return dateObj.toLocaleDateString();
+		}
+	}
+</script>
+
+<div class="comment">
+	<div class="comment-avatar">
+		<ProfilePicture
+			username={comment.user.username}
+			profilePictureUrl={comment.user.profilePictureUrl}
+			class="avatar-small"
+		/>
+	</div>
+
+	<div class="comment-content">
+		<div class="comment-header">
+			<span class="comment-username">@{comment.user.username}</span>
+			<span class="comment-time">{formatDate(comment.createdAt)}</span>
+		</div>
+
+		<div class="comment-text">
+			{comment.content}
+		</div>
+	</div>
+
+	{#if showDeleteButton}
+		<div class="comment-actions">
+			<Button variant="ghost" size="sm" class="delete-button" onclick={handleDelete}>
+				<Trash2 size={14} />
+			</Button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.comment {
+		display: flex;
+		gap: 0.75rem;
+		padding: 0.75rem 0;
+		border-bottom: 1px solid hsl(var(--border));
+	}
+
+	.comment:last-child {
+		border-bottom: none;
+	}
+
+	.comment-avatar {
+		flex-shrink: 0;
+	}
+
+	:global(.avatar-small) {
+		width: 32px;
+		height: 32px;
+	}
+
+	.comment-content {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.comment-header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.25rem;
+	}
+
+	.comment-username {
+		font-weight: 600;
+		font-size: 0.875rem;
+		color: hsl(var(--foreground));
+	}
+
+	.comment-time {
+		font-size: 0.75rem;
+		color: hsl(var(--muted-foreground));
+	}
+
+	.comment-text {
+		font-size: 0.875rem;
+		line-height: 1.4;
+		color: hsl(var(--foreground));
+		word-wrap: break-word;
+	}
+
+	.comment-actions {
+		flex-shrink: 0;
+		display: flex;
+		align-items: flex-start;
+		padding-top: 0.25rem;
+	}
+
+	:global(.delete-button) {
+		color: hsl(var(--muted-foreground));
+		padding: 0.25rem;
+		height: auto;
+		min-height: 0;
+	}
+
+	:global(.delete-button:hover) {
+		color: hsl(var(--destructive));
+		background: hsl(var(--destructive) / 0.1);
+	}
+</style>
diff --git a/src/lib/components/CommentForm.svelte b/src/lib/components/CommentForm.svelte
new file mode 100644
index 0000000..19a2b7e
--- /dev/null
+++ b/src/lib/components/CommentForm.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { Button } from '$lib/components/button';
+	import { Input } from '$lib/components/input';
+	import { Send } from '@lucide/svelte';
+
+	interface CommentFormProps {
+		onSubmit: (content: string) => void;
+		placeholder?: string;
+		disabled?: boolean;
+	}
+
+	let { onSubmit, placeholder = 'Add a comment...', disabled = false }: CommentFormProps = $props();
+
+	let content = $state('');
+	let isSubmitting = $state(false);
+
+	function handleSubmit(event: Event) {
+		event.preventDefault();
+
+		const trimmedContent = content.trim();
+		if (!trimmedContent || isSubmitting || disabled) {
+			return;
+		}
+
+		if (trimmedContent.length > 500) {
+			return;
+		}
+
+		isSubmitting = true;
+
+		try {
+			onSubmit(trimmedContent);
+			content = '';
+		} catch (error) {
+			console.error('Error submitting comment:', error);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			handleSubmit(event);
+		}
+	}
+
+	const canSubmit = $derived(
+		content.trim().length > 0 && content.length <= 500 && !isSubmitting && !disabled
+	);
+</script>
+
+<form class="comment-form" onsubmit={handleSubmit}>
+	<div class="input-container">
+		<Input
+			bind:value={content}
+			{placeholder}
+			disabled={disabled || isSubmitting}
+			class="comment-input"
+			onkeydown={handleKeyDown}
+		/>
+
+		<Button type="submit" variant="ghost" size="sm" disabled={!canSubmit} class="submit-button">
+			<Send size={16} />
+		</Button>
+	</div>
+
+	{#if content.length > 450}
+		<div class="character-count" class:warning={content.length > 500}>
+			{content.length}/500
+		</div>
+	{/if}
+</form>
+
+<style>
+	.comment-form {
+		padding: 0.75rem 0;
+		border-top: 1px solid hsl(var(--border));
+	}
+
+	.input-container {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+	}
+
+	:global(.comment-input) {
+		flex: 1;
+		min-height: 40px;
+		resize: none;
+	}
+
+	:global(.submit-button) {
+		flex-shrink: 0;
+		color: hsl(var(--muted-foreground));
+		padding: 0.5rem;
+	}
+
+	:global(.submit-button:not(:disabled)) {
+		color: hsl(var(--primary));
+	}
+
+	:global(.submit-button:not(:disabled):hover) {
+		background: hsl(var(--primary) / 0.1);
+	}
+
+	.character-count {
+		font-size: 0.75rem;
+		color: hsl(var(--muted-foreground));
+		text-align: right;
+		margin-top: 0.25rem;
+	}
+
+	.character-count.warning {
+		color: hsl(var(--destructive));
+	}
+</style>
diff --git a/src/lib/components/CommentsList.svelte b/src/lib/components/CommentsList.svelte
new file mode 100644
index 0000000..96ffffa
--- /dev/null
+++ b/src/lib/components/CommentsList.svelte
@@ -0,0 +1,200 @@
+<script lang="ts">
+	import Comment from '$lib/components/Comment.svelte';
+	import CommentForm from '$lib/components/CommentForm.svelte';
+	import { Skeleton } from '$lib/components/skeleton';
+	import { apiSync } from '$lib/stores/api-sync';
+	import { onMount } from 'svelte';
+
+	interface CommentsListProps {
+		findId: string;
+		currentUserId?: string;
+		collapsed?: boolean;
+	}
+
+	let { findId, currentUserId, collapsed = true }: CommentsListProps = $props();
+
+	let isExpanded = $state(!collapsed);
+	let hasLoadedComments = $state(false);
+
+	const commentsState = apiSync.subscribeFindComments(findId);
+
+	onMount(() => {
+		if (isExpanded && !hasLoadedComments) {
+			loadComments();
+		}
+	});
+
+	async function loadComments() {
+		if (hasLoadedComments) return;
+
+		hasLoadedComments = true;
+		await apiSync.loadComments(findId);
+	}
+
+	function toggleExpanded() {
+		isExpanded = !isExpanded;
+		if (isExpanded && !hasLoadedComments) {
+			loadComments();
+		}
+	}
+
+	async function handleAddComment(content: string) {
+		await apiSync.addComment(findId, content);
+	}
+
+	async function handleDeleteComment(commentId: string) {
+		await apiSync.deleteComment(commentId, findId);
+	}
+
+	function canDeleteComment(comment: any): boolean {
+		return Boolean(
+			currentUserId && (comment.user.id === currentUserId || comment.user.id === 'current-user')
+		);
+	}
+</script>
+
+{#snippet loadingSkeleton()}
+	<div class="loading-skeleton">
+		{#each Array(3) as _}
+			<div class="comment-skeleton">
+				<Skeleton class="avatar-skeleton" />
+				<div class="content-skeleton">
+					<Skeleton class="header-skeleton" />
+					<Skeleton class="text-skeleton" />
+				</div>
+			</div>
+		{/each}
+	</div>
+{/snippet}
+
+<div class="comments-list">
+	{#if collapsed}
+		<button class="toggle-button" onclick={toggleExpanded}>
+			{#if isExpanded}
+				Hide comments ({$commentsState.commentCount})
+			{:else if $commentsState.commentCount > 0}
+				View comments ({$commentsState.commentCount})
+			{:else}
+				Add comment
+			{/if}
+		</button>
+	{/if}
+
+	{#if isExpanded}
+		<div class="comments-container">
+			{#if $commentsState.isLoading && !hasLoadedComments}
+				{@render loadingSkeleton()}
+			{:else if $commentsState.error}
+				<div class="error-message">
+					Failed to load comments.
+					<button class="retry-button" onclick={loadComments}> Try again </button>
+				</div>
+			{:else}
+				<div class="comments">
+					{#each $commentsState.comments as comment (comment.id)}
+						<Comment
+							{comment}
+							showDeleteButton={canDeleteComment(comment)}
+							onDelete={handleDeleteComment}
+						/>
+					{:else}
+						<div class="no-comments">No comments yet. Be the first to comment!</div>
+					{/each}
+				</div>
+			{/if}
+
+			<CommentForm onSubmit={handleAddComment} />
+		</div>
+	{/if}
+</div>
+
+<style>
+	.comments-list {
+		width: 100%;
+	}
+
+	.toggle-button {
+		background: none;
+		border: none;
+		color: hsl(var(--muted-foreground));
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		padding: 0.5rem 0;
+		transition: color 0.2s ease;
+	}
+
+	.toggle-button:hover {
+		color: hsl(var(--foreground));
+	}
+
+	.comments-container {
+		border-top: 1px solid hsl(var(--border));
+		margin-top: 0.5rem;
+	}
+
+	.comments {
+		padding: 0.75rem 0;
+	}
+
+	.no-comments {
+		text-align: center;
+		color: hsl(var(--muted-foreground));
+		font-size: 0.875rem;
+		padding: 1.5rem 0;
+		font-style: italic;
+	}
+
+	.error-message {
+		text-align: center;
+		color: hsl(var(--destructive));
+		font-size: 0.875rem;
+		padding: 1rem 0;
+	}
+
+	.retry-button {
+		background: none;
+		border: none;
+		color: hsl(var(--primary));
+		text-decoration: underline;
+		cursor: pointer;
+		font-size: inherit;
+	}
+
+	.retry-button:hover {
+		color: hsl(var(--primary) / 0.8);
+	}
+
+	.loading-skeleton {
+		padding: 0.75rem 0;
+	}
+
+	.comment-skeleton {
+		display: flex;
+		gap: 0.75rem;
+		padding: 0.75rem 0;
+	}
+
+	:global(.avatar-skeleton) {
+		width: 32px;
+		height: 32px;
+		border-radius: 50%;
+	}
+
+	.content-skeleton {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	:global(.header-skeleton) {
+		width: 120px;
+		height: 16px;
+	}
+
+	:global(.text-skeleton) {
+		width: 80%;
+		height: 14px;
+	}
+</style>
diff --git a/src/lib/components/FindCard.svelte b/src/lib/components/FindCard.svelte
index 54793af..6e80801 100644
--- a/src/lib/components/FindCard.svelte
+++ b/src/lib/components/FindCard.svelte
@@ -4,7 +4,8 @@
 	import LikeButton from '$lib/components/LikeButton.svelte';
 	import VideoPlayer from '$lib/components/VideoPlayer.svelte';
 	import ProfilePicture from '$lib/components/ProfilePicture.svelte';
-	import { MoreHorizontal, MessageCircle, Share } from '@lucide/svelte';
+	import CommentsList from '$lib/components/CommentsList.svelte';
+	import { Ellipsis, MessageCircle, Share } from '@lucide/svelte';
 
 	interface FindCardProps {
 		id: string;
@@ -23,6 +24,8 @@
 		}>;
 		likeCount?: number;
 		isLiked?: boolean;
+		commentCount?: number;
+		currentUserId?: string;
 		onExplore?: (id: string) => void;
 	}
 
@@ -36,12 +39,20 @@
 		media,
 		likeCount = 0,
 		isLiked = false,
+		commentCount = 0,
+		currentUserId,
 		onExplore
 	}: FindCardProps = $props();
 
+	let showComments = $state(false);
+
 	function handleExplore() {
 		onExplore?.(id);
 	}
+
+	function toggleComments() {
+		showComments = !showComments;
+	}
 </script>
 
 <div class="find-card">
@@ -73,7 +84,7 @@
 			</div>
 		</div>
 		<Button variant="ghost" size="sm" class="more-button">
-			<MoreHorizontal size={16} />
+			<Ellipsis size={16} />
 		</Button>
 	</div>
 
@@ -120,9 +131,9 @@
 	<div class="post-actions">
 		<div class="action-buttons">
 			<LikeButton findId={id} {isLiked} {likeCount} size="sm" />
-			<Button variant="ghost" size="sm" class="action-button">
+			<Button variant="ghost" size="sm" class="action-button" onclick={toggleComments}>
 				<MessageCircle size={16} />
-				<span>comment</span>
+				<span>{commentCount || 'comment'}</span>
 			</Button>
 			<Button variant="ghost" size="sm" class="action-button">
 				<Share size={16} />
@@ -133,6 +144,13 @@
 			explore
 		</Button>
 	</div>
+
+	<!-- Comments Section -->
+	{#if showComments}
+		<div class="comments-section">
+			<CommentsList findId={id} {currentUserId} collapsed={false} />
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -287,6 +305,13 @@
 		font-size: 0.875rem;
 	}
 
+	/* Comments Section */
+	.comments-section {
+		padding: 0 1rem 1rem 1rem;
+		border-top: 1px solid hsl(var(--border));
+		background: hsl(var(--muted) / 0.3);
+	}
+
 	/* Mobile responsive */
 	@media (max-width: 768px) {
 		.post-actions {
diff --git a/src/lib/server/db/schema.ts b/src/lib/server/db/schema.ts
index 0aafcae..67fa7c3 100644
--- a/src/lib/server/db/schema.ts
+++ b/src/lib/server/db/schema.ts
@@ -75,13 +75,28 @@ export const friendship = pgTable('friendship', {
 	createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' }).defaultNow().notNull()
 });
 
+export const findComment = pgTable('find_comment', {
+	id: text('id').primaryKey(),
+	findId: text('find_id')
+		.notNull()
+		.references(() => find.id, { onDelete: 'cascade' }),
+	userId: text('user_id')
+		.notNull()
+		.references(() => user.id, { onDelete: 'cascade' }),
+	content: text('content').notNull(),
+	createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
+	updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'date' }).defaultNow().notNull()
+});
+
 // Type exports for the new tables
 export type Find = typeof find.$inferSelect;
 export type FindMedia = typeof findMedia.$inferSelect;
 export type FindLike = typeof findLike.$inferSelect;
+export type FindComment = typeof findComment.$inferSelect;
 export type Friendship = typeof friendship.$inferSelect;
 
 export type FindInsert = typeof find.$inferInsert;
 export type FindMediaInsert = typeof findMedia.$inferInsert;
 export type FindLikeInsert = typeof findLike.$inferInsert;
+export type FindCommentInsert = typeof findComment.$inferInsert;
 export type FriendshipInsert = typeof friendship.$inferInsert;
diff --git a/src/lib/stores/api-sync.ts b/src/lib/stores/api-sync.ts
index f84d65d..f875e4a 100644
--- a/src/lib/stores/api-sync.ts
+++ b/src/lib/stores/api-sync.ts
@@ -59,9 +59,30 @@ export interface FindState {
 	}>;
 	isLikedByUser: boolean;
 	likeCount: number;
+	commentCount: number;
 	isFromFriend: boolean;
 }
 
+export interface CommentState {
+	id: string;
+	findId: string;
+	content: string;
+	createdAt: Date;
+	updatedAt: Date;
+	user: {
+		id: string;
+		username: string;
+		profilePictureUrl?: string;
+	};
+}
+
+export interface FindCommentsState {
+	comments: CommentState[];
+	commentCount: number;
+	isLoading: boolean;
+	error: string | null;
+}
+
 // Generate unique operation IDs
 function generateOperationId(): string {
 	return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
@@ -93,6 +114,7 @@ class APISync {
 		this.initializeEntityStore('find');
 		this.initializeEntityStore('user');
 		this.initializeEntityStore('friendship');
+		this.initializeEntityStore('comment');
 
 		// Start processing queue
 		this.startQueueProcessor();
@@ -157,6 +179,33 @@ class APISync {
 		});
 	}
 
+	/**
+	 * Subscribe to find comments state
+	 */
+	subscribeFindComments(findId: string): Readable<FindCommentsState> {
+		const store = this.getEntityStore('comment');
+
+		return derived(store, ($entities) => {
+			const entity = $entities.get(findId);
+			if (!entity || !entity.data) {
+				return {
+					comments: [],
+					commentCount: 0,
+					isLoading: false,
+					error: null
+				};
+			}
+
+			const commentsData = entity.data as CommentState[];
+			return {
+				comments: commentsData,
+				commentCount: commentsData.length,
+				isLoading: entity.isLoading,
+				error: entity.error
+			};
+		});
+	}
+
 	/**
 	 * Check if entity state exists
 	 */
@@ -359,6 +408,23 @@ class APISync {
 					'Content-Type': 'application/json'
 				}
 			});
+		} else if (entityType === 'comment' && op === 'create') {
+			// Handle comment creation
+			response = await fetch(`/api/finds/${entityId}/comments`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(data)
+			});
+		} else if (entityType === 'comment' && op === 'delete') {
+			// Handle comment deletion
+			response = await fetch(`/api/finds/comments/${entityId}`, {
+				method: 'DELETE',
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			});
 		} else {
 			throw new Error(`Unsupported operation: ${entityType}:${op}:${action}`);
 		}
@@ -373,6 +439,10 @@ class APISync {
 		// Update entity state with successful result
 		if (entityType === 'find' && action === 'like') {
 			this.updateFindLikeState(entityId, result.isLiked, result.likeCount);
+		} else if (entityType === 'comment' && op === 'create') {
+			this.addCommentToState(result.data.findId, result.data);
+		} else if (entityType === 'comment' && op === 'delete') {
+			this.removeCommentFromState(entityId, data as { findId: string });
 		}
 	}
 
@@ -467,6 +537,163 @@ class APISync {
 		await this.queueOperation('find', findId, 'update', 'like', { isLiked: newIsLiked });
 	}
 
+	/**
+	 * Add comment to find comments state
+	 */
+	private addCommentToState(findId: string, comment: CommentState): void {
+		const store = this.getEntityStore('comment');
+
+		store.update(($entities) => {
+			const newEntities = new Map($entities);
+			const existing = newEntities.get(findId);
+
+			const comments = existing?.data ? (existing.data as CommentState[]) : [];
+
+			// If this is a real comment from server, remove any temporary comment with the same content
+			let updatedComments = comments;
+			if (!comment.id.startsWith('temp-')) {
+				updatedComments = comments.filter(
+					(c) => !(c.id.startsWith('temp-') && c.content === comment.content)
+				);
+			}
+
+			updatedComments = [comment, ...updatedComments];
+
+			newEntities.set(findId, {
+				data: updatedComments,
+				isLoading: false,
+				error: null,
+				lastUpdated: new Date()
+			});
+
+			return newEntities;
+		});
+
+		// Update find comment count only for temp comments (optimistic updates)
+		if (comment.id.startsWith('temp-')) {
+			this.updateFindCommentCount(findId, 1);
+		}
+	}
+
+	/**
+	 * Remove comment from find comments state
+	 */
+	private removeCommentFromState(commentId: string, data: { findId: string }): void {
+		const store = this.getEntityStore('comment');
+
+		store.update(($entities) => {
+			const newEntities = new Map($entities);
+			const existing = newEntities.get(data.findId);
+
+			if (existing?.data) {
+				const comments = existing.data as CommentState[];
+				const updatedComments = comments.filter((c) => c.id !== commentId);
+
+				newEntities.set(data.findId, {
+					...existing,
+					data: updatedComments,
+					isLoading: false,
+					error: null,
+					lastUpdated: new Date()
+				});
+			}
+
+			return newEntities;
+		});
+
+		// Update find comment count
+		this.updateFindCommentCount(data.findId, -1);
+	}
+
+	/**
+	 * Update find comment count
+	 */
+	private updateFindCommentCount(findId: string, delta: number): void {
+		const store = this.getEntityStore('find');
+
+		store.update(($entities) => {
+			const newEntities = new Map($entities);
+			const existing = newEntities.get(findId);
+
+			if (existing && existing.data) {
+				const findData = existing.data as FindState;
+				newEntities.set(findId, {
+					...existing,
+					data: {
+						...findData,
+						commentCount: Math.max(0, findData.commentCount + delta)
+					},
+					lastUpdated: new Date()
+				});
+			}
+
+			return newEntities;
+		});
+	}
+
+	/**
+	 * Load comments for a find
+	 */
+	async loadComments(findId: string): Promise<void> {
+		if (this.hasEntityState('comment', findId)) {
+			return;
+		}
+
+		this.setEntityLoading('comment', findId, true);
+
+		try {
+			const response = await fetch(`/api/finds/${findId}/comments`);
+			if (!response.ok) {
+				throw new Error(`HTTP ${response.status}`);
+			}
+
+			const result = await response.json();
+			if (result.success) {
+				this.setEntityState('comment', findId, result.data, false);
+			} else {
+				throw new Error(result.error || 'Failed to load comments');
+			}
+		} catch (error) {
+			console.error('Error loading comments:', error);
+			this.setEntityError('comment', findId, 'Failed to load comments');
+		}
+	}
+
+	/**
+	 * Add a comment to a find
+	 */
+	async addComment(findId: string, content: string): Promise<void> {
+		// Optimistic update: add temporary comment
+		const tempComment: CommentState = {
+			id: `temp-${Date.now()}`,
+			findId,
+			content,
+			createdAt: new Date(),
+			updatedAt: new Date(),
+			user: {
+				id: 'current-user',
+				username: 'You',
+				profilePictureUrl: undefined
+			}
+		};
+
+		this.addCommentToState(findId, tempComment);
+
+		// Queue the operation
+		await this.queueOperation('comment', findId, 'create', undefined, { content });
+	}
+
+	/**
+	 * Delete a comment
+	 */
+	async deleteComment(commentId: string, findId: string): Promise<void> {
+		// Optimistic update: remove comment
+		this.removeCommentFromState(commentId, { findId });
+
+		// Queue the operation
+		await this.queueOperation('comment', commentId, 'delete', undefined, { findId });
+	}
+
 	/**
 	 * Initialize find data from server (only if no existing state)
 	 */
@@ -476,6 +703,13 @@ class APISync {
 		}
 	}
 
+	/**
+	 * Initialize comments data for a find
+	 */
+	initializeCommentsData(findId: string, comments: CommentState[]): void {
+		this.initializeEntityState('comment', findId, comments);
+	}
+
 	/**
 	 * Cleanup unused subscriptions (call this when components unmount)
 	 */
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b0b15ab..2fe23a4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,6 +9,7 @@
 	import { Button } from '$lib/components/button';
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
+	import { apiSync, type FindState } from '$lib/stores/api-sync';
 
 	// Server response type
 	interface ServerFind {
@@ -97,36 +98,6 @@
 	// Initialize API sync with server data on mount
 	onMount(async () => {
 		if (browser && data.finds && data.finds.length > 0) {
-			// Dynamically import the API sync to avoid SSR issues
-			const { apiSync } = await import('$lib/stores/api-sync');
-
-			// Define the FindState interface locally
-			interface FindState {
-				id: string;
-				title: string;
-				description?: string;
-				latitude: string;
-				longitude: string;
-				locationName?: string;
-				category?: string;
-				isPublic: boolean;
-				createdAt: Date;
-				userId: string;
-				username: string;
-				profilePictureUrl?: string;
-				media: Array<{
-					id: string;
-					findId: string;
-					type: string;
-					url: string;
-					thumbnailUrl: string | null;
-					orderIndex: number | null;
-				}>;
-				isLikedByUser: boolean;
-				likeCount: number;
-				isFromFriend: boolean;
-			}
-
 			const findStates: FindState[] = data.finds.map((serverFind: ServerFind) => ({
 				id: serverFind.id,
 				title: serverFind.title,
@@ -143,6 +114,7 @@
 				media: serverFind.media,
 				isLikedByUser: Boolean(serverFind.isLikedByUser),
 				likeCount: serverFind.likeCount || 0,
+				commentCount: 0,
 				isFromFriend: Boolean(serverFind.isFromFriend)
 			}));
 
diff --git a/src/routes/api/finds/[findId]/comments/+server.ts b/src/routes/api/finds/[findId]/comments/+server.ts
new file mode 100644
index 0000000..781cb82
--- /dev/null
+++ b/src/routes/api/finds/[findId]/comments/+server.ts
@@ -0,0 +1,119 @@
+import { json } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import { findComment, user } from '$lib/server/db/schema';
+import { eq, desc } from 'drizzle-orm';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ params, locals }) => {
+	const session = locals.session;
+	if (!session) {
+		return json({ success: false, error: 'Unauthorized' }, { status: 401 });
+	}
+
+	const findId = params.findId;
+	if (!findId) {
+		return json({ success: false, error: 'Find ID is required' }, { status: 400 });
+	}
+
+	try {
+		const comments = await db
+			.select({
+				id: findComment.id,
+				findId: findComment.findId,
+				content: findComment.content,
+				createdAt: findComment.createdAt,
+				updatedAt: findComment.updatedAt,
+				user: {
+					id: user.id,
+					username: user.username,
+					profilePictureUrl: user.profilePictureUrl
+				}
+			})
+			.from(findComment)
+			.innerJoin(user, eq(findComment.userId, user.id))
+			.where(eq(findComment.findId, findId))
+			.orderBy(desc(findComment.createdAt));
+
+		return json({
+			success: true,
+			data: comments,
+			count: comments.length
+		});
+	} catch (error) {
+		console.error('Error fetching comments:', error);
+		return json({ success: false, error: 'Failed to fetch comments' }, { status: 500 });
+	}
+};
+
+export const POST: RequestHandler = async ({ params, locals, request }) => {
+	const session = locals.session;
+	if (!session) {
+		return json({ success: false, error: 'Unauthorized' }, { status: 401 });
+	}
+
+	const findId = params.findId;
+	if (!findId) {
+		return json({ success: false, error: 'Find ID is required' }, { status: 400 });
+	}
+
+	try {
+		const body = await request.json();
+		const { content } = body;
+
+		if (!content || typeof content !== 'string' || content.trim().length === 0) {
+			return json({ success: false, error: 'Comment content is required' }, { status: 400 });
+		}
+
+		if (content.length > 500) {
+			return json(
+				{ success: false, error: 'Comment too long (max 500 characters)' },
+				{ status: 400 }
+			);
+		}
+
+		const commentId = crypto.randomUUID();
+		const now = new Date();
+
+		const [newComment] = await db
+			.insert(findComment)
+			.values({
+				id: commentId,
+				findId,
+				userId: session.userId,
+				content: content.trim(),
+				createdAt: now,
+				updatedAt: now
+			})
+			.returning();
+
+		const commentWithUser = await db
+			.select({
+				id: findComment.id,
+				findId: findComment.findId,
+				content: findComment.content,
+				createdAt: findComment.createdAt,
+				updatedAt: findComment.updatedAt,
+				user: {
+					id: user.id,
+					username: user.username,
+					profilePictureUrl: user.profilePictureUrl
+				}
+			})
+			.from(findComment)
+			.innerJoin(user, eq(findComment.userId, user.id))
+			.where(eq(findComment.id, commentId))
+			.limit(1);
+
+		if (commentWithUser.length === 0) {
+			return json({ success: false, error: 'Failed to create comment' }, { status: 500 });
+		}
+
+		return json({
+			success: true,
+			data: commentWithUser[0]
+		});
+	} catch (error) {
+		console.error('Error creating comment:', error);
+		return json({ success: false, error: 'Failed to create comment' }, { status: 500 });
+	}
+};
diff --git a/src/routes/api/finds/comments/[commentId]/+server.ts b/src/routes/api/finds/comments/[commentId]/+server.ts
new file mode 100644
index 0000000..49219fe
--- /dev/null
+++ b/src/routes/api/finds/comments/[commentId]/+server.ts
@@ -0,0 +1,46 @@
+import { json } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import { findComment, user } from '$lib/server/db/schema';
+import { eq, and } from 'drizzle-orm';
+import type { RequestHandler } from './$types';
+
+export const DELETE: RequestHandler = async ({ params, locals }) => {
+	const session = locals.session;
+	if (!session) {
+		return json({ success: false, error: 'Unauthorized' }, { status: 401 });
+	}
+
+	const commentId = params.commentId;
+	if (!commentId) {
+		return json({ success: false, error: 'Comment ID is required' }, { status: 400 });
+	}
+
+	try {
+		const existingComment = await db
+			.select()
+			.from(findComment)
+			.where(eq(findComment.id, commentId))
+			.limit(1);
+
+		if (existingComment.length === 0) {
+			return json({ success: false, error: 'Comment not found' }, { status: 404 });
+		}
+
+		if (existingComment[0].userId !== session.userId) {
+			return json(
+				{ success: false, error: 'Not authorized to delete this comment' },
+				{ status: 403 }
+			);
+		}
+
+		await db.delete(findComment).where(eq(findComment.id, commentId));
+
+		return json({
+			success: true,
+			data: { id: commentId }
+		});
+	} catch (error) {
+		console.error('Error deleting comment:', error);
+		return json({ success: false, error: 'Failed to delete comment' }, { status: 500 });
+	}
+};