Release 202506061009

.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,10 +7,8 @@ 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}"]
       interval: 10s
@@ -20,19 +18,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
+    env_file:
+      - .env
     volumes:
       - /dev/shm:/dev/shm
     deploy:
@@ -53,15 +49,9 @@ services:
 
   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:

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,17 +1,20 @@
 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}
 
@@ -20,7 +23,7 @@ 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"]

web/astro.config.mjs

@@ -6,11 +6,11 @@ import sitemap from '@astrojs/sitemap'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig, envField } from 'astro/config'
 import icon from 'astro-icon'
-import { loadEnv } from 'vite'
 
-// @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,
@@ -22,6 +22,7 @@ export default defineConfig({
     plugins: [tailwindcss()],
   },
   integrations: [
+    postgresListener(),
     icon(),
     mdx(),
     sitemap({
@@ -177,6 +178,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 +196,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/package.json

@@ -23,18 +23,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 +43,59 @@
     "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",
     "astro-icon": "1.1.5",
     "date-fns": "4.1.0",
-    "eslint": "9.27.0",
-    "eslint-import-resolver-typescript": "4.3.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"
   }
 }

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/sw.js

@@ -0,0 +1,114 @@
+// @ts-check
+
+/// <reference lib="webworker" />
+
+/** @type {ServiceWorkerGlobalScope} */
+// @ts-expect-error
+const typedSelf = self
+
+const CACHE_NAME = 'kycnot-sw-push-notifications-v2'
+
+/** @typedef {import('../src/lib/webPush').NotificationPayload} NotificationPayload */
+/** @typedef {{defaultActionUrl: string, payload: NotificationPayload | null}} NotificationData */
+/** @typedef {NotificationOptions & { actions: { action: string; title: string; icon?: string }[], timestamp: number, data: NotificationData }  } CustomNotificationOptions */
+
+typedSelf.addEventListener('install', (event) => {
+  console.log('Service Worker installing')
+  typedSelf.skipWaiting()
+})
+
+typedSelf.addEventListener('activate', (event) => {
+  console.log('Service Worker activating')
+  event.waitUntil(typedSelf.clients.claim())
+})
+
+typedSelf.addEventListener('push', (event) => {
+  console.log('Push event received:', event)
+
+  if (!event.data) {
+    console.error('Push event but no data')
+    return
+  }
+
+  let title = 'New Notification'
+  /** @type {CustomNotificationOptions} */
+  let options = {
+    body: 'You have a new notification',
+    lang: 'en-US',
+    icon: '/favicon.svg',
+    badge: '/favicon.svg',
+    requireInteraction: false,
+    silent: false,
+    actions: [
+      {
+        action: 'view',
+        title: 'View',
+        icon: 'https://api.iconify.design/ri/arrow-right-line.svg',
+      },
+    ],
+    timestamp: Date.now(),
+    data: {
+      defaultActionUrl: '/notifications',
+      payload: null,
+    },
+  }
+
+  try {
+    /** @type {NotificationPayload} */
+    const rawData = event.data.json()
+    if (typeof rawData !== 'object' || rawData === null) throw new Error('Invalid push data, not an object')
+    if (!('title' in rawData) || typeof rawData.title !== 'string')
+      throw new Error('Invalid push data, no title')
+    title = rawData.title
+
+    options = {
+      ...options,
+      body: rawData.body || undefined,
+      actions: rawData.actions.map((action) => ({
+        action: action.action,
+        title: action.title,
+        icon: action.icon,
+      })),
+      data: {
+        ...options.data,
+        payload: rawData,
+      },
+    }
+  } catch (error) {
+    console.error('Error parsing push data:', error)
+  }
+
+  event.waitUntil(typedSelf.registration.showNotification(title, options))
+})
+
+typedSelf.addEventListener('notificationclick', (event) => {
+  console.log('Notification clicked:', event)
+
+  event.notification.close()
+
+  /** @type {NotificationData} */
+  const data = event.notification.data
+
+  // @ts-expect-error I already use optional chaining
+  const url = data.payload?.[event.action]?.url || data.defaultActionUrl
+
+  event.waitUntil(
+    typedSelf.clients.matchAll({ type: 'window' }).then((clientList) => {
+      // If a window is already open, focus it
+      for (const client of clientList) {
+        if (client.url === url && 'focus' in client) {
+          return client.focus()
+        }
+      }
+
+      // Otherwise, open a new window
+      if (typedSelf.clients.openWindow) {
+        return typedSelf.clients.openWindow(url)
+      }
+    })
+  )
+})
+
+typedSelf.addEventListener('notificationclose', (event) => {
+  console.log('Notification closed:', event)
+})

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) => {
@@ -366,4 +418,50 @@ 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) => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        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,10 +156,11 @@ 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),
@@ -210,6 +206,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 +223,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 +245,11 @@ export const serviceSuggestionActions = {
                 attributeId: id,
               })),
             },
+            contactMethods: {
+              create: input.contactMethods.map((value) => ({
+                value,
+              })),
+            },
           },
           select: serviceSelect,
         })
@@ -248,8 +257,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/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/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/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/PushNotificationBanner.astro

@@ -0,0 +1,374 @@
+---
+import { Icon } from 'astro-icon/components'
+import { VAPID_PUBLIC_KEY } from 'astro:env/server'
+
+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
+
+// TODO: Feature flag, enabled only for admins
+if (!Astro.locals.user?.admin) {
+  return null
+}
+---
+
+<div
+  data-push-notification-banner
+  data-dismissed={undefined /* Updated by client script */}
+  data-supports-push-notifications={undefined /* Updated by client script */}
+  data-push-subscriptions={JSON.stringify(pushSubscriptions)}
+  data-is-enabled={undefined /* Updated by client script */}
+  class={cn(
+    'no-js:hidden relative isolate flex items-center justify-between gap-x-4 overflow-hidden rounded-xl bg-gradient-to-r from-blue-950/80 to-blue-900/60 p-4',
+    'data-dismissed:hidden',
+    hideIfEnabled && 'data-is-enabled:hidden',
+    'not-data-supports-push-notifications: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">
+        <span data-show-if-enabled>Push notifications enabled</span>
+        <span data-show-if-disabled>Turn on push notifications?</span>
+      </h3>
+      <p class="text-sm text-blue-200/80">
+        <span data-show-if-enabled>Turn notifications off for this device?</span>
+        <span data-show-if-disabled>Get notifications on this device.</span>
+      </p>
+    </div>
+  </div>
+
+  <div class="flex items-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-vapid-public-key={VAPID_PUBLIC_KEY}
+      data-show-if-disabled
+    />
+    <Button
+      as="span"
+      label="Stop notifications"
+      color="white"
+      variant="faded"
+      data-push-action="unsubscribe"
+      data-vapid-public-key={VAPID_PUBLIC_KEY}
+      data-show-if-enabled
+    />
+  </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 style when notifications enabled.        //
+  ////////////////////////////////////////////////////////
+
+  type ServerSubscription = {
+    endpoint: string
+    userAgent: string | null
+  }
+
+  /** Parse push subscriptions from string */
+  function parsePushSubscriptions(subscriptionsAsString: string | undefined) {
+    try {
+      if (typeof subscriptionsAsString !== 'string') throw new Error('Push subscriptions must be a string')
+
+      const subscriptions = JSON.parse(subscriptionsAsString)
+
+      if (!Array.isArray(subscriptions)) throw new Error('Push subscriptions must be an array')
+      if (!subscriptions.every((s) => typeof s === 'object' && s !== null)) {
+        throw new Error('Push subscriptions must be an array of objects')
+      }
+      if (!subscriptions.every((s) => typeof s.endpoint === 'string')) {
+        throw new Error('Push subscriptions must be an array of objects with endpoint property')
+      }
+      if (!subscriptions.every((s) => typeof s.userAgent === 'string' || s.userAgent === null)) {
+        throw new Error('Push subscriptions must be an array of objects with userAgent property')
+      }
+
+      return subscriptions as ServerSubscription[]
+    } catch (error) {
+      console.error('Failed to parse push subscriptions:', error)
+      return []
+    }
+  }
+
+  /** Check if current device has an active push subscription */
+  async function getCurrentPushSubscription() {
+    try {
+      const registration = await navigator.serviceWorker.getRegistration()
+      if (!registration) return null
+
+      return await registration.pushManager.getSubscription()
+    } catch (error) {
+      console.error('Error getting current push subscription:', error)
+      return null
+    }
+  }
+
+  /** Check if current subscription matches any server subscription */
+  function isCurrentDeviceSubscribed(
+    currentSubscription: PushSubscription | null,
+    serverSubscriptions: ServerSubscription[]
+  ) {
+    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)
+    )
+  }
+
+  document.addEventListener('astro:page-load', async () => {
+    document.querySelectorAll<HTMLElement>('[data-push-notification-banner]').forEach(async (banner) => {
+      const serverSubscriptions = parsePushSubscriptions(banner.dataset.pushSubscriptions)
+      const currentSubscription = await getCurrentPushSubscription()
+      const isSubscribed = isCurrentDeviceSubscribed(currentSubscription, serverSubscriptions)
+
+      if (isSubscribed) banner.dataset.isEnabled = ''
+    })
+  })
+</script>
+
+<script>
+  /////////////////////////////////////////////////////////////
+  // Script to handle push notification subscription.        //
+  /////////////////////////////////////////////////////////////
+
+  import type { actions } from 'astro:actions'
+  import type { ActionInput } from '../lib/astroActions'
+
+  /** Utility function to convert VAPID key */
+  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
+  }
+
+  /** Check for browser support */
+  function checkSupport() {
+    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 registerServiceWorker() {
+    try {
+      const registration = await navigator.serviceWorker.register('/sw.js')
+      console.log('Service Worker registered:', registration)
+
+      const readyRegistration = await navigator.serviceWorker.ready
+      console.log('Service Worker is active and ready:', readyRegistration)
+
+      return readyRegistration
+    } catch (error) {
+      console.error('Service Worker registration failed:', error)
+      throw error
+    }
+  }
+
+  async function subscribeToPush(vapidPublicKey: string) {
+    try {
+      if (!checkSupport()) return
+
+      // Request notification permission
+      const permission = await Notification.requestPermission()
+      if (permission !== 'granted') {
+        alert('Push notifications permission denied')
+        return
+      }
+
+      const registration = await registerServiceWorker()
+
+      // Subscribe to push manager
+      const subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlB64ToUint8Array(vapidPublicKey),
+      })
+
+      const p256dh = subscription.getKey('p256dh')
+      const auth = subscription.getKey('auth')
+
+      // Send subscription to server
+      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) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      console.log('Push subscription successful')
+
+      // Reload page to update UI
+      window.location.reload()
+    } catch (error) {
+      console.error('Push subscription failed:', error)
+      alert('Error enabling push notifications. This may be due to browser settings or other restrictions.')
+    }
+  }
+
+  async function unsubscribeFromPush() {
+    try {
+      const registration = await navigator.serviceWorker.getRegistration()
+      if (!registration) {
+        console.log('No service worker registration found')
+        return
+      }
+
+      const subscription = await registration.pushManager.getSubscription()
+      if (!subscription) {
+        console.log('No push subscription found')
+        return
+      }
+
+      // Unsubscribe from browser
+      await subscription.unsubscribe()
+
+      // Remove from server
+      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) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      console.log('Push unsubscription successful')
+
+      // Reload page to update UI
+      window.location.reload()
+    } catch (error) {
+      console.error('Push unsubscription failed:', error)
+      alert('Failed to unsubscribe from push notifications')
+    }
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    const supportsPushNotifications = checkSupport()
+    if (supportsPushNotifications) {
+      document.querySelectorAll<HTMLElement>('[data-push-notification-banner]').forEach((element) => {
+        element.dataset.supportsPushNotifications = ''
+      })
+    }
+
+    document.querySelectorAll<HTMLElement>('[data-push-action]').forEach((button) => {
+      const vapidPublicKey = button.dataset.vapidPublicKey
+      if (!vapidPublicKey) {
+        console.error('Environment variable VAPID_PUBLIC_KEY is not set')
+        return
+      }
+
+      button.addEventListener('click', async (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const action = button.dataset.pushAction
+        if (action === 'subscribe') {
+          await subscribeToPush(vapidPublicKey)
+        } else if (action === 'unsubscribe') {
+          await unsubscribeFromPush()
+        }
+      })
+    })
+  })
+</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/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

@@ -15,6 +15,8 @@ type EventTypeInfo<T extends string | null | undefined = string> = {
   }
   icon: string
   color: ComponentProps<typeof BadgeSmall>['color']
+  isSolved: boolean
+  showBanner: boolean
 }
 
 export const {
@@ -36,6 +38,8 @@ export const {
     },
     icon: 'ri:question-fill',
     color: 'gray',
+    isSolved: false,
+    showBanner: false,
   }),
   [
     {
@@ -46,8 +50,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 +61,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 +76,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 +87,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 +104,8 @@ export const {
       },
       icon: 'ri:information-fill',
       color: 'sky',
+      isSolved: false,
+      showBanner: false,
     },
     {
       id: 'NORMAL',
@@ -103,6 +117,8 @@ export const {
       },
       icon: 'ri:notification-fill',
       color: 'green',
+      isSolved: false,
+      showBanner: false,
     },
     {
       id: 'UPDATE',
@@ -114,6 +130,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,14 +1,18 @@
 import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
 import { transformCase } from '../lib/strings'
 
+import type BadgeSmall from '../components/BadgeSmall.astro'
 import type { ServiceSuggestionType } from '@prisma/client'
+import type { ComponentProps } from 'astro/types'
 
 type ServiceSuggestionTypeInfo<T extends string | null | undefined = string> = {
   value: T
   slug: string
   label: string
   icon: string
+  order: number
   default: boolean
+  color: ComponentProps<typeof BadgeSmall>['color']
 }
 
 export const {
@@ -25,9 +29,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 +41,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/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/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/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:content'
+
+// 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,53 @@
+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(),
+  },
+})

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/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 './webPush'
 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,100 @@
