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

@@ -50,6 +50,13 @@
       "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: '^_'
+				}
+			]
 		}
 	},
 	{

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

@@ -52,7 +52,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 			"font-src 'self' fonts.gstatic.com; " +
 			"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; " +
+			"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/CommentsList.svelte

@@ -56,7 +56,7 @@
 		await apiSync.deleteComment(commentId, findId);
 	}
 
-	function canDeleteComment(comment: any): boolean {
+	function canDeleteComment(comment: { user: { id: string } }): boolean {
 		return Boolean(
 			currentUserId && (comment.user.id === currentUserId || comment.user.id === 'current-user')
 		);
@@ -65,7 +65,7 @@
 
 {#snippet loadingSkeleton()}
 	<div class="loading-skeleton">
-		{#each Array(3) as _}
+		{#each Array(3) as _, index (index)}
 			<div class="comment-skeleton">
 				<Skeleton class="avatar-skeleton" />
 				<div class="content-skeleton">

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(
-					likeState.set({
+					(state: { isLiked: boolean; likeCount: number; isLoading: boolean }) => {
-						isLiked: state.isLiked,
+						likeState.set({
-						likeCount: state.likeCount,
+							isLiked: state.isLiked,
-						isLoading: state.isLoading
+							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 ($likeState.isLoading) return;
-		if (currentState && (currentState as any).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({
+			const searchParams = new URL('/api/places', window.location.origin).searchParams;
-				action: 'autocomplete',
+			searchParams.set('action', 'autocomplete');
-				query: query.trim()
+			searchParams.set('query', query.trim());
-			});
 
 			if ($coordinates) {
-				params.set('lat', $coordinates.latitude.toString());
+				searchParams.set('lat', $coordinates.latitude.toString());
-				params.set('lng', $coordinates.longitude.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,
@@ -10,6 +11,7 @@
 	import { Skeleton } from './skeleton';
 	import ProfilePicture from './ProfilePicture.svelte';
 	import ProfilePictureSheet from './ProfilePictureSheet.svelte';
+	import NotificationSettingsSheet from './NotificationSettingsSheet.svelte';
 
 	interface Props {
 		username: string;
@@ -21,6 +23,7 @@
 	let { username, id, profilePictureUrl, loading = false }: Props = $props();
 
 	let showProfilePictureSheet = $state(false);
+	let showNotificationSettingsSheet = $state(false);
 
 	function openProfilePictureSheet() {
 		showProfilePictureSheet = true;
@@ -29,6 +32,14 @@
 	function closeProfilePictureSheet() {
 		showProfilePictureSheet = false;
 	}
+
+	function openNotificationSettingsSheet() {
+		showNotificationSettingsSheet = true;
+	}
+
+	function closeNotificationSettingsSheet() {
+		showNotificationSettingsSheet = false;
+	}
 </script>
 
 <DropdownMenu>
@@ -71,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 />
@@ -106,6 +121,10 @@
 	/>
 {/if}
 
+{#if showNotificationSettingsSheet}
+	<NotificationSettingsSheet onClose={closeNotificationSettingsSheet} />
+{/if}
+
 <style>
 	:global(.profile-trigger) {
 		background: none;
@@ -188,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/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

@@ -10,6 +10,10 @@ 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(),
@@ -88,15 +88,62 @@ export const findComment = pgTable('find_comment', {
 	updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'date' }).defaultNow().notNull()
 });
 
-// Type exports for the new tables
+// 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/routes/+layout.svelte

@@ -6,6 +6,7 @@
 	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';
 
@@ -42,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/api/finds/[findId]/comments/+server.ts

@@ -1,8 +1,10 @@
 import { json } from '@sveltejs/kit';
 import { db } from '$lib/server/db';
-import { findComment, user } from '$lib/server/db/schema';
+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;
@@ -74,7 +76,7 @@ export const POST: RequestHandler = async ({ params, locals, request }) => {
 		const commentId = crypto.randomUUID();
 		const now = new Date();
 
-		const [newComment] = await db
+		await db
 			.insert(findComment)
 			.values({
 				id: commentId,
@@ -108,6 +110,57 @@ export const POST: RequestHandler = async ({ params, locals, request }) => {
 			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]

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

@@ -1,7 +1,7 @@
 import { json } from '@sveltejs/kit';
 import { db } from '$lib/server/db';
-import { findComment, user } from '$lib/server/db/schema';
+import { findComment } from '$lib/server/db/schema';
-import { eq, and } from 'drizzle-orm';
+import { eq } from 'drizzle-orm';
 import type { RequestHandler } from './$types';
 
 export const DELETE: RequestHandler = async ({ params, locals }) => {

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

@@ -134,10 +134,10 @@
 	// Search users when query changes with debounce
 	let searchTimeout: ReturnType<typeof setTimeout>;
 	$effect(() => {
-		// Track searchQuery dependency explicitly
+		if (searchQuery) {
-		searchQuery;
+			clearTimeout(searchTimeout);
-		clearTimeout(searchTimeout);
+			searchTimeout = setTimeout(searchUsers, 300);
-		searchTimeout = setTimeout(searchUsers, 300);
+		}
 	});
 </script>
 

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);
+				}
+			})
+	);
+});