donation component

.cursorrules

@@ -143,7 +143,12 @@
   <BaseLayout
     pageTitle="Edit service"
     description="Suggest an edit to service"
-    ogImage={{ template: 'generic', title: 'Edit service' }}
+    ogImage={{
+      template: 'generic',
+      title: 'Edit service',
+      description: 'Suggest an edit to service',
+      icon: 'ri:edit-line',
+    }}
     widthClassName="max-w-screen-md"
   >
     <h1 class="font-title mt-12 mb-6 text-center text-3xl font-bold">Edit service</h1>
@@ -199,7 +204,7 @@
         label="Note for Moderators"
         name="notes"
         value={params.notes}
-        rows={10}
+        inputProps={{ rows: 10 }}
         error={inputErrors.notes}
       />
 
@@ -207,7 +212,7 @@
 
       <InputHoneypotTrap name="message" />
 
-      <InputSubmitButton />
+      <InputSubmitButton hideCancel />
     </form>
   </BaseLayout>
   ```

.gitignore

@@ -13,3 +13,4 @@ dump*.sql
 *.log
 *.bak
 migrate.py
+sync-all.sh

justfile

@@ -15,14 +15,24 @@ import-triggers:
     docker compose exec -T database psql -U ${DATABASE_USER:-kycnot} -d ${DATABASE_NAME:-kycnot} < "$sql_file"
   done
 
+# Create a database backup that includes the Prisma migrations table (recommended)
 dump-db:
   #!/bin/bash
   mkdir -p backups
   TIMESTAMP=$(date +%Y%m%d_%H%M%S)
-  echo "Creating database backup (excluding _prisma_migrations table)..."
+  echo "Creating complete database backup (including _prisma_migrations table)..."
-  docker compose exec -T database pg_dump -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot} -c -F c -T _prisma_migrations > backups/db_backup_${TIMESTAMP}.dump
+  docker compose exec -T database pg_dump -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot} -c -F c > backups/db_backup_${TIMESTAMP}.dump
   echo "Backup saved to backups/db_backup_${TIMESTAMP}.dump"
 
+# Create a database backup without the migrations table (legacy format)
+dump-db-no-migrations:
+  #!/bin/bash
+  mkdir -p backups
+  TIMESTAMP=$(date +%Y%m%d_%H%M%S)
+  echo "Creating database backup (excluding _prisma_migrations table)..."
+  docker compose exec -T database pg_dump -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot} -c -F c -T _prisma_migrations > backups/db_backup_no_migrations_${TIMESTAMP}.dump
+  echo "Backup saved to backups/db_backup_no_migrations_${TIMESTAMP}.dump"
+
 # Import a database backup. Usage: just import-db [filename]
 # If no filename is provided, it will use the most recent backup
 import-db file="":
@@ -44,7 +54,96 @@ import-db file="":
   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
-  # Then restore the database
+  
-  cat "$BACKUP_FILE" | docker compose exec -T database pg_restore -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot} --clean --if-exists
+  # 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
+  
+  # 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
+  
+  echo "=== STEP 2: RESTORING PRODUCTION DATA ==="
+  # 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 data restored successfully!"
+  
+  echo "=== STEP 3: CREATING PRISMA MIGRATIONS TABLE ==="
+  # Create the _prisma_migrations table if it doesn't exist
+  docker compose exec -T database psql -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot} -c "
+  CREATE TABLE IF NOT EXISTS _prisma_migrations (
+    id VARCHAR(36) PRIMARY KEY NOT NULL,
+    checksum VARCHAR(64) NOT NULL,
+    finished_at TIMESTAMP WITH TIME ZONE,
+    migration_name VARCHAR(255) NOT NULL,
+    logs TEXT,
+    rolled_back_at TIMESTAMP WITH TIME ZONE,
+    started_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
+    applied_steps_count INTEGER NOT NULL DEFAULT 0
+  );"
+  
+  echo "=== STEP 4: REGISTERING MIGRATIONS ==="
+  # Only register migrations if the table is empty
+  migration_count=$(docker compose exec -T database psql -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot} -t -c "SELECT COUNT(*) FROM _prisma_migrations;")
+  if [ "$migration_count" -eq "0" ]; then
+    # For each migration, insert a record into _prisma_migrations
+    for migration_dir in $(find web/prisma/migrations -maxdepth 1 -mindepth 1 -type d | sort); do
+      migration_name=$(basename "$migration_dir")
+      sql_file="$migration_dir/migration.sql"
+      
+      if [ -f "$sql_file" ]; then
+        echo "Registering migration: $migration_name"
+        checksum=$(sha256sum "$sql_file" | cut -d' ' -f1)
+        uuid=$(uuidgen)
+        now=$(date -u +"%Y-%m-%d %H:%M:%S")
+        
+        docker compose exec -T database psql -U ${POSTGRES_USER:-kycnot} -d ${POSTGRES_DATABASE:-kycnot} -c "
+        INSERT INTO _prisma_migrations (id, checksum, migration_name, logs, started_at, finished_at, applied_steps_count)
+        VALUES ('$uuid', '$checksum', '$migration_name', 'Registered during import', '$now', '$now', 1)
+        ON CONFLICT (migration_name) DO NOTHING;"
+      fi
+    done
+  else
+    echo "Migrations table already has entries. Skipping registration."
+  fi
+
+  echo "=== STEP 5: IMPORTING TRIGGERS ==="
+  just import-triggers
+  
+  echo "Production database import completed successfully!"
+  echo "Migration status:"
+  cd web && npx prisma migrate status
+  

pyworker/pyworker/scheduler.py

@@ -126,9 +126,9 @@ class TaskScheduler:
                     self.logger.info(f"Running task '{task_name}'")
                     # Use task instance as a context manager to ensure
                     # a single database connection is used for the entire task
-                    with task_info["instance"] as task_instance:
+                    with task_info["instance"]:
-                        # Execute the task instance's run method directly
+                        # Execute the registered task function with its arguments
-                        task_instance.run()
+                        task_info["func"](*task_info["args"], **task_info["kwargs"])
                     self.logger.info(f"Task '{task_name}' completed")
                 except Exception as e:
                     self.logger.exception(f"Error running task '{task_name}': {e}")

web/astro.config.mjs

@@ -42,6 +42,10 @@ export default defineConfig({
     open: false,
     allowedHosts: [new URL(SITE_URL).hostname],
   },
+  image: {
+    domains: [new URL(SITE_URL).hostname],
+    remotePatterns: [{ protocol: 'https' }],
+  },
   redirects: {
     // #region Redirects from old website
     '/pending': '/?verification=verified&verification=approved&verification=community',

web/package.json

@@ -27,6 +27,7 @@
     "@astrojs/sitemap": "3.4.0",
     "@fontsource-variable/space-grotesk": "5.2.7",
     "@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",
@@ -43,10 +44,12 @@
     "lodash-es": "4.17.21",
     "mime-types": "3.0.1",
     "object-to-formdata": "4.5.1",
+    "qrcode": "1.5.4",
     "react": "19.1.0",
     "redis": "5.0.1",
     "schema-dts": "1.1.5",
     "seedrandom": "3.0.5",
+    "sharp": "0.34.1",
     "slugify": "1.6.6",
     "tailwind-merge": "3.3.0",
     "tailwind-variants": "1.0.0",
@@ -66,6 +69,7 @@
     "@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/seedrandom": "3.0.8",
     "@typescript-eslint/parser": "8.32.1",

web/prisma/migrations/20250519115947_karma_transaction_enums/migration.sql

@@ -0,0 +1,19 @@
+/*
+  Warnings:
+
+  - Changed the type of `action` on the `KarmaTransaction` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+
+*/
+-- CreateEnum
+CREATE TYPE "KarmaTransactionAction" AS ENUM ('COMMENT_APPROVED', 'COMMENT_VERIFIED', 'COMMENT_SPAM', 'COMMENT_SPAM_REVERTED', 'COMMENT_UPVOTE', 'COMMENT_DOWNVOTE', 'COMMENT_VOTE_REMOVED', 'SUGGESTION_APPROVED', 'MANUAL_ADJUSTMENT');
+
+-- AlterTable
+ALTER TABLE "KarmaTransaction" ADD COLUMN     "grantedByUserId" INTEGER,
+DROP COLUMN "action",
+ADD COLUMN     "action" "KarmaTransactionAction" NOT NULL;
+
+-- CreateIndex
+CREATE INDEX "KarmaTransaction_grantedByUserId_idx" ON "KarmaTransaction"("grantedByUserId");
+
+-- AddForeignKey
+ALTER TABLE "KarmaTransaction" ADD CONSTRAINT "KarmaTransaction_grantedByUserId_fkey" FOREIGN KEY ("grantedByUserId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

web/prisma/migrations/20250519135045_announcements/migration.sql

@@ -0,0 +1,20 @@
+-- CreateEnum
+CREATE TYPE "AnnouncementType" AS ENUM ('INFO', 'WARNING', 'ALERT');
+
+-- CreateTable
+CREATE TABLE "Announcement" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "type" "AnnouncementType" NOT NULL,
+    "startDate" TIMESTAMP(3) NOT NULL,
+    "endDate" TIMESTAMP(3),
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Announcement_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "Announcement_isActive_startDate_endDate_idx" ON "Announcement"("isActive", "startDate", "endDate");

web/prisma/migrations/20250519145000_fix_karma_transactions/migration.sql

@@ -0,0 +1 @@
+ 

web/prisma/schema.prisma

@@ -166,6 +166,24 @@ enum ServiceSuggestionStatusChange {
   STATUS_CHANGED_TO_WITHDRAWN
 }
 
+enum KarmaTransactionAction {
+  COMMENT_APPROVED
+  COMMENT_VERIFIED
+  COMMENT_SPAM
+  COMMENT_SPAM_REVERTED
+  COMMENT_UPVOTE
+  COMMENT_DOWNVOTE
+  COMMENT_VOTE_REMOVED
+  SUGGESTION_APPROVED
+  MANUAL_ADJUSTMENT
+}
+
+enum AnnouncementType {
+  INFO
+  WARNING
+  ALERT
+}
+
 model Notification {
   id        Int              @id @default(autoincrement())
   userId    Int
@@ -445,20 +463,21 @@ model User {
   /// Computed via trigger. Do not update through prisma.
   totalKarma      Int     @default(0)
 
-  createdAt               DateTime                     @default(now())
+  createdAt                DateTime                     @default(now())
-  updatedAt               DateTime                     @default(now()) @updatedAt
+  updatedAt                DateTime                     @default(now()) @updatedAt
-  lastLoginAt             DateTime                     @default(now())
+  lastLoginAt              DateTime                     @default(now())
-  comments                Comment[]
+  comments                 Comment[]
-  karmaTransactions       KarmaTransaction[]
+  karmaTransactions        KarmaTransaction[]
-  commentVotes            CommentVote[]
+  grantedKarmaTransactions KarmaTransaction[]           @relation("KarmaGrantedBy")
-  suggestions             ServiceSuggestion[]
+  commentVotes             CommentVote[]
-  suggestionMessages      ServiceSuggestionMessage[]
+  suggestions              ServiceSuggestion[]
-  internalNotes           InternalUserNote[]           @relation("UserRecievedNotes")
+  suggestionMessages       ServiceSuggestionMessage[]
-  addedInternalNotes      InternalUserNote[]           @relation("UserAddedNotes")
+  internalNotes            InternalUserNote[]           @relation("UserRecievedNotes")
-  verificationRequests    ServiceVerificationRequest[]
+  addedInternalNotes       InternalUserNote[]           @relation("UserAddedNotes")
-  notifications           Notification[]               @relation("NotificationOwner")
+  verificationRequests     ServiceVerificationRequest[]
-  notificationPreferences NotificationPreferences?
+  notifications            Notification[]               @relation("NotificationOwner")
-  serviceAffiliations     ServiceUser[]                @relation("UserServices")
+  notificationPreferences  NotificationPreferences?
+  serviceAffiliations      ServiceUser[]                @relation("UserServices")
 
   @@index([createdAt])
   @@index([totalKarma])
@@ -489,24 +508,27 @@ model ServiceAttribute {
 }
 
 model KarmaTransaction {
-  id           Int                @id @default(autoincrement())
+  id              Int                    @id @default(autoincrement())
-  user         User               @relation(fields: [userId], references: [id], onDelete: Cascade)
+  user            User                   @relation(fields: [userId], references: [id], onDelete: Cascade)
-  userId       Int
+  userId          Int
-  action       String
+  action          KarmaTransactionAction
-  points       Int                @default(0)
+  points          Int                    @default(0)
-  comment      Comment?           @relation(fields: [commentId], references: [id], onDelete: Cascade)
+  comment         Comment?               @relation(fields: [commentId], references: [id], onDelete: Cascade)
-  commentId    Int?
+  commentId       Int?
-  suggestion   ServiceSuggestion? @relation(fields: [suggestionId], references: [id], onDelete: Cascade)
+  suggestion      ServiceSuggestion?     @relation(fields: [suggestionId], references: [id], onDelete: Cascade)
-  suggestionId Int?
+  suggestionId    Int?
-  description  String
+  description     String
-  processed    Boolean            @default(false)
+  processed       Boolean                @default(false)
-  createdAt    DateTime           @default(now())
+  createdAt       DateTime               @default(now())
+  grantedBy       User?                  @relation("KarmaGrantedBy", fields: [grantedByUserId], references: [id], onDelete: SetNull)
+  grantedByUserId Int?
 
   @@index([createdAt])
   @@index([userId])
   @@index([processed])
   @@index([suggestionId])
   @@index([commentId])
+  @@index([grantedByUserId])
 }
 
 enum VerificationStepStatus {
@@ -588,3 +610,17 @@ model ServiceUser {
   @@index([serviceId])
   @@index([role])
 }
+
+model Announcement {
+  id        Int              @id @default(autoincrement())
+  title     String
+  content   String
+  type      AnnouncementType
+  startDate DateTime
+  endDate   DateTime?
+  isActive  Boolean          @default(true)
+  createdAt DateTime         @default(now())
+  updatedAt DateTime         @default(now()) @updatedAt
+
+  @@index([isActive, startDate, endDate])
+}

web/prisma/triggers/01_karma_tx.sql

@@ -8,6 +8,7 @@ DROP TRIGGER IF EXISTS comment_suspicious_change_trigger ON "Comment";
 DROP TRIGGER IF EXISTS comment_upvote_change_trigger ON "Comment";
 DROP TRIGGER IF EXISTS comment_vote_change_trigger ON "CommentVote";
 DROP TRIGGER IF EXISTS suggestion_status_change_trigger ON "ServiceSuggestion";
+DROP TRIGGER IF EXISTS manual_karma_adjustment_trigger ON "KarmaTransaction";
 
 -- Drop existing functions
 DROP FUNCTION IF EXISTS handle_comment_upvote_change();
@@ -19,6 +20,7 @@ DROP FUNCTION IF EXISTS handle_comment_vote_change();
 DROP FUNCTION IF EXISTS insert_karma_transaction();
 DROP FUNCTION IF EXISTS update_user_karma();
 DROP FUNCTION IF EXISTS handle_suggestion_status_change();
+DROP FUNCTION IF EXISTS handle_manual_karma_adjustment();
 
 -- Helper function to insert karma transaction
 CREATE OR REPLACE FUNCTION insert_karma_transaction(
@@ -31,14 +33,17 @@ CREATE OR REPLACE FUNCTION insert_karma_transaction(
 ) RETURNS VOID AS $$
 BEGIN
     INSERT INTO "KarmaTransaction" (
-        "userId", "points", "action", "commentId", 
+        "userId", "points", "action", "commentId", "suggestionId", "description", "processed", "createdAt"
-        "suggestionId",
-        "description", "processed", "createdAt"
     )
     VALUES (
-        p_user_id, p_points, p_action, p_comment_id, 
+        p_user_id,
+        p_points,
+        p_action::"KarmaTransactionAction",
+        p_comment_id,
         p_suggestion_id,
-        p_description, true, NOW()
+        p_description,
+        true,
+        NOW()
     );
 END;
 $$ LANGUAGE plpgsql;
@@ -65,7 +70,7 @@ BEGIN
         PERFORM insert_karma_transaction(
             NEW."authorId",
             1,
-            'comment_approved',
+            'COMMENT_APPROVED',
             NEW.id,
             format('Your comment #comment-%s in %s has been approved!', 
                 NEW.id, 
@@ -86,7 +91,7 @@ BEGIN
         PERFORM insert_karma_transaction(
             NEW."authorId",
             5,
-            'comment_verified',
+            'COMMENT_VERIFIED',
             NEW.id,
             format('Your comment #comment-%s in %s has been verified!', 
                 NEW.id, 
@@ -108,7 +113,7 @@ BEGIN
         PERFORM insert_karma_transaction(
             NEW."authorId",
             -10,
-            'comment_spam',
+            'COMMENT_SPAM',
             NEW.id,
             format('Your comment #comment-%s in %s has been marked as spam.', 
                 NEW.id, 
@@ -120,7 +125,7 @@ BEGIN
         PERFORM insert_karma_transaction(
             NEW."authorId",
             10,
-            'comment_spam_reverted',
+            'COMMENT_SPAM_REVERTED',
             NEW.id,
             format('Your comment #comment-%s in %s is no longer marked as spam.', 
                 NEW.id, 
@@ -136,7 +141,7 @@ CREATE OR REPLACE FUNCTION handle_comment_vote_change()
 RETURNS TRIGGER AS $$
 DECLARE
     karma_points INT;
-    vote_action TEXT;
+    vote_action "KarmaTransactionAction";
     vote_description TEXT;
     comment_author_id INT;
     service_name TEXT;
@@ -151,7 +156,7 @@ BEGIN
     IF TG_OP = 'INSERT' THEN
         -- New vote
         karma_points := CASE WHEN NEW.downvote THEN -1 ELSE 1 END;
-        vote_action := CASE WHEN NEW.downvote THEN 'comment_downvote' ELSE 'comment_upvote' END;
+        vote_action := CASE WHEN NEW.downvote THEN 'COMMENT_DOWNVOTE' ELSE 'COMMENT_UPVOTE' END;
         vote_description := format('Your comment #comment-%s in %s received %s', 
             NEW."commentId", 
             service_name,
@@ -160,7 +165,7 @@ BEGIN
     ELSIF TG_OP = 'DELETE' THEN
         -- Removed vote
         karma_points := CASE WHEN OLD.downvote THEN 1 ELSE -1 END;
-        vote_action := 'comment_vote_removed';
+        vote_action := 'COMMENT_VOTE_REMOVED';
         vote_description := format('A vote was removed from your comment #comment-%s in %s', 
             OLD."commentId",
             service_name);
@@ -168,7 +173,7 @@ BEGIN
     ELSIF TG_OP = 'UPDATE' THEN
         -- Changed vote (from upvote to downvote or vice versa)
         karma_points := CASE WHEN NEW.downvote THEN -2 ELSE 2 END;
-        vote_action := CASE WHEN NEW.downvote THEN 'comment_downvote' ELSE 'comment_upvote' END;
+        vote_action := CASE WHEN NEW.downvote THEN 'COMMENT_DOWNVOTE' ELSE 'COMMENT_UPVOTE' END;
         vote_description := format('Your comment #comment-%s in %s vote changed to %s', 
             NEW."commentId",
             service_name,
@@ -243,7 +248,7 @@ BEGIN
         PERFORM insert_karma_transaction(
             NEW."userId",
             10,
-            'suggestion_approved',
+            'SUGGESTION_APPROVED',
             NULL, -- p_comment_id (not applicable)
             format('Your suggestion for service ''%s'' has been approved!', service_name),
             NEW.id -- p_suggestion_id
@@ -263,3 +268,24 @@ CREATE TRIGGER suggestion_status_change_trigger
     ON "ServiceSuggestion"
     FOR EACH ROW
     EXECUTE FUNCTION handle_suggestion_status_change();
+
+-- Function to handle manual karma adjustments
+CREATE OR REPLACE FUNCTION handle_manual_karma_adjustment()
+RETURNS TRIGGER AS $$
+BEGIN
+    -- Only process MANUAL_ADJUSTMENT transactions that are not yet processed
+    IF NEW.processed = false AND NEW.action = 'MANUAL_ADJUSTMENT' THEN
+        -- Update user's total karma
+        PERFORM update_user_karma(NEW."userId", NEW.points);
+    END IF;
+
+    RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+-- Create trigger for manual karma adjustments
+CREATE TRIGGER manual_karma_adjustment_trigger
+    AFTER INSERT
+    ON "KarmaTransaction"
+    FOR EACH ROW
+    EXECUTE FUNCTION handle_manual_karma_adjustment();

web/src/actions/admin/announcement.ts

@@ -0,0 +1,161 @@
+import { type Prisma, type PrismaClient, type AnnouncementType } 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
+
+const selectAnnouncementReturnFields = {
+  id: true,
+  title: true,
+  content: true,
+  type: true,
+  startDate: true,
+  endDate: true,
+  isActive: true,
+  createdAt: true,
+  updatedAt: true,
+} as const satisfies Prisma.AnnouncementSelect
+
+export const adminAnnouncementActions = {
+  create: defineProtectedAction({
+    accept: 'form',
+    permissions: 'admin',
+    input: z.object({
+      title: z.string().min(1, 'Title is required').max(255, 'Title must be less than 255 characters'),
+      content: z
+        .string()
+        .min(1, 'Content is required')
+        .max(1000, 'Content must be less than 1000 characters'),
+      type: z.enum(['INFO', 'WARNING', 'ALERT']),
+      startDate: z.coerce.date(),
+      endDate: z.coerce.date().nullable().optional(),
+      isActive: z.coerce.boolean().default(true),
+    }),
+    handler: async (input) => {
+      const announcement = await prisma.announcement.create({
+        data: {
+          ...input,
+          endDate: input.endDate || null,
+        },
+        select: selectAnnouncementReturnFields,
+      })
+
+      return { announcement }
+    },
+  }),
+
+  update: defineProtectedAction({
+    accept: 'form',
+    permissions: 'admin',
+    input: z.object({
+      id: z.coerce.number().int().positive(),
+      title: z.string().min(1, 'Title is required').max(255, 'Title must be less than 255 characters'),
+      content: z
+        .string()
+        .min(1, 'Content is required')
+        .max(1000, 'Content must be less than 1000 characters'),
+      type: z.enum(['INFO', 'WARNING', 'ALERT']),
+      startDate: z.coerce.date(),
+      endDate: z.coerce.date().nullable().optional(),
+      isActive: z.coerce.boolean().default(true),
+    }),
+    handler: async (input) => {
+      const announcement = await prisma.announcement.findUnique({
+        where: {
+          id: input.id,
+        },
+        select: {
+          id: true,
+        },
+      })
+
+      if (!announcement) {
+        throw new ActionError({
+          code: 'BAD_REQUEST',
+          message: 'Announcement not found',
+        })
+      }
+
+      const updatedAnnouncement = await prisma.announcement.update({
+        where: { id: announcement.id },
+        data: {
+          ...input,
+          endDate: input.endDate || null,
+        },
+        select: selectAnnouncementReturnFields,
+      })
+
+      return { updatedAnnouncement }
+    },
+  }),
+
+  delete: defineProtectedAction({
+    accept: 'form',
+    permissions: 'admin',
+    input: z.object({
+      id: z.coerce.number().int().positive(),
+    }),
+    handler: async (input) => {
+      const announcement = await prisma.announcement.findUnique({
+        where: {
+          id: input.id,
+        },
+        select: {
+          id: true,
+        },
+      })
+
+      if (!announcement) {
+        throw new ActionError({
+          code: 'BAD_REQUEST',
+          message: 'Announcement not found',
+        })
+      }
+
+      await prisma.announcement.delete({
+        where: { id: announcement.id },
+      })
+
+      return { success: true }
+    },
+  }),
+
+  toggleActive: defineProtectedAction({
+    accept: 'form',
+    permissions: 'admin',
+    input: z.object({
+      id: z.coerce.number().int().positive(),
+      isActive: z.coerce.boolean(),
+    }),
+    handler: async (input) => {
+      const announcement = await prisma.announcement.findUnique({
+        where: {
+          id: input.id,
+        },
+        select: {
+          id: true,
+        },
+      })
+
+      if (!announcement) {
+        throw new ActionError({
+          code: 'BAD_REQUEST',
+          message: 'Announcement not found',
+        })
+      }
+
+      const updatedAnnouncement = await prisma.announcement.update({
+        where: { id: announcement.id },
+        data: {
+          isActive: input.isActive,
+        },
+        select: selectAnnouncementReturnFields,
+      })
+
+      return { updatedAnnouncement }
+    },
+  }),
+}

web/src/actions/admin/index.ts

@@ -1,3 +1,4 @@
+import { adminAnnouncementActions } from './announcement'
 import { adminAttributeActions } from './attribute'
 import { adminEventActions } from './event'
 import { adminServiceActions } from './service'
@@ -7,6 +8,7 @@ import { verificationStep } from './verificationStep'
 
 export const adminActions = {
   attribute: adminAttributeActions,
+  announcement: adminAnnouncementActions,
   event: adminEventActions,
   service: adminServiceActions,
   serviceSuggestions: adminServiceSuggestionActions,

web/src/actions/admin/user.ts

@@ -54,11 +54,8 @@ export const adminUserActions = {
         .nullable()
         .default(null) // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         .transform((val) => val || null),
-      picture: z.string().max(255, 'Picture URL must be less than 255 characters').nullable().default(null),
       pictureFile: z.instanceof(File).optional(),
-      verifier: z.boolean().default(false),
+      type: z.array(z.enum(['admin', 'verifier', 'spammer'])),
-      admin: z.boolean().default(false),
-      spammer: z.boolean().default(false),
       verifiedLink: z
         .string()
         .url('Invalid URL')
@@ -72,7 +69,7 @@ export const adminUserActions = {
         .default(null) // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         .transform((val) => val || null),
     }),
-    handler: async ({ id, picture, pictureFile, ...valuesToUpdate }) => {
+    handler: async ({ id, pictureFile, type, ...valuesToUpdate }) => {
       const user = await prisma.user.findUnique({
         where: {
           id,
@@ -89,17 +86,23 @@ export const adminUserActions = {
         })
       }
 
-      let pictureUrl = picture ?? null
+      const pictureUrl =
-      if (pictureFile && pictureFile.size > 0) {
+        pictureFile && pictureFile.size > 0
-        pictureUrl = await saveFileLocally(pictureFile, pictureFile.name, 'users/pictures/')
+          ? await saveFileLocally(pictureFile, pictureFile.name, 'users/pictures/')
-      }
+          : null
 
       const updatedUser = await prisma.user.update({
         where: { id: user.id },
         data: {
-          ...valuesToUpdate,
+          name: valuesToUpdate.name,
+          link: valuesToUpdate.link,
+          verifiedLink: valuesToUpdate.verifiedLink,
+          displayName: valuesToUpdate.displayName,
           verified: !!valuesToUpdate.verifiedLink,
           picture: pictureUrl,
+          admin: type.includes('admin'),
+          verifier: type.includes('verifier'),
+          spammer: type.includes('spammer'),
         },
         select: selectUserReturnFields,
       })
@@ -285,4 +288,40 @@ export const adminUserActions = {
       },
     }),
   },
+
+  karmaTransactions: {
+    add: defineProtectedAction({
+      accept: 'form',
+      permissions: 'admin',
+      input: z.object({
+        userId: z.coerce.number().int().positive(),
+        points: z.coerce.number().int(),
+        description: z.string().min(1, 'Description is required'),
+      }),
+      handler: async (input, context) => {
+        // Check if the user exists
+        const user = await prisma.user.findUnique({
+          where: { id: input.userId },
+          select: { id: true },
+        })
+
+        if (!user) {
+          throw new ActionError({
+            code: 'BAD_REQUEST',
+            message: 'User not found',
+          })
+        }
+
+        await prisma.karmaTransaction.create({
+          data: {
+            userId: input.userId,
+            points: input.points,
+            action: 'MANUAL_ADJUSTMENT',
+            description: input.description,
+            grantedByUserId: context.locals.user.id,
+          },
+        })
+      },
+    }),
+  },
 }

web/src/components/AnnouncementBanner.astro

@@ -0,0 +1,57 @@
+---
+import { Icon } from 'astro-icon/components'
+import { Markdown } from 'astro-remote'
+
+import { getAnnouncementTypeInfo } from '../constants/announcementTypes'
+import { cn } from '../lib/cn'
+
+import type { Prisma } from '@prisma/client'
+
+type Props = {
+  announcements:
+    | Prisma.AnnouncementGetPayload<{
+        select: {
+          id: true
+          title: true
+          content: true
+          type: true
+          startDate: true
+          endDate: true
+          isActive: true
+        }
+      }>[]
+    | null
+    | undefined
+}
+
+const { announcements } = Astro.props
+---
+
+{
+  !!announcements && announcements.length > 0 && (
+    <div class="mb-4 flex flex-col items-center space-y-1">
+      {announcements.map((announcement) => {
+        const typeInfo = getAnnouncementTypeInfo(announcement.type)
+
+        return (
+          <div
+            class={cn(
+              'mx-auto flex w-auto max-w-full flex-row items-center rounded border px-3 py-2',
+              typeInfo.classNames.container
+            )}
+          >
+            <Icon name={typeInfo.icon} class={cn('mr-2 size-4 flex-shrink-0', typeInfo.classNames.title)} />
+            <div class="flex min-w-0 flex-col">
+              <span class={cn('truncate text-sm leading-tight font-bold', typeInfo.classNames.title)}>
+                {announcement.title}
+              </span>
+              <span class={cn('truncate text-xs leading-snug [&_a]:underline', typeInfo.classNames.content)}>
+                <Markdown content={announcement.content} />
+              </span>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

web/src/components/Captcha.astro

@@ -1,7 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components'
 import { isInputError, type ActionAccept, type ActionClient } from 'astro:actions'
-import { Image } from 'astro:assets'
 
 import { CAPTCHA_LENGTH, generateCaptcha } from '../lib/captcha'
 import { cn } from '../lib/cn'

web/src/components/ChatMessages.astro

@@ -1,9 +1,9 @@
 ---
-import { Picture } from 'astro:assets'
-
 import { cn } from '../lib/cn'
 import { formatDateShort } from '../lib/timeAgo'
 
+import MyPicture from './MyPicture.astro'
+
 import type { Prisma } from '@prisma/client'
 import type { HTMLAttributes } from 'astro/types'
 
@@ -73,13 +73,12 @@ const { messages, userId, class: className, ...htmlProps } = Astro.props
               {!isCurrentUser && !isNextFromSameUser && (
                 <p class="text-day-500 mb-0.5 text-xs">
                   {!!message.user.picture && (
-                    <Picture
+                    <MyPicture
                       src={message.user.picture}
                       height={16}
                       width={16}
                       class="inline-block rounded-full align-[-0.33em]"
                       alt=""
-                      formats={['jxl', 'avif', 'webp']}
                     />
                   )}
                   {message.user.name}

web/src/components/CommentItem.astro

@@ -1,5 +1,4 @@
 ---
-import Image from 'astro/components/Image.astro'
 import { Icon } from 'astro-icon/components'
 import { Markdown } from 'astro-remote'
 import { Schema } from 'astro-seo-schema'
@@ -19,6 +18,7 @@ import { formatDateShort } from '../lib/timeAgo'
 import BadgeSmall from './BadgeSmall.astro'
 import CommentModeration from './CommentModeration.astro'
 import CommentReply from './CommentReply.astro'
+import MyPicture from './MyPicture.astro'
 import TimeFormatted from './TimeFormatted.astro'
 import Tooltip from './Tooltip.astro'
 
@@ -158,11 +158,10 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
     <span class="flex items-center gap-1">
       {
         comment.author.picture && (
-          <Image
+          <MyPicture
             src={comment.author.picture}
             alt={`Profile for ${comment.author.displayName ?? comment.author.name}`}
             class="size-6 rounded-full bg-zinc-700 object-cover"
-            loading="lazy"
             height={24}
             width={24}
           />
@@ -203,7 +202,13 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
       }
       {
         comment.author.verifier && !comment.author.admin && (
-          <BadgeSmall icon="ri:shield-check-fill" color="teal" text="Moderator" variant="faded" inlineIcon />
+          <BadgeSmall
+            icon="ri:graduation-cap-fill"
+            color="teal"
+            text="Moderator"
+            variant="faded"
+            inlineIcon
+          />
         )
       }
 

web/src/components/CommentModeration.astro

@@ -33,10 +33,10 @@ if (!user || !user.admin || !user.verifier) return null
 ---
 
 <div {...divProps} class={cn('text-xs', className)}>
-  <input type="checkbox" id={`mod-toggle-${String(comment.id)}`} class="peer hidden" />
+  <input type="checkbox" id={`mod-toggle-${String(comment.id)}`} class="peer sr-only" />
   <label
     for={`mod-toggle-${String(comment.id)}`}
-    class="text-day-500 hover:text-day-300 flex cursor-pointer items-center gap-1"
+    class="text-day-500 hover:text-day-300 peer-focus-visible:ring-offset-night-700 inline-flex cursor-pointer items-center gap-1 rounded-sm peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2"
   >
     <Icon name="ri:shield-keyhole-line" class="h-3.5 w-3.5" />
     <span class="text-xs">Moderation</span>
@@ -44,7 +44,7 @@ if (!user || !user.admin || !user.verifier) return null
   </label>
 
   <div
-    class="bg-night-600 border-night-500 mt-2 max-h-0 overflow-hidden rounded-md border opacity-0 transition-all duration-200 ease-in-out peer-checked:max-h-[500px] peer-checked:p-2 peer-checked:opacity-100"
+    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">
       <button

web/src/components/DonationAddress.astro

@@ -0,0 +1,60 @@
+---
+import { Icon } from 'astro-icon/components'
+import QRCode from 'qrcode'
+
+import { cn } from '../lib/cn'
+
+type Props = {
+  cryptoName: string
+  cryptoIcon: string
+  address: string
+  className?: string
+}
+
+const { cryptoName, cryptoIcon, address, className } = Astro.props
+
+function getAddressURI(address: string, cryptoName: string) {
+  if (cryptoName.toLowerCase() === 'monero') {
+    return `monero:${address}?tx_description=KYCnot.me%20Donation`
+  }
+
+  if (cryptoName.toLowerCase() === 'bitcoin') {
+    return `bitcoin:${address}?label=KYCnot.me%20Donation`
+  }
+
+  return address
+}
+
+const qrCodeDataURL = await QRCode.toDataURL(getAddressURI(address, cryptoName), {
+  width: 128,
+  margin: 1,
+  color: {
+    dark: '#ffffff',
+    light: '#171721',
+  },
+})
+---
+
+<div class={cn('bg-night-800 border-night-600 flex items-center gap-2 rounded-lg border px-3', className)}>
+  <div class="flex flex-1 flex-col gap-1 py-3">
+    <div class="flex items-center gap-2 px-4 pt-3">
+      <Icon name={cryptoIcon} class="size-6 text-white" />
+      <span class="font-title text-base font-semibold text-white">{cryptoName}</span>
+    </div>
+    <p class="px-7 font-mono text-base leading-snug tracking-wide break-all text-white">
+      <span
+        class="cursor-pointer select-all"
+        set:html={address.length > 12
+          ? `<span class="font-bold mr-0.5 text-green-500">${address.substring(0, 6)}</span>${address.substring(6, address.length - 6)}<span class="font-bold ml-0.5 text-green-500">${address.substring(address.length - 6)}</span>`
+          : `<span class="font-bold">${address}</span>`}
+      />
+    </p>
+  </div>
+  <img
+    src={qrCodeDataURL}
+    alt={`${cryptoName} QR code`}
+    width="128"
+    height="128"
+    class="mr-4 hidden size-36 rounded sm:block"
+  />
+</div>

web/src/components/InputCardGroup.astro

@@ -9,38 +9,42 @@ import InputWrapper from './InputWrapper.astro'
 import type { MarkdownString } from '../lib/markdown'
 import type { ComponentProps } from 'astro/types'
 
-type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId'> & {
+type Props<Multiple extends boolean = false> = Omit<
+  ComponentProps<typeof InputWrapper>,
+  'children' | 'inputId'
+> & {
   options: {
     label: string
     value: string
     icon?: string
     iconClass?: string
     description?: MarkdownString
+    disabled?: boolean
+    noTransitionPersist?: boolean
   }[]
   disabled?: boolean
-  selectedValue?: string
+  selectedValue?: Multiple extends true ? string[] : string
   cardSize?: 'lg' | 'md' | 'sm'
   iconSize?: 'md' | 'sm'
-  multiple?: boolean
+  multiple?: Multiple
 }
 
 const {
   options,
   disabled,
-  selectedValue,
+  selectedValue = undefined as string[] | string | undefined,
   cardSize = 'sm',
   iconSize = 'sm',
   class: className,
-  multiple,
+  multiple = false as boolean,
   ...wrapperProps
 } = Astro.props
 
-const inputId = Astro.locals.makeId(`input-${wrapperProps.name}`)
-
 const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
 ---
 
-<InputWrapper inputId={inputId} class={cn('@container', className)} {...wrapperProps}>
+{/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */}
+<InputWrapper class={cn('@container', className)} {...wrapperProps}>
   <div
     class={cn(
       'grid grid-cols-[repeat(auto-fill,minmax(var(--card-min-size),1fr))] gap-2 rounded-lg',
@@ -62,17 +66,21 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
             'has-checked:border-green-700 has-checked:bg-green-700/20 has-checked:ring-1 has-checked:ring-green-700',
             multiple &&
               'has-focus-visible:border-day-300 has-focus-visible:ring-2 has-focus-visible:ring-green-700 has-focus-visible:ring-offset-1',
-            disabled && 'cursor-not-allowed opacity-50'
+            'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50'
           )}
         >
           <input
-            transition:persist
+            transition:persist={option.noTransitionPersist ? undefined : true}
             type={multiple ? 'checkbox' : 'radio'}
             name={wrapperProps.name}
             value={option.value}
-            checked={selectedValue === option.value}
+            checked={
+              Array.isArray(selectedValue)
+                ? selectedValue.includes(option.value)
+                : selectedValue === option.value
+            }
             class="peer sr-only"
-            disabled={disabled}
+            disabled={disabled || option.disabled}
           />
           <div class="flex items-center gap-1.5">
             {option.icon && (

web/src/components/InputRating.astro

@@ -42,7 +42,7 @@ const inputId = id ?? Astro.locals.makeId(`input-${wrapperProps.name}`)
 
     {
       ratings.toSorted().map((rating) => (
-        <label class="relative cursor-pointer [&:has(~_*:hover),&:hover]:[&>[data-star]]:opacity-100!">
+        <label class="relative cursor-pointer [&:has(~_*_*:checked)]:[&>[data-star]]:opacity-100 [&:has(~_*:hover),&:hover]:[&>[data-star]]:opacity-100!">
           <input
             type="radio"
             name={wrapperProps.name}
@@ -54,7 +54,7 @@ const inputId = id ?? Astro.locals.makeId(`input-${wrapperProps.name}`)
           <Icon name="ri:star-line" class="size-6 p-0.5 text-zinc-500" />
           <Icon
             name="ri:star-fill"
-            class="absolute top-0 left-0 size-6 p-0.5 text-yellow-400 not-peer-checked:opacity-0 group-hover/fieldset:opacity-0"
+            class="absolute top-0 left-0 size-6 p-0.5 text-yellow-400 not-peer-checked:opacity-0 group-hover/fieldset:opacity-0!"
             data-star
           />
         </label>

web/src/components/InputSelect.astro

@@ -0,0 +1,48 @@
+---
+import { omit } from 'lodash-es'
+
+import { cn } from '../lib/cn'
+import { baseInputClassNames } from '../lib/formInputs'
+
+import InputWrapper from './InputWrapper.astro'
+
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+
+type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId' | 'required'> & {
+  options: {
+    label: string
+    value: string
+    disabled?: boolean
+  }[]
+  selectProps?: Omit<HTMLAttributes<'select'>, 'name'>
+}
+
+const { options, selectProps, ...wrapperProps } = Astro.props
+
+const inputId = selectProps?.id ?? Astro.locals.makeId(`input-${wrapperProps.name}`)
+const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
+---
+
+<InputWrapper inputId={inputId} required={selectProps?.required} {...wrapperProps}>
+  <select
+    transition:persist
+    {...omit(selectProps, ['class', 'id', 'name'])}
+    id={inputId}
+    class={cn(
+      baseInputClassNames.input,
+      'appearance-none',
+      selectProps?.class,
+      hasError && baseInputClassNames.error,
+      !!selectProps?.disabled && baseInputClassNames.disabled
+    )}
+    name={wrapperProps.name}
+  >
+    {
+      options.map((option) => (
+        <option value={option.value} disabled={option.disabled}>
+          {option.label}
+        </option>
+      ))
+    }
+  </select>
+</InputWrapper>

web/src/components/InputTextArea.astro

@@ -1,44 +1,36 @@
 ---
+import { omit } from 'lodash-es'
+
 import { cn } from '../lib/cn'
 import { baseInputClassNames } from '../lib/formInputs'
 
 import InputWrapper from './InputWrapper.astro'
 
-import type { ComponentProps } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 
-type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId'> & {
+type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId' | 'required'> & {
+  inputProps?: Omit<HTMLAttributes<'textarea'>, 'name'>
   value?: string
-  placeholder?: string
-  disabled?: boolean
-  autofocus?: boolean
-  rows?: number
-  maxlength?: number
 }
 
-const { value, placeholder, maxlength, disabled, autofocus, rows = 3, ...wrapperProps } = Astro.props
+const { inputProps, value, ...wrapperProps } = Astro.props
 
-const inputId = Astro.locals.makeId(`input-${wrapperProps.name}`)
+const inputId = inputProps?.id ?? Astro.locals.makeId(`input-${wrapperProps.name}`)
 const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
 ---
 
-{/* eslint-disable astro/jsx-a11y/no-autofocus */}
+<InputWrapper inputId={inputId} required={inputProps?.required} {...wrapperProps}>
-
-<InputWrapper inputId={inputId} {...wrapperProps}>
   <textarea
     transition:persist
+    {...omit(inputProps, ['class', 'id', 'name'])}
     id={inputId}
     class={cn(
       baseInputClassNames.input,
       baseInputClassNames.textarea,
+      inputProps?.class,
       hasError && baseInputClassNames.error,
-      disabled && baseInputClassNames.disabled
+      !!inputProps?.disabled && baseInputClassNames.disabled
     )}
-    placeholder={placeholder}
+    name={wrapperProps.name}>{value}</textarea
-    required={wrapperProps.required}
-    disabled={disabled}
-    name={wrapperProps.name}
-    autofocus={autofocus}
-    maxlength={maxlength}
-    rows={rows}>{value}</textarea
   >
 </InputWrapper>

web/src/components/InputWrapper.astro

@@ -66,7 +66,7 @@ const hasError = !!error && error.length > 0
 
   {
     !!description && (
-      <div class="prose prose-sm prose-invert prose-a:text-current prose-a:font-normal hover:prose-a:text-day-300 prose-a:transition-colors text-day-400 text-xs text-pretty">
+      <div class="prose prose-sm prose-invert prose-a:text-current prose-a:font-normal hover:prose-a:text-day-300 prose-a:transition-colors text-day-400 max-w-none text-xs text-pretty">
         <Markdown content={description} />
       </div>
     )

web/src/components/MyPicture.astro

@@ -0,0 +1,42 @@
+---
+import type { ComponentProps } from 'react'
+
+import { Picture } from 'astro:assets'
+
+import defaultServiceImage from '../assets/fallback-service-image.jpg'
+
+const fallbackImages = {
+  service: defaultServiceImage,
+} as const satisfies Record<string, typeof defaultServiceImage>
+
+type Props = Omit<ComponentProps<typeof Picture>, 'src'> & {
+  src: ComponentProps<typeof Picture>['src'] | null | undefined
+  fallback?: keyof typeof fallbackImages
+}
+
+const {
+  src,
+  formats = ['avif', 'webp'],
+  fallback = undefined as keyof typeof fallbackImages | undefined,
+  height,
+  width,
+  ...props
+} = Astro.props
+
+const fallbackImage = fallback ? fallbackImages[fallback] : undefined
+---
+
+{/* eslint-disable @typescript-eslint/no-explicit-any */}
+{
+  !!(src ?? fallbackImage) && (
+    <Picture
+      src={
+        typeof src === 'string' ? new URL(src, Astro.url).href : ((src ?? fallbackImage) as unknown as string)
+      }
+      formats={formats}
+      height={height ? Number(height) * 2 : undefined}
+      width={width ? Number(width) * 2 : undefined}
+      {...(props as any)}
+    />
+  )
+}

web/src/components/PillsRadioGroup.astro

@@ -17,7 +17,7 @@ const { name, options, selectedValue, class: className, ...rest } = Astro.props
 
 <div
   class={cn(
-    'bg-night-500 divide-night-700 flex divide-x-2 overflow-hidden rounded-md text-[0.6875rem]',
+    'bg-night-500 divide-night-700 has-focus-visible:ring-offset-night-700 flex divide-x-2 overflow-hidden rounded-md text-[0.6875rem] has-focus-visible:ring-2 has-focus-visible:ring-blue-500 has-focus-visible:ring-offset-2',
     className
   )}
   {...rest}
@@ -30,7 +30,7 @@ const { name, options, selectedValue, class: className, ...rest } = Astro.props
           name={name}
           value={option.value}
           checked={selectedValue === option.value}
-          class="peer hidden"
+          class="peer sr-only"
         />
         <span class="peer-checked:bg-night-400 inline-block cursor-pointer px-1.5 py-0.5 text-white peer-checked:text-green-500">
           {option.label}

web/src/components/ScoreSquare.astro

@@ -2,6 +2,7 @@
 import { Schema } from 'astro-seo-schema'
 
 import { cn } from '../lib/cn'
+import { makeOverallScoreInfo } from '../lib/overallScore'
 import { KYCNOTME_SCHEMA_MINI } from '../lib/schema'
 import { transformCase } from '../lib/strings'
 
@@ -16,33 +17,6 @@ export type Props = HTMLAttributes<'div'> & {
 
 const { score, label, total = 10, class: className, itemReviewedId, ...htmlProps } = Astro.props
 
-export function makeOverallScoreInfo(score: number, total = 10) {
-  const classNamesByColor = {
-    red: 'bg-score-1 text-black',
-    orange: 'bg-score-2 text-black',
-    yellow: 'bg-score-3 text-black',
-    blue: 'bg-score-4 text-black',
-    green: 'bg-score-5 text-black',
-  } as const satisfies Record<string, string>
-
-  const formattedScore = Math.round(score).toLocaleString()
-  const n = score / total
-
-  if (n > 1) return { text: '', classNameBg: classNamesByColor.green, formattedScore }
-  if (n >= 0.9 && n <= 1) return { text: 'Excellent', classNameBg: classNamesByColor.green, formattedScore }
-  if (n >= 0.8 && n < 0.9) return { text: 'Very Good', classNameBg: classNamesByColor.blue, formattedScore }
-  if (n >= 0.7 && n < 0.8) return { text: 'Good', classNameBg: classNamesByColor.blue, formattedScore }
-  if (n >= 0.6 && n < 0.7) return { text: 'Okay', classNameBg: classNamesByColor.yellow, formattedScore }
-  if (n >= 0.5 && n < 0.6) {
-    return { text: 'Acceptable', classNameBg: classNamesByColor.yellow, formattedScore }
-  }
-  if (n >= 0.4 && n < 0.5) return { text: 'Bad', classNameBg: classNamesByColor.orange, formattedScore }
-  if (n >= 0.3 && n < 0.4) return { text: 'Very Bad', classNameBg: classNamesByColor.orange, formattedScore }
-  if (n >= 0.2 && n < 0.3) return { text: 'Really Bad', classNameBg: classNamesByColor.red, formattedScore }
-  if (n >= 0 && n < 0.2) return { text: 'Terrible', classNameBg: classNamesByColor.red, formattedScore }
-  return { text: '', classNameBg: undefined, formattedScore }
-}
-
 const { text, classNameBg, formattedScore } = makeOverallScoreInfo(score, total)
 ---
 

web/src/components/ServiceCard.astro

@@ -1,14 +1,13 @@
 ---
 import { Icon } from 'astro-icon/components'
-import { Image } from 'astro:assets'
 
-import defaultImage from '../assets/fallback-service-image.jpg'
 import { currencies } from '../constants/currencies'
 import { verificationStatusesByValue } from '../constants/verificationStatus'
 import { cn } from '../lib/cn'
+import { makeOverallScoreInfo } from '../lib/overallScore'
 import { transformCase } from '../lib/strings'
 
-import { makeOverallScoreInfo } from './ScoreSquare.astro'
+import MyPicture from './MyPicture.astro'
 import Tooltip from './Tooltip.astro'
 
 import type { Prisma } from '@prisma/client'
@@ -76,9 +75,9 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
 >
   <!-- Header with Icon and Title -->
   <div class="flex items-center gap-(--gap)">
-    <Image
+    <MyPicture
-      src={// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      src={imageUrl}
-      imageUrl || (defaultImage as unknown as string)}
+      fallback="service"
       alt={name || 'Service logo'}
       class="size-12 shrink-0 rounded-sm object-contain text-white"
       width={48}

web/src/components/ServiceLinkButton.astro

@@ -112,7 +112,7 @@ if (!z.string().url().safeParse(link.url).success) {
   target="_blank"
   rel="noopener noreferrer"
   class={cn(
-    '2xs:text-sm 2xs:h-8 2xs:gap-2 inline-flex h-6 items-center gap-1 rounded-full bg-white text-xs whitespace-nowrap text-black',
+    '2xs:text-sm 2xs:h-8 2xs:gap-2 focus-visible:ring-offset-night-700 inline-flex h-6 items-center gap-1 rounded-full bg-white text-xs whitespace-nowrap text-black focus-visible:ring-4 focus-visible:ring-orange-500 focus-visible:ring-offset-2 focus-visible:outline-none',
     className
   )}
   {...htmlProps}

web/src/components/ServicesFilters.astro

@@ -3,11 +3,11 @@ import { Icon } from 'astro-icon/components'
 
 import { kycLevels } from '../constants/kycLevels'
 import { cn } from '../lib/cn'
+import { makeOverallScoreInfo } from '../lib/overallScore'
 import { type ServicesFiltersObject, type ServicesFiltersOptions } from '../pages/index.astro'
 
 import Button from './Button.astro'
 import PillsRadioGroup from './PillsRadioGroup.astro'
-import { makeOverallScoreInfo } from './ScoreSquare.astro'
 import Tooltip from './Tooltip.astro'
 
 import type { HTMLAttributes } from 'astro/types'
@@ -97,8 +97,7 @@ const {
   <!-- Type Filter -->
   <fieldset class="mb-6">
     <legend class="font-title mb-3 leading-none text-green-500">Type</legend>
-    <input type="checkbox" id="show-more-categories" class="peer hidden" hx-preserve data-show-more-input />
+    <ul class="[&:not(:has(~_.peer:checked))]:[&>li:not([data-show-always])]:hidden">
-    <ul class="not-peer-checked:[&>li:not([data-show-always])]:hidden">
       {
         options.categories?.map((category) => (
           <li data-show-always={category.showAlways ? '' : undefined}>
@@ -122,15 +121,22 @@ const {
     {
       options.categories.filter((category) => category.showAlways).length < options.categories.length && (
         <>
+          <input
+            type="checkbox"
+            id="show-more-categories"
+            class="peer sr-only"
+            hx-preserve
+            data-show-more-input
+          />
           <label
             for="show-more-categories"
-            class="mt-2 block cursor-pointer text-sm text-green-500 peer-checked:hidden"
+            class="peer-focus-visible:ring-offset-night-700 mt-2 block cursor-pointer rounded-sm text-sm text-green-500 peer-checked:hidden peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2"
           >
             + Show more
           </label>
           <label
             for="show-more-categories"
-            class="mt-2 hidden cursor-pointer text-sm text-green-500 peer-checked:block"
+            class="peer-focus-visible:ring-offset-night-700 mt-2 hidden cursor-pointer rounded-sm text-sm text-green-500 peer-checked:block peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2"
           >
             - Show less
           </label>
@@ -289,14 +295,8 @@ const {
       options.attributesByCategory.map(({ category, attributes }) => (
         <fieldset class="min-w-0">
           <legend class="font-title mb-0.5 text-xs tracking-wide text-white">{category}</legend>
-          <input
+
-            type="checkbox"
+          <ul class="[:not(:has(~_.peer:checked))]:[&>li:not([data-show-always])]:hidden">
-            id={`show-more-attributes-${category}`}
-            class="peer hidden"
-            hx-preserve
-            data-show-more-input
-          />
-          <ul class="not-peer-checked:[&>li:not([data-show-always])]:hidden">
             {attributes.map((attribute) => {
               const inputName = `attr-${attribute.id}` as const
               const yesId = `attr-${attribute.id}=yes` as const
@@ -306,13 +306,13 @@ const {
 
               return (
                 <li data-show-always={attribute.showAlways ? '' : undefined} class="cursor-pointer">
-                  <fieldset class="flex max-w-full min-w-0 cursor-pointer items-center text-sm text-white">
+                  <fieldset class="relative flex max-w-full min-w-0 cursor-pointer items-center text-sm text-white">
                     <legend class="sr-only">
                       {attribute.title} ({attribute._count?.services})
                     </legend>
                     <input
                       type="radio"
-                      class="peer/empty hidden"
+                      class="peer/empty sr-only"
                       id={emptyId}
                       name={inputName}
                       value=""
@@ -324,7 +324,7 @@ const {
                       name={inputName}
                       value="yes"
                       id={yesId}
-                      class="peer/yes hidden"
+                      class="peer/yes sr-only"
                       checked={attribute.value === 'yes'}
                       aria-label="Include"
                     />
@@ -333,38 +333,45 @@ const {
                       name={inputName}
                       value="no"
                       id={noId}
-                      class="peer/no hidden"
+                      class="peer/no sr-only"
                       checked={attribute.value === 'no'}
                       aria-label="Exclude"
                     />
 
+                    <div class="pointer-events-none absolute inset-y-0 -left-[2px] hidden w-[calc(var(--spacing)*4.5*2+1px)] rounded-md border-2 border-blue-500 peer-focus-visible/empty:block peer-focus-visible/no:block peer-focus-visible/yes:block" />
+
                     <label
                       for={yesId}
-                      class="flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-l-sm bg-zinc-950 peer-checked/yes:hidden"
+                      class="border-night-500 bg-night-600 relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-l-sm border border-r-0 peer-checked/yes:hidden before:absolute before:-inset-[3px] before:-right-[0.5px]"
                       aria-hidden="true"
                     >
                       <Icon name="ri:check-line" class="size-3" />
                     </label>
                     <label
                       for={emptyId}
-                      class="hidden size-4 shrink-0 cursor-pointer items-center justify-center rounded-l-sm bg-green-600 peer-checked/yes:flex"
+                      class="relative hidden h-4 w-[calc(var(--spacing)*4+0.5px)] shrink-0 cursor-pointer items-center justify-center rounded-l-sm bg-green-600 peer-checked/yes:flex before:absolute before:-inset-[2px] before:-right-[0.5px]"
                       aria-hidden="true"
                     >
                       <Icon name="ri:check-line" class="size-3" />
                     </label>
 
-                    <span class="block h-4 w-px border-y-2 border-zinc-950 bg-zinc-800" aria-hidden="true" />
+                    <span
+                      class="bg-night-400 border-night-500 pointer-events-none block h-4 w-px border-y peer-checked/no:w-[0.5px] peer-checked/yes:w-[0.5px]"
+                      aria-hidden="true"
+                    >
+                      <span class="bg-night-400 border-night-600 block h-full w-px border-y-2" />
+                    </span>
 
                     <label
                       for={noId}
-                      class="flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-r-sm bg-zinc-950 peer-checked/no:hidden"
+                      class="border-night-500 bg-night-600 relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-r-sm border border-l-0 peer-checked/no:hidden before:absolute before:-inset-[3px] before:-left-[0.5px]"
                       aria-hidden="true"
                     >
                       <Icon name="ri:close-line" class="size-3" />
                     </label>
                     <label
                       for={emptyId}
-                      class="hidden size-4 shrink-0 cursor-pointer items-center justify-center rounded-r-sm bg-red-600 peer-checked/no:flex"
+                      class="relative hidden size-4 w-[calc(var(--spacing)*4+0.5px)] shrink-0 cursor-pointer items-center justify-center rounded-r-sm bg-red-600 peer-checked/no:flex before:absolute before:-inset-[2px] before:-left-[0.5px]"
                       aria-hidden="true"
                     >
                       <Icon name="ri:close-line" class="size-3" />
@@ -376,8 +383,8 @@ const {
                       aria-hidden="true"
                     >
                       <Icon
-                        name={attribute.icon}
+                        name={attribute.info.icon}
-                        class={cn('mr-2 size-3 shrink-0 opacity-80', attribute.iconClass)}
+                        class={cn('mr-2 size-3 shrink-0 opacity-80', attribute.info.classNames.icon)}
                         aria-hidden="true"
                       />
                       <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
@@ -391,8 +398,8 @@ const {
                       aria-hidden="true"
                     >
                       <Icon
-                        name={attribute.icon}
+                        name={attribute.info.icon}
-                        class={cn('mr-2 size-3 shrink-0 opacity-100', attribute.iconClass)}
+                        class={cn('mr-2 size-3 shrink-0 opacity-100', attribute.info.classNames.icon)}
                         aria-hidden="true"
                       />
                       <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
@@ -405,17 +412,25 @@ const {
               )
             })}
           </ul>
+
           {attributes.filter((attribute) => attribute.showAlways).length < attributes.length && (
             <>
+              <input
+                type="checkbox"
+                id={`show-more-attributes-${category}`}
+                class="peer sr-only"
+                hx-preserve
+                data-show-more-input
+              />
               <label
                 for={`show-more-attributes-${category}`}
-                class="mt-2 block cursor-pointer text-sm text-green-500 peer-checked:hidden"
+                class="peer-focus-visible:ring-offset-night-700 mt-2 block cursor-pointer rounded-sm text-sm text-green-500 peer-checked:hidden peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2"
               >
                 + Show more
               </label>
               <label
                 for={`show-more-attributes-${category}`}
-                class="mt-2 hidden cursor-pointer text-sm text-green-500 peer-checked:block"
+                class="peer-focus-visible:ring-offset-night-700 mt-2 hidden cursor-pointer rounded-sm text-sm text-green-500 peer-checked:block peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2"
               >
                 - Show less
               </label>

web/src/constants/announcementTypes.ts

@@ -0,0 +1,65 @@
+import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
+import { transformCase } from '../lib/strings'
+
+import type { AnnouncementType } from '@prisma/client'
+
+type AnnouncementTypeInfo<T extends string | null | undefined = string> = {
+  value: T
+  label: string
+  icon: string
+  classNames: {
+    container: string
+    title: string
+    content: string
+  }
+}
+
+export const {
+  dataArray: announcementTypes,
+  dataObject: announcementTypesById,
+  getFn: getAnnouncementTypeInfo,
+} = makeHelpersForOptions(
+  'value',
+  (value): AnnouncementTypeInfo<typeof value> => ({
+    value,
+    label: value ? transformCase(value.replaceAll('_', ' '), 'title') : String(value),
+    icon: 'ri:information-line',
+    classNames: {
+      container: 'bg-blue-900/40 border-blue-500/30',
+      title: 'text-blue-400',
+      content: 'text-blue-300',
+    },
+  }),
+  [
+    {
+      value: 'INFO',
+      label: 'Info',
+      icon: 'ri:information-line',
+      classNames: {
+        container: 'bg-blue-900/40 border-blue-500/30',
+        title: 'text-blue-400',
+        content: 'text-blue-300',
+      },
+    },
+    {
+      value: 'WARNING',
+      label: 'Warning',
+      icon: 'ri:alert-line',
+      classNames: {
+        container: 'bg-yellow-900/40 border-yellow-500/30',
+        title: 'text-yellow-400',
+        content: 'text-yellow-300',
+      },
+    },
+    {
+      value: 'ALERT',
+      label: 'Alert',
+      icon: 'ri:error-warning-line',
+      classNames: {
+        container: 'bg-red-900/40 border-red-500/30',
+        title: 'text-red-400',
+        content: 'text-red-300',
+      },
+    },
+  ] as const satisfies AnnouncementTypeInfo<AnnouncementType>[]
+)

web/src/constants/attributeTypes.ts

@@ -34,7 +34,7 @@ export const {
     value,
     slug: value ? value.toLowerCase() : '',
     label: value ? transformCase(value, 'title') : String(value),
-    icon: 'ri:question-line',
+    icon: 'ri:question-fill',
     order: Infinity,
     classNames: {
       container: 'bg-current/30',
@@ -50,7 +50,7 @@ export const {
       value: 'BAD',
       slug: 'bad',
       label: 'Bad',
-      icon: 'ri:close-line',
+      icon: 'ri:close-circle-fill',
       order: 1,
       classNames: {
         container: 'bg-red-600/30',
@@ -65,7 +65,7 @@ export const {
       value: 'WARNING',
       slug: 'warning',
       label: 'Warning',
-      icon: 'ri:alert-line',
+      icon: 'ri:alert-fill',
       order: 2,
       classNames: {
         container: 'bg-yellow-600/30',
@@ -80,7 +80,7 @@ export const {
       value: 'GOOD',
       slug: 'good',
       label: 'Good',
-      icon: 'ri:check-line',
+      icon: 'ri:checkbox-circle-fill',
       order: 3,
       classNames: {
         container: 'bg-green-600/30',
@@ -95,7 +95,7 @@ export const {
       value: 'INFO',
       slug: 'info',
       label: 'Info',
-      icon: 'ri:information-line',
+      icon: 'ri:information-fill',
       order: 4,
       classNames: {
         container: 'bg-blue-600/30',

web/src/constants/karmaTransactionActions.ts

@@ -0,0 +1,86 @@
+import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
+import { transformCase } from '../lib/strings'
+
+import type { KarmaTransactionAction } from '@prisma/client'
+
+type KarmaTransactionActionInfo<T extends string | null | undefined = string> = {
+  value: T
+  slug: string
+  label: string
+  icon: string
+}
+
+export const {
+  dataArray: karmaTransactionActions,
+  dataObject: karmaTransactionActionsById,
+  getFn: getKarmaTransactionActionInfo,
+  getFnSlug: getKarmaTransactionActionInfoBySlug,
+  zodEnumBySlug: karmaTransactionActionsZodEnumBySlug,
+  zodEnumById: karmaTransactionActionsZodEnumById,
+  keyToSlug: karmaTransactionActionIdToSlug,
+  slugToKey: karmaTransactionActionSlugToId,
+} = makeHelpersForOptions(
+  'value',
+  (value): KarmaTransactionActionInfo<typeof value> => ({
+    value,
+    slug: value ? value.toLowerCase() : '',
+    label: value ? transformCase(value.replace('_', ' '), 'title') : String(value),
+    icon: 'ri:question-line',
+  }),
+  [
+    {
+      value: 'COMMENT_APPROVED',
+      slug: 'comment-approved',
+      label: 'Comment approved',
+      icon: 'ri:check-line',
+    },
+    {
+      value: 'COMMENT_VERIFIED',
+      slug: 'comment-verified',
+      label: 'Comment verified',
+      icon: 'ri:verified-badge-line',
+    },
+    {
+      value: 'COMMENT_SPAM',
+      slug: 'comment-spam',
+      label: 'Comment marked as SPAM',
+      icon: 'ri:spam-2-line',
+    },
+    {
+      value: 'COMMENT_SPAM_REVERTED',
+      slug: 'comment-spam-reverted',
+      label: 'Comment SPAM reverted',
+      icon: 'ri:spam-2-line',
+    },
+    {
+      value: 'COMMENT_UPVOTE',
+      slug: 'comment-upvote',
+      label: 'Comment upvoted',
+      icon: 'ri:thumb-up-line',
+    },
+    {
+      value: 'COMMENT_DOWNVOTE',
+      slug: 'comment-downvote',
+      label: 'Comment downvoted',
+      icon: 'ri:thumb-down-line',
+    },
+    {
+      value: 'COMMENT_VOTE_REMOVED',
+      slug: 'comment-vote-removed',
+      label: 'Comment vote removed',
+      icon: 'ri:thumb-up-line',
+    },
+    {
+      value: 'SUGGESTION_APPROVED',
+      slug: 'suggestion-approved',
+      label: 'Suggestion approved',
+      icon: 'ri:lightbulb-line',
+    },
+    {
+      value: 'MANUAL_ADJUSTMENT',
+      slug: 'manual-adjustment',
+      label: 'Manual adjustment',
+      icon: 'ri:gift-line',
+    },
+  ] as const satisfies KarmaTransactionActionInfo<KarmaTransactionAction>[]
+)

web/src/constants/serviceUserRoles.ts

@@ -49,7 +49,7 @@ export const {
       value: 'MODERATOR',
       slug: 'moderator',
       label: 'Moderator',
-      icon: 'ri:glasses-2-line',
+      icon: 'ri:graduation-cap-fill',
       order: 3,
       color: 'teal',
     },

web/src/layouts/MarkdownLayout.astro

@@ -16,6 +16,7 @@ type Props = ComponentProps<typeof BaseLayout> &
     author: string
     pubDate: string
     description: string
+    icon?: string
   }>
 
 const { frontmatter, schemas, ...baseLayoutProps } = Astro.props
@@ -23,6 +24,8 @@ const publishDate = frontmatter.pubDate ? new Date(frontmatter.pubDate) : null
 const ogImageTemplateData = {
   template: 'generic',
   title: frontmatter.title,
+  description: frontmatter.description,
+  icon: frontmatter.icon,
 } satisfies OgImageAllTemplatesWithProps
 const weAreAuthor = frontmatter.author.toLowerCase().trim() === 'kycnot.me'
 ---

web/src/lib/overallScore.ts

@@ -0,0 +1,26 @@
+export function makeOverallScoreInfo(score: number, total = 10) {
+  const classNamesByColor = {
+    red: 'bg-score-1 text-black',
+    orange: 'bg-score-2 text-black',
+    yellow: 'bg-score-3 text-black',
+    blue: 'bg-score-4 text-black',
+    green: 'bg-score-5 text-black',
+  } as const satisfies Record<string, string>
+
+  const formattedScore = Math.round(score).toLocaleString()
+  const n = score / total
+
+  if (n > 1) return { text: '', classNameBg: classNamesByColor.green, formattedScore }
+  if (n >= 0.9 && n <= 1) return { text: 'Excellent', classNameBg: classNamesByColor.green, formattedScore }
+  if (n >= 0.8 && n < 0.9) return { text: 'Very Good', classNameBg: classNamesByColor.blue, formattedScore }
+  if (n >= 0.7 && n < 0.8) return { text: 'Good', classNameBg: classNamesByColor.blue, formattedScore }
+  if (n >= 0.6 && n < 0.7) return { text: 'Okay', classNameBg: classNamesByColor.yellow, formattedScore }
+  if (n >= 0.5 && n < 0.6) {
+    return { text: 'Acceptable', classNameBg: classNamesByColor.yellow, formattedScore }
+  }
+  if (n >= 0.4 && n < 0.5) return { text: 'Bad', classNameBg: classNamesByColor.orange, formattedScore }
+  if (n >= 0.3 && n < 0.4) return { text: 'Very Bad', classNameBg: classNamesByColor.orange, formattedScore }
+  if (n >= 0.2 && n < 0.3) return { text: 'Really Bad', classNameBg: classNamesByColor.red, formattedScore }
+  if (n >= 0 && n < 0.2) return { text: 'Terrible', classNameBg: classNamesByColor.red, formattedScore }
+  return { text: '', classNameBg: undefined, formattedScore }
+}

web/src/lib/zodUtils.ts

@@ -50,7 +50,6 @@ export const ACCEPTED_IMAGE_TYPES = [
   'image/svg+xml',
   'image/png',
   'image/jpeg',
-  'image/jxl',
   'image/avif',
   'image/webp',
 ] as const satisfies string[]
@@ -66,7 +65,7 @@ export const imageFileSchema = z
   )
   .refine(
     (file) => !file || ACCEPTED_IMAGE_TYPES.some((type) => file.type === type),
-    'Only SVG, PNG, JPG, JPEG XL, AVIF, WebP formats are supported.'
+    'Only SVG, PNG, JPG, AVIF, WebP formats are supported.'
   )
 
 export const imageFileSchemaRequired = imageFileSchema.refine((file) => !!file, 'Required')

web/src/pages/about.mdx

@@ -4,8 +4,11 @@ title: About
 author: KYCnot.me
 pubDate: 2025-05-15
 description: 'Learn how KYCnot.me website works and about our mission to protect privacy in cryptocurrency.'
+icon: 'ri:information-line'
 ---
 
+import DonationAddress from '../components/DonationAddress.astro'
+
 ## What is this page?
 
 KYCnot.me is a directory of trustworthy alternatives for buying, exchanging, trading, and using cryptocurrencies without having to disclose your identity, thus preserving your right to privacy.
@@ -189,10 +192,13 @@ To **see comments waiting for moderation**, toggle the switch in the comments se
 
 ## Support the project
 
-If you like this project, you can support it through these methods:
+If you like this project, you can **support** it through these methods:
 
-- Monero:
+<DonationAddress
-  - `88V2Xi2mvcu3NdnHkVeZGyPtACg2w3iXZdUMJugUiPvFQHv5mVkih3o43ceVGz6cVs9uTBMt4MRMVW2xFgfGdh8DTCQ7vtp`
+  cryptoName="Monero"
+  cryptoIcon="monero"
+  address="86nkJeHWarEYZJh3gcPGKcQeueKbq2uRRC2NX6kopBpdHFfY1j4vmrVAwRG1T4pNBwBwfJ4U4USLUZ6CjDtacp8x4y8v3rq"
+/>
 
 ## Contact
 
@@ -201,8 +207,7 @@ You can contact via direct chat or via email.
 - [SimpleX Chat](https://simplex.chat/contact#/?v=2&smp=smp%3A%2F%2F0YuTwO05YJWS8rkjn9eLJDjQhFKvIYd8d4xG8X1blIU%3D%40smp8.simplex.im%2FcgKHYUYnpAIVoGb9lxb0qEMEpvYIvc1O%23%2F%3Fv%3D1-2%26dh%3DMCowBQYDK2VuAyEAIW_JSq8wOsLKG4Xv4O54uT2D_l8MJBYKQIFj1FjZpnU%253D%26srv%3Dbeccx4yfxxbvyhqypaavemqurytl6hozr47wfc7uuecacjqdvwpw2xid.onion)
 
 - If you use ProtonMail or Tutanota, you can have E2E encrypted communications with us directly. We also offer a [PGP Key](/pgp). Otherwise, we recommend reaching out via SimpleX chat for encrypted communications.
-  - [tuta.io](https://tuta.io) - <kycnotme@tuta.io>
+
-  - [proton.me](https://proton.me) - <contact@kycnot.me>
 
 ## Disclaimer
 

web/src/pages/account/edit.astro

@@ -24,7 +24,7 @@ const inputErrors = isInputError(result?.error) ? result.error.fields : {}
 <MiniLayout
   pageTitle={`Edit Profile - ${user.name}`}
   description="Edit your user profile"
-  ogImage={{ template: 'generic', title: 'Edit Profile' }}
+  ogImage={{ template: 'generic', title: 'Edit Profile', icon: 'ri:user-settings-line' }}
   layoutHeader={{
     icon: 'ri:edit-line',
     title: 'Edit profile',

web/src/pages/account/generate.astro

@@ -25,7 +25,12 @@ const prettyToken = preGeneratedToken ? prettifyUserSecretToken(preGeneratedToke
 <MiniLayout
   pageTitle="Create Account"
   description="Create a new account"
-  ogImage={{ template: 'generic', title: 'Create Account' }}
+  ogImage={{
+    template: 'generic',
+    title: 'Create Account',
+    description: 'Zero data, 100% anonymous',
+    icon: 'ri:user-add-line',
+  }}
   layoutHeader={{
     icon: 'ri:user-add-line',
     title: 'New account',

web/src/pages/account/index.astro

@@ -1,14 +1,14 @@
 ---
 import { Icon } from 'astro-icon/components'
 import { actions } from 'astro:actions'
-import { Picture } from 'astro:assets'
 import { sortBy } from 'lodash-es'
 
-import defaultServiceImage from '../../assets/fallback-service-image.jpg'
 import BadgeSmall from '../../components/BadgeSmall.astro'
 import Button from '../../components/Button.astro'
+import MyPicture from '../../components/MyPicture.astro'
 import TimeFormatted from '../../components/TimeFormatted.astro'
 import Tooltip from '../../components/Tooltip.astro'
+import { getKarmaTransactionActionInfo } from '../../constants/karmaTransactionActions'
 import { karmaUnlocks, karmaUnlocksById } from '../../constants/karmaUnlocks'
 import { SUPPORT_EMAIL } from '../../constants/project'
 import { getServiceSuggestionStatusInfo } from '../../constants/serviceSuggestionStatus'
@@ -61,6 +61,12 @@ const user = await Astro.locals.banners.try('user', async () => {
             action: true,
             description: true,
             createdAt: true,
+            grantedBy: {
+              select: {
+                name: true,
+                displayName: true,
+              },
+            },
             comment: {
               select: {
                 id: true,
@@ -154,7 +160,12 @@ if (!user) return Astro.rewrite('/404')
 <BaseLayout
   pageTitle={`${user.name} - Account`}
   description="Manage your user profile"
-  ogImage={{ template: 'generic', title: `${user.name} | Account` }}
+  ogImage={{
+    template: 'generic',
+    title: `${user.name} | Account`,
+    description: 'Manage your user profile',
+    icon: 'ri:user-3-line',
+  }}
   widthClassName="max-w-screen-md"
   className={{
     main: 'space-y-6',
@@ -173,7 +184,13 @@ if (!user) return Astro.rewrite('/404')
     <header class="flex items-center gap-4">
       {
         user.picture ? (
-          <img src={user.picture} alt="" class="ring-day-500/30 size-16 rounded-full ring-2" />
+          <MyPicture
+            src={user.picture}
+            alt=""
+            class="ring-day-500/30 size-16 rounded-full ring-2"
+            width={64}
+            height={64}
+          />
         ) : (
           <div class="bg-day-500/10 ring-day-500/30 text-day-400 flex size-16 items-center justify-center rounded-full ring-2">
             <Icon name="ri:user-3-line" class="size-8" />
@@ -453,8 +470,9 @@ if (!user) return Astro.rewrite('/404')
                   href={`/service/${affiliation.service.slug}`}
                   class="text-day-300 group flex min-w-32 items-center gap-2 text-sm"
                 >
-                  <Picture
+                  <MyPicture
-                    src={affiliation.service.imageUrl ?? (defaultServiceImage as unknown as string)}
+                    src={affiliation.service.imageUrl}
+                    fallback="service"
                     alt={affiliation.service.name}
                     width={40}
                     height={40}
@@ -864,24 +882,41 @@ if (!user) return Astro.rewrite('/404')
                 </tr>
               </thead>
               <tbody class="divide-night-400/10 divide-y">
-                {user.karmaTransactions.map((transaction) => (
+                {user.karmaTransactions.map((transaction) => {
-                  <tr class="hover:bg-night-500/5">
+                  const actionInfo = getKarmaTransactionActionInfo(transaction.action)
-                    <td class="text-day-300 px-4 py-3 text-xs whitespace-nowrap">{transaction.action}</td>
+                  return (
-                    <td class="text-day-300 px-4 py-3">{transaction.description}</td>
+                    <tr class="hover:bg-night-500/5">
-                    <td
+                      <td class="text-day-300 px-4 py-3 text-xs whitespace-nowrap">
-                      class={cn(
+                        <span class="inline-flex items-center gap-1">
-                        'px-4 py-3 text-right text-xs whitespace-nowrap',
+                          <Icon name={actionInfo.icon} class="size-4" />
-                        transaction.points >= 0 ? 'text-green-400' : 'text-red-400'
+                          {actionInfo.label}
-                      )}
+                          {transaction.action === 'MANUAL_ADJUSTMENT' && transaction.grantedBy && (
-                    >
+                            <a
-                      {transaction.points >= 0 && '+'}
+                              href={`/u/${transaction.grantedBy.name}`}
-                      {transaction.points}
+                              class="text-day-500 ml-1 hover:underline"
-                    </td>
+                            >
-                    <td class="text-day-400 px-4 py-3 text-right text-xs whitespace-nowrap">
+                              {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
-                      {new Date(transaction.createdAt).toLocaleDateString()}
+                              by {transaction.grantedBy.displayName || transaction.grantedBy.name}
-                    </td>
+                            </a>
-                  </tr>
+                          )}
-                ))}
+                        </span>
+                      </td>
+                      <td class="text-day-300 px-4 py-3">{transaction.description}</td>
+                      <td
+                        class={cn(
+                          'px-4 py-3 text-right text-xs whitespace-nowrap',
+                          transaction.points >= 0 ? 'text-green-400' : 'text-red-400'
+                        )}
+                      >
+                        {transaction.points >= 0 && '+'}
+                        {transaction.points}
+                      </td>
+                      <td class="text-day-400 px-4 py-3 text-right text-xs whitespace-nowrap">
+                        {new Date(transaction.createdAt).toLocaleDateString()}
+                      </td>
+                    </tr>
+                  )
+                })}
               </tbody>
             </table>
           </div>

web/src/pages/account/login.astro

@@ -30,7 +30,12 @@ const message = Astro.url.searchParams.get('message')
 <MiniLayout
   pageTitle="Login"
   description="Login to your account"
-  ogImage={{ template: 'generic', title: 'Login' }}
+  ogImage={{
+    template: 'generic',
+    title: 'Login',
+    description: message ?? 'Enter your login key',
+    icon: 'ri:login-box-line',
+  }}
   layoutHeader={{
     icon: 'ri:user-line',
     title: 'Welcome back',

web/src/pages/account/welcome.astro

@@ -17,7 +17,12 @@ const prettyToken = result ? prettifyUserSecretToken(result.data.token) : null
 <MiniLayout
   pageTitle="Welcome"
   description="New account welcome page"
-  ogImage={{ template: 'generic', title: 'Welcome' }}
+  ogImage={{
+    template: 'generic',
+    title: 'Welcome',
+    description: 'New account welcome page',
+    icon: 'ri:key-2-line',
+  }}
   layoutHeader={{
     icon: 'ri:key-2-line',
     title: 'Save your Login Key',

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

@@ -0,0 +1,749 @@
+---
+import { Icon } from 'astro-icon/components'
+import { actions, isInputError } from 'astro:actions'
+import { z } from 'astro:schema'
+
+import { adminAnnouncementActions } from '../../../actions/admin/announcement'
+import Button from '../../../components/Button.astro'
+import InputCardGroup from '../../../components/InputCardGroup.astro'
+import InputSelect from '../../../components/InputSelect.astro'
+import InputSubmitButton from '../../../components/InputSubmitButton.astro'
+import InputText from '../../../components/InputText.astro'
+import InputTextArea from '../../../components/InputTextArea.astro'
+import SortArrowIcon from '../../../components/SortArrowIcon.astro'
+import TimeFormatted from '../../../components/TimeFormatted.astro'
+import Tooltip from '../../../components/Tooltip.astro'
+import BaseLayout from '../../../layouts/BaseLayout.astro'
+import { zodParseQueryParamsStoringErrors } from '../../../lib/parseUrlFilters'
+import { prisma } from '../../../lib/prisma'
+
+import type { AnnouncementType, Prisma } from '@prisma/client'
+
+const { data: filters } = zodParseQueryParamsStoringErrors(
+  {
+    'sort-by': z
+      .enum(['title', 'type', 'startDate', 'endDate', 'isActive', 'createdAt'])
+      .default('createdAt'),
+    'sort-order': z.enum(['asc', 'desc']).default('desc'),
+    search: z.string().optional(),
+    type: z.enum(['INFO', 'WARNING', 'ALERT']).optional(),
+    status: z.enum(['active', 'inactive']).optional(),
+  },
+  Astro
+)
+
+// Set up Prisma orderBy with correct typing
+const prismaOrderBy = {
+  [filters['sort-by']]: filters['sort-order'] === 'asc' ? 'asc' : 'desc',
+} as const satisfies Prisma.AnnouncementOrderByWithRelationInput
+
+// Build where clause based on filters
+const whereClause: Prisma.AnnouncementWhereInput = {}
+
+if (filters.search) {
+  whereClause.OR = [
+    { title: { contains: filters.search, mode: 'insensitive' } },
+    { content: { contains: filters.search, mode: 'insensitive' } },
+  ]
+}
+
+if (filters.type) {
+  whereClause.type = filters.type as AnnouncementType
+}
+
+if (filters.status) {
+  whereClause.isActive = filters.status === 'active'
+}
+
+// Retrieve announcements from the database
+const announcements = await prisma.announcement.findMany({
+  where: whereClause,
+  orderBy: prismaOrderBy,
+})
+
+// Helper for generating sort URLs
+const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
+  const currentSortBy = filters['sort-by']
+  const currentSortOrder = filters['sort-order']
+  const newSortOrder = currentSortBy === slug && currentSortOrder === 'asc' ? 'desc' : 'asc'
+  const searchParams = new URLSearchParams(Astro.url.search)
+  searchParams.set('sort-by', slug)
+  searchParams.set('sort-order', newSortOrder)
+  return `/admin/announcements?${searchParams.toString()}`
+}
+
+// Get type badge class based on announcement type
+const getTypeBadgeClass = (type: AnnouncementType) => {
+  switch (type) {
+    case 'INFO':
+      return 'bg-blue-900/30 text-blue-400'
+    case 'WARNING':
+      return 'bg-yellow-900/30 text-yellow-400'
+    case 'ALERT':
+      return 'bg-red-900/30 text-red-400'
+    default:
+      return 'bg-zinc-900/30 text-zinc-400'
+  }
+}
+
+// Current date for form min values
+const currentDate = new Date().toISOString().slice(0, 16) // Format: YYYY-MM-DDThh:mm
+
+// Default new announcement
+const newAnnouncement = {
+  title: '',
+  content: '',
+  type: 'INFO' as const,
+  startDate: currentDate,
+  endDate: '',
+  isActive: true,
+}
+
+// Get action results
+const createResult = Astro.getActionResult(adminAnnouncementActions.create)
+const updateResult = Astro.getActionResult(adminAnnouncementActions.update)
+const deleteResult = Astro.getActionResult(adminAnnouncementActions.delete)
+const toggleResult = Astro.getActionResult(adminAnnouncementActions.toggleActive)
+
+const createInputErrors = isInputError(createResult?.error) ? createResult.error.fields : {}
+
+// Add success messages to banners
+Astro.locals.banners.addIfSuccess(createResult, 'Announcement created successfully!')
+Astro.locals.banners.addIfSuccess(updateResult, 'Announcement updated successfully!')
+Astro.locals.banners.addIfSuccess(deleteResult, 'Announcement deleted successfully!')
+Astro.locals.banners.addIfSuccess(
+  toggleResult,
+  (data) => `Announcement ${data.updatedAnnouncement.isActive ? 'activated' : 'deactivated'} successfully!`
+)
+
+// Add error messages to banners
+if (createResult?.error) {
+  const err = createResult.error
+  Astro.locals.banners.add({
+    uiMessage: err.message,
+    type: 'error',
+    origin: 'action',
+    error: err,
+  })
+}
+if (updateResult?.error) {
+  const err = updateResult.error
+  Astro.locals.banners.add({
+    uiMessage: err.message,
+    type: 'error',
+    origin: 'action',
+    error: err,
+  })
+}
+if (deleteResult?.error) {
+  const err = deleteResult.error
+  Astro.locals.banners.add({
+    uiMessage: err.message,
+    type: 'error',
+    origin: 'action',
+    error: err,
+  })
+}
+if (toggleResult?.error) {
+  const err = toggleResult.error
+  Astro.locals.banners.add({
+    uiMessage: err.message,
+    type: 'error',
+    origin: 'action',
+    error: err,
+  })
+}
+---
+
+<BaseLayout pageTitle="Announcement Management" widthClassName="max-w-screen-xl">
+  <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
+    <h1 class="font-title text-2xl font-bold text-white">Announcement Management</h1>
+    <div class="mt-2 flex items-center gap-4 sm:mt-0">
+      <span class="text-sm text-zinc-400">{announcements.length} announcements</span>
+    </div>
+  </div>
+
+  <div class="mb-6 rounded-lg border border-zinc-700 bg-zinc-800/50 p-4 shadow-lg">
+    <form method="GET" class="grid gap-3 md:grid-cols-3" autocomplete="off">
+      <div>
+        <label for="search" class="block text-xs font-medium text-zinc-400">Search</label>
+        <input
+          type="text"
+          name="search"
+          id="search"
+          value={filters.search}
+          placeholder="Search by title or content..."
+          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"
+        />
+      </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="" selected={!filters.type}>All Types</option>
+          <option value="INFO" selected={filters.type === 'INFO'}>Info</option>
+          <option value="WARNING" selected={filters.type === 'WARNING'}>Warning</option>
+          <option value="ALERT" selected={filters.type === 'ALERT'}>Alert</option>
+        </select>
+      </div>
+      <div>
+        <label for="status-filter" class="block text-xs font-medium text-zinc-400">Status</label>
+        <div class="mt-1 flex">
+          <select
+            name="status"
+            id="status-filter"
+            class="w-full rounded-l-md border border-r-0 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="" selected={!filters.status}>All Statuses</option>
+            <option value="active" selected={filters.status === 'active'}>Active</option>
+            <option value="inactive" selected={filters.status === 'inactive'}>Inactive</option>
+          </select>
+          <button
+            type="submit"
+            class="inline-flex items-center rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+          >
+            <Icon name="ri:search-2-line" class="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+
+  <!-- Create New Announcement Form -->
+  <div class="mb-6">
+    <button
+      id="toggle-new-announcement-form"
+      class="mb-4 inline-flex items-center rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+    >
+      <Icon name="ri:add-line" class="mr-1 h-4 w-4" />
+      Create New Announcement
+    </button>
+
+    <div
+      id="new-announcement-form"
+      class="hidden rounded-lg border border-zinc-700 bg-zinc-800/50 p-4 shadow-lg"
+    >
+      <h2 class="font-title mb-4 text-lg font-semibold text-blue-400">Create New Announcement</h2>
+      <form method="POST" action={actions.admin.announcement.create} class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-3 md:col-span-2">
+          <InputText
+            label="Title*"
+            name="title"
+            error={createInputErrors.title}
+            inputProps={{
+              required: true,
+              maxlength: 255,
+              placeholder: 'Announcement Title',
+              value: newAnnouncement.title,
+            }}
+          />
+
+          <InputTextArea
+            label="Content*"
+            name="content"
+            error={createInputErrors.content}
+            value={newAnnouncement.content}
+            inputProps={{
+              required: true,
+              maxlength: 1000,
+              rows: 3,
+              placeholder: 'Announcement Content',
+            }}
+          />
+        </div>
+
+        <div class="space-y-3">
+          <InputSelect
+            label="Type*"
+            name="type"
+            error={createInputErrors.type}
+            options={[
+              { label: 'Info', value: 'INFO' },
+              { label: 'Warning', value: 'WARNING' },
+              { label: 'Alert', value: 'ALERT' },
+            ]}
+            selectProps={{
+              required: true,
+              value: newAnnouncement.type,
+            }}
+          />
+
+          <InputText
+            label="Start Date & Time*"
+            name="startDate"
+            error={createInputErrors.startDate}
+            inputProps={{
+              type: 'datetime-local',
+              required: true,
+              value: newAnnouncement.startDate,
+            }}
+          />
+
+          <InputText
+            label="End Date & Time (Optional)"
+            name="endDate"
+            error={createInputErrors.endDate}
+            inputProps={{
+              type: 'datetime-local',
+              value: newAnnouncement.endDate,
+            }}
+          />
+        </div>
+
+        <div class="space-y-3">
+          <InputCardGroup
+            name="isActive"
+            label="Status"
+            error={createInputErrors.isActive}
+            options={[
+              { label: 'Active', value: 'true' },
+              { label: 'Inactive', value: 'false' },
+            ]}
+            selectedValue={newAnnouncement.isActive ? 'true' : 'false'}
+            cardSize="sm"
+          />
+
+          <div class="pt-4">
+            <InputSubmitButton label="Create Announcement" icon="ri:save-line" />
+            <button
+              type="button"
+              id="cancel-create"
+              class="ml-2 inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700 focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <!-- Delete Confirmation Modal -->
+  <dialog
+    id="delete-confirmation-modal"
+    class="m-auto max-w-md rounded-lg border border-zinc-700 bg-zinc-800 p-0 backdrop:bg-black/70"
+  >
+    <div class="p-4">
+      <div class="mb-4 flex items-center justify-between border-b border-zinc-700 pb-3">
+        <h3 class="font-title text-lg font-semibold text-red-400">Confirm Deletion</h3>
+        <button type="button" class="close-modal text-zinc-400 hover:text-zinc-200">
+          <Icon name="ri:close-line" class="h-6 w-6" />
+        </button>
+      </div>
+
+      <p class="mb-4 text-sm text-zinc-300">
+        Are you sure you want to delete this announcement? This action cannot be undone.
+      </p>
+
+      <form method="POST" action={actions.admin.announcement.delete} id="delete-form">
+        <input type="hidden" name="id" id="delete-id" />
+        <div class="flex justify-end gap-2">
+          <button
+            type="button"
+            class="close-modal inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700 focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            class="inline-flex items-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+          >
+            <Icon name="ri:delete-bin-line" class="mr-1 h-4 w-4" />
+            Delete
+          </button>
+        </div>
+      </form>
+    </div>
+  </dialog>
+
+  <!-- Announcements Table -->
+  <div class="rounded-lg border border-zinc-700 bg-zinc-800/50 shadow-lg">
+    <div class="sticky top-0 z-10 border-b border-zinc-700 bg-zinc-800/90 px-4 py-3 backdrop-blur-sm">
+      <h2 class="font-title font-semibold text-blue-400">Announcements List</h2>
+      <div class="mt-1 text-xs text-zinc-400 md:hidden">
+        <span>Scroll horizontally to see more →</span>
+      </div>
+    </div>
+    <div class="scrollbar-thin max-w-full overflow-x-auto">
+      <div class="min-w-[1200px]">
+        <table class="w-full divide-y divide-zinc-700">
+          <thead class="bg-zinc-900/30">
+            <tr>
+              <th
+                class="w-[20%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
+              >
+                <a href={makeSortUrl('title')} class="flex items-center hover:text-zinc-200">
+                  Title
+                  <SortArrowIcon active={filters['sort-by'] === 'title'} sortOrder={filters['sort-order']} />
+                </a>
+              </th>
+              <th
+                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-[15%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
+              >
+                <a href={makeSortUrl('startDate')} class="flex items-center hover:text-zinc-200">
+                  Start Date
+                  <SortArrowIcon
+                    active={filters['sort-by'] === 'startDate'}
+                    sortOrder={filters['sort-order']}
+                  />
+                </a>
+              </th>
+              <th
+                class="w-[15%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
+              >
+                <a href={makeSortUrl('endDate')} class="flex items-center hover:text-zinc-200">
+                  End Date
+                  <SortArrowIcon
+                    active={filters['sort-by'] === 'endDate'}
+                    sortOrder={filters['sort-order']}
+                  />
+                </a>
+              </th>
+              <th
+                class="w-[10%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
+              >
+                <a
+                  href={makeSortUrl('isActive')}
+                  class="flex items-center justify-center hover:text-zinc-200"
+                >
+                  Status
+                  <SortArrowIcon
+                    active={filters['sort-by'] === 'isActive'}
+                    sortOrder={filters['sort-order']}
+                  />
+                </a>
+              </th>
+              <th
+                class="w-[15%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
+              >
+                <a href={makeSortUrl('createdAt')} class="flex items-center hover:text-zinc-200">
+                  Created At
+                  <SortArrowIcon
+                    active={filters['sort-by'] === 'createdAt'}
+                    sortOrder={filters['sort-order']}
+                  />
+                </a>
+              </th>
+              <th
+                class="w-[15%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-zinc-700 bg-zinc-800/10">
+            {
+              announcements.length === 0 && (
+                <tr>
+                  <td colspan="7" class="px-4 py-8 text-center text-zinc-400">
+                    <Icon name="ri:information-line" class="mb-2 inline-block size-8" />
+                    <p class="text-lg">No announcements found matching your criteria.</p>
+                    <p class="text-sm">Try adjusting your search or filters, or create a new announcement.</p>
+                  </td>
+                </tr>
+              )
+            }
+            {
+              announcements.map((announcement) => (
+                <>
+                  <tr class="group hover:bg-zinc-700/30">
+                    <td class="px-4 py-3 text-sm">
+                      <div class="font-medium text-zinc-200">{announcement.title}</div>
+                      <div class="mt-1 line-clamp-1 text-xs text-zinc-400">{announcement.content}</div>
+                    </td>
+                    <td class="px-4 py-3 text-left text-sm">
+                      <span
+                        class={`inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium ${getTypeBadgeClass(announcement.type)}`}
+                      >
+                        {announcement.type}
+                      </span>
+                    </td>
+                    <td class="px-4 py-3 text-left text-sm text-zinc-300">
+                      <TimeFormatted date={announcement.startDate} hourPrecision={false} prefix={false} />
+                    </td>
+                    <td class="px-4 py-3 text-left text-sm text-zinc-300">
+                      {announcement.endDate ? (
+                        <TimeFormatted date={announcement.endDate} hourPrecision={false} prefix={false} />
+                      ) : (
+                        <span class="text-zinc-500">—</span>
+                      )}
+                    </td>
+                    <td class="px-4 py-3 text-center text-sm">
+                      <span
+                        class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${announcement.isActive ? 'bg-green-900/30 text-green-400' : 'bg-zinc-700/50 text-zinc-400'}`}
+                      >
+                        {announcement.isActive ? 'Active' : 'Inactive'}
+                      </span>
+                    </td>
+                    <td class="px-4 py-3 text-left text-sm text-zinc-400">
+                      <TimeFormatted date={announcement.createdAt} hourPrecision hoursShort prefix={false} />
+                    </td>
+                    <td class="px-4 py-3">
+                      <div class="flex justify-center gap-2">
+                        <Tooltip
+                          as="button"
+                          type="button"
+                          data-id={announcement.id}
+                          class="edit-button inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-1 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
+                          text="Edit"
+                          onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
+                        >
+                          <Icon name="ri:edit-line" class="size-4" />
+                        </Tooltip>
+
+                        <form
+                          method="POST"
+                          action={actions.admin.announcement.toggleActive}
+                          class="inline-block"
+                          data-confirm={`Are you sure you want to ${announcement.isActive ? 'deactivate' : 'activate'} this announcement?`}
+                        >
+                          <input type="hidden" name="id" value={announcement.id} />
+                          <input type="hidden" name="isActive" value={String(!announcement.isActive)} />
+                          <button
+                            type="submit"
+                            class={`rounded-md border px-1 py-1 text-xs transition-colors ${
+                              announcement.isActive
+                                ? 'border-yellow-500/50 bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30'
+                                : 'border-green-500/50 bg-green-500/20 text-green-400 hover:bg-green-500/30'
+                            }`}
+                          >
+                            <Tooltip text={announcement.isActive ? 'Deactivate' : 'Activate'}>
+                              <Icon
+                                name={announcement.isActive ? 'ri:pause-circle-line' : 'ri:play-circle-line'}
+                                class="size-4"
+                              />
+                            </Tooltip>
+                          </button>
+                        </form>
+
+                        <form
+                          method="POST"
+                          action={actions.admin.announcement.delete}
+                          class="inline-block"
+                          data-confirm="Are you sure you want to delete this announcement?"
+                        >
+                          <input type="hidden" name="id" value={announcement.id} />
+                          <button
+                            type="submit"
+                            class="rounded-md border border-red-500/50 bg-red-500/20 px-1 py-1 text-xs text-red-400 transition-colors hover:bg-red-500/30"
+                          >
+                            <Tooltip text="Delete">
+                              <Icon name="ri:delete-bin-line" class="size-4" />
+                            </Tooltip>
+                          </button>
+                        </form>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr id={`edit-announcement-form-${announcement.id}`} class="hidden bg-zinc-700/20">
+                    <td colspan="7" class="p-4">
+                      <h3 class="font-title text-md mb-3 font-semibold text-blue-300">
+                        Edit: {announcement.title}
+                      </h3>
+                      <form
+                        method="POST"
+                        action={actions.admin.announcement.update}
+                        class="grid gap-4 md:grid-cols-2"
+                      >
+                        <input type="hidden" name="id" value={announcement.id} />
+
+                        <div class="space-y-3 md:col-span-2">
+                          <InputText
+                            label="Title*"
+                            name="title"
+                            inputProps={{
+                              id: `edit-title-${announcement.id}`,
+                              required: true,
+                              maxlength: 255,
+                              value: announcement.title,
+                            }}
+                          />
+                          <InputTextArea
+                            label="Content*"
+                            name="content"
+                            value={announcement.content}
+                            inputProps={{
+                              id: `edit-content-${announcement.id}`,
+                              required: true,
+                              maxlength: 1000,
+                              rows: 3,
+                            }}
+                          />
+                        </div>
+
+                        <div class="space-y-3">
+                          <InputSelect
+                            label="Type*"
+                            name="type"
+                            options={[
+                              { label: 'Info', value: 'INFO' },
+                              { label: 'Warning', value: 'WARNING' },
+                              { label: 'Alert', value: 'ALERT' },
+                            ]}
+                            selectProps={{
+                              id: `edit-type-${announcement.id}`,
+                              required: true,
+                              value: announcement.type,
+                            }}
+                          />
+                          <InputText
+                            label="Start Date & Time*"
+                            name="startDate"
+                            inputProps={{
+                              id: `edit-startDate-${announcement.id}`,
+                              type: 'datetime-local',
+                              required: true,
+                              value: new Date(announcement.startDate).toISOString().slice(0, 16),
+                            }}
+                          />
+                          <InputText
+                            label="End Date & Time (Optional)"
+                            name="endDate"
+                            inputProps={{
+                              id: `edit-endDate-${announcement.id}`,
+                              type: 'datetime-local',
+                              value: announcement.endDate
+                                ? new Date(announcement.endDate).toISOString().slice(0, 16)
+                                : '',
+                            }}
+                          />
+                        </div>
+
+                        <div class="space-y-3">
+                          <InputCardGroup
+                            name="isActive"
+                            label="Status"
+                            options={[
+                              { label: 'Active', value: 'true' },
+                              { label: 'Inactive', value: 'false' },
+                            ]}
+                            selectedValue={announcement.isActive ? 'true' : 'false'}
+                            cardSize="sm"
+                          />
+                          <div class="pt-4">
+                            <InputSubmitButton label="Save Changes" icon="ri:save-line" hideCancel={true} />
+                            <Button
+                              type="button"
+                              label="Cancel"
+                              color="gray"
+                              onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
+                              class="ml-2"
+                            />
+                          </div>
+                        </div>
+                      </form>
+                    </td>
+                  </tr>
+                </>
+              ))
+            }
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</BaseLayout>
+
+<style>
+  .text-2xs {
+    font-size: 0.6875rem;
+    line-height: 1rem;
+  }
+  .scrollbar-thin::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+  }
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: rgba(30, 41, 59, 0.2);
+    border-radius: 3px;
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: rgba(75, 85, 99, 0.5);
+    border-radius: 3px;
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: rgba(100, 116, 139, 0.6);
+  }
+  @media (max-width: 768px) {
+    .scrollbar-thin {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(75, 85, 99, 0.5) rgba(30, 41, 59, 0.2);
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  /* Fix for date input appearance in dark mode */
+  input[type='date'] {
+    color-scheme: dark;
+  }
+  input[type='datetime-local'] {
+    color-scheme: dark;
+  }
+</style>
+
+<script>
+  // Toggle Create Form
+  const toggleFormBtn = document.getElementById('toggle-new-announcement-form')
+  const newAnnouncementForm = document.getElementById('new-announcement-form')
+  const cancelCreateBtn = document.getElementById('cancel-create')
+
+  toggleFormBtn?.addEventListener('click', () => {
+    newAnnouncementForm?.classList.toggle('hidden')
+  })
+
+  cancelCreateBtn?.addEventListener('click', () => {
+    newAnnouncementForm?.classList.add('hidden')
+  })
+
+  // Delete Modal functionality
+  const deleteModal = document.getElementById('delete-confirmation-modal') as HTMLDialogElement
+  const deleteButtons = document.querySelectorAll('.delete-button')
+  // const deleteForm = document.getElementById('delete-form') as HTMLFormElement // Not strictly needed if not manipulating it
+
+  deleteButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      const id = button.getAttribute('data-id')
+      const deleteIdInput = document.getElementById('delete-id') as HTMLInputElement
+      if (deleteIdInput) {
+        deleteIdInput.value = id || ''
+      }
+      deleteModal?.showModal()
+    })
+  })
+
+  // Close Modal buttons
+  const closeModalButtons = document.querySelectorAll('.close-modal')
+  closeModalButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      const modal = button.closest('dialog')
+      modal?.close()
+    })
+  })
+
+  // Close modals when clicking outside
+  const dialogs = document.querySelectorAll('dialog')
+  dialogs.forEach((dialog) => {
+    dialog.addEventListener('click', (e) => {
+      const rect = dialog.getBoundingClientRect()
+      const isInDialog =
+        rect.top <= e.clientY &&
+        e.clientY <= rect.top + rect.height &&
+        rect.left <= e.clientX &&
+        e.clientX <= rect.left + rect.width
+      if (!isInDialog) {
+        dialog.close()
+      }
+    })
+  })
+</script>

web/src/pages/admin/index.astro

@@ -43,6 +43,12 @@ const adminLinks: AdminLink[] = [
     href: '/admin/service-suggestions',
     description: 'Review and manage service suggestions',
   },
+  {
+    icon: 'ri:megaphone-line',
+    title: 'Announcements',
+    href: '/admin/announcements',
+    description: 'Manage site announcements',
+  },
 ]
 ---
 

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

@@ -8,8 +8,8 @@ import {
 } from '@prisma/client'
 import { Icon } from 'astro-icon/components'
 import { actions, isInputError } from 'astro:actions'
-import { Image } from 'astro:assets'
 
+import MyPicture from '../../../../components/MyPicture.astro'
 import { serviceVisibilities } from '../../../../constants/serviceVisibility'
 import BaseLayout from '../../../../layouts/BaseLayout.astro'
 import { cn } from '../../../../lib/cn'
@@ -334,7 +334,7 @@ const buttonSmallWarningClasses = cn(
             {
               service.imageUrl ? (
                 <div class="mt-2 shrink-0">
-                  <Image
+                  <MyPicture
                     src={service.imageUrl}
                     alt="Current service image"
                     width={100}

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

@@ -2,9 +2,8 @@
 import { ServiceVisibility, VerificationStatus, type Prisma } from '@prisma/client'
 import { z } from 'astro/zod'
 import { Icon } from 'astro-icon/components'
-import { Image } from 'astro:assets'
 
-import defaultImage from '../../../assets/fallback-service-image.jpg'
+import MyPicture from '../../../components/MyPicture.astro'
 import SortArrowIcon from '../../../components/SortArrowIcon.astro'
 import { getKycLevelInfo } from '../../../constants/kycLevels'
 import { getVerificationStatusInfo } from '../../../constants/verificationStatus'
@@ -343,23 +342,14 @@ const truncate = (text: string, length: number) => {
                   <td class="px-4 py-3">
                     <div class="flex items-center space-x-3">
                       <div class="h-10 w-10 flex-shrink-0">
-                        {service.imageUrl ? (
+                        <MyPicture
-                          <Image
+                          src={service.imageUrl}
-                            src={service.imageUrl}
+                          fallback="service"
-                            alt={service.name}
+                          alt={service.name}
-                            width={40}
+                          width={40}
-                            height={40}
+                          height={40}
-                            class="h-10 w-10 rounded-md object-cover"
+                          class="h-10 w-10 rounded-md object-cover"
-                          />
+                        />
-                        ) : (
-                          <Image
-                            src={defaultImage}
-                            alt={service.name}
-                            width={40}
-                            height={40}
-                            class="h-10 w-10 rounded-md object-cover"
-                          />
-                        )}
                       </div>
                       <div class="min-w-0 flex-1">
                         <div class="text-sm font-medium text-zinc-200">{service.name}</div>

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

@@ -2,11 +2,19 @@
 import { Icon } from 'astro-icon/components'
 import { actions, isInputError } from 'astro:actions'
 
-import Tooltip from '../../../components/Tooltip.astro'
+import BadgeSmall from '../../../components/BadgeSmall.astro'
+import Button from '../../../components/Button.astro'
+import InputCardGroup from '../../../components/InputCardGroup.astro'
+import InputImageFile from '../../../components/InputImageFile.astro'
+import InputSelect from '../../../components/InputSelect.astro'
+import InputSubmitButton from '../../../components/InputSubmitButton.astro'
+import InputText from '../../../components/InputText.astro'
+import InputTextArea from '../../../components/InputTextArea.astro'
+import MyPicture from '../../../components/MyPicture.astro'
+import TimeFormatted from '../../../components/TimeFormatted.astro'
+import { getServiceUserRoleInfo, serviceUserRoles } from '../../../constants/serviceUserRoles'
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { prisma } from '../../../lib/prisma'
-import { transformCase } from '../../../lib/strings'
-import { timeAgo } from '../../../lib/timeAgo'
 
 const { username } = Astro.params
 
@@ -25,6 +33,9 @@ Astro.locals.banners.addIfSuccess(addAffiliationResult, 'Service affiliation add
 const removeAffiliationResult = Astro.getActionResult(actions.admin.user.serviceAffiliations.remove)
 Astro.locals.banners.addIfSuccess(removeAffiliationResult, 'Service affiliation removed successfully')
 
+const addKarmaTransactionResult = Astro.getActionResult(actions.admin.user.karmaTransactions.add)
+Astro.locals.banners.addIfSuccess(addKarmaTransactionResult, 'Karma transaction added successfully')
+
 const [user, allServices] = await Astro.locals.banners.tryMany([
   [
     'Failed to load user profile',
@@ -53,6 +64,8 @@ const [user, allServices] = await Astro.locals.banners.tryMany([
                 select: {
                   id: true,
                   name: true,
+                  displayName: true,
+                  picture: true,
                 },
               },
             },
@@ -102,483 +115,343 @@ const [user, allServices] = await Astro.locals.banners.tryMany([
 if (!user) return Astro.rewrite('/404')
 ---
 
-<BaseLayout pageTitle={`User: ${user.name}`} htmx>
+<BaseLayout
-  <div class="container mx-auto max-w-2xl py-8">
+  pageTitle={`User: ${user.name}`}
-    <div class="mb-6 flex items-center justify-between">
+  widthClassName="max-w-screen-lg"
-      <h1 class="font-title text-2xl text-green-400">User Profile: {user.name}</h1>
+  className={{ main: 'space-y-24' }}
-      <a
+>
-        href="/admin/users"
+  <div class="mt-12">
-        class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
+    {
-      >
+      !!user.picture && (
-        <Icon name="ri:arrow-left-line" class="mr-1 size-4" />
+        <MyPicture
-        Back to Users
+          src={user.picture}
-      </a>
+          alt=""
+          width={80}
+          height={80}
+          class="mx-auto mb-2 block size-20 rounded-full"
+        />
+      )
+    }
+    <h1
+      class="font-title mb-2 flex items-center justify-center gap-2 text-center text-3xl leading-none font-bold"
+    >
+      {user.displayName ? `${user.displayName} (${user.name})` : user.name}
+    </h1>
+
+    <div class="mb-4 flex flex-wrap justify-center gap-2">
+      {user.admin && <BadgeSmall color="green" text="Admin" icon="ri:shield-star-fill" />}
+      {user.verified && <BadgeSmall color="cyan" text="Verified" icon="ri:verified-badge-fill" />}
+      {user.verifier && <BadgeSmall color="blue" text="Moderator" icon="ri:graduation-cap-fill" />}
+      {user.spammer && <BadgeSmall color="red" text="Spammer" icon="ri:alert-fill" />}
     </div>
 
-    <section
+    <div class="flex justify-center gap-2">
-      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"
+      <Button
-    >
+        as="a"
-      <div class="mb-6 flex items-center gap-4">
+        href={`/u/${user.name}`}
-        {
+        icon="ri:global-line"
-          user.picture ? (
+        color="success"
-            <img src={user.picture} alt="" class="h-16 w-16 rounded-full ring-2 ring-green-500/30" />
+        shadow
-          ) : (
+        size="sm"
-            <div class="flex h-16 w-16 items-center justify-center rounded-full bg-green-500/10 ring-2 ring-green-500/30">
+        label="View public profile"
-              <span class="font-title text-2xl text-green-500">{user.name.charAt(0) || 'A'}</span>
+      />
-            </div>
-          )
-        }
-        <div>
-          <h2 class="font-title text-lg text-green-400">{user.name}</h2>
-          <div class="mt-1 flex gap-2">
-            {
-              user.admin && (
-                <span class="font-title rounded-full border border-red-500/50 bg-red-500/20 px-2 py-0.5 text-xs text-red-400">
-                  admin
-                </span>
-              )
-            }
-            {
-              user.verified && (
-                <span class="font-title rounded-full border border-blue-500/50 bg-blue-500/20 px-2 py-0.5 text-xs text-blue-400">
-                  verified
-                </span>
-              )
-            }
-            {
-              user.verifier && (
-                <span class="font-title rounded-full border border-green-500/50 bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
-                  verifier
-                </span>
-              )
-            }
-          </div>
-        </div>
-      </div>
-
-      <form
-        method="POST"
-        action={actions.admin.user.update}
-        class="space-y-4 border-t border-green-500/30 pt-6"
-        enctype="multipart/form-data"
-      >
-        <input type="hidden" name="id" value={user.id} />
-
-        <div>
-          <label class="font-title mb-2 block text-sm text-green-500" for="name"> Name </label>
-          <input
-            transition:persist
-            type="text"
-            name="name"
-            id="name"
-            value={user.name}
-            required
-            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
-          />
-          {
-            updateInputErrors.name && (
-              <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.name.join(', ')}</p>
-            )
-          }
-        </div>
-
-        <div>
-          <label class="font-title mb-2 block text-sm text-green-500" for="displayName"> Display Name </label>
-          <input
-            transition:persist
-            type="text"
-            name="displayName"
-            maxlength={50}
-            id="displayName"
-            value={user.displayName ?? ''}
-            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
-          />
-          {
-            Array.isArray(updateInputErrors.displayName) && updateInputErrors.displayName.length > 0 && (
-              <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.displayName.join(', ')}</p>
-            )
-          }
-        </div>
-
-        <div>
-          <label class="font-title mb-2 block text-sm text-green-500" for="link"> Link </label>
-          <input
-            transition:persist
-            type="url"
-            name="link"
-            id="link"
-            value={user.link ?? ''}
-            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
-          />
-          {
-            updateInputErrors.link && (
-              <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.link.join(', ')}</p>
-            )
-          }
-        </div>
-
-        <div>
-          <label class="font-title mb-2 block text-sm text-green-500" for="picture">
-            Picture url or path
-          </label>
-          <input
-            transition:persist
-            type="text"
-            name="picture"
-            id="picture"
-            value={user.picture ?? ''}
-            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
-          />
-          {
-            updateInputErrors.picture && (
-              <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.picture.join(', ')}</p>
-            )
-          }
-        </div>
-
-        <div>
-          <label class="font-title mb-2 block text-sm text-green-500" for="pictureFile">
-            Profile Picture Upload
-          </label>
-          <input
-            transition:persist
-            type="file"
-            name="pictureFile"
-            id="pictureFile"
-            accept="image/*"
-            class="font-title file:font-title block w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 file:mr-3 file:rounded-md file:border-0 file:bg-green-500/30 file:px-3 file:py-1 file:text-gray-300 focus:border-green-500 focus:ring-green-500"
-          />
-          <p class="font-title text-xs text-gray-400">
-            Upload a square image for best results. Supported formats: JPG, PNG, WebP, AVIF, JXL. Max size:
-            5MB.
-          </p>
-        </div>
-
-        <div class="flex gap-6">
-          <label class="flex items-center gap-2">
-            <input
-              transition:persist
-              type="checkbox"
-              name="admin"
-              checked={user.admin}
-              class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
-            />
-            <span class="font-title text-sm text-green-500">Admin</span>
-          </label>
-
-          <Tooltip
-            as="label"
-            class="flex cursor-not-allowed items-center gap-2"
-            text="Automatically set based on verified link"
-          >
-            <input
-              type="checkbox"
-              name="verified"
-              checked={user.verified}
-              class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
-              disabled
-            />
-            <span class="font-title text-sm text-green-500">Verified</span>
-          </Tooltip>
-
-          <label class="flex items-center gap-2">
-            <input
-              transition:persist
-              type="checkbox"
-              name="verifier"
-              checked={user.verifier}
-              class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
-            />
-            <span class="font-title text-sm text-green-500">Verifier</span>
-          </label>
-
-          <label class="flex items-center gap-2">
-            <input
-              transition:persist
-              type="checkbox"
-              name="spammer"
-              checked={user.spammer}
-              class="rounded-sm border-red-500/30 bg-black/50 text-red-500 focus:ring-red-500 focus:ring-offset-black"
-            />
-            <span class="font-title text-sm text-red-500">Spammer</span>
-          </label>
-        </div>
-
-        {
-          updateInputErrors.admin && (
-            <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.admin.join(', ')}</p>
-          )
-        }
-        {
-          updateInputErrors.verifier && (
-            <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.verifier.join(', ')}</p>
-          )
-        }
-        {
-          updateInputErrors.spammer && (
-            <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.spammer.join(', ')}</p>
-          )
-        }
-
-        <div>
-          <label class="font-title mb-2 block text-sm text-green-500" for="verifiedLink">
-            Verified Link
-          </label>
-          <input
-            transition:persist
-            type="url"
-            name="verifiedLink"
-            id="verifiedLink"
-            value={user.verifiedLink}
-            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
-          />
-          {
-            updateInputErrors.verifiedLink && (
-              <p class="font-title mt-1 text-sm text-red-500">{updateInputErrors.verifiedLink.join(', ')}</p>
-            )
-          }
-        </div>
-
-        <div class="flex gap-4 pt-4">
-          <button
-            type="submit"
-            class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
-          >
-            <Icon name="ri:save-line" class="mr-2 size-4" />
-            Save
-          </button>
-        </div>
-      </form>
       {
-        Astro.locals.user && user.id !== Astro.locals.user.id && (
+        Astro.locals.user && user.id !== Astro.locals.user.id && !user.admin && (
-          <a
+          <Button
+            as="a"
             href={`/account/impersonate?targetUserId=${user.id}&redirect=/account`}
-            class="font-title mt-4 inline-flex items-center justify-center rounded-md border border-yellow-500/30 bg-yellow-500/10 px-4 py-2 text-sm text-yellow-400 shadow-xs transition-colors duration-200 hover:bg-yellow-500/20 focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
+            data-astro-prefetch="tap"
-          >
+            icon="ri:spy-line"
-            <Icon name="ri:spy-line" class="mr-2 size-4" />
+            color="gray"
-            Impersonate
+            size="sm"
-          </a>
+            label="Impersonate"
+          />
         )
       }
-    </section>
+    </div>
+  </div>
 
-    <section
+  <form
-      class="mt-8 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"
+    method="POST"
-    >
+    action={actions.admin.user.update}
-      <h2 class="font-title mb-4 text-lg text-green-500">Internal Notes</h2>
+    enctype="multipart/form-data"
+    class="space-y-2"
+    data-astro-reload
+  >
+    <h2 class="font-title text-center text-3xl leading-none font-bold">Edit profile</h2>
 
-      {
+    <input type="hidden" name="id" value={user.id} />
-        user.internalNotes.length === 0 ? (
-          <p class="text-gray-400">No internal notes yet.</p>
-        ) : (
-          <div class="space-y-4">
-            {user.internalNotes.map((note) => (
-              <div data-note-id={note.id} class="rounded-lg border border-green-500/30 bg-black/50 p-4">
-                <div class="mb-2 flex items-center justify-between">
-                  <div class="flex items-center gap-2">
-                    <span class="font-title text-xs text-gray-200">
-                      {note.addedByUser ? note.addedByUser.name : 'System'}
-                    </span>
-                    <span class="font-title text-xs text-gray-500">
-                      {transformCase(timeAgo.format(note.createdAt, 'twitter-minute-now'), 'sentence')}
-                    </span>
-                  </div>
 
-                  <div class="flex items-center gap-2">
+    <div class="grid grid-cols-2 gap-x-4 gap-y-2">
-                    <label class="font-title inline-flex cursor-pointer items-center justify-center rounded-md border border-yellow-500/30 bg-yellow-500/10 px-2 py-1 text-xs text-yellow-400 shadow-xs transition-colors duration-200 hover:bg-yellow-500/20 focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden">
+      <InputText
-                      <input
+        label="Name"
-                        type="checkbox"
+        name="name"
-                        class="peer sr-only"
+        error={updateInputErrors.name}
-                        data-edit-note-checkbox
+        inputProps={{ value: user.name, required: true }}
-                        data-note-id={note.id}
+      />
-                      />
-                      <Icon name="ri:edit-line" class="size-3" />
-                    </label>
 
-                    <form method="POST" action={actions.admin.user.internalNotes.delete} class="inline-flex">
+      <InputText
-                      <input type="hidden" name="noteId" value={note.id} />
+        label="Display Name"
-                      <button
+        name="displayName"
-                        type="submit"
+        error={updateInputErrors.displayName}
-                        class="font-title inline-flex items-center justify-center rounded-md border border-red-500/30 bg-red-500/10 px-2 py-1 text-xs text-red-400 shadow-xs transition-colors duration-200 hover:bg-red-500/20 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
+        inputProps={{ value: user.displayName ?? '', maxlength: 50 }}
-                      >
+      />
-                        <Icon name="ri:delete-bin-line" class="size-3" />
+
-                      </button>
+      <InputText
-                    </form>
+        label="Link"
-                  </div>
+        name="link"
+        error={updateInputErrors.link}
+        inputProps={{ value: user.link ?? '', type: 'url' }}
+      />
+
+      <InputText
+        label="Verified Link"
+        name="verifiedLink"
+        error={updateInputErrors.verifiedLink}
+        inputProps={{ value: user.verifiedLink, type: 'url' }}
+      />
+    </div>
+
+    <InputImageFile
+      label="Profile Picture Upload"
+      name="pictureFile"
+      value={user.picture}
+      error={updateInputErrors.pictureFile}
+      square
+      description="Upload a square image for best results. Supported formats: JPG, PNG, WebP, AVIF. Max size: 5MB."
+    />
+
+    <InputCardGroup
+      name="type"
+      label="Type"
+      options={[
+        { label: 'Admin', value: 'admin', icon: 'ri:shield-star-fill' },
+        { label: 'Moderator', value: 'verifier', icon: 'ri:graduation-cap-fill' },
+        { label: 'Spammer', value: 'spammer', icon: 'ri:alert-fill' },
+        {
+          label: 'Verified',
+          value: 'verified',
+          icon: 'ri:verified-badge-fill',
+          disabled: true,
+          noTransitionPersist: true,
+        },
+      ]}
+      selectedValue={[
+        user.admin ? 'admin' : null,
+        user.verified ? 'verified' : null,
+        user.verifier ? 'verifier' : null,
+        user.spammer ? 'spammer' : null,
+      ].filter((v) => v !== null)}
+      required
+      cardSize="sm"
+      iconSize="sm"
+      multiple
+      error={updateInputErrors.type}
+    />
+
+    <InputSubmitButton label="Save" icon="ri:save-line" hideCancel />
+  </form>
+
+  <section class="space-y-2">
+    <h2 class="font-title text-center text-3xl leading-none font-bold">Internal Notes</h2>
+
+    {
+      user.internalNotes.length === 0 ? (
+        <p class="text-day-300 text-center">No internal notes yet.</p>
+      ) : (
+        <div class="space-y-4">
+          {user.internalNotes.map((note) => (
+            <div data-note-id={note.id} class="border-night-400 bg-night-600 rounded-lg border p-4 shadow-sm">
+              <div class="mb-1 flex items-center justify-between gap-4">
+                <div class="flex items-center gap-1">
+                  {!!note.addedByUser?.picture && (
+                    <MyPicture
+                      src={note.addedByUser.picture}
+                      alt=""
+                      width={12}
+                      height={12}
+                      class="size-6 rounded-full"
+                    />
+                  )}
+                  <span class="text-day-100 font-medium">
+                    {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+                    {note.addedByUser ? note.addedByUser.displayName || note.addedByUser.name : 'System'}
+                  </span>
+                  <TimeFormatted date={note.createdAt} hourPrecision class="text-day-300 ms-1 text-sm" />
                 </div>
-                <div data-note-content>
+
-                  <p class="font-title text-sm whitespace-pre-wrap text-gray-300">{note.content}</p>
+                <div class="flex items-center">
-                </div>
+                  <label class="text-day-300 hover:text-day-100 cursor-pointer p-1 transition-colors">
-                <form
+                    <input
-                  method="POST"
+                      type="checkbox"
-                  action={actions.admin.user.internalNotes.update}
+                      class="peer sr-only"
-                  data-note-edit-form
+                      data-edit-note-checkbox
-                  class="mt-2 hidden"
+                      data-note-id={note.id}
-                >
+                    />
-                  <input type="hidden" name="noteId" value={note.id} />
+                    <Icon name="ri:edit-line" class="size-5" />
-                  <textarea
+                  </label>
-                    name="content"
+
-                    rows="3"
+                  <form
-                    class="font-title min-h-12 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"
+                    method="POST"
-                    data-trim-content
+                    action={actions.admin.user.internalNotes.delete}
+                    class="contents"
+                    data-astro-reload
                   >
-                    {note.content}
+                    <input type="hidden" name="noteId" value={note.id} />
-                  </textarea>
+                    <button type="submit" class="text-day-300 p-1 transition-colors hover:text-red-400">
-
+                      <Icon name="ri:delete-bin-line" class="size-5" />
-                  <div class="mt-2 flex justify-end gap-2">
-                    <button
-                      type="button"
-                      data-cancel-edit
-                      class="font-title inline-flex items-center justify-center rounded-md border border-gray-500/30 bg-gray-500/10 px-3 py-1 text-xs text-gray-400 shadow-xs transition-colors duration-200 hover:bg-gray-500/20 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
-                    >
-                      Cancel
                     </button>
-                    <button
+                  </form>
-                      type="submit"
-                      class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-3 py-1 text-xs text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
-                    >
-                      Save
-                    </button>
-                  </div>
-                </form>
-              </div>
-            ))}
-          </div>
-        )
-      }
-
-      <form method="POST" action={actions.admin.user.internalNotes.add} class="mt-4 space-y-2">
-        <input type="hidden" name="userId" value={user.id} />
-        <textarea
-          name="content"
-          placeholder="Add a note..."
-          rows="3"
-          class="font-title min-h-12 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"
-        ></textarea>
-        <button
-          type="submit"
-          class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
-        >
-          <Icon name="ri:add-line" class="mr-1 size-4" />
-          Add
-        </button>
-      </form>
-    </section>
-
-    <section
-      class="mt-8 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"
-    >
-      <h2 class="font-title mb-4 text-lg text-green-500">Service Affiliations</h2>
-
-      {
-        user.serviceAffiliations.length === 0 ? (
-          <p class="text-gray-400">No service affiliations yet.</p>
-        ) : (
-          <div class="space-y-4">
-            {user.serviceAffiliations.map((affiliation) => (
-              <div class="flex items-center justify-between rounded-lg border border-green-500/30 bg-black/50 p-4">
-                <div>
-                  <div class="flex items-center gap-2">
-                    <a
-                      href={`/service/${affiliation.service.slug}`}
-                      class="font-title text-sm text-green-400 hover:underline"
-                    >
-                      {affiliation.service.name}
-                    </a>
-                    <span
-                      class={`font-title rounded-full px-2 py-0.5 text-xs ${
-                        affiliation.role === 'OWNER'
-                          ? 'border border-purple-500/50 bg-purple-500/20 text-purple-400'
-                          : affiliation.role === 'ADMIN'
-                            ? 'border border-red-500/50 bg-red-500/20 text-red-400'
-                            : affiliation.role === 'MODERATOR'
-                              ? 'border border-orange-500/50 bg-orange-500/20 text-orange-400'
-                              : affiliation.role === 'SUPPORT'
-                                ? 'border border-blue-500/50 bg-blue-500/20 text-blue-400'
-                                : 'border border-green-500/50 bg-green-500/20 text-green-400'
-                      }`}
-                    >
-                      {affiliation.role.toLowerCase()}
-                    </span>
-                  </div>
-                  <div class="mt-1 flex items-center gap-2">
-                    <span class="font-title text-xs text-gray-500">
-                      {transformCase(timeAgo.format(affiliation.createdAt, 'twitter-minute-now'), 'sentence')}
-                    </span>
-                  </div>
                 </div>
+              </div>
+
+              <div data-note-content>
+                <p class="text-day-200 whitespace-pre-wrap">{note.content}</p>
+              </div>
+
+              <form
+                method="POST"
+                action={actions.admin.user.internalNotes.update}
+                data-note-edit-form
+                data-astro-reload
+                class="mt-4 hidden space-y-4"
+              >
+                <input type="hidden" name="noteId" value={note.id} />
+                <InputTextArea
+                  label="Note Content"
+                  name="content"
+                  value={note.content}
+                  inputProps={{ class: 'bg-night-700' }}
+                />
+                <InputSubmitButton label="Save" icon="ri:save-line" hideCancel />
+              </form>
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    <form
+      method="POST"
+      action={actions.admin.user.internalNotes.add}
+      class="mt-10 space-y-2"
+      data-astro-reload
+    >
+      <h3 class="font-title mb-0 text-center text-xl leading-none font-bold">Add Note</h3>
+
+      <input type="hidden" name="userId" value={user.id} />
+      <InputTextArea
+        label="Note Content"
+        name="content"
+        inputProps={{ placeholder: 'Add a note...', rows: 3 }}
+      />
+      <InputSubmitButton label="Add" icon="ri:add-line" hideCancel />
+    </form>
+  </section>
+
+  <section class="space-y-2">
+    <h2 class="font-title text-center text-3xl leading-none font-bold">Service Affiliations</h2>
+
+    {
+      user.serviceAffiliations.length === 0 ? (
+        <p class="text-day-200 text-center">No service affiliations yet.</p>
+      ) : (
+        <div class="grid grid-cols-2 gap-x-4">
+          {user.serviceAffiliations.map((affiliation) => {
+            const roleInfo = getServiceUserRoleInfo(affiliation.role)
+            return (
+              <div class="bg-night-600 border-night-400 flex items-center justify-start gap-2 rounded-lg border px-3 py-2">
+                <BadgeSmall color={roleInfo.color} text={roleInfo.label} icon={roleInfo.icon} />
+                <span class="text-day-400 text-sm">at</span>
+                <a
+                  href={`/service/${affiliation.service.slug}`}
+                  class="text-day-100 hover:text-day-50 flex items-center gap-1 leading-none font-medium hover:underline"
+                >
+                  <span>{affiliation.service.name}</span>
+                  <Icon name="ri:external-link-line" class="text-day-400 size-3.5" />
+                </a>
+                <TimeFormatted
+                  date={affiliation.createdAt}
+                  hourPrecision
+                  class="text-day-400 ms-auto me-2 text-sm"
+                />
 
                 <form
                   method="POST"
                   action={actions.admin.user.serviceAffiliations.remove}
-                  class="inline-flex"
                   data-astro-reload
+                  class="contents"
                 >
                   <input type="hidden" name="id" value={affiliation.id} />
-                  <button
+                  <button type="submit" class="text-day-300 transition-colors hover:text-red-400">
-                    type="submit"
+                    <Icon name="ri:delete-bin-line" class="size-5" />
-                    class="font-title inline-flex items-center justify-center rounded-md border border-red-500/30 bg-red-500/10 px-2 py-1 text-xs text-red-400 shadow-xs transition-colors duration-200 hover:bg-red-500/20 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
-                  >
-                    <Icon name="ri:delete-bin-line" class="size-3" />
                   </button>
                 </form>
               </div>
-            ))}
+            )
-          </div>
+          })}
-        )
-      }
-
-      <form
-        method="POST"
-        action={actions.admin.user.serviceAffiliations.add}
-        class="mt-6 space-y-4 border-t border-green-500/30 pt-6"
-        data-astro-reload
-      >
-        <input type="hidden" name="userId" value={user.id} />
-
-        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-          <div>
-            <label class="font-title mb-2 block text-sm text-green-500" for="serviceId"> Service </label>
-            <select
-              name="serviceId"
-              id="serviceId"
-              required
-              class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 focus:border-green-500 focus:ring-green-500"
-            >
-              <option value="">Select a service</option>
-              {allServices.map((service) => <option value={service.id}>{service.name}</option>)}
-            </select>
-          </div>
-
-          <div>
-            <label class="font-title mb-2 block text-sm text-green-500" for="role"> Role </label>
-            <select
-              name="role"
-              id="role"
-              required
-              class="font-title w-full rounded-md border border-green-500/30 bg-black/50 text-gray-300 focus:border-green-500 focus:ring-green-500"
-            >
-              <option value="OWNER">Owner</option>
-              <option value="ADMIN">Admin</option>
-              <option value="MODERATOR">Moderator</option>
-              <option value="SUPPORT">Support</option>
-              <option value="TEAM_MEMBER">Team Member</option>
-            </select>
-          </div>
         </div>
+      )
+    }
 
-        <div>
+    <form
-          <button
+      method="POST"
-            type="submit"
+      action={actions.admin.user.serviceAffiliations.add}
-            class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
+      data-astro-reload
-          >
+      class="mt-10 space-y-2"
-            <Icon name="ri:link" class="mr-1 size-4" />
+    >
-            Add Service Affiliation
+      <h3 class="font-title mb-0 text-center text-xl leading-none font-bold">Add Affiliation</h3>
-          </button>
+
-        </div>
+      <input type="hidden" name="userId" value={user.id} />
-      </form>
+
-    </section>
+      <InputSelect
-  </div>
+        name="serviceId"
+        label="Service"
+        options={allServices.map((service) => ({
+          label: service.name,
+          value: service.id.toString(),
+        }))}
+        selectProps={{ required: true }}
+      />
+
+      <InputCardGroup
+        name="role"
+        label="Role"
+        options={serviceUserRoles.map((role) => ({
+          label: role.label,
+          value: role.value,
+          icon: role.icon,
+        }))}
+        required
+        cardSize="sm"
+        iconSize="sm"
+      />
+
+      <InputSubmitButton label="Add Affiliation" icon="ri:link" hideCancel />
+    </form>
+  </section>
+
+  <form method="POST" action={actions.admin.user.karmaTransactions.add} data-astro-reload class="space-y-2">
+    <h2 class="font-title text-center text-3xl leading-none font-bold">Grant/Remove Karma</h2>
+
+    <input type="hidden" name="userId" value={user.id} />
+
+    <InputText
+      label="Points"
+      name="points"
+      error={addKarmaTransactionResult?.error?.message}
+      inputProps={{ type: 'number', required: true }}
+    />
+
+    <InputTextArea
+      label="Description"
+      name="description"
+      error={addKarmaTransactionResult?.error?.message}
+      inputProps={{ required: true }}
+    />
+
+    <InputSubmitButton label="Submit" icon="ri:add-line" hideCancel />
+  </form>
 </BaseLayout>
 
 <script>
@@ -593,7 +466,6 @@ if (!user) return Astro.rewrite('/404')
 
         const noteContent = noteDiv.querySelector<HTMLDivElement>('[data-note-content]')
         const editForm = noteDiv.querySelector<HTMLFormElement>('[data-note-edit-form]')
-        const cancelButton = noteDiv.querySelector<HTMLButtonElement>('[data-cancel-edit]')
 
         if (noteContent && editForm) {
           if (target.checked) {
@@ -604,23 +476,7 @@ if (!user) return Astro.rewrite('/404')
             editForm.classList.add('hidden')
           }
         }
-
-        if (cancelButton) {
-          cancelButton.addEventListener('click', () => {
-            target.checked = false
-            noteContent?.classList.remove('hidden')
-            editForm?.classList.add('hidden')
-          })
-        }
       })
     })
   })
 </script>
-
-<script>
-  document.addEventListener('astro:page-load', () => {
-    document.querySelectorAll<HTMLTextAreaElement>('[data-trim-content]').forEach((textarea) => {
-      textarea.value = textarea.value.trim()
-    })
-  })
-</script>

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

@@ -322,6 +322,7 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
                       <Tooltip
                         as="a"
                         href={`/account/impersonate?targetUserId=${user.id}&redirect=/account`}
+                        data-astro-prefetch="tap"
                         class="inline-flex items-center rounded-md border border-orange-500/50 bg-orange-500/20 px-1 py-1 text-xs text-orange-400 transition-colors hover:bg-orange-500/30"
                         text="Impersonate"
                       >

web/src/pages/attributes.astro

@@ -1,12 +1,11 @@
 ---
 import { Icon } from 'astro-icon/components'
 import { Markdown } from 'astro-remote'
-import { Picture } from 'astro:assets'
 import { z } from 'astro:content'
 import { orderBy } from 'lodash-es'
 
 import BadgeStandard from '../components/BadgeStandard.astro'
-import { makeOverallScoreInfo } from '../components/ScoreSquare.astro'
+import MyPicture from '../components/MyPicture.astro'
 import SortArrowIcon from '../components/SortArrowIcon.astro'
 import { getAttributeCategoryInfo } from '../constants/attributeCategories'
 import { getAttributeTypeInfo } from '../constants/attributeTypes'
@@ -15,6 +14,7 @@ import BaseLayout from '../layouts/BaseLayout.astro'
 import { sortAttributes } from '../lib/attributes'
 import { cn } from '../lib/cn'
 import { formatNumber } from '../lib/numbers'
+import { makeOverallScoreInfo } from '../lib/overallScore'
 import { zodParseQueryParamsStoringErrors } from '../lib/parseUrlFilters'
 import { prisma } from '../lib/prisma'
 
@@ -102,8 +102,13 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
 
 <BaseLayout
   pageTitle="Attributes"
-  description="Browse all available service attributes used to evaluate privacy and trust scores on KYCnot.me."
+  description="Browse all available service attributes used to evaluate privacy and trust scores."
-  ogImage={{ template: 'generic', title: 'All attributes' }}
+  ogImage={{
+    template: 'generic',
+    title: 'All attributes',
+    description: 'Browse all available service attributes',
+    icon: 'ri:list-radio',
+  }}
 >
   <h1 class="font-title mb-2 text-center text-3xl font-bold text-white">Service attributes</h1>
 
@@ -202,12 +207,11 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
                       class="flex items-center gap-2 rounded-md p-2 transition-colors hover:bg-zinc-800"
                     >
                       {service.imageUrl ? (
-                        <Picture
+                        <MyPicture
                           src={service.imageUrl}
                           alt={service.name}
                           width={24}
                           height={24}
-                          formats={['jxl', 'avif', 'webp']}
                           class="size-6 shrink-0 rounded-xs object-contain"
                         />
                       ) : (
@@ -349,12 +353,11 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
                       class="flex items-center gap-2 rounded-md p-2 transition-colors hover:bg-zinc-800"
                     >
                       {service.imageUrl ? (
-                        <Picture
+                        <MyPicture
                           src={service.imageUrl}
                           alt={service.name}
                           width={24}
                           height={24}
-                          formats={['jxl', 'avif', 'webp']}
                           class="size-6 shrink-0 rounded-xs object-contain"
                         />
                       ) : (

web/src/pages/events.astro

@@ -1,11 +1,11 @@
 ---
 import { z } from 'astro/zod'
 import { Icon } from 'astro-icon/components'
-import { Picture } from 'astro:assets'
 import { orderBy } from 'lodash-es'
 
 import Button from '../components/Button.astro'
 import FormatTimeInterval from '../components/FormatTimeInterval.astro'
+import MyPicture from '../components/MyPicture.astro'
 import TimeFormatted from '../components/TimeFormatted.astro'
 import {
   eventTypes,
@@ -151,7 +151,12 @@ const createUrlWithoutFilter = (paramName: keyof typeof params) => {
   description="Discover important events, updates, and news about KYC-free services in chronological order."
   widthClassName="max-w-screen-lg"
   className={{ main: 'sm:flex sm:items-start sm:gap-6' }}
-  ogImage={{ template: 'generic', title: 'Events' }}
+  ogImage={{
+    template: 'generic',
+    title: 'Events',
+    description: 'Discover important events, updates, and news about KYC-free services',
+    icon: 'ri:calendar-event-line',
+  }}
   htmx
 >
   <h1 class="font-title mb-6 block text-center text-2xl font-bold text-white sm:hidden">
@@ -287,12 +292,11 @@ const createUrlWithoutFilter = (paramName: keyof typeof params) => {
                   class="group flex h-8 items-center gap-2 rounded-full border border-green-500/30 bg-black/40 px-3 text-sm text-white"
                 >
                   {service?.imageUrl && (
-                    <Picture
+                    <MyPicture
                       src={service.imageUrl}
                       alt={service.name}
                       width={16}
                       height={16}
-                      formats={['jxl', 'avif', 'webp']}
                       class="size-4 shrink-0 rounded-xs object-contain"
                     />
                   )}
@@ -385,12 +389,11 @@ const createUrlWithoutFilter = (paramName: keyof typeof params) => {
                     class="-m-1.5 flex w-fit items-center rounded-md p-1.5 leading-none transition-colors hover:bg-zinc-800"
                   >
                     {event.service.imageUrl && (
-                      <Picture
+                      <MyPicture
                         src={event.service.imageUrl}
                         alt={event.service.name}
                         width={16}
                         height={16}
-                        formats={['jxl', 'avif', 'webp']}
                         class="size-4 shrink-0 rounded-xs object-contain"
                       />
                     )}

web/src/pages/index.astro

@@ -4,11 +4,13 @@ import { z } from 'astro:schema'
 import { groupBy, orderBy } from 'lodash-es'
 import seedrandom from 'seedrandom'
 
+import AnnouncementBanner from '../components/AnnouncementBanner.astro'
 import Button from '../components/Button.astro'
 import Pagination from '../components/Pagination.astro'
 import ServiceFiltersPill from '../components/ServiceFiltersPill.astro'
 import ServicesFilters from '../components/ServicesFilters.astro'
 import ServicesSearchResults from '../components/ServicesSearchResults.astro'
+import { getAttributeTypeInfo } from '../constants/attributeTypes'
 import {
   currencies,
   currenciesZodEnumBySlug,
@@ -30,7 +32,7 @@ import { prisma } from '../lib/prisma'
 import { makeSortSeed } from '../lib/sortSeed'
 import { transformCase } from '../lib/strings'
 
-import type { AttributeType, Prisma } from '@prisma/client'
+import type { Prisma } from '@prisma/client'
 
 const MIN_CATEGORIES_TO_SHOW = 8
 const MIN_ATTRIBUTES_TO_SHOW = 8
@@ -184,7 +186,8 @@ if (redirectUrl) return Astro.redirect(redirectUrl.toString())
 
 export type ServicesFiltersObject = typeof filters
 
-const [categories, [services, totalServices, hadToIncludeCommunityContributed]] =
+const currentDate = new Date()
+const [categories, [services, totalServices, hadToIncludeCommunityContributed], activeAnnouncements] =
   await Astro.locals.banners.tryMany([
     [
       'Unable to load category filters.',
@@ -323,7 +326,10 @@ const [categories, [services, totalServices, hadToIncludeCommunityContributed]]
         })
         let hadToIncludeCommunityContributed = false
 
-        if (totalServices === 0 && !where.verificationStatus.in.includes('COMMUNITY_CONTRIBUTED')) {
+        if (
+          totalServices === 0 &&
+          areEqualArraysWithoutOrder(where.verificationStatus.in, ['VERIFICATION_FAILED', 'APPROVED'])
+        ) {
           const [unsortedServiceCommunityServices, totalCommunityServices] =
             await prisma.service.findManyAndCount({
               where: {
@@ -405,27 +411,30 @@ const [categories, [services, totalServices, hadToIncludeCommunityContributed]]
       },
       [[] as [], 0, false] as const,
     ],
+    [
+      'Unable to load announcements.',
+      () =>
+        prisma.announcement.findMany({
+          where: {
+            isActive: true,
+            startDate: { lte: currentDate },
+            OR: [{ endDate: null }, { endDate: { gt: currentDate } }],
+          },
+          select: {
+            id: true,
+            title: true,
+            content: true,
+            type: true,
+            startDate: true,
+            endDate: true,
+            isActive: true,
+          },
+          orderBy: [{ type: 'desc' }, { createdAt: 'desc' }],
+        }),
+      [],
+    ],
   ])
 
-const attributeIcons = {
-  GOOD: {
-    icon: 'ri:check-line',
-    iconClass: 'text-green-400',
-  },
-  BAD: {
-    icon: 'ri:close-line',
-    iconClass: 'text-red-400',
-  },
-  WARNING: {
-    icon: 'ri:alert-line',
-    iconClass: 'text-yellow-400',
-  },
-  INFO: {
-    icon: 'ri:information-line',
-    iconClass: 'text-blue-400',
-  },
-} as const satisfies Record<AttributeType, { icon: string; iconClass: string }>
-
 const attributes = await Astro.locals.banners.try(
   'Unable to load attribute filters.',
   () =>
@@ -450,12 +459,14 @@ const attributes = await Astro.locals.banners.try(
 const attributesByCategory = orderBy(
   Object.entries(
     groupBy(
-      attributes.map((attr) => ({
+      attributes.map((attr) => {
-        ...attr,
+        return {
-        ...attributeIcons[attr.type],
+          info: getAttributeTypeInfo(attr.type),
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          ...attr,
-        value: filters.attr?.[attr.id] || undefined,
+          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      })),
+          value: filters.attr?.[attr.id] || undefined,
+        }
+      }),
       'category'
     )
   ).map(([category, attributes]) => ({
@@ -517,8 +528,12 @@ export type ServicesFiltersOptions = typeof filtersOptions
     },
   ]}
 >
+  <AnnouncementBanner announcements={activeAnnouncements} />
+
   <div class="flex flex-col gap-4 sm:flex-row sm:gap-8">
-    <div class="flex items-stretch sm:hidden">
+    <div
+      class='[&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-offset-night-700 flex items-stretch sm:hidden [&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-2 [&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-green-500 [&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-offset-2'
+    >
       {
         !hasDefaultFilters ? (
           <div class="-ml-4 flex flex-1 items-center gap-2 overflow-x-auto mask-r-from-[calc(100%-var(--spacing)*16)] pr-12 pl-4">
@@ -641,11 +656,11 @@ export type ServicesFiltersOptions = typeof filtersOptions
       type="checkbox"
       id="show-filters"
       name="show-filters"
-      class="peer hidden"
+      class="peer sr-only sm:hidden"
       checked={Astro.url.searchParams.has('show-filters')}
     />
     <div
-      class="bg-night-700 fixed top-0 left-0 z-50 h-dvh w-dvw shrink-0 translate-y-full overflow-y-auto overscroll-contain border-t border-green-500/30 px-8 pt-4 transition-transform peer-checked:translate-y-0 sm:relative sm:z-auto sm:h-auto sm:w-64 sm:translate-y-0 sm:overflow-visible sm:border-none sm:bg-none sm:p-0"
+      class="bg-night-700 fixed top-0 left-0 z-50 hidden h-dvh w-dvw shrink-0 translate-y-full overflow-y-auto overscroll-contain border-t border-green-500/30 px-8 pt-4 transition-transform peer-checked:translate-y-0 max-sm:peer-checked:block sm:relative sm:z-auto sm:block sm:h-auto sm:w-64 sm:translate-y-0 sm:overflow-visible sm:border-none sm:bg-none sm:p-0"
     >
       <ServicesFilters
         searchResultsId="search-results"

web/src/pages/karma.mdx

@@ -2,6 +2,7 @@
 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'
 author: KYCnot.me
 pubDate: 2025-05-15
 ---

web/src/pages/notifications.astro

@@ -183,7 +183,12 @@ const notifications = dbNotifications.map((notification) => ({
   pageTitle="Notifications"
   description="View your notifications and manage your notification preferences."
   widthClassName="max-w-screen-lg"
-  ogImage={{ template: 'generic', title: 'Notifications' }}
+  ogImage={{
+    template: 'generic',
+    title: 'Notifications',
+    description: 'View and manage your notifications',
+    icon: 'ri:notification-line',
+  }}
 >
   <section class="mx-auto w-full">
     <div class="mb-4 flex items-center justify-between">

web/src/pages/ogimage.png.ts

@@ -1,23 +1,35 @@
-import { ogImageTemplates } from '../components/OgImage'
+import { ogImageTemplates, type OgImageAllTemplatesWithProps } from '../components/OgImage'
-import { urlParamsToObject } from '../lib/urls'
 
 import type { APIRoute } from 'astro'
+import type { Misc } from 'ts-toolbelt'
 
-export const GET: APIRoute = ({ url }) => {
+function toJSON<T extends Misc.JSON.Value>(data: string | null | undefined): T | undefined {
-  const { template, ...props } = urlParamsToObject(url.searchParams)
+  if (!data) return undefined
+  try {
+    return JSON.parse(data) as T
+  } catch (_error) {
+    return undefined
+  }
+}
 
-  if (!template) return ogImageTemplates.default()
+export const GET: APIRoute = async (context) => {
+  const { template, ...props } = toJSON<OgImageAllTemplatesWithProps>(
+    context.url.searchParams.get('data')
+  ) ?? { template: 'default' }
+
+  if (!template as unknown) return ogImageTemplates.default({}, context)
 
   if (!(template in ogImageTemplates)) {
     console.error(`Invalid template: "${template}"`)
-    return ogImageTemplates.default()
+    return ogImageTemplates.default({}, context)
   }
 
-  const response = ogImageTemplates[template as keyof typeof ogImageTemplates](props)
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+  const response = await ogImageTemplates[template](props as any, context)
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (!response) {
     console.error(`Cannot generate image for template: ${template} and props: ${JSON.stringify(props)}`)
-    return ogImageTemplates.default()
+    return ogImageTemplates.default({}, context)
   }
 
   return response

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

@@ -86,7 +86,12 @@ const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
 <BaseLayout
   pageTitle={`${serviceSuggestion.service.name} | Service suggestion`}
   description="View your service suggestion"
-  ogImage={{ template: 'generic', title: serviceSuggestion.service.name }}
+  ogImage={{
+    template: 'generic',
+    title: 'My service suggestions',
+    description: 'View and manage your service suggestion',
+    icon: 'ri:service-line',
+  }}
   widthClassName="max-w-screen-md"
   htmx
   breadcrumbs={[

web/src/pages/service-suggestion/edit.astro

@@ -65,7 +65,12 @@ if (!service) return Astro.rewrite('/404')
 <BaseLayout
   pageTitle="Edit service"
   description="Suggest an edit to service"
-  ogImage={{ template: 'generic', title: 'Edit service' }}
+  ogImage={{
+    template: 'generic',
+    title: 'Edit service',
+    description: 'Suggest an edit to service',
+    icon: 'ri:edit-line',
+  }}
   widthClassName="max-w-screen-md"
   breadcrumbs={[
     {
@@ -88,8 +93,11 @@ if (!service) return Astro.rewrite('/404')
       label="Note for Moderators"
       name="notes"
       value={params.notes}
-      rows={10}
+      inputProps={{
-      placeholder="List the changes you want us to make to the service. Example: 'Add X, Y and Z attributes' 'Monero is accepted'. Provide supporting evidence."
+        rows: 10,
+        placeholder:
+          'List the changes you want us to make to the service. Example: "Add X, Y and Z attributes" "Monero is accepted". Provide supporting evidence.',
+      }}
       error={inputErrors.notes}
     />
 

web/src/pages/service-suggestion/index.astro

@@ -1,11 +1,10 @@
 ---
 import { Icon } from 'astro-icon/components'
 import { actions } from 'astro:actions'
-import { Picture } from 'astro:assets'
 import { z } from 'astro:content'
 
-import defaultServiceImage from '../../assets/fallback-service-image.jpg'
 import Button from '../../components/Button.astro'
+import MyPicture from '../../components/MyPicture.astro'
 import TimeFormatted from '../../components/TimeFormatted.astro'
 import Tooltip from '../../components/Tooltip.astro'
 import {
@@ -72,7 +71,12 @@ const success = !!createResult && !createResult.error
 <BaseLayout
   pageTitle="My service suggestions"
   description="Manage your service suggestions"
-  ogImage={{ template: 'generic', title: 'Service suggestions' }}
+  ogImage={{
+    template: 'generic',
+    title: 'Service suggestions',
+    description: 'Manage your service suggestions',
+    icon: 'ri:service-line',
+  }}
   widthClassName="max-w-screen-md"
   breadcrumbs={[
     {
@@ -122,13 +126,13 @@ const success = !!createResult && !createResult.error
                   href={`/service/${suggestion.service.slug}`}
                   class="inline-flex w-full min-w-32 items-center gap-2 hover:underline"
                 >
-                  <Picture
+                  <MyPicture
-                    src={suggestion.service.imageUrl ?? (defaultServiceImage as unknown as string)}
+                    src={suggestion.service.imageUrl}
+                    fallback="service"
                     alt={suggestion.service.name}
                     width={32}
                     height={32}
                     class="inline-block size-8 min-w-8 shrink-0 rounded-md"
-                    formats={['jxl', 'avif', 'webp']}
                   />
                   <span class="shrink truncate">{suggestion.service.name}</span>
                 </a>

web/src/pages/service-suggestion/new.astro

@@ -65,7 +65,12 @@ const [categories, attributes] = await Astro.locals.banners.tryMany([
 <BaseLayout
   pageTitle="New service"
   description="Suggest a new service to be added to KYCnot.me"
-  ogImage={{ template: 'generic', title: 'New service' }}
+  ogImage={{
+    template: 'generic',
+    title: 'New service',
+    description: 'Suggest a new service to be listed',
+    icon: 'ri:add-circle-line',
+  }}
   widthClassName="max-w-screen-md"
   breadcrumbs={[
     {
@@ -184,31 +189,40 @@ const [categories, attributes] = await Astro.locals.banners.tryMany([
       label="Description"
       name="description"
       id="description"
-      required
+      inputProps={{
-      maxlength={SUGGESTION_DESCRIPTION_MAX_LENGTH}
+        required: true,
+        maxlength: SUGGESTION_DESCRIPTION_MAX_LENGTH,
+      }}
       error={inputErrors.description}
     />
 
     <InputTextArea
       label="Service URLs"
       name="serviceUrls"
-      required
+      inputProps={{
-      placeholder="https://example1.com\nhttps://example2.org"
+        required: true,
+        placeholder: 'https://example1.com\nhttps://example2.org',
+      }}
       error={inputErrors.serviceUrls}
     />
 
     <InputTextArea
       label="Terms of Service URLs"
       name="tosUrls"
-      required
+      inputProps={{
-      placeholder="https://example1.com/tos\nhttps://example2.org/terms"
+        required: true,
+        placeholder: 'https://example1.com/tos\nhttps://example2.org/terms',
+      }}
       error={inputErrors.tosUrls}
     />
 
     <InputTextArea
       label="Onion URLs"
       name="onionUrls"
-      placeholder="http://example1.onion\nhttp://example2.onion"
+      inputProps={{
+        required: true,
+        placeholder: 'http://example1.onion\nhttp://example2.onion',
+      }}
       error={inputErrors.onionUrls}
     />
 
@@ -276,7 +290,9 @@ const [categories, attributes] = await Astro.locals.banners.tryMany([
       name="notes"
       id="notes"
       error={inputErrors.notes}
-      maxlength={SUGGESTION_NOTES_MAX_LENGTH}
+      inputProps={{
+        maxlength: SUGGESTION_NOTES_MAX_LENGTH,
+      }}
     />
 
     <Captcha action={actions.serviceSuggestion.createService} />

web/src/pages/service/[slug].astro

@@ -4,8 +4,7 @@ import { Icon } from 'astro-icon/components'
 import { Markdown } from 'astro-remote'
 import { Schema } from 'astro-seo-schema'
 import { actions } from 'astro:actions'
-import { Picture } from 'astro:assets'
+import { head, orderBy, pick, shuffle, sortBy, tail } from 'lodash-es'
-import { head, orderBy, shuffle, sortBy, tail } from 'lodash-es'
 
 import AdminOnly from '../../components/AdminOnly.astro'
 import BadgeSmall from '../../components/BadgeSmall.astro'
@@ -17,6 +16,7 @@ import DropdownButton from '../../components/DropdownButton.astro'
 import DropdownButtonItemForm from '../../components/DropdownButtonItemForm.astro'
 import DropdownButtonItemLink from '../../components/DropdownButtonItemLink.astro'
 import FormatTimeInterval from '../../components/FormatTimeInterval.astro'
+import MyPicture from '../../components/MyPicture.astro'
 import { makeOgImageUrl, type OgImageAllTemplatesWithProps } from '../../components/OgImage'
 import ScoreGauge from '../../components/ScoreGauge.astro'
 import ScoreSquare from '../../components/ScoreSquare.astro'
@@ -349,8 +349,12 @@ const getVerificationStepStatusInfo = (status: VerificationStepStatus) => {
 const itemReviewedId = new URL(`/service/${service.slug}`, Astro.url).href
 
 const ogImageTemplateData = {
-  template: 'generic',
+  template: 'service',
   title: service.name,
+  description: service.description,
+  categories: service.categories.map((category) => pick(category, ['name', 'icon'])),
+  score: service.overallScore,
+  imageUrl: service.imageUrl,
 } satisfies OgImageAllTemplatesWithProps
 ---
 
@@ -477,9 +481,8 @@ const ogImageTemplateData = {
   <div class="flex items-center gap-4">
     {
       !!service.imageUrl && (
-        <Picture
+        <MyPicture
           src={service.imageUrl}
-          formats={['jxl', 'avif', 'webp']}
           alt={service.name || "Service's logo"}
           class="size-12 shrink-0 rounded-sm object-contain"
           width={48}
@@ -693,10 +696,15 @@ const ogImageTemplateData = {
           </li>
         ))}
 
-        <input type="checkbox" class="peer hidden" id="show-more-links" checked={hiddenLinks.length === 0} />
+        <input
+          type="checkbox"
+          class="peer sr-only checked:hidden"
+          id="show-more-links"
+          checked={hiddenLinks.length === 0}
+        />
 
         {hiddenLinks.length > 0 && (
-          <li class="peer-checked:hidden">
+          <li class="peer-focus-visible:ring-offset-night-700 rounded-full peer-checked:hidden peer-focus-visible:ring-4 peer-focus-visible:ring-orange-500 peer-focus-visible:ring-offset-2">
             <label
               for="show-more-links"
               class="2xs:text-sm 2xs:h-8 2xs:gap-2 2xs:px-4 text-day-100 bg-day-800 hover:bg-day-900 inline-flex h-6 cursor-pointer items-center gap-1 rounded-full px-2 text-xs whitespace-nowrap transition-colors duration-200"

web/src/pages/u/[username].astro

@@ -1,13 +1,16 @@
 ---
 import { Icon } from 'astro-icon/components'
-import { Picture } from 'astro:assets'
+import { actions } from 'astro:actions'
 import { sortBy } from 'lodash-es'
 
-import defaultServiceImage from '../../assets/fallback-service-image.jpg'
 import AdminOnly from '../../components/AdminOnly.astro'
 import BadgeSmall from '../../components/BadgeSmall.astro'
+import InputSubmitButton from '../../components/InputSubmitButton.astro'
+import InputTextArea from '../../components/InputTextArea.astro'
+import MyPicture from '../../components/MyPicture.astro'
 import TimeFormatted from '../../components/TimeFormatted.astro'
 import Tooltip from '../../components/Tooltip.astro'
+import { getKarmaTransactionActionInfo } from '../../constants/karmaTransactionActions'
 import { karmaUnlocks } from '../../constants/karmaUnlocks'
 import { SUPPORT_EMAIL } from '../../constants/project'
 import { getServiceSuggestionStatusInfo } from '../../constants/serviceSuggestionStatus'
@@ -57,6 +60,12 @@ const user = await Astro.locals.banners.try('user', async () => {
             action: true,
             description: true,
             createdAt: true,
+            grantedBy: {
+              select: {
+                name: true,
+                displayName: true,
+              },
+            },
             comment: {
               select: {
                 id: true,
@@ -140,6 +149,21 @@ const user = await Astro.locals.banners.try('user', async () => {
           },
           orderBy: [{ role: 'asc' }, { service: { name: 'asc' } }],
         },
+        internalNotes: {
+          select: {
+            id: true,
+            content: true,
+            createdAt: true,
+            addedByUser: {
+              select: {
+                name: true,
+                displayName: true,
+                picture: true,
+              },
+            },
+          },
+          orderBy: { createdAt: 'desc' },
+        },
       },
     })
   )
@@ -153,7 +177,13 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
 <BaseLayout
   pageTitle={`${user.name} - Account`}
   description="Manage your user profile"
-  ogImage={{ template: 'generic', title: `${user.name} | Account` }}
+  ogImage={{
+    template: 'generic',
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    title: user.displayName || user.name,
+    description: 'User profile page',
+    icon: 'ri:user-3-line',
+  }}
   widthClassName="max-w-screen-md"
   className={{
     main: 'space-y-6',
@@ -213,7 +243,13 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
     <header class="flex items-center gap-4">
       {
         user.picture ? (
-          <img src={user.picture} alt="" class="ring-day-500/30 size-16 rounded-full ring-2" />
+          <MyPicture
+            src={user.picture}
+            alt=""
+            class="ring-day-500/30 size-16 rounded-full ring-2"
+            width={64}
+            height={64}
+          />
         ) : (
           <div class="bg-day-500/10 ring-day-500/30 text-day-400 flex size-16 items-center justify-center rounded-full ring-2">
             <Icon name="ri:user-3-line" class="size-8" />
@@ -255,6 +291,7 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
           <Tooltip
             as="a"
             href={`/account/impersonate?targetUserId=${user.id}&redirect=${encodeURIComponent(Astro.url.href)}`}
+            data-astro-prefetch="tap"
             class="inline-flex items-center gap-1 rounded-md border border-amber-500/30 bg-amber-500/10 p-2 text-sm text-amber-400 shadow-xs transition-colors duration-200 hover:bg-amber-500/20 focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
             text="Impersonate (admin)"
           >
@@ -453,6 +490,58 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
     </div>
   </section>
 
+  <AdminOnly>
+    <section class="border-night-400 bg-night-400/5 rounded-lg border p-6 shadow-sm backdrop-blur-xs">
+      <header>
+        <h2 class="font-title text-day-200 mb-6 text-center text-2xl font-bold">
+          Internal Notes <span class="text-day-400 text-sm font-normal">(Admin only)</span>
+        </h2>
+      </header>
+      {
+        user.internalNotes.length === 0 ? (
+          <p class="text-day-400 text-center">No internal notes yet.</p>
+        ) : (
+          <div class="space-y-4">
+            {user.internalNotes.map((note) => (
+              <div class="border-night-400 bg-night-600 rounded-lg border p-4">
+                <div class="mb-2 flex items-center gap-2">
+                  {!!note.addedByUser?.picture && (
+                    <img
+                      src={note.addedByUser.picture}
+                      alt=""
+                      width={24}
+                      height={24}
+                      class="size-6 rounded-full"
+                    />
+                  )}
+                  <span class="text-day-100 font-bold">
+                    {note.addedByUser ? (note.addedByUser.displayName ?? note.addedByUser.name) : 'System'}
+                  </span>
+                  <span class="text-day-400 text-sm">
+                    <TimeFormatted date={note.createdAt} hourPrecision />
+                  </span>
+                </div>
+                <div class="text-day-200 whitespace-pre-wrap">{note.content}</div>
+              </div>
+            ))}
+          </div>
+        )
+      }
+
+      <form
+        method="POST"
+        action={actions.admin.user.internalNotes.add}
+        data-note-edit-form
+        class="mt-4 space-y-4"
+      >
+        <input type="hidden" name="userId" value={user.id} />
+
+        <InputTextArea label="Add a note" name="content" inputProps={{ class: 'bg-night-700' }} />
+        <InputSubmitButton label="Save" icon="ri:save-line" hideCancel />
+      </form>
+    </section>
+  </AdminOnly>
+
   <section class="border-night-400 bg-night-400/5 rounded-lg border p-6 shadow-sm backdrop-blur-xs">
     <header>
       <h2 class="font-title text-day-200 mb-4 text-xl font-bold">
@@ -477,8 +566,9 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
                   href={`/service/${affiliation.service.slug}`}
                   class="text-day-300 group flex min-w-32 items-center gap-2 text-sm"
                 >
-                  <Picture
+                  <MyPicture
-                    src={affiliation.service.imageUrl ?? (defaultServiceImage as unknown as string)}
+                    src={affiliation.service.imageUrl}
+                    fallback="service"
                     alt={affiliation.service.name}
                     width={40}
                     height={40}
@@ -879,29 +969,46 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
                 </tr>
               </thead>
               <tbody class="divide-night-400/10 divide-y">
-                {user.karmaTransactions.map((transaction) => (
+                {user.karmaTransactions.map((transaction) => {
-                  <tr class="hover:bg-night-500/5">
+                  const actionInfo = getKarmaTransactionActionInfo(transaction.action)
-                    <td class="text-day-300 px-4 py-3 text-xs whitespace-nowrap">{transaction.action}</td>
+                  return (
-                    <td class="text-day-300 px-4 py-3">{transaction.description}</td>
+                    <tr class="hover:bg-night-500/5">
-                    <td
+                      <td class="text-day-300 px-4 py-3 text-xs whitespace-nowrap">
-                      class={cn(
+                        <span class="inline-flex items-center gap-1">
-                        'px-4 py-3 text-right text-xs whitespace-nowrap',
+                          <Icon name={actionInfo.icon} class="size-4" />
-                        transaction.points >= 0 ? 'text-green-400' : 'text-red-400'
+                          {actionInfo.label}
-                      )}
+                          {transaction.action === 'MANUAL_ADJUSTMENT' && transaction.grantedBy && (
-                    >
+                            <a
-                      {transaction.points >= 0 && '+'}
+                              href={`/u/${transaction.grantedBy.name}`}
-                      {transaction.points}
+                              class="text-day-500 ml-1 hover:underline"
-                    </td>
+                            >
-                    <td class="text-day-400 px-4 py-3 text-right text-xs whitespace-nowrap">
+                              {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
-                      <TimeFormatted
+                              by {transaction.grantedBy.displayName || transaction.grantedBy.name}
-                        date={transaction.createdAt}
+                            </a>
-                        prefix={false}
+                          )}
-                        hourPrecision
+                        </span>
-                        caseType="sentence"
+                      </td>
-                      />
+                      <td class="text-day-300 px-4 py-3">{transaction.description}</td>
-                    </td>
+                      <td
-                  </tr>
+                        class={cn(
-                ))}
+                          'px-4 py-3 text-right text-xs whitespace-nowrap',
+                          transaction.points >= 0 ? 'text-green-400' : 'text-red-400'
+                        )}
+                      >
+                        {transaction.points >= 0 && '+'}
+                        {transaction.points}
+                      </td>
+                      <td class="text-day-400 px-4 py-3 text-right text-xs whitespace-nowrap">
+                        <TimeFormatted
+                          date={transaction.createdAt}
+                          prefix={false}
+                          hourPrecision
+                          caseType="sentence"
+                        />
+                      </td>
+                    </tr>
+                  )
+                })}
               </tbody>
             </table>
           </div>