+import { z } from 'astro/zod'
+import { Client } from 'pg'
+
+import { zodParseJSON } from './json'
+import { sendNotification } from './sendNotifications'
+import { getServerEnvVariable } from './serverEnvVariables'
+
+import type { AstroIntegration, HookParameters } from 'astro'
+
+const DATABASE_URL = getServerEnvVariable('DATABASE_URL')
+
+let pgClient: Client | null = null
+
+const INTEGRATION_NAME = 'postgres-listener'
+
+async function handleNotificationCreated(
+  notificationId: number,
+  options: HookParameters<'astro:server:start'>
+) {
+  const logger = options.logger.fork(INTEGRATION_NAME)
+  try {
+    logger.info(`Processing notification with ID: ${String(notificationId)}`)
+
+    const results = await sendNotification(notificationId, logger)
+
+    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 function postgresListener(): AstroIntegration {
+  return {
+    name: 'postgres-listener',
+    hooks: {
+      'astro:server:start': async (options) => {
+        const logger = options.logger.fork(INTEGRATION_NAME)
+
+        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')
+
+          pgClient.on('notification', (msg) => {
+            if (msg.channel === 'notification_created') {
+              const payload = zodParseJSON(z.object({ id: z.number().int().positive() }), msg.payload)
+              if (!payload) {
+                logger.warn(`Invalid notification ID in payload: ${String(msg.payload)}`)
+                return
+              }
+
+              // NOTE: Don't await to avoid blocking
+              void handleNotificationCreated(payload.id, options)
+            }
+          })
+
+          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)}`)
+        }
+      },
+
+      'astro:server:done': async ({ logger: originalLogger }) => {
+        const logger = originalLogger.fork(INTEGRATION_NAME)
+
+        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 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/sendNotifications.ts

@@ -0,0 +1,165 @@
+import { makeNotificationActions, makeNotificationContent, makeNotificationTitle } from './notifications'
+import { prisma } from './prisma'
+import { getServerEnvVariable } from './serverEnvVariables'
+import { type NotificationPayload, sendPushNotification } from './webPush'
+
+import type { AstroIntegrationLogger } from 'astro'
+
+const SITE_URL = getServerEnvVariable('SITE_URL')
+
+export async function sendNotification(
+  notificationId: number,
+  logger: AstroIntegrationLogger | Console = console
+) {
+  const notification = await prisma.notification.findUnique({
+    where: { id: notificationId },
+    select: {
+      id: true,
+      type: true,
+      userId: true,
+      createdAt: true,
+      aboutAccountStatusChange: true,
+      aboutCommentStatusChange: true,
+      aboutServiceVerificationStatusChange: true,
+      aboutSuggestionStatusChange: true,
+      aboutComment: {
+        select: {
+          id: true,
+          author: { select: { id: true } },
+          status: true,
+          content: true,
+          communityNote: true,
+          parent: {
+            select: {
+              author: {
+                select: {
+                  id: true,
+                },
+              },
+            },
+          },
+          service: {
+            select: {
+              slug: true,
+              name: true,
+            },
+          },
+        },
+      },
+      aboutServiceSuggestionId: true,
+      aboutServiceSuggestion: {
+        select: {
+          status: true,
+          service: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      },
+      aboutServiceSuggestionMessage: {
+        select: {
+          id: true,
+          content: true,
+          suggestion: {
+            select: {
+              id: true,
+              service: {
+                select: {
+                  name: true,
+                },
+              },
+            },
+          },
+        },
+      },
+      aboutEvent: {
+        select: {
+          title: true,
+          type: true,
+          service: {
+            select: {
+              slug: true,
+              name: true,
+            },
+          },
+        },
+      },
+      aboutService: {
+        select: {
+          slug: true,
+          name: true,
+          verificationStatus: true,
+        },
+      },
+      aboutKarmaTransaction: {
+        select: {
+          points: true,
+          action: true,
+          description: true,
+        },
+      },
+      user: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
+    },
+  })
+
+  if (!notification) {
+    logger.error(`Notification with ID ${notificationId.toString()} not found`)
+    return { success: 0, failure: 0, total: 0 }
+  }
+
+  const subscriptions = await prisma.pushSubscription.findMany({
+    where: { userId: notification.userId },
+    select: {
+      id: true,
+      endpoint: true,
+      p256dh: true,
+      auth: true,
+    },
+  })
+
+  if (subscriptions.length === 0) {
+    logger.info(`No push subscriptions found for user ${notification.user.name}`)
+    return { success: 0, failure: 0, total: 0 }
+  }
+
+  const notificationPayload = {
+    title: makeNotificationTitle(notification, notification.user),
+    body: makeNotificationContent(notification),
+    actions: makeNotificationActions(notification, SITE_URL),
+  } satisfies NotificationPayload
+
+  const subscriptionResults = await Promise.allSettled(
+    subscriptions.map(async (subscription) => {
+      const result = await sendPushNotification(
+        {
+          endpoint: subscription.endpoint,
+          keys: {
+            p256dh: subscription.p256dh,
+            auth: subscription.auth,
+          },
+        },
+        notificationPayload
+      )
+
+      // Remove invalid subscriptions
+      if (result.error && (result.error.statusCode === 410 || result.error.statusCode === 404)) {
+        await prisma.pushSubscription.delete({ where: { id: subscription.id } })
+        logger.info(`Removed invalid subscription for user ${notification.user.name}`)
+      }
+
+      return result.success
+    })
+  )
+
+  return {
+    success: subscriptionResults.filter((r) => r.status === 'fulfilled' && r.value).length,
+    failure: subscriptionResults.filter((r) => !(r.status === 'fulfilled' && r.value)).length,
+    total: subscriptionResults.length,
+  }
+}

web/src/lib/serverEnvVariables.ts

@@ -0,0 +1,14 @@
+import { loadEnv } from 'vite'
+
+/** Only use when you can't import the variables from `astro:env/server` */
+// @ts-expect-error process.env actually exists
+const untypedServerEnvVariables = loadEnv(process.env.NODE_ENV, process.cwd(), '')
+
+/** Only use when you can't import the variables from `astro:env/server` */
+export function getServerEnvVariable<T extends keyof typeof untypedServerEnvVariables>(
+  name: T
+): NonNullable<(typeof untypedServerEnvVariables)[T]> {
+  const value = untypedServerEnvVariables[name]
+  if (!value) throw new Error(`${name} environment variable is not set`)
+  return value
+}

web/src/lib/urls.ts

@@ -113,3 +113,28 @@ export function urlDomain(url: URL | string) {
   }
   return url.origin
 }
+
+export function separateServiceUrlsByType(allServiceUrls: string[]) {
+  const result: {
+    web: string[]
+    onion: string[]
+    i2p: string[]
+  } = {
+    web: [],
+    onion: [],
+    i2p: [],
+  }
+
+  for (const url of allServiceUrls) {
+    const parsedUrl = new URL(url)
+    if (parsedUrl.origin.endsWith('.onion')) {
+      result.onion.push(url)
+    } else if (parsedUrl.origin.endsWith('.b32.i2p')) {
+      result.i2p.push(url)
+    } else {
+      result.web.push(url)
+    }
+  }
+
+  return result
+}

web/src/lib/webPush.ts

@@ -0,0 +1,53 @@
+/* eslint-disable import/no-named-as-default-member */
+import webpush, { WebPushError } from 'web-push'
+
+import { getServerEnvVariable } from './serverEnvVariables'
+
+const VAPID_PUBLIC_KEY = getServerEnvVariable('VAPID_PUBLIC_KEY')
+const VAPID_PRIVATE_KEY = getServerEnvVariable('VAPID_PRIVATE_KEY')
+const VAPID_SUBJECT = getServerEnvVariable('VAPID_SUBJECT')
+
+// Configure VAPID keys
+webpush.setVapidDetails(VAPID_SUBJECT, VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY)
+
+export { webpush }
+
+export type NotificationAction = {
+  action: string
+  title: string
+  icon?: string
+
+  url: string | null
+  iconName?: string
+}
+
+export type NotificationPayload = {
+  title: string
+  body: string | null
+  actions: NotificationAction[]
+}
+
+export async function sendPushNotification(
+  subscription: {
+    endpoint: string
+    keys: {
+      p256dh: string
+      auth: string
+    }
+  },
+  payload: NotificationPayload
+) {
+  try {
+    // NOTE: View sw.js to see how the notification is handled
+    const result = await webpush.sendNotification(subscription, JSON.stringify(payload), {
+      TTL: 24 * 60 * 60, // 24 hours
+    })
+    return { success: true, result } as const
+  } catch (error) {
+    console.error('Error sending push notification:', error)
+    return {
+      success: false,
+      error: error instanceof WebPushError ? error : undefined,
+    } as const
+  }
+}

web/src/lib/zodUtils.ts

@@ -13,17 +13,44 @@ const addZodPipe = (schema: ZodTypeAny, zodPipe?: ZodTypeAny) => {
 export const zodCohercedNumber = (zodPipe?: ZodTypeAny) =>
   addZodPipe(z.number().or(z.string().nonempty()), zodPipe)
 
+const cleanUrl = (input: unknown) => {
+  if (typeof input !== 'string') return input
+  const cleanInput = input.trim().replace(/\/$/, '')
+  return !/^\w+:\/\//i.test(cleanInput) ? `https://${cleanInput}` : cleanInput
+}
+
 export const zodUrlOptionalProtocol = z.preprocess(
-  (input) => {
-    if (typeof input !== 'string') return input
-    const cleanInput = input.trim().replace(/\/$/, '')
-    return !/^\w+:\/\//i.test(cleanInput) ? `https://${cleanInput}` : cleanInput
-  },
-  z.string().refine((value) => /^(https?):\/\/(?=.*\.[a-z]{2,})[^\s$.?#].[^\s]*$/i.test(value), {
+  cleanUrl,
+  z.string().refine((value) => /^(https?):\/\/(?=.*\.[a-z0-9]{2,})[^\s$.?#].[^\s]*$/i.test(value), {
     message: 'Invalid URL',
   })
 )
 
+export const zodContactMethod = z.preprocess(
+  (input) => {
+    if (typeof input !== 'string') return input
+    const cleanInput = input.trim()
+
+    if (/^([\d\s+\-_/()[\]*#.,]|ext|x){7,}$/i.test(cleanInput)) return `tel:${cleanInput}`
+
+    if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(cleanInput)) return `mailto:${cleanInput}`
+
+    return cleanUrl(cleanInput)
+  },
+  z
+    .string()
+    .trim()
+    .refine(
+      (value) =>
+        /^((https?):\/\/(?=.*\.[a-z0-9]{2,})[^\s$.?#].[^\s]|([\d\s+\-_/()[\]*#.,]|ext|x){7,}|[0-9\s+-_\\/()[\]*#.]|[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})*$/i.test(
+          value
+        ),
+      {
+        message: 'Invalid contact method',
+      }
+    )
+)
+
 const stringToArrayFactory = (delimiter: RegExp | string = ',') => {
   return <T>(input: T) =>
     typeof input !== 'string'
@@ -34,6 +61,11 @@ const stringToArrayFactory = (delimiter: RegExp | string = ',') => {
           .filter((item) => item !== '')
 }
 
+export const stringListOfSlugsSchemaRequired = z.preprocess(
+  stringToArrayFactory(/[\s,\n]+/),
+  z.array(z.string().regex(/^[a-z0-9-_A-Z]+$/)).min(1)
+)
+
 export const stringListOfUrlsSchema = z.preprocess(
   stringToArrayFactory(/[\s,\n]+/),
   z.array(zodUrlOptionalProtocol).default([])
@@ -44,6 +76,11 @@ export const stringListOfUrlsSchemaRequired = z.preprocess(
   z.array(zodUrlOptionalProtocol).min(1)
 )
 
+export const stringListOfContactMethodsSchema = z.preprocess(
+  stringToArrayFactory(/[\s,\n]+/),
+  z.array(zodContactMethod).default([])
+)
+
 export const MAX_IMAGE_SIZE = 5 * 1024 * 1024 // 5MB
 
 export const ACCEPTED_IMAGE_TYPES = [

web/src/pages/about.mdx

@@ -71,10 +71,13 @@ All new listings begin as **unlisted** — they're only accessible via direct li
 
 To list a new service, it must fulfill these requirements:
 
+- Offer a service.
 - Publicly available website explaining what the service is about
 - Terms of service or FAQ document
 
-For example, just a Telegram link is not a valid service.
+For examples:
+
+- Just a Telegram link or a criptocurrency itself is not a valid service.
 
 ### Suggestion Review Process
 
@@ -145,7 +148,7 @@ The privacy score measures how well a service protects user privacy, using a tra
 3. **Onion URL:** **+5 points** if the service offers at least one Onion (Tor) URL.
 4. **I2P URL:** **+5 points** if the service offers at least one I2P URL.
 5. **Monero Acceptance:** **+5 points** if the service accepts Monero as a payment method.
-6. **Privacy Attributes:** The sum of all privacy points from attributes categorized as 'PRIVACY' is added to the score.
+6. **Privacy Attributes:** The sum of all privacy points from attributes categorized as 'PRIVACY' is added to the score. [See all attributes](/attributes).
 7. **Final Score Range:** The final score is always kept between 0 and 100.
 
 #### Trust Score
@@ -158,7 +161,7 @@ The trust score represents how reliable and trustworthy a service is, based on o
    - **Approved:** +5 points
    - **Community Contributed:** 0 points
    - **Verification Failed (SCAM):** -50 points
-3. **Trust Attributes:** The total trust points from all attributes categorized as 'TRUST' are added to the score.
+3. **Trust Attributes:** The total trust points from all attributes categorized as 'TRUST' are added to the score. [See all attributes](/attributes).
 4. **Recently Listed Penalty & Flag:** If a service was listed within the last 15 days and its status is `APPROVED`, a penalty of -10 points is applied to the trust score, and the service is flagged as recently listed.
 5. **Final Score Range:** The final score is always kept between 0 and 100.
 
@@ -199,6 +202,12 @@ Some reviews may be spam or fake. Read comments carefully and **always do your o
 
 To **see comments waiting for moderation**, toggle the switch in the comments section. These comments show up with a yellow background and a "pending" label.
 
+## API
+
+You can access basic service data via our public API.
+
+See the [API page](/docs/api) for more details.
+
 ## Support
 
 If you like this project, you can **support** it through these methods:

web/src/pages/account/edit.astro

@@ -53,7 +53,7 @@ const inputErrors = isInputError(result?.error) ? result.error.fields : {}
         disabled: !user.karmaUnlocks.displayName,
       }}
       description={!user.karmaUnlocks.displayName
-        ? `${makeKarmaUnlockMessage(karmaUnlocksById.displayName)} [Learn more](/karma)`
+        ? `${makeKarmaUnlockMessage(karmaUnlocksById.displayName)} [Learn more](/docs/karma)`
         : undefined}
     />
 
@@ -68,7 +68,7 @@ const inputErrors = isInputError(result?.error) ? result.error.fields : {}
         disabled: !user.karmaUnlocks.websiteLink,
       }}
       description={!user.karmaUnlocks.websiteLink
-        ? `${makeKarmaUnlockMessage(karmaUnlocksById.websiteLink)} [Learn more](/karma)`
+        ? `${makeKarmaUnlockMessage(karmaUnlocksById.websiteLink)} [Learn more](/docs/karma)`
         : undefined}
     />
 
@@ -80,7 +80,7 @@ const inputErrors = isInputError(result?.error) ? result.error.fields : {}
       square
       disabled={!user.karmaUnlocks.profilePicture}
       description={!user.karmaUnlocks.profilePicture
-        ? `${makeKarmaUnlockMessage(karmaUnlocksById.profilePicture)} [Learn more](/karma)`
+        ? `${makeKarmaUnlockMessage(karmaUnlocksById.profilePicture)} [Learn more](/docs/karma)`
         : undefined}
       removeCheckbox={user.picture
         ? {

web/src/pages/account/index.astro

@@ -529,8 +529,9 @@ if (!user) return Astro.rewrite('/404')
 
       <div class="border-night-500 bg-night-800/70 mb-4 rounded-md border px-4 py-3">
         <p class="text-day-300">
-          Earn karma to unlock features and privileges. <a href="/karma" class="text-day-200 hover:underline"
-            >Learn about karma</a
+          Earn karma to unlock features and privileges. <a
+            href="/docs/karma"
+            class="text-day-200 hover:underline">Learn about karma</a
           >
         </p>
       </div>

web/src/pages/admin/announcements/index.astro

@@ -271,6 +271,7 @@ if (toggleResult?.error) {
               label: type.label,
               value: type.value,
               icon: type.icon,
+              noTransitionPersist: false,
             }))}
             cardSize="sm"
             required
@@ -305,8 +306,8 @@ if (toggleResult?.error) {
             label="Status"
             error={createInputErrors.isActive}
             options={[
-              { label: 'Active', value: 'true' },
-              { label: 'Inactive', value: 'false' },
+              { label: 'Active', value: 'true', noTransitionPersist: true },
+              { label: 'Inactive', value: 'false', noTransitionPersist: true },
             ]}
             selectedValue={newAnnouncement.isActive ? 'true' : 'false'}
             cardSize="sm"
@@ -627,6 +628,7 @@ if (toggleResult?.error) {
                                 label: type.label,
                                 value: type.value,
                                 icon: type.icon,
+                                noTransitionPersist: true,
                               }))}
                               cardSize="sm"
                               required
@@ -659,8 +661,8 @@ if (toggleResult?.error) {
                               name="isActive"
                               label="Status"
                               options={[
-                                { label: 'Active', value: 'true' },
-                                { label: 'Inactive', value: 'false' },
+                                { label: 'Active', value: 'true', noTransitionPersist: true },
+                                { label: 'Inactive', value: 'false', noTransitionPersist: true },
                               ]}
                               selectedValue={announcement.isActive ? 'true' : 'false'}
                               cardSize="sm"

web/src/pages/admin/index.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components'
-import { DATABASE_UI_URL } from 'astro:env/server'
+import { DATABASE_UI_URL, LOGS_UI_URL } from 'astro:env/server'
 
 import BaseLayout from '../../layouts/BaseLayout.astro'
 import { cn } from '../../lib/cn'
@@ -65,6 +65,14 @@ const adminLinks: AdminLink[] = [
       base: 'text-pink-300',
     },
   },
+  {
+    icon: 'ri:notification-3-line',
+    title: 'Notifications',
+    href: '/admin/notifications',
+    classNames: {
+      base: 'text-indigo-300',
+    },
+  },
   {
     icon: 'ri:rocket-2-line',
     title: 'Releases',
@@ -81,6 +89,18 @@ const adminLinks: AdminLink[] = [
       base: 'text-gray-300',
     },
   },
+  ...(LOGS_UI_URL
+    ? [
+        {
+          icon: 'ri:menu-search-line',
+          title: 'Logs',
+          href: LOGS_UI_URL,
+          classNames: {
+            base: 'text-cyan-300',
+          },
+        },
+      ]
+    : []),
 ]
 ---
 
@@ -93,25 +113,27 @@ const adminLinks: AdminLink[] = [
   <nav>
     <ol class="grid grid-cols-[repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))] gap-4">
       {
-        adminLinks.map((link) => (
-          <li
-            class={cn(
-              'group ease-out-back transition-transform duration-250 hover:-translate-y-0.5 hover:scale-105',
-              link.classNames.base
-            )}
-          >
-            <a
-              href={link.href}
-              class="flex min-h-24 flex-col items-center justify-around rounded-lg border border-current/4 bg-current/3 py-3 text-center transition-all duration-250 group-hover:border-current/10 group-hover:bg-current/10 group-hover:shadow-xl"
+        adminLinks
+          .filter((link) => link.href)
+          .map((link) => (
+            <li
+              class={cn(
+                'group ease-out-back transition-transform duration-250 hover:-translate-y-0.5 hover:scale-105',
+                link.classNames.base
+              )}
             >
-              <Icon
-                name={link.icon}
-                class="size-8 text-current opacity-50 transition-opacity duration-250 group-hover:opacity-100"
-              />
-              <span class="font-title text-xl leading-none font-semibold text-current">{link.title}</span>
-            </a>
-          </li>
-        ))
+              <a
+                href={link.href}
+                class="flex min-h-24 flex-col items-center justify-around rounded-lg border border-current/4 bg-current/3 py-3 text-center transition-all duration-250 group-hover:border-current/10 group-hover:bg-current/10 group-hover:shadow-xl"
+              >
+                <Icon
+                  name={link.icon}
+                  class="size-8 text-current opacity-50 transition-opacity duration-250 group-hover:opacity-100"
+                />
+                <span class="font-title text-xl leading-none font-semibold text-current">{link.title}</span>
+              </a>
+            </li>
+          ))
       }
     </ol>
   </nav>

web/src/pages/admin/notifications.astro

@@ -0,0 +1,125 @@
+---
+import { Icon } from 'astro-icon/components'
+import { actions, isInputError } from 'astro:actions'
+import { groupBy, round, uniq } from 'lodash-es'
+
+import Button from '../../components/Button.astro'
+import InputTextArea from '../../components/InputTextArea.astro'
+import MiniLayout from '../../layouts/MiniLayout.astro'
+import { cn } from '../../lib/cn'
+import { prisma } from '../../lib/prisma'
+
+// Check if user is admin
+if (!Astro.locals.user?.admin) {
+  return Astro.redirect('/access-denied')
+}
+
+const testResult = Astro.getActionResult(actions.admin.notification.test)
+const testInputErrors = isInputError(testResult?.error) ? testResult.error.fields : {}
+
+Astro.locals.banners.addIfSuccess(testResult, (data) => data.message)
+
+const subscriptions = await Astro.locals.banners.try(
+  'Error while fetching subscriptions by user',
+  () =>
+    prisma.pushSubscription.findMany({
+      select: {
+        id: true,
+        user: {
+          select: {
+            id: true,
+            name: true,
+          },
+        },
+      },
+    }),
+  [] as []
+)
+const totalSubscriptions = subscriptions.length
+const subscriptionsByUser = groupBy(subscriptions, 'user.id')
+
+const totalUsers = Object.keys(subscriptionsByUser).length
+
+const adminUsers = await prisma.user.findMany({
+  where: {
+    admin: true,
+  },
+  select: {
+    name: true,
+  },
+})
+
+const stats = [
+  {
+    icon: 'ri:notification-4-line',
+    iconClass: 'text-blue-400',
+    title: 'Total Subscriptions',
+    value: totalSubscriptions.toLocaleString(),
+  },
+  {
+    icon: 'ri:user-3-line',
+    iconClass: 'text-green-400',
+    title: 'Subscribed Users',
+    value: totalUsers.toLocaleString(),
+  },
+  {
+    icon: 'ri:smartphone-line',
+    iconClass: 'text-purple-400',
+    title: 'Avg Devices/User',
+    value: (totalUsers > 0 ? round(totalSubscriptions / totalUsers, 1) : 0).toLocaleString(),
+  },
+] satisfies {
+  icon: string
+  iconClass: string
+  title: string
+  value: string
+}[]
+---
+
+<MiniLayout
+  pageTitle="Push notifications"
+  description="Send test notifications"
+  layoutHeader={{
+    icon: 'ri:notification-3-line',
+    title: 'Push notifications',
+    subtitle: 'Send test notifications',
+  }}
+>
+  <div class="mb-6 grid gap-4 sm:grid-cols-3">
+    {
+      stats.map((stat) => (
+        <div class="flex flex-col items-center gap-2 text-center">
+          <div class="flex items-end gap-1">
+            <span class="text-5xl leading-[0.8] font-bold text-white">{stat.value}</span>
+            <Icon name={stat.icon} class={cn('size-5 shrink-0', stat.iconClass)} />
+          </div>
+          <span class="text-day-200 flex grow flex-col justify-center text-sm leading-none font-medium text-balance">
+            {stat.title}
+          </span>
+        </div>
+      ))
+    }
+  </div>
+
+  <h2 class="text-center text-lg font-semibold text-white">Send Test Notification</h2>
+
+  <form method="POST" action={actions.admin.notification.test} class="space-y-4">
+    <InputTextArea
+      label="Users"
+      name="userNames"
+      inputProps={{
+        placeholder: 'john-doe, jane-doe',
+        class: 'leading-tight min-h-24',
+      }}
+      value={uniq([Astro.locals.user, ...adminUsers].map((user) => user.name)).join('\n')}
+      description={[
+        '- Comma-separated list of user names.',
+        '- Minimum 1 user name.',
+        '- By default, all admin users are selected.',
+      ].join('\n')}
+      error={testInputErrors.userNames}
+    />
+
+    <Button type="submit" label="Send" icon="ri:send-plane-line" color="danger" class="w-full" />
+  </form>
+</MiniLayout>

web/src/pages/admin/releases.astro

@@ -1,8 +1,8 @@
 ---
 import { RELEASE_DATE, RELEASE_NUMBER } from 'astro:env/server'
 
-import TimeFormatted from '../../components/TimeFormatted.astro'
 import MiniLayout from '../../layouts/MiniLayout.astro'
+import { timeAgo } from '../../lib/timeAgo'
 
 const releaseDate =
   RELEASE_DATE && !isNaN(new Date(RELEASE_DATE).getTime()) ? new Date(RELEASE_DATE) : undefined
@@ -37,7 +37,7 @@ const releaseDate =
   {
     !!releaseDate && (
       <p class="text-day-500 mt-2">
-        (<TimeFormatted date={releaseDate} hourPrecision daysUntilDate={Infinity} />)
+        (<time datetime={releaseDate.toISOString()}>{timeAgo.format(releaseDate, 'round')}</time>)
       </p>
     )
   }

web/src/pages/admin/service-suggestions/[id].astro

@@ -1,26 +1,37 @@
 ---
 import { Icon } from 'astro-icon/components'
-import { actions } from 'astro:actions'
+import { actions, isInputError } from 'astro:actions'
 
+import BadgeSmall from '../../../components/BadgeSmall.astro'
 import Button from '../../../components/Button.astro'
 import Chat from '../../../components/Chat.astro'
+import InputSelect from '../../../components/InputSelect.astro'
 import ServiceCard from '../../../components/ServiceCard.astro'
 import UserBadge from '../../../components/UserBadge.astro'
 import {
   getServiceSuggestionStatusInfo,
   serviceSuggestionStatuses,
 } from '../../../constants/serviceSuggestionStatus'
+import { getServiceSuggestionTypeInfo } from '../../../constants/serviceSuggestionType'
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { cn } from '../../../lib/cn'
 import { parseIntWithFallback } from '../../../lib/numbers'
 import { prisma } from '../../../lib/prisma'
 import { makeLoginUrl } from '../../../lib/redirectUrls'
+import { formatDateShort } from '../../../lib/timeAgo'
+import BadgeStandard from '../../../components/BadgeStandard.astro'
 
 const user = Astro.locals.user
 if (!user?.admin) {
   return Astro.redirect(makeLoginUrl(Astro.url, { message: 'Admin access required' }))
 }
 
+const serviceSuggestionUpdateResult = Astro.getActionResult(actions.admin.serviceSuggestions.update)
+Astro.locals.banners.addIfSuccess(serviceSuggestionUpdateResult, 'Service suggestion updated successfully')
+const serviceSuggestionUpdateInputErrors = isInputError(serviceSuggestionUpdateResult?.error)
+  ? serviceSuggestionUpdateResult.error.fields
+  : {}
+
 const { id: serviceSuggestionIdRaw } = Astro.params
 const serviceSuggestionId = parseIntWithFallback(serviceSuggestionIdRaw)
 if (!serviceSuggestionId) {
@@ -57,6 +68,7 @@ const serviceSuggestion = await Astro.locals.banners.try('Error fetching service
           imageUrl: true,
           verificationStatus: true,
           acceptedCurrencies: true,
+          serviceVisibility: true,
           categories: {
             select: {
               name: true,
@@ -92,117 +104,93 @@ if (!serviceSuggestion) {
 }
 
 const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
+const typeInfo = getServiceSuggestionTypeInfo(serviceSuggestion.type)
 ---
 
 <BaseLayout
   pageTitle={`${serviceSuggestion.service.name} | Admin Service Suggestion`}
-  htmx
+  description="View and manage service suggestion"
   widthClassName="max-w-screen-md"
+  htmx
 >
-  <div class="mb-4 flex items-center gap-4">
-    <Button
-      as="a"
-      href="/admin/service-suggestions"
-      color="success"
-      variant="faded"
-      size="md"
-      icon="ri:arrow-left-s-line"
-      label="Back"
-    />
+  <h1 class="font-title mt-12 mb-6 text-center text-3xl font-bold">Service suggestion</h1>
 
-    <h1 class="font-title text-xl text-green-500">Service Suggestion</h1>
-  </div>
+  <ServiceCard service={serviceSuggestion.service} class="mb-6" />
 
-  <div class="mb-6 grid grid-cols-1 gap-6 md:grid-cols-2">
-    <div>
-      <ServiceCard service={serviceSuggestion.service} class="mx-auto max-w-full" />
-    </div>
-
-    <div
-      class="rounded-lg border border-green-500/30 bg-black/40 p-4 shadow-[0_0_15px_rgba(34,197,94,0.2)] backdrop-blur-xs"
-    >
-      <h2 class="font-title mb-3 text-lg text-green-500">Suggestion Details</h2>
-
-      <div class="mb-3 grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-sm">
-        <span class="font-title text-gray-400">Status:</span>
-        <span
-          class={cn(
-            'inline-flex w-fit items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
-            statusInfo.iconClass
-          )}
-        >
-          <Icon name={statusInfo.icon} class="mr-1 size-3" />
-          {statusInfo.label}
-        </span>
-
-        <span class="font-title text-gray-400">Submitted by:</span>
-        <UserBadge class="text-gray-300" user={serviceSuggestion.user} size="md" />
-
-        <span class="font-title text-gray-400">Submitted at:</span>
-        <span class="text-gray-300">{serviceSuggestion.createdAt.toLocaleString()}</span>
-
-        <span class="font-title text-gray-400">Service page:</span>
-        <a href={`/service/${serviceSuggestion.service.slug}`} class="text-green-400 hover:text-green-500">
-          View Service <Icon
-            name="ri:external-link-line"
-            class="ml-0.5 inline-block size-3 align-[-0.05em]"
-          />
-        </a>
+  <section class="border-night-400 bg-night-600 rounded-lg border p-6">
+    <div class="text-day-200 xs:grid-cols-2 grid gap-2 text-sm sm:grid-cols-3">
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="font-title font-bold">Status:</span>
+        <BadgeSmall color={statusInfo.color} text={statusInfo.label} icon={statusInfo.icon} />
       </div>
 
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="font-title font-bold">Type:</span>
+        <BadgeSmall color={typeInfo.color} text={typeInfo.label} icon={typeInfo.icon} />
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="font-title font-bold">Author:</span>
+        <UserBadge class="text-gray-300" user={serviceSuggestion.user} size="md" />
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="font-title font-bold">Submitted:</span>
+        <span>
+          {
+            formatDateShort(serviceSuggestion.createdAt, {
+              prefix: false,
+              hourPrecision: true,
+              caseType: 'sentence',
+            })
+          }
+        </span>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="font-title font-bold">Service:</span>
+        <a href={`/service/${serviceSuggestion.service.slug}`} class="hover:text-day-200 text-green-400">
+          Open <Icon name="ri:external-link-line" class="ml-0.5 inline-block size-3 align-[-0.05em]" />
+        </a>
+      </div>
+    </div>
+
+    <div class="bg-night-700 -mx-2 mt-4 rounded-lg p-2 text-sm">
+      <span class="font-title block font-bold">Notes for moderators:</span>
       {
-        serviceSuggestion.notes && (
-          <div class="mb-4">
-            <h3 class="font-title mb-1 text-sm text-gray-400">Notes from user:</h3>
-            <div
-              class="rounded-md border border-gray-700 bg-black/50 p-3 text-sm wrap-anywhere whitespace-pre-wrap text-gray-300"
-              set:text={serviceSuggestion.notes}
-            />
-          </div>
+        serviceSuggestion.notes ? (
+          <div class="mt-1 text-sm wrap-anywhere whitespace-pre-wrap" set:text={serviceSuggestion.notes} />
+        ) : (
+          <div class="text-day-400 my-4 text-center text-sm italic">Empty</div>
         )
       }
     </div>
-  </div>
 
-  <div
-    class="rounded-lg border border-green-500/30 bg-black/40 p-6 shadow-[0_0_15px_rgba(34,197,94,0.2)] backdrop-blur-xs"
-  >
-    <div class="flex items-center justify-between">
-      <h2 class="font-title text-lg text-green-500">Messages</h2>
+    <form method="POST" action={actions.admin.serviceSuggestions.update} class="mt-6 flex items-end gap-2">
+      <input type="hidden" name="suggestionId" value={serviceSuggestion.id} />
+      <InputSelect
+        name="status"
+        label="Update status"
+        options={serviceSuggestionStatuses.map((status) => ({
+          label: status.label,
+          value: status.value,
+        }))}
+        selectProps={{ value: serviceSuggestion.status }}
+        class="flex-1"
+        error={serviceSuggestionUpdateInputErrors.status}
+      />
+      <Button as="button" type="submit" color="success" size="md" icon="ri:save-line" label="Update" />
+    </form>
+  </section>
 
-      <form method="POST" action={actions.admin.serviceSuggestions.update} class="flex gap-2">
-        <input type="hidden" name="suggestionId" value={serviceSuggestion.id} />
-        <select
-          name="status"
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-sm text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500 disabled:opacity-50"
-        >
-          {
-            serviceSuggestionStatuses.map((status) => (
-              <option value={status.value} selected={serviceSuggestion.status === status.value}>
-                {status.label}
-              </option>
-            ))
-          }
-        </select>
-        <Button
-          as="button"
-          type="submit"
-          color="success"
-          variant="faded"
-          size="md"
-          icon="ri:save-line"
-          label="Update"
-        />
-      </form>
-    </div>
-
-    <Chat
-      messages={serviceSuggestion.messages}
-      userId={user.id}
-      action={actions.admin.serviceSuggestions.message}
-      formData={{
-        suggestionId: serviceSuggestion.id,
-      }}
-    />
-  </div>
+  <Chat
+    messages={serviceSuggestion.messages}
+    title="Chat with moderators"
+    userId={user.id}
+    action={actions.admin.serviceSuggestions.message}
+    formData={{
+      suggestionId: serviceSuggestion.id,
+    }}
+    class="mt-12"
+  />
 </BaseLayout>

web/src/pages/admin/service-suggestions/index.astro

@@ -4,6 +4,7 @@ import { actions } from 'astro:actions'
 import { z } from 'astro:content'
 import { orderBy } from 'lodash-es'
 
+import BadgeSmall from '../../../components/BadgeSmall.astro'
 import Button from '../../../components/Button.astro'
 import SortArrowIcon from '../../../components/SortArrowIcon.astro'
 import TimeFormatted from '../../../components/TimeFormatted.astro'
@@ -12,59 +13,67 @@ import UserBadge from '../../../components/UserBadge.astro'
 import {
   getServiceSuggestionStatusInfo,
   serviceSuggestionStatuses,
+  serviceSuggestionStatusesZodEnumBySlug,
+  serviceSuggestionStatusSlugToId,
 } from '../../../constants/serviceSuggestionStatus'
+import {
+  getServiceSuggestionTypeInfo,
+  serviceSuggestionTypes,
+  serviceSuggestionTypeSlugToId,
+  serviceSuggestionTypesZodEnumBySlug,
+} from '../../../constants/serviceSuggestionType'
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { zodParseQueryParamsStoringErrors } from '../../../lib/parseUrlFilters'
 import { prisma } from '../../../lib/prisma'
 import { makeLoginUrl } from '../../../lib/redirectUrls'
 
-import type { Prisma, ServiceSuggestionStatus } from '@prisma/client'
+import type { Prisma } from '@prisma/client'
 
 const user = Astro.locals.user
 if (!user?.admin) {
   return Astro.redirect(makeLoginUrl(Astro.url, { message: 'Admin access required' }))
 }
 
-const search = Astro.url.searchParams.get('search') ?? ''
-const statusEnumValues = serviceSuggestionStatuses.map((s) => s.value) as [string, ...string[]]
-const statusParam = Astro.url.searchParams.get('status')
-const statusFilter = z
-  .enum(statusEnumValues)
-  .nullable()
-  .parse(statusParam === '' ? null : statusParam) as ServiceSuggestionStatus | null
-
 const { data: filters } = zodParseQueryParamsStoringErrors(
   {
-    'sort-by': z.enum(['service', 'status', 'user', 'createdAt', 'messageCount']).default('createdAt'),
+    search: z.string().optional(),
+    status: serviceSuggestionStatusesZodEnumBySlug
+      .transform((slug) => serviceSuggestionStatusSlugToId(slug))
+      .optional(),
+    type: serviceSuggestionTypesZodEnumBySlug
+      .transform((slug) => serviceSuggestionTypeSlugToId(slug))
+      .optional(),
+    'sort-by': z
+      .enum(['service', 'status', 'type', 'user', 'createdAt', 'messageCount'])
+      .default('createdAt'),
     'sort-order': z.enum(['asc', 'desc']).default('desc'),
   },
   Astro
 )
 
-const sortBy = filters['sort-by']
-const sortOrder = filters['sort-order']
-
 let prismaOrderBy: Prisma.ServiceSuggestionOrderByWithRelationInput = { createdAt: 'desc' }
-if (sortBy === 'createdAt') {
-  prismaOrderBy = { createdAt: sortOrder }
+if (filters['sort-by'] === 'createdAt') {
+  prismaOrderBy = { createdAt: filters['sort-order'] }
 }
 
 let suggestions = await prisma.serviceSuggestion.findMany({
   where: {
-    ...(search
+    ...(filters.search
       ? {
           OR: [
-            { service: { name: { contains: search, mode: 'insensitive' } } },
-            { user: { name: { contains: search, mode: 'insensitive' } } },
-            { notes: { contains: search, mode: 'insensitive' } },
+            { service: { name: { contains: filters.search, mode: 'insensitive' } } },
+            { user: { name: { contains: filters.search, mode: 'insensitive' } } },
+            { notes: { contains: filters.search, mode: 'insensitive' } },
           ],
         }
       : {}),
-    status: statusFilter ?? undefined,
+    status: filters.status,
+    type: filters.type,
   },
   orderBy: prismaOrderBy,
   select: {
     id: true,
+    type: true,
     status: true,
     notes: true,
     createdAt: true,
@@ -119,18 +128,33 @@ let suggestions = await prisma.serviceSuggestion.findMany({
 let suggestionsWithDetails = suggestions.map((s) => ({
   ...s,
   statusInfo: getServiceSuggestionStatusInfo(s.status),
+  typeInfo: getServiceSuggestionTypeInfo(s.type),
   messageCount: s._count.messages,
   lastMessage: s.messages[0],
 }))
 
-if (sortBy === 'service') {
-  suggestionsWithDetails = orderBy(suggestionsWithDetails, [(s) => s.service.name.toLowerCase()], [sortOrder])
-} else if (sortBy === 'status') {
-  suggestionsWithDetails = orderBy(suggestionsWithDetails, [(s) => s.statusInfo.label], [sortOrder])
-} else if (sortBy === 'user') {
-  suggestionsWithDetails = orderBy(suggestionsWithDetails, [(s) => s.user.name.toLowerCase()], [sortOrder])
-} else if (sortBy === 'messageCount') {
-  suggestionsWithDetails = orderBy(suggestionsWithDetails, ['messageCount'], [sortOrder])
+if (filters['sort-by'] === 'service') {
+  suggestionsWithDetails = orderBy(
+    suggestionsWithDetails,
+    [(s) => s.service.name.toLowerCase()],
+    [filters['sort-order']]
+  )
+} else if (filters['sort-by'] === 'status') {
+  suggestionsWithDetails = orderBy(
+    suggestionsWithDetails,
+    [(s) => s.statusInfo.label],
+    [filters['sort-order']]
+  )
+} else if (filters['sort-by'] === 'type') {
+  suggestionsWithDetails = orderBy(suggestionsWithDetails, [(s) => s.typeInfo.label], [filters['sort-order']])
+} else if (filters['sort-by'] === 'user') {
+  suggestionsWithDetails = orderBy(
+    suggestionsWithDetails,
+    [(s) => s.user.name.toLowerCase()],
+    [filters['sort-order']]
+  )
+} else if (filters['sort-by'] === 'messageCount') {
+  suggestionsWithDetails = orderBy(suggestionsWithDetails, ['messageCount'], [filters['sort-order']])
 }
 
 const suggestionCount = suggestionsWithDetails.length
@@ -162,7 +186,7 @@ const makeSortUrl = (slug: string) => {
           type="text"
           name="search"
           id="search"
-          value={search}
+          value={filters.search}
           placeholder="Search by service, user, notes..."
           class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 placeholder-zinc-500 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
         />
@@ -177,13 +201,30 @@ const makeSortUrl = (slug: string) => {
           <option value="">All Statuses</option>
           {
             serviceSuggestionStatuses.map((status) => (
-              <option value={status.value} selected={statusFilter === status.value}>
+              <option value={status.slug} selected={filters.status === status.value}>
                 {status.label}
               </option>
             ))
           }
         </select>
       </div>
+      <div>
+        <label for="type-filter" class="block text-xs font-medium text-zinc-400">Type</label>
+        <select
+          name="type"
+          id="type-filter"
+          class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
+        >
+          <option value="">All Types</option>
+          {
+            serviceSuggestionTypes.map((type) => (
+              <option value={type.slug} selected={filters.type === type.value}>
+                {type.label}
+              </option>
+            ))
+          }
+        </select>
+      </div>
       <div class="flex items-end">
         <Button
           as="button"
@@ -212,7 +253,7 @@ const makeSortUrl = (slug: string) => {
           <thead class="bg-zinc-900/30">
             <tr>
               <th
-                class="w-[25%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
+                class="w-[20%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
               >
                 <a href={makeSortUrl('service')} class="flex items-center hover:text-zinc-200">
                   Service <SortArrowIcon
@@ -222,7 +263,7 @@ const makeSortUrl = (slug: string) => {
                 </a>
               </th>
               <th
-                class="w-[15%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
+                class="w-[12%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
               >
                 <a href={makeSortUrl('user')} class="flex items-center hover:text-zinc-200">
                   User <SortArrowIcon
@@ -232,7 +273,17 @@ const makeSortUrl = (slug: string) => {
                 </a>
               </th>
               <th
-                class="w-[15%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
+                class="w-[10%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
+              >
+                <a href={makeSortUrl('type')} class="flex items-center hover:text-zinc-200">
+                  Type <SortArrowIcon
+                    active={filters['sort-by'] === 'type'}
+                    sortOrder={filters['sort-order']}
+                  />
+                </a>
+              </th>
+              <th
+                class="w-[13%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
               >
                 <a href={makeSortUrl('status')} class="flex items-center hover:text-zinc-200">
                   Status <SortArrowIcon
@@ -295,6 +346,13 @@ const makeSortUrl = (slug: string) => {
                   <td class="px-4 py-3">
                     <UserBadge user={suggestion.user} size="md" />
                   </td>
+                  <td class="px-4 py-3">
+                    <BadgeSmall
+                      color={suggestion.typeInfo.color}
+                      text={suggestion.typeInfo.label}
+                      icon={suggestion.typeInfo.icon}
+                    />
+                  </td>
                   <td class="px-4 py-3">
                     <form method="POST" action={actions.admin.serviceSuggestions.update}>
                       <input type="hidden" name="suggestionId" value={suggestion.id} />

web/src/pages/admin/services/[slug]/edit.astro

@@ -2,6 +2,7 @@
 import { Icon } from 'astro-icon/components'
 import { Markdown } from 'astro-remote'
 import { actions, isInputError } from 'astro:actions'
+import { Code } from 'astro:components'
 import { orderBy } from 'lodash-es'
 
 import BadgeSmall from '../../../../components/BadgeSmall.astro'
@@ -22,9 +23,10 @@ import Tooltip from '../../../../components/Tooltip.astro'
 import UserBadge from '../../../../components/UserBadge.astro'
 import { getAttributeCategoryInfo } from '../../../../constants/attributeCategories'
 import { getAttributeTypeInfo } from '../../../../constants/attributeTypes'
-import { formatContactMethod } from '../../../../constants/contactMethods'
+import { contactMethodUrlTypes, formatContactMethod } from '../../../../constants/contactMethods'
 import { currencies } from '../../../../constants/currencies'
 import { eventTypes, getEventTypeInfo } from '../../../../constants/eventTypes'
+import { kycLevelClarifications } from '../../../../constants/kycLevelClarifications'
 import { kycLevels } from '../../../../constants/kycLevels'
 import { serviceVisibilities } from '../../../../constants/serviceVisibility'
 import { verificationStatuses } from '../../../../constants/verificationStatus'
@@ -33,6 +35,9 @@ import {
   verificationStepStatuses,
 } from '../../../../constants/verificationStepStatus'
 import BaseLayout from '../../../../layouts/BaseLayout.astro'
+import { DEPLOYMENT_MODE } from '../../../../lib/envVariables'
+import { listFiles } from '../../../../lib/fileStorage'
+import { makeAdminApiCallInfo } from '../../../../lib/makeAdminApiCallInfo'
 import { pluralize } from '../../../../lib/pluralize'
 import { prisma } from '../../../../lib/prisma'
 
@@ -83,9 +88,36 @@ const internalNoteInputErrors = isInputError(internalNoteCreateResult?.error)
   ? internalNoteCreateResult.error.fields
   : {}
 
+const contactMethodUpdateResult = Astro.getActionResult(actions.admin.service.contactMethod.update)
+Astro.locals.banners.addIfSuccess(contactMethodUpdateResult, 'Contact method updated successfully')
+const contactMethodUpdateInputErrors = isInputError(contactMethodUpdateResult?.error)
+  ? contactMethodUpdateResult.error.fields
+  : {}
+
+const contactMethodAddResult = Astro.getActionResult(actions.admin.service.contactMethod.add)
+Astro.locals.banners.addIfSuccess(contactMethodAddResult, 'Contact method added successfully')
+const contactMethodAddInputErrors = isInputError(contactMethodAddResult?.error)
+  ? contactMethodAddResult.error.fields
+  : {}
+
 const internalNoteDeleteResult = Astro.getActionResult(actions.admin.service.internalNote.delete)
 Astro.locals.banners.addIfSuccess(internalNoteDeleteResult, 'Internal note deleted successfully')
 
+const evidenceImageAddResult = Astro.getActionResult(actions.admin.service.evidenceImage.add)
+if (evidenceImageAddResult?.data?.imageUrl) {
+  Astro.locals.banners.add({
+    uiMessage: 'Evidence image added successfully',
+    type: 'success',
+    origin: 'action',
+  })
+}
+const evidenceImageAddInputErrors = isInputError(evidenceImageAddResult?.error)
+  ? evidenceImageAddResult.error.fields
+  : {}
+
+const evidenceImageDeleteResult = Astro.getActionResult(actions.admin.service.evidenceImage.delete)
+Astro.locals.banners.addIfSuccess(evidenceImageDeleteResult, 'Evidence image deleted successfully')
+
 const [service, categories, attributes] = await Astro.locals.banners.tryMany([
   [
     'Error fetching service',
@@ -180,7 +212,41 @@ const [service, categories, attributes] = await Astro.locals.banners.tryMany([
   ],
 ])
 
-if (!service) return Astro.rewrite('/404')
+if (!service) {
+  try {
+    const serviceWithOldSlug = await prisma.service.findFirst({
+      where: { previousSlugs: { has: slug } },
+      select: { slug: true },
+    })
+    if (serviceWithOldSlug) {
+      return Astro.redirect(`/admin/services/${serviceWithOldSlug.slug}/edit`, 301)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+
+  return Astro.rewrite('/404')
+}
+
+const evidenceImageUrls = await Astro.locals.banners.try(
+  'Error listing evidence files',
+  () => listFiles(`evidence/${service.slug}`),
+  [] as string[]
+)
+
+const apiCalls = await Astro.locals.banners.try(
+  'Error fetching api calls',
+  () =>
+    Promise.all([
+      makeAdminApiCallInfo({
+        method: 'QUERY',
+        path: '/service/get',
+        input: { slug: service.slug },
+        baseUrl: Astro.url,
+      }),
+    ]),
+  []
+)
 ---
 
 <BaseLayout pageTitle={`Edit Service: ${service.name}`}>
@@ -233,16 +299,32 @@ if (!service) return Astro.rewrite('/404')
         enctype="multipart/form-data"
       >
         <input type="hidden" name="id" value={service.id} />
-        <InputText
-          label="Name"
-          name="name"
-          inputProps={{
-            required: true,
-            value: service.name,
-          }}
-          error={serviceInputErrors.name}
-        />
 
+        <div class="grid grid-cols-1 gap-x-4 gap-y-6 md:grid-cols-2">
+          <InputText
+            label="Name"
+            name="name"
+            inputProps={{
+              required: true,
+              value: service.name,
+            }}
+            error={serviceInputErrors.name}
+          />
+
+          <InputText
+            label="Slug"
+            description={`Auto-generated if empty. ${
+              service.previousSlugs.length > 0 ? `Old slugs: ${service.previousSlugs.join(', ')}` : ''
+            }`}
+            name="slug"
+            inputProps={{
+              value: service.slug,
+              class: 'font-title',
+            }}
+            error={serviceInputErrors.slug}
+            class="font-title"
+          />
+        </div>
         <InputTextArea
           label="Description"
           name="description"
@@ -254,76 +336,44 @@ if (!service) return Astro.rewrite('/404')
           error={serviceInputErrors.description}
         />
 
-        <InputText
-          label="Slug"
-          description="Auto-generated if empty"
-          name="slug"
-          inputProps={{
-            value: service.slug,
-            class: 'font-title',
-          }}
-          error={serviceInputErrors.slug}
-          class="font-title"
-        />
-
-        <div class="grid grid-cols-1 gap-x-4 gap-y-6 md:grid-cols-2">
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
           <InputTextArea
             label="Service URLs"
-            description="One per line"
-            name="serviceUrls"
+            description="One per line. Accepts **Web**, **Onion**, and **I2P** URLs."
+            name="allServiceUrls"
             inputProps={{
-              rows: 3,
-              placeholder: 'https://example1.com\nhttps://example2.com',
+              placeholder: 'https://example1.com\nhttps://example2.onion\nhttps://example3.b32.i2p',
+              class: 'grow min-h-24',
+              required: true,
             }}
-            value={service.serviceUrls.join('\n')}
-            error={serviceInputErrors.serviceUrls}
+            class="row-span-2 flex flex-col self-stretch"
+            value={[...service.serviceUrls, ...service.onionUrls, ...service.i2pUrls].join('\n\n')}
+            error={serviceInputErrors.allServiceUrls}
           />
           <InputTextArea
             label="ToS URLs"
             description="One per line"
             name="tosUrls"
             inputProps={{
-              rows: 3,
               placeholder: 'https://example1.com/tos\nhttps://example2.com/tos',
               required: true,
             }}
             value={service.tosUrls.join('\n')}
             error={serviceInputErrors.tosUrls}
           />
-          <InputTextArea
-            label="Onion URLs"
-            description="One per line"
-            name="onionUrls"
+          <InputText
+            label="Referral link path"
+            name="referral"
             inputProps={{
-              rows: 3,
-              placeholder: 'http://example1.onion\nhttp://example2.onion',
+              value: service.referral,
+              placeholder: 'e.g. ?ref=123 or /ref/123',
             }}
-            value={service.onionUrls.join('\n')}
-            error={serviceInputErrors.onionUrls}
-          />
-          <InputTextArea
-            label="I2P URLs"
-            description="One per line"
-            name="i2pUrls"
-            inputProps={{
-              rows: 3,
-              placeholder: 'http://example1.b32.i2p\nhttp://example2.b32.i2p',
-            }}
-            value={service.i2pUrls.join('\n')}
+            error={serviceInputErrors.referral}
+            class="self-end"
+            description="Will be appended to the service URL"
           />
         </div>
 
-        <InputText
-          label="Referral link path"
-          name="referral"
-          inputProps={{
-            value: service.referral,
-            placeholder: 'e.g. ?ref=123 or /ref/123',
-          }}
-          error={serviceInputErrors.referral}
-          description="Will be appended to the service URL"
-        />
-
         <div class="flex items-center justify-between gap-2">
           <InputImageFile
             label="Image"
@@ -391,6 +441,7 @@ if (!service) return Astro.rewrite('/404')
             value: kycLevel.id.toString(),
             icon: kycLevel.icon,
             description: kycLevel.description,
+            noTransitionPersist: true,
           }))}
           selectedValue={service.kycLevel.toString()}
           iconSize="md"
@@ -399,6 +450,22 @@ if (!service) return Astro.rewrite('/404')
           class="[&>div]:grid-cols-2 [&>div]:[--card-min-size:16rem]"
         />
 
+        <InputCardGroup
+          name="kycLevelClarification"
+          label="KYC Level Clarification"
+          options={kycLevelClarifications.map((clarification) => ({
+            label: clarification.label,
+            value: clarification.value,
+            icon: clarification.icon,
+            description: clarification.description,
+            noTransitionPersist: true,
+          }))}
+          selectedValue={service.kycLevelClarification}
+          iconSize="sm"
+          cardSize="sm"
+          error={serviceInputErrors.kycLevelClarification}
+        />
+
         <InputCardGroup
           name="verificationStatus"
           label="Verification Status"
@@ -408,6 +475,7 @@ if (!service) return Astro.rewrite('/404')
             icon: status.icon,
             iconClass: status.classNames.icon,
             description: status.description,
+            noTransitionPersist: true,
           }))}
           selectedValue={service.verificationStatus}
           error={serviceInputErrors.verificationStatus}
@@ -423,6 +491,7 @@ if (!service) return Astro.rewrite('/404')
             label: currency.name,
             value: currency.id,
             icon: currency.icon,
+            noTransitionPersist: true,
           }))}
           selectedValue={service.acceptedCurrencies}
           error={serviceInputErrors.acceptedCurrencies}
@@ -463,6 +532,7 @@ if (!service) return Astro.rewrite('/404')
             icon: visibility.icon,
             iconClass: visibility.iconClass,
             description: visibility.description,
+            noTransitionPersist: true,
           }))}
           selectedValue={service.serviceVisibility}
           error={serviceInputErrors.serviceVisibility}
@@ -685,9 +755,14 @@ if (!service) return Astro.rewrite('/404')
                           label="Started At"
                           name="startedAt"
                           inputProps={{
-                            type: 'date',
+                            type: 'datetime-local',
                             required: true,
-                            value: new Date(event.startedAt).toISOString().split('T')[0],
+                            value: new Date(
+                              new Date(event.startedAt).getTime() -
+                                new Date(event.startedAt).getTimezoneOffset() * 60000
+                            )
+                              .toISOString()
+                              .slice(0, 16),
                           }}
                           error={eventUpdateInputErrors.startedAt}
                         />
@@ -696,7 +771,15 @@ if (!service) return Astro.rewrite('/404')
                           label="Ended At"
                           name="endedAt"
                           inputProps={{
-                            value: event.endedAt ? new Date(event.endedAt).toISOString().split('T')[0] : '',
+                            type: 'datetime-local',
+                            value: event.endedAt
+                              ? new Date(
+                                  new Date(event.endedAt).getTime() -
+                                    new Date(event.endedAt).getTimezoneOffset() * 60000
+                                )
+                                  .toISOString()
+                                  .slice(0, 16)
+                              : '',
                           }}
                           error={eventUpdateInputErrors.endedAt}
                           description="- Empty: Event is ongoing.\n- Filled: Event with specific end date.\n- Same as start date: One-time event."
@@ -756,9 +839,11 @@ if (!service) return Astro.rewrite('/404')
               label="Started At"
               name="startedAt"
               inputProps={{
-                type: 'date',
+                type: 'datetime-local',
                 required: true,
-                value: new Date().toISOString().split('T')[0],
+                value: new Date(Date.now() - new Date().getTimezoneOffset() * 60000)
+                  .toISOString()
+                  .slice(0, 16),
               }}
               error={eventInputErrors.startedAt}
             />
@@ -767,7 +852,10 @@ if (!service) return Astro.rewrite('/404')
               label="Ended At"
               name="endedAt"
               inputProps={{
-                value: new Date().toISOString().split('T')[0],
+                type: 'datetime-local',
+                value: new Date(Date.now() - new Date().getTimezoneOffset() * 60000)
+                  .toISOString()
+                  .slice(0, 16),
               }}
               error={eventInputErrors.endedAt}
               description="- Empty: Event is ongoing.\n- Filled: Event with specific end date.\n- Same as start date: One-time event."
@@ -1059,6 +1147,7 @@ if (!service) return Astro.rewrite('/404')
                           value: method.label,
                           placeholder: contactMethodInfo.formattedValue,
                         }}
+                        error={contactMethodUpdateInputErrors.label}
                       />
 
                       <InputText
@@ -1068,6 +1157,7 @@ if (!service) return Astro.rewrite('/404')
                           value: method.value,
                           placeholder: 'e.g., mailto:contact@example.com or https://t.me/example',
                         }}
+                        error={contactMethodUpdateInputErrors.value}
                       />
 
                       <InputSubmitButton label="Update" icon="ri:save-line" hideCancel />
@@ -1088,17 +1178,118 @@ if (!service) return Astro.rewrite('/404')
 
           <InputText
             label="Value"
-            description="With protocol (e.g., `mailto:contact@example.com` or `https://t.me/example`)"
+            description={`Accepts: ${contactMethodUrlTypes.map((type) => type.labelPlural).join(', ')}`}
             name="value"
             inputProps={{
               required: true,
-              placeholder: 'mailto:contact@example.com',
+              placeholder: 'contact@example.com',
             }}
+            error={contactMethodAddInputErrors.value}
           />
 
           <InputSubmitButton label="Add" icon="ri:add-line" hideCancel />
         </form>
       </FormSubSection>
     </FormSection>
+
+    <FormSection title="API">
+      {
+        DEPLOYMENT_MODE === 'staging' && (
+          <p class="rounded-lg bg-red-900/30 p-4 text-sm text-red-200">
+            <Icon name="ri:alert-line" class="inline-block size-4 align-[-0.2em] text-red-400" />
+            This endpoints section doesn't work in PRE. Use curl commands instead.
+          </p>
+        )
+      }
+      <div class="mb-6 flex justify-center">
+        <Button
+          as="a"
+          href="/docs/api"
+          icon="ri:book-open-line"
+          color="gray"
+          size="sm"
+          label=" Documentation"
+        />
+      </div>
+      {
+        apiCalls.map((call) => (
+          <FormSubSection title={`${call.method} ${call.path}`}>
+            <p class="text-day-400 text-sm">Input:</p>
+            <Code code={JSON.stringify(call.input, null, 2)} lang="json" class="rounded-lg p-4 text-xs" />
+
+            <p class="text-day-400 text-sm">Output:</p>
+            <Code code={JSON.stringify(call.output, null, 2)} lang="json" class="rounded-lg p-4 text-xs" />
+          </FormSubSection>
+        ))
+      }
+    </FormSection>
+
+    <FormSection title="Evidence Images" id="evidence-images">
+      <FormSubSection title="Existing Evidence Images">
+        {
+          evidenceImageUrls.length === 0 ? (
+            <p class="border-night-600 bg-night-800 text-day-300 rounded-xl border p-6 text-center">
+              No evidence images yet.
+            </p>
+          ) : (
+            <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
+              {evidenceImageUrls.map((imageUrl: string) => (
+                <div class="border-night-600 bg-night-800 group relative rounded-md border p-2">
+                  <MyPicture
+                    src={imageUrl}
+                    alt="Evidence image"
+                    class="aspect-square w-full rounded object-cover"
+                    width={200}
+                    height={200}
+                  />
+                  <form
+                    method="POST"
+                    action={actions.admin.service.evidenceImage.delete}
+                    class="absolute top-1 right-1"
+                  >
+                    <input type="hidden" name="fileUrl" value={imageUrl} />
+                    <Button
+                      type="submit"
+                      variant="faded"
+                      color="danger"
+                      size="sm"
+                      icon="ri:delete-bin-line"
+                      iconOnly
+                      label="Delete Image"
+                      class="opacity-0 transition-opacity group-hover:opacity-100"
+                    />
+                  </form>
+
+                  <input
+                    type="text"
+                    readonly
+                    value={`![Evidence](${imageUrl})`}
+                    class="bg-night-700 text-day-200 mt-2 w-full cursor-text rounded border p-2 font-mono text-xs select-all"
+                  />
+                </div>
+              ))}
+            </div>
+          )
+        }
+      </FormSubSection>
+      <FormSubSection title="Add New Evidence Image">
+        <form
+          method="POST"
+          action={actions.admin.service.evidenceImage.add}
+          class="space-y-4"
+          enctype="multipart/form-data"
+        >
+          <input type="hidden" name="serviceId" value={service.id} />
+          <InputImageFile
+            label="Upload Image"
+            name="imageFile"
+            description="Upload an evidence image."
+            error={evidenceImageAddInputErrors.imageFile}
+            required
+          />
+          <InputSubmitButton label="Add Image" icon="ri:add-line" hideCancel />
+        </form>
+      </FormSubSection>
+    </FormSection>
   </div>
 </BaseLayout>

web/src/pages/admin/services/new.astro

@@ -74,19 +74,19 @@ const inputErrors = isInputError(result?.error) ? result.error.fields : {}
       </div>
 
       <div>
-        <label for="serviceUrls" class="font-title mb-2 block text-sm text-green-500">serviceUrls</label>
+        <label for="allServiceUrls" class="font-title mb-2 block text-sm text-green-500">Service URLs</label>
         <textarea
           transition:persist
           class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
-          name="serviceUrls"
-          id="serviceUrls"
+          name="allServiceUrls"
+          id="allServiceUrls"
           rows={3}
-          placeholder="https://example1.com https://example2.com"
+          placeholder="https://example1.com\nhttps://example2.onion\nhttps://example3.b32.i2p"
           set:text=""
         />
         {
-          inputErrors.serviceUrls && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.serviceUrls.join(', ')}</p>
+          inputErrors.allServiceUrls && (
+            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.allServiceUrls.join(', ')}</p>
           )
         }
       </div>
@@ -109,24 +109,6 @@ const inputErrors = isInputError(result?.error) ? result.error.fields : {}
         }
       </div>
 
-      <div>
-        <label for="onionUrls" class="font-title mb-2 block text-sm text-green-500">onionUrls</label>
-        <textarea
-          transition:persist
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
-          name="onionUrls"
-          id="onionUrls"
-          rows={3}
-          placeholder="http://example.onion"
-          set:text=""
-        />
-        {
-          inputErrors.onionUrls && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.onionUrls.join(', ')}</p>
-          )
-        }
-      </div>
-
       <div>
         <label for="imageFile" class="font-title mb-2 block text-sm text-green-500">serviceImage</label>
         <div class="space-y-2">

web/src/pages/admin/users/[username].astro

@@ -226,9 +226,24 @@ if (!user) return Astro.rewrite('/404')
         name="type"
         label="Type"
         options={[
-          { label: 'Admin', value: 'admin', icon: 'ri:shield-star-fill' },
-          { label: 'Moderator', value: 'moderator', icon: 'ri:graduation-cap-fill' },
-          { label: 'Spammer', value: 'spammer', icon: 'ri:alert-fill' },
+          {
+            label: 'Admin',
+            value: 'admin',
+            icon: 'ri:shield-star-fill',
+            noTransitionPersist: true,
+          },
+          {
+            label: 'Moderator',
+            value: 'moderator',
+            icon: 'ri:graduation-cap-fill',
+            noTransitionPersist: true,
+          },
+          {
+            label: 'Spammer',
+            value: 'spammer',
+            icon: 'ri:alert-fill',
+            noTransitionPersist: true,
+          },
           {
             label: 'Verified',
             value: 'verified',
@@ -419,6 +434,7 @@ if (!user) return Astro.rewrite('/404')
           label: role.label,
           value: role.value,
           icon: role.icon,
+          noTransitionPersist: true,
         }))}
         required
         cardSize="sm"

web/src/pages/admin/users/index.astro

@@ -19,7 +19,7 @@ import type { Prisma } from '@prisma/client'
 
 const { data: filters } = zodParseQueryParamsStoringErrors(
   {
-    'sort-by': z.enum(['name', 'role', 'createdAt', 'karma']).default('createdAt'),
+    'sort-by': z.enum(['name', 'role', 'lastLoginAt', 'karma', 'createdAt']).default('createdAt'),
     'sort-order': z.enum(['asc', 'desc']).default('desc'),
     search: z.string().optional(),
     role: z.enum(['user', 'admin', 'moderator', 'verified', 'spammer']).optional(),
@@ -29,7 +29,10 @@ const { data: filters } = zodParseQueryParamsStoringErrors(
 
 // Set up Prisma orderBy with correct typing
 const prismaOrderBy =
-  filters['sort-by'] === 'name' || filters['sort-by'] === 'createdAt' || filters['sort-by'] === 'karma'
+  filters['sort-by'] === 'name' ||
+  filters['sort-by'] === 'createdAt' ||
+  filters['sort-by'] === 'lastLoginAt' ||
+  filters['sort-by'] === 'karma'
     ? {
         [filters['sort-by'] === 'karma' ? 'totalKarma' : filters['sort-by']]:
           filters['sort-order'] === 'asc' ? 'asc' : 'desc',
@@ -86,6 +89,7 @@ const dbUsers = await prisma.user.findMany({
     totalKarma: true,
     createdAt: true,
     updatedAt: true,
+    lastLoginAt: true,
     internalNotes: {
       select: {
         id: true,
@@ -218,16 +222,29 @@ const makeSortUrl = (sortBy: NonNullable<(typeof filters)['sort-by']>) => {
               <th
                 class="w-[15%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
               >
-                <a
-                  href={makeSortUrl('createdAt')}
-                  class="flex items-center justify-center hover:text-zinc-200"
-                >
-                  Joined <SortArrowIcon
-                    active={filters['sort-by'] === 'createdAt'}
-                    sortOrder={filters['sort-order']}
-                  />
-                </a>
+                <div class="flex flex-wrap items-center justify-center gap-1">
+                  <a
+                    href={makeSortUrl('lastLoginAt')}
+                    class="flex items-center justify-center hover:text-zinc-200"
+                  >
+                    Login <SortArrowIcon
+                      active={filters['sort-by'] === 'lastLoginAt'}
+                      sortOrder={filters['sort-order']}
+                    />
+                  </a>
+                  <span class="text-zinc-600">/</span>
+                  <a
+                    href={makeSortUrl('createdAt')}
+                    class="flex items-center justify-center hover:text-zinc-200"
+                  >
+                    Joined <SortArrowIcon
+                      active={filters['sort-by'] === 'createdAt'}
+                      sortOrder={filters['sort-order']}
+                    />
+                  </a>
+                </div>
               </th>
+
               <th
                 class="w-[15%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
               >
@@ -305,8 +322,24 @@ const makeSortUrl = (sortBy: NonNullable<(typeof filters)['sort-by']>) => {
                       {user.totalKarma}
                     </span>
                   </td>
-                  <td class="px-4 py-3 text-center text-sm text-zinc-400">
-                    <TimeFormatted date={user.createdAt} hourPrecision hoursShort prefix={false} />
+                  <td class="px-4 py-3 text-center text-sm">
+                    <div class="flex flex-wrap items-center justify-center gap-1 text-center">
+                      <TimeFormatted
+                        class="text-zinc-300"
+                        date={user.lastLoginAt}
+                        hourPrecision
+                        hoursShort
+                        prefix={false}
+                      />
+                      <span class="text-zinc-600">/</span>
+                      <TimeFormatted
+                        class="text-zinc-400"
+                        date={user.createdAt}
+                        hourPrecision
+                        hoursShort
+                        prefix={false}
+                      />
+                    </div>
                   </td>
                   <td class="px-4 py-3">
                     <div class="flex justify-center gap-3">

web/src/pages/api/[...catchAll].ts

@@ -0,0 +1,13 @@
+import type { APIRoute } from 'astro'
+
+export const ALL: APIRoute = (context) => {
+  console.error('Endpoint not found', { url: context.url.href, method: context.request.method })
+  return new Response(
+    JSON.stringify({
+      error: 'Endpoint not found',
+    }),
+    {
+      status: 404,
+    }
+  )
+}

web/src/pages/api/v1/service/get.ts

@@ -0,0 +1,7 @@
+import { actions } from 'astro:actions'
+
+import { makeEndpointFromAction } from '../../../../lib/endpoints'
+
+import type { APIRoute } from 'astro'
+
+export const QUERY: APIRoute = makeEndpointFromAction(actions.api.service.get)

web/src/pages/docs/api.mdx

@@ -0,0 +1,201 @@
+---
+layout: ../../layouts/MarkdownLayout.astro
+title: API
+author: KYCnot.me
+pubDate: 2025-05-31
+description: 'Access basic service data via our public API.'
+icon: 'ri:plug-line'
+---
+
+import { SOURCE_CODE_URL } from 'astro:env/server'
+import { kycLevels } from '../../constants/kycLevels'
+import { verificationStatuses } from '../../constants/verificationStatus'
+import { serviceVisibilities } from '../../constants/serviceVisibility'
+import { kycLevelClarifications } from '../../constants/kycLevelClarifications'
+
+Access basic service data via our public API.
+
+All endpoints should be prefixed with `/api/v1/`.
+
+The endpoints <a href={SOURCE_CODE_URL}>source code</a> is available on the `/web/src/actions/api/index.ts` file.
+
+**Attribution:** Please credit **KYCnot.me** if you use data from this API.
+
+## `QUERY` `/service/get`
+
+Fetches details for a single service by various lookup criteria.
+
+### Request Parameters
+
+| Parameter    | Type   | Required | Description                                                                 |
+| ------------ | ------ | -------- | --------------------------------------------------------------------------- |
+| `id`         | number | No\*     | Service ID                                                                  |
+| `slug`       | string | No\*     | Service URL slug (lowercase letters, numbers, and hyphens only)             |
+| `serviceUrl` | string | No\*     | Service URL. May be web, onion, or i2p. May just be a domain or a full URL. |
+
+\* At least one of the marked parameters is required.
+
+### Response Format
+
+```typescript
+type ServiceResponse = {
+  id: number
+  slug: string
+  name: string
+  description: string
+  serviceVisibility: 'PUBLIC' | 'ARCHIVED' | 'UNLISTED'
+  verificationStatus: 'VERIFICATION_SUCCESS' | 'APPROVED' | 'COMMUNITY_CONTRIBUTED' | 'VERIFICATION_FAILED'
+  verificationStatusInfo: {
+    value: 'VERIFICATION_SUCCESS' | 'APPROVED' | 'COMMUNITY_CONTRIBUTED' | 'VERIFICATION_FAILED'
+    slug: string
+    label: string
+    labelShort: string
+    description: string
+  }
+  verifiedAt: Date | null
+  kycLevel: 0 | 1 | 2 | 3 | 4
+  kycLevelInfo: {
+    value: 0 | 1 | 2 | 3 | 4
+    name: string
+    description: string
+  }
+  kycLevelClarification: 'NONE' | 'DEPENDS_ON_PARTNERS' | ...
+  kycLevelClarificationInfo: {
+    value: 'NONE' | 'DEPENDS_ON_PARTNERS' | ...
+    name: string
+    description: string
+  }
+  categories: {
+    name: string
+    slug: string
+  }[]
+  listedAt: Date
+  serviceUrls: string[]
+  tosUrls: string[]
+  kycnotmeUrl: `https://kycnot.me/service/${service.slug}`
+}
+```
+
+#### KYC Levels
+
+<ul>
+  {kycLevels.map((level) => (
+    <li key={level.id}>
+      <strong>{level.id}</strong>: {level.name} - {level.description}
+    </li>
+  ))}
+</ul>
+
+#### Verification Status
+
+<ul>
+  {verificationStatuses.map((status) => (
+    <li key={status.value}>
+      <strong>{status.value}</strong>: {status.description}
+    </li>
+  ))}
+</ul>
+
+#### Service Visibility
+
+<ul>
+  {serviceVisibilities
+    .filter(
+      (visibility) =>
+        visibility.value === 'PUBLIC' || visibility.value === 'ARCHIVED' || visibility.value === 'UNLISTED'
+    )
+    .map((visibility) => (
+      <li key={visibility.value}>
+        <strong>{visibility.value}</strong>: {visibility.longDescription}
+      </li>
+    ))}
+</ul>
+
+#### KYC Level Clarifications
+
+<ul>
+  {kycLevelClarifications.map((clarification) => (
+    <li key={clarification.value}>
+      <strong>{clarification.value}</strong>: {clarification.description}
+    </li>
+  ))}
+</ul>
+
+### Examples
+
+#### Request
+
+```zsh
+curl -X QUERY https://kycnot.me/api/v1/service/get \
+  -H "Content-Type: application/json" \
+  -d '{"slug": "my-example-service"}'
+```
+
+#### Response
+
+```json
+{
+  "name": "My Example Service",
+  "description": "This is a description of my example service",
+  "serviceVisibility": "PUBLIC",
+  "verificationStatus": "VERIFICATION_SUCCESS",
+  "verificationStatusInfo": {
+    "value": "VERIFICATION_SUCCESS",
+    "slug": "verified",
+    "label": "Verified",
+    "labelShort": "Verified",
+    "description": "Thoroughly tested and verified by the team. But things might change, this is not a guarantee."
+  },
+  "verifiedAt": "2025-01-20T07:12:29.393Z",
+  "kycLevel": 0,
+  "kycLevelInfo": {
+    "value": 0,
+    "name": "Guaranteed no KYC",
+    "description": "Terms explicitly state KYC will never be requested."
+  },
+  "kycLevelClarification": "NONE",
+  "kycLevelClarificationInfo": {
+    "value": "NONE",
+    "description": "No clarification needed."
+  },
+  "categories": [
+    {
+      "name": "Exchange",
+      "slug": "exchange"
+    }
+  ],
+  "listedAt": "2025-05-31T19:09:18.043Z",
+  "serviceUrls": [
+    "https://example.com",
+    "http://c9ikae0fdidzh1ufrzp022e5uqfvz6ofxlkycz59cvo6fdxjgx7ekl9e.onion"
+  ],
+  "tosUrls": ["https://example.com/terms-of-service"],
+  "kycnotmeUrl": "https://kycnot.me/service/bisq"
+}
+```
+
+#### Error Responses
+
+**404 Not Found**: Service not found
+
+```json
+{
+  "error": "Service not found"
+}
+```
+
+**400 Bad Request**: Invalid input parameters
+
+```json
+{
+  "error": "Validation error message"
+}
+```
+
+**500 Internal Server Error**: Server error
+
+```json
+{
+  "error": "Internal server error"
+}
+```

web/src/pages/docs/karma.mdx

@@ -1,5 +1,5 @@
 ---
-layout: ../layouts/MarkdownLayout.astro
+layout: ../../layouts/MarkdownLayout.astro
 title: How does karma work?
 description: "KYCnot.me has a user karma system, here's how it works"
 icon: 'ri:hearts-line'
@@ -7,7 +7,7 @@ author: KYCnot.me
 pubDate: 2025-05-15
 ---
 
-import KarmaUnlocksTable from '../components/KarmaUnlocksTable.astro'
+import KarmaUnlocksTable from '../../components/KarmaUnlocksTable.astro'
 
 [KYCnot.me](https://kycnot.me) implements a karma system to encourage quality contributions and maintain community standards. Users can earn (or lose) karma points through various interactions on the platform, primarily through their comments on services.
 

web/src/pages/events.astro

@@ -13,6 +13,7 @@ import {
   getEventTypeInfo,
   getEventTypeInfoBySlug,
 } from '../constants/eventTypes'
+import { getServiceVisibilityInfo } from '../constants/serviceVisibility'
 import { getVerificationStatusInfo } from '../constants/verificationStatus'
 import BaseLayout from '../layouts/BaseLayout.astro'
 import { cn } from '../lib/cn'
@@ -44,6 +45,8 @@ const [services, [dbEvents, totalEvents]] = await Astro.locals.banners.tryMany([
     async () =>
       prisma.service.findMany({
         where: {
+          listedAt: { lte: new Date() },
+          serviceVisibility: { in: ['PUBLIC', 'ARCHIVED'] },
           events: {
             some: {
               visible: true,
@@ -72,8 +75,15 @@ const [services, [dbEvents, totalEvents]] = await Astro.locals.banners.tryMany([
           createdAt: {
             lte: params.now,
           },
-          ...(params.service ? { service: { slug: params.service } } : {}),
-          ...(params.type ? { type: getEventTypeInfoBySlug(params.type).id } : {}),
+          service: {
+            slug: params.service ?? undefined,
+            listedAt: params.service ? undefined : { lte: new Date() },
+            serviceVisibility: {
+              in: params.service ? ['PUBLIC', 'ARCHIVED', 'UNLISTED'] : ['PUBLIC', 'ARCHIVED'],
+            },
+          },
+          type: params.type ? getEventTypeInfoBySlug(params.type).id : undefined,
+
           ...(params.from || params.to
             ? {
                 OR: [
@@ -105,6 +115,7 @@ const [services, [dbEvents, totalEvents]] = await Astro.locals.banners.tryMany([
               name: true,
               imageUrl: true,
               verificationStatus: true,
+              serviceVisibility: true,
             },
           },
         },
@@ -126,6 +137,7 @@ const events = orderBy(
     service: {
       ...event.service,
       verificationStatusInfo: getVerificationStatusInfo(event.service.verificationStatus),
+      serviceVisibilityInfo: getServiceVisibilityInfo(event.service.serviceVisibility),
     },
   })),
   ['actualEndedAt', 'startedAt'],
@@ -416,6 +428,16 @@ const createUrlWithoutFilter = (paramName: keyof typeof params) => {
                         )}
                       />
                     )}
+
+                    {event.service.serviceVisibility === 'ARCHIVED' && (
+                      <Icon
+                        name={event.service.serviceVisibilityInfo.icon}
+                        class={cn(
+                          'ms-1 inline-block size-3 shrink-0',
+                          event.service.serviceVisibilityInfo.iconClass
+                        )}
+                      />
+                    )}
                   </a>
 
                   {event.source && (

web/src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import { z } from 'astro:schema'
-import { groupBy, omit, orderBy, uniq } from 'lodash-es'
+import { groupBy, omit, orderBy, sortBy, uniq } from 'lodash-es'
 import seedrandom from 'seedrandom'
 
 import Button from '../components/Button.astro'
@@ -26,6 +26,7 @@ import {
 } from '../constants/verificationStatus'
 import BaseLayout from '../layouts/BaseLayout.astro'
 import { areEqualArraysWithoutOrder, zodEnumFromConstant } from '../lib/arrays'
+import { findServicesBySimilarity } from '../lib/findServicesBySimilarity'
 import { parseIntWithFallback } from '../lib/numbers'
 import { areEqualObjectsWithoutOrder } from '../lib/objects'
 import { zodParseQueryParamsStoringErrors } from '../lib/parseUrlFilters'
@@ -181,6 +182,7 @@ const {
         'min-score': { if: 'default' },
         'user-rating': { if: 'default' },
         'max-kyc': { if: 'default' },
+        'sort-seed': { if: 'another-is-unset', prop: 'page' },
       },
     },
   }
@@ -213,17 +215,16 @@ const groupedAttributes = groupBy(
   'value'
 )
 
+const servicesQMatch = filters.q ? await findServicesBySimilarity(filters.q) : null
+
 const where = {
-  listedAt: {
-    lte: new Date(),
-  },
+  id: servicesQMatch ? { in: servicesQMatch.map(({ id }) => id) } : undefined,
+  listedAt: { lte: new Date() },
   categories: filters.categories.length ? { some: { slug: { in: filters.categories } } } : undefined,
   verificationStatus: {
     in: includeScams ? uniq([...filters.verification, 'VERIFICATION_FAILED'] as const) : filters.verification,
   },
-  serviceVisibility: {
-    in: ['PUBLIC', 'ARCHIVED'],
-  },
+  serviceVisibility: { in: ['PUBLIC', 'ARCHIVED'] },
   overallScore: { gte: filters['min-score'] },
   acceptedCurrencies: filters.currencies.length
     ? filters['currency-mode'] === 'and'
@@ -243,16 +244,6 @@ const where = {
           } satisfies Prisma.ServiceWhereInput,
         ]
       : []),
-    ...(filters.q
-      ? [
-          {
-            OR: [
-              { name: { contains: filters.q, mode: 'insensitive' as const } },
-              { description: { contains: filters.q, mode: 'insensitive' as const } },
-            ],
-          } satisfies Prisma.ServiceWhereInput,
-        ]
-      : []),
     ...(filters.networks.length
       ? [
           {
@@ -325,9 +316,8 @@ const [categories, [services, totalServices], countCommunityOnly, attributes] =
               select: {
                 services: {
                   where: {
-                    serviceVisibility: {
-                      in: ['PUBLIC', 'ARCHIVED'],
-                    },
+                    serviceVisibility: { in: ['PUBLIC', 'ARCHIVED'] },
+                    listedAt: { lte: new Date() },
                   },
                 },
               },
@@ -338,33 +328,46 @@ const [categories, [services, totalServices], countCommunityOnly, attributes] =
     [
       'Unable to load services.',
       async () => {
-        const [unsortedServices, totalServices] = await prisma.service.findManyAndCount({
-          where,
-          select: {
-            id: true,
-            ...(Object.fromEntries(sortOptions.map((option) => [option.orderBy.key, true])) as Record<
-              (typeof sortOptions)[number]['orderBy']['key'],
-              true
-            >),
-          },
-        })
+        const [unsortedServicesMissingSimilarityScore, totalServices] = await prisma.service.findManyAndCount(
+          {
+            where,
+            select: {
+              id: true,
+              ...(Object.fromEntries(sortOptions.map((option) => [option.orderBy.key, true])) as Record<
+                (typeof sortOptions)[number]['orderBy']['key'],
+                true
+              >),
+            },
+          }
+        )
+
+        const unsortedServices = unsortedServicesMissingSimilarityScore.map((service) => ({
+          ...service,
+          similarityScore: servicesQMatch?.find((match) => match.id === service.id)?.similarityScore ?? 0,
+        }))
 
         const rng = seedrandom(filters['sort-seed'])
         const selectedSort = sortOptions.find((sort) => sort.value === filters.sort) ?? defaultSortOption
 
         const sortedServices = orderBy(
-          unsortedServices,
-          [selectedSort.orderBy.key, () => rng()],
-          [selectedSort.orderBy.direction, 'asc']
+          // NOTE: We do a first sort by id to make the seeded sort deterministic
+          sortBy(unsortedServices, 'id'),
+          [
+            ...(filters.q ? (['similarityScore'] as const) : ([] as const)),
+            selectedSort.orderBy.key,
+            () => rng(),
+          ],
+          [...(filters.q ? (['desc'] as const) : ([] as const)), selectedSort.orderBy.direction, 'asc']
         ).slice((filters.page - 1) * PAGE_SIZE, filters.page * PAGE_SIZE)
 
-        const unsortedServicesWithInfo = await prisma.service.findMany({
+        const unsortedServicesWithInfoMissingSimilarityScore = await prisma.service.findMany({
           where: {
             id: {
               in: sortedServices.map((service) => service.id),
             },
           },
           select: {
+            id: true,
             name: true,
             slug: true,
             description: true,
@@ -398,14 +401,20 @@ const [categories, [services, totalServices], countCommunityOnly, attributes] =
           },
         })
 
+        const unsortedServicesWithInfo = unsortedServicesWithInfoMissingSimilarityScore.map((service) => ({
+          ...service,
+          similarityScore: servicesQMatch?.find((match) => match.id === service.id)?.similarityScore ?? 0,
+        }))
+
         const sortedServicesWithInfo = orderBy(
           unsortedServicesWithInfo,
           [
+            ...(filters.q ? (['similarityScore'] as const) : ([] as const)),
             selectedSort.orderBy.key,
             // Now we can shuffle indeternimistically, because the pagination was already applied
             () => Math.random(),
           ],
-          [selectedSort.orderBy.direction, 'asc']
+          [...(filters.q ? (['desc'] as const) : ([] as const)), selectedSort.orderBy.direction, 'asc']
         )
 
         return [sortedServicesWithInfo, totalServices] as const
@@ -712,7 +721,6 @@ const showFiltersId = 'show-filters'
       pageSize={PAGE_SIZE}
       sortSeed={filters['sort-seed']}
       filters={filters}
-      includeScams={includeScams}
       countCommunityOnly={countCommunityOnly}
       inlineIcons
     />

web/src/pages/internal-api/[...catchAll].ts

@@ -0,0 +1,13 @@
+import type { APIRoute } from 'astro'
+
+export const ALL: APIRoute = (context) => {
+  console.error('Endpoint not found', { url: context.url.href, method: context.request.method })
+  return new Response(
+    JSON.stringify({
+      error: 'Endpoint not found',
+    }),
+    {
+      status: 404,
+    }
+  )
+}

web/src/pages/internal-api/notifications/subscribe.ts

@@ -0,0 +1,7 @@
+import { actions } from 'astro:actions'
+
+import { makeEndpointFromAction } from '../../../lib/endpoints'
+
+import type { APIRoute } from 'astro'
+
+export const POST: APIRoute = makeEndpointFromAction(actions.notification.webPush.subscribe)

web/src/pages/internal-api/notifications/unsubscribe.ts

@@ -0,0 +1,7 @@
+import { actions } from 'astro:actions'
+
+import { makeEndpointFromAction } from '../../../lib/endpoints'
+
+import type { APIRoute } from 'astro'
+
+export const POST: APIRoute = makeEndpointFromAction(actions.notification.webPush.unsubscribe)

web/src/pages/notifications.astro

@@ -4,13 +4,14 @@ import { Icon } from 'astro-icon/components'
 import { actions } from 'astro:actions'
 
 import Button from '../components/Button.astro'
+import PushNotificationBanner from '../components/PushNotificationBanner.astro'
 import TimeFormatted from '../components/TimeFormatted.astro'
 import Tooltip from '../components/Tooltip.astro'
 import { getNotificationTypeInfo } from '../constants/notificationTypes'
 import BaseLayout from '../layouts/BaseLayout.astro'
 import { cn } from '../lib/cn'
 import { getOrCreateNotificationPreferences } from '../lib/notificationPreferences'
-import { makeNotificationContent, makeNotificationLink, makeNotificationTitle } from '../lib/notifications'
+import { makeNotificationActions, makeNotificationContent, makeNotificationTitle } from '../lib/notifications'
 import { zodParseQueryParamsStoringErrors } from '../lib/parseUrlFilters'
 import { prisma } from '../lib/prisma'
 import { makeLoginUrl } from '../lib/redirectUrls'
@@ -28,131 +29,146 @@ const { data: params } = zodParseQueryParamsStoringErrors(
 )
 const skip = (params.page - 1) * PAGE_SIZE
 
-const [dbNotifications, notificationPreferences, totalNotifications] = await Astro.locals.banners.tryMany([
-  [
-    'Error while fetching notifications',
-    () =>
-      prisma.notification.findMany({
-        where: {
-          userId: user.id,
-        },
-        orderBy: {
-          createdAt: 'desc',
-        },
-        skip,
-        take: PAGE_SIZE,
-        select: {
+const [dbNotifications, notificationPreferences, totalNotifications, pushSubscriptions] =
+  await Astro.locals.banners.tryMany([
+    [
+      'Error while fetching notifications',
+      () =>
+        prisma.notification.findMany({
+          where: {
+            userId: user.id,
+          },
+          orderBy: {
+            createdAt: 'desc',
+          },
+          skip,
+          take: PAGE_SIZE,
+          select: {
+            id: true,
+            type: true,
+            createdAt: true,
+            read: true,
+            aboutAccountStatusChange: true,
+            aboutCommentStatusChange: true,
+            aboutServiceVerificationStatusChange: true,
+            aboutSuggestionStatusChange: true,
+            aboutComment: {
+              select: {
+                id: true,
+                author: {
+                  select: {
+                    id: true,
+                  },
+                },
+                status: true,
+                content: true,
+                communityNote: true,
+                service: {
+                  select: {
+                    slug: true,
+                    name: true,
+                  },
+                },
+                parent: {
+                  select: {
+                    author: {
+                      select: {
+                        id: true,
+                      },
+                    },
+                  },
+                },
+              },
+            },
+            aboutServiceSuggestionId: true,
+            aboutServiceSuggestion: {
+              select: {
+                status: true,
+                service: {
+                  select: {
+                    name: true,
+                  },
+                },
+              },
+            },
+            aboutServiceSuggestionMessage: {
+              select: {
+                id: true,
+                content: true,
+                suggestion: {
+                  select: {
+                    id: true,
+                    service: {
+                      select: {
+                        name: true,
+                      },
+                    },
+                  },
+                },
+              },
+            },
+            aboutEvent: {
+              select: {
+                title: true,
+                type: true,
+                service: {
+                  select: {
+                    slug: true,
+                    name: true,
+                  },
+                },
+              },
+            },
+            aboutService: {
+              select: {
+                slug: true,
+                name: true,
+                verificationStatus: true,
+              },
+            },
+            aboutKarmaTransaction: {
+              select: {
+                points: true,
+                action: true,
+                description: true,
+              },
+            },
+          },
+        }),
+      [],
+    ],
+    [
+      'Error while fetching notification preferences',
+      () =>
+        getOrCreateNotificationPreferences(user.id, {
           id: true,
-          type: true,
-          createdAt: true,
-          read: true,
-          aboutAccountStatusChange: true,
-          aboutCommentStatusChange: true,
-          aboutServiceVerificationStatusChange: true,
-          aboutSuggestionStatusChange: true,
-          aboutComment: {
-            select: {
-              id: true,
-              author: {
-                select: {
-                  id: true,
-                },
-              },
-              status: true,
-              content: true,
-              communityNote: true,
-              service: {
-                select: {
-                  slug: true,
-                  name: true,
-                },
-              },
-              parent: {
-                select: {
-                  author: {
-                    select: {
-                      id: true,
-                    },
-                  },
-                },
-              },
-            },
+          enableOnMyCommentStatusChange: true,
+          enableAutowatchMyComments: true,
+          enableNotifyPendingRepliesOnWatch: true,
+          karmaNotificationThreshold: true,
+        }),
+      null,
+    ],
+    [
+      'Error while fetching total notifications',
+      () => prisma.notification.count({ where: { userId: user.id } }),
+      0,
+    ],
+    [
+      'Error while fetching push subscriptions',
+      () =>
+        prisma.pushSubscription.findMany({
+          where: { userId: user.id },
+          select: {
+            endpoint: true,
+            userAgent: true,
           },
-          aboutServiceSuggestionId: true,
-          aboutServiceSuggestion: {
-            select: {
-              status: true,
-              service: {
-                select: {
-                  name: true,
-                },
-              },
-            },
-          },
-          aboutServiceSuggestionMessage: {
-            select: {
-              id: true,
-              content: true,
-              suggestion: {
-                select: {
-                  id: true,
-                  service: {
-                    select: {
-                      name: true,
-                    },
-                  },
-                },
-              },
-            },
-          },
-          aboutEvent: {
-            select: {
-              title: true,
-              type: true,
-              service: {
-                select: {
-                  slug: true,
-                  name: true,
-                },
-              },
-            },
-          },
-          aboutService: {
-            select: {
-              slug: true,
-              name: true,
-              verificationStatus: true,
-            },
-          },
-          aboutKarmaTransaction: {
-            select: {
-              points: true,
-              action: true,
-              description: true,
-            },
-          },
-        },
-      }),
-    [],
-  ],
-  [
-    'Error while fetching notification preferences',
-    () =>
-      getOrCreateNotificationPreferences(user.id, {
-        id: true,
-        enableOnMyCommentStatusChange: true,
-        enableAutowatchMyComments: true,
-        enableNotifyPendingRepliesOnWatch: true,
-        karmaNotificationThreshold: true,
-      }),
-    null,
-  ],
-  [
-    'Error while fetching total notifications',
-    () => prisma.notification.count({ where: { userId: user.id } }),
-    0,
-  ],
-])
+        }),
+      [],
+    ],
+  ])
+
+if (!notificationPreferences) console.error('No notification preferences found')
 
 const totalPages = Math.ceil(totalNotifications / PAGE_SIZE)
 
@@ -183,7 +199,7 @@ const notifications = dbNotifications.map((notification) => ({
   typeInfo: getNotificationTypeInfo(notification.type),
   title: makeNotificationTitle(notification, user),
   content: makeNotificationContent(notification),
-  link: makeNotificationLink(notification, Astro.url.origin),
+  actions: makeNotificationActions(notification, Astro.url.origin),
 }))
 ---
 
@@ -199,6 +215,17 @@ const notifications = dbNotifications.map((notification) => ({
   }}
 >
   <section class="mx-auto w-full">
+    {
+      notifications.length >= 5 && (
+        <PushNotificationBanner
+          class="mb-4"
+          dismissable
+          pushSubscriptions={pushSubscriptions}
+          hideIfEnabled
+        />
+      )
+    }
+
     <div class="mb-4 flex items-center justify-between">
       <h1 class="font-title flex items-center text-2xl leading-tight font-bold tracking-wider">
         <Icon name="ri:notification-line" class="mr-2 size-6 text-zinc-400" />
@@ -258,18 +285,21 @@ const notifications = dbNotifications.map((notification) => ({
                       type="submit"
                       class="flex size-8 items-center justify-center rounded-full border border-zinc-700 bg-zinc-800 text-zinc-400 transition-colors duration-200 hover:bg-zinc-700 hover:text-zinc-200"
                     >
-                      <Icon name={notification.read ? 'ri:eye-close-line' : 'ri:eye-line'} class="size-4" />
+                      <Icon name={notification.read ? 'ri:close-line' : 'ri:check-line'} class="size-4" />
                     </Tooltip>
                   </form>
-                  {notification.link && (
-                    <a
-                      href={notification.link}
+                  {notification.actions.map((action) => (
+                    <Tooltip
+                      as="a"
+                      href={action.url}
                       class="flex size-8 items-center justify-center rounded-full border border-zinc-700 bg-zinc-800 text-zinc-400 transition-colors duration-200 hover:bg-zinc-700 hover:text-zinc-200"
+                      text={action.title}
+                      position="left"
                     >
-                      <Icon name="ri:arrow-right-line" class="size-4" />
-                      <span class="sr-only">View details</span>
-                    </a>
-                  )}
+                      <Icon name={action.iconName ?? 'ri:arrow-right-line'} class="size-4" />
+                      <span class="sr-only">{action.title}</span>
+                    </Tooltip>
+                  ))}
                 </div>
               </div>
             </div>
@@ -306,57 +336,57 @@ const notifications = dbNotifications.map((notification) => ({
       )
     }
 
-    {
-      !!notificationPreferences && (
-        <div class="mt-8">
-          <h2 class="font-title mb-3 flex items-center border-b border-zinc-800 text-lg font-bold">
-            <Icon name="ri:settings-3-line" class="mr-2 size-5 text-zinc-400" />
-            Notification Settings
-          </h2>
+    <h2 class="font-title mt-8 mb-3 flex items-center border-b border-zinc-800 text-lg font-bold">
+      <Icon name="ri:settings-3-line" class="mr-2 size-5 text-zinc-400" />
+      Notification Settings
+    </h2>
 
-          <form
-            method="POST"
-            action={actions.notification.preferences.update}
-            class="rounded-lg border border-zinc-800 bg-zinc-900 p-4 shadow-sm"
-          >
-            {notificationPreferenceFields.map((field) => (
-              <label class="flex items-center justify-between rounded-md p-2 transition-colors duration-200 hover:bg-zinc-800">
-                <span class="flex items-center text-zinc-300">
-                  <Icon name={field.icon} class="mr-2 size-5 text-zinc-400" />
-                  {field.label}
-                </span>
-                <input
-                  type="checkbox"
-                  name={field.id}
-                  checked={notificationPreferences[field.id]}
-                  class="size-4 rounded border-zinc-700 bg-zinc-800 text-blue-600 focus:ring-blue-600"
-                />
-              </label>
-            ))}
+    <PushNotificationBanner class="mb-3" pushSubscriptions={pushSubscriptions} />
 
-            <div class="mt-4 flex items-center justify-between rounded-md p-2 transition-colors duration-200 hover:bg-zinc-800">
-              <span class="flex items-center text-zinc-300">
-                <Icon name="ri:award-line" class="mr-2 size-5 text-zinc-400" />
-                Notify me when my karma changes by at least
-              </span>
-              <div class="flex items-center gap-2">
-                <input
-                  type="number"
-                  name="karmaNotificationThreshold"
-                  value={notificationPreferences.karmaNotificationThreshold}
-                  min="1"
-                  class="w-20 rounded border border-zinc-700 bg-zinc-800 px-2 py-1 text-zinc-200 focus:border-blue-600 focus:ring-1 focus:ring-blue-600 focus:outline-none"
-                />
-                <span class="text-zinc-400">points</span>
-              </div>
-            </div>
+    <form
+      method="POST"
+      action={actions.notification.preferences.update}
+      class="rounded-lg border border-zinc-800 bg-zinc-900 p-4 shadow-sm"
+    >
+      {
+        notificationPreferenceFields.map((field) => (
+          <label class="flex items-center justify-between rounded-md p-2 transition-colors duration-200 hover:bg-zinc-800">
+            <span class="flex items-center text-zinc-300">
+              <Icon name={field.icon} class="mr-2 size-5 text-zinc-400" />
+              {field.label}
+            </span>
+            <input
+              type="checkbox"
+              name={field.id}
+              checked={notificationPreferences?.[field.id]}
+              class="size-4 rounded border-zinc-700 bg-zinc-800 text-blue-600 focus:ring-blue-600"
+            />
+          </label>
+        ))
+      }
 
-            <div class="mt-4 flex justify-end">
-              <Button type="submit" label="Save" icon="ri:save-line" color="success" />
-            </div>
-          </form>
+      <div
+        class="mt-4 flex items-center justify-between rounded-md p-2 transition-colors duration-200 hover:bg-zinc-800"
+      >
+        <span class="flex items-center text-zinc-300">
+          <Icon name="ri:award-line" class="mr-2 size-5 text-zinc-400" />
+          Notify me when my karma changes by at least
+        </span>
+        <div class="flex items-center gap-2">
+          <input
+            type="number"
+            name="karmaNotificationThreshold"
+            value={notificationPreferences?.karmaNotificationThreshold}
+            min="1"
+            class="w-20 rounded border border-zinc-700 bg-zinc-800 px-2 py-1 text-zinc-200 focus:border-blue-600 focus:ring-1 focus:ring-blue-600 focus:outline-none"
+          />
+          <span class="text-zinc-400">points</span>
         </div>
-      )
-    }
+      </div>
+
+      <div class="mt-4 flex justify-end">
+        <Button type="submit" label="Save" icon="ri:save-line" color="success" />
+      </div>
+    </form>
   </section>
 </BaseLayout>

web/src/pages/service-suggestion/[id].astro

@@ -3,9 +3,12 @@ import { Icon } from 'astro-icon/components'
 import { actions } from 'astro:actions'
 
 import AdminOnly from '../../components/AdminOnly.astro'
+import BadgeSmall from '../../components/BadgeSmall.astro'
+import Button from '../../components/Button.astro'
 import Chat from '../../components/Chat.astro'
 import ServiceCard from '../../components/ServiceCard.astro'
 import { getServiceSuggestionStatusInfo } from '../../constants/serviceSuggestionStatus'
+import { getServiceSuggestionTypeInfo } from '../../constants/serviceSuggestionType'
 import BaseLayout from '../../layouts/BaseLayout.astro'
 import { cn } from '../../lib/cn'
 import { parseIntWithFallback } from '../../lib/numbers'
@@ -28,6 +31,7 @@ const serviceSuggestion = await Astro.locals.banners.try('Error fetching service
   prisma.serviceSuggestion.findUnique({
     select: {
       id: true,
+      type: true,
       status: true,
       notes: true,
       createdAt: true,
@@ -42,6 +46,7 @@ const serviceSuggestion = await Astro.locals.banners.try('Error fetching service
           imageUrl: true,
           verificationStatus: true,
           acceptedCurrencies: true,
+          serviceVisibility: true,
           categories: {
             select: {
               name: true,
@@ -59,6 +64,7 @@ const serviceSuggestion = await Astro.locals.banners.try('Error fetching service
             select: {
               id: true,
               name: true,
+              displayName: true,
               picture: true,
             },
           },
@@ -81,6 +87,7 @@ if (!serviceSuggestion) {
 }
 
 const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
+const typeInfo = getServiceSuggestionTypeInfo(serviceSuggestion.type)
 ---
 
 <BaseLayout
@@ -104,37 +111,37 @@ const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
     },
   ]}
 >
-  <h1 class="font-title mt-12 mb-6 text-center text-3xl font-bold">Edit service</h1>
-
-  <AdminOnly>
-    <a
-      href={`/admin/service-suggestions/${serviceSuggestionIdRaw}`}
-      class="border-day-500/30 bg-day-500/10 text-day-400 hover:bg-day-500/20 focus:ring-day-500 inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm shadow-xs transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
-    >
-      <Icon name="ri:lock-line" class="size-4" />
-      View in admin
-    </a>
-  </AdminOnly>
+  <div class="mt-12 mb-6 text-center">
+    <h1 class="font-title text-center text-3xl font-bold">Service suggestion</h1>
+    <div class="flex items-center justify-center gap-2">
+      <AdminOnly>
+        <Button
+          as="a"
+          href={`/admin/service-suggestions/${serviceSuggestionIdRaw}`}
+          size="sm"
+          icon="ri:lock-line"
+          label="View in admin"
+        />
+      </AdminOnly>
+    </div>
+  </div>
 
   <ServiceCard service={serviceSuggestion.service} class="mb-6" />
 
   <section class="border-night-400 bg-night-600 rounded-lg border p-6">
-    <div class="text-day-200 grid grid-cols-2 gap-6 text-sm">
+    <div class="text-day-200 xs:grid-cols-2 grid gap-2 text-sm">
       <div class="flex flex-wrap items-center gap-2">
-        <span>Status:</span>
-        <span
-          class={cn(
-            'border-night-500 bg-night-800 box-content inline-flex h-8 items-center justify-center gap-1 rounded-full border px-2',
-            statusInfo.iconClass
-          )}
-        >
-          <Icon name={statusInfo.icon} class="size-4" />
-          {statusInfo.label}
-        </span>
+        <span class="font-title font-bold">Status:</span>
+        <BadgeSmall color={statusInfo.color} text={statusInfo.label} icon={statusInfo.icon} />
       </div>
 
       <div class="flex flex-wrap items-center gap-2">
-        <span>Submitted:</span>
+        <span class="font-title font-bold">Type:</span>
+        <BadgeSmall color={typeInfo.color} text={typeInfo.label} icon={typeInfo.icon} />
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="font-title font-bold">Submitted:</span>
         <span>
           {
             formatDateShort(serviceSuggestion.createdAt, {
@@ -145,15 +152,22 @@ const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
           }
         </span>
       </div>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="font-title font-bold">Service:</span>
+        <a href={`/service/${serviceSuggestion.service.slug}`} class="hover:text-day-200 text-green-400">
+          Open <Icon name="ri:external-link-line" class="ml-0.5 inline-block size-3 align-[-0.05em]" />
+        </a>
+      </div>
     </div>
 
-    <div class="mt-6">
-      <div class="text-day-200 mb-2 text-sm">Notes for moderators:</div>
+    <div class="bg-night-700 -mx-2 mt-4 rounded-lg p-2 text-sm">
+      <span class="font-title block font-bold">Notes for moderators:</span>
       {
         serviceSuggestion.notes ? (
-          <div class="text-sm wrap-anywhere whitespace-pre-wrap" set:text={serviceSuggestion.notes} />
+          <div class="mt-1 text-sm wrap-anywhere whitespace-pre-wrap" set:text={serviceSuggestion.notes} />
         ) : (
-          <span class="text-sm italic">Empty</span>
+          <div class="text-day-400 my-4 text-center text-sm italic">Empty</div>
         )
       }
     </div>