Compare commits
12 Commits
syncservic
...
notificati
| Author | SHA1 | Date | |
|---|---|---|---|
ae339d68e1
|
|||
|
0754d62d0e
|
|||
|
e27b2498b7
|
|||
|
4d288347ab
|
|||
|
d7f803c782
|
|||
|
df675640c2
|
|||
|
2efd4969e7
|
|||
|
b8c88d7a58
|
|||
|
af49ed6237
|
|||
|
d3adac8acc
|
|||
|
9800be0147
|
|||
|
4c973c4e7d
|
@@ -38,3 +38,8 @@ R2_BUCKET_NAME=""
|
|||||||
|
|
||||||
# Google Maps API for Places search
|
# Google Maps API for Places search
|
||||||
GOOGLE_MAPS_API_KEY="your_google_maps_api_key_here"
|
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"
|
||||||
|
|||||||
11
drizzle/0006_strange_firebird.sql
Normal file
11
drizzle/0006_strange_firebird.sql
Normal file
@@ -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;
|
||||||
37
drizzle/0007_grey_dark_beast.sql
Normal file
37
drizzle/0007_grey_dark_beast.sql
Normal file
@@ -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;
|
||||||
521
drizzle/meta/0006_snapshot.json
Normal file
521
drizzle/meta/0006_snapshot.json
Normal file
@@ -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": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
764
drizzle/meta/0007_snapshot.json
Normal file
764
drizzle/meta/0007_snapshot.json
Normal file
@@ -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": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -43,6 +43,20 @@
|
|||||||
"when": 1760631798851,
|
"when": 1760631798851,
|
||||||
"tag": "0005_rapid_warpath",
|
"tag": "0005_rapid_warpath",
|
||||||
"breakpoints": true
|
"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
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -25,7 +25,17 @@ export default defineConfig(
|
|||||||
rules: {
|
rules: {
|
||||||
// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
|
// 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
|
// 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: '^_'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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
|
|
||||||
@@ -2,6 +2,65 @@
|
|||||||
|
|
||||||
## Oktober 2025
|
## 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
|
### 21 Oktober 2025 (Maandag) - 4 uren
|
||||||
|
|
||||||
**Werk uitgevoerd:**
|
**Werk uitgevoerd:**
|
||||||
@@ -322,9 +381,9 @@
|
|||||||
|
|
||||||
## Totaal Overzicht
|
## Totaal Overzicht
|
||||||
|
|
||||||
**Totale geschatte uren:** 67 uren
|
**Totale geschatte uren:** 80 uren
|
||||||
**Werkdagen:** 12 dagen
|
**Werkdagen:** 14 dagen
|
||||||
**Gemiddelde uren per dag:** 5.6 uur
|
**Gemiddelde uren per dag:** 5.8 uur
|
||||||
|
|
||||||
### Project Milestones:
|
### Project Milestones:
|
||||||
|
|
||||||
@@ -340,6 +399,8 @@
|
|||||||
10. **16 Okt**: Friends & Privacy System implementatie
|
10. **16 Okt**: Friends & Privacy System implementatie
|
||||||
11. **20 Okt**: Search logic improvements
|
11. **20 Okt**: Search logic improvements
|
||||||
12. **21 Okt**: UI refinement en bug fixes
|
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:
|
### Hoofdfunctionaliteiten geïmplementeerd:
|
||||||
|
|
||||||
@@ -366,3 +427,7 @@
|
|||||||
- [x] Privacy-bewuste find filtering met vriendenspecifieke zichtbaarheid
|
- [x] Privacy-bewuste find filtering met vriendenspecifieke zichtbaarheid
|
||||||
- [x] Friends management pagina met gebruikerszoekfunctionaliteit
|
- [x] Friends management pagina met gebruikerszoekfunctionaliteit
|
||||||
- [x] Real-time find filtering op basis van privacy instellingen
|
- [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
|
||||||
|
|||||||
@@ -59,9 +59,12 @@
|
|||||||
"@node-rs/argon2": "^2.0.2",
|
"@node-rs/argon2": "^2.0.2",
|
||||||
"@sveltejs/adapter-vercel": "^5.10.2",
|
"@sveltejs/adapter-vercel": "^5.10.2",
|
||||||
"arctic": "^3.7.0",
|
"arctic": "^3.7.0",
|
||||||
|
"lucide-svelte": "^0.553.0",
|
||||||
|
"nanoid": "^5.1.6",
|
||||||
"postgres": "^3.4.5",
|
"postgres": "^3.4.5",
|
||||||
"sharp": "^0.34.4",
|
"sharp": "^0.34.4",
|
||||||
"svelte-maplibre": "^1.2.1"
|
"svelte-maplibre": "^1.2.1",
|
||||||
|
"web-push": "^3.6.7"
|
||||||
},
|
},
|
||||||
"pnpm": {
|
"pnpm": {
|
||||||
"onlyBuiltDependencies": [
|
"onlyBuiltDependencies": [
|
||||||
|
|||||||
20
scripts/generate-vapid-keys.js
Executable file
20
scripts/generate-vapid-keys.js
Executable file
@@ -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!');
|
||||||
@@ -50,9 +50,9 @@ export const handle: Handle = async ({ event, resolve }) => {
|
|||||||
"worker-src 'self' blob:; " +
|
"worker-src 'self' blob:; " +
|
||||||
"style-src 'self' 'unsafe-inline' fonts.googleapis.com; " +
|
"style-src 'self' 'unsafe-inline' fonts.googleapis.com; " +
|
||||||
"font-src 'self' fonts.gstatic.com; " +
|
"font-src 'self' fonts.gstatic.com; " +
|
||||||
"img-src 'self' data: blob: *.openstreetmap.org *.tile.openstreetmap.org *.r2.cloudflarestorage.com; " +
|
"img-src 'self' data: blob: *.openstreetmap.org *.tile.openstreetmap.org *.r2.cloudflarestorage.com *.r2.dev; " +
|
||||||
"media-src 'self' *.r2.cloudflarestorage.com; " +
|
"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'; " +
|
"frame-ancestors 'none'; " +
|
||||||
"base-uri 'self'; " +
|
"base-uri 'self'; " +
|
||||||
"form-action 'self';"
|
"form-action 'self';"
|
||||||
|
|||||||
141
src/lib/components/Comment.svelte
Normal file
141
src/lib/components/Comment.svelte
Normal file
@@ -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>
|
||||||
119
src/lib/components/CommentForm.svelte
Normal file
119
src/lib/components/CommentForm.svelte
Normal file
@@ -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>
|
||||||
243
src/lib/components/CommentsList.svelte
Normal file
243
src/lib/components/CommentsList.svelte
Normal file
@@ -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>
|
||||||
@@ -3,8 +3,9 @@
|
|||||||
import { Badge } from '$lib/components/badge';
|
import { Badge } from '$lib/components/badge';
|
||||||
import LikeButton from '$lib/components/LikeButton.svelte';
|
import LikeButton from '$lib/components/LikeButton.svelte';
|
||||||
import VideoPlayer from '$lib/components/VideoPlayer.svelte';
|
import VideoPlayer from '$lib/components/VideoPlayer.svelte';
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from '$lib/components/avatar';
|
import ProfilePicture from '$lib/components/ProfilePicture.svelte';
|
||||||
import { MoreHorizontal, MessageCircle, Share } from '@lucide/svelte';
|
import CommentsList from '$lib/components/CommentsList.svelte';
|
||||||
|
import { Ellipsis, MessageCircle, Share } from '@lucide/svelte';
|
||||||
|
|
||||||
interface FindCardProps {
|
interface FindCardProps {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -23,6 +24,8 @@
|
|||||||
}>;
|
}>;
|
||||||
likeCount?: number;
|
likeCount?: number;
|
||||||
isLiked?: boolean;
|
isLiked?: boolean;
|
||||||
|
commentCount?: number;
|
||||||
|
currentUserId?: string;
|
||||||
onExplore?: (id: string) => void;
|
onExplore?: (id: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -36,15 +39,19 @@
|
|||||||
media,
|
media,
|
||||||
likeCount = 0,
|
likeCount = 0,
|
||||||
isLiked = false,
|
isLiked = false,
|
||||||
|
commentCount = 0,
|
||||||
|
currentUserId,
|
||||||
onExplore
|
onExplore
|
||||||
}: FindCardProps = $props();
|
}: FindCardProps = $props();
|
||||||
|
|
||||||
|
let showComments = $state(false);
|
||||||
|
|
||||||
function handleExplore() {
|
function handleExplore() {
|
||||||
onExplore?.(id);
|
onExplore?.(id);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getUserInitials(username: string): string {
|
function toggleComments() {
|
||||||
return username.slice(0, 2).toUpperCase();
|
showComments = !showComments;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -52,14 +59,11 @@
|
|||||||
<!-- Post Header -->
|
<!-- Post Header -->
|
||||||
<div class="post-header">
|
<div class="post-header">
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
<Avatar class="avatar">
|
<ProfilePicture
|
||||||
{#if user.profilePictureUrl}
|
username={user.username}
|
||||||
<AvatarImage src={user.profilePictureUrl} alt={user.username} />
|
profilePictureUrl={user.profilePictureUrl}
|
||||||
{/if}
|
class="avatar"
|
||||||
<AvatarFallback class="avatar-fallback">
|
/>
|
||||||
{getUserInitials(user.username)}
|
|
||||||
</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
<div class="user-details">
|
<div class="user-details">
|
||||||
<div class="username">@{user.username}</div>
|
<div class="username">@{user.username}</div>
|
||||||
{#if locationName}
|
{#if locationName}
|
||||||
@@ -80,7 +84,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="ghost" size="sm" class="more-button">
|
<Button variant="ghost" size="sm" class="more-button">
|
||||||
<MoreHorizontal size={16} />
|
<Ellipsis size={16} />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -101,8 +105,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Media -->
|
<!-- Media -->
|
||||||
<div class="post-media">
|
|
||||||
{#if media && media.length > 0}
|
{#if media && media.length > 0}
|
||||||
|
<div class="post-media">
|
||||||
{#if media[0].type === 'photo'}
|
{#if media[0].type === 'photo'}
|
||||||
<img
|
<img
|
||||||
src={media[0].thumbnailUrl || media[0].url}
|
src={media[0].thumbnailUrl || media[0].url}
|
||||||
@@ -120,29 +124,16 @@
|
|||||||
class="media-video"
|
class="media-video"
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Post Actions -->
|
<!-- Post Actions -->
|
||||||
<div class="post-actions">
|
<div class="post-actions">
|
||||||
<div class="action-buttons">
|
<div class="action-buttons">
|
||||||
<LikeButton findId={id} {isLiked} {likeCount} size="sm" />
|
<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} />
|
<MessageCircle size={16} />
|
||||||
<span>comment</span>
|
<span>{commentCount || 'comment'}</span>
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" size="sm" class="action-button">
|
<Button variant="ghost" size="sm" class="action-button">
|
||||||
<Share size={16} />
|
<Share size={16} />
|
||||||
@@ -153,6 +144,19 @@
|
|||||||
explore
|
explore
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Comments Section -->
|
||||||
|
{#if showComments}
|
||||||
|
<div class="comments-section">
|
||||||
|
<CommentsList
|
||||||
|
findId={id}
|
||||||
|
{currentUserId}
|
||||||
|
collapsed={false}
|
||||||
|
maxComments={5}
|
||||||
|
showCommentForm={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -258,33 +262,23 @@
|
|||||||
/* Media */
|
/* Media */
|
||||||
.post-media {
|
.post-media {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 16/10;
|
max-height: 600px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: hsl(var(--muted));
|
background: hsl(var(--muted));
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-image {
|
.media-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: auto;
|
||||||
|
max-height: 600px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.media-video) {
|
:global(.media-video) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: auto;
|
||||||
}
|
max-height: 600px;
|
||||||
|
|
||||||
.no-media {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: hsl(var(--muted-foreground));
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Post Actions */
|
/* Post Actions */
|
||||||
@@ -317,6 +311,13 @@
|
|||||||
font-size: 0.875rem;
|
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 */
|
/* Mobile responsive */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.post-actions {
|
.post-actions {
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '$lib/components/sheet';
|
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '$lib/components/sheet';
|
||||||
import LikeButton from '$lib/components/LikeButton.svelte';
|
import LikeButton from '$lib/components/LikeButton.svelte';
|
||||||
import VideoPlayer from '$lib/components/VideoPlayer.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 {
|
interface Find {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -30,9 +31,10 @@
|
|||||||
interface Props {
|
interface Props {
|
||||||
find: Find | null;
|
find: Find | null;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
|
currentUserId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { find, onClose }: Props = $props();
|
let { find, onClose, currentUserId }: Props = $props();
|
||||||
|
|
||||||
let showModal = $state(true);
|
let showModal = $state(true);
|
||||||
let currentMediaIndex = $state(0);
|
let currentMediaIndex = $state(0);
|
||||||
@@ -112,14 +114,11 @@
|
|||||||
<SheetContent side={isMobile ? 'bottom' : 'right'} class="sheet-content">
|
<SheetContent side={isMobile ? 'bottom' : 'right'} class="sheet-content">
|
||||||
<SheetHeader class="sheet-header">
|
<SheetHeader class="sheet-header">
|
||||||
<div class="user-section">
|
<div class="user-section">
|
||||||
<Avatar class="user-avatar">
|
<ProfilePicture
|
||||||
{#if find.user.profilePictureUrl}
|
username={find.user.username}
|
||||||
<AvatarImage src={find.user.profilePictureUrl} alt={find.user.username} />
|
profilePictureUrl={find.user.profilePictureUrl}
|
||||||
{/if}
|
class="user-avatar"
|
||||||
<AvatarFallback class="avatar-fallback">
|
/>
|
||||||
{find.user.username.slice(0, 2).toUpperCase()}
|
|
||||||
</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
<SheetTitle class="find-title">{find.title}</SheetTitle>
|
<SheetTitle class="find-title">{find.title}</SheetTitle>
|
||||||
<div class="find-meta">
|
<div class="find-meta">
|
||||||
@@ -254,6 +253,15 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="comments-section">
|
||||||
|
<CommentsList
|
||||||
|
findId={find.id}
|
||||||
|
{currentUserId}
|
||||||
|
isScrollable={true}
|
||||||
|
showCommentForm={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SheetContent>
|
</SheetContent>
|
||||||
</Sheet>
|
</Sheet>
|
||||||
@@ -278,7 +286,7 @@
|
|||||||
/* Mobile styles (bottom sheet) */
|
/* Mobile styles (bottom sheet) */
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
:global(.sheet-content) {
|
:global(.sheet-content) {
|
||||||
height: 80vh !important;
|
height: 50vh !important;
|
||||||
border-radius: 16px 16px 0 0 !important;
|
border-radius: 16px 16px 0 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -414,7 +422,7 @@
|
|||||||
.media-image {
|
.media-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.media-video) {
|
:global(.media-video) {
|
||||||
@@ -545,6 +553,30 @@
|
|||||||
background: hsl(var(--secondary) / 0.8);
|
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 */
|
/* Mobile specific adjustments */
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
:global(.sheet-header) {
|
:global(.sheet-header) {
|
||||||
@@ -576,5 +608,9 @@
|
|||||||
.action-button {
|
.action-button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comments-section {
|
||||||
|
height: calc(80vh - 380px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { ProfilePanel } from '$lib';
|
import { ProfilePanel } from '$lib';
|
||||||
|
import { resolveRoute } from '$app/paths';
|
||||||
|
|
||||||
type User = {
|
type User = {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -12,7 +13,7 @@
|
|||||||
|
|
||||||
<header class="app-header">
|
<header class="app-header">
|
||||||
<div class="header-content">
|
<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">
|
<div class="profile-container">
|
||||||
<ProfilePanel
|
<ProfilePanel
|
||||||
username={user.username}
|
username={user.username}
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
isLoading: false
|
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
|
// Initialize API sync and subscribe to global state
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
@@ -65,13 +65,15 @@
|
|||||||
|
|
||||||
// Subscribe to global state for this find
|
// Subscribe to global state for this find
|
||||||
const globalLikeState = apiSync.subscribeFindLikes(findId);
|
const globalLikeState = apiSync.subscribeFindLikes(findId);
|
||||||
globalLikeState.subscribe((state: any) => {
|
globalLikeState.subscribe(
|
||||||
|
(state: { isLiked: boolean; likeCount: number; isLoading: boolean }) => {
|
||||||
likeState.set({
|
likeState.set({
|
||||||
isLiked: state.isLiked,
|
isLiked: state.isLiked,
|
||||||
likeCount: state.likeCount,
|
likeCount: state.likeCount,
|
||||||
isLoading: state.isLoading
|
isLoading: state.isLoading
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
|
);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to initialize API sync:', error);
|
console.error('Failed to initialize API sync:', error);
|
||||||
}
|
}
|
||||||
@@ -81,8 +83,7 @@
|
|||||||
async function toggleLike() {
|
async function toggleLike() {
|
||||||
if (!apiSync || !browser) return;
|
if (!apiSync || !browser) return;
|
||||||
|
|
||||||
const currentState = likeState;
|
if ($likeState.isLoading) return;
|
||||||
if (currentState && (currentState as any).isLoading) return;
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await apiSync.toggleLike(findId);
|
await apiSync.toggleLike(findId);
|
||||||
|
|||||||
194
src/lib/components/NotificationManager.svelte
Normal file
194
src/lib/components/NotificationManager.svelte
Normal file
@@ -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}
|
||||||
173
src/lib/components/NotificationPrompt.svelte
Normal file
173
src/lib/components/NotificationPrompt.svelte
Normal file
@@ -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>
|
||||||
469
src/lib/components/NotificationSettings.svelte
Normal file
469
src/lib/components/NotificationSettings.svelte
Normal file
@@ -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>
|
||||||
36
src/lib/components/NotificationSettingsSheet.svelte
Normal file
36
src/lib/components/NotificationSettingsSheet.svelte
Normal file
@@ -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>
|
||||||
@@ -36,17 +36,16 @@
|
|||||||
|
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
try {
|
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) {
|
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) {
|
if (response.ok) {
|
||||||
suggestions = await response.json();
|
suggestions = await response.json();
|
||||||
showSuggestions = true;
|
showSuggestions = true;
|
||||||
@@ -179,7 +178,7 @@
|
|||||||
<div class="suggestion-content">
|
<div class="suggestion-content">
|
||||||
<span class="suggestion-name">{suggestion.description}</span>
|
<span class="suggestion-name">{suggestion.description}</span>
|
||||||
<div class="suggestion-types">
|
<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>
|
<span class="suggestion-type">{type.replace(/_/g, ' ')}</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { enhance } from '$app/forms';
|
import { enhance } from '$app/forms';
|
||||||
|
import { resolveRoute } from '$app/paths';
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
@@ -7,9 +8,10 @@
|
|||||||
DropdownMenuSeparator,
|
DropdownMenuSeparator,
|
||||||
DropdownMenuTrigger
|
DropdownMenuTrigger
|
||||||
} from './dropdown-menu';
|
} from './dropdown-menu';
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from './avatar';
|
|
||||||
import { Skeleton } from './skeleton';
|
import { Skeleton } from './skeleton';
|
||||||
|
import ProfilePicture from './ProfilePicture.svelte';
|
||||||
import ProfilePictureSheet from './ProfilePictureSheet.svelte';
|
import ProfilePictureSheet from './ProfilePictureSheet.svelte';
|
||||||
|
import NotificationSettingsSheet from './NotificationSettingsSheet.svelte';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
username: string;
|
username: string;
|
||||||
@@ -21,9 +23,7 @@
|
|||||||
let { username, id, profilePictureUrl, loading = false }: Props = $props();
|
let { username, id, profilePictureUrl, loading = false }: Props = $props();
|
||||||
|
|
||||||
let showProfilePictureSheet = $state(false);
|
let showProfilePictureSheet = $state(false);
|
||||||
|
let showNotificationSettingsSheet = $state(false);
|
||||||
// Get the first letter of username for avatar
|
|
||||||
const initial = username.charAt(0).toUpperCase();
|
|
||||||
|
|
||||||
function openProfilePictureSheet() {
|
function openProfilePictureSheet() {
|
||||||
showProfilePictureSheet = true;
|
showProfilePictureSheet = true;
|
||||||
@@ -32,22 +32,19 @@
|
|||||||
function closeProfilePictureSheet() {
|
function closeProfilePictureSheet() {
|
||||||
showProfilePictureSheet = false;
|
showProfilePictureSheet = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openNotificationSettingsSheet() {
|
||||||
|
showNotificationSettingsSheet = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeNotificationSettingsSheet() {
|
||||||
|
showNotificationSettingsSheet = false;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger class="profile-trigger">
|
<DropdownMenuTrigger class="profile-trigger">
|
||||||
{#if loading}
|
<ProfilePicture {username} {profilePictureUrl} {loading} class="profile-avatar" />
|
||||||
<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}
|
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
|
|
||||||
<DropdownMenuContent align="end" class="profile-dropdown-content">
|
<DropdownMenuContent align="end" class="profile-dropdown-content">
|
||||||
@@ -85,7 +82,11 @@
|
|||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
|
|
||||||
<DropdownMenuItem class="friends-item">
|
<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>
|
</DropdownMenuItem>
|
||||||
|
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
@@ -120,6 +121,10 @@
|
|||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
{#if showNotificationSettingsSheet}
|
||||||
|
<NotificationSettingsSheet onClose={closeNotificationSettingsSheet} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:global(.profile-trigger) {
|
:global(.profile-trigger) {
|
||||||
background: none;
|
background: none;
|
||||||
@@ -144,15 +149,6 @@
|
|||||||
height: 40px;
|
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) {
|
:global(.profile-dropdown-content) {
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
max-width: 240px;
|
max-width: 240px;
|
||||||
@@ -211,6 +207,16 @@
|
|||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.notification-settings-item) {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.notification-settings-item:hover) {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
.friends-link {
|
.friends-link {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
59
src/lib/components/ProfilePicture.svelte
Normal file
59
src/lib/components/ProfilePicture.svelte
Normal file
@@ -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>
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
import { invalidateAll } from '$app/navigation';
|
import { invalidateAll } from '$app/navigation';
|
||||||
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from './sheet';
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from './sheet';
|
||||||
import { Button } from './button';
|
import { Button } from './button';
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from './avatar';
|
import ProfilePicture from './ProfilePicture.svelte';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
userId: string;
|
userId: string;
|
||||||
@@ -19,8 +19,6 @@
|
|||||||
let isDeleting = $state(false);
|
let isDeleting = $state(false);
|
||||||
let showModal = $state(true);
|
let showModal = $state(true);
|
||||||
|
|
||||||
const initial = username.charAt(0).toUpperCase();
|
|
||||||
|
|
||||||
// Close modal when showModal changes to false
|
// Close modal when showModal changes to false
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (!showModal && onClose) {
|
if (!showModal && onClose) {
|
||||||
@@ -118,14 +116,7 @@
|
|||||||
|
|
||||||
<div class="profile-picture-content">
|
<div class="profile-picture-content">
|
||||||
<div class="current-avatar">
|
<div class="current-avatar">
|
||||||
<Avatar class="large-avatar">
|
<ProfilePicture {username} {profilePictureUrl} size="xl" class="large-avatar" />
|
||||||
{#if profilePictureUrl}
|
|
||||||
<AvatarImage src={profilePictureUrl} alt={username} />
|
|
||||||
{/if}
|
|
||||||
<AvatarFallback class="large-avatar-fallback">
|
|
||||||
{initial}
|
|
||||||
</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="upload-section">
|
<div class="upload-section">
|
||||||
@@ -190,15 +181,6 @@
|
|||||||
height: 120px;
|
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 {
|
.upload-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
import { cn, type WithElementRef } from '$lib/utils.js';
|
import { cn, type WithElementRef } from '$lib/utils.js';
|
||||||
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
|
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
|
||||||
import { type VariantProps, tv } from 'tailwind-variants';
|
import { type VariantProps, tv } from 'tailwind-variants';
|
||||||
|
import { resolveRoute } from '$app/paths';
|
||||||
|
|
||||||
export const buttonVariants = tv({
|
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",
|
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}
|
bind:this={ref}
|
||||||
data-slot="button"
|
data-slot="button"
|
||||||
class={cn(buttonVariants({ variant, size }), className)}
|
class={cn(buttonVariants({ variant, size }), className)}
|
||||||
href={disabled ? undefined : href}
|
href={disabled ? undefined : resolveRoute(href)}
|
||||||
aria-disabled={disabled}
|
aria-disabled={disabled}
|
||||||
role={disabled ? 'link' : undefined}
|
role={disabled ? 'link' : undefined}
|
||||||
tabindex={disabled ? -1 : undefined}
|
tabindex={disabled ? -1 : undefined}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { enhance } from '$app/forms';
|
import { enhance } from '$app/forms';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
import { resolveRoute } from '$app/paths';
|
||||||
import { Button } from '$lib/components/button/index.js';
|
import { Button } from '$lib/components/button/index.js';
|
||||||
import * as Card from '$lib/components/card/index.js';
|
import * as Card from '$lib/components/card/index.js';
|
||||||
import { Label } from '$lib/components/label/index.js';
|
import { Label } from '$lib/components/label/index.js';
|
||||||
@@ -62,7 +63,11 @@
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
<path
|
<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"
|
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"
|
||||||
|
|||||||
@@ -3,12 +3,17 @@ export { default as Input } from './components/Input.svelte';
|
|||||||
export { default as Button } from './components/Button.svelte';
|
export { default as Button } from './components/Button.svelte';
|
||||||
export { default as ErrorMessage } from './components/ErrorMessage.svelte';
|
export { default as ErrorMessage } from './components/ErrorMessage.svelte';
|
||||||
export { default as ProfilePanel } from './components/ProfilePanel.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 ProfilePictureSheet } from './components/ProfilePictureSheet.svelte';
|
||||||
export { default as Header } from './components/Header.svelte';
|
export { default as Header } from './components/Header.svelte';
|
||||||
export { default as Modal } from './components/Modal.svelte';
|
export { default as Modal } from './components/Modal.svelte';
|
||||||
export { default as Map } from './components/Map.svelte';
|
export { default as Map } from './components/Map.svelte';
|
||||||
export { default as LocationButton } from './components/LocationButton.svelte';
|
export { default as LocationButton } from './components/LocationButton.svelte';
|
||||||
export { default as LocationManager } from './components/LocationManager.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 FindCard } from './components/FindCard.svelte';
|
||||||
export { default as FindsList } from './components/FindsList.svelte';
|
export { default as FindsList } from './components/FindsList.svelte';
|
||||||
|
|
||||||
|
|||||||
@@ -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', {
|
export const user = pgTable('user', {
|
||||||
id: text('id').primaryKey(),
|
id: text('id').primaryKey(),
|
||||||
@@ -75,13 +75,75 @@ export const friendship = pgTable('friendship', {
|
|||||||
createdAt: timestamp('created_at', { withTimezone: true, mode: 'date' }).defaultNow().notNull()
|
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 Find = typeof find.$inferSelect;
|
||||||
export type FindMedia = typeof findMedia.$inferSelect;
|
export type FindMedia = typeof findMedia.$inferSelect;
|
||||||
export type FindLike = typeof findLike.$inferSelect;
|
export type FindLike = typeof findLike.$inferSelect;
|
||||||
|
export type FindComment = typeof findComment.$inferSelect;
|
||||||
export type Friendship = typeof friendship.$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 FindInsert = typeof find.$inferInsert;
|
||||||
export type FindMediaInsert = typeof findMedia.$inferInsert;
|
export type FindMediaInsert = typeof findMedia.$inferInsert;
|
||||||
export type FindLikeInsert = typeof findLike.$inferInsert;
|
export type FindLikeInsert = typeof findLike.$inferInsert;
|
||||||
|
export type FindCommentInsert = typeof findComment.$inferInsert;
|
||||||
export type FriendshipInsert = typeof friendship.$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;
|
||||||
|
|||||||
160
src/lib/server/notifications.ts
Normal file
160
src/lib/server/notifications.ts
Normal file
@@ -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();
|
||||||
185
src/lib/server/push.ts
Normal file
185
src/lib/server/push.ts
Normal file
@@ -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 };
|
||||||
@@ -59,9 +59,30 @@ export interface FindState {
|
|||||||
}>;
|
}>;
|
||||||
isLikedByUser: boolean;
|
isLikedByUser: boolean;
|
||||||
likeCount: number;
|
likeCount: number;
|
||||||
|
commentCount: number;
|
||||||
isFromFriend: boolean;
|
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
|
// Generate unique operation IDs
|
||||||
function generateOperationId(): string {
|
function generateOperationId(): string {
|
||||||
return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||||
@@ -93,6 +114,7 @@ class APISync {
|
|||||||
this.initializeEntityStore('find');
|
this.initializeEntityStore('find');
|
||||||
this.initializeEntityStore('user');
|
this.initializeEntityStore('user');
|
||||||
this.initializeEntityStore('friendship');
|
this.initializeEntityStore('friendship');
|
||||||
|
this.initializeEntityStore('comment');
|
||||||
|
|
||||||
// Start processing queue
|
// Start processing queue
|
||||||
this.startQueueProcessor();
|
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
|
* Check if entity state exists
|
||||||
*/
|
*/
|
||||||
@@ -359,6 +408,23 @@ class APISync {
|
|||||||
'Content-Type': 'application/json'
|
'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 {
|
} else {
|
||||||
throw new Error(`Unsupported operation: ${entityType}:${op}:${action}`);
|
throw new Error(`Unsupported operation: ${entityType}:${op}:${action}`);
|
||||||
}
|
}
|
||||||
@@ -373,6 +439,10 @@ class APISync {
|
|||||||
// Update entity state with successful result
|
// Update entity state with successful result
|
||||||
if (entityType === 'find' && action === 'like') {
|
if (entityType === 'find' && action === 'like') {
|
||||||
this.updateFindLikeState(entityId, result.isLiked, result.likeCount);
|
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 });
|
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)
|
* 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)
|
* Cleanup unused subscriptions (call this when components unmount)
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -6,11 +6,21 @@
|
|||||||
import { Toaster } from '$lib/components/sonner/index.js';
|
import { Toaster } from '$lib/components/sonner/index.js';
|
||||||
import { Skeleton } from '$lib/components/skeleton';
|
import { Skeleton } from '$lib/components/skeleton';
|
||||||
import LocationManager from '$lib/components/LocationManager.svelte';
|
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 { children, data } = $props();
|
||||||
let isLoginRoute = $derived(page.url.pathname.startsWith('/login'));
|
let isLoginRoute = $derived(page.url.pathname.startsWith('/login'));
|
||||||
let showHeader = $derived(!isLoginRoute && data?.user);
|
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>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
@@ -33,9 +43,10 @@
|
|||||||
|
|
||||||
<Toaster />
|
<Toaster />
|
||||||
|
|
||||||
<!-- Auto-start location watching for authenticated users -->
|
<!-- Auto-start location and notfication watching for authenticated users -->
|
||||||
{#if data?.user && !isLoginRoute}
|
{#if data?.user && !isLoginRoute}
|
||||||
<LocationManager autoStart={true} />
|
<LocationManager autoStart={true} />
|
||||||
|
<NotificationManager />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if showHeader && data.user}
|
{#if showHeader && data.user}
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
import { Button } from '$lib/components/button';
|
import { Button } from '$lib/components/button';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { browser } from '$app/environment';
|
import { browser } from '$app/environment';
|
||||||
|
import { apiSync, type FindState } from '$lib/stores/api-sync';
|
||||||
|
|
||||||
// Server response type
|
// Server response type
|
||||||
interface ServerFind {
|
interface ServerFind {
|
||||||
@@ -97,36 +98,6 @@
|
|||||||
// Initialize API sync with server data on mount
|
// Initialize API sync with server data on mount
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
if (browser && data.finds && data.finds.length > 0) {
|
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) => ({
|
const findStates: FindState[] = data.finds.map((serverFind: ServerFind) => ({
|
||||||
id: serverFind.id,
|
id: serverFind.id,
|
||||||
title: serverFind.title,
|
title: serverFind.title,
|
||||||
@@ -143,6 +114,7 @@
|
|||||||
media: serverFind.media,
|
media: serverFind.media,
|
||||||
isLikedByUser: Boolean(serverFind.isLikedByUser),
|
isLikedByUser: Boolean(serverFind.isLikedByUser),
|
||||||
likeCount: serverFind.likeCount || 0,
|
likeCount: serverFind.likeCount || 0,
|
||||||
|
commentCount: 0,
|
||||||
isFromFriend: Boolean(serverFind.isFromFriend)
|
isFromFriend: Boolean(serverFind.isFromFriend)
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@@ -316,7 +288,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if selectedFind}
|
{#if selectedFind}
|
||||||
<FindPreview find={selectedFind} onClose={closeFindPreview} />
|
<FindPreview find={selectedFind} onClose={closeFindPreview} currentUserId={data.user?.id} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
172
src/routes/api/finds/[findId]/comments/+server.ts
Normal file
172
src/routes/api/finds/[findId]/comments/+server.ts
Normal file
@@ -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 });
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -1,8 +1,10 @@
|
|||||||
import { json, error } from '@sveltejs/kit';
|
import { json, error } from '@sveltejs/kit';
|
||||||
import { db } from '$lib/server/db';
|
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 { eq, and, count } from 'drizzle-orm';
|
||||||
import { encodeBase64url } from '@oslojs/encoding';
|
import { encodeBase64url } from '@oslojs/encoding';
|
||||||
|
import { notificationService } from '$lib/server/notifications';
|
||||||
|
import { pushService } from '$lib/server/push';
|
||||||
|
|
||||||
function generateLikeId(): string {
|
function generateLikeId(): string {
|
||||||
const bytes = crypto.getRandomValues(new Uint8Array(15));
|
const bytes = crypto.getRandomValues(new Uint8Array(15));
|
||||||
@@ -59,6 +61,49 @@ export async function POST({
|
|||||||
|
|
||||||
const likeCount = likeCountResult[0]?.count ?? 0;
|
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({
|
return json({
|
||||||
success: true,
|
success: true,
|
||||||
likeId,
|
likeId,
|
||||||
|
|||||||
46
src/routes/api/finds/comments/[commentId]/+server.ts
Normal file
46
src/routes/api/finds/comments/[commentId]/+server.ts
Normal file
@@ -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 });
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -5,6 +5,8 @@ import { friendship, user } from '$lib/server/db/schema';
|
|||||||
import { eq, and, or } from 'drizzle-orm';
|
import { eq, and, or } from 'drizzle-orm';
|
||||||
import { encodeBase64url } from '@oslojs/encoding';
|
import { encodeBase64url } from '@oslojs/encoding';
|
||||||
import { getSignedR2Url } from '$lib/server/r2';
|
import { getSignedR2Url } from '$lib/server/r2';
|
||||||
|
import { notificationService } from '$lib/server/notifications';
|
||||||
|
import { pushService } from '$lib/server/push';
|
||||||
|
|
||||||
function generateFriendshipId(): string {
|
function generateFriendshipId(): string {
|
||||||
const bytes = crypto.getRandomValues(new Uint8Array(15));
|
const bytes = crypto.getRandomValues(new Uint8Array(15));
|
||||||
@@ -180,6 +182,34 @@ export const POST: RequestHandler = async ({ request, locals }) => {
|
|||||||
})
|
})
|
||||||
.returning();
|
.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] });
|
return json({ success: true, friendship: newFriendship[0] });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Error sending friend request:', err);
|
console.error('Error sending friend request:', err);
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
import { json, error } from '@sveltejs/kit';
|
import { json, error } from '@sveltejs/kit';
|
||||||
import type { RequestHandler } from './$types';
|
import type { RequestHandler } from './$types';
|
||||||
import { db } from '$lib/server/db';
|
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 { eq } from 'drizzle-orm';
|
||||||
|
import { notificationService } from '$lib/server/notifications';
|
||||||
|
import { pushService } from '$lib/server/push';
|
||||||
|
|
||||||
export const PUT: RequestHandler = async ({ params, request, locals }) => {
|
export const PUT: RequestHandler = async ({ params, request, locals }) => {
|
||||||
if (!locals.user) {
|
if (!locals.user) {
|
||||||
@@ -72,6 +74,47 @@ export const PUT: RequestHandler = async ({ params, request, locals }) => {
|
|||||||
.where(eq(friendship.id, friendshipId))
|
.where(eq(friendship.id, friendshipId))
|
||||||
.returning();
|
.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] });
|
return json({ success: true, friendship: updatedFriendship[0] });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Error updating friendship:', err);
|
console.error('Error updating friendship:', err);
|
||||||
|
|||||||
83
src/routes/api/notifications/+server.ts
Normal file
83
src/routes/api/notifications/+server.ts
Normal file
@@ -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 });
|
||||||
|
}
|
||||||
|
};
|
||||||
18
src/routes/api/notifications/count/+server.ts
Normal file
18
src/routes/api/notifications/count/+server.ts
Normal file
@@ -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 });
|
||||||
|
}
|
||||||
|
};
|
||||||
93
src/routes/api/notifications/preferences/+server.ts
Normal file
93
src/routes/api/notifications/preferences/+server.ts
Normal file
@@ -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');
|
||||||
|
}
|
||||||
|
};
|
||||||
54
src/routes/api/notifications/subscribe/+server.ts
Normal file
54
src/routes/api/notifications/subscribe/+server.ts
Normal file
@@ -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 });
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/card';
|
||||||
import { Button } from '$lib/components/button';
|
import { Button } from '$lib/components/button';
|
||||||
import { Input } from '$lib/components/input';
|
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 { Badge } from '$lib/components/badge';
|
||||||
import { toast } from 'svelte-sonner';
|
import { toast } from 'svelte-sonner';
|
||||||
import type { PageData } from './$types';
|
import type { PageData } from './$types';
|
||||||
@@ -134,10 +134,10 @@
|
|||||||
// Search users when query changes with debounce
|
// Search users when query changes with debounce
|
||||||
let searchTimeout: ReturnType<typeof setTimeout>;
|
let searchTimeout: ReturnType<typeof setTimeout>;
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
// Track searchQuery dependency explicitly
|
if (searchQuery) {
|
||||||
searchQuery;
|
|
||||||
clearTimeout(searchTimeout);
|
clearTimeout(searchTimeout);
|
||||||
searchTimeout = setTimeout(searchUsers, 300);
|
searchTimeout = setTimeout(searchUsers, 300);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -184,10 +184,10 @@
|
|||||||
<div class="user-grid">
|
<div class="user-grid">
|
||||||
{#each friends as friend (friend.id)}
|
{#each friends as friend (friend.id)}
|
||||||
<div class="user-card">
|
<div class="user-card">
|
||||||
<Avatar>
|
<ProfilePicture
|
||||||
<AvatarImage src={friend.friendProfilePictureUrl} alt={friend.friendUsername} />
|
username={friend.friendUsername}
|
||||||
<AvatarFallback>{friend.friendUsername.charAt(0).toUpperCase()}</AvatarFallback>
|
profilePictureUrl={friend.friendProfilePictureUrl}
|
||||||
</Avatar>
|
/>
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
<span class="username">{friend.friendUsername}</span>
|
<span class="username">{friend.friendUsername}</span>
|
||||||
<Badge variant="secondary">Friend</Badge>
|
<Badge variant="secondary">Friend</Badge>
|
||||||
@@ -218,15 +218,10 @@
|
|||||||
<div class="user-grid">
|
<div class="user-grid">
|
||||||
{#each receivedRequests as request (request.id)}
|
{#each receivedRequests as request (request.id)}
|
||||||
<div class="user-card">
|
<div class="user-card">
|
||||||
<Avatar>
|
<ProfilePicture
|
||||||
<AvatarImage
|
username={request.friendUsername}
|
||||||
src={request.friendProfilePictureUrl}
|
profilePictureUrl={request.friendProfilePictureUrl}
|
||||||
alt={request.friendUsername}
|
|
||||||
/>
|
/>
|
||||||
<AvatarFallback
|
|
||||||
>{request.friendUsername.charAt(0).toUpperCase()}</AvatarFallback
|
|
||||||
>
|
|
||||||
</Avatar>
|
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
<span class="username">{request.friendUsername}</span>
|
<span class="username">{request.friendUsername}</span>
|
||||||
<Badge variant="outline">Pending</Badge>
|
<Badge variant="outline">Pending</Badge>
|
||||||
@@ -264,15 +259,10 @@
|
|||||||
<div class="user-grid">
|
<div class="user-grid">
|
||||||
{#each sentRequests as request (request.id)}
|
{#each sentRequests as request (request.id)}
|
||||||
<div class="user-card">
|
<div class="user-card">
|
||||||
<Avatar>
|
<ProfilePicture
|
||||||
<AvatarImage
|
username={request.friendUsername}
|
||||||
src={request.friendProfilePictureUrl}
|
profilePictureUrl={request.friendProfilePictureUrl}
|
||||||
alt={request.friendUsername}
|
|
||||||
/>
|
/>
|
||||||
<AvatarFallback
|
|
||||||
>{request.friendUsername.charAt(0).toUpperCase()}</AvatarFallback
|
|
||||||
>
|
|
||||||
</Avatar>
|
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
<span class="username">{request.friendUsername}</span>
|
<span class="username">{request.friendUsername}</span>
|
||||||
<Badge variant="secondary">Sent</Badge>
|
<Badge variant="secondary">Sent</Badge>
|
||||||
@@ -305,10 +295,10 @@
|
|||||||
<div class="user-grid">
|
<div class="user-grid">
|
||||||
{#each searchResults as user (user.id)}
|
{#each searchResults as user (user.id)}
|
||||||
<div class="user-card">
|
<div class="user-card">
|
||||||
<Avatar>
|
<ProfilePicture
|
||||||
<AvatarImage src={user.profilePictureUrl} alt={user.username} />
|
username={user.username}
|
||||||
<AvatarFallback>{user.username.charAt(0).toUpperCase()}</AvatarFallback>
|
profilePictureUrl={user.profilePictureUrl}
|
||||||
</Avatar>
|
/>
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
<span class="username">{user.username}</span>
|
<span class="username">{user.username}</span>
|
||||||
{#if user.friendshipStatus === 'accepted'}
|
{#if user.friendshipStatus === 'accepted'}
|
||||||
|
|||||||
@@ -222,3 +222,52 @@ self.addEventListener('fetch', (event) => {
|
|||||||
|
|
||||||
event.respondWith(respond());
|
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);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user