Release 202506091433

.clinerules

@@ -1,53 +0,0 @@
-# Cursor Rules
-
-- When merging tailwind classes, use the `cn` function.
-- When using Tailwind and you need to merge classes use the `cn` function if avilable.
-- We use Tailwind 4 (the latest version), make sure to not use outdated classes.
-- Instead of using the syntax`Array<T>`, use `T[]`.
-- Use TypeScript `type` over `interface`.
-- You are forbiddent o add comments unless explicitly stated by the user.
-- Avoid sending JavaScript to the client. The JS send should be optional.
-- In prisma preffer `select` over `include` when making queries.
-- Import the types from prisma instead of hardcoding duplicates.
-- Avoid duplicating similar html code, and parametrize it when possible or create separate components.
-- Remember to check the prisma schema when doing things related to the database.
-- Avoid hardcoding enums from the database, import them from prisma.
-- Avoid using client-side JavaScript as much as possible. And if it has to be done, make it optional.
-- The admin pages can use client-side JavaScript.
-- Keep README.md in sync with new capabilities.
-- The package manager is npm.
-- For icons use the `Icon` component from `astro-icon/components`.
-- For icons use the Remix Icon library preferably.
-- Use the `Image` component from `astro:assets` for images.
-- Use the `zod` library for schema validation.
-- In the astro actions return, don't return success: true, or similar, just return an object with the newly created/edited objects or nothing.
-- When adding actions, don't create and export a new variable called actions. Notice that Astro already provides that variable from `import { actions } from 'astro:actions'`. So just add the new actions to the `server` variable in `web/src/actions/index.ts` and that's it.
-- Don't forget that the astro files have thre dashes (`---`) at the begining of the file and where the server js ends. I noticed that sometimes you forget them.
-- The admin actions go into a separate folder.
-- In Actro actions when throwing errors use ActionError.
-- @deprecated Don't import this object, use {@link actions} instead, like: `import { actions } from 'astro:actions'`. Example:
-
-  ```ts
-  import { actions } from "astro:actions"; /* CORRECT */
-  import { server } from "~/actions"; /* WRONG!!!! DON'T DO THIS */
-  import { adminAttributeActions } from "~/actions/admin/attribute.ts"; /* WRONG!!!! DON'T DO THIS */
-
-  const result = Astro.getActionResult(actions.admin.attribute.create);
-  ```
-
-- Always use Astro actions instead of with API routes or `if (Astro.request.method === "POST")`.
-- When adding clientside js do it with HTMX.
-- When adding HTMX, the layout component BaseLayout accepts a prop htmx to load it in that page. No need to use a cdn.
-- When redirecting to login use the `makeLoginUrl` function from web/src/lib/redirectUrls.ts
-
-  ```ts
-  function makeLoginUrl(
-    currentUrl: URL,
-    options: {
-      redirect?: URL | string | null;
-      error?: string | null;
-      logout?: boolean;
-      message?: string | null;
-    } = {}
-  );
-  ```

.env.example

@@ -0,0 +1,46 @@
+# Database
+POSTGRES_USER=your_db_user
+POSTGRES_PASSWORD=your_db_password
+POSTGRES_DATABASE=your_db_name
+DATABASE_URL="postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@database:5432/${POSTGRES_DATABASE}?schema=public"
+DATABASE_UI_URL="https://db.example.com"
+
+# Generic Config
+UPLOAD_DIR=/app/uploads
+SITE_URL="https://your-site.example.com"
+SOURCE_CODE_URL="https://your-source-code.example.com"
+TIME_TRAP_SECRET=your_time_trap_secret
+LOGS_UI_URL="https://logs.example.com"
+
+# Release Info
+RELEASE_NUMBER=
+RELEASE_DATE=
+
+# Redis
+REDIS_URL="redis://redis:6379"
+
+# Crawl4AI
+CRAWL4AI_BASE_URL="http://crawl4ai:11235"
+CRAWL4AI_API_TOKEN=your_crawl4ai_token
+
+# Tor and I2P
+ONION_ADDRESS="http://youronionaddress.onion"
+I2P_ADDRESS="http://youri2paddress.b32.i2p"
+I2P_PASS=your_i2p_password
+
+# Push Notifications
+VAPID_PUBLIC_KEY=your_vapid_public_key
+VAPID_PRIVATE_KEY=your_vapid_private_key
+VAPID_SUBJECT="mailto:your-email@example.com"
+
+# OpenAI
+OPENAI_API_KEY=your_openai_api_key
+OPENAI_BASE_URL="https://your-openai-base-url.example.com"
+OPENAI_MODEL=your_openai_model
+OPENAI_RETRY=3
+
+# Pyworker Crons
+CRON_TOSREVIEW_TASK="0 0 1 * *" # Every month
+CRON_USER_SENTIMENT_TASK="0 0 * * *" # Every day
+CRON_COMMENT_MODERATION_TASK="0 * * * *" # Every hour
+CRON_FORCE_TRIGGERS_TASK="0 2 * * *" # Every day

docker-compose.yml

@@ -7,12 +7,14 @@ services:
     volumes:
       - database:/var/lib/postgresql/data:z
     restart: unless-stopped
-    environment:
-      POSTGRES_USER: ${POSTGRES_USER:-kycnot}
-      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-kycnot}
-      POSTGRES_DB: ${POSTGRES_DATABASE:-kycnot}
+    env_file:
+      - .env
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot}"]
+      test:
+        [
+          'CMD-SHELL',
+          'pg_isready -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot}',
+        ]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -20,19 +22,17 @@ services:
   pyworker:
     build:
       context: ./pyworker
+    image: kycnotme/pyworker:${PYWORKER_IMAGE_TAG:-latest}
     restart: always
-    environment:
-      DATABASE_URL: "postgresql://${POSTGRES_USER:-kycnot}:${POSTGRES_PASSWORD:-kycnot}@database:5432/${POSTGRES_DATABASE:-kycnot}?schema=public"
-      CRAWL4AI_BASE_URL: "http://crawl4ai:11235"
-      CRAWL4AI_API_TOKEN: ${CRAWL4AI_API_TOKEN:-testing}
+    env_file:
+      - .env
 
   crawl4ai:
     image: unclecode/crawl4ai:basic-amd64
     expose:
-      - "11235"
-    environment:
-      CRAWL4AI_API_TOKEN: ${CRAWL4AI_API_TOKEN:-testing} # Optional API security
-      MAX_CONCURRENT_TASKS: 10
+      - '11235'
+    env_file:
+      - .env
     volumes:
       - /dev/shm:/dev/shm
     deploy:
@@ -46,22 +46,16 @@ services:
     image: redis:latest
     restart: unless-stopped
     healthcheck:
-      test: ["CMD", "redis-cli", "ping"]
+      test: ['CMD', 'redis-cli', 'ping']
       interval: 10s
       timeout: 5s
       retries: 5
 
   astro:
     build:
-      context: ./web
+      dockerfile: web/Dockerfile
     image: kycnotme/astro:${ASTRO_IMAGE_TAG:-latest}
     restart: unless-stopped
-    environment:
-      POSTGRES_USER: ${POSTGRES_USER:-kycnot}
-      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-kycnot}
-      POSTGRES_DB: ${POSTGRES_DATABASE:-kycnot}
-      DATABASE_URL: "postgresql://${POSTGRES_USER:-kycnot}:${POSTGRES_PASSWORD:-kycnot}@database:5432/${POSTGRES_DATABASE:-kycnot}?schema=public"
-      REDIS_URL: "redis://redis:6379"
     env_file:
       - .env
     depends_on:
@@ -72,7 +66,15 @@ services:
     expose:
       - 4321
     healthcheck:
-      test: ["CMD", "curl", "-k", "--silent", "--fail", "http://localhost:4321/health"]
+      test:
+        [
+          'CMD',
+          'curl',
+          '-k',
+          '--silent',
+          '--fail',
+          'http://localhost:4321/internal-api/healthcheck',
+        ]
       interval: 10s
       timeout: 5s
       retries: 5

justfile

@@ -51,42 +51,6 @@ import-db file="":
     fi
   fi
   
-  echo "Restoring database from $BACKUP_FILE..."
-  # First drop all connections to the database
-  docker compose exec -T database psql -U ${POSTGRES_USER:-kycnot} -c "SELECT pg_terminate_backend(pg_stat_activity.pid) FROM pg_stat_activity WHERE pg_stat_activity.datname = '${POSTGRES_DATABASE:-kycnot}' AND pid <> pg_backend_pid();" postgres
-  
-  # Drop and recreate database
-  echo "Dropping and recreating the database..."
-  docker compose exec -T database psql -U ${POSTGRES_USER:-kycnot} -c "DROP DATABASE IF EXISTS ${POSTGRES_DATABASE:-kycnot};" postgres
-  docker compose exec -T database psql -U ${POSTGRES_USER:-kycnot} -c "CREATE DATABASE ${POSTGRES_DATABASE:-kycnot};" postgres
-  
-  # Restore the database
-  cat "$BACKUP_FILE" | docker compose exec -T database pg_restore -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot} --no-owner
-  echo "Database restored successfully!"
-  
-  # Import triggers
-  echo "Importing triggers..."
-  just import-triggers
-  
-  echo "Database import completed!"
-  # Check if migrations need to be run
-  cd web && npx prisma migrate status
-
-  #!/bin/bash
-  if [ -z "{{file}}" ]; then
-    BACKUP_FILE=$(find backups/ -name 'db_backup_*.dump' | sort -r | head -n 1)
-    if [ -z "$BACKUP_FILE" ]; then
-      echo "Error: No backup files found in the backups directory"
-      exit 1
-    fi
-  else
-    BACKUP_FILE="{{file}}"
-    if [ ! -f "$BACKUP_FILE" ]; then
-      echo "Error: Backup file '$BACKUP_FILE' not found"
-      exit 1
-    fi
-  fi
-  
   echo "=== STEP 1: PREPARING DATABASE ==="
   # Drop all connections to the database
   docker compose exec -T database psql -U ${POSTGRES_USER:-kycnot} -c "SELECT pg_terminate_backend(pg_stat_activity.pid) FROM pg_stat_activity WHERE pg_stat_activity.datname = '${POSTGRES_DATABASE:-kycnot}' AND pid <> pg_backend_pid();" postgres

pyworker/pyworker/utils/ai.py

@@ -184,16 +184,16 @@ Be concise but thorough, and make sure your output is properly formatted JSON.
 PROMPT_COMMENT_SENTIMENT_SUMMARY = """
 You will be given a list of user comments to a service.
 Your task is to summarize the comments in a way that is easy to understand and to the point.
-The summary should be concise and to the point, no more than 150 words.
+The summary should be concise and to the point, no more than 100 words. Keep it short and concise.
 Use markdown formatting to highlight in bold the most important information. Only bold is allowed.
 
 You must format your response as a valid JSON object with the following structure:
 
 interface CommentSummary {
-  summary: string;
+  summary: string; // Concise, 100 words max
   sentiment: 'positive'|'negative'|'neutral';
-  whatUsersLike: string[]; // Concise, 2-3 words, max 4
-  whatUsersDislike: string[]; // Concise, 2-3 words, max 4
+  whatUsersLike: string[]; // Concise, 2-3 words max
+  whatUsersDislike: string[]; // Concise, 2-3 words max
 }
 
 Always avoid repeating information in the list of what users like or dislike. Also, make sure you keep the summary short and concise, no more than 150 words. Ignore irrelevant comments. Make an item for each like/dislike, avoid something like 'No logs / Audited', it should be 'No logs' and 'Audited' as separate items.

web/.env.example

@@ -2,8 +2,12 @@ DATABASE_URL="postgresql://kycnot:kycnot@localhost:3399/kycnot?schema=public"
 REDIS_URL="redis://localhost:6379"
 SOURCE_CODE_URL="https://github.com"
 DATABASE_UI_URL="http://localhost:5555"
-SITE_URL="https://localhost:4321"
+SITE_URL="http://localhost:4321"
 ONION_ADDRESS="http://kycnotmezdiftahfmc34pqbpicxlnx3jbf5p7jypge7gdvduu7i6qjqd.onion"
 I2P_ADDRESS="http://nti3rj4j4disjcm2kvp4eno7otcejbbxv3ggxwr5tpfk4jucah7q.b32.i2p"
 RELEASE_NUMBER=123
 RELEASE_DATE="2025-05-23T19:00:00.000Z"
+# Generated with `npx web-push generate-vapid-keys`
+VAPID_PUBLIC_KEY="BPmJbRXzG9zT181vyg1GlpyV8qu7rjVjfg6vkkOgtqeTZECyt6lR4MuzmlarEHSBF6gPpc77ZA0_tTVtmYh65iM"
+VAPID_PRIVATE_KEY="eN_S2SMXDB2hpwVXbgDkDrPIPMqirllZaJcUgYTt9w0"
+VAPID_SUBJECT="mailto:no-reply@kycnot.me"

web/Dockerfile

@@ -1,26 +1,29 @@
 FROM node:lts AS runtime
 WORKDIR /app
 
-COPY package.json package-lock.json ./
+COPY .env .env
+COPY web/package.json web/package-lock.json ./
 
-COPY .npmrc .npmrc
+COPY web/.npmrc .npmrc
 
 RUN npm ci
 
-COPY . .
+COPY web/ .
 
 ARG ASTRO_BUILD_MODE=production
+
 # Generate Prisma client
 RUN npx prisma generate
+
 # Build the application
-RUN npm run build -- --mode ${ASTRO_BUILD_MODE}
+RUN npm run build:astro -- --mode ${ASTRO_BUILD_MODE} && npm run build:server-init
 
 ENV HOST=0.0.0.0
 ENV PORT=4321
 EXPOSE 4321
 
 # Add knm-migrate command script and make it executable
-COPY migrate.sh /usr/local/bin/knm-migrate
+COPY web/migrate.sh /usr/local/bin/knm-migrate
 RUN chmod +x /usr/local/bin/knm-migrate
 
-CMD ["node", "./dist/server/entry.mjs"]
+CMD ["sh", "-c", "node ./dist/server/server-init.js & node ./dist/server/entry.mjs"]

web/astro.config.mjs

@@ -4,26 +4,78 @@ import mdx from '@astrojs/mdx'
 import node from '@astrojs/node'
 import sitemap from '@astrojs/sitemap'
 import tailwindcss from '@tailwindcss/vite'
+import { minimal2023Preset } from '@vite-pwa/assets-generator/config'
+import AstroPWA from '@vite-pwa/astro'
 import { defineConfig, envField } from 'astro/config'
 import icon from 'astro-icon'
-import { loadEnv } from 'vite'
+import devtoolsJson from 'vite-plugin-devtools-json'
 
-// @ts-expect-error process.env actually exists
-const { SITE_URL } = loadEnv(process.env.NODE_ENV, process.cwd(), '')
-if (!SITE_URL) throw new Error('SITE_URL environment variable is not set')
+import { postgresListener } from './src/lib/postgresListenerIntegration'
+import { getServerEnvVariable } from './src/lib/serverEnvVariables'
+
+const SITE_URL = getServerEnvVariable('SITE_URL')
 
 export default defineConfig({
   site: SITE_URL,
   vite: {
     build: {
-      sourcemap: true,
+      sourcemap: true, // Enable sourcemaps on production, so users can inspect the code
     },
 
-    plugins: [tailwindcss()],
+    plugins: [devtoolsJson(), tailwindcss()],
   },
   integrations: [
+    postgresListener(),
     icon(),
     mdx(),
+    AstroPWA({
+      mode: 'development',
+      base: '/',
+      scope: '/',
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'KYCnot.me',
+        description: 'Find services that respect your privacy',
+        theme_color: '#040505',
+        background_color: '#171c1b',
+      },
+      pwaAssets: {
+        image: './public/favicon.svg',
+        preset: {
+          ...minimal2023Preset,
+          maskable: {
+            ...minimal2023Preset.maskable,
+            padding: 0.1,
+            resizeOptions: {
+              ...minimal2023Preset.maskable.resizeOptions,
+              background: '#3bdb78',
+            },
+          },
+          apple: {
+            ...minimal2023Preset.apple,
+            padding: 0.1,
+            resizeOptions: {
+              ...minimal2023Preset.apple.resizeOptions,
+              background: '#3bdb78',
+            },
+          },
+        },
+      },
+      workbox: {
+        navigateFallback: '/404',
+        globPatterns: ['**/*.{js,css,html,ico,jpg,jpeg,png,svg,webp,avif}'],
+      },
+      strategies: 'injectManifest',
+      srcDir: 'src',
+      filename: 'sw.ts',
+      devOptions: {
+        enabled: true,
+        type: 'module',
+      },
+      experimental: {
+        directoryAndTrailingSlashHandler: true,
+      },
+    }),
     sitemap({
       filter: (page) => {
         const url = new URL(page)
@@ -94,35 +146,6 @@ export default defineConfig({
         startsWith: 'redis://',
         default: 'redis://redis:6379',
       }),
-      REDIS_USER_SESSION_EXPIRY_SECONDS: envField.number({
-        context: 'server',
-        access: 'secret',
-        int: true,
-        gt: 0,
-        default: 60 * 60 * 24, // 24 hours in seconds
-      }),
-      REDIS_IMPERSONATION_SESSION_EXPIRY_SECONDS: envField.number({
-        context: 'server',
-        access: 'secret',
-        int: true,
-        gt: 0,
-        default: 60 * 60 * 24, // 24 hours in seconds
-      }),
-      REDIS_PREGENERATED_TOKEN_EXPIRY_SECONDS: envField.number({
-        context: 'server',
-        access: 'secret',
-        int: true,
-        gt: 0,
-        default: 60 * 5, // 5 minutes in seconds
-      }),
-
-      REDIS_ACTIONS_SESSION_EXPIRY_SECONDS: envField.number({
-        context: 'server',
-        access: 'secret',
-        int: true,
-        gt: 0,
-        default: 60 * 5, // 5 minutes in seconds
-      }),
 
       // Development tokens
       DEV_ADMIN_USER_SECRET_TOKEN: envField.string({
@@ -177,6 +200,12 @@ export default defineConfig({
         url: true,
         optional: false,
       }),
+      LOGS_UI_URL: envField.string({
+        context: 'server',
+        access: 'secret',
+        url: true,
+        optional: true,
+      }),
 
       RELEASE_NUMBER: envField.number({
         context: 'server',
@@ -189,6 +218,27 @@ export default defineConfig({
         access: 'public',
         optional: true,
       }),
+
+      // Generated with `npx web-push generate-vapid-keys`
+      VAPID_PUBLIC_KEY: envField.string({
+        context: 'server',
+        access: 'public',
+        min: 1,
+        optional: false,
+      }),
+      // Generated with `npx web-push generate-vapid-keys`
+      VAPID_PRIVATE_KEY: envField.string({
+        context: 'server',
+        access: 'secret',
+        min: 1,
+        optional: false,
+      }),
+      VAPID_SUBJECT: envField.string({
+        context: 'server',
+        access: 'secret',
+        min: 1,
+        optional: false,
+      }),
     },
   },
 })

web/eslint.config.js

@@ -121,7 +121,7 @@ export default tseslint.config(
       'import/first': 'error',
       'import/newline-after-import': 'error',
       'import/no-duplicates': 'error',
-      'import/no-unresolved': ['error', { ignore: ['^astro:'] }],
+      'import/no-unresolved': ['error', { ignore: ['^astro:', '^virtual:'] }],
       '@typescript-eslint/no-explicit-any': 'warn',
       'no-console': ['warn', { allow: without(Object.keys(console), 'log') }],
       'import/namespace': 'off',

web/package.json

@@ -4,8 +4,10 @@
   "version": "0.0.1",
   "scripts": {
     "dev": "astro dev",
-    "build": "astro build --remote",
-    "preview": "astro preview",
+    "build": "npm run build:astro && npm run build:server-init",
+    "build:astro": "astro build --remote",
+    "build:server-init": "esbuild src/server-init.ts --bundle --platform=node --format=esm --packages=external --outfile=dist/server/server-init.js",
+    "preview": "node dist/server/server-init.js & astro preview",
     "astro": "astro",
     "db-admin": "prisma studio --browser=none",
     "db-gen": "prisma generate",
@@ -23,18 +25,19 @@
   },
   "dependencies": {
     "@astrojs/check": "0.9.4",
-    "@astrojs/db": "0.14.14",
-    "@astrojs/mdx": "4.2.6",
-    "@astrojs/node": "9.2.1",
-    "@astrojs/sitemap": "3.4.0",
-    "@fontsource-variable/space-grotesk": "5.2.7",
+    "@astrojs/db": "0.15.0",
+    "@astrojs/mdx": "4.3.0",
+    "@astrojs/node": "9.2.2",
+    "@astrojs/sitemap": "3.4.1",
+    "@fontsource-variable/space-grotesk": "5.2.8",
     "@fontsource/inter": "5.2.5",
-    "@fontsource/space-grotesk": "5.2.7",
-    "@prisma/client": "6.8.2",
-    "@tailwindcss/vite": "4.1.7",
-    "@types/mime-types": "2.1.4",
+    "@fontsource/space-grotesk": "5.2.8",
+    "@prisma/client": "6.9.0",
+    "@tailwindcss/vite": "4.1.8",
+    "@types/mime-types": "3.0.0",
+    "@types/pg": "8.15.4",
     "@vercel/og": "0.6.8",
-    "astro": "5.7.13",
+    "astro": "5.9.0",
     "astro-loading-indicator": "0.7.0",
     "astro-remote": "0.3.4",
     "astro-seo-schema": "5.0.0",
@@ -42,56 +45,65 @@
     "clsx": "2.1.1",
     "htmx.org": "1.9.12",
     "javascript-time-ago": "2.5.11",
-    "libphonenumber-js": "1.12.8",
+    "libphonenumber-js": "1.12.9",
     "lodash-es": "4.17.21",
     "mime-types": "3.0.1",
     "object-to-formdata": "4.5.1",
+    "pg": "8.16.0",
     "qrcode": "1.5.4",
     "react": "19.1.0",
-    "redis": "5.0.1",
+    "redis": "5.5.6",
     "schema-dts": "1.1.5",
     "seedrandom": "3.0.5",
-    "sharp": "0.34.1",
+    "sharp": "0.34.2",
     "slugify": "1.6.6",
     "tailwind-merge": "3.3.0",
     "tailwind-variants": "1.0.0",
-    "tailwindcss": "4.1.7",
+    "tailwindcss": "4.1.8",
     "typescript": "5.8.3",
     "unique-username-generator": "1.4.0",
+    "web-push": "3.6.7",
     "zod-form-data": "2.0.7"
   },
   "devDependencies": {
-    "@eslint/js": "9.27.0",
+    "@eslint/js": "9.28.0",
     "@faker-js/faker": "9.8.0",
-    "@iconify-json/material-symbols": "1.2.21",
+    "@iconify-json/material-symbols": "1.2.24",
     "@iconify-json/mdi": "1.2.3",
     "@iconify-json/ri": "1.2.5",
-    "@stylistic/eslint-plugin": "4.2.0",
+    "@stylistic/eslint-plugin": "4.4.1",
     "@tailwindcss/forms": "0.5.10",
     "@tailwindcss/typography": "0.5.16",
     "@types/eslint__js": "9.14.0",
     "@types/lodash-es": "4.17.12",
     "@types/qrcode": "1.5.5",
-    "@types/react": "19.1.4",
+    "@types/react": "19.1.6",
     "@types/seedrandom": "3.0.8",
-    "@typescript-eslint/parser": "8.32.1",
+    "@types/web-push": "3.6.4",
+    "@typescript-eslint/parser": "8.33.1",
+    "@vite-pwa/assets-generator": "1.0.0",
+    "@vite-pwa/astro": "1.1.0",
     "astro-icon": "1.1.5",
     "date-fns": "4.1.0",
-    "eslint": "9.27.0",
-    "eslint-import-resolver-typescript": "4.3.5",
+    "esbuild": "0.25.5",
+    "eslint": "9.28.0",
+    "eslint-import-resolver-typescript": "4.4.3",
     "eslint-plugin-astro": "1.3.1",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "globals": "16.1.0",
+    "globals": "16.2.0",
     "prettier": "3.5.3",
     "prettier-plugin-astro": "0.14.1",
-    "prettier-plugin-tailwindcss": "0.6.11",
-    "prisma": "6.8.2",
-    "prisma-json-types-generator": "3.4.1",
+    "prettier-plugin-tailwindcss": "0.6.12",
+    "prisma": "6.9.0",
+    "prisma-json-types-generator": "3.4.2",
     "tailwind-htmx": "0.1.2",
     "ts-essentials": "10.0.4",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.19.4",
-    "typescript-eslint": "8.32.1"
+    "typescript-eslint": "8.33.1",
+    "vite-plugin-devtools-json": "0.1.1",
+    "workbox-core": "7.3.0",
+    "workbox-precaching": "7.3.0"
   }
 }

web/prisma/migrations/20250530205432_enable_pg_trgm_extension/migration.sql

@@ -0,0 +1,2 @@
+-- Enable pg_trgm extension for similarity functions
+CREATE EXTENSION IF NOT EXISTS pg_trgm;

web/prisma/migrations/20250531213850_add_previous_slugs_to_service/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "Service" ADD COLUMN     "previousSlugs" TEXT[] DEFAULT ARRAY[]::TEXT[];
+
+-- CreateIndex
+CREATE INDEX "Service_previousSlugs_idx" ON "Service"("previousSlugs");

web/prisma/migrations/20250601172630_add_kyclevelclarification/migration.sql

@@ -0,0 +1,6 @@
+-- CreateEnum
+CREATE TYPE "KycLevelClarification" AS ENUM ('NONE', 'DEPENDS_ON_PARTNERS');
+
+-- AlterTable
+ALTER TABLE "Service" ADD COLUMN     "kycLevelClarification" "KycLevelClarification",
+ADD COLUMN     "kycLevelDetailsId" INTEGER;

web/prisma/migrations/20250601210540_add_push_subscriptions/migration.sql

@@ -0,0 +1,25 @@
+-- CreateTable
+CREATE TABLE "PushSubscription" (
+    "id" SERIAL NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "endpoint" TEXT NOT NULL,
+    "p256dh" TEXT NOT NULL,
+    "auth" TEXT NOT NULL,
+    "userAgent" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "PushSubscription_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PushSubscription_endpoint_key" ON "PushSubscription"("endpoint");
+
+-- CreateIndex
+CREATE INDEX "PushSubscription_userId_idx" ON "PushSubscription"("userId");
+
+-- CreateIndex
+CREATE INDEX "PushSubscription_endpoint_idx" ON "PushSubscription"("endpoint");
+
+-- AddForeignKey
+ALTER TABLE "PushSubscription" ADD CONSTRAINT "PushSubscription_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

web/prisma/migrations/20250603051814_default_clarification_to_none/migration.sql

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `kycLevelDetailsId` on the `Service` table. All the data in the column will be lost.
+  - Made the column `kycLevelClarification` on table `Service` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- AlterTable
+ALTER TABLE "Service" DROP COLUMN "kycLevelDetailsId",
+ALTER COLUMN "kycLevelClarification" SET NOT NULL,
+ALTER COLUMN "kycLevelClarification" SET DEFAULT 'NONE';

web/prisma/migrations/20250604164448_test_notification/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "NotificationType" ADD VALUE 'TEST';

web/prisma/migrations/20250606064639_add_withdrawn_order_status/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "OrderIdStatus" ADD VALUE 'WITHDRAWN';

web/prisma/schema.prisma

@@ -25,6 +25,7 @@ enum OrderIdStatus {
   PENDING
   APPROVED
   REJECTED
+  WITHDRAWN
 }
 
 model Comment {
@@ -128,6 +129,7 @@ enum AccountStatusChange {
 }
 
 enum NotificationType {
+  TEST
   COMMENT_STATUS_CHANGE
   REPLY_COMMENT_CREATED
   COMMUNITY_NOTE_ADDED
@@ -297,6 +299,11 @@ enum ServiceSuggestionType {
   EDIT_SERVICE
 }
 
+enum KycLevelClarification {
+  NONE
+  DEPENDS_ON_PARTNERS
+}
+
 model ServiceSuggestion {
   id               Int                        @id @default(autoincrement())
   type             ServiceSuggestionType
@@ -336,9 +343,11 @@ model Service {
   id                     Int                          @id @default(autoincrement())
   name                   String
   slug                   String                       @unique
+  previousSlugs          String[]                     @default([])
   description            String
   categories             Category[]                   @relation("ServiceToCategory")
   kycLevel               Int                          @default(4)
+  kycLevelClarification  KycLevelClarification        @default(NONE)
   overallScore           Int                          @default(0)
   privacyScore           Int                          @default(0)
   trustScore             Int                          @default(0)
@@ -396,6 +405,7 @@ model Service {
   @@index([createdAt])
   @@index([updatedAt])
   @@index([slug])
+  @@index([previousSlugs])
 }
 
 model ServiceContactMethod {
@@ -506,6 +516,7 @@ model User {
   notifications            Notification[]               @relation("NotificationOwner")
   notificationPreferences  NotificationPreferences?
   serviceAffiliations      ServiceUser[]                @relation("UserServices")
+  pushSubscriptions        PushSubscription[]
 
   @@index([createdAt])
   @@index([totalKarma])
@@ -654,3 +665,21 @@ model Announcement {
 
   @@index([isActive, startDate, endDate])
 }
+
+model PushSubscription {
+  id        Int      @id @default(autoincrement())
+  userId    Int
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  endpoint  String   @unique
+  /// Public key for encryption
+  p256dh    String
+  /// Authentication secret
+  auth      String
+  /// To identify different devices
+  userAgent String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@index([userId])
+  @@index([endpoint])
+}

web/prisma/seed.ts

@@ -18,8 +18,9 @@ import {
   type User,
   type ServiceVisibility,
   ServiceSuggestionType,
+  KycLevelClarification,
 } from '@prisma/client'
-import { uniqBy } from 'lodash-es'
+import { omit, uniqBy } from 'lodash-es'
 import { generateUsername } from 'unique-username-generator'
 
 import { kycLevels } from '../src/constants/kycLevels'
@@ -612,8 +613,14 @@ const generateFakeService = (users: User[]) => {
   return {
     name,
     slug,
+    previousSlugs: faker.helpers.maybe(() => [`${slug}-old`], { probability: 0.5 }),
     description: faker.helpers.arrayElement(serviceDescriptions),
     kycLevel: faker.helpers.arrayElement(kycLevels.map((level) => level.value)),
+    kycLevelClarification: faker.helpers.maybe(
+      () =>
+        faker.helpers.arrayElement(omit(Object.values(KycLevelClarification), [KycLevelClarification.NONE])),
+      { probability: 0.25 }
+    ),
     overallScore: 0,
     privacyScore: 0,
     trustScore: 0,
@@ -916,7 +923,7 @@ const specialUsersData = {
     verifiedLink: 'https://kycnot.me',
     totalKarma: 1001,
     link: 'https://kycnot.me',
-    picture: 'https://comments.kycnot.me/api/users/549f290e-0542-4c18-b437-5b64b35758f0/avatar?size=L',
+    picture: 'https://kycnot.me/files/users/pictures/c277dc0f2f.png',
   },
   moderator: {
     name: 'moderator_dev',
@@ -928,7 +935,7 @@ const specialUsersData = {
     verifiedLink: 'https://kycnot.me',
     totalKarma: 1001,
     link: 'https://kycnot.me',
-    picture: 'https://comments.kycnot.me/api/users/549f290e-0542-4c18-b437-5b64b35758f0/avatar?size=L',
+    picture: 'https://kycnot.me/files/users/pictures/c277dc0f2f.png',
   },
   verified: {
     name: 'verified_dev',
@@ -1134,7 +1141,7 @@ async function main() {
   // ---- Create services ----
   const services = await Promise.all(
     Array.from({ length: numServices }, async () => {
-      const serviceData = generateFakeService(users)
+      const serviceData = generateFakeService([...users, ...Object.values(specialUsers)])
       const randomCategories = faker.helpers.arrayElements(categories, { min: 1, max: 3 })
 
       const service = await prisma.service.create({
@@ -1274,7 +1281,7 @@ async function main() {
   // ---- Create service suggestions for normal_dev user ----
   // First create 3 CREATE_SERVICE suggestions with their services
   for (let i = 0; i < 3; i++) {
-    const serviceData = generateFakeService(users)
+    const serviceData = generateFakeService([...users, ...Object.values(specialUsers)])
     const randomCategories = faker.helpers.arrayElements(categories, { min: 1, max: 3 })
 
     const service = await prisma.service.create({

web/prisma/triggers/12_notification_push_trigger.sql

@@ -0,0 +1,16 @@
+CREATE OR REPLACE FUNCTION trigger_notification_push()
+RETURNS TRIGGER AS $$
+BEGIN
+  PERFORM pg_notify('notification_created', json_build_object('id', NEW.id)::text);
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+-- Drop the trigger if it exists to ensure a clean setup
+DROP TRIGGER IF EXISTS notification_push_trigger ON "Notification";
+
+-- Create the trigger to fire after inserts
+CREATE TRIGGER notification_push_trigger
+  AFTER INSERT ON "Notification"
+  FOR EACH ROW
+  EXECUTE FUNCTION trigger_notification_push(); 

web/public/favicon-badge.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+  <title>KYCnot.me logo with badge</title>
+  <path fill="#00bfff" d="M32 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" />
+  <path fill="#040505" d="M12.7 4A12 12 0 0 0 28 19.3V28H4V4h8.7Z" />
+  <path fill="#3BDB78" fill-rule="evenodd"
+    d="M15 0a12 12 0 0 0-1.4 14H11a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h6.4l.6.4V21c0 .6.4 1 1 1h3v-2.2A12 12 0 0 0 32 17V28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h11Zm7 25c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3v3Z"
+    clip-rule="evenodd" />
+</svg>

web/public/favicon-dev-badge.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+  <title>KYCnot.me logo with badge</title>
+  <path fill="#fff" d="M32 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" />
+  <path fill="#040505" d="M12.7 4A12 12 0 0 0 28 19.3V28H4V4h8.7Z" />
+  <path fill="#FF0040" fill-rule="evenodd"
+    d="M15 0a12 12 0 0 0-1.4 14H11a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h6.4l.6.4V21c0 .6.4 1 1 1h3v-2.2A12 12 0 0 0 32 17V28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h11Zm7 25c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3v3Z"
+    clip-rule="evenodd" />
+</svg>

web/public/favicon-dev-lightmode-badge.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+  <title>KYCnot.me logo with badge</title>
+  <path fill="#000" d="M32 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" />
+  <path fill="#fff" d="M12.7 4A12 12 0 0 0 28 19.3V28H4V4h8.7Z" />
+  <path fill="#FF0040" fill-rule="evenodd"
+    d="M15 0a12 12 0 0 0-1.4 14H11a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h6.4l.6.4V21c0 .6.4 1 1 1h3v-2.2A12 12 0 0 0 32 17V28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h11Zm7 25c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3v3Z"
+    clip-rule="evenodd" />
+</svg>

web/public/favicon-dev-lightmode.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#ff0040" viewBox="0 0 32 32" height="32" width="32">
+  <title>KYCnot.me logo</title>
+  <path fill="#fff" d="M4 4h24v24H4z" />
+  <path fill-rule="evenodd"
+    d="M32 28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v24ZM7 6a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h7v-3c0-.6-.4-1-1-1h-6a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7Zm15 16v3c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3Zm-4-4v3c0 .6.4 1 1 1h3v-3c0-.6-.4-1-1-1h-3Zm1-12a1 1 0 0 0-1 1v3c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1h-3Z"
+    clip-rule="evenodd" />
+</svg>

web/public/favicon-dev.svg

@@ -1,5 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#FF0000" viewBox="0 0 32 32" height="32" width="32">
+<svg xmlns="http://www.w3.org/2000/svg" fill="#ff0040" viewBox="0 0 32 32" height="32" width="32">
   <title>KYCnot.me logo</title>
+  <path fill="#040505" d="M4 4h24v24H4z" />
   <path fill-rule="evenodd"
     d="M32 28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v24ZM7 6a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h7v-3c0-.6-.4-1-1-1h-6a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7Zm15 16v3c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3Zm-4-4v3c0 .6.4 1 1 1h3v-3c0-.6-.4-1-1-1h-3Zm1-12a1 1 0 0 0-1 1v3c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1h-3Z"
     clip-rule="evenodd" />

web/public/favicon-lightmode-badge.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+  <title>KYCnot.me logo with badge</title>
+  <path fill="#0080FF" d="M32 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" />
+  <path fill="#fff" d="M12.7 4A12 12 0 0 0 28 19.3V28H4V4h8.7Z" />
+  <path fill="#33BE00" fill-rule="evenodd"
+    d="M15 0a12 12 0 0 0-1.4 14H11a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h6.4l.6.4V21c0 .6.4 1 1 1h3v-2.2A12 12 0 0 0 32 17V28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h11Zm7 25c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3v3Z"
+    clip-rule="evenodd" />
+</svg>

web/public/favicon-lightmode.svg

@@ -1,5 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="#33BE00" viewBox="0 0 32 32" height="32" width="32">
   <title>KYCnot.me logo</title>
+  <path fill="#fff" d="M4 4h24v24H4z" />
   <path fill-rule="evenodd"
     d="M32 28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v24ZM7 6a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h7v-3c0-.6-.4-1-1-1h-6a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7Zm15 16v3c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3Zm-4-4v3c0 .6.4 1 1 1h3v-3c0-.6-.4-1-1-1h-3Zm1-12a1 1 0 0 0-1 1v3c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1h-3Z"
     clip-rule="evenodd" />

web/public/favicon-stage-badge.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+  <title>KYCnot.me logo with badge</title>
+  <path fill="#fff" d="M32 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" />
+  <path fill="#040505" d="M12.7 4A12 12 0 0 0 28 19.3V28H4V4h8.7Z" />
+  <path fill="#00ffff" class="a" fill-rule="evenodd"
+    d="M15 0a12 12 0 0 0-1.4 14H11a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h6.4l.6.4V21c0 .6.4 1 1 1h3v-2.2A12 12 0 0 0 32 17V28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h11Zm7 25c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3v3Z"
+    clip-rule="evenodd" />
+</svg>

web/public/favicon-stage-lightmode-badge.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+  <title>KYCnot.me logo with badge</title>
+  <path fill="#000" d="M32 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" />
+  <path fill="#fff" d="M12.7 4A12 12 0 0 0 28 19.3V28H4V4h8.7Z" />
+  <path fill="#0080ff" class="a" fill-rule="evenodd"
+    d="M15 0a12 12 0 0 0-1.4 14H11a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h6.4l.6.4V21c0 .6.4 1 1 1h3v-2.2A12 12 0 0 0 32 17V28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h11Zm7 25c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3v3Z"
+    clip-rule="evenodd" />
+</svg>

web/public/favicon-stage-lightmode.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" height="32" width="32">
+  <title>KYCnot.me logo</title>
+  <path fill="#fff" class="b" d="M4 4h24v24H4z" />
+  <path fill="#0080ff" class="a" fill-rule="evenodd"
+    d="M32 28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v24ZM7 6a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h7v-3c0-.6-.4-1-1-1h-6a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7Zm15 16v3c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3Zm-4-4v3c0 .6.4 1 1 1h3v-3c0-.6-.4-1-1-1h-3Zm1-12a1 1 0 0 0-1 1v3c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1h-3Z"
+    clip-rule="evenodd" />
+</svg>

web/public/favicon-stage.svg

@@ -1,13 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" height="32" width="32">
   <title>KYCnot.me logo</title>
-  <style>
-    @media (prefers-color-scheme: light) {
-      path {
-        fill: #0080ff;
-      }
-    }
-  </style>
-  <path fill="#00ffff" fill-rule="evenodd"
+  <path fill="#040505" class="b" d="M4 4h24v24H4z" />
+  <path fill="#00ffff" class="a" fill-rule="evenodd"
     d="M32 28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v24ZM7 6a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h7v-3c0-.6-.4-1-1-1h-6a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7Zm15 16v3c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3Zm-4-4v3c0 .6.4 1 1 1h3v-3c0-.6-.4-1-1-1h-3Zm1-12a1 1 0 0 0-1 1v3c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1h-3Z"
     clip-rule="evenodd" />
 </svg>

web/public/favicon.svg

@@ -1,5 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="#3BDB78" viewBox="0 0 32 32" height="32" width="32">
   <title>KYCnot.me logo</title>
+  <path fill="#040505" d="M4 4h24v24H4z" />
   <path fill-rule="evenodd"
     d="M32 28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v24ZM7 6a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h7v-3c0-.6-.4-1-1-1h-6a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7Zm15 16v3c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3Zm-4-4v3c0 .6.4 1 1 1h3v-3c0-.6-.4-1-1-1h-3Zm1-12a1 1 0 0 0-1 1v3c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1h-3Z"
     clip-rule="evenodd" />

web/public/notification-icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#3BDB78" viewBox="0 0 32 32" height="32" width="32">
+  <title>KYCnot.me logo</title>
+  <path fill-rule="evenodd"
+    d="M30 26a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v20ZM7 6a1 1 0 0 0-1 1v18c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-6c0-.6.4-1 1-1h7v-3c0-.6-.4-1-1-1h-6a1 1 0 0 1-1-1V7c0-.6-.4-1-1-1H7Zm15 16v3c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-3Zm-4-4v3c0 .6.4 1 1 1h3v-3c0-.6-.4-1-1-1h-3Zm1-12a1 1 0 0 0-1 1v3c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1h-3Z"
+    clip-rule="evenodd" />
+</svg>

web/src/actions/admin/announcement.ts

@@ -1,11 +1,9 @@
-import { type Prisma, type PrismaClient } from '@prisma/client'
+import { type Prisma } from '@prisma/client'
 import { ActionError } from 'astro:actions'
 import { z } from 'zod'
 
 import { defineProtectedAction } from '../../lib/defineProtectedAction'
-import { prisma as prismaInstance } from '../../lib/prisma'
-
-const prisma = prismaInstance as PrismaClient
+import { prisma } from '../../lib/prisma'
 
 const selectAnnouncementReturnFields = {
   id: true,

web/src/actions/admin/index.ts

@@ -1,15 +1,17 @@
 import { adminAnnouncementActions } from './announcement'
 import { adminAttributeActions } from './attribute'
 import { adminEventActions } from './event'
+import { adminNotificationActions } from './notification'
 import { adminServiceActions } from './service'
 import { adminServiceSuggestionActions } from './serviceSuggestion'
 import { adminUserActions } from './user'
 import { verificationStep } from './verificationStep'
 
 export const adminActions = {
-  attribute: adminAttributeActions,
   announcement: adminAnnouncementActions,
+  attribute: adminAttributeActions,
   event: adminEventActions,
+  notification: adminNotificationActions,
   service: adminServiceActions,
   serviceSuggestions: adminServiceSuggestionActions,
   user: adminUserActions,

web/src/actions/admin/notification.ts

@@ -0,0 +1,33 @@
+import { z } from 'astro/zod'
+
+import { defineProtectedAction } from '../../lib/defineProtectedAction'
+import { prisma } from '../../lib/prisma'
+import { stringListOfSlugsSchemaRequired } from '../../lib/zodUtils'
+
+export const adminNotificationActions = {
+  test: defineProtectedAction({
+    accept: 'form',
+    permissions: 'admin',
+    input: z.object({
+      userNames: stringListOfSlugsSchemaRequired,
+    }),
+    handler: async (input) => {
+      const users = await prisma.user.findMany({
+        where: { name: { in: input.userNames } },
+        select: { id: true },
+      })
+
+      const notifications = await prisma.notification.createManyAndReturn({
+        data: users.map((user) => ({
+          type: 'TEST',
+          userId: user.id,
+        })),
+        select: { id: true },
+      })
+
+      return {
+        message: `Created ${notifications.length.toString()} notifications.`,
+      }
+    },
+  }),
+}

web/src/actions/admin/service.ts

@@ -1,48 +1,20 @@
-import { Currency, ServiceVisibility, VerificationStatus } from '@prisma/client'
+import { Currency, ServiceVisibility, VerificationStatus, KycLevelClarification } from '@prisma/client'
 import { z } from 'astro/zod'
 import { ActionError } from 'astro:actions'
+import { uniq } from 'lodash-es'
 import slugify from 'slugify'
 
 import { defineProtectedAction } from '../../lib/defineProtectedAction'
-import { saveFileLocally } from '../../lib/fileStorage'
+import { saveFileLocally, deleteFileLocally } from '../../lib/fileStorage'
 import { prisma } from '../../lib/prisma'
+import { separateServiceUrlsByType } from '../../lib/urls'
 import {
   imageFileSchema,
-  stringListOfUrlsSchema,
   stringListOfUrlsSchemaRequired,
   zodCohercedNumber,
+  zodContactMethod,
 } from '../../lib/zodUtils'
 
-const serviceSchemaBase = z.object({
-  id: z.number().int().positive(),
-  slug: z
-    .string()
-    .regex(/^[a-z0-9-]+$/, 'Allowed characters: lowercase letters, numbers, and hyphens')
-    .optional(),
-  name: z.string().min(1).max(20),
-  description: z.string().min(1),
-  serviceUrls: stringListOfUrlsSchemaRequired,
-  tosUrls: stringListOfUrlsSchemaRequired,
-  onionUrls: stringListOfUrlsSchema,
-  kycLevel: z.coerce.number().int().min(0).max(4),
-  attributes: z.array(z.coerce.number().int().positive()),
-  categories: z.array(z.coerce.number().int().positive()).min(1),
-  verificationStatus: z.nativeEnum(VerificationStatus),
-  verificationSummary: z.string().optional().nullable().default(null),
-  verificationProofMd: z.string().optional().nullable().default(null),
-  acceptedCurrencies: z.array(z.nativeEnum(Currency)),
-  referral: z
-    .string()
-    .regex(/^(\?\w+=.|\/.+)/, 'Referral must be a valid URL parameter or path, not a full URL')
-    .optional()
-    .nullable()
-    .default(null),
-  imageFile: imageFileSchema,
-  overallScore: zodCohercedNumber(z.number().int().min(0).max(10)).optional(),
-  serviceVisibility: z.nativeEnum(ServiceVisibility),
-  internalNote: z.string().optional(),
-})
-
 const addSlugIfMissing = <
   T extends {
     slug?: string | null | undefined
@@ -62,12 +34,61 @@ const addSlugIfMissing = <
     }),
 })
 
+const serviceSchemaBase = z.object({
+  id: z.number().int().positive(),
+  slug: z
+    .string()
+    .regex(/^[a-z0-9-]+$/, 'Allowed characters: lowercase letters, numbers, and hyphens')
+    .optional(),
+  name: z.string().min(1).max(40),
+  description: z.string().min(1),
+  allServiceUrls: stringListOfUrlsSchemaRequired,
+  tosUrls: stringListOfUrlsSchemaRequired,
+  kycLevel: z.coerce.number().int().min(0).max(4),
+  kycLevelClarification: z.nativeEnum(KycLevelClarification).optional().nullable().default(null),
+  attributes: z.array(z.coerce.number().int().positive()),
+  categories: z.array(z.coerce.number().int().positive()).min(1),
+  verificationStatus: z.nativeEnum(VerificationStatus),
+  verificationSummary: z.string().optional().nullable().default(null),
+  verificationProofMd: z.string().optional().nullable().default(null),
+  acceptedCurrencies: z.array(z.nativeEnum(Currency)),
+  referral: z
+    .string()
+    .regex(/^(\?\w+=.|\/.+)/, 'Referral must be a valid URL parameter or path, not a full URL')
+    .optional()
+    .nullable()
+    .default(null),
+  imageFile: imageFileSchema,
+  overallScore: zodCohercedNumber(z.number().int().min(0).max(10)).optional(),
+  serviceVisibility: z.nativeEnum(ServiceVisibility),
+  internalNote: z.string().optional(),
+})
+
+// Define schema for the create action input
+const createServiceInputSchema = serviceSchemaBase.omit({ id: true }).transform(addSlugIfMissing)
+
+// Define schema for the update action input
+const updateServiceInputSchema = serviceSchemaBase
+  .extend({
+    removeImage: z.boolean().optional(),
+  })
+  .transform(addSlugIfMissing)
+
+const evidenceImageAddSchema = z.object({
+  serviceId: z.number().int().positive(),
+  imageFile: imageFileSchema,
+})
+
+const evidenceImageDeleteSchema = z.object({
+  fileUrl: z.string().startsWith('/files/evidence/', 'Must be a valid evidence file URL'),
+})
+
 export const adminServiceActions = {
   create: defineProtectedAction({
     accept: 'form',
     permissions: 'admin',
-    input: serviceSchemaBase.omit({ id: true }).transform(addSlugIfMissing),
-    handler: async (input, context) => {
+    input: createServiceInputSchema,
+    handler: async (input: z.infer<typeof createServiceInputSchema>, context) => {
       const existing = await prisma.service.findUnique({
         where: {
           slug: input.slug,
@@ -85,14 +106,22 @@ export const adminServiceActions = {
         ? await saveFileLocally(input.imageFile, input.imageFile.name)
         : undefined
 
+      const {
+        web: serviceUrls,
+        onion: onionUrls,
+        i2p: i2pUrls,
+      } = separateServiceUrlsByType(input.allServiceUrls)
+
       const service = await prisma.service.create({
         data: {
           name: input.name,
           description: input.description,
-          serviceUrls: input.serviceUrls,
+          serviceUrls,
           tosUrls: input.tosUrls,
-          onionUrls: input.onionUrls,
+          onionUrls,
+          i2pUrls,
           kycLevel: input.kycLevel,
+          kycLevelClarification: input.kycLevelClarification ?? undefined,
           verificationStatus: input.verificationStatus,
           verificationSummary: input.verificationSummary,
           verificationProofMd: input.verificationProofMd,
@@ -134,12 +163,8 @@ export const adminServiceActions = {
   update: defineProtectedAction({
     accept: 'form',
     permissions: 'admin',
-    input: serviceSchemaBase
-      .extend({
-        removeImage: z.boolean().optional(),
-      })
-      .transform(addSlugIfMissing),
-    handler: async (input) => {
+    input: updateServiceInputSchema,
+    handler: async (input: z.infer<typeof updateServiceInputSchema>) => {
       const anotherServiceWithNewSlug = await prisma.service.findUnique({
         where: {
           slug: input.slug,
@@ -154,19 +179,24 @@ export const adminServiceActions = {
         })
       }
 
-      const imageUrl = input.removeImage
-        ? null
-        : input.imageFile
-          ? await saveFileLocally(input.imageFile, input.imageFile.name)
-          : undefined
-
       const existingService = await prisma.service.findUnique({
         where: { id: input.id },
-        include: {
-          categories: true,
+        select: {
+          slug: true,
+          previousSlugs: true,
+          categories: {
+            select: {
+              id: true,
+            },
+          },
           attributes: {
-            include: {
-              attribute: true,
+            select: {
+              attributeId: true,
+              attribute: {
+                select: {
+                  id: true,
+                },
+              },
             },
           },
         },
@@ -187,15 +217,29 @@ export const adminServiceActions = {
       const attributesToAdd = input.attributes.filter((aId) => !existingAttributeIds.includes(aId))
       const attributesToRemove = existingAttributeIds.filter((aId) => !input.attributes.includes(aId))
 
+      const imageUrl = input.removeImage
+        ? null
+        : input.imageFile
+          ? await saveFileLocally(input.imageFile, input.imageFile.name)
+          : undefined
+
+      const {
+        web: serviceUrls,
+        onion: onionUrls,
+        i2p: i2pUrls,
+      } = separateServiceUrlsByType(input.allServiceUrls)
+
       const service = await prisma.service.update({
         where: { id: input.id },
         data: {
           name: input.name,
           description: input.description,
-          serviceUrls: input.serviceUrls,
+          serviceUrls,
           tosUrls: input.tosUrls,
-          onionUrls: input.onionUrls,
+          onionUrls,
+          i2pUrls,
           kycLevel: input.kycLevel,
+          kycLevelClarification: input.kycLevelClarification ?? undefined,
           verificationStatus: input.verificationStatus,
           verificationSummary: input.verificationSummary,
           verificationProofMd: input.verificationProofMd,
@@ -204,6 +248,14 @@ export const adminServiceActions = {
           serviceVisibility: input.serviceVisibility,
           slug: input.slug,
           overallScore: input.overallScore,
+          previousSlugs:
+            existingService.slug !== input.slug
+              ? {
+                  set: uniq([...existingService.previousSlugs, existingService.slug]).filter(
+                    (slug) => slug !== input.slug
+                  ),
+                }
+              : undefined,
 
           imageUrl,
           categories: {
@@ -234,7 +286,7 @@ export const adminServiceActions = {
       permissions: 'admin',
       input: z.object({
         label: z.string().min(1).max(50).nullable(),
-        value: z.string().url(),
+        value: zodContactMethod,
         serviceId: z.number().int().positive(),
       }),
       handler: async (input) => {
@@ -255,7 +307,7 @@ export const adminServiceActions = {
       input: z.object({
         id: z.number().int().positive(),
         label: z.string().min(1).max(50).nullable(),
-        value: z.string().url(),
+        value: zodContactMethod,
         serviceId: z.number().int().positive(),
       }),
       handler: async (input) => {
@@ -366,4 +418,49 @@ export const adminServiceActions = {
       },
     }),
   },
+
+  evidenceImage: {
+    add: defineProtectedAction({
+      accept: 'form',
+      permissions: 'admin',
+      input: evidenceImageAddSchema,
+      handler: async (input) => {
+        const service = await prisma.service.findUnique({
+          where: { id: input.serviceId },
+          select: { slug: true },
+        })
+
+        if (!service) {
+          throw new ActionError({
+            code: 'NOT_FOUND',
+            message: 'Service not found to associate image with.',
+          })
+        }
+
+        if (!input.imageFile) {
+          throw new ActionError({
+            code: 'BAD_REQUEST',
+            message: 'Image file is required.',
+          })
+        }
+
+        const imageUrl = await saveFileLocally(
+          input.imageFile,
+          input.imageFile.name,
+          `evidence/${service.slug}`
+        )
+
+        return { imageUrl }
+      },
+    }),
+    delete: defineProtectedAction({
+      accept: 'form',
+      permissions: 'admin',
+      input: evidenceImageDeleteSchema,
+      handler: async (input) => {
+        await deleteFileLocally(input.fileUrl)
+        return { success: true }
+      },
+    }),
+  },
 }

web/src/actions/admin/user.ts

@@ -1,12 +1,10 @@
-import { type Prisma, type ServiceUserRole, type PrismaClient } from '@prisma/client'
+import { type Prisma, type ServiceUserRole } from '@prisma/client'
 import { ActionError } from 'astro:actions'
 import { z } from 'zod'
 
 import { defineProtectedAction } from '../../lib/defineProtectedAction'
 import { saveFileLocally } from '../../lib/fileStorage'
-import { prisma as prismaInstance } from '../../lib/prisma'
-
-const prisma = prismaInstance as PrismaClient
+import { prisma } from '../../lib/prisma'
 
 const selectUserReturnFields = {
   id: true,

web/src/actions/api/index.ts

@@ -0,0 +1,5 @@
+import { apiServiceActions } from './service'
+
+export const apiActions = {
+  service: apiServiceActions,
+}

web/src/actions/api/service.ts

@@ -0,0 +1,151 @@
+import { z } from 'astro/zod'
+import { ActionError } from 'astro:actions'
+import { pick } from 'lodash-es'
+
+import { getKycLevelClarificationInfo } from '../../constants/kycLevelClarifications'
+import { getKycLevelInfo } from '../../constants/kycLevels'
+import { getVerificationStatusInfo } from '../../constants/verificationStatus'
+import { defineProtectedAction } from '../../lib/defineProtectedAction'
+import { prisma } from '../../lib/prisma'
+import { zodUrlOptionalProtocol } from '../../lib/zodUtils'
+
+import type { Prisma } from '@prisma/client'
+
+export const apiServiceActions = {
+  get: defineProtectedAction({
+    accept: 'json',
+    permissions: 'guest',
+    input: z.object({
+      id: z.coerce.number().int().positive().optional(),
+      slug: z
+        .string()
+        .min(1)
+        .max(2048)
+        .regex(/^[a-z0-9-]+$/, 'Allowed characters: lowercase letters, numbers, and hyphens')
+        .optional(),
+      url: zodUrlOptionalProtocol.optional(),
+    }),
+    handler: async (input, context) => {
+      if (!input.id && !input.slug && !input.url) {
+        throw new ActionError({
+          code: 'BAD_REQUEST',
+          message: 'At least one of the following parameters is required: id, slug, url',
+        })
+      }
+
+      const urlVariants = input.url
+        ? [input.url]
+            .flatMap((url) =>
+              [
+                url,
+                url.startsWith('http://') ? url.replace('http://', 'https://') : undefined,
+                url.startsWith('https://') ? url.replace('https://', 'http://') : undefined,
+              ].filter((url) => url !== undefined)
+            )
+            .flatMap((url) => [url, url.endsWith('/') ? url.slice(0, -1) : `${url}/`])
+        : undefined
+
+      const select = {
+        id: true,
+        name: true,
+        slug: true,
+        description: true,
+        kycLevel: true,
+        kycLevelClarification: true,
+        verificationStatus: true,
+        categories: {
+          select: {
+            name: true,
+            slug: true,
+          },
+        },
+        serviceUrls: true,
+        onionUrls: true,
+        i2pUrls: true,
+        tosUrls: true,
+        referral: true,
+        listedAt: true,
+        verifiedAt: true,
+        serviceVisibility: true,
+      } as const satisfies Prisma.ServiceSelect
+
+      let service = await prisma.service.findFirst({
+        where: {
+          listedAt: { lte: new Date() },
+          serviceVisibility: { in: ['PUBLIC', 'ARCHIVED', 'UNLISTED'] },
+
+          OR: [
+            ...(input.id ? ([{ id: input.id }] satisfies Prisma.ServiceWhereInput[]) : []),
+            ...(input.slug ? ([{ slug: input.slug }] satisfies Prisma.ServiceWhereInput[]) : []),
+            ...(urlVariants
+              ? ([
+                  { serviceUrls: { hasSome: urlVariants } },
+                  { onionUrls: { hasSome: urlVariants } },
+                  { i2pUrls: { hasSome: urlVariants } },
+                ] satisfies Prisma.ServiceWhereInput[])
+              : []),
+          ],
+        },
+        select,
+      })
+
+      if (!service && input.slug) {
+        service = await prisma.service.findFirst({
+          where: {
+            listedAt: { lte: new Date() },
+            serviceVisibility: { in: ['PUBLIC', 'ARCHIVED', 'UNLISTED'] },
+
+            previousSlugs: { has: input.slug },
+          },
+          select,
+        })
+      }
+
+      if (
+        !service ||
+        (service.serviceVisibility !== 'PUBLIC' &&
+          service.serviceVisibility !== 'ARCHIVED' &&
+          service.serviceVisibility !== 'UNLISTED') ||
+        !service.listedAt ||
+        service.listedAt > new Date()
+      ) {
+        throw new ActionError({
+          code: 'NOT_FOUND',
+          message: 'Service not found',
+        })
+      }
+
+      return {
+        id: service.id,
+        slug: service.slug,
+        name: service.name,
+        description: service.description,
+        serviceVisibility: service.serviceVisibility,
+        verificationStatus: service.verificationStatus,
+        verificationStatusInfo: pick(getVerificationStatusInfo(service.verificationStatus), [
+          'value',
+          'slug',
+          'label',
+          'labelShort',
+          'description',
+        ]),
+        verifiedAt: service.verifiedAt,
+        kycLevel: service.kycLevel,
+        kycLevelInfo: pick(getKycLevelInfo(service.kycLevel.toString()), ['value', 'name', 'description']),
+        kycLevelClarification: service.kycLevelClarification,
+        kycLevelClarificationInfo: pick(getKycLevelClarificationInfo(service.kycLevelClarification), [
+          'value',
+          'name',
+          'description',
+        ]),
+        categories: service.categories,
+        listedAt: service.listedAt,
+        serviceUrls: [...service.serviceUrls, ...service.onionUrls, ...service.i2pUrls].map(
+          (url) => url + (service.referral ?? '')
+        ),
+        tosUrls: service.tosUrls,
+        kycnotmeUrl: new URL(`/service/${service.slug}`, context.url).href,
+      }
+    },
+  }),
+}

web/src/actions/comment.ts

@@ -345,10 +345,11 @@ export const commentActions = {
         'order-id-status',
         'kyc-requested',
         'funds-blocked',
+        'toggle-rating-active',
       ]),
       value: z.union([
         z.enum(['PENDING', 'APPROVED', 'VERIFIED', 'REJECTED']),
-        z.enum(['PENDING', 'APPROVED', 'REJECTED']),
+        z.enum(['PENDING', 'APPROVED', 'REJECTED', 'WITHDRAWN']),
         z.boolean(),
         z.string(),
       ]),
@@ -411,7 +412,7 @@ export const commentActions = {
             updateData.privateContext = input.value as string
             break
           case 'order-id-status':
-            updateData.orderIdStatus = input.value as 'APPROVED' | 'PENDING' | 'REJECTED'
+            updateData.orderIdStatus = input.value as 'APPROVED' | 'PENDING' | 'REJECTED' | 'WITHDRAWN'
             break
           case 'kyc-requested':
             updateData.kycRequested = !!input.value
@@ -419,6 +420,9 @@ export const commentActions = {
           case 'funds-blocked':
             updateData.fundsBlocked = !!input.value
             break
+          case 'toggle-rating-active':
+            updateData.ratingActive = !!input.value
+            break
         }
 
         // Update the comment

web/src/actions/index.ts

@@ -1,5 +1,6 @@
 import { accountActions } from './account'
 import { adminActions } from './admin'
+import { apiActions } from './api'
 import { commentActions } from './comment'
 import { notificationActions } from './notifications'
 import { serviceActions } from './service'
@@ -19,6 +20,7 @@ import { serviceSuggestionActions } from './serviceSuggestion'
 export const server = {
   account: accountActions,
   admin: adminActions,
+  api: apiActions,
   comment: commentActions,
   notification: notificationActions,
   service: serviceActions,

web/src/actions/notifications.ts

@@ -23,6 +23,63 @@ export const notificationActions = {
       })
     },
   }),
+
+  webPush: {
+    subscribe: defineProtectedAction({
+      accept: 'json',
+      permissions: 'user',
+      input: z.object({
+        endpoint: z.string(),
+        p256dhKey: z.string(),
+        authKey: z.string(),
+        userAgent: z.string().optional(),
+      }),
+      handler: async (input, context) => {
+        await prisma.pushSubscription.upsert({
+          where: {
+            userId: context.locals.user.id,
+            endpoint: input.endpoint,
+          },
+          update: {
+            p256dh: input.p256dhKey,
+            auth: input.authKey,
+            userAgent: input.userAgent,
+          },
+          create: {
+            userId: context.locals.user.id,
+            endpoint: input.endpoint,
+            p256dh: input.p256dhKey,
+            auth: input.authKey,
+            userAgent: input.userAgent,
+          },
+        })
+      },
+    }),
+
+    unsubscribe: defineProtectedAction({
+      accept: 'json',
+      permissions: 'user',
+      input: z.object({
+        endpoint: z.string().optional(),
+      }),
+      handler: async (input, context) => {
+        if (input.endpoint) {
+          await prisma.pushSubscription.deleteMany({
+            where: {
+              userId: context.locals.user.id,
+              endpoint: input.endpoint,
+            },
+          })
+        } else {
+          await prisma.pushSubscription.deleteMany({
+            where: {
+              userId: context.locals.user.id,
+            },
+          })
+        }
+      },
+    }),
+  },
   preferences: {
     update: defineProtectedAction({
       accept: 'form',
@@ -31,7 +88,7 @@ export const notificationActions = {
         enableOnMyCommentStatusChange: z.coerce.boolean().optional(),
         enableAutowatchMyComments: z.coerce.boolean().optional(),
         enableNotifyPendingRepliesOnWatch: z.coerce.boolean().optional(),
-        karmaNotificationThreshold: z.coerce.number().int().min(1).optional(),
+        karmaNotificationThreshold: z.coerce.number().int().min(1).max(1_000_000).optional(),
       }),
       handler: async (input, context) => {
         await prisma.notificationPreferences.upsert({

web/src/actions/serviceSuggestion.ts

@@ -1,10 +1,4 @@
-import {
-  Currency,
-  ServiceSuggestionStatus,
-  ServiceSuggestionType,
-  ServiceVisibility,
-  VerificationStatus,
-} from '@prisma/client'
+import { Currency, KycLevelClarification } from '@prisma/client'
 import { z } from 'astro/zod'
 import { ActionError } from 'astro:actions'
 import { formatDistanceStrict } from 'date-fns'
@@ -12,11 +6,13 @@ import { formatDistanceStrict } from 'date-fns'
 import { captchaFormSchemaProperties, captchaFormSchemaSuperRefine } from '../lib/captchaValidation'
 import { defineProtectedAction } from '../lib/defineProtectedAction'
 import { saveFileLocally } from '../lib/fileStorage'
+import { findServicesBySimilarity } from '../lib/findServicesBySimilarity'
 import { handleHoneypotTrap } from '../lib/honeypot'
 import { prisma } from '../lib/prisma'
+import { separateServiceUrlsByType } from '../lib/urls'
 import {
   imageFileSchemaRequired,
-  stringListOfUrlsSchema,
+  stringListOfContactMethodsSchema,
   stringListOfUrlsSchemaRequired,
   zodCohercedNumber,
 } from '../lib/zodUtils'
@@ -33,11 +29,12 @@ export const SUGGESTION_DESCRIPTION_MAX_LENGTH = 100
 export const SUGGESTION_MESSAGE_CONTENT_MAX_LENGTH = 1000
 
 const findPossibleDuplicates = async (input: { name: string }) => {
-  const possibleDuplicates = await prisma.service.findMany({
+  const matches = await findServicesBySimilarity(input.name, 0.3)
+
+  return await prisma.service.findMany({
     where: {
-      name: {
-        contains: input.name,
-        mode: 'insensitive',
+      id: {
+        in: matches.map(({ id }) => id),
       },
     },
     select: {
@@ -47,8 +44,6 @@ const findPossibleDuplicates = async (input: { name: string }) => {
       description: true,
     },
   })
-
-  return possibleDuplicates
 }
 
 const serializeExtraNotes = <T extends Record<string, unknown>>(
@@ -122,9 +117,9 @@ export const serviceSuggestionActions = {
 
       const serviceSuggestion = await prisma.serviceSuggestion.create({
         data: {
-          type: ServiceSuggestionType.EDIT_SERVICE,
+          type: 'EDIT_SERVICE',
           notes: combinedNotes,
-          status: ServiceSuggestionStatus.PENDING,
+          status: 'PENDING',
           userId: context.locals.user.id,
           serviceId: service.id,
         },
@@ -161,14 +156,20 @@ export const serviceSuggestionActions = {
             { message: 'Slug must be unique, try a different one' }
           ),
         description: z.string().min(1).max(SUGGESTION_DESCRIPTION_MAX_LENGTH),
-        serviceUrls: stringListOfUrlsSchemaRequired,
+        allServiceUrls: stringListOfUrlsSchemaRequired,
         tosUrls: stringListOfUrlsSchemaRequired,
-        onionUrls: stringListOfUrlsSchema,
+        contactMethods: stringListOfContactMethodsSchema,
         kycLevel: zodCohercedNumber(z.coerce.number().int().min(0).max(4)),
+        kycLevelClarification: z.nativeEnum(KycLevelClarification),
         attributes: z.array(z.coerce.number().int().positive()),
         categories: z.array(z.coerce.number().int().positive()).min(1),
         acceptedCurrencies: z.array(z.nativeEnum(Currency)).min(1),
         imageFile: imageFileSchemaRequired,
+        rulesConfirm: z.literal('on', {
+          errorMap: () => ({
+            message: 'You must accept the suggestion rules and process to continue',
+          }),
+        }),
         /** @deprecated Honey pot field, do not use */
         message: z.unknown().optional(),
         skipDuplicateCheck: z
@@ -201,6 +202,7 @@ export const serviceSuggestionActions = {
               'imageFile',
               'captcha-value',
               'captcha-solution-hash',
+              'rulesConfirm',
             ]),
             serviceSuggestion: undefined,
             service: undefined,
@@ -210,6 +212,12 @@ export const serviceSuggestionActions = {
 
       const imageUrl = await saveFileLocally(input.imageFile, input.imageFile.name)
 
+      const {
+        web: serviceUrls,
+        onion: onionUrls,
+        i2p: i2pUrls,
+      } = separateServiceUrlsByType(input.allServiceUrls)
+
       const { serviceSuggestion, service } = await prisma.$transaction(async (tx) => {
         const serviceSelect = {
           id: true,
@@ -221,18 +229,20 @@ export const serviceSuggestionActions = {
             name: input.name,
             slug: input.slug,
             description: input.description,
-            serviceUrls: input.serviceUrls,
+            serviceUrls,
             tosUrls: input.tosUrls,
-            onionUrls: input.onionUrls,
+            onionUrls,
+            i2pUrls,
             kycLevel: input.kycLevel,
+            kycLevelClarification: input.kycLevelClarification,
             acceptedCurrencies: input.acceptedCurrencies,
             imageUrl,
-            verificationStatus: VerificationStatus.COMMUNITY_CONTRIBUTED,
+            verificationStatus: 'COMMUNITY_CONTRIBUTED',
             overallScore: 0,
             privacyScore: 0,
             trustScore: 0,
             listedAt: new Date(),
-            serviceVisibility: ServiceVisibility.UNLISTED,
+            serviceVisibility: 'UNLISTED',
             categories: {
               connect: input.categories.map((id) => ({ id })),
             },
@@ -241,6 +251,11 @@ export const serviceSuggestionActions = {
                 attributeId: id,
               })),
             },
+            contactMethods: {
+              create: input.contactMethods.map((value) => ({
+                value,
+              })),
+            },
           },
           select: serviceSelect,
         })
@@ -248,8 +263,8 @@ export const serviceSuggestionActions = {
         const serviceSuggestion = await tx.serviceSuggestion.create({
           data: {
             notes: input.notes,
-            type: ServiceSuggestionType.CREATE_SERVICE,
-            status: ServiceSuggestionStatus.PENDING,
+            type: 'CREATE_SERVICE',
+            status: 'PENDING',
             userId: context.locals.user.id,
             serviceId: service.id,
           },

web/src/components/BadgeSmall.astro

@@ -2,13 +2,14 @@
 import { Icon } from 'astro-icon/components'
 import { tv, type VariantProps } from 'tailwind-variants'
 
+import type { AstroChildren } from '../lib/astro'
 import type { Polymorphic } from 'astro/types'
 
 const badge = tv({
   slots: {
     base: 'inline-flex h-4 items-center justify-center gap-0.75 rounded-full px-1.25 text-[10px] font-medium',
     icon: 'size-3 shrink-0',
-    text: 'mx-0.25 overflow-hidden text-ellipsis whitespace-nowrap',
+    text: 'mx-0.25 overflow-hidden text-ellipsis whitespace-nowrap [&>a]:hover:underline [&>a]:focus-visible:underline',
   },
   variants: {
     color: {
@@ -122,22 +123,29 @@ const badge = tv({
   },
 })
 
-type Props<Tag extends 'a' | 'div' | 'li' = 'div'> = Polymorphic<
+type Props<
+  Tag extends 'a' | 'div' | 'li' = 'div',
+  Text extends string | undefined = string | undefined,
+> = Polymorphic<
   VariantProps<typeof badge> & {
     as: Tag
     icon?: string
-    text: string
+    endIcon?: string
+    text?: Text
     inlineIcon?: boolean
     classNames?: {
       icon?: string
       text?: string
+      endIcon?: string
     }
+    children?: Text extends string ? never : AstroChildren
   }
 >
 
 const {
   as: Tag = 'div',
   icon: iconName,
+  endIcon: endIconName,
   text: textContent,
   inlineIcon,
   classNames,
@@ -158,5 +166,10 @@ const { base, icon: iconSlot, text: textSlot } = badge({ color, variant })
       <Icon name={iconName} class={iconSlot({ class: classNames?.icon })} is:inline={inlineIcon} />
     )
   }
-  <span class={textSlot({ class: classNames?.text })}>{textContent}</span>
+  <span class={textSlot({ class: classNames?.text })}>{textContent ?? <slot />}</span>
+  {
+    !!endIconName && (
+      <Icon name={endIconName} class={iconSlot({ class: classNames?.endIcon })} is:inline={inlineIcon} />
+    )
+  }
 </Tag>

web/src/components/BadgeStandard.astro

@@ -8,11 +8,12 @@ import type { Polymorphic } from 'astro/types'
 type Props<Tag extends 'a' | 'div' | 'li' = 'div'> = Polymorphic<{
   as: Tag
   icon: string
+  endIcon?: string
   text: string
   inlineIcon?: boolean
 }>
 
-const { icon, text, class: className, inlineIcon, as: Tag = 'div', ...divProps } = Astro.props
+const { icon, text, class: className, inlineIcon, endIcon, as: Tag = 'div', ...divProps } = Astro.props
 ---
 
 <Tag
@@ -24,4 +25,5 @@ const { icon, text, class: className, inlineIcon, as: Tag = 'div', ...divProps }
 >
   <Icon name={icon} class="size-4" is:inline={inlineIcon} />
   <span>{text}</span>
+  {!!endIcon && <Icon name={endIcon} class="size-4" is:inline={inlineIcon} />}
 </Tag>

web/src/components/BadgeStandardFilter.astro

@@ -0,0 +1,41 @@
+---
+import { uniq } from 'lodash-es'
+
+import { cn } from '../lib/cn'
+
+import BadgeStandard from './BadgeStandard.astro'
+
+import type { ComponentProps } from 'astro/types'
+
+type Props = Omit<
+  ComponentProps<typeof BadgeStandard>,
+  'as' | 'endIcon' | 'href' | 'icon' | 'text' | 'variant'
+> & {
+  name: string
+  value: string
+  label: string
+  icon: string
+}
+
+const { name, value, label, icon, ...props } = Astro.props
+
+const selectedValues = Astro.url.searchParams.getAll(name)
+const isSelected = selectedValues.includes(value)
+
+const url = new URL(Astro.url)
+url.searchParams.delete(name)
+const valuesToSet = uniq(isSelected ? selectedValues.filter((v) => v !== value) : [...selectedValues, value])
+for (const value of valuesToSet) {
+  url.searchParams.set(name, value)
+}
+---
+
+<BadgeStandard
+  as="a"
+  href={url.href}
+  class={cn(isSelected && 'bg-green-950 text-green-500')}
+  text={label}
+  icon={icon}
+  endIcon={isSelected ? 'ri:close-fill' : undefined}
+  {...props}
+/>

web/src/components/BaseHead.astro

@@ -2,12 +2,17 @@
 import LoadingIndicator from 'astro-loading-indicator/component'
 import { Schema } from 'astro-seo-schema'
 import { ClientRouter } from 'astro:transitions'
+import { pwaAssetsHead } from 'virtual:pwa-assets/head'
+import { pwaInfo } from 'virtual:pwa-info'
 
 import { isNotArray } from '../lib/arrays'
 import { DEPLOYMENT_MODE } from '../lib/envVariables'
 
+import DynamicFavicon from './DynamicFavicon.astro'
 import HtmxScript from './HtmxScript.astro'
+import NotificationEventsScript from './NotificationEventsScript.astro'
 import { makeOgImageUrl } from './OgImage'
+import ServerEventsScript from './ServerEventsScript.astro'
 import TailwindJsPluggin from './TailwindJsPluggin.astro'
 
 import type { ComponentProps } from 'astro/types'
@@ -70,12 +75,6 @@ const fullTitle = `${pageTitle} | KYCnot.me ${modeName}`
 const ogImageUrl = makeOgImageUrl(ogImage, Astro.url)
 ---
 
-<!-- Favicon -->
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="icon" type="image/svg+xml" href="/favicon-lightmode.svg" media="(prefers-color-scheme: light)" />
-{DEPLOYMENT_MODE === 'development' && <link rel="icon" type="image/svg+xml" href="/favicon-dev.svg" />}
-{DEPLOYMENT_MODE === 'staging' && <link rel="icon" type="image/svg+xml" href="/favicon-stage.svg" />}
-
 <!-- Primary Meta Tags -->
 <meta name="generator" content={Astro.generator} />
 <meta name="description" content={description} />
@@ -98,7 +97,13 @@ const ogImageUrl = makeOgImageUrl(ogImage, Astro.url)
 
 <!-- Other -->
 <link rel="sitemap" href="/sitemap-index.xml" />
-<meta name="theme-color" content="#040505" />
+
+<!-- PWA -->
+{pwaAssetsHead.themeColor && <meta name="theme-color" content={pwaAssetsHead.themeColor.content} />}
+{pwaAssetsHead.links.filter((link) => link.rel !== 'icon').map((link) => <link {...link} />)}
+{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
+
+<DynamicFavicon />
 
 <!-- Components -->
 <ClientRouter />
@@ -131,3 +136,11 @@ const ogImageUrl = makeOgImageUrl(ogImage, Astro.url)
     />
   ))
 }
+
+<!-- Server events -->
+<ServerEventsScript />
+
+<!-- Push Notifications -->
+
+<script src="/src/pwa.ts"></script>
+<NotificationEventsScript />

web/src/components/Button.astro

@@ -6,7 +6,7 @@ import { cn } from '../lib/cn'
 
 import type { HTMLAttributes, Polymorphic } from 'astro/types'
 
-type Props<Tag extends 'a' | 'button' | 'label' = 'button'> = Polymorphic<
+type Props<Tag extends 'a' | 'button' | 'label' | 'span' = 'button'> = Polymorphic<
   Required<Pick<HTMLAttributes<'label'>, Tag extends 'label' ? 'for' : never>> &
     VariantProps<typeof button> & {
       as: Tag
@@ -249,7 +249,7 @@ const button = tv({
 })
 
 const {
-  as: Tag = 'button' as 'a' | 'button' | 'label',
+  as: Tag = 'button' as 'a' | 'button' | 'label' | 'span',
   label,
   icon,
   endIcon,
@@ -286,8 +286,7 @@ const ActualTag = disabled && Tag === 'a' ? 'span' : Tag
 
 <ActualTag
   class={base({ class: cn({ 'opacity-20 hover:opacity-50': disabled }, className) })}
-  role={role ??
-    (ActualTag === 'button' || ActualTag === 'label' || ActualTag === 'span' ? undefined : 'button')}
+  role={role ?? (Tag === 'button' || Tag === 'label' || (disabled && Tag === 'a') ? undefined : 'button')}
   aria-disabled={disabled}
   {...dataAstroReload && { 'data-astro-reload': dataAstroReload }}
   {...htmlProps}

web/src/components/Chat.astro

@@ -76,7 +76,15 @@ const inputErrors = isInputError(result?.error) ? result.error.fields : {}
           />
 
           <Tooltip text="Send">
-            <Button type="submit" icon="ri:send-plane-fill" size="lg" color="success" class="h-16" />
+            <Button
+              type="submit"
+              icon="ri:send-plane-fill"
+              size="lg"
+              color="success"
+              class="h-16"
+              label="Send"
+              iconOnly
+            />
           </Tooltip>
         </form>
         {!!inputErrors.content && <div class="text-sm text-red-500">{inputErrors.content}</div>}

web/src/components/CommentItem.astro

@@ -102,7 +102,7 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
   {...htmlProps}
   id={`comment-${comment.id.toString()}`}
   class={cn([
-    'group',
+    'group bg-night-700',
     depth > 0 && 'ml-3 border-b-0 border-l border-zinc-800 pt-2 pl-2 sm:ml-4',
     comment.author.serviceAffiliations.some((affiliation) => affiliation.service.slug === serviceSlug) &&
       'bg-[#182a1f]',
@@ -243,13 +243,10 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
         comment.author.serviceAffiliations.map((affiliation) => {
           const roleInfo = getServiceUserRoleInfo(affiliation.role)
           return (
-            <BadgeSmall
-              icon={roleInfo.icon}
-              color={roleInfo.color}
-              text={`${roleInfo.label} at ${affiliation.service.name}`}
-              variant="faded"
-              inlineIcon
-            />
+            <BadgeSmall icon={roleInfo.icon} color={roleInfo.color} variant="faded" inlineIcon>
+              {roleInfo.label} at
+              <a href={`/service/${affiliation.service.slug}`}>{affiliation.service.name}</a>
+            </BadgeSmall>
           )
         })
       }
@@ -270,12 +267,6 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
 
     {comment.suspicious && <BadgeSmall icon="ri:spam-2-fill" color="red" text="Potential SPAM" inlineIcon />}
 
-    {
-      comment.requiresAdminReview && isAuthorOrPrivileged && (
-        <BadgeSmall icon="ri:alert-fill" color="yellow" text="Reported" inlineIcon />
-      )
-    }
-
     {
       comment.rating !== null && !comment.parentId && (
         <Tooltip
@@ -320,6 +311,19 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
           color={commentStatusById.REJECTED.color}
           text={commentStatusById.REJECTED.label}
           inlineIcon
+          endIcon="ri:lock-line"
+        />
+      )
+    }
+
+    {
+      comment.requiresAdminReview && isAuthorOrPrivileged && (
+        <BadgeSmall
+          icon="ri:alert-fill"
+          color="yellow"
+          text="Needs admin review"
+          inlineIcon
+          endIcon="ri:lock-line"
         />
       )
     }

web/src/components/CommentModeration.astro

@@ -20,6 +20,8 @@ type Props = HTMLAttributes<'div'> & {
       privateContext: true
       orderId: true
       orderIdStatus: true
+      rating: true
+      ratingActive: true
     }
   }>
 }
@@ -46,10 +48,10 @@ if (!user || !user.admin || !user.moderator) return null
   <div
     class="bg-night-600 border-night-500 mt-2 hidden overflow-hidden rounded-md border peer-checked:block peer-checked:p-2"
   >
-    <div class="border-night-500 flex flex-wrap gap-1 border-b pb-2">
+    <div class="border-night-500 flex flex-wrap items-center gap-1 border-b pb-2">
       <button
         class={cn(
-          'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+          'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
           comment.status === 'REJECTED'
             ? 'border border-red-500/30 bg-red-500/20 text-red-400'
             : 'bg-night-700 hover:bg-red-500/20 hover:text-red-400'
@@ -59,42 +61,13 @@ if (!user || !user.admin || !user.moderator) return null
         data-comment-id={comment.id}
         data-user-id={user.id}
       >
-        {comment.status === 'REJECTED' ? 'Unreject' : 'Reject'}
+        <Icon name="ri:close-circle-line" class="h-3.5 w-3.5" />
+        <span>{comment.status === 'REJECTED' ? 'Unreject' : 'Reject'}</span>
       </button>
 
       <button
         class={cn(
-          'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
-          comment.suspicious
-            ? 'border border-yellow-500/30 bg-yellow-500/20 text-yellow-400'
-            : 'bg-night-700 hover:bg-yellow-500/20 hover:text-yellow-400'
-        )}
-        data-action="suspicious"
-        data-value={!comment.suspicious}
-        data-comment-id={comment.id}
-        data-user-id={user.id}
-      >
-        {comment.suspicious ? 'Not Spam' : 'Spam'}
-      </button>
-
-      <button
-        class={cn(
-          'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
-          comment.requiresAdminReview
-            ? 'border border-purple-500/30 bg-purple-500/20 text-purple-400'
-            : 'bg-night-700 hover:bg-purple-500/20 hover:text-purple-400'
-        )}
-        data-action="requires-admin-review"
-        data-value={!comment.requiresAdminReview}
-        data-comment-id={comment.id}
-        data-user-id={user.id}
-      >
-        {comment.requiresAdminReview ? 'No Admin Review' : 'Admin Review'}
-      </button>
-
-      <button
-        class={cn(
-          'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+          'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
           comment.status === 'VERIFIED'
             ? 'border border-green-500/30 bg-green-500/20 text-green-400'
             : 'bg-night-700 hover:bg-green-500/20 hover:text-green-400'
@@ -104,12 +77,13 @@ if (!user || !user.admin || !user.moderator) return null
         data-comment-id={comment.id}
         data-user-id={user.id}
       >
-        {comment.status === 'VERIFIED' ? 'Unverify' : 'Verify'}
+        <Icon name="ri:verified-badge-line" class="h-3.5 w-3.5" />
+        <span>{comment.status === 'VERIFIED' ? 'Unverify' : 'Verify'}</span>
       </button>
 
       <button
         class={cn(
-          'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+          'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
           comment.status === 'PENDING' || comment.status === 'HUMAN_PENDING'
             ? 'border border-blue-500/30 bg-blue-500/20 text-blue-400'
             : 'bg-night-700 hover:bg-blue-500/20 hover:text-blue-400'
@@ -121,12 +95,49 @@ if (!user || !user.admin || !user.moderator) return null
         data-comment-id={comment.id}
         data-user-id={user.id}
       >
-        {comment.status === 'PENDING' || comment.status === 'HUMAN_PENDING' ? 'Approve' : 'Pending'}
+        <Icon name="ri:checkbox-circle-line" class="h-3.5 w-3.5" />
+        <span>
+          {comment.status === 'PENDING' || comment.status === 'HUMAN_PENDING' ? 'Approve' : 'Pending'}
+        </span>
+      </button>
+
+      <div class="bg-night-500 h-5 w-px"></div>
+
+      <button
+        class={cn(
+          'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+          comment.suspicious
+            ? 'border border-yellow-500/30 bg-yellow-500/20 text-yellow-400'
+            : 'bg-night-700 hover:bg-yellow-500/20 hover:text-yellow-400'
+        )}
+        data-action="suspicious"
+        data-value={!comment.suspicious}
+        data-comment-id={comment.id}
+        data-user-id={user.id}
+      >
+        <Icon name="ri:spam-2-line" class="h-3.5 w-3.5" />
+        <span>{comment.suspicious ? 'Not Spam' : 'Spam'}</span>
       </button>
 
       <button
         class={cn(
-          'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+          'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+          comment.requiresAdminReview
+            ? 'border border-purple-500/30 bg-purple-500/20 text-purple-400'
+            : 'bg-night-700 hover:bg-purple-500/20 hover:text-purple-400'
+        )}
+        data-action="requires-admin-review"
+        data-value={!comment.requiresAdminReview}
+        data-comment-id={comment.id}
+        data-user-id={user.id}
+      >
+        <Icon name="ri:shield-user-line" class="h-3.5 w-3.5" />
+        <span>{comment.requiresAdminReview ? 'No Admin Review' : 'Needs Admin Review'}</span>
+      </button>
+
+      <button
+        class={cn(
+          'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
           comment.kycRequested
             ? 'border border-red-500/30 bg-red-500/20 text-red-400'
             : 'bg-night-700 hover:bg-red-500/20 hover:text-red-400'
@@ -136,12 +147,13 @@ if (!user || !user.admin || !user.moderator) return null
         data-comment-id={comment.id}
         data-user-id={user.id}
       >
-        {comment.kycRequested ? 'No KYC Issue' : 'KYC Issue'}
+        <Icon name="ri:bank-card-line" class="h-3.5 w-3.5" />
+        <span>{comment.kycRequested ? 'No KYC Issue' : 'KYC Issue'}</span>
       </button>
 
       <button
         class={cn(
-          'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+          'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
           comment.fundsBlocked
             ? 'border border-red-500/30 bg-red-500/20 text-red-400'
             : 'bg-night-700 hover:bg-red-500/20 hover:text-red-400'
@@ -151,8 +163,31 @@ if (!user || !user.admin || !user.moderator) return null
         data-comment-id={comment.id}
         data-user-id={user.id}
       >
-        {comment.fundsBlocked ? 'No Funds Issue' : 'Funds Issue'}
+        <Icon name="ri:lock-line" class="h-3.5 w-3.5" />
+        <span>{comment.fundsBlocked ? 'No Funds Issue' : 'Funds Issue'}</span>
       </button>
+
+      <div class="bg-night-500 h-5 w-px"></div>
+
+      {
+        comment.rating && (
+          <button
+            class={cn(
+              'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+              comment.ratingActive
+                ? 'border border-blue-500/30 bg-blue-500/20 text-blue-400'
+                : 'bg-night-700 hover:bg-blue-500/20 hover:text-blue-400'
+            )}
+            data-action="toggle-rating-active"
+            data-value={!comment.ratingActive}
+            data-comment-id={comment.id}
+            data-user-id={user.id}
+          >
+            <Icon name="ri:star-line" class="h-3.5 w-3.5" />
+            <span>{comment.ratingActive ? 'Disable Rating' : 'Enable Rating'}</span>
+          </button>
+        )
+      }
     </div>
 
     <div class="mt-2 space-y-1.5">
@@ -208,7 +243,7 @@ if (!user || !user.admin || !user.moderator) return null
               <div class="flex gap-1">
                 <button
                   class={cn(
-                    'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+                    'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
                     comment.orderIdStatus === 'APPROVED'
                       ? 'border border-green-500/30 bg-green-500/20 text-green-400'
                       : 'bg-night-700 hover:bg-green-500/20 hover:text-green-400'
@@ -218,11 +253,12 @@ if (!user || !user.admin || !user.moderator) return null
                   data-comment-id={comment.id}
                   data-user-id={user.id}
                 >
-                  Approve
+                  <Icon name="ri:check-line" class="h-3.5 w-3.5" />
+                  <span>Approve</span>
                 </button>
                 <button
                   class={cn(
-                    'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+                    'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
                     comment.orderIdStatus === 'REJECTED'
                       ? 'border border-red-500/30 bg-red-500/20 text-red-400'
                       : 'bg-night-700 hover:bg-red-500/20 hover:text-red-400'
@@ -232,11 +268,12 @@ if (!user || !user.admin || !user.moderator) return null
                   data-comment-id={comment.id}
                   data-user-id={user.id}
                 >
-                  Reject
+                  <Icon name="ri:close-line" class="h-3.5 w-3.5" />
+                  <span>Reject</span>
                 </button>
                 <button
                   class={cn(
-                    'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+                    'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
                     comment.orderIdStatus === 'PENDING'
                       ? 'border border-blue-500/30 bg-blue-500/20 text-blue-400'
                       : 'bg-night-700 hover:bg-blue-500/20 hover:text-blue-400'
@@ -246,7 +283,23 @@ if (!user || !user.admin || !user.moderator) return null
                   data-comment-id={comment.id}
                   data-user-id={user.id}
                 >
-                  Pending
+                  <Icon name="ri:time-line" class="h-3.5 w-3.5" />
+                  <span>Pending</span>
+                </button>
+                <button
+                  class={cn(
+                    'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs transition-colors',
+                    comment.orderIdStatus === 'WITHDRAWN'
+                      ? 'border-night-400 bg-night-500/50 text-night-300 border'
+                      : 'bg-night-700 hover:bg-night-500/50 hover:text-night-300'
+                  )}
+                  data-action="order-id-status"
+                  data-value="WITHDRAWN"
+                  data-comment-id={comment.id}
+                  data-user-id={user.id}
+                >
+                  <Icon name="ri:arrow-go-back-line" class="h-3.5 w-3.5" />
+                  <span>Withdrawn</span>
                 </button>
               </div>
             </div>
@@ -280,7 +333,8 @@ if (!user || !user.admin || !user.moderator) return null
               action === 'suspicious' ||
               action === 'requires-admin-review' ||
               action === 'kyc-requested' ||
-              action === 'funds-blocked'
+              action === 'funds-blocked' ||
+              action === 'toggle-rating-active'
                 ? value === 'true'
                 : value,
           })
@@ -290,7 +344,8 @@ if (!user || !user.admin || !user.moderator) return null
             if (action === 'status') {
               window.location.reload()
             } else if (action === 'suspicious') {
-              btn.textContent = value === 'true' ? 'Not Sus' : 'Sus'
+              const span = btn.querySelector('span')
+              if (span) span.textContent = value === 'true' ? 'Not Spam' : 'Spam'
               btn.classList.toggle('bg-yellow-500/20')
               btn.classList.toggle('text-yellow-400')
               btn.classList.toggle('border-yellow-500/30')
@@ -298,7 +353,8 @@ if (!user || !user.admin || !user.moderator) return null
               btn.classList.toggle('bg-night-700')
               btn.setAttribute('data-value', value === 'true' ? 'false' : 'true')
             } else if (action === 'requires-admin-review') {
-              btn.textContent = value === 'true' ? 'No Review' : 'Review'
+              const span = btn.querySelector('span')
+              if (span) span.textContent = value === 'true' ? 'No Admin Review' : 'Needs Admin Review'
               btn.classList.toggle('bg-purple-500/20')
               btn.classList.toggle('text-purple-400')
               btn.classList.toggle('border-purple-500/30')
@@ -309,7 +365,8 @@ if (!user || !user.admin || !user.moderator) return null
               // Refresh to show updated order ID status
               window.location.reload()
             } else if (action === 'kyc-requested') {
-              btn.textContent = value === 'true' ? 'No KYC Issue' : 'KYC Issue'
+              const span = btn.querySelector('span')
+              if (span) span.textContent = value === 'true' ? 'No KYC Issue' : 'KYC Issue'
               btn.classList.toggle('bg-red-500/20')
               btn.classList.toggle('text-red-400')
               btn.classList.toggle('border-red-500/30')
@@ -317,13 +374,23 @@ if (!user || !user.admin || !user.moderator) return null
               btn.classList.toggle('bg-night-700')
               btn.setAttribute('data-value', value === 'true' ? 'false' : 'true')
             } else if (action === 'funds-blocked') {
-              btn.textContent = value === 'true' ? 'No Funds Issue' : 'Funds Issue'
+              const span = btn.querySelector('span')
+              if (span) span.textContent = value === 'true' ? 'No Funds Issue' : 'Funds Issue'
               btn.classList.toggle('bg-red-500/20')
               btn.classList.toggle('text-red-400')
               btn.classList.toggle('border-red-500/30')
               btn.classList.toggle('border')
               btn.classList.toggle('bg-night-700')
               btn.setAttribute('data-value', value === 'true' ? 'false' : 'true')
+            } else if (action === 'toggle-rating-active') {
+              const span = btn.querySelector('span')
+              if (span) span.textContent = value === 'true' ? 'Disable Rating' : 'Enable Rating'
+              btn.classList.toggle('bg-blue-500/20')
+              btn.classList.toggle('text-blue-400')
+              btn.classList.toggle('border-blue-500/30')
+              btn.classList.toggle('border')
+              btn.classList.toggle('bg-night-700')
+              btn.setAttribute('data-value', value === 'true' ? 'false' : 'true')
             }
           } else {
             console.error('Error moderating comment:', error)

web/src/components/CommentReply.astro

@@ -92,7 +92,7 @@ const userCommentsDisabled = user ? user.karmaUnlocks.commentsDisabled : false
                 <div class="flex flex-wrap gap-4">
                   <InputRating name="rating" label="Rating" />
 
-                  <InputWrapper label="Tags" name="tags">
+                  <InputWrapper label="I experienced..." name="tags">
                     <label class="flex cursor-pointer items-center gap-2">
                       <input type="checkbox" name="issueKycRequested" class="text-red-400" />
                       <span class="flex items-center gap-1 text-xs text-red-400">

web/src/components/CommentSummary.astro

@@ -47,12 +47,9 @@ const averageUserRatingFromQuery =
   totalComments > 0 ? sum(ratings.map((stat) => stat.rating * stat.count)) / totalComments : null
 
 if (averageUserRatingFromProps !== undefined) {
-  if (
-    averageUserRatingFromQuery !== averageUserRatingFromProps ||
-    (averageUserRatingFromQuery !== null &&
-      averageUserRatingFromProps !== null &&
-      round(averageUserRatingFromQuery, 2) !== round(averageUserRatingFromProps, 2))
-  ) {
+  const a = averageUserRatingFromQuery === null ? null : round(averageUserRatingFromQuery, 2)
+  const b = averageUserRatingFromProps === null ? null : round(averageUserRatingFromProps, 2)
+  if (a !== b) {
     console.error(
       `The averageUserRating of the comments shown is different from the averageUserRating from the database. Service ID: ${serviceId} ratingUi: ${averageUserRatingFromQuery} ratingDb: ${averageUserRatingFromProps}`
     )

web/src/components/DynamicFavicon.astro

@@ -0,0 +1,79 @@
+---
+import { DEPLOYMENT_MODE } from '../lib/envVariables'
+import { prisma } from '../lib/prisma'
+
+const user = Astro.locals.user
+
+const hasUnreadNotifications = await Astro.locals.banners.try(
+  'Error getting unread notification count',
+  async () =>
+    user
+      ? !!(await prisma.notification.findFirst({
+          where: { userId: user.id, read: false },
+          select: { id: true },
+        }))
+      : false,
+  false
+)
+
+function addBadgeIfUnread(href: string) {
+  if (hasUnreadNotifications) return href.replace('.svg', '-badge.svg')
+  return href
+}
+---
+
+{
+  DEPLOYMENT_MODE === 'production' && (
+    <>
+      <link rel="icon" type="image/svg+xml" sizes="any" href={addBadgeIfUnread('/favicon.svg')} />
+      <link
+        rel="icon"
+        type="image/svg+xml"
+        sizes="any"
+        href={addBadgeIfUnread('/favicon-lightmode.svg')}
+        media="(prefers-color-scheme: light)"
+      />
+    </>
+  )
+}
+{
+  DEPLOYMENT_MODE === 'development' && (
+    <>
+      <link rel="icon" type="image/svg+xml" sizes="any" href={addBadgeIfUnread('/favicon-dev.svg')} />
+      <link
+        rel="icon"
+        type="image/svg+xml"
+        sizes="any"
+        href={addBadgeIfUnread('/favicon-dev-lightmode.svg')}
+        media="(prefers-color-scheme: light)"
+      />
+    </>
+  )
+}
+{
+  DEPLOYMENT_MODE === 'staging' && (
+    <>
+      <link rel="icon" type="image/svg+xml" sizes="any" href={addBadgeIfUnread('/favicon-stage.svg')} />
+      <link
+        rel="icon"
+        type="image/svg+xml"
+        sizes="any"
+        href={addBadgeIfUnread('/favicon-stage-lightmode.svg')}
+        media="(prefers-color-scheme: light)"
+      />
+    </>
+  )
+}
+
+<script>
+  document.addEventListener('sse-new-notification', () => {
+    const links = document.querySelectorAll('link[rel="icon"]')
+    links.forEach((link) => {
+      const href = link.getAttribute('href')
+      if (href && href.includes('favicon') && !href.endsWith('-badge.svg')) {
+        const newHref = href.replace('.svg', '-badge.svg')
+        link.setAttribute('href', newHref)
+      }
+    })
+  })
+</script>

web/src/components/Footer.astro

@@ -27,6 +27,12 @@ const links = [
     icon: 'i2p',
     external: true,
   },
+  {
+    href: '/docs/api',
+    label: 'API',
+    icon: 'ri:plug-line',
+    external: false,
+  },
   {
     href: '/about',
     label: 'About',

web/src/components/HeaderNotificationIndicator.astro

@@ -27,6 +27,8 @@ const count =
   user && (
     <a
       href="/notifications"
+      data-notification-count-link
+      data-current-count={count}
       class={cn(
         'group relative flex cursor-pointer items-center justify-center text-gray-400 transition-colors duration-100 hover:text-white',
         className
@@ -35,11 +37,32 @@ const count =
       {...htmlProps}
     >
       <Icon name="material-symbols:notifications-outline" class="size-5" />
-      {count > 0 && (
-        <span class="absolute top-[calc(50%-var(--spacing)*3.5)] right-[calc(50%-var(--spacing)*3.5)] flex size-3.5 items-center justify-center rounded-full bg-blue-600 text-[10px] font-bold tracking-tighter text-white group-hover:bg-blue-500">
-          {count > 99 ? '★' : count.toLocaleString()}
-        </span>
-      )}
+      <span
+        data-notification-count-badge
+        class="absolute top-[calc(50%-var(--spacing)*3.5)] right-[calc(50%-var(--spacing)*3.5)] flex size-3.5 items-center justify-center rounded-full bg-blue-600 text-[10px] font-bold tracking-tighter text-white group-hover:bg-blue-500 empty:hidden"
+      >
+        {count > 0 ? (count > 99 ? '★' : count.toLocaleString()) : ''}
+      </span>
     </a>
   )
 }
+
+<script>
+  document.addEventListener('sse-new-notification', () => {
+    document.querySelectorAll<HTMLElement>('[data-notification-count-link]').forEach((link) => {
+      const currentCount = Number(link.getAttribute('data-current-count') || 0)
+      const newCount = currentCount + 1
+
+      link.querySelectorAll<HTMLElement>('[data-notification-count-badge]').forEach((badge) => {
+        badge.textContent = newCount > 0 ? (newCount > 99 ? '★' : newCount.toLocaleString()) : ''
+      })
+
+      link.setAttribute(
+        'aria-label',
+        `Go to notifications${newCount > 0 ? ` (${newCount.toLocaleString()} unread)` : ''}`
+      )
+
+      link.setAttribute('data-current-count', String(newCount))
+    })
+  })
+</script>

web/src/components/InputCheckboxGroup.astro

@@ -43,7 +43,7 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
               : Array.from({ length: icons.length }, () => option.iconClassName)
             : []
           return (
-            <label class="hover:bg-night-500 flex cursor-pointer items-center gap-2 px-5 py-1">
+            <label class="hover:bg-night-500 flex cursor-pointer items-center gap-2 px-5 py-1 has-checked:bg-green-800/20 has-checked:hover:bg-green-800/30">
               <input
                 transition:persist
                 type="checkbox"

web/src/components/InputSubmitButton.astro

@@ -3,24 +3,28 @@ import { cn } from '../lib/cn'
 
 import Button from './Button.astro'
 
-import type { HTMLAttributes } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 
 type Props = HTMLAttributes<'div'> & {
   hideCancel?: boolean
   icon?: string
   label?: string
+  disabled?: boolean
+  color?: ComponentProps<typeof Button>['color']
 }
 
 const {
   hideCancel = false,
   icon = 'ri:send-plane-2-line',
   label = 'Submit',
+  disabled = false,
   class: className,
+  color = 'success',
   ...htmlProps
 } = Astro.props
 ---
 
 <div class={cn('flex justify-between gap-2', className)} {...htmlProps}>
   {!hideCancel && <Button as="a" href="/" label="Cancel" icon="ri:close-line" color="gray" />}
-  <Button type="submit" label={label} icon={icon} class="ml-auto" color="success" />
+  <Button type="submit" label={label} icon={icon} class="ml-auto" color={color} disabled={disabled} />
 </div>

web/src/components/InputWrapper.astro

@@ -48,7 +48,9 @@ const hasError = !!error && error.length > 0
       <div class={cn('contents', !!descriptionLabel && 'flex flex-wrap items-center gap-x-4')}>
         <legend class={cn('font-title block text-sm font-medium', hasError && 'text-red-500')}>
           {icon && <Icon name={icon} class="inline-block size-4 align-[-0.2em]" />}
-          <label for={inputId}>{label}</label>
+          <label for={inputId} transition:persist>
+            {label}
+          </label>
           {required && '*'}
         </legend>
         {!!descriptionLabel && (

web/src/components/NotificationEventsScript.astro

@@ -0,0 +1,29 @@
+---
+
+---
+
+<script>
+  import { isBrowserNotificationsEnabled, showBrowserNotification } from '../lib/client/browserNotifications'
+  import { makeNotificationOptions } from '../lib/notificationOptions'
+
+  document.addEventListener('sse-new-notification', (event) => {
+    if (isBrowserNotificationsEnabled()) {
+      const payload = event.detail
+      const notification = showBrowserNotification(
+        payload.title,
+        makeNotificationOptions(payload, { removeActions: true })
+      )
+
+      // Handle notification click
+      if (notification) {
+        notification.onclick = () => {
+          const defaultAction = payload.actions.find((a) => a.url) ?? payload.actions[0]
+          if (defaultAction?.url) {
+            window.open(defaultAction.url, '_blank')
+          }
+          notification.close()
+        }
+      }
+    }
+  })
+</script>

web/src/components/PushNotificationBanner.astro

@@ -0,0 +1,267 @@
+---
+import { Icon } from 'astro-icon/components'
+import { VAPID_PUBLIC_KEY } from 'astro:env/server'
+
+import { SUPPORT_EMAIL } from '../constants/project'
+import { cn } from '../lib/cn'
+
+import Button from './Button.astro'
+
+import type { Prisma } from '@prisma/client'
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'div'> & {
+  dismissable?: boolean
+  hideIfEnabled?: boolean
+  pushSubscriptions: Prisma.PushSubscriptionGetPayload<{
+    select: {
+      endpoint: true
+      userAgent: true
+    }
+  }>[]
+}
+
+const { class: className, dismissable = false, pushSubscriptions, hideIfEnabled, ...props } = Astro.props
+---
+
+<div
+  data-push-notification-banner
+  data-dismissed={undefined as true | undefined /* Updated by client script */}
+  data-notification-supported={undefined as true | undefined /* Updated by client script */}
+  data-push-subscriptions={JSON.stringify(pushSubscriptions)}
+  data-is-enabled={undefined as true | undefined /* Updated by client script */}
+  data-loaded={undefined as true | undefined /* Updated by client script */}
+  data-notification-permissions={undefined as
+    | NotificationPermission
+    | undefined /* Updated by client script */}
+  data-vapid-public-key={VAPID_PUBLIC_KEY}
+  class={cn(
+    'no-js:hidden xs:grid-cols-[auto_auto] xs:justify-between relative isolate grid items-center justify-stretch gap-4 overflow-hidden rounded-xl bg-gradient-to-r from-blue-950/80 to-blue-900/60 p-4 not-data-loaded:hidden',
+    'data-dismissed:hidden',
+    hideIfEnabled && 'data-is-enabled:hidden',
+    'not-data-notification-supported:hidden',
+    'data-is-enabled:**:data-show-if-disabled:hidden not-data-is-enabled:**:data-show-if-enabled:hidden',
+    className
+  )}
+  {...props}
+>
+  <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
+    <div
+      class="absolute top-0 -left-16 h-full w-1/3 bg-gradient-to-r from-blue-500/20 to-transparent opacity-50 blur-xl"
+    >
+    </div>
+    <div
+      class="absolute top-0 -right-16 h-full w-1/3 bg-gradient-to-l from-blue-500/20 to-transparent opacity-50 blur-xl"
+    >
+    </div>
+  </div>
+
+  <div class="flex items-center gap-x-3">
+    <div class="rounded-md bg-blue-800/30 p-2">
+      <Icon name="ri:notification-4-line" class="size-5 text-blue-300" />
+    </div>
+    <div>
+      <h3 class="font-medium text-blue-100" data-banner-title>Turn on push notifications?</h3>
+      <p class="text-sm text-blue-200/80" data-banner-description>Get notifications on this device.</p>
+    </div>
+  </div>
+
+  <div class="xs:justify-end flex shrink flex-wrap items-center justify-center gap-2">
+    {dismissable && <Button as="span" label="Skip" variant="faded" data-dismiss-button />}
+    <Button
+      as="span"
+      label="Yes, notify me"
+      color="white"
+      data-push-action="subscribe"
+      data-show-if-disabled
+    />
+    <Button
+      as="span"
+      label="Stop notifications"
+      color="white"
+      variant="faded"
+      data-push-action="unsubscribe"
+      data-show-if-enabled
+    />
+  </div>
+
+  <div
+    class="col-span-full flex items-center justify-center gap-2 leading-tight text-red-500 has-[[data-error-message]:empty]:hidden"
+  >
+    <Icon name="ri:error-warning-line" class="size-5 shrink-0" />
+    <span>
+      <span data-error-message></span>
+      <a href={`mailto:${SUPPORT_EMAIL}`} class="text-red-300 underline hover:text-red-200">
+        Contact support
+      </a>
+    </span>
+  </div>
+</div>
+
+<script>
+  /////////////////////////////////////////////////////////////
+  // Script to handle push notification banner dismissal.    //
+  /////////////////////////////////////////////////////////////
+
+  import { typedLocalStorage } from '../lib/localstorage'
+
+  document.addEventListener('astro:page-load', () => {
+    let pushNotificationsBannerDismissedAt = typedLocalStorage.pushNotificationsBannerDismissedAt.get()
+
+    if (
+      pushNotificationsBannerDismissedAt &&
+      pushNotificationsBannerDismissedAt < new Date(Date.now() - 1000 * 60 * 60 * 24 * 365) // 1 year
+    ) {
+      typedLocalStorage.pushNotificationsBannerDismissedAt.remove()
+      pushNotificationsBannerDismissedAt = undefined
+    }
+
+    document.querySelectorAll<HTMLElement>('[data-push-notification-banner]').forEach((banner) => {
+      const skipButton = banner.querySelector<HTMLElement>('[data-dismiss-button]')
+      if (!skipButton) return
+
+      if (pushNotificationsBannerDismissedAt) {
+        banner.dataset.dismissed = ''
+      }
+
+      skipButton.addEventListener('click', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+
+        banner.dataset.dismissed = ''
+
+        const now = new Date()
+        typedLocalStorage.pushNotificationsBannerDismissedAt.set(now)
+        pushNotificationsBannerDismissedAt = now
+      })
+    })
+  })
+</script>
+
+<script>
+  ///////////////////////////////////////////
+  // Script to handle push notifications.  //
+  ///////////////////////////////////////////
+
+  import {
+    subscribeToPushNotifications,
+    unsubscribeFromPushNotifications,
+    parsePushSubscriptions,
+    isCurrentDeviceSubscribed,
+    supportsPushNotifications,
+    type SafeResult,
+  } from '../lib/client/clientPushNotifications'
+
+  import {
+    enableBrowserNotifications,
+    disableBrowserNotifications,
+    isBrowserNotificationsEnabled,
+    supportsBrowserNotifications,
+  } from '../lib/client/browserNotifications'
+
+  async function setDataAttributes(banner: HTMLElement) {
+    if (!supportsPushNotifications() && !supportsBrowserNotifications()) {
+      return
+    }
+
+    banner.dataset.notificationSupported = ''
+    banner.dataset.notificationPermissions = Notification.permission
+
+    const serverSubscriptions = parsePushSubscriptions(banner.dataset.pushSubscriptions)
+    const titleElement = banner.querySelector<HTMLElement>('[data-banner-title]')
+    const descriptionElement = banner.querySelector<HTMLElement>('[data-banner-description]')
+
+    if (await isCurrentDeviceSubscribed(serverSubscriptions)) {
+      if (titleElement) titleElement.textContent = 'Push notifications enabled'
+      if (descriptionElement) descriptionElement.textContent = 'Turn push notifications off for this device?'
+      banner.dataset.isEnabled = ''
+      banner.dataset.loaded = ''
+      return
+    }
+
+    if (isBrowserNotificationsEnabled()) {
+      if (titleElement) titleElement.textContent = 'Browser notifications enabled'
+      if (descriptionElement)
+        descriptionElement.textContent = 'Turn off notifications? (They only work while the tab is open.)'
+      banner.dataset.isEnabled = ''
+      banner.dataset.loaded = ''
+      return
+    }
+
+    // Default state (disabled)
+    if (titleElement) titleElement.textContent = 'Turn on push notifications?'
+    if (descriptionElement) descriptionElement.textContent = 'Get notifications on this device.'
+    banner.dataset.loaded = ''
+  }
+
+  document.addEventListener('astro:page-load', async () => {
+    document.querySelectorAll<HTMLElement>('[data-push-notification-banner]').forEach(async (banner) => {
+      await setDataAttributes(banner)
+
+      const vapidPublicKey = banner.dataset.vapidPublicKey
+
+      banner.querySelectorAll<HTMLElement>('[data-push-action]').forEach((button) => {
+        button.addEventListener('click', async (event) => {
+          event.preventDefault()
+          event.stopPropagation()
+
+          const action = button.dataset.pushAction
+          if (action !== 'subscribe' && action !== 'unsubscribe') {
+            console.error('Invalid push action:', action)
+            return
+          }
+
+          let result: SafeResult
+
+          if (action === 'subscribe') {
+            const pushResult = vapidPublicKey
+              ? await subscribeToPushNotifications(vapidPublicKey)
+              : { success: false as const, error: 'VAPID public key not found' }
+
+            if (pushResult.success) {
+              result = pushResult
+            } else {
+              console.error(
+                "Can't enable push notifications, trying browser notifications.",
+                pushResult.error
+              )
+              const browserResult = await enableBrowserNotifications()
+
+              if (browserResult.success) {
+                result = browserResult
+              } else {
+                console.error("Can't enable browser notifications:", browserResult.error)
+                result = {
+                  success: false,
+                  error: `Can't enable either push or browser notifications. Push: ${pushResult.error}. Browser: ${browserResult.error}`,
+                }
+              }
+            }
+          } else {
+            const pushResult = await unsubscribeFromPushNotifications()
+            const browserResult = disableBrowserNotifications()
+
+            const success = pushResult.success || browserResult.success
+
+            result = success
+              ? { success: true }
+              : { success: false, error: `${pushResult.error} | ${browserResult.error}` }
+          }
+
+          if (!result.success) {
+            console.error(result.error)
+
+            const errorMessageElement = banner.querySelector<HTMLElement>('[data-error-message]')
+            if (errorMessageElement) {
+              errorMessageElement.textContent = `Failed to ${action === 'subscribe' ? 'enable' : 'disable'} notifications.`
+            }
+
+            return
+          }
+
+          window.location.reload()
+        })
+      })
+    })
+  })
+</script>

web/src/components/ServerEventsScript.astro

@@ -0,0 +1,108 @@
+---
+if (!Astro.locals.user) return
+---
+
+<script>
+  import type { ServerEventsEvent, SSEEventMap } from '../lib/serverEventsTypes'
+
+  const MAX_RECONNECT_ATTEMPTS = 5
+  const RECONNECT_DELAY = 2_000
+
+  let eventSource: EventSource | null = null
+  let reconnectTimeout: number | null = null
+  let reconnectAttempts = 0
+
+  startServerEventsListener()
+
+  // ------------------------------------------------------------
+
+  export function startServerEventsListener() {
+    stopServerEventsListener()
+
+    try {
+      eventSource = new EventSource('/internal-api/server-events')
+
+      eventSource.onopen = () => {
+        reconnectAttempts = 0
+      }
+
+      eventSource.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data as string)
+
+          if (isServerEventsEvent(data)) {
+            const eventType = `sse-${data.type}` as const
+            document.dispatchEvent(
+              new CustomEvent(eventType, { detail: data.data }) as SSEEventMap[typeof eventType]
+            )
+          } else {
+            console.error('Invalid server events event:', data)
+          }
+        } catch (error) {
+          console.error('Error parsing server events data:', error)
+        }
+      }
+
+      eventSource.onerror = (error) => {
+        console.error('Server events error:', error)
+
+        if (eventSource?.readyState === EventSource.CLOSED) {
+          scheduleReconnect()
+        }
+      }
+    } catch (error) {
+      console.error('Failed to start server events listener:', error)
+      scheduleReconnect()
+    }
+  }
+
+  export function stopServerEventsListener() {
+    if (reconnectTimeout) {
+      clearTimeout(reconnectTimeout)
+      reconnectTimeout = null
+    }
+
+    if (eventSource) {
+      eventSource.close()
+      eventSource = null
+      console.info('Disconnected from server events listener')
+    }
+
+    reconnectAttempts = 0
+  }
+
+  function scheduleReconnect() {
+    if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+      console.error('Max reconnection attempts reached, giving up')
+      return
+    }
+
+    if (reconnectTimeout) {
+      clearTimeout(reconnectTimeout)
+    }
+
+    const delay = RECONNECT_DELAY * Math.pow(2, reconnectAttempts)
+    reconnectAttempts++
+
+    const delayStr = String(delay)
+    const attemptsStr = String(reconnectAttempts)
+    const maxAttemptsStr = String(MAX_RECONNECT_ATTEMPTS)
+    console.info(`Attempting to reconnect in ${delayStr}ms (attempt ${attemptsStr}/${maxAttemptsStr})`)
+
+    reconnectTimeout = window.setTimeout(() => {
+      startServerEventsListener()
+    }, delay)
+  }
+
+  function isServerEventsEvent(event: unknown): event is ServerEventsEvent {
+    if (typeof event !== 'object' || event === null) return false
+    const e = event as Record<string, unknown>
+    return (
+      'type' in e &&
+      typeof e.type === 'string' &&
+      'data' in e &&
+      typeof e.data === 'object' &&
+      e.data !== null
+    )
+  }
+</script>

web/src/components/ServiceLinkButton.astro

@@ -87,6 +87,25 @@ function makeLink(url: string, referral: string | null) {
     }
   }
 
+  const bitcointalkMatch = /^(?:https?:\/\/)?(?:www\.)?bitcointalk\.org$/.exec(hostname)
+  if (bitcointalkMatch) {
+    return {
+      type: 'clearnet' as const,
+      url: urlWithReferral,
+      textBits: [
+        {
+          style: 'normal',
+          text: 'BitcoinTalk ',
+        },
+        {
+          style: 'irrelevant',
+          text: 'thread',
+        },
+      ],
+      icon: networksBySlug.clearnet.icon,
+    }
+  }
+
   return {
     type: 'clearnet' as const,
     url: urlWithReferral,

web/src/components/ServicesFilters.astro

@@ -49,6 +49,7 @@ const {
   class={cn(
     // Check the scam filter when there is a text quey and the user has checked verified and approved
     'has-[input[name=q]:not(:placeholder-shown)]:has-[&_input[name=verification][value=verified]:checked]:has-[&_input[name=verification][value=approved]:checked]:[&_input[name=verification][value=scam]]:checkbox-force-checked',
+    'has-[input[name=q]:placeholder-shown]:[&_[data-hide-if-q-is-empty]]:hidden has-[input[name=q]:not(:placeholder-shown)]:[&_[data-hide-if-q-is-filled]]:hidden',
     className
   )}
 >
@@ -80,16 +81,20 @@ const {
         ))
       }
     </select>
-    <p class="text-day-500 mt-1.5 text-center text-sm">
+    <p class="text-day-500 mt-1.5 text-center text-sm" data-hide-if-q-is-filled>
       <Icon name="ri:shuffle-line" class="inline-block size-3.5 align-[-0.125em]" />
       Ties randomly sorted
     </p>
+    <p class="text-day-500 mt-1.5 text-center text-sm" data-hide-if-q-is-empty>
+      <Icon name="ri:seo-line" class="inline-block size-3.5 align-[-0.125em]" />
+      Sorted by match first
+    </p>
   </fieldset>
 
   <!-- Text Search -->
   <fieldset class="mb-6">
     <legend class="font-title mb-3 leading-none text-green-500">
-      <label for="q">Text</label>
+      <label for="q">Name</label>
     </legend>
     <input
       type="text"

web/src/components/ServicesSearchResults.astro

@@ -21,7 +21,6 @@ type Props = HTMLAttributes<'div'> & {
   pageSize: number
   sortSeed?: string
   filters: ServicesFiltersObject
-  includeScams: boolean
   countCommunityOnly: number | null
   inlineIcons?: boolean
 }
@@ -35,15 +34,12 @@ const {
   sortSeed,
   class: className,
   filters,
-  includeScams,
   countCommunityOnly,
   inlineIcons,
   ...divProps
 } = Astro.props
 
-const hasScams =
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  filters.verification.includes('VERIFICATION_FAILED') || includeScams
+const hasScams = filters.verification.includes('VERIFICATION_FAILED')
 const hasSomeScam = !!services?.some((service) => service.verificationStatus.includes('VERIFICATION_FAILED'))
 
 const hasCommunityContributed = filters.verification.includes('COMMUNITY_CONTRIBUTED')
@@ -75,7 +71,7 @@ const urlIfIncludingCommunity = urlWithParams(Astro.url, {
       />
 
       {
-        countCommunityOnly && (
+        !!countCommunityOnly && (
           <>
             <Button
               as="a"
@@ -196,7 +192,7 @@ const urlIfIncludingCommunity = urlWithParams(Astro.url, {
               inlineIcon={inlineIcons}
             />
           )}
-          {countCommunityOnly && (
+          {!!countCommunityOnly && (
             <Button
               as="a"
               href={urlIfIncludingCommunity}

web/src/components/VerificationWarningBanner.astro

@@ -56,7 +56,15 @@ const wasRecentlyAdded = isPast(listedDate) && differenceInDays(new Date(), list
   ) : service.verificationStatus === 'COMMUNITY_CONTRIBUTED' ? (
     <div class="mb-3 flex items-center gap-2 rounded-md bg-yellow-600/30 p-2 text-sm text-yellow-200">
       <Icon name="ri:alert-line" class="size-5 text-yellow-400" />
-      <span>Community-contributed. Information not reviewed.</span>
+      <span>
+        Community-contributed. Information not reviewed.
+        <a
+          href="/about#suggestion-review-process"
+          class="text-yellow-100 underline opacity-50 transition-opacity hover:opacity-100 focus-visible:opacity-100"
+        >
+          Learn more
+        </a>
+      </span>
     </div>
   ) : wasRecentlyAdded ? (
     <div class="mb-3 rounded-md bg-red-900/50 p-2 text-sm text-red-400">
@@ -64,11 +72,25 @@ const wasRecentlyAdded = isPast(listedDate) && differenceInDays(new Date(), list
       <TimeFormatted date={listedDate} daysUntilDate={RECENTLY_ADDED_DAYS} />
       {service.verificationStatus !== 'VERIFICATION_SUCCESS' && ' and it is not verified'}. Proceed with
       caution.
+      <a
+        href="/about#suggestion-review-process"
+        class="text-yellow-100 underline opacity-50 transition-opacity hover:opacity-100 focus-visible:opacity-100"
+      >
+        Learn more
+      </a>
     </div>
   ) : service.verificationStatus !== 'VERIFICATION_SUCCESS' ? (
     <div class="mb-3 flex items-center gap-2 rounded-md bg-blue-600/30 p-2 text-sm text-blue-200">
       <Icon name="ri:information-line" class="size-5 text-blue-400" />
-      <span>Basic checks passed, but not fully verified.</span>
+      <span>
+        Basic checks passed, but not fully verified.
+        <a
+          href="/about#suggestion-review-process"
+          class="text-yellow-100 underline opacity-50 transition-opacity hover:opacity-100 focus-visible:opacity-100"
+        >
+          Learn more
+        </a>
+      </span>
     </div>
   ) : null
 }

web/src/constants/commentStatus.ts

@@ -1,15 +1,14 @@
 import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
 import { transformCase } from '../lib/strings'
 
-import type BadgeSmall from '../components/BadgeSmall.astro'
+import type { TailwindColor } from '../lib/colors'
 import type { CommentStatus } from '@prisma/client'
-import type { ComponentProps } from 'astro/types'
 
 type CommentStatusInfo<T extends string | null | undefined = string> = {
   id: T
   icon: string
   label: string
-  color: ComponentProps<typeof BadgeSmall>['color']
+  color: TailwindColor
   creativeWorkStatus: string | undefined
 }
 

web/src/constants/commentStatusFilters.ts

@@ -3,14 +3,13 @@ import { transformCase } from '../lib/strings'
 
 import { commentStatusById } from './commentStatus'
 
-import type BadgeSmall from '../components/BadgeSmall.astro'
+import type { TailwindColor } from '../lib/colors'
 import type { Prisma } from '@prisma/client'
-import type { ComponentProps } from 'astro/types'
 
 type CommentStatusFilterInfo<T extends string | null | undefined = string> = {
   value: T
   label: string
-  color: ComponentProps<typeof BadgeSmall>['color']
+  color: TailwindColor
   icon: string
   whereClause: Prisma.CommentWhereInput
   classNames: {

web/src/constants/contactMethods.ts

@@ -3,6 +3,9 @@ import { parsePhoneNumberWithError } from 'libphonenumber-js'
 import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
 import { transformCase } from '../lib/strings'
 
+import type { Assert } from '../lib/assert'
+import type { Equals } from 'ts-toolbelt/out/Any/Equals'
+
 type ContactMethodInfo<T extends string | null | undefined = string> = {
   type: T
   label: string
@@ -10,6 +13,7 @@ type ContactMethodInfo<T extends string | null | undefined = string> = {
   matcher: RegExp
   formatter: (match: RegExpMatchArray) => string | null
   icon: string
+  urlType: string
 }
 
 export const {
@@ -22,9 +26,10 @@ export const {
   (type): ContactMethodInfo<typeof type> => ({
     type,
     label: type ? transformCase(type, 'title') : String(type),
-    icon: 'ri:shield-fill',
+    icon: 'ri:link',
     matcher: /(.*)/,
     formatter: ([, value]) => value ?? String(value),
+    urlType: type ?? 'unknown',
   }),
   [
     {
@@ -33,24 +38,37 @@ export const {
       matcher: /mailto:(.+)/,
       formatter: ([, value]) => value ?? 'Email',
       icon: 'ri:mail-line',
+      urlType: 'email',
     },
     {
       type: 'telephone',
       label: 'Telephone',
       matcher: /tel:(.+)/,
       formatter: ([, value]) => {
-        return value ? parsePhoneNumberWithError(value).formatInternational() : 'Telephone'
+        try {
+          return value ? parsePhoneNumberWithError(value).formatInternational() : 'Telephone'
+        } catch (_error) {
+          console.error(`Invalid telephone number: ${value ?? 'undefined'}`, _error)
+          return value ?? 'Telephone'
+        }
       },
       icon: 'ri:phone-line',
+      urlType: 'telephone',
     },
     {
       type: 'whatsapp',
       label: 'WhatsApp',
       matcher: /^https?:\/\/(?:www\.)?wa\.me\/(.+)/,
       formatter: ([, value]) => {
-        return value ? parsePhoneNumberWithError(value).formatInternational() : 'WhatsApp'
+        try {
+          return value ? parsePhoneNumberWithError(value).formatInternational() : 'WhatsApp'
+        } catch (_error) {
+          console.error(`Invalid WhatsApp number: ${value ?? 'undefined'}`, _error)
+          return value ?? 'WhatsApp'
+        }
       },
       icon: 'ri:whatsapp-line',
+      urlType: 'url',
     },
     {
       type: 'telegram',
@@ -58,6 +76,7 @@ export const {
       matcher: /^https?:\/\/(?:www\.)?t\.me\/(.+)/,
       formatter: ([, value]) => (value ? `t.me/${value}` : 'Telegram'),
       icon: 'ri:telegram-line',
+      urlType: 'url',
     },
     {
       type: 'linkedin',
@@ -65,6 +84,7 @@ export const {
       matcher: /^https?:\/\/(?:www\.)?linkedin\.com\/(?:in|company)\/(.+)/,
       formatter: ([, value]) => (value ? `in/${value}` : 'LinkedIn'),
       icon: 'ri:linkedin-box-line',
+      urlType: 'url',
     },
     {
       type: 'x',
@@ -72,6 +92,7 @@ export const {
       matcher: /^https?:\/\/(?:www\.)?x\.com\/(.+)/,
       formatter: ([, value]) => (value ? `@${value}` : 'X'),
       icon: 'ri:twitter-x-line',
+      urlType: 'url',
     },
     {
       type: 'instagram',
@@ -79,6 +100,7 @@ export const {
       matcher: /^https?:\/\/(?:www\.)?instagram\.com\/(.+)/,
       formatter: ([, value]) => (value ? `@${value}` : 'Instagram'),
       icon: 'ri:instagram-line',
+      urlType: 'url',
     },
     {
       type: 'matrix',
@@ -86,6 +108,7 @@ export const {
       matcher: /^https?:\/\/(?:www\.)?matrix\.to\/#\/(.+)/,
       formatter: ([, value]) => (value ? `#${value}` : 'Matrix'),
       icon: 'ri:hashtag',
+      urlType: 'url',
     },
     {
       type: 'bitcointalk',
@@ -93,6 +116,7 @@ export const {
       matcher: /^https?:\/\/(?:www\.)?bitcointalk\.org/,
       formatter: () => 'BitcoinTalk',
       icon: 'ri:btc-line',
+      urlType: 'url',
     },
     {
       type: 'simplex',
@@ -100,6 +124,7 @@ export const {
       matcher: /^https?:\/\/(?:www\.)?(simplex\.chat)\//,
       formatter: () => 'SimpleX Chat',
       icon: 'simplex',
+      urlType: 'url',
     },
     {
       type: 'nostr',
@@ -107,6 +132,7 @@ export const {
       matcher: /\b(npub1[a-zA-Z0-9]{58})\b/,
       formatter: () => 'Nostr',
       icon: 'nostr',
+      urlType: 'url',
     },
     {
       // Website must go last because it's a catch-all
@@ -115,6 +141,7 @@ export const {
       matcher: /^https?:\/\/(?:www\.)?((?:[a-zA-Z0-9-]+\.)+[a-zA-Z]+)/,
       formatter: ([, value]) => value ?? 'Website',
       icon: 'ri:global-line',
+      urlType: 'url',
     },
   ] as const satisfies ContactMethodInfo[]
 )
@@ -135,3 +162,38 @@ export function formatContactMethod(url: string) {
 
   return { ...getContactMethodInfo('unknown'), formattedValue: url } as const
 }
+
+type ContactMethodUrlTypeInfo<T extends string | null | undefined = string> = {
+  value: T
+  labelPlural: string
+}
+
+export const {
+  dataArray: contactMethodUrlTypes,
+  dataObject: contactMethodUrlTypesById,
+  getFn: getContactMethodUrlTypeInfo,
+} = makeHelpersForOptions(
+  'value',
+  (value): ContactMethodUrlTypeInfo<typeof value> => ({
+    value,
+    labelPlural: value ? transformCase(value, 'title') : String(value),
+  }),
+  [
+    {
+      value: 'email',
+      labelPlural: 'emails',
+    },
+    {
+      value: 'telephone',
+      labelPlural: 'phone numbers',
+    },
+    {
+      value: 'url',
+      labelPlural: 'URLs',
+    },
+  ] as const satisfies ContactMethodUrlTypeInfo<(typeof contactMethods)[number]['urlType']>[]
+)
+
+type _ExpectUrlTypesToHaveAllValues = Assert<
+  Equals<(typeof contactMethods)[number]['urlType'], keyof typeof contactMethodUrlTypesById>
+>

web/src/constants/eventTypes.ts

@@ -1,9 +1,8 @@
 import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
 import { transformCase } from '../lib/strings'
 
-import type BadgeSmall from '../components/BadgeSmall.astro'
+import type { TailwindColor } from '../lib/colors'
 import type { EventType } from '@prisma/client'
-import type { ComponentProps } from 'astro/types'
 
 type EventTypeInfo<T extends string | null | undefined = string> = {
   id: T
@@ -14,7 +13,9 @@ type EventTypeInfo<T extends string | null | undefined = string> = {
     dot: string
   }
   icon: string
-  color: ComponentProps<typeof BadgeSmall>['color']
+  color: TailwindColor
+  isSolved: boolean
+  showBanner: boolean
 }
 
 export const {
@@ -36,6 +37,8 @@ export const {
     },
     icon: 'ri:question-fill',
     color: 'gray',
+    isSolved: false,
+    showBanner: false,
   }),
   [
     {
@@ -46,8 +49,10 @@ export const {
       classNames: {
         dot: 'bg-amber-900 text-amber-300 ring-amber-900/50',
       },
-      icon: 'ri:error-warning-fill',
+      icon: 'ri:alert-fill',
       color: 'yellow',
+      isSolved: false,
+      showBanner: true,
     },
     {
       id: 'WARNING_SOLVED',
@@ -55,10 +60,12 @@ export const {
       label: 'Warning Solved',
       description: 'A previously reported warning has been solved',
       classNames: {
-        dot: 'bg-green-900 text-green-300 ring-green-900/50',
+        dot: 'bg-amber-900 text-amber-300 ring-amber-900/50',
       },
-      icon: 'ri:check-fill',
+      icon: 'ri:alert-fill',
       color: 'green',
+      isSolved: true,
+      showBanner: false,
     },
     {
       id: 'ALERT',
@@ -68,8 +75,10 @@ export const {
       classNames: {
         dot: 'bg-red-900 text-red-300 ring-red-900/50',
       },
-      icon: 'ri:alert-fill',
+      icon: 'ri:spam-fill',
       color: 'red',
+      isSolved: false,
+      showBanner: true,
     },
     {
       id: 'ALERT_SOLVED',
@@ -77,10 +86,12 @@ export const {
       label: 'Alert Solved',
       description: 'A previously reported alert has been solved',
       classNames: {
-        dot: 'bg-green-900 text-green-300 ring-green-900/50',
+        dot: 'bg-red-900 text-red-300 ring-red-900/50',
       },
-      icon: 'ri:check-fill',
+      icon: 'ri:spam-fill',
       color: 'green',
+      isSolved: true,
+      showBanner: false,
     },
     {
       id: 'INFO',
@@ -92,6 +103,8 @@ export const {
       },
       icon: 'ri:information-fill',
       color: 'sky',
+      isSolved: false,
+      showBanner: false,
     },
     {
       id: 'NORMAL',
@@ -103,6 +116,8 @@ export const {
       },
       icon: 'ri:notification-fill',
       color: 'green',
+      isSolved: false,
+      showBanner: false,
     },
     {
       id: 'UPDATE',
@@ -114,6 +129,8 @@ export const {
       },
       icon: 'ri:pencil-fill',
       color: 'sky',
+      isSolved: false,
+      showBanner: false,
     },
   ] as const satisfies EventTypeInfo<EventType>[]
 )

web/src/constants/kycLevelClarifications.ts

@@ -0,0 +1,39 @@
+import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
+import { transformCase } from '../lib/strings'
+
+import type { KycLevelClarification } from '@prisma/client'
+
+type KycLevelClarificationInfo<T extends string | null | undefined = string> = {
+  value: T
+  label: string
+  description: string
+  icon: string
+}
+
+export const {
+  dataArray: kycLevelClarifications,
+  dataObject: kycLevelClarificationsById,
+  getFn: getKycLevelClarificationInfo,
+} = makeHelpersForOptions(
+  'value',
+  (value): KycLevelClarificationInfo<typeof value> => ({
+    value,
+    label: value ? transformCase(value.replace('_', ' '), 'title') : String(value),
+    description: '',
+    icon: 'ri:question-line',
+  }),
+  [
+    {
+      value: 'NONE',
+      label: 'None',
+      description: 'No clarification needed.',
+      icon: 'ri:file-copy-line',
+    },
+    {
+      value: 'DEPENDS_ON_PARTNERS',
+      label: 'Depends on partners',
+      description: 'May vary across partners.',
+      icon: 'ri:share-forward-line',
+    },
+  ] as const satisfies KycLevelClarificationInfo<KycLevelClarification>[]
+)

web/src/constants/notificationTypes.ts

@@ -20,6 +20,11 @@ export const {
     icon: 'ri:notification-line',
   }),
   [
+    {
+      id: 'TEST',
+      label: 'Test notification',
+      icon: 'ri:flask-line',
+    },
     {
       id: 'COMMENT_STATUS_CHANGE',
       label: 'Comment status changed',

web/src/constants/project.ts

@@ -1 +1 @@
-export const SUPPORT_EMAIL = 'support@kycnot.me'
+export const SUPPORT_EMAIL = 'contact@kycnot.me'

web/src/constants/serviceSuggestionStatus.ts

@@ -8,7 +8,7 @@ type ServiceSuggestionStatusInfo<T extends string | null | undefined = string> =
   slug: string
   label: string
   icon: string
-  iconClass: string
+  color: string
   default: boolean
 }
 
@@ -28,7 +28,7 @@ export const {
     slug: value ? value.toLowerCase() : '',
     label: value ? transformCase(value, 'title') : String(value),
     icon: 'ri:question-line',
-    iconClass: 'text-current/60',
+    color: 'gray',
     default: false,
   }),
   [
@@ -37,7 +37,7 @@ export const {
       slug: 'pending',
       label: 'Pending',
       icon: 'ri:time-line',
-      iconClass: 'text-yellow-400',
+      color: 'yellow',
       default: true,
     },
     {
@@ -45,7 +45,7 @@ export const {
       slug: 'approved',
       label: 'Approved',
       icon: 'ri:check-line',
-      iconClass: 'text-green-400',
+      color: 'green',
       default: false,
     },
     {
@@ -53,7 +53,7 @@ export const {
       slug: 'rejected',
       label: 'Rejected',
       icon: 'ri:close-line',
-      iconClass: 'text-red-400',
+      color: 'red',
       default: false,
     },
     {
@@ -61,7 +61,7 @@ export const {
       slug: 'withdrawn',
       label: 'Withdrawn',
       icon: 'ri:arrow-left-line',
-      iconClass: 'text-gray-400',
+      color: 'gray',
       default: false,
     },
   ] as const satisfies ServiceSuggestionStatusInfo<ServiceSuggestionStatus>[]

web/src/constants/serviceSuggestionType.ts

@@ -1,6 +1,7 @@
 import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
 import { transformCase } from '../lib/strings'
 
+import type { TailwindColor } from '../lib/colors'
 import type { ServiceSuggestionType } from '@prisma/client'
 
 type ServiceSuggestionTypeInfo<T extends string | null | undefined = string> = {
@@ -8,7 +9,9 @@ type ServiceSuggestionTypeInfo<T extends string | null | undefined = string> = {
   slug: string
   label: string
   icon: string
+  order: number
   default: boolean
+  color: TailwindColor
 }
 
 export const {
@@ -25,9 +28,11 @@ export const {
   (value): ServiceSuggestionTypeInfo<typeof value> => ({
     value,
     slug: value ? value.toLowerCase() : '',
-    label: value ? transformCase(value, 'title') : String(value),
+    label: value ? transformCase(value.replace('_', ' '), 'title') : String(value),
     icon: 'ri:question-line',
+    order: Infinity,
     default: false,
+    color: 'zinc',
   }),
   [
     {
@@ -35,14 +40,18 @@ export const {
       slug: 'create',
       label: 'Create',
       icon: 'ri:add-line',
+      order: 1,
       default: true,
+      color: 'green',
     },
     {
       value: 'EDIT_SERVICE',
       slug: 'edit',
       label: 'Edit',
       icon: 'ri:pencil-line',
+      order: 2,
       default: false,
+      color: 'blue',
     },
   ] as const satisfies ServiceSuggestionTypeInfo<ServiceSuggestionType>[]
 )

web/src/constants/serviceUserRoles.ts

@@ -1,9 +1,8 @@
 import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
 import { transformCase } from '../lib/strings'
 
-import type BadgeSmall from '../components/BadgeSmall.astro'
+import type { TailwindColor } from '../lib/colors'
 import type { ServiceUserRole } from '@prisma/client'
-import type { ComponentProps } from 'astro/types'
 
 type ServiceUserRoleInfo<T extends string | null | undefined = string> = {
   value: T
@@ -11,7 +10,7 @@ type ServiceUserRoleInfo<T extends string | null | undefined = string> = {
   label: string
   icon: string
   order: number
-  color: NonNullable<ComponentProps<typeof BadgeSmall>['color']>
+  color: NonNullable<TailwindColor>
 }
 
 export const {

web/src/constants/serviceVisibility.ts

@@ -65,7 +65,7 @@ export const {
       value: 'ARCHIVED',
       slug: 'archived',
       label: 'Archived',
-      description: 'No longer operational',
+      description: 'No longer operational.',
       longDescription:
         'Archived service, no longer exists or ceased operations. Information may be outdated.',
       icon: 'ri:archive-line',

web/src/constants/verificationStepStatus.ts

@@ -1,15 +1,14 @@
 import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
 import { transformCase } from '../lib/strings'
 
-import type BadgeSmall from '../components/BadgeSmall.astro'
+import type { TailwindColor } from '../lib/colors'
 import type { VerificationStepStatus } from '@prisma/client'
-import type { ComponentProps } from 'astro/types'
 
 type VerificationStepStatusInfo<T extends string | null | undefined = string> = {
   value: T
   label: string
   icon: string
-  color: ComponentProps<typeof BadgeSmall>['color']
+  color: TailwindColor
 }
 
 export const {

web/src/env.d.ts

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/consistent-type-definitions */
+
 import type { ErrorBanners } from './lib/errorBanners'
 import type { KarmaUnlocks } from './lib/karmaUnlocks'
-/* eslint-disable @typescript-eslint/consistent-type-definitions */
 import type { Prisma } from '@prisma/client'
 import type * as htmx from 'htmx.org'
 

web/src/lib/assert.ts

@@ -0,0 +1,10 @@
+/**
+ * Gives an error if the type is not equal to 1.
+ *
+ * @example
+ * ```ts
+ * type _ExpectEquals = Assert<Equals<'a' | 'b', 'a'>> // Gives an error
+ * type _ExpectEquals = Assert<Equals<'a' | 'b', 'b' | 'a'>> // No error
+ * ```
+ */
+export type Assert<T extends 1> = T

web/src/lib/client/browserNotifications.ts

@@ -0,0 +1,60 @@
+import { typedLocalStorage } from '../localstorage'
+
+type SafeResult = { success: false; error: string } | { success: true; error?: undefined }
+
+export function supportsBrowserNotifications() {
+  return 'Notification' in window
+}
+
+export function isBrowserNotificationsEnabled() {
+  return (
+    supportsBrowserNotifications() &&
+    Notification.permission === 'granted' &&
+    typedLocalStorage.browserNotificationsEnabled.get()
+  )
+}
+
+export async function enableBrowserNotifications(): Promise<SafeResult> {
+  try {
+    if (!supportsBrowserNotifications()) {
+      return { success: false, error: 'Browser notifications are not supported' }
+    }
+
+    const permission = await Notification.requestPermission()
+    if (permission !== 'granted') {
+      return { success: false, error: 'Notification permission denied' }
+    }
+
+    typedLocalStorage.browserNotificationsEnabled.set(true)
+    return { success: true }
+  } catch (error) {
+    console.error('Browser notification setup failed:', error)
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    return { success: false, error: `Browser notification setup failed: ${errorMessage}` }
+  }
+}
+
+export function disableBrowserNotifications(): SafeResult {
+  try {
+    typedLocalStorage.browserNotificationsEnabled.set(false)
+    return { success: true }
+  } catch (error) {
+    console.error('Browser notification disable failed:', error)
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    return { success: false, error: `Browser notification disable failed: ${errorMessage}` }
+  }
+}
+
+export function showBrowserNotification(title: string, options?: NotificationOptions) {
+  if (!isBrowserNotificationsEnabled()) {
+    console.warn('Browser notifications are not enabled')
+    return null
+  }
+
+  try {
+    return new Notification(title, options)
+  } catch (error) {
+    console.error('Failed to show browser notification:', error)
+    return null
+  }
+}

web/src/lib/client/clientPushNotifications.ts

@@ -0,0 +1,187 @@
+/// <reference types="vite/client" />
+
+import type { ActionInput } from '../astroActions'
+import type { actions } from 'astro:actions'
+
+type ServerSubscription = {
+  endpoint: string
+  userAgent: string | null
+}
+
+export type SafeResult =
+  | {
+      success: false
+      error: string
+    }
+  | {
+      success: true
+      error?: undefined
+    }
+
+export async function subscribeToPushNotifications(vapidPublicKey: string): Promise<SafeResult> {
+  try {
+    if (!supportsPushNotifications()) {
+      return { success: false, error: 'Push notifications are not supported in this browser' }
+    }
+
+    const registration = await getServiceWorkerRegistration()
+    if (!registration) return { success: false, error: 'Service worker not available' }
+
+    const permission = await Notification.requestPermission()
+    if (permission !== 'granted') {
+      return { success: false, error: 'Notification permission denied' }
+    }
+
+    const subscription = await registration.pushManager.subscribe({
+      userVisibleOnly: true,
+      applicationServerKey: urlB64ToUint8Array(vapidPublicKey),
+    })
+
+    const p256dh = subscription.getKey('p256dh')
+    const auth = subscription.getKey('auth')
+
+    const response = await fetch('/internal-api/notifications/subscribe', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        endpoint: subscription.endpoint,
+        userAgent: navigator.userAgent,
+        p256dhKey: p256dh ? btoa(String.fromCharCode(...new Uint8Array(p256dh))) : '',
+        authKey: auth ? btoa(String.fromCharCode(...new Uint8Array(auth))) : '',
+      } satisfies ActionInput<typeof actions.notification.webPush.subscribe>),
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      return { success: false, error: `Server error: ${response.statusText} ${errorText}` }
+    }
+
+    return { success: true }
+  } catch (error) {
+    console.error('Push subscription failed:', error)
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    return { success: false, error: `Subscription failed: ${errorMessage}` }
+  }
+}
+
+export async function unsubscribeFromPushNotifications(): Promise<SafeResult> {
+  try {
+    const registration = await getServiceWorkerRegistration()
+    if (!registration) return { success: false, error: 'Service worker not available' }
+
+    const subscription = await registration.pushManager.getSubscription()
+    if (!subscription) return { success: false, error: 'No push subscription found' }
+
+    const unsubscribed = await subscription.unsubscribe()
+    if (!unsubscribed) return { success: false, error: 'Failed to unsubscribe from browser' }
+
+    const response = await fetch('/internal-api/notifications/unsubscribe', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        endpoint: subscription.endpoint,
+      } satisfies ActionInput<typeof actions.notification.webPush.unsubscribe>),
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      return { success: false, error: `Server error: ${response.statusText} ${errorText}` }
+    }
+
+    return { success: true }
+  } catch (error) {
+    console.error('Push unsubscription failed:', error)
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    return { success: false, error: `Unsubscription failed: ${errorMessage}` }
+  }
+}
+
+export function supportsPushNotifications() {
+  const isSecure =
+    window.isSecureContext ||
+    window.location.hostname === 'localhost' ||
+    window.location.hostname === '127.0.0.1'
+
+  return isSecure && 'serviceWorker' in navigator && 'PushManager' in window && 'Notification' in window
+}
+
+async function getServiceWorkerRegistration() {
+  try {
+    if (window.__SW_REGISTRATION__) return window.__SW_REGISTRATION__
+    return (await navigator.serviceWorker.getRegistration()) ?? null
+  } catch (error) {
+    console.error('Error getting service worker registration:', error)
+    return null
+  }
+}
+
+async function getCurrentSubscription() {
+  try {
+    const registration = await getServiceWorkerRegistration()
+    if (!registration) return null
+
+    return await registration.pushManager.getSubscription()
+  } catch (error) {
+    console.error('Error getting current push subscription:', error)
+    return null
+  }
+}
+
+export async function isCurrentDeviceSubscribed(serverSubscriptions: ServerSubscription[]) {
+  const currentSubscription = await getCurrentSubscription()
+  if (!currentSubscription || serverSubscriptions.length === 0) return false
+
+  const currentEndpoint = currentSubscription.endpoint
+  const currentUserAgent = navigator.userAgent
+
+  return serverSubscriptions.some(
+    (sub) =>
+      sub.endpoint === currentEndpoint && (sub.userAgent === currentUserAgent || sub.userAgent === null)
+  )
+}
+
+function urlB64ToUint8Array(base64String: string) {
+  const cleaned = base64String.trim().replace(/\s+/g, '').replace(/-/g, '+').replace(/_/g, '/')
+  const padding = '='.repeat((4 - (cleaned.length % 4)) % 4)
+  const base64 = cleaned + padding
+
+  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
+}
+
+export function parsePushSubscriptions(subscriptionsAsString: string | undefined) {
+  try {
+    if (typeof subscriptionsAsString !== 'string') {
+      console.error('Push subscriptions are not a string')
+      return []
+    }
+
+    const subscriptions = JSON.parse(subscriptionsAsString)
+
+    if (!Array.isArray(subscriptions)) {
+      console.error('Push subscriptions are not an array')
+      return []
+    }
+
+    if (!subscriptions.every(isServerSubscription)) {
+      console.error('Push subscriptions are not valid')
+      return subscriptions.filter(isServerSubscription)
+    }
+
+    return subscriptions
+  } catch (error) {
+    console.error('Failed to parse push subscriptions:', error)
+    return []
+  }
+}
+
+function isServerSubscription(subscription: unknown): subscription is ServerSubscription {
+  if (typeof subscription !== 'object' || subscription === null) return false
+  const s = subscription as Record<string, unknown>
+  return typeof s.endpoint === 'string' && (typeof s.userAgent === 'string' || s.userAgent === null)
+}

web/src/lib/colors.ts

@@ -0,0 +1,25 @@
+export type TailwindColor =
+  | 'amber'
+  | 'black'
+  | 'blue'
+  | 'cyan'
+  | 'emerald'
+  | 'fuchsia'
+  | 'gray'
+  | 'green'
+  | 'indigo'
+  | 'lime'
+  | 'neutral'
+  | 'orange'
+  | 'pink'
+  | 'purple'
+  | 'red'
+  | 'rose'
+  | 'sky'
+  | 'slate'
+  | 'stone'
+  | 'teal'
+  | 'violet'
+  | 'white'
+  | 'yellow'
+  | 'zinc'

web/src/lib/endpoints.ts

@@ -0,0 +1,32 @@
+import { type ActionClient } from 'astro:actions'
+
+import type { APIRoute } from 'astro'
+import type { z } from 'astro/zod'
+
+export function makeEndpointFromAction<Action extends ActionClient<unknown, 'json', z.ZodType> & string>(
+  action: Action
+): APIRoute {
+  return async (context) => {
+    try {
+      const input = await context.request.json()
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      const result = await context.callAction(action, input)
+
+      if (result.error) {
+        console.error('Error on endpoint', result.error)
+        return new Response(JSON.stringify({ error: result.error.message }), {
+          status: result.error.status,
+        })
+      }
+
+      return new Response(JSON.stringify(result.data), {
+        status: 200,
+      })
+    } catch (error) {
+      console.error('Error on endpoint', error)
+      return new Response(JSON.stringify({ error: 'Internal server error' }), {
+        status: 500,
+      })
+    }
+  }
+}

web/src/lib/errorBanners.ts

@@ -114,7 +114,13 @@ export class ErrorBanners {
       return result
     } catch (error) {
       this.handler(uiMessage)(error)
-      return fallback as F
+      return fallback as F extends never[]
+        ? T extends [infer _First, ...infer _Rest]
+          ? []
+          : T extends unknown[]
+            ? T[number][]
+            : F
+        : F
     }
   }
 

web/src/lib/fileStorage.ts

@@ -69,6 +69,53 @@ export async function saveFileLocally(
   return url
 }
 
+/**
+ * List all files in a specific subdirectory of the upload directory.
+ * Returns an array of web-accessible URLs.
+ */
+export async function listFiles(subDir: string): Promise<string[]> {
+  const { fsPath: uploadDir, webPath: webUploadPath } = getUploadDir(subDir)
+  try {
+    const files = await fs.readdir(uploadDir)
+    return files.map((file) => sanitizePath(`${webUploadPath}/${file}`))
+  } catch (error: unknown) {
+    const err = error as NodeJS.ErrnoException
+    if (err.code === 'ENOENT') {
+      return []
+    }
+    console.error(`Error listing files in ${uploadDir}:`, error)
+    throw error
+  }
+}
+
+/**
+ * Delete a file locally given its web-accessible URL path
+ */
+export async function deleteFileLocally(fileUrl: string): Promise<void> {
+  // Extract the subpath and filename from the webPath
+  // Example: /files/evidence/service-slug/image.jpg -> evidence/service-slug/image.jpg
+  const basePath = '/files'
+  if (!fileUrl.startsWith(basePath)) {
+    throw new Error('Invalid file URL for deletion. Must start with /files')
+  }
+
+  const subPathAndFile = fileUrl.substring(basePath.length).replace(/^\/+/, '') // Remove leading /files/ and any extra leading slashes
+  const { fsPath: uploadDirWithoutSubDir } = getUploadDir() // Get base upload directory
+  const filePath = path.join(uploadDirWithoutSubDir, subPathAndFile)
+
+  try {
+    await fs.unlink(filePath)
+  } catch (error: unknown) {
+    const err = error as NodeJS.ErrnoException
+    if (err.code === 'ENOENT') {
+      console.warn(`File not found for deletion, but treating as success: ${filePath}`)
+      return
+    }
+    console.error(`Error deleting file ${filePath}:`, error)
+    throw error
+  }
+}
+
 function sanitizePath(inputPath: string): string {
   let sanitized = inputPath.replace(/\\+/g, '/')
   // Collapse multiple slashes, but preserve protocol (e.g., http://)

web/src/lib/findServicesBySimilarity.ts

@@ -0,0 +1,16 @@
+import { z } from 'astro/zod'
+
+import { prisma } from './prisma'
+
+export async function findServicesBySimilarity(value: string, similarityThreshold = 0.01) {
+  const data = await prisma.$queryRaw`
+      SELECT id, similarity(name, ${value}) AS similarity_score
+      FROM "Service"
+      WHERE similarity(name, ${value}) >= ${similarityThreshold}
+      ORDER BY similarity(name, ${value}) desc`
+
+  const schema = z.array(z.object({ id: z.number(), similarity_score: z.number() }))
+  const parsedData = schema.parse(data)
+
+  return parsedData.map(({ id, similarity_score }) => ({ id, similarityScore: similarity_score }))
+}

web/src/lib/json.ts

@@ -0,0 +1,35 @@
+import type { z } from 'astro/zod'
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+interface JSONObject {
+  [k: string]: JSONValue
+}
+type JSONList = JSONValue[]
+type JSONPrimitive = boolean | number | string | null
+type JSONValue = Date | JSONList | JSONObject | JSONPrimitive
+
+export type ZodJSON = z.ZodType<JSONValue>
+
+export function zodParseJSON<T extends z.ZodType<JSONValue>, D extends z.output<T> | undefined = undefined>(
+  schema: T,
+  stringValue: string | null | undefined,
+  defaultValue?: D
+): D | z.output<T> {
+  if (!stringValue) return defaultValue as D
+
+  let jsonValue: D | z.output<typeof schema> = defaultValue as D
+  try {
+    jsonValue = JSON.parse(stringValue)
+  } catch (error) {
+    console.error(error)
+    return defaultValue as D
+  }
+
+  const parsedValue = schema.safeParse(jsonValue)
+  if (!parsedValue.success) {
+    console.error(parsedValue.error)
+    return defaultValue as D
+  }
+
+  return parsedValue.data
+}

web/src/lib/localstorage.ts

@@ -0,0 +1,57 @@
+import { z } from 'astro:schema'
+
+import { zodParseJSON, type ZodJSON } from './json'
+import { typedObjectEntries } from './objects'
+
+function makeTypedLocalStorage<
+  Schemas extends Record<string, ZodJSON>,
+  T extends {
+    [K in keyof Schemas]: {
+      schema: Schemas[K]
+      default?: z.output<Schemas[K]> | undefined
+      key?: string
+    }
+  },
+>(options: T) {
+  return Object.fromEntries(
+    typedObjectEntries(options).map(([originalKey, option]) => {
+      const key = option.key ?? originalKey
+
+      return [
+        key,
+        {
+          get: () => {
+            return zodParseJSON(option.schema, localStorage.getItem(key), option.default)
+          },
+
+          set: (value: z.input<typeof option.schema>) => {
+            localStorage.setItem(key, JSON.stringify(value))
+          },
+
+          remove: () => {
+            localStorage.removeItem(key)
+          },
+
+          default: option.default,
+        },
+      ]
+    })
+  ) as {
+    [K in keyof T]: {
+      get: () => z.output<T[K]['schema']> | (T[K] extends { default: infer D } ? D : undefined)
+      set: (value: z.input<T[K]['schema']>) => void
+      remove: () => void
+      default: z.output<T[K]['schema']> | undefined
+    }
+  }
+}
+
+export const typedLocalStorage = makeTypedLocalStorage({
+  pushNotificationsBannerDismissedAt: {
+    schema: z.coerce.date(),
+  },
+  browserNotificationsEnabled: {
+    schema: z.boolean(),
+    default: false,
+  },
+})

web/src/lib/makeAdminApiCallInfo.ts

@@ -0,0 +1,50 @@
+import type { Misc } from 'ts-toolbelt'
+
+export async function makeAdminApiCallInfo<T extends Misc.JSON.Object>({
+  method,
+  path,
+  input,
+  baseUrl,
+}: {
+  method: 'POST' | 'QUERY'
+  path: `/${string}`
+  input: T
+  baseUrl: URL | string
+}) {
+  const fullPath = new URL(`/api/v1${path}`, baseUrl).href
+
+  const fetchProsmise = fetch(fullPath, {
+    method,
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(input),
+  }).then((res) => {
+    try {
+      return res.json() as Promise<Misc.JSON.Value>
+    } catch (errJson: unknown) {
+      console.error(errJson)
+
+      try {
+        return res.text()
+      } catch (errText: unknown) {
+        console.error(errText)
+        return ''
+      }
+    }
+  })
+
+  let output: Misc.JSON.Value = ''
+  try {
+    output = await fetchProsmise
+  } catch (err: unknown) {
+    console.error(err)
+    output = err instanceof Error ? err.message : String(err)
+  }
+
+  return {
+    method,
+    path,
+    fullPath,
+    input,
+    output,
+  }
+}

web/src/lib/notificationOptions.ts

@@ -0,0 +1,56 @@
+import type { NotificationData, NotificationPayload } from './serverEventsTypes'
+
+export type CustomNotificationOptions = NotificationOptions & {
+  actions?: { action: string; title: string; icon?: string }[]
+  timestamp: number
+  data: NotificationData
+}
+
+export function makeNotificationOptions(
+  payload: NotificationPayload | null,
+  options: { removeActions?: boolean } = {}
+) {
+  const defaultOptions: CustomNotificationOptions = {
+    body: 'You have a new notification',
+    lang: 'en-US',
+    icon: '/favicon.svg',
+    badge: '/notification-icon.svg',
+    requireInteraction: false,
+    silent: false,
+    actions: options.removeActions
+      ? undefined
+      : [
+          {
+            action: 'view',
+            title: 'View',
+            icon: 'https://api.iconify.design/ri/arrow-right-line.svg',
+          },
+        ],
+    timestamp: Date.now(),
+    data: {
+      defaultActionUrl: '/notifications',
+      payload: null,
+    },
+  }
+
+  if (!payload) {
+    return defaultOptions
+  }
+
+  return {
+    ...defaultOptions,
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    body: payload.body || undefined,
+    actions: options.removeActions
+      ? undefined
+      : payload.actions.map((action) => ({
+          action: action.action,
+          title: action.title,
+          icon: action.icon,
+        })),
+    data: {
+      ...defaultOptions.data,
+      payload,
+    },
+  } as CustomNotificationOptions
+}

web/src/lib/notificationPreferences.ts

@@ -1,11 +1,14 @@
 import { prisma } from './prisma'
 
-import type { Prisma } from '@prisma/client'
+import type { Prisma, PrismaClient } from '@prisma/client'
 
 export async function getOrCreateNotificationPreferences<T extends Prisma.NotificationPreferencesSelect>(
   userId: number,
   select: { [K in keyof T]: K extends keyof Prisma.NotificationPreferencesSelect ? T[K] : never },
-  tx: Prisma.TransactionClient = prisma
+  tx:
+    | Parameters<Parameters<(typeof prisma)['$transaction']>[0]>[0]
+    | Prisma.TransactionClient
+    | PrismaClient = prisma
 ) {
   return (
     (await tx.notificationPreferences.findUnique({ where: { userId }, select })) ??

web/src/lib/notifications.ts

@@ -7,11 +7,13 @@ import { serviceSuggestionStatusChangesById } from '../constants/suggestionStatu
 
 import { makeCommentUrl } from './commentsWithReplies'
 
+import type { NotificationAction } from './serverEventsTypes'
 import type { Prisma } from '@prisma/client'
 
 export function makeNotificationTitle(
   notification: Prisma.NotificationGetPayload<{
     select: {
+      id: true
       type: true
       aboutAccountStatusChange: true
       aboutCommentStatusChange: true
@@ -87,6 +89,9 @@ export function makeNotificationTitle(
   user: Prisma.UserGetPayload<{ select: { id: true } }> | null
 ): string {
   switch (notification.type) {
+    case 'TEST': {
+      return `Test notification #${notification.id.toString()}`
+    }
     case 'COMMENT_STATUS_CHANGE': {
       if (!notification.aboutComment) return 'A comment you are watching had a status change'
 
@@ -178,6 +183,7 @@ export function makeNotificationTitle(
 export function makeNotificationContent(
   notification: Prisma.NotificationGetPayload<{
     select: {
+      createdAt: true
       type: true
       aboutKarmaTransaction: {
         select: {
@@ -204,6 +210,9 @@ export function makeNotificationContent(
   }>
 ): string | null {
   switch (notification.type) {
+    case 'TEST': {
+      return `Created on ${notification.createdAt.toLocaleString()}`
+    }
     // TODO: [KARMA_UNLOCK] Will be added later, when karma unloks are in the database, not in the code.
     // case 'KARMA_UNLOCK':
     case 'KARMA_CHANGE': {
@@ -236,7 +245,7 @@ export function makeNotificationContent(
   }
 }
 
-export function makeNotificationLink(
+export function makeNotificationActions(
   notification: Prisma.NotificationGetPayload<{
     select: {
       type: true
@@ -278,44 +287,120 @@ export function makeNotificationLink(
     }
   }>,
   origin: string
-): string | null {
+): NotificationAction[] {
   switch (notification.type) {
+    case 'TEST': {
+      return [
+        {
+          action: 'view',
+          title: 'View',
+          ...iconNameAndUrl('ri:arrow-right-line'),
+          url: `${origin}/notifications`,
+        },
+        {
+          action: 'profile',
+          title: 'Profile',
+          ...iconNameAndUrl('ri:user-line'),
+          url: `${origin}/account`,
+        },
+      ]
+    }
     case 'COMMENT_STATUS_CHANGE':
     case 'REPLY_COMMENT_CREATED':
     case 'COMMUNITY_NOTE_ADDED':
     case 'ROOT_COMMENT_CREATED': {
-      if (!notification.aboutComment) return null
-      return makeCommentUrl({
-        serviceSlug: notification.aboutComment.service.slug,
-        commentId: notification.aboutComment.id,
-        origin,
-      })
+      if (!notification.aboutComment) return []
+      return [
+        {
+          action: 'view',
+          title: 'View',
+          ...iconNameAndUrl('ri:arrow-right-line'),
+          url: makeCommentUrl({
+            serviceSlug: notification.aboutComment.service.slug,
+            commentId: notification.aboutComment.id,
+            origin,
+          }),
+        },
+      ]
     }
     case 'SUGGESTION_MESSAGE': {
-      if (!notification.aboutServiceSuggestionMessage) return null
-      return `${origin}/service-suggestion/${String(notification.aboutServiceSuggestionMessage.suggestion.id)}#message-${String(notification.aboutServiceSuggestionMessage.id)}`
+      if (!notification.aboutServiceSuggestionMessage) return []
+      return [
+        {
+          action: 'view',
+          title: 'View',
+          ...iconNameAndUrl('ri:arrow-right-line'),
+          url: `${origin}/service-suggestion/${String(notification.aboutServiceSuggestionMessage.suggestion.id)}#message-${String(notification.aboutServiceSuggestionMessage.id)}`,
+        },
+      ]
     }
     case 'SUGGESTION_STATUS_CHANGE': {
-      if (!notification.aboutServiceSuggestionId) return null
-      return `${origin}/service-suggestion/${String(notification.aboutServiceSuggestionId)}`
+      if (!notification.aboutServiceSuggestionId) return []
+      return [
+        {
+          action: 'view',
+          title: 'View',
+          ...iconNameAndUrl('ri:arrow-right-line'),
+          url: `${origin}/service-suggestion/${String(notification.aboutServiceSuggestionId)}`,
+        },
+      ]
     }
     // TODO: [KARMA_UNLOCK] Will be added later, when karma unloks are in the database, not in the code.
     // case 'KARMA_UNLOCK': {
-    //   return `${origin}/account#karma-unlocks`
+    //   return [{ action: 'view', title: 'View', url: `${origin}/account#karma-unlocks` }]
     // }
     case 'KARMA_CHANGE': {
-      return `${origin}/account#karma-transactions`
+      return [
+        {
+          action: 'view',
+          title: 'View',
+          ...iconNameAndUrl('ri:arrow-right-line'),
+          url: `${origin}/account#karma-transactions`,
+        },
+      ]
     }
     case 'ACCOUNT_STATUS_CHANGE': {
-      return `${origin}/account#account-status`
+      return [
+        {
+          action: 'view',
+          title: 'View',
+          ...iconNameAndUrl('ri:arrow-right-line'),
+          url: `${origin}/account#account-status`,
+        },
+      ]
     }
     case 'EVENT_CREATED': {
-      if (!notification.aboutEvent) return null
-      return `${origin}/service/${notification.aboutEvent.service.slug}#events`
+      if (!notification.aboutEvent) return []
+      return [
+        {
+          action: 'view',
+          title: 'View',
+          ...iconNameAndUrl('ri:arrow-right-line'),
+          url: `${origin}/service/${notification.aboutEvent.service.slug}#events`,
+        },
+      ]
     }
     case 'SERVICE_VERIFICATION_STATUS_CHANGE': {
-      if (!notification.aboutService) return null
-      return `${origin}/service/${notification.aboutService.slug}#verification`
+      if (!notification.aboutService) return []
+      return [
+        {
+          action: 'view',
+          title: 'View',
+          ...iconNameAndUrl('ri:arrow-right-line'),
+          url: `${origin}/service/${notification.aboutService.slug}#verification`,
+        },
+      ]
     }
   }
 }
+
+function iconUrl<T extends `${string}:${string}`>(iconName: T) {
+  return `https://api.iconify.design/${iconName.replace(':', '/') as T extends `${infer Prefix}:${infer Suffix}` ? `${Prefix}/${Suffix}` : never}.svg` as const
+}
+
+function iconNameAndUrl<T extends `${string}:${string}`>(iconName: T) {
+  return {
+    iconName,
+    icon: iconUrl(iconName),
+  } as const
+}

web/src/lib/objects.ts

@@ -162,3 +162,16 @@ export function areEqualObjectsWithoutOrder<T extends Record<string, unknown>>(
     return undefined
   })
 }
+
+/**
+ * Same as {@link Object.entries}, but with proper typing.
+ * @example
+ * typedObjectEntries({ a: 1, b: 2 }) // [['a', 1], ['b', 2]]
+ */
+export function typedObjectEntries<T extends Record<string, unknown>>(obj: T) {
+  return Object.entries(obj) as Prettify<
+    {
+      [K in Extract<keyof T, string>]: [K, T[K]]
+    }[Extract<keyof T, string>]
+  >[]
+}

web/src/lib/postgresListenerIntegration.ts

@@ -0,0 +1,21 @@
+import { startListener, stopListener } from './postgresListeners'
+
+import type { AstroIntegration } from 'astro'
+
+const INTEGRATION_NAME = 'postgres-listener'
+
+export function postgresListener(): AstroIntegration {
+  return {
+    name: 'postgres-listener',
+    hooks: {
+      'astro:server:start': (options) => {
+        const logger = options.logger.fork(INTEGRATION_NAME)
+        void startListener(logger)
+      },
+      'astro:server:done': (options) => {
+        const logger = options.logger.fork(INTEGRATION_NAME)
+        void stopListener(logger)
+      },
+    },
+  }
+}

web/src/lib/postgresListeners.ts

@@ -0,0 +1,112 @@
+import { Client } from 'pg'
+
+import { getRedisServerEvents, type RedisServerEvents } from './redis/redisServerEvents'
+import { sendNotification } from './sendNotifications'
+import { getServerEnvVariable } from './serverEnvVariables'
+
+import type { AstroIntegrationLogger } from 'astro'
+
+const DATABASE_URL = getServerEnvVariable('DATABASE_URL')
+
+let pgClient: Client | null = null
+
+export async function startListener(
+  logger: Pick<AstroIntegrationLogger, 'debug' | 'error' | 'info' | 'warn'>
+) {
+  try {
+    logger.info('Starting PostgreSQL notification listener...')
+
+    pgClient = new Client({ connectionString: DATABASE_URL })
+
+    await pgClient.connect()
+    logger.info('Connected to PostgreSQL for notifications')
+
+    await pgClient.query('LISTEN notification_created')
+    logger.info('Listening for notification_created events')
+
+    const redisServerEvents = await getRedisServerEvents()
+
+    pgClient.on('notification', (msg) => {
+      if (msg.channel === 'notification_created') {
+        const payload = parseJSON(msg.payload)
+        if (
+          !payload ||
+          typeof payload !== 'object' ||
+          !('id' in payload) ||
+          typeof payload.id !== 'number' ||
+          payload.id <= 0 ||
+          !Number.isFinite(payload.id) ||
+          !Number.isInteger(payload.id)
+        ) {
+          logger.warn(`Invalid notification ID in payload: ${String(msg.payload)}`)
+          return
+        }
+
+        // NOTE: Don't await to avoid blocking
+        void handleNotificationCreated(payload.id, logger, redisServerEvents)
+      }
+    })
+
+    pgClient.on('error', (error) => {
+      logger.error(`PostgreSQL client error: ${getErrorMessage(error)}`)
+    })
+
+    pgClient.on('end', () => {
+      logger.info('PostgreSQL client connection ended')
+    })
+  } catch (error) {
+    logger.error(`Failed to start PostgreSQL listener: ${getErrorMessage(error)}`)
+  }
+}
+
+async function handleNotificationCreated(
+  notificationId: number,
+  logger: Pick<AstroIntegrationLogger, 'debug' | 'error' | 'info' | 'warn'>,
+  redisServerEvents: RedisServerEvents
+) {
+  try {
+    logger.info(`Processing notification with ID: ${String(notificationId)}`)
+
+    const results = await sendNotification(notificationId, logger, redisServerEvents)
+
+    logger.info(
+      `Sent push notifications for notification ${String(notificationId)} to ${String(results.success)} devices, ${String(results.failure)} failed`
+    )
+  } catch (error) {
+    logger.error(`Error processing notification ${String(notificationId)}: ${getErrorMessage(error)}`)
+  }
+}
+
+export async function stopListener(logger: AstroIntegrationLogger) {
+  if (pgClient) {
+    try {
+      logger.info('Stopping PostgreSQL notification listener...')
+      await pgClient.end()
+      pgClient = null
+      logger.info('PostgreSQL listener stopped')
+    } catch (error) {
+      logger.error(`Error stopping PostgreSQL listener: ${getErrorMessage(error)}`)
+    }
+  }
+}
+
+function parseJSON<T = unknown, D extends T | undefined = undefined>(
+  stringValue: string | null | undefined,
+  defaultValue?: D
+): D | T {
+  if (!stringValue) return defaultValue as D
+
+  try {
+    return JSON.parse(stringValue) as T
+  } catch (error) {
+    console.error(error)
+    return defaultValue as D
+  }
+}
+
+function getErrorMessage(error: unknown) {
+  if (error instanceof Error) {
+    return error.message
+  }
+  return String(error)
+}

web/src/lib/prisma.ts

@@ -25,24 +25,23 @@ const findManyAndCount = {
   },
 }
 
-type FindManyAndCountType = typeof findManyAndCount.model.$allModels.findManyAndCount
+// NOTE: This used to be necessary to cast the prismaClientSingleton return type, but it seems not anymore. I left it, just in case we need it again
+// type FindManyAndCountType = typeof findManyAndCount.model.$allModels.findManyAndCount
 
-type ModelsWithCustomMethods = {
-  [Model in keyof PrismaClient]: PrismaClient[Model] extends {
-    findMany: (...args: any[]) => Promise<any>
-  }
-    ? PrismaClient[Model] & {
-        findManyAndCount: FindManyAndCountType
-      }
-    : PrismaClient[Model]
-}
+// type ModelsWithCustomMethods = {
+//   [Model in keyof PrismaClient]: PrismaClient[Model] extends {
+//     findMany: (...args: any[]) => Promise<any>
+//   }
+//     ? PrismaClient[Model] & {
+//         findManyAndCount: FindManyAndCountType
+//       }
+//     : PrismaClient[Model]
+// }
 
-type ExtendedPrismaClient = ModelsWithCustomMethods & PrismaClient
+// type ExtendedPrismaClient = ModelsWithCustomMethods & PrismaClient
 
-function prismaClientSingleton(): ExtendedPrismaClient {
-  const prisma = new PrismaClient().$extends(findManyAndCount)
-
-  return prisma as unknown as ExtendedPrismaClient
+function prismaClientSingleton() {
+  return new PrismaClient().$extends(findManyAndCount)
 }
 
 declare global {

web/src/lib/redis/redisActionsSessions.ts

@@ -2,7 +2,6 @@ import { randomUUID } from 'node:crypto'
 
 import { deserializeActionResult } from 'astro:actions'
 import { z } from 'astro:content'
-import { REDIS_ACTIONS_SESSION_EXPIRY_SECONDS } from 'astro:env/server'
 
 import { RedisGenericManager } from './redisGenericManager'
 
@@ -29,11 +28,13 @@ const dataSchema = z.object({
 })
 
 class RedisActionsSessions extends RedisGenericManager {
+  private readonly prefix = 'actions_session:'
+
   async store(data: z.input<typeof dataSchema>) {
     const sessionId = randomUUID()
 
     const parsedData = dataSchema.parse(data)
-    await this.redisClient.set(`actions-session:${sessionId}`, JSON.stringify(parsedData), {
+    await this.redisClient.set(`${this.prefix}${sessionId}`, JSON.stringify(parsedData), {
       EX: this.expirationTime,
     })
 
@@ -43,7 +44,7 @@ class RedisActionsSessions extends RedisGenericManager {
   async get(sessionId: string | null | undefined) {
     if (!sessionId) return null
 
-    const key = `actions-session:${sessionId}`
+    const key = `${this.prefix}${sessionId}`
 
     const rawData = await this.redisClient.get(key)
     if (!rawData) return null
@@ -60,10 +61,10 @@ class RedisActionsSessions extends RedisGenericManager {
   async delete(sessionId: string | null | undefined) {
     if (!sessionId) return
 
-    await this.redisClient.del(`actions-session:${sessionId}`)
+    await this.redisClient.del(`${this.prefix}${sessionId}`)
   }
 }
 
 export const redisActionsSessions = await RedisActionsSessions.createAndConnect({
-  expirationTime: REDIS_ACTIONS_SESSION_EXPIRY_SECONDS,
+  expirationTime: 60 * 5, // 5 minutes in seconds
 })