chore:linting,formatting,type fixing, ....

Introduce NotificationManager, NotificationPrompt, NotificationSettings,
NotificationSettingsSheet and integrate into the profile panel. Add
server GET/POST endpoints for notification preferences. Add
lucide-svelte dependency and update CSP connect-src to allow
fcm.googleapis.com and android.googleapis.com

.env.example

@@ -38,3 +38,8 @@ R2_BUCKET_NAME=""
 
 # Google Maps API for Places search
 GOOGLE_MAPS_API_KEY="your_google_maps_api_key_here"
+
+# Web Push VAPID Keys for notifications (generate with: node scripts/generate-vapid-keys.js)
+VAPID_PUBLIC_KEY=""
+VAPID_PRIVATE_KEY=""
+VAPID_SUBJECT="mailto:your-email@example.com"

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;

drizzle/0007_grey_dark_beast.sql

@@ -0,0 +1,37 @@
+CREATE TABLE "notification" (
+	"id" text PRIMARY KEY NOT NULL,
+	"user_id" text NOT NULL,
+	"type" text NOT NULL,
+	"title" text NOT NULL,
+	"message" text NOT NULL,
+	"data" jsonb,
+	"is_read" boolean DEFAULT false,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "notification_preferences" (
+	"user_id" text PRIMARY KEY NOT NULL,
+	"friend_requests" boolean DEFAULT true,
+	"friend_accepted" boolean DEFAULT true,
+	"find_liked" boolean DEFAULT true,
+	"find_commented" boolean DEFAULT true,
+	"push_enabled" boolean DEFAULT true,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"updated_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "notification_subscription" (
+	"id" text PRIMARY KEY NOT NULL,
+	"user_id" text NOT NULL,
+	"endpoint" text NOT NULL,
+	"p256dh_key" text NOT NULL,
+	"auth_key" text NOT NULL,
+	"user_agent" text,
+	"is_active" boolean DEFAULT true,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"updated_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "notification" ADD CONSTRAINT "notification_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "notification_preferences" ADD CONSTRAINT "notification_preferences_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "notification_subscription" ADD CONSTRAINT "notification_subscription_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;

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": {}
+  }
+}

drizzle/meta/0007_snapshot.json

@@ -0,0 +1,764 @@
+{
+  "id": "1dbab94c-004e-4d34-b171-408bb1d36c91",
+  "prevId": "f487a86b-4f25-4d3c-a667-e383c352f3cc",
+  "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.notification": {
+      "name": "notification",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "message": {
+          "name": "message",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "data": {
+          "name": "data",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "is_read": {
+          "name": "is_read",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "notification_user_id_user_id_fk": {
+          "name": "notification_user_id_user_id_fk",
+          "tableFrom": "notification",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.notification_preferences": {
+      "name": "notification_preferences",
+      "schema": "",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "friend_requests": {
+          "name": "friend_requests",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": true
+        },
+        "friend_accepted": {
+          "name": "friend_accepted",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": true
+        },
+        "find_liked": {
+          "name": "find_liked",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": true
+        },
+        "find_commented": {
+          "name": "find_commented",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": true
+        },
+        "push_enabled": {
+          "name": "push_enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 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": {
+        "notification_preferences_user_id_user_id_fk": {
+          "name": "notification_preferences_user_id_user_id_fk",
+          "tableFrom": "notification_preferences",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.notification_subscription": {
+      "name": "notification_subscription",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "endpoint": {
+          "name": "endpoint",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "p256dh_key": {
+          "name": "p256dh_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "auth_key": {
+          "name": "auth_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "is_active": {
+          "name": "is_active",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 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": {
+        "notification_subscription_user_id_user_id_fk": {
+          "name": "notification_subscription_user_id_user_id_fk",
+          "tableFrom": "notification_subscription",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_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": {}
+  }
+}

drizzle/meta/_journal.json

@@ -43,6 +43,20 @@
       "when": 1760631798851,
       "tag": "0005_rapid_warpath",
       "breakpoints": true
+    },
+    {
+      "idx": 6,
+      "version": "7",
+      "when": 1762428302491,
+      "tag": "0006_strange_firebird",
+      "breakpoints": true
+    },
+    {
+      "idx": 7,
+      "version": "7",
+      "when": 1762522687342,
+      "tag": "0007_grey_dark_beast",
+      "breakpoints": true
     }
   ]
 }

eslint.config.js

@@ -25,7 +25,17 @@ export default defineConfig(
 		rules: {
 			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
 			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
-			'no-undef': 'off'
+			'no-undef': 'off',
+			// Disable no-navigation-without-resolve as we're using resolveRoute from $app/paths
+			'svelte/no-navigation-without-resolve': 'off',
+			// Allow unused vars that start with underscore
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					argsIgnorePattern: '^_',
+					varsIgnorePattern: '^_'
+				}
+			]
 		}
 	},
 	{

logs/20251014-finds-implementation-log.md

@@ -1,241 +0,0 @@
-# Serengo Finds Feature Implementation Log
-
-## Project Overview
-
-Serengo is a location-based social discovery platform where users can save, share, and discover memorable places with media, reviews, and precise location data.
-
-## Current Status: Phase 2A, 2C & 2D Complete + UI Integration ✅
-
-### What Serengo Currently Has:
-
-- Complete finds creation with photo uploads and location data
-- Interactive map with find markers and detailed previews
-- Responsive design with map/list view toggle
-- **NEW**: Modern WebP image processing with JPEG fallbacks
-- **NEW**: Full video support with custom VideoPlayer component
-- **NEW**: Like/unlike system with optimistic UI updates
-- **NEW**: Complete friends & privacy system with friend requests and filtered feeds
-- R2 storage integration with enhanced media processing
-- Full database schema with proper relationships and social features
-- Type-safe API endpoints and error handling
-- Mobile-optimized UI with floating action button
-
-### Production Ready Features:
-
-- Create/view finds with photos, descriptions, and categories
-- Location-based filtering and discovery
-- Media carousel with navigation (supports images and videos)
-- **NEW**: Video playback with custom controls and fullscreen support
-- **NEW**: Like/unlike finds with real-time count updates
-- **NEW**: Animated like buttons with heart animations
-- **NEW**: Friend request system with send/accept/decline functionality
-- **NEW**: Friends management page with user search and relationship status
-- **NEW**: Privacy-aware find feeds with friend-specific visibility filters
-- Share functionality with clipboard copy
-- Real-time map markers with click-to-preview
-- Grid layout for find browsing
-
----
-
-## Phase 2 Implementation Plan (Updated October 14, 2025)
-
-### Technical Requirements & Standards:
-
-- **Media Formats**: Use modern WebP for images, WebM/AV1 for videos
-- **UI Components**: Leverage existing SHADCN components for consistency
-- **Code Quality**: Follow Svelte 5 best practices with clean, reusable components
-- **POI Search**: Integrate Google Maps Places API for location search
-- **Type Safety**: Maintain strict TypeScript throughout
-
-### Phase 2A: Modern Media Support ✅ COMPLETE
-
-**Goal**: Upgrade to modern file formats and video support
-
-**Completed Tasks:**
-
-- [x] Update media processor to output WebP images (with JPEG fallback)
-- [x] Implement MP4 video processing with thumbnail generation
-- [x] Create reusable VideoPlayer component using SHADCN
-- [x] Enhanced database schema with fallback URL support
-- [x] Optimize compression settings for web delivery
-
-**Implementation Details:**
-
-- Updated `media-processor.ts` to generate both WebP and JPEG versions
-- Enhanced `findMedia` table with `fallbackUrl` and `fallbackThumbnailUrl` fields
-- Created `VideoPlayer.svelte` with custom controls, progress bar, and fullscreen support
-- Added video placeholder SVG for consistent UI
-- Maintained backward compatibility with existing media
-
-**Actual Effort**: ~12 hours
-
-### Phase 2B: Enhanced Location & POI Search (Priority: High)
-
-**Goal**: Google Maps integration for better location discovery
-
-**Tasks:**
-
-- [ ] Integrate Google Maps Places API for POI search
-- [ ] Create location search component with autocomplete
-- [ ] Add "Search nearby" functionality in CreateFindModal
-- [ ] Implement reverse geocoding for address display
-- [ ] Add place details (hours, ratings, etc.) from Google Places
-
-**Estimated Effort**: 12-15 hours
-
-### Phase 2C: Social Interactions ✅ COMPLETE
-
-**Goal**: Like system and user engagement
-
-**Completed Tasks:**
-
-- [x] Implement like/unlike API using existing findLike table
-- [x] Create reusable LikeButton component with animations
-- [x] Add like counts and user's liked status to find queries
-- [x] Add optimistic UI updates for instant feedback
-- [x] **COMPLETED**: Full UI integration into FindCard and FindPreview components
-- [x] **COMPLETED**: Updated all data interfaces to support like information
-- [x] **COMPLETED**: Enhanced media carousel with VideoPlayer component integration
-
-**Implementation Details:**
-
-- Created `/api/finds/[findId]/like` endpoints for POST (like) and DELETE (unlike)
-- Built `LikeButton.svelte` with optimistic UI updates and heart animations
-- Enhanced find queries to include like counts and user's liked status via SQL aggregation
-- Integrated LikeButton into both FindCard (list view) and FindPreview (modal view)
-- Updated VideoPlayer usage throughout the application for consistent video playback
-- Maintained type safety across all interfaces and data flows
-
-**Future Task:**
-
-- [ ] Build "My Liked Finds" collection page (moved to Phase 2G)
-
-**Actual Effort**: ~15 hours (including UI integration)
-
-### Phase 2D: Friends & Privacy System ✅ COMPLETE
-
-**Goal**: Social connections and privacy controls
-
-**Completed Tasks:**
-
-- [x] Build friend request system (send/accept/decline)
-- [x] Create Friends management page using SHADCN components
-- [x] Implement friend search with user suggestions
-- [x] Update find privacy logic to respect friendships
-- [x] Add friend-specific find visibility filters
-
-**Implementation Details:**
-
-- Created comprehensive friends API with `/api/friends` and `/api/friends/[friendshipId]` endpoints
-- Built `/api/users` endpoint for user search with friendship status integration
-- Developed complete Friends management page (`/routes/friends/`) with tabs for:
-  - Friends list with remove functionality
-  - Friend requests (received/sent) with accept/decline actions
-  - User search with friend request sending capabilities
-- Enhanced finds API to support friend-based privacy filtering with `includeFriends` parameter
-- Created `FindsFilter.svelte` component with filter options:
-  - All Finds (public, friends, and user's finds)
-  - Public Only (publicly visible finds)
-  - Friends Only (finds from friends)
-  - My Finds (user's own finds)
-- Updated main page with integrated filter dropdown and real-time filtering
-- Enhanced ProfilePanel with Friends navigation link
-- Maintained type safety and error handling throughout all implementations
-
-**Technical Architecture:**
-
-- Leveraged existing `friendship` table schema without modifications
-- Used SHADCN components (Cards, Badges, Avatars, Buttons, Dropdowns) for consistent UI
-- Implemented proper authentication and authorization on all endpoints
-- Added comprehensive error handling with descriptive user feedback
-- Followed Svelte 5 patterns with `$state`, `$derived`, and `$props` runes
-
-**Actual Effort**: ~22 hours
-
-### Phase 2E: Advanced Filtering & Discovery (Priority: Medium)
-
-**Goal**: Better find discovery and organization
-
-**Tasks:**
-
-- [ ] Create FilterPanel component with category/distance/date filters
-- [ ] Implement text search through find titles/descriptions
-- [ ] Add sort options (recent, popular, nearest)
-- [ ] Build infinite scroll for find feeds
-- [ ] Add "Similar finds nearby" recommendations
-
-**Estimated Effort**: 15-18 hours
-
-### Phase 2F: Enhanced Sharing & Individual Pages (Priority: Medium)
-
-**Goal**: Better sharing and find discoverability
-
-**Tasks:**
-
-- [ ] Create individual find detail pages (`/finds/[id]`)
-- [ ] Add social media sharing with OpenGraph meta tags
-- [ ] Implement "Get Directions" integration with map apps
-- [ ] Build shareable find links with previews
-- [ ] Add "Copy link" functionality
-
-**Estimated Effort**: 12-15 hours
-
----
-
-## Development Standards
-
-### Component Architecture:
-
-- Use composition pattern with reusable SHADCN components
-- Implement proper TypeScript interfaces for all props
-- Follow Svelte 5 runes pattern ($props, $derived, $effect)
-- Create clean separation between UI and business logic
-
-### Code Quality:
-
-- Maintain existing formatting (tabs, single quotes, 100 char width)
-- Use descriptive variable names and function signatures
-- Implement proper error boundaries and loading states
-- Add accessibility attributes (ARIA labels, keyboard navigation)
-
-### Performance:
-
-- Lazy load media content and heavy components
-- Implement proper caching strategies for API calls
-- Use virtual scrolling for long lists when needed
-- Optimize images/videos for web delivery
-
-**Total Phase 2 Estimated Effort**: 82-105 hours
-**Total Phase 2 Completed Effort**: ~49 hours (Phases 2A: 12h + 2C: 15h + 2D: 22h)
-**Expected Timeline**: 8-10 weeks (part-time development)
-
-## Next Steps:
-
-1. ✅ **Completed**: Phase 2A (Modern Media Support) for immediate impact
-2. **Next Priority**: Phase 2B (Google Maps POI) for better UX
-3. ✅ **Completed**: Phase 2C (Social Interactions) for user engagement
-4. ✅ **Completed**: Phase 2D (Friends & Privacy System) for social connections
-5. **Continue with**: Phase 2E (Advanced Filtering) or 2F (Enhanced Sharing) based on user feedback
-
-## Production Ready Features Summary:
-
-**Core Functionality:**
-
-- Create/view finds with photos, videos, descriptions, and categories
-- Location-based filtering and discovery with interactive map
-- Media carousel with navigation (WebP images and MP4 videos)
-- Real-time map markers with click-to-preview functionality
-
-**Social Features:**
-
-- Like/unlike finds with real-time count updates and animations
-- Friend request system (send, accept, decline, remove)
-- Friends management page with user search capabilities
-- Privacy-aware find feeds with customizable visibility filters
-
-**Technical Excellence:**
-
-- Modern media formats (WebP, MP4) with fallback support
-- Type-safe API endpoints with comprehensive error handling
-- Mobile-optimized responsive design
-- Performance-optimized with proper caching and lazy loading

logs/logboek.md

@@ -2,6 +2,65 @@
 
 ## Oktober 2025
 
+### 4 November 2025 - 1 uren
+
+**Werk uitgevoerd:**
+
+- **UI Consistency & Media Layout Improvements**
+- ProfilePicture component geïmplementeerd ter vervanging van Avatar componenten
+- Media layout en sizing verbeteringen voor betere responsive design
+- Mobile sheet optimalisaties voor verbeterde gebruikerservaring
+- Component refactoring voor consistentere UI across applicatie
+- Loading states en fallback styling geconsolideerd
+
+**Commits:**
+
+- d3adac8 - add:ProfilePicture component and replace Avatar
+- 9800be0 - fix:Adjust media layout, sizing, and mobile sheet
+
+**Details:**
+
+- Nieuwe ProfilePicture component met geïntegreerde avatar initials en fallback styling
+- Avatar componenten vervangen door ProfilePicture voor consistentie
+- Media container rendering geoptimaliseerd (alleen tonen bij aanwezige media)
+- Max-height van 600px toegevoegd voor images en videos met height:auto
+- Object-fit: contain toegepast voor media images in preview
+- Mobile sheet height gereduceerd van 80vh naar 50vh voor betere usability
+- Loading states UI geconsolideerd in ProfilePicture component
+- Component library verder uitgebreid met herbruikbare UI elementen
+
+---
+
+### 27-29 Oktober 2025 - 10 uren
+
+**Werk uitgevoerd:**
+
+- **Phase 3: Google Places Integration & Sync Service**
+- Complete implementatie van sync-service voor API data synchronisatie
+- Google Maps Places API integratie voor POI zoekfunctionaliteit
+- Location tracking optimalisaties met continuous watching
+- CSP (Content Security Policy) fixes voor verbeterde security
+- Child subscription fixes voor data consistency
+
+**Commits:**
+
+- 4c973c4 - fix:some csp issues
+- d7fe909 - fix:new child subscription
+- 6620cc6 - feat:implement a sync-service
+- 3b3ebc2 - fix:continuously watch location
+- fef7c16 - feat:use GMaps places api for searching poi's
+
+**Details:**
+
+- Complete sync-service architectuur voor real-time data synchronisatie
+- Google Places API integratie voor Point of Interest zoekfunctionaliteit
+- Verbeterde location tracking met continuous watching voor nauwkeurigere positiebepaling
+- Security verbeteringen door CSP issues op te lossen
+- Data consistency verbeteringen met child subscription fixes
+- Enhanced POI search capabilities met Google Maps integration
+
+---
+
 ### 21 Oktober 2025 (Maandag) - 4 uren
 
 **Werk uitgevoerd:**
@@ -322,9 +381,9 @@
 
 ## Totaal Overzicht
 
-**Totale geschatte uren:** 67 uren
-**Werkdagen:** 12 dagen
-**Gemiddelde uren per dag:** 5.6 uur
+**Totale geschatte uren:** 80 uren
+**Werkdagen:** 14 dagen
+**Gemiddelde uren per dag:** 5.8 uur
 
 ### Project Milestones:
 
@@ -340,6 +399,8 @@
 10. **16 Okt**: Friends & Privacy System implementatie
 11. **20 Okt**: Search logic improvements
 12. **21 Okt**: UI refinement en bug fixes
+13. **27-29 Okt**: Google Places Integration & Sync Service
+14. **4 Nov**: UI Consistency & Media Layout Improvements
 
 ### Hoofdfunctionaliteiten geïmplementeerd:
 
@@ -366,3 +427,7 @@
 - [x] Privacy-bewuste find filtering met vriendenspecifieke zichtbaarheid
 - [x] Friends management pagina met gebruikerszoekfunctionaliteit
 - [x] Real-time find filtering op basis van privacy instellingen
+- [x] Google Maps Places API integratie voor POI zoekfunctionaliteit
+- [x] Sync-service voor API data synchronisatie
+- [x] Continuous location watching voor nauwkeurige tracking
+- [x] CSP security verbeteringen

package.json

@@ -59,9 +59,12 @@
 		"@node-rs/argon2": "^2.0.2",
 		"@sveltejs/adapter-vercel": "^5.10.2",
 		"arctic": "^3.7.0",
+		"lucide-svelte": "^0.553.0",
+		"nanoid": "^5.1.6",
 		"postgres": "^3.4.5",
 		"sharp": "^0.34.4",
-		"svelte-maplibre": "^1.2.1"
+		"svelte-maplibre": "^1.2.1",
+		"web-push": "^3.6.7"
 	},
 	"pnpm": {
 		"onlyBuiltDependencies": [

scripts/generate-vapid-keys.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+/**
+ * Generate VAPID keys for Web Push notifications
+ * Run this script once to generate your VAPID keys and add them to your .env file
+ */
+
+import webpush from 'web-push';
+
+console.log('Generating VAPID keys for Web Push notifications...\n');
+
+const vapidKeys = webpush.generateVAPIDKeys();
+
+console.log('VAPID Keys Generated Successfully!');
+console.log('Add these to your .env file:\n');
+console.log(`VAPID_PUBLIC_KEY="${vapidKeys.publicKey}"`);
+console.log(`VAPID_PRIVATE_KEY="${vapidKeys.privateKey}"`);
+console.log('VAPID_SUBJECT="mailto:your-email@example.com"');
+console.log('\nReplace "your-email@example.com" with your actual email address.');
+console.log('\nIMPORTANT: Keep your private key secret and never commit it to version control!');

src/hooks.server.ts

@@ -50,9 +50,9 @@ export const handle: Handle = async ({ event, resolve }) => {
 			"worker-src 'self' blob:; " +
 			"style-src 'self' 'unsafe-inline' fonts.googleapis.com; " +
 			"font-src 'self' fonts.gstatic.com; " +
-			"img-src 'self' data: blob: *.openstreetmap.org *.tile.openstreetmap.org *.r2.cloudflarestorage.com; " +
-			"media-src 'self' *.r2.cloudflarestorage.com; " +
-			"connect-src 'self' *.openstreetmap.org; " +
+			"img-src 'self' data: blob: *.openstreetmap.org *.tile.openstreetmap.org *.r2.cloudflarestorage.com *.r2.dev; " +
+			"media-src 'self' *.r2.cloudflarestorage.com *.r2.dev; " +
+			"connect-src 'self' *.openstreetmap.org https://fcm.googleapis.com https://android.googleapis.com; " +
 			"frame-ancestors 'none'; " +
 			"base-uri 'self'; " +
 			"form-action 'self';"

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>

src/lib/components/CommentForm.svelte

@@ -0,0 +1,119 @@
+<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 1rem;
+		border-top: 1px solid hsl(var(--border));
+		background: hsl(var(--background));
+		flex-shrink: 0;
+	}
+
+	.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>

src/lib/components/CommentsList.svelte

@@ -0,0 +1,243 @@
+<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;
+		maxComments?: number;
+		showCommentForm?: boolean;
+		isScrollable?: boolean;
+	}
+
+	let {
+		findId,
+		currentUserId,
+		collapsed = true,
+		maxComments,
+		showCommentForm = true,
+		isScrollable = false
+	}: 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: { user: { id: string } }): boolean {
+		return Boolean(
+			currentUserId && (comment.user.id === currentUserId || comment.user.id === 'current-user')
+		);
+	}
+</script>
+
+{#snippet loadingSkeleton()}
+	<div class="loading-skeleton">
+		{#each Array(3) as _, index (index)}
+			<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" class:scrollable={isScrollable}>
+					{#each maxComments ? $commentsState.comments.slice(0, maxComments) : $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}
+					{#if maxComments && $commentsState.comments.length > maxComments}
+						<div class="see-more">
+							<div class="see-more-text">
+								+{$commentsState.comments.length - maxComments} more comments
+							</div>
+						</div>
+					{/if}
+				</div>
+			{/if}
+
+			{#if showCommentForm}
+				<CommentForm onSubmit={handleAddComment} />
+			{/if}
+		</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;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 0;
+	}
+
+	.comments {
+		padding: 0.75rem 0;
+	}
+
+	.comments.scrollable {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0.75rem 1rem;
+		min-height: 0;
+	}
+
+	.see-more {
+		padding: 0.5rem 0;
+		border-top: 1px solid hsl(var(--border));
+		margin-top: 0.5rem;
+	}
+
+	.see-more-text {
+		text-align: center;
+		color: hsl(var(--muted-foreground));
+		font-size: 0.75rem;
+		font-style: italic;
+	}
+
+	.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>

src/lib/components/FindCard.svelte

@@ -3,8 +3,9 @@
 	import { Badge } from '$lib/components/badge';
 	import LikeButton from '$lib/components/LikeButton.svelte';
 	import VideoPlayer from '$lib/components/VideoPlayer.svelte';
-	import { Avatar, AvatarFallback, AvatarImage } from '$lib/components/avatar';
-	import { MoreHorizontal, MessageCircle, Share } from '@lucide/svelte';
+	import ProfilePicture from '$lib/components/ProfilePicture.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,15 +39,19 @@
 		media,
 		likeCount = 0,
 		isLiked = false,
+		commentCount = 0,
+		currentUserId,
 		onExplore
 	}: FindCardProps = $props();
 
+	let showComments = $state(false);
+
 	function handleExplore() {
 		onExplore?.(id);
 	}
 
-	function getUserInitials(username: string): string {
-		return username.slice(0, 2).toUpperCase();
+	function toggleComments() {
+		showComments = !showComments;
 	}
 </script>
 
@@ -52,14 +59,11 @@
 	<!-- Post Header -->
 	<div class="post-header">
 		<div class="user-info">
-			<Avatar class="avatar">
-				{#if user.profilePictureUrl}
-					<AvatarImage src={user.profilePictureUrl} alt={user.username} />
-				{/if}
-				<AvatarFallback class="avatar-fallback">
-					{getUserInitials(user.username)}
-				</AvatarFallback>
-			</Avatar>
+			<ProfilePicture
+				username={user.username}
+				profilePictureUrl={user.profilePictureUrl}
+				class="avatar"
+			/>
 			<div class="user-details">
 				<div class="username">@{user.username}</div>
 				{#if locationName}
@@ -80,7 +84,7 @@
 			</div>
 		</div>
 		<Button variant="ghost" size="sm" class="more-button">
-			<MoreHorizontal size={16} />
+			<Ellipsis size={16} />
 		</Button>
 	</div>
 
@@ -101,8 +105,8 @@
 	</div>
 
 	<!-- Media -->
-	<div class="post-media">
 	{#if media && media.length > 0}
+		<div class="post-media">
 			{#if media[0].type === 'photo'}
 				<img
 					src={media[0].thumbnailUrl || media[0].url}
@@ -120,29 +124,16 @@
 					class="media-video"
 				/>
 			{/if}
-		{:else}
-			<div class="no-media">
-				<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
-					<path
-						d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-					<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
-				</svg>
 		</div>
 	{/if}
-	</div>
 
 	<!-- Post Actions -->
 	<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} />
@@ -153,6 +144,19 @@
 			explore
 		</Button>
 	</div>
+
+	<!-- Comments Section -->
+	{#if showComments}
+		<div class="comments-section">
+			<CommentsList
+				findId={id}
+				{currentUserId}
+				collapsed={false}
+				maxComments={5}
+				showCommentForm={true}
+			/>
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -258,33 +262,23 @@
 	/* Media */
 	.post-media {
 		width: 100%;
-		aspect-ratio: 16/10;
+		max-height: 600px;
 		overflow: hidden;
 		background: hsl(var(--muted));
-		display: flex;
-		align-items: center;
-		justify-content: center;
 	}
 
 	.media-image {
 		width: 100%;
-		height: 100%;
+		height: auto;
+		max-height: 600px;
 		object-fit: cover;
+		display: block;
 	}
 
 	:global(.media-video) {
 		width: 100%;
-		height: 100%;
-	}
-
-	.no-media {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: hsl(var(--muted-foreground));
-		opacity: 0.5;
+		height: auto;
+		max-height: 600px;
 	}
 
 	/* Post Actions */
@@ -317,6 +311,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 {

src/lib/components/FindPreview.svelte

@@ -2,7 +2,8 @@
 	import { Sheet, SheetContent, SheetHeader, SheetTitle } from '$lib/components/sheet';
 	import LikeButton from '$lib/components/LikeButton.svelte';
 	import VideoPlayer from '$lib/components/VideoPlayer.svelte';
-	import { Avatar, AvatarFallback, AvatarImage } from '$lib/components/avatar';
+	import ProfilePicture from '$lib/components/ProfilePicture.svelte';
+	import CommentsList from '$lib/components/CommentsList.svelte';
 
 	interface Find {
 		id: string;
@@ -30,9 +31,10 @@
 	interface Props {
 		find: Find | null;
 		onClose: () => void;
+		currentUserId?: string;
 	}
 
-	let { find, onClose }: Props = $props();
+	let { find, onClose, currentUserId }: Props = $props();
 
 	let showModal = $state(true);
 	let currentMediaIndex = $state(0);
@@ -112,14 +114,11 @@
 		<SheetContent side={isMobile ? 'bottom' : 'right'} class="sheet-content">
 			<SheetHeader class="sheet-header">
 				<div class="user-section">
-					<Avatar class="user-avatar">
-						{#if find.user.profilePictureUrl}
-							<AvatarImage src={find.user.profilePictureUrl} alt={find.user.username} />
-						{/if}
-						<AvatarFallback class="avatar-fallback">
-							{find.user.username.slice(0, 2).toUpperCase()}
-						</AvatarFallback>
-					</Avatar>
+					<ProfilePicture
+						username={find.user.username}
+						profilePictureUrl={find.user.profilePictureUrl}
+						class="user-avatar"
+					/>
 					<div class="user-info">
 						<SheetTitle class="find-title">{find.title}</SheetTitle>
 						<div class="find-meta">
@@ -254,6 +253,15 @@
 						</button>
 					</div>
 				</div>
+
+				<div class="comments-section">
+					<CommentsList
+						findId={find.id}
+						{currentUserId}
+						isScrollable={true}
+						showCommentForm={true}
+					/>
+				</div>
 			</div>
 		</SheetContent>
 	</Sheet>
@@ -278,7 +286,7 @@
 	/* Mobile styles (bottom sheet) */
 	@media (max-width: 767px) {
 		:global(.sheet-content) {
-			height: 80vh !important;
+			height: 50vh !important;
 			border-radius: 16px 16px 0 0 !important;
 		}
 	}
@@ -414,7 +422,7 @@
 	.media-image {
 		width: 100%;
 		height: 100%;
-		object-fit: cover;
+		object-fit: contain;
 	}
 
 	:global(.media-video) {
@@ -545,6 +553,30 @@
 		background: hsl(var(--secondary) / 0.8);
 	}
 
+	.comments-section {
+		flex: 1;
+		min-height: 0;
+		border-top: 1px solid hsl(var(--border));
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* Desktop comments section */
+	@media (min-width: 768px) {
+		.comments-section {
+			height: calc(100vh - 400px);
+			min-height: 200px;
+		}
+	}
+
+	/* Mobile comments section */
+	@media (max-width: 767px) {
+		.comments-section {
+			height: calc(80vh - 350px);
+			min-height: 150px;
+		}
+	}
+
 	/* Mobile specific adjustments */
 	@media (max-width: 640px) {
 		:global(.sheet-header) {
@@ -576,5 +608,9 @@
 		.action-button {
 			width: 100%;
 		}
+
+		.comments-section {
+			height: calc(80vh - 380px);
+		}
 	}
 </style>

src/lib/components/Header.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { ProfilePanel } from '$lib';
+	import { resolveRoute } from '$app/paths';
 
 	type User = {
 		id: string;
@@ -12,7 +13,7 @@
 
 <header class="app-header">
 	<div class="header-content">
-		<h1 class="app-title"><a href="/">Serengo</a></h1>
+		<h1 class="app-title"><a href={resolveRoute('/')}>Serengo</a></h1>
 		<div class="profile-container">
 			<ProfilePanel
 				username={user.username}

src/lib/components/LikeButton.svelte

@@ -28,7 +28,7 @@
 		isLoading: false
 	});
 
-	let apiSync: any = null;
+	let apiSync: typeof import('$lib/stores/api-sync').apiSync | null = null;
 
 	// Initialize API sync and subscribe to global state
 	onMount(async () => {
@@ -65,13 +65,15 @@
 
 				// Subscribe to global state for this find
 				const globalLikeState = apiSync.subscribeFindLikes(findId);
-				globalLikeState.subscribe((state: any) => {
+				globalLikeState.subscribe(
+					(state: { isLiked: boolean; likeCount: number; isLoading: boolean }) => {
 						likeState.set({
 							isLiked: state.isLiked,
 							likeCount: state.likeCount,
 							isLoading: state.isLoading
 						});
-				});
+					}
+				);
 			} catch (error) {
 				console.error('Failed to initialize API sync:', error);
 			}
@@ -81,8 +83,7 @@
 	async function toggleLike() {
 		if (!apiSync || !browser) return;
 
-		const currentState = likeState;
-		if (currentState && (currentState as any).isLoading) return;
+		if ($likeState.isLoading) return;
 
 		try {
 			await apiSync.toggleLike(findId);

src/lib/components/NotificationManager.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import NotificationPrompt from './NotificationPrompt.svelte';
+
+	/**
+	 * NotificationManager - Handles push notification subscription
+	 * Shows a prompt for users to enable notifications (requires user gesture for iOS)
+	 */
+
+	let permissionStatus = $state<NotificationPermission>('default');
+	let showPrompt = $state<boolean>(false);
+	let isSupported = $state<boolean>(false);
+
+	const PROMPT_DISMISSED_KEY = 'notification-prompt-dismissed';
+
+	onMount(() => {
+		if (!browser) return;
+
+		// Check if notifications and service workers are supported
+		isSupported = 'Notification' in window && 'serviceWorker' in navigator;
+
+		if (!isSupported) {
+			console.log('Notifications or service workers not supported in this browser');
+			return;
+		}
+
+		// Initialize without requesting permission
+		initializeNotifications();
+	});
+
+	async function initializeNotifications() {
+		try {
+			console.log('[NotificationManager] Starting initialization...');
+
+			// Get current permission status
+			permissionStatus = Notification.permission;
+			console.log('[NotificationManager] Permission status:', permissionStatus);
+
+			// If already granted, subscribe automatically
+			if (permissionStatus === 'granted') {
+				console.log('[NotificationManager] Permission already granted');
+				await subscribeToNotifications();
+			}
+			// If permission is default and not dismissed, show prompt
+			else if (permissionStatus === 'default') {
+				const dismissed = localStorage.getItem(PROMPT_DISMISSED_KEY);
+				if (!dismissed) {
+					showPrompt = true;
+				}
+			}
+			// If denied, do nothing
+			else {
+				console.log('[NotificationManager] Permission denied by user');
+			}
+		} catch (error) {
+			console.error('[NotificationManager] Error initializing notifications:', error);
+		}
+	}
+
+	async function handleEnableNotifications() {
+		try {
+			console.log('[NotificationManager] User clicked enable notifications');
+			showPrompt = false;
+
+			// Request permission (this is triggered by user gesture, so iOS will allow it)
+			permissionStatus = await Notification.requestPermission();
+			console.log('[NotificationManager] Permission response:', permissionStatus);
+
+			if (permissionStatus === 'granted') {
+				await subscribeToNotifications();
+			} else {
+				console.log('[NotificationManager] Permission not granted');
+			}
+		} catch (error) {
+			console.error('[NotificationManager] Error enabling notifications:', error);
+		}
+	}
+
+	function handleDismissPrompt() {
+		console.log('[NotificationManager] User dismissed notification prompt');
+		showPrompt = false;
+		localStorage.setItem(PROMPT_DISMISSED_KEY, 'true');
+	}
+
+	async function subscribeToNotifications() {
+		try {
+			console.log('[NotificationManager] subscribeToNotifications called');
+
+			// Get or register service worker
+			let registration = await navigator.serviceWorker.getRegistration();
+
+			if (!registration) {
+				console.log('[NotificationManager] No SW found, registering...');
+				registration = await navigator.serviceWorker.register('/service-worker.js', {
+					type: 'module'
+				});
+			}
+
+			// Wait for service worker to be ready
+			await navigator.serviceWorker.ready;
+			console.log('[NotificationManager] Service worker ready');
+
+			// Get VAPID public key from server
+			console.log('[NotificationManager] Fetching VAPID key...');
+			const response = await fetch('/api/notifications/subscribe');
+			if (!response.ok) {
+				throw new Error('Failed to get VAPID public key');
+			}
+
+			const { publicKey } = await response.json();
+			console.log('[NotificationManager] Got VAPID key:', publicKey);
+
+			// Check if already subscribed
+			console.log('[NotificationManager] Checking existing subscription...');
+			let subscription = await registration.pushManager.getSubscription();
+			console.log('[NotificationManager] Existing subscription:', subscription);
+
+			// If not subscribed, create new subscription
+			if (!subscription) {
+				console.log('[NotificationManager] Creating new subscription...');
+				subscription = await registration.pushManager.subscribe({
+					userVisibleOnly: true,
+					applicationServerKey: urlBase64ToUint8Array(publicKey)
+				});
+				console.log('[NotificationManager] Subscription created:', subscription);
+			}
+
+			// Send subscription to server
+			console.log('[NotificationManager] Sending subscription to server...');
+			const saveResponse = await fetch('/api/notifications/subscribe', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					subscription: {
+						endpoint: subscription.endpoint,
+						keys: {
+							p256dh: arrayBufferToBase64(subscription.getKey('p256dh')),
+							auth: arrayBufferToBase64(subscription.getKey('auth'))
+						}
+					}
+				})
+			});
+
+			console.log('[NotificationManager] Save response status:', saveResponse.status);
+
+			if (!saveResponse.ok) {
+				const errorText = await saveResponse.text();
+				console.error('[NotificationManager] Save failed:', errorText);
+				throw new Error('Failed to save subscription to server');
+			}
+
+			console.log('[NotificationManager] Successfully subscribed to push notifications!');
+		} catch (error) {
+			console.error('[NotificationManager] Error subscribing to push notifications:', error);
+		}
+	}
+
+	/**
+	 * Convert VAPID public key from base64 to Uint8Array
+	 */
+	function urlBase64ToUint8Array(base64String: string): Uint8Array {
+		const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+		const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+
+		const rawData = window.atob(base64);
+		const outputArray = new Uint8Array(rawData.length);
+
+		for (let i = 0; i < rawData.length; ++i) {
+			outputArray[i] = rawData.charCodeAt(i);
+		}
+		return outputArray;
+	}
+
+	/**
+	 * Convert ArrayBuffer to base64 string
+	 */
+	function arrayBufferToBase64(buffer: ArrayBuffer | null): string {
+		if (!buffer) return '';
+
+		const bytes = new Uint8Array(buffer);
+		let binary = '';
+		for (let i = 0; i < bytes.byteLength; i++) {
+			binary += String.fromCharCode(bytes[i]);
+		}
+		return window.btoa(binary);
+	}
+</script>
+
+{#if showPrompt}
+	<NotificationPrompt onEnable={handleEnableNotifications} onDismiss={handleDismissPrompt} />
+{/if}

src/lib/components/NotificationPrompt.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+	import { X, Bell } from 'lucide-svelte';
+
+	interface Props {
+		onEnable: () => void;
+		onDismiss: () => void;
+	}
+
+	let { onEnable, onDismiss }: Props = $props();
+</script>
+
+<div class="notification-prompt">
+	<div class="notification-prompt-content">
+		<div class="notification-prompt-icon">
+			<Bell size={20} />
+		</div>
+		<div class="notification-prompt-text">
+			<h3>Enable Notifications</h3>
+			<p>Stay updated when friends like or comment on your finds</p>
+		</div>
+		<div class="notification-prompt-actions">
+			<button class="enable-button" onclick={onEnable}>Enable</button>
+			<button class="dismiss-button" onclick={onDismiss} aria-label="Dismiss notification prompt">
+				<X size={20} />
+			</button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.notification-prompt {
+		position: fixed;
+		top: 80px;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 50;
+		width: 90%;
+		max-width: 600px;
+		animation: slideDown 0.3s ease-out;
+	}
+
+	@keyframes slideDown {
+		from {
+			opacity: 0;
+			transform: translateX(-50%) translateY(-20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(-50%) translateY(0);
+		}
+	}
+
+	.notification-prompt-content {
+		background: white;
+		border-radius: 12px;
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		border: 1px solid #e5e7eb;
+		padding: 16px 20px;
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+
+	.notification-prompt-icon {
+		flex-shrink: 0;
+		width: 40px;
+		height: 40px;
+		background: #3b82f6;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: white;
+	}
+
+	.notification-prompt-text {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.notification-prompt-text h3 {
+		margin: 0;
+		font-size: 16px;
+		font-weight: 600;
+		color: #111827;
+		line-height: 1.3;
+	}
+
+	.notification-prompt-text p {
+		margin: 4px 0 0 0;
+		font-size: 14px;
+		color: #6b7280;
+		line-height: 1.4;
+	}
+
+	.notification-prompt-actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-shrink: 0;
+	}
+
+	.enable-button {
+		background: #3b82f6;
+		color: white;
+		border: none;
+		border-radius: 8px;
+		padding: 8px 16px;
+		font-size: 14px;
+		font-weight: 500;
+		cursor: pointer;
+		transition: background 0.2s;
+		white-space: nowrap;
+	}
+
+	.enable-button:hover {
+		background: #2563eb;
+	}
+
+	.enable-button:active {
+		background: #1d4ed8;
+	}
+
+	.dismiss-button {
+		background: transparent;
+		border: none;
+		color: #9ca3af;
+		cursor: pointer;
+		padding: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 4px;
+		transition: all 0.2s;
+	}
+
+	.dismiss-button:hover {
+		background: #f3f4f6;
+		color: #6b7280;
+	}
+
+	@media (max-width: 768px) {
+		.notification-prompt {
+			top: 70px;
+			width: 95%;
+		}
+
+		.notification-prompt-content {
+			padding: 12px 16px;
+			gap: 12px;
+		}
+
+		.notification-prompt-icon {
+			width: 36px;
+			height: 36px;
+		}
+
+		.notification-prompt-text h3 {
+			font-size: 15px;
+		}
+
+		.notification-prompt-text p {
+			font-size: 13px;
+		}
+
+		.enable-button {
+			padding: 6px 12px;
+			font-size: 13px;
+		}
+	}
+</style>

src/lib/components/NotificationSettings.svelte

@@ -0,0 +1,469 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { toast } from 'svelte-sonner';
+
+	interface NotificationPreferences {
+		friendRequests: boolean;
+		friendAccepted: boolean;
+		findLiked: boolean;
+		findCommented: boolean;
+		pushEnabled: boolean;
+	}
+
+	let preferences = $state<NotificationPreferences>({
+		friendRequests: true,
+		friendAccepted: true,
+		findLiked: true,
+		findCommented: true,
+		pushEnabled: true
+	});
+
+	let isLoading = $state<boolean>(true);
+	let isSaving = $state<boolean>(false);
+	let isSubscribing = $state<boolean>(false);
+	let browserPermission = $state<NotificationPermission>('default');
+
+	onMount(() => {
+		if (!browser) return;
+		loadPreferences();
+		checkBrowserPermission();
+	});
+
+	function checkBrowserPermission() {
+		if (!browser || !('Notification' in window)) {
+			browserPermission = 'denied';
+			return;
+		}
+		browserPermission = Notification.permission;
+	}
+
+	async function requestBrowserPermission() {
+		if (!browser || !('Notification' in window)) {
+			toast.error('Notifications are not supported in this browser');
+			return;
+		}
+
+		try {
+			isSubscribing = true;
+			const permission = await Notification.requestPermission();
+			browserPermission = permission;
+
+			if (permission === 'granted') {
+				// Subscribe to push notifications
+				await subscribeToPush();
+				toast.success('Notifications enabled successfully');
+			} else if (permission === 'denied') {
+				toast.error('Notification permission denied');
+			}
+		} catch (error) {
+			console.error('Error requesting notification permission:', error);
+			toast.error('Failed to enable notifications');
+		} finally {
+			isSubscribing = false;
+		}
+	}
+
+	async function subscribeToPush() {
+		try {
+			const registration = await navigator.serviceWorker.ready;
+			const vapidPublicKey = await fetch('/api/notifications/subscribe').then((r) => r.text());
+
+			const subscription = await registration.pushManager.subscribe({
+				userVisibleOnly: true,
+				applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
+			});
+
+			await fetch('/api/notifications/subscribe', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(subscription)
+			});
+		} catch (error) {
+			console.error('Error subscribing to push:', error);
+			throw error;
+		}
+	}
+
+	function urlBase64ToUint8Array(base64String: string) {
+		const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+		const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+		const rawData = window.atob(base64);
+		const outputArray = new Uint8Array(rawData.length);
+		for (let i = 0; i < rawData.length; ++i) {
+			outputArray[i] = rawData.charCodeAt(i);
+		}
+		return outputArray;
+	}
+
+	async function loadPreferences() {
+		try {
+			isLoading = true;
+			const response = await fetch('/api/notifications/preferences');
+
+			if (!response.ok) {
+				throw new Error('Failed to load notification preferences');
+			}
+
+			const data = await response.json();
+			preferences = data;
+		} catch (error) {
+			console.error('Error loading notification preferences:', error);
+			toast.error('Failed to load notification preferences');
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	async function savePreferences() {
+		try {
+			isSaving = true;
+			const response = await fetch('/api/notifications/preferences', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(preferences)
+			});
+
+			if (!response.ok) {
+				throw new Error('Failed to save notification preferences');
+			}
+
+			toast.success('Notification preferences updated');
+		} catch (error) {
+			console.error('Error saving notification preferences:', error);
+			toast.error('Failed to save notification preferences');
+		} finally {
+			isSaving = false;
+		}
+	}
+
+	function handleToggle(key: keyof NotificationPreferences) {
+		preferences[key] = !preferences[key];
+		savePreferences();
+	}
+
+	const canTogglePreferences = $derived(browserPermission === 'granted' && preferences.pushEnabled);
+</script>
+
+<div class="notification-settings">
+	{#if isLoading}
+		<div class="loading">Loading preferences...</div>
+	{:else}
+		<!-- Browser Permission Banner -->
+		{#if browserPermission !== 'granted'}
+			<div class="permission-banner {browserPermission === 'denied' ? 'denied' : 'default'}">
+				<div class="permission-info">
+					{#if browserPermission === 'denied'}
+						<strong>Browser notifications blocked</strong>
+						<p>
+							Please enable notifications in your browser settings to receive push notifications
+						</p>
+					{:else}
+						<strong>Browser permission required</strong>
+						<p>Enable browser notifications to receive push notifications</p>
+					{/if}
+				</div>
+				{#if browserPermission === 'default'}
+					<button class="enable-button" onclick={requestBrowserPermission} disabled={isSubscribing}>
+						{isSubscribing ? 'Enabling...' : 'Enable'}
+					</button>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="settings-list">
+			<!-- Push Notifications Toggle -->
+			<div class="setting-item">
+				<div class="setting-info">
+					<h3>Push Notifications</h3>
+					<p>Enable or disable all push notifications</p>
+				</div>
+				<label class="toggle">
+					<input
+						type="checkbox"
+						checked={preferences.pushEnabled}
+						onchange={() => handleToggle('pushEnabled')}
+						disabled={isSaving || browserPermission !== 'granted'}
+					/>
+					<span class="toggle-slider"></span>
+				</label>
+			</div>
+
+			<div class="divider"></div>
+
+			<!-- Friend Requests -->
+			<div class="setting-item" class:disabled={!canTogglePreferences}>
+				<div class="setting-info">
+					<h3>Friend Requests</h3>
+					<p>Get notified when someone sends you a friend request</p>
+				</div>
+				<label class="toggle">
+					<input
+						type="checkbox"
+						checked={preferences.friendRequests}
+						onchange={() => handleToggle('friendRequests')}
+						disabled={isSaving || !canTogglePreferences}
+					/>
+					<span class="toggle-slider"></span>
+				</label>
+			</div>
+
+			<!-- Friend Accepted -->
+			<div class="setting-item" class:disabled={!canTogglePreferences}>
+				<div class="setting-info">
+					<h3>Friend Request Accepted</h3>
+					<p>Get notified when someone accepts your friend request</p>
+				</div>
+				<label class="toggle">
+					<input
+						type="checkbox"
+						checked={preferences.friendAccepted}
+						onchange={() => handleToggle('friendAccepted')}
+						disabled={isSaving || !canTogglePreferences}
+					/>
+					<span class="toggle-slider"></span>
+				</label>
+			</div>
+
+			<!-- Find Liked -->
+			<div class="setting-item" class:disabled={!canTogglePreferences}>
+				<div class="setting-info">
+					<h3>Find Likes</h3>
+					<p>Get notified when someone likes your find</p>
+				</div>
+				<label class="toggle">
+					<input
+						type="checkbox"
+						checked={preferences.findLiked}
+						onchange={() => handleToggle('findLiked')}
+						disabled={isSaving || !canTogglePreferences}
+					/>
+					<span class="toggle-slider"></span>
+				</label>
+			</div>
+
+			<!-- Find Commented -->
+			<div class="setting-item" class:disabled={!canTogglePreferences}>
+				<div class="setting-info">
+					<h3>Find Comments</h3>
+					<p>Get notified when someone comments on your find</p>
+				</div>
+				<label class="toggle">
+					<input
+						type="checkbox"
+						checked={preferences.findCommented}
+						onchange={() => handleToggle('findCommented')}
+						disabled={isSaving || !canTogglePreferences}
+					/>
+					<span class="toggle-slider"></span>
+				</label>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.notification-settings {
+		max-width: 600px;
+		margin: 0 auto;
+		padding: 20px;
+		font-family:
+			system-ui,
+			-apple-system,
+			sans-serif;
+	}
+
+	.loading {
+		text-align: center;
+		padding: 40px;
+		color: #6b7280;
+	}
+
+	.permission-banner {
+		background: #fef3c7;
+		border: 1px solid #fbbf24;
+		border-radius: 12px;
+		padding: 16px;
+		margin-bottom: 20px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16px;
+	}
+
+	.permission-banner.denied {
+		background: #fee2e2;
+		border-color: #ef4444;
+	}
+
+	.permission-info {
+		flex: 1;
+	}
+
+	.permission-info strong {
+		display: block;
+		font-size: 14px;
+		font-weight: 600;
+		color: #111827;
+		margin-bottom: 4px;
+	}
+
+	.permission-info p {
+		margin: 0;
+		font-size: 13px;
+		color: #6b7280;
+	}
+
+	.enable-button {
+		background: #3b82f6;
+		color: white;
+		border: none;
+		border-radius: 8px;
+		padding: 8px 16px;
+		font-size: 14px;
+		font-weight: 500;
+		cursor: pointer;
+		white-space: nowrap;
+		transition: background 0.2s;
+	}
+
+	.enable-button:hover:not(:disabled) {
+		background: #2563eb;
+	}
+
+	.enable-button:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.settings-list {
+		background: white;
+		border-radius: 12px;
+		border: 1px solid #e5e7eb;
+		overflow: hidden;
+	}
+
+	.setting-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20px;
+		gap: 16px;
+		transition: opacity 0.2s;
+	}
+
+	.setting-item.disabled {
+		opacity: 0.5;
+	}
+
+	.setting-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.setting-info h3 {
+		margin: 0 0 4px 0;
+		font-size: 16px;
+		font-family: inherit;
+		font-weight: 500;
+		color: #111827;
+	}
+
+	.setting-info p {
+		margin: 0;
+		font-size: 14px;
+		color: #6b7280;
+		line-height: 1.4;
+	}
+
+	.divider {
+		height: 1px;
+		background: #e5e7eb;
+		margin: 0 20px;
+	}
+
+	/* Toggle Switch */
+	.toggle {
+		position: relative;
+		display: inline-block;
+		width: 48px;
+		height: 28px;
+		flex-shrink: 0;
+		cursor: pointer;
+	}
+
+	.toggle input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.toggle-slider {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: #d1d5db;
+		border-radius: 28px;
+		transition: background-color 0.2s;
+	}
+
+	.toggle-slider:before {
+		position: absolute;
+		content: '';
+		height: 20px;
+		width: 20px;
+		left: 4px;
+		bottom: 4px;
+		background-color: white;
+		border-radius: 50%;
+		transition: transform 0.2s;
+	}
+
+	.toggle input:checked + .toggle-slider {
+		background-color: #3b82f6;
+	}
+
+	.toggle input:checked + .toggle-slider:before {
+		transform: translateX(20px);
+	}
+
+	.toggle input:disabled + .toggle-slider {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	@media (max-width: 768px) {
+		.notification-settings {
+			padding: 16px;
+		}
+
+		.settings-header h2 {
+			font-size: 20px;
+		}
+
+		.setting-item {
+			padding: 16px;
+		}
+
+		.setting-info h3 {
+			font-size: 15px;
+		}
+
+		.setting-info p {
+			font-size: 13px;
+		}
+
+		.permission-banner {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.enable-button {
+			width: 100%;
+		}
+	}
+</style>

src/lib/components/NotificationSettingsSheet.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './sheet/index.js';
+	import NotificationSettings from './NotificationSettings.svelte';
+
+	interface Props {
+		onClose: () => void;
+	}
+
+	let { onClose }: Props = $props();
+</script>
+
+<Sheet open={true} {onClose}>
+	<SheetContent class="notification-settings-sheet">
+		<SheetHeader>
+			<SheetTitle>Notifications</SheetTitle>
+			<SheetDescription>Manage your notification preferences</SheetDescription>
+		</SheetHeader>
+		<div class="notification-settings-content">
+			<NotificationSettings />
+		</div>
+	</SheetContent>
+</Sheet>
+
+<style>
+	:global(.notification-settings-sheet) {
+		max-width: 500px;
+		font-family:
+			system-ui,
+			-apple-system,
+			sans-serif;
+	}
+
+	.notification-settings-content {
+		margin-top: 20px;
+	}
+</style>

src/lib/components/POISearch.svelte

@@ -36,17 +36,16 @@
 
 		isLoading = true;
 		try {
-			const params = new URLSearchParams({
-				action: 'autocomplete',
-				query: query.trim()
-			});
+			const searchParams = new URL('/api/places', window.location.origin).searchParams;
+			searchParams.set('action', 'autocomplete');
+			searchParams.set('query', query.trim());
 
 			if ($coordinates) {
-				params.set('lat', $coordinates.latitude.toString());
-				params.set('lng', $coordinates.longitude.toString());
+				searchParams.set('lat', $coordinates.latitude.toString());
+				searchParams.set('lng', $coordinates.longitude.toString());
 			}
 
-			const response = await fetch(`/api/places?${params}`);
+			const response = await fetch(`/api/places?${searchParams}`);
 			if (response.ok) {
 				suggestions = await response.json();
 				showSuggestions = true;
@@ -179,7 +178,7 @@
 					<div class="suggestion-content">
 						<span class="suggestion-name">{suggestion.description}</span>
 						<div class="suggestion-types">
-							{#each suggestion.types.slice(0, 2) as type}
+							{#each suggestion.types.slice(0, 2) as type, index (index)}
 								<span class="suggestion-type">{type.replace(/_/g, ' ')}</span>
 							{/each}
 						</div>

src/lib/components/ProfilePanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { resolveRoute } from '$app/paths';
 	import {
 		DropdownMenu,
 		DropdownMenuContent,
@@ -7,9 +8,10 @@
 		DropdownMenuSeparator,
 		DropdownMenuTrigger
 	} from './dropdown-menu';
-	import { Avatar, AvatarFallback, AvatarImage } from './avatar';
 	import { Skeleton } from './skeleton';
+	import ProfilePicture from './ProfilePicture.svelte';
 	import ProfilePictureSheet from './ProfilePictureSheet.svelte';
+	import NotificationSettingsSheet from './NotificationSettingsSheet.svelte';
 
 	interface Props {
 		username: string;
@@ -21,9 +23,7 @@
 	let { username, id, profilePictureUrl, loading = false }: Props = $props();
 
 	let showProfilePictureSheet = $state(false);
-
-	// Get the first letter of username for avatar
-	const initial = username.charAt(0).toUpperCase();
+	let showNotificationSettingsSheet = $state(false);
 
 	function openProfilePictureSheet() {
 		showProfilePictureSheet = true;
@@ -32,22 +32,19 @@
 	function closeProfilePictureSheet() {
 		showProfilePictureSheet = false;
 	}
+
+	function openNotificationSettingsSheet() {
+		showNotificationSettingsSheet = true;
+	}
+
+	function closeNotificationSettingsSheet() {
+		showNotificationSettingsSheet = false;
+	}
 </script>
 
 <DropdownMenu>
 	<DropdownMenuTrigger class="profile-trigger">
-		{#if loading}
-			<Skeleton class="h-10 w-10 rounded-full" />
-		{:else}
-			<Avatar class="profile-avatar">
-				{#if profilePictureUrl}
-					<AvatarImage src={profilePictureUrl} alt={username} />
-				{/if}
-				<AvatarFallback class="profile-avatar-fallback">
-					{initial}
-				</AvatarFallback>
-			</Avatar>
-		{/if}
+		<ProfilePicture {username} {profilePictureUrl} {loading} class="profile-avatar" />
 	</DropdownMenuTrigger>
 
 	<DropdownMenuContent align="end" class="profile-dropdown-content">
@@ -85,7 +82,11 @@
 			</DropdownMenuItem>
 
 			<DropdownMenuItem class="friends-item">
-				<a href="/friends" class="friends-link">Friends</a>
+				<a href={resolveRoute('/friends')} class="friends-link">Friends</a>
+			</DropdownMenuItem>
+
+			<DropdownMenuItem class="notification-settings-item" onclick={openNotificationSettingsSheet}>
+				Notifications
 			</DropdownMenuItem>
 
 			<DropdownMenuSeparator />
@@ -120,6 +121,10 @@
 	/>
 {/if}
 
+{#if showNotificationSettingsSheet}
+	<NotificationSettingsSheet onClose={closeNotificationSettingsSheet} />
+{/if}
+
 <style>
 	:global(.profile-trigger) {
 		background: none;
@@ -144,15 +149,6 @@
 		height: 40px;
 	}
 
-	:global(.profile-avatar-fallback) {
-		background: black;
-		color: white;
-		font-weight: 600;
-		font-size: 16px;
-		border: 2px solid #fff;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-	}
-
 	:global(.profile-dropdown-content) {
 		min-width: 200px;
 		max-width: 240px;
@@ -211,6 +207,16 @@
 		background: #f5f5f5;
 	}
 
+	:global(.notification-settings-item) {
+		cursor: pointer;
+		font-weight: 500;
+		color: #333;
+	}
+
+	:global(.notification-settings-item:hover) {
+		background: #f5f5f5;
+	}
+
 	.friends-link {
 		display: block;
 		width: 100%;

src/lib/components/ProfilePicture.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Avatar, AvatarFallback, AvatarImage } from './avatar';
+	import { cn } from '$lib/utils';
+
+	interface Props {
+		username: string;
+		profilePictureUrl?: string | null;
+		size?: 'sm' | 'md' | 'lg' | 'xl';
+		class?: string;
+		loading?: boolean;
+	}
+
+	let {
+		username,
+		profilePictureUrl,
+		size = 'md',
+		class: className,
+		loading = false
+	}: Props = $props();
+
+	const initial = username.charAt(0).toUpperCase();
+
+	const sizeClasses = {
+		sm: 'h-8 w-8',
+		md: 'h-10 w-10',
+		lg: 'h-16 w-16',
+		xl: 'h-24 w-24'
+	};
+
+	const fallbackSizeClasses = {
+		sm: 'text-xs',
+		md: 'text-base',
+		lg: 'text-xl',
+		xl: 'text-3xl'
+	};
+</script>
+
+{#if loading}
+	<div class={cn('animate-pulse rounded-full bg-gray-200', sizeClasses[size], className)}></div>
+{:else}
+	<Avatar class={cn(sizeClasses[size], className)}>
+		{#if profilePictureUrl}
+			<AvatarImage src={profilePictureUrl} alt={username} />
+		{/if}
+		<AvatarFallback class={cn('profile-picture-fallback', fallbackSizeClasses[size])}>
+			{initial}
+		</AvatarFallback>
+	</Avatar>
+{/if}
+
+<style>
+	:global(.profile-picture-fallback) {
+		background: black;
+		color: white;
+		font-weight: 600;
+		border: 2px solid #fff;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	}
+</style>

src/lib/components/ProfilePictureSheet.svelte

@@ -2,7 +2,7 @@
 	import { invalidateAll } from '$app/navigation';
 	import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from './sheet';
 	import { Button } from './button';
-	import { Avatar, AvatarFallback, AvatarImage } from './avatar';
+	import ProfilePicture from './ProfilePicture.svelte';
 
 	interface Props {
 		userId: string;
@@ -19,8 +19,6 @@
 	let isDeleting = $state(false);
 	let showModal = $state(true);
 
-	const initial = username.charAt(0).toUpperCase();
-
 	// Close modal when showModal changes to false
 	$effect(() => {
 		if (!showModal && onClose) {
@@ -118,14 +116,7 @@
 
 		<div class="profile-picture-content">
 			<div class="current-avatar">
-				<Avatar class="large-avatar">
-					{#if profilePictureUrl}
-						<AvatarImage src={profilePictureUrl} alt={username} />
-					{/if}
-					<AvatarFallback class="large-avatar-fallback">
-						{initial}
-					</AvatarFallback>
-				</Avatar>
+				<ProfilePicture {username} {profilePictureUrl} size="xl" class="large-avatar" />
 			</div>
 
 			<div class="upload-section">
@@ -190,15 +181,6 @@
 		height: 120px;
 	}
 
-	:global(.large-avatar-fallback) {
-		background: black;
-		color: white;
-		font-weight: 600;
-		font-size: 48px;
-		border: 4px solid #fff;
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-	}
-
 	.upload-section {
 		display: flex;
 		flex-direction: column;

src/lib/components/button/button.svelte

@@ -2,6 +2,7 @@
 	import { cn, type WithElementRef } from '$lib/utils.js';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 	import { type VariantProps, tv } from 'tailwind-variants';
+	import { resolveRoute } from '$app/paths';
 
 	export const buttonVariants = tv({
 		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
@@ -58,7 +59,7 @@
 		bind:this={ref}
 		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
-		href={disabled ? undefined : href}
+		href={disabled ? undefined : resolveRoute(href)}
 		aria-disabled={disabled}
 		role={disabled ? 'link' : undefined}
 		tabindex={disabled ? -1 : undefined}

src/lib/components/login-form.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import { goto } from '$app/navigation';
+	import { resolveRoute } from '$app/paths';
 	import { Button } from '$lib/components/button/index.js';
 	import * as Card from '$lib/components/card/index.js';
 	import { Label } from '$lib/components/label/index.js';
@@ -62,7 +63,11 @@
 						</Button>
 					</div>
 				</div>
-				<Button variant="outline" class="mt-4 w-full" onclick={() => goto('/login/google')}>
+				<Button
+					variant="outline"
+					class="mt-4 w-full"
+					onclick={() => goto(resolveRoute('/login/google'))}
+				>
 					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 						<path
 							d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"

src/lib/index.ts

@@ -3,12 +3,17 @@ export { default as Input } from './components/Input.svelte';
 export { default as Button } from './components/Button.svelte';
 export { default as ErrorMessage } from './components/ErrorMessage.svelte';
 export { default as ProfilePanel } from './components/ProfilePanel.svelte';
+export { default as ProfilePicture } from './components/ProfilePicture.svelte';
 export { default as ProfilePictureSheet } from './components/ProfilePictureSheet.svelte';
 export { default as Header } from './components/Header.svelte';
 export { default as Modal } from './components/Modal.svelte';
 export { default as Map } from './components/Map.svelte';
 export { default as LocationButton } from './components/LocationButton.svelte';
 export { default as LocationManager } from './components/LocationManager.svelte';
+export { default as NotificationManager } from './components/NotificationManager.svelte';
+export { default as NotificationPrompt } from './components/NotificationPrompt.svelte';
+export { default as NotificationSettings } from './components/NotificationSettings.svelte';
+export { default as NotificationSettingsSheet } from './components/NotificationSettingsSheet.svelte';
 export { default as FindCard } from './components/FindCard.svelte';
 export { default as FindsList } from './components/FindsList.svelte';
 

src/lib/server/db/schema.ts

@@ -1,4 +1,4 @@
-import { pgTable, integer, text, timestamp } from 'drizzle-orm/pg-core';
+import { pgTable, integer, text, timestamp, boolean, jsonb } from 'drizzle-orm/pg-core';
 
 export const user = pgTable('user', {
 	id: text('id').primaryKey(),
@@ -75,13 +75,75 @@ export const friendship = pgTable('friendship', {
 	createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' }).defaultNow().notNull()
 });
 
-// Type exports for the new tables
+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()
+});
+
+// Notification system tables
+export const notification = pgTable('notification', {
+	id: text('id').primaryKey(),
+	userId: text('user_id')
+		.notNull()
+		.references(() => user.id, { onDelete: 'cascade' }),
+	type: text('type').notNull(), // 'friend_request', 'friend_accepted', 'find_liked', 'find_commented'
+	title: text('title').notNull(),
+	message: text('message').notNull(),
+	data: jsonb('data'), // Additional context data (findId, friendId, etc.)
+	isRead: boolean('is_read').default(false),
+	createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' }).defaultNow().notNull()
+});
+
+export const notificationSubscription = pgTable('notification_subscription', {
+	id: text('id').primaryKey(),
+	userId: text('user_id')
+		.notNull()
+		.references(() => user.id, { onDelete: 'cascade' }),
+	endpoint: text('endpoint').notNull(),
+	p256dhKey: text('p256dh_key').notNull(),
+	authKey: text('auth_key').notNull(),
+	userAgent: text('user_agent'),
+	isActive: boolean('is_active').default(true),
+	createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
+	updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'date' }).defaultNow().notNull()
+});
+
+export const notificationPreferences = pgTable('notification_preferences', {
+	userId: text('user_id')
+		.primaryKey()
+		.references(() => user.id, { onDelete: 'cascade' }),
+	friendRequests: boolean('friend_requests').default(true),
+	friendAccepted: boolean('friend_accepted').default(true),
+	findLiked: boolean('find_liked').default(true),
+	findCommented: boolean('find_commented').default(true),
+	pushEnabled: boolean('push_enabled').default(true),
+	createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' }).defaultNow().notNull(),
+	updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'date' }).defaultNow().notNull()
+});
+
+// Type exports for the 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 Notification = typeof notification.$inferSelect;
+export type NotificationSubscription = typeof notificationSubscription.$inferSelect;
+export type NotificationPreferences = typeof notificationPreferences.$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;
+export type NotificationInsert = typeof notification.$inferInsert;
+export type NotificationSubscriptionInsert = typeof notificationSubscription.$inferInsert;
+export type NotificationPreferencesInsert = typeof notificationPreferences.$inferInsert;

src/lib/server/notifications.ts

@@ -0,0 +1,160 @@
+import { db } from './db';
+import { notification, notificationPreferences } from './db/schema';
+import type { NotificationInsert } from './db/schema';
+import { eq, and, desc } from 'drizzle-orm';
+import { nanoid } from 'nanoid';
+
+export type NotificationType =
+	| 'friend_request'
+	| 'friend_accepted'
+	| 'find_liked'
+	| 'find_commented';
+
+export interface CreateNotificationData {
+	userId: string;
+	type: NotificationType;
+	title: string;
+	message: string;
+	data?: Record<string, unknown>;
+}
+
+export interface GetNotificationsOptions {
+	limit?: number;
+	offset?: number;
+	unreadOnly?: boolean;
+}
+
+export class NotificationService {
+	/**
+	 * Create a new notification record in the database
+	 */
+	async createNotification(data: CreateNotificationData): Promise<void> {
+		const notificationData: NotificationInsert = {
+			id: nanoid(),
+			userId: data.userId,
+			type: data.type,
+			title: data.title,
+			message: data.message,
+			data: data.data || null,
+			isRead: false
+		};
+
+		await db.insert(notification).values(notificationData);
+	}
+
+	/**
+	 * Check if user has notifications enabled for a specific type
+	 */
+	async shouldNotify(userId: string, type: NotificationType): Promise<boolean> {
+		const prefs = await db
+			.select()
+			.from(notificationPreferences)
+			.where(eq(notificationPreferences.userId, userId))
+			.limit(1);
+
+		// If no preferences exist, default to true
+		if (prefs.length === 0) {
+			return true;
+		}
+
+		const pref = prefs[0];
+
+		// Check if push is enabled and specific notification type is enabled
+		if (!pref.pushEnabled) {
+			return false;
+		}
+
+		switch (type) {
+			case 'friend_request':
+				return pref.friendRequests ?? true;
+			case 'friend_accepted':
+				return pref.friendAccepted ?? true;
+			case 'find_liked':
+				return pref.findLiked ?? true;
+			case 'find_commented':
+				return pref.findCommented ?? true;
+			default:
+				return true;
+		}
+	}
+
+	/**
+	 * Get user notifications with pagination and filtering
+	 */
+	async getUserNotifications(userId: string, options: GetNotificationsOptions = {}) {
+		const { limit = 20, offset = 0, unreadOnly = false } = options;
+
+		let query = db
+			.select()
+			.from(notification)
+			.where(eq(notification.userId, userId))
+			.orderBy(desc(notification.createdAt))
+			.limit(limit)
+			.offset(offset);
+
+		if (unreadOnly) {
+			query = db
+				.select()
+				.from(notification)
+				.where(and(eq(notification.userId, userId), eq(notification.isRead, false)))
+				.orderBy(desc(notification.createdAt))
+				.limit(limit)
+				.offset(offset);
+		}
+
+		return await query;
+	}
+
+	/**
+	 * Mark notifications as read
+	 */
+	async markAsRead(notificationIds: string[]): Promise<void> {
+		for (const id of notificationIds) {
+			await db.update(notification).set({ isRead: true }).where(eq(notification.id, id));
+		}
+	}
+
+	/**
+	 * Mark a single notification as read
+	 */
+	async markOneAsRead(notificationId: string): Promise<void> {
+		await db.update(notification).set({ isRead: true }).where(eq(notification.id, notificationId));
+	}
+
+	/**
+	 * Mark all notifications as read for a user
+	 */
+	async markAllAsRead(userId: string): Promise<void> {
+		await db.update(notification).set({ isRead: true }).where(eq(notification.userId, userId));
+	}
+
+	/**
+	 * Get unread notification count for a user
+	 */
+	async getUnreadCount(userId: string): Promise<number> {
+		const notifications = await db
+			.select()
+			.from(notification)
+			.where(and(eq(notification.userId, userId), eq(notification.isRead, false)));
+
+		return notifications.length;
+	}
+
+	/**
+	 * Delete a notification
+	 */
+	async deleteNotification(notificationId: string, userId: string): Promise<void> {
+		await db
+			.delete(notification)
+			.where(and(eq(notification.id, notificationId), eq(notification.userId, userId)));
+	}
+
+	/**
+	 * Delete all notifications for a user
+	 */
+	async deleteAllNotifications(userId: string): Promise<void> {
+		await db.delete(notification).where(eq(notification.userId, userId));
+	}
+}
+
+export const notificationService = new NotificationService();

src/lib/server/push.ts

@@ -0,0 +1,185 @@
+import webpush from 'web-push';
+import { db } from './db';
+import { notificationSubscription } from './db/schema';
+import type { NotificationSubscriptionInsert } from './db/schema';
+import { eq, and } from 'drizzle-orm';
+import { nanoid } from 'nanoid';
+import { VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY, VAPID_SUBJECT } from '$env/static/private';
+
+// Initialize web-push with VAPID keys
+if (!VAPID_PUBLIC_KEY || !VAPID_PRIVATE_KEY || !VAPID_SUBJECT) {
+	throw new Error(
+		'VAPID keys are not configured. Please set VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY, and VAPID_SUBJECT in your environment variables.'
+	);
+}
+
+webpush.setVapidDetails(VAPID_SUBJECT, VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY);
+
+export interface PushSubscriptionData {
+	endpoint: string;
+	keys: {
+		p256dh: string;
+		auth: string;
+	};
+}
+
+export interface PushNotificationPayload {
+	title: string;
+	message: string;
+	data?: Record<string, unknown>;
+	icon?: string;
+	badge?: string;
+	tag?: string;
+	url?: string;
+}
+
+export class PushService {
+	/**
+	 * Save a push subscription for a user
+	 */
+	async saveSubscription(
+		userId: string,
+		subscription: PushSubscriptionData,
+		userAgent?: string
+	): Promise<void> {
+		const subscriptionData: NotificationSubscriptionInsert = {
+			id: nanoid(),
+			userId,
+			endpoint: subscription.endpoint,
+			p256dhKey: subscription.keys.p256dh,
+			authKey: subscription.keys.auth,
+			userAgent: userAgent || null,
+			isActive: true
+		};
+
+		// Check if subscription already exists
+		const existing = await db
+			.select()
+			.from(notificationSubscription)
+			.where(eq(notificationSubscription.endpoint, subscription.endpoint))
+			.limit(1);
+
+		if (existing.length > 0) {
+			// Update existing subscription
+			await db
+				.update(notificationSubscription)
+				.set({
+					p256dhKey: subscription.keys.p256dh,
+					authKey: subscription.keys.auth,
+					userAgent: userAgent || null,
+					isActive: true,
+					updatedAt: new Date()
+				})
+				.where(eq(notificationSubscription.endpoint, subscription.endpoint));
+		} else {
+			// Insert new subscription
+			await db.insert(notificationSubscription).values(subscriptionData);
+		}
+	}
+
+	/**
+	 * Remove a push subscription
+	 */
+	async removeSubscription(userId: string, endpoint: string): Promise<void> {
+		await db
+			.delete(notificationSubscription)
+			.where(
+				and(
+					eq(notificationSubscription.userId, userId),
+					eq(notificationSubscription.endpoint, endpoint)
+				)
+			);
+	}
+
+	/**
+	 * Get all active subscriptions for a user
+	 */
+	async getUserSubscriptions(userId: string) {
+		return await db
+			.select()
+			.from(notificationSubscription)
+			.where(
+				and(
+					eq(notificationSubscription.userId, userId),
+					eq(notificationSubscription.isActive, true)
+				)
+			);
+	}
+
+	/**
+	 * Send push notification to a user's subscriptions
+	 */
+	async sendPushNotification(userId: string, payload: PushNotificationPayload): Promise<void> {
+		const subscriptions = await this.getUserSubscriptions(userId);
+
+		if (subscriptions.length === 0) {
+			console.log(`No active subscriptions found for user ${userId}`);
+			return;
+		}
+
+		const notificationPayload = JSON.stringify({
+			title: payload.title,
+			body: payload.message,
+			icon: payload.icon || '/logo.svg',
+			badge: payload.badge || '/logo.svg',
+			tag: payload.tag,
+			data: {
+				url: payload.url || '/',
+				...payload.data
+			}
+		});
+
+		const sendPromises = subscriptions.map(async (sub) => {
+			const pushSubscription: webpush.PushSubscription = {
+				endpoint: sub.endpoint,
+				keys: {
+					p256dh: sub.p256dhKey,
+					auth: sub.authKey
+				}
+			};
+
+			try {
+				await webpush.sendNotification(pushSubscription, notificationPayload);
+			} catch (error) {
+				console.error(`Failed to send push notification to ${sub.endpoint}:`, error);
+
+				// If the subscription is invalid (410 Gone or 404), deactivate it
+				if (error instanceof Error && 'statusCode' in error) {
+					const statusCode = (error as { statusCode: number }).statusCode;
+					if (statusCode === 410 || statusCode === 404) {
+						await db
+							.update(notificationSubscription)
+							.set({ isActive: false })
+							.where(eq(notificationSubscription.id, sub.id));
+					}
+				}
+			}
+		});
+
+		await Promise.all(sendPromises);
+	}
+
+	/**
+	 * Send push notification to multiple users
+	 */
+	async sendPushNotificationToUsers(
+		userIds: string[],
+		payload: PushNotificationPayload
+	): Promise<void> {
+		const sendPromises = userIds.map((userId) => this.sendPushNotification(userId, payload));
+		await Promise.all(sendPromises);
+	}
+
+	/**
+	 * Deactivate a subscription
+	 */
+	async deactivateSubscription(endpoint: string): Promise<void> {
+		await db
+			.update(notificationSubscription)
+			.set({ isActive: false })
+			.where(eq(notificationSubscription.endpoint, endpoint));
+	}
+}
+
+export const pushService = new PushService();
+export { VAPID_PUBLIC_KEY };

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)
 	 */

src/routes/+layout.svelte

@@ -6,11 +6,21 @@
 	import { Toaster } from '$lib/components/sonner/index.js';
 	import { Skeleton } from '$lib/components/skeleton';
 	import LocationManager from '$lib/components/LocationManager.svelte';
+	import NotificationManager from '$lib/components/NotificationManager.svelte';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
 
 	let { children, data } = $props();
 	let isLoginRoute = $derived(page.url.pathname.startsWith('/login'));
 	let showHeader = $derived(!isLoginRoute && data?.user);
-	let isLoading = $derived(!isLoginRoute && !data?.user && data !== null);
+	let isLoading = $state(false);
+
+	// Handle loading state only on client to prevent hydration mismatch
+	onMount(() => {
+		if (browser) {
+			isLoading = !isLoginRoute && !data?.user && data !== null;
+		}
+	});
 </script>
 
 <svelte:head>
@@ -33,9 +43,10 @@
 
 <Toaster />
 
-<!-- Auto-start location watching for authenticated users -->
+<!-- Auto-start location and notfication watching for authenticated users -->
 {#if data?.user && !isLoginRoute}
 	<LocationManager autoStart={true} />
+	<NotificationManager />
 {/if}
 
 {#if showHeader && data.user}

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)
 			}));
 
@@ -316,7 +288,7 @@
 {/if}
 
 {#if selectedFind}
-	<FindPreview find={selectedFind} onClose={closeFindPreview} />
+	<FindPreview find={selectedFind} onClose={closeFindPreview} currentUserId={data.user?.id} />
 {/if}
 
 <style>

src/routes/api/finds/[findId]/comments/+server.ts

@@ -0,0 +1,172 @@
+import { json } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import { findComment, user, find } from '$lib/server/db/schema';
+import { eq, desc } from 'drizzle-orm';
+import type { RequestHandler } from './$types';
+import { notificationService } from '$lib/server/notifications';
+import { pushService } from '$lib/server/push';
+
+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();
+
+		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 });
+		}
+
+		// Send notification to find owner if not self-comment
+		const findData = await db.select().from(find).where(eq(find.id, findId)).limit(1);
+
+		if (findData.length > 0 && findData[0].userId !== session.userId) {
+			const findOwner = findData[0];
+			const shouldNotify = await notificationService.shouldNotify(
+				findOwner.userId,
+				'find_commented'
+			);
+
+			if (shouldNotify) {
+				// Get commenter's username
+				const commenterUser = await db
+					.select({ username: user.username })
+					.from(user)
+					.where(eq(user.id, session.userId))
+					.limit(1);
+
+				const commenterUsername = commenterUser[0]?.username || 'Someone';
+				const findTitle = findOwner.title || 'your find';
+
+				await notificationService.createNotification({
+					userId: findOwner.userId,
+					type: 'find_commented',
+					title: 'New comment on your find',
+					message: `${commenterUsername} commented on: ${findTitle}`,
+					data: {
+						findId: findOwner.id,
+						commentId,
+						commenterId: session.userId,
+						commenterUsername,
+						findTitle,
+						commentContent: content.trim().substring(0, 100)
+					}
+				});
+
+				// Send push notification
+				await pushService.sendPushNotification(findOwner.userId, {
+					title: 'New comment on your find',
+					message: `${commenterUsername} commented on: ${findTitle}`,
+					url: `/?find=${findOwner.id}`,
+					tag: 'find_commented',
+					data: {
+						findId: findOwner.id,
+						commentId,
+						commenterId: session.userId
+					}
+				});
+			}
+		}
+
+		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 });
+	}
+};

src/routes/api/finds/[findId]/like/+server.ts

@@ -1,8 +1,10 @@
 import { json, error } from '@sveltejs/kit';
 import { db } from '$lib/server/db';
-import { findLike, find } from '$lib/server/db/schema';
+import { findLike, find, user } from '$lib/server/db/schema';
 import { eq, and, count } from 'drizzle-orm';
 import { encodeBase64url } from '@oslojs/encoding';
+import { notificationService } from '$lib/server/notifications';
+import { pushService } from '$lib/server/push';
 
 function generateLikeId(): string {
 	const bytes = crypto.getRandomValues(new Uint8Array(15));
@@ -59,6 +61,49 @@ export async function POST({
 
 	const likeCount = likeCountResult[0]?.count ?? 0;
 
+	// Send notification to find owner if not self-like
+	const findOwner = existingFind[0];
+	if (findOwner.userId !== locals.user.id) {
+		const shouldNotify = await notificationService.shouldNotify(findOwner.userId, 'find_liked');
+
+		if (shouldNotify) {
+			// Get liker's username
+			const likerUser = await db
+				.select({ username: user.username })
+				.from(user)
+				.where(eq(user.id, locals.user.id))
+				.limit(1);
+
+			const likerUsername = likerUser[0]?.username || 'Someone';
+			const findTitle = findOwner.title || 'your find';
+
+			await notificationService.createNotification({
+				userId: findOwner.userId,
+				type: 'find_liked',
+				title: 'Someone liked your find',
+				message: `${likerUsername} liked your find: ${findTitle}`,
+				data: {
+					findId: findOwner.id,
+					likerId: locals.user.id,
+					likerUsername,
+					findTitle
+				}
+			});
+
+			// Send push notification
+			await pushService.sendPushNotification(findOwner.userId, {
+				title: 'Someone liked your find',
+				message: `${likerUsername} liked your find: ${findTitle}`,
+				url: `/?find=${findOwner.id}`,
+				tag: 'find_liked',
+				data: {
+					findId: findOwner.id,
+					likerId: locals.user.id
+				}
+			});
+		}
+	}
+
 	return json({
 		success: true,
 		likeId,

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 } from '$lib/server/db/schema';
+import { eq } 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 });
+	}
+};

src/routes/api/friends/+server.ts

@@ -5,6 +5,8 @@ import { friendship, user } from '$lib/server/db/schema';
 import { eq, and, or } from 'drizzle-orm';
 import { encodeBase64url } from '@oslojs/encoding';
 import { getSignedR2Url } from '$lib/server/r2';
+import { notificationService } from '$lib/server/notifications';
+import { pushService } from '$lib/server/push';
 
 function generateFriendshipId(): string {
 	const bytes = crypto.getRandomValues(new Uint8Array(15));
@@ -180,6 +182,34 @@ export const POST: RequestHandler = async ({ request, locals }) => {
 			})
 			.returning();
 
+		// Send notification to friend
+		const shouldNotify = await notificationService.shouldNotify(friendId, 'friend_request');
+		if (shouldNotify) {
+			await notificationService.createNotification({
+				userId: friendId,
+				type: 'friend_request',
+				title: 'New friend request',
+				message: `${locals.user.username} sent you a friend request`,
+				data: {
+					friendshipId: newFriendship[0].id,
+					senderId: locals.user.id,
+					senderUsername: locals.user.username
+				}
+			});
+
+			// Send push notification
+			await pushService.sendPushNotification(friendId, {
+				title: 'New friend request',
+				message: `${locals.user.username} sent you a friend request`,
+				url: '/friends',
+				tag: 'friend_request',
+				data: {
+					friendshipId: newFriendship[0].id,
+					senderId: locals.user.id
+				}
+			});
+		}
+
 		return json({ success: true, friendship: newFriendship[0] });
 	} catch (err) {
 		console.error('Error sending friend request:', err);

src/routes/api/friends/[friendshipId]/+server.ts

@@ -1,8 +1,10 @@
 import { json, error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { db } from '$lib/server/db';
-import { friendship } from '$lib/server/db/schema';
+import { friendship, user } from '$lib/server/db/schema';
 import { eq } from 'drizzle-orm';
+import { notificationService } from '$lib/server/notifications';
+import { pushService } from '$lib/server/push';
 
 export const PUT: RequestHandler = async ({ params, request, locals }) => {
 	if (!locals.user) {
@@ -72,6 +74,47 @@ export const PUT: RequestHandler = async ({ params, request, locals }) => {
 			.where(eq(friendship.id, friendshipId))
 			.returning();
 
+		// Send notification if friend request was accepted
+		if (action === 'accept') {
+			const senderId = friendshipRecord.userId;
+			const shouldNotify = await notificationService.shouldNotify(senderId, 'friend_accepted');
+
+			if (shouldNotify) {
+				// Get accepter's username
+				const accepterUser = await db
+					.select({ username: user.username })
+					.from(user)
+					.where(eq(user.id, locals.user.id))
+					.limit(1);
+
+				const accepterUsername = accepterUser[0]?.username || 'Someone';
+
+				await notificationService.createNotification({
+					userId: senderId,
+					type: 'friend_accepted',
+					title: 'Friend request accepted',
+					message: `${accepterUsername} accepted your friend request`,
+					data: {
+						friendshipId: friendshipRecord.id,
+						accepterId: locals.user.id,
+						accepterUsername
+					}
+				});
+
+				// Send push notification
+				await pushService.sendPushNotification(senderId, {
+					title: 'Friend request accepted',
+					message: `${accepterUsername} accepted your friend request`,
+					url: '/friends',
+					tag: 'friend_accepted',
+					data: {
+						friendshipId: friendshipRecord.id,
+						accepterId: locals.user.id
+					}
+				});
+			}
+		}
+
 		return json({ success: true, friendship: updatedFriendship[0] });
 	} catch (err) {
 		console.error('Error updating friendship:', err);

src/routes/api/notifications/+server.ts

@@ -0,0 +1,83 @@
+import { json, type RequestHandler } from '@sveltejs/kit';
+import { notificationService } from '$lib/server/notifications';
+
+// GET /api/notifications - Get user notifications
+export const GET: RequestHandler = async ({ locals, url }) => {
+	const user = locals.user;
+	if (!user) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	const limit = parseInt(url.searchParams.get('limit') || '20');
+	const offset = parseInt(url.searchParams.get('offset') || '0');
+	const unreadOnly = url.searchParams.get('unreadOnly') === 'true';
+
+	try {
+		const notifications = await notificationService.getUserNotifications(user.id, {
+			limit,
+			offset,
+			unreadOnly
+		});
+
+		return json({ notifications });
+	} catch (error) {
+		console.error('Error fetching notifications:', error);
+		return json({ error: 'Failed to fetch notifications' }, { status: 500 });
+	}
+};
+
+// PATCH /api/notifications - Mark notifications as read
+export const PATCH: RequestHandler = async ({ locals, request }) => {
+	const user = locals.user;
+	if (!user) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	try {
+		const { notificationIds, markAll } = await request.json();
+
+		if (markAll) {
+			await notificationService.markAllAsRead(user.id);
+		} else if (Array.isArray(notificationIds) && notificationIds.length > 0) {
+			await notificationService.markAsRead(notificationIds);
+		} else {
+			return json(
+				{ error: 'Invalid request: provide notificationIds or markAll' },
+				{ status: 400 }
+			);
+		}
+
+		return json({ success: true });
+	} catch (error) {
+		console.error('Error marking notifications as read:', error);
+		return json({ error: 'Failed to mark notifications as read' }, { status: 500 });
+	}
+};
+
+// DELETE /api/notifications - Delete notifications
+export const DELETE: RequestHandler = async ({ locals, request }) => {
+	const user = locals.user;
+	if (!user) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	try {
+		const { notificationId, deleteAll } = await request.json();
+
+		if (deleteAll) {
+			await notificationService.deleteAllNotifications(user.id);
+		} else if (notificationId) {
+			await notificationService.deleteNotification(notificationId, user.id);
+		} else {
+			return json(
+				{ error: 'Invalid request: provide notificationId or deleteAll' },
+				{ status: 400 }
+			);
+		}
+
+		return json({ success: true });
+	} catch (error) {
+		console.error('Error deleting notifications:', error);
+		return json({ error: 'Failed to delete notifications' }, { status: 500 });
+	}
+};

src/routes/api/notifications/count/+server.ts

@@ -0,0 +1,18 @@
+import { json, type RequestHandler } from '@sveltejs/kit';
+import { notificationService } from '$lib/server/notifications';
+
+// GET /api/notifications/count - Get unread notification count
+export const GET: RequestHandler = async ({ locals }) => {
+	const user = locals.user;
+	if (!user) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	try {
+		const count = await notificationService.getUnreadCount(user.id);
+		return json({ count });
+	} catch (error) {
+		console.error('Error fetching unread count:', error);
+		return json({ error: 'Failed to fetch unread count' }, { status: 500 });
+	}
+};

src/routes/api/notifications/preferences/+server.ts

@@ -0,0 +1,93 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { db } from '$lib/server/db';
+import { notificationPreferences } from '$lib/server/db/schema';
+import { eq } from 'drizzle-orm';
+
+// GET - Fetch user's notification preferences
+export const GET: RequestHandler = async ({ locals }) => {
+	if (!locals.user) {
+		throw error(401, 'Unauthorized');
+	}
+
+	try {
+		// Get user's preferences
+		const [preferences] = await db
+			.select()
+			.from(notificationPreferences)
+			.where(eq(notificationPreferences.userId, locals.user.id))
+			.limit(1);
+
+		// If no preferences exist, return defaults
+		if (!preferences) {
+			return json({
+				friendRequests: true,
+				friendAccepted: true,
+				findLiked: true,
+				findCommented: true,
+				pushEnabled: true
+			});
+		}
+
+		return json({
+			friendRequests: preferences.friendRequests,
+			friendAccepted: preferences.friendAccepted,
+			findLiked: preferences.findLiked,
+			findCommented: preferences.findCommented,
+			pushEnabled: preferences.pushEnabled
+		});
+	} catch (err) {
+		console.error('Error fetching notification preferences:', err);
+		throw error(500, 'Failed to fetch notification preferences');
+	}
+};
+
+// POST - Update user's notification preferences
+export const POST: RequestHandler = async ({ locals, request }) => {
+	if (!locals.user) {
+		throw error(401, 'Unauthorized');
+	}
+
+	try {
+		const body = await request.json();
+		const { friendRequests, friendAccepted, findLiked, findCommented, pushEnabled } = body;
+
+		// Validate boolean values
+		const preferences = {
+			friendRequests: typeof friendRequests === 'boolean' ? friendRequests : true,
+			friendAccepted: typeof friendAccepted === 'boolean' ? friendAccepted : true,
+			findLiked: typeof findLiked === 'boolean' ? findLiked : true,
+			findCommented: typeof findCommented === 'boolean' ? findCommented : true,
+			pushEnabled: typeof pushEnabled === 'boolean' ? pushEnabled : true
+		};
+
+		// Check if preferences exist
+		const [existing] = await db
+			.select()
+			.from(notificationPreferences)
+			.where(eq(notificationPreferences.userId, locals.user.id))
+			.limit(1);
+
+		if (existing) {
+			// Update existing preferences
+			await db
+				.update(notificationPreferences)
+				.set({
+					...preferences,
+					updatedAt: new Date()
+				})
+				.where(eq(notificationPreferences.userId, locals.user.id));
+		} else {
+			// Create new preferences
+			await db.insert(notificationPreferences).values({
+				userId: locals.user.id,
+				...preferences
+			});
+		}
+
+		return json({ success: true, preferences });
+	} catch (err) {
+		console.error('Error updating notification preferences:', err);
+		throw error(500, 'Failed to update notification preferences');
+	}
+};

src/routes/api/notifications/subscribe/+server.ts

@@ -0,0 +1,54 @@
+import { json, type RequestHandler } from '@sveltejs/kit';
+import { pushService, VAPID_PUBLIC_KEY } from '$lib/server/push';
+
+// GET /api/notifications/subscribe - Get VAPID public key
+export const GET: RequestHandler = async () => {
+	return json({ publicKey: VAPID_PUBLIC_KEY });
+};
+
+// POST /api/notifications/subscribe - Subscribe to push notifications
+export const POST: RequestHandler = async ({ locals, request }) => {
+	const user = locals.user;
+	if (!user) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	try {
+		const { subscription } = await request.json();
+		const userAgent = request.headers.get('user-agent') || undefined;
+
+		if (!subscription || !subscription.endpoint || !subscription.keys) {
+			return json({ error: 'Invalid subscription data' }, { status: 400 });
+		}
+
+		await pushService.saveSubscription(user.id, subscription, userAgent);
+
+		return json({ success: true });
+	} catch (error) {
+		console.error('Error saving subscription:', error);
+		return json({ error: 'Failed to save subscription' }, { status: 500 });
+	}
+};
+
+// DELETE /api/notifications/subscribe - Unsubscribe from push notifications
+export const DELETE: RequestHandler = async ({ locals, request }) => {
+	const user = locals.user;
+	if (!user) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	try {
+		const { endpoint } = await request.json();
+
+		if (!endpoint) {
+			return json({ error: 'Endpoint is required' }, { status: 400 });
+		}
+
+		await pushService.removeSubscription(user.id, endpoint);
+
+		return json({ success: true });
+	} catch (error) {
+		console.error('Error removing subscription:', error);
+		return json({ error: 'Failed to remove subscription' }, { status: 500 });
+	}
+};

src/routes/friends/+page.svelte

@@ -2,7 +2,7 @@
 	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/card';
 	import { Button } from '$lib/components/button';
 	import { Input } from '$lib/components/input';
-	import { Avatar, AvatarFallback, AvatarImage } from '$lib/components/avatar';
+	import ProfilePicture from '$lib/components/ProfilePicture.svelte';
 	import { Badge } from '$lib/components/badge';
 	import { toast } from 'svelte-sonner';
 	import type { PageData } from './$types';
@@ -134,10 +134,10 @@
 	// Search users when query changes with debounce
 	let searchTimeout: ReturnType<typeof setTimeout>;
 	$effect(() => {
-		// Track searchQuery dependency explicitly
-		searchQuery;
+		if (searchQuery) {
 			clearTimeout(searchTimeout);
 			searchTimeout = setTimeout(searchUsers, 300);
+		}
 	});
 </script>
 
@@ -184,10 +184,10 @@
 						<div class="user-grid">
 							{#each friends as friend (friend.id)}
 								<div class="user-card">
-									<Avatar>
-										<AvatarImage src={friend.friendProfilePictureUrl} alt={friend.friendUsername} />
-										<AvatarFallback>{friend.friendUsername.charAt(0).toUpperCase()}</AvatarFallback>
-									</Avatar>
+									<ProfilePicture
+										username={friend.friendUsername}
+										profilePictureUrl={friend.friendProfilePictureUrl}
+									/>
 									<div class="user-info">
 										<span class="username">{friend.friendUsername}</span>
 										<Badge variant="secondary">Friend</Badge>
@@ -218,15 +218,10 @@
 							<div class="user-grid">
 								{#each receivedRequests as request (request.id)}
 									<div class="user-card">
-										<Avatar>
-											<AvatarImage
-												src={request.friendProfilePictureUrl}
-												alt={request.friendUsername}
+										<ProfilePicture
+											username={request.friendUsername}
+											profilePictureUrl={request.friendProfilePictureUrl}
 										/>
-											<AvatarFallback
-												>{request.friendUsername.charAt(0).toUpperCase()}</AvatarFallback
-											>
-										</Avatar>
 										<div class="user-info">
 											<span class="username">{request.friendUsername}</span>
 											<Badge variant="outline">Pending</Badge>
@@ -264,15 +259,10 @@
 							<div class="user-grid">
 								{#each sentRequests as request (request.id)}
 									<div class="user-card">
-										<Avatar>
-											<AvatarImage
-												src={request.friendProfilePictureUrl}
-												alt={request.friendUsername}
+										<ProfilePicture
+											username={request.friendUsername}
+											profilePictureUrl={request.friendProfilePictureUrl}
 										/>
-											<AvatarFallback
-												>{request.friendUsername.charAt(0).toUpperCase()}</AvatarFallback
-											>
-										</Avatar>
 										<div class="user-info">
 											<span class="username">{request.friendUsername}</span>
 											<Badge variant="secondary">Sent</Badge>
@@ -305,10 +295,10 @@
 								<div class="user-grid">
 									{#each searchResults as user (user.id)}
 										<div class="user-card">
-											<Avatar>
-												<AvatarImage src={user.profilePictureUrl} alt={user.username} />
-												<AvatarFallback>{user.username.charAt(0).toUpperCase()}</AvatarFallback>
-											</Avatar>
+											<ProfilePicture
+												username={user.username}
+												profilePictureUrl={user.profilePictureUrl}
+											/>
 											<div class="user-info">
 												<span class="username">{user.username}</span>
 												{#if user.friendshipStatus === 'accepted'}

src/service-worker.ts

@@ -222,3 +222,52 @@ self.addEventListener('fetch', (event) => {
 
 	event.respondWith(respond());
 });
+
+// Handle push notifications
+self.addEventListener('push', (event) => {
+	if (!event.data) {
+		return;
+	}
+
+	const data = event.data.json();
+	const title = data.title || 'Serengo';
+	const options = {
+		body: data.body || '',
+		icon: data.icon || '/logo.svg',
+		badge: data.badge || '/logo.svg',
+		tag: data.tag || 'default',
+		data: data.data || {},
+		requireInteraction: false,
+		vibrate: [200, 100, 200]
+	};
+
+	event.waitUntil(self.registration.showNotification(title, options));
+});
+
+// Handle notification clicks
+self.addEventListener('notificationclick', (event) => {
+	event.notification.close();
+
+	const urlToOpen = event.notification.data?.url || '/';
+
+	event.waitUntil(
+		self.clients
+			.matchAll({
+				type: 'window',
+				includeUncontrolled: true
+			})
+			.then((clientList) => {
+				// Check if there's already a window open
+				for (const client of clientList) {
+					if (client.url === urlToOpen && 'focus' in client) {
+						return client.focus();
+					}
+				}
+
+				// Otherwise, open a new window
+				if (self.clients.openWindow) {
+					return self.clients.openWindow(urlToOpen);
+				}
+			})
+	);
+});