Release 2025-05-23-xzNR

README.md

@@ -29,7 +29,7 @@ npm run db-fill-clean
 
 Now open the [.env](web/.env) file and fill in the missing values.
 
-> Default users are created with tokens: `admin`, `verifier`, `verified`, `normal` (configurable via env vars)
+> Default users are created with tokens: `admin`, `moderator`, `verified`, `normal` (configurable via env vars)
 
 ### Running the project
 

web/.env.example

@@ -1,6 +1,9 @@
 DATABASE_URL="postgresql://kycnot:kycnot@localhost:3399/kycnot?schema=public"
 REDIS_URL="redis://localhost:6379"
 SOURCE_CODE_URL="https://github.com"
+DATABASE_UI_URL="http://localhost:5555"
 SITE_URL="https://localhost:4321"
 ONION_ADDRESS="http://kycnotmezdiftahfmc34pqbpicxlnx3jbf5p7jypge7gdvduu7i6qjqd.onion"
 I2P_ADDRESS="http://nti3rj4j4disjcm2kvp4eno7otcejbbxv3ggxwr5tpfk4jucah7q.b32.i2p"
+RELEASE_NUMBER=123
+RELEASE_DATE="2025-05-23T19:00:00.000Z"

web/README.md

@@ -26,4 +26,4 @@ All commands are run from the root of the project, from a terminal:
 
 > **Note**: `db-fill` and `db-fill-clean` support the `-- --services=n` flag, where n is the number of fake services to add. It defaults to 10. For example, `npm run db-fill -- --services=5` will add 5 fake services.
 
-> **Note**: `db-fill` and `db-fill-clean` create default users with tokens: `admin`, `verifier`, `verified`, `normal` (override with `DEV_*****_USER_SECRET_TOKEN` env vars)
+> **Note**: `db-fill` and `db-fill-clean` create default users with tokens: `admin`, `moderator`, `verified`, `normal` (override with `DEV_*****_USER_SECRET_TOKEN` env vars)

web/astro.config.mjs

@@ -131,11 +131,11 @@ export default defineConfig({
         min: 1,
         default: 'admin',
       }),
-      DEV_VERIFIER_USER_SECRET_TOKEN: envField.string({
+      DEV_MODERATOR_USER_SECRET_TOKEN: envField.string({
         context: 'server',
         access: 'secret',
         min: 1,
-        default: 'verifier',
+        default: 'moderator',
       }),
       DEV_VERIFIED_USER_SECRET_TOKEN: envField.string({
         context: 'server',
@@ -170,6 +170,25 @@ export default defineConfig({
         url: true,
         optional: false,
       }),
+
+      DATABASE_UI_URL: envField.string({
+        context: 'server',
+        access: 'secret',
+        url: true,
+        optional: false,
+      }),
+
+      RELEASE_NUMBER: envField.number({
+        context: 'server',
+        access: 'public',
+        int: true,
+        optional: true,
+      }),
+      RELEASE_DATE: envField.string({
+        context: 'server',
+        access: 'public',
+        optional: true,
+      }),
     },
   },
 })

web/prisma/migrations/20250523181004_rename_migration/migration.sql

@@ -0,0 +1,13 @@
+/*
+  Manully edited to be a rename migration.
+*/
+-- AlterEnum
+BEGIN;
+ALTER TYPE "AccountStatusChange" RENAME VALUE 'VERIFIER_TRUE' TO 'MODERATOR_TRUE';
+ALTER TYPE "AccountStatusChange" RENAME VALUE 'VERIFIER_FALSE' TO 'MODERATOR_FALSE';
+COMMIT;
+
+-- AlterTable
+ALTER TABLE "User" 
+RENAME COLUMN "verifier" TO "moderator"
+

web/prisma/schema.prisma

@@ -120,8 +120,8 @@ enum AccountStatusChange {
   ADMIN_FALSE
   VERIFIED_TRUE
   VERIFIED_FALSE
-  VERIFIER_TRUE
+  MODERATOR_TRUE
-  VERIFIER_FALSE
+  MODERATOR_FALSE
   SPAMMER_TRUE
   SPAMMER_FALSE
 }
@@ -464,7 +464,7 @@ model User {
   spammer         Boolean @default(false)
   verified        Boolean @default(false)
   admin           Boolean @default(false)
-  verifier        Boolean @default(false)
+  moderator       Boolean @default(false)
   verifiedLink    String?
   secretTokenHash String  @unique
   /// Computed via trigger. Do not update through prisma.

web/prisma/triggers/10_notifications_user_status_change.sql

@@ -25,12 +25,12 @@ BEGIN
     VALUES (NEW.id, 'ACCOUNT_STATUS_CHANGE', status_change);
   END IF;
 
-  -- Check for verifier status change
+  -- Check for moderator status change
-  IF OLD.verifier IS DISTINCT FROM NEW.verifier THEN
+  IF OLD.moderator IS DISTINCT FROM NEW.moderator THEN
-    IF NEW.verifier = true THEN
+    IF NEW.moderator = true THEN
-      status_change := 'VERIFIER_TRUE';
+      status_change := 'MODERATOR_TRUE';
     ELSE
-      status_change := 'VERIFIER_FALSE';
+      status_change := 'MODERATOR_FALSE';
     END IF;
     INSERT INTO "Notification" ("userId", "type", "aboutAccountStatusChange")
     VALUES (NEW.id, 'ACCOUNT_STATUS_CHANGE', status_change);
@@ -57,6 +57,6 @@ DROP TRIGGER IF EXISTS user_status_change_notifications_trigger ON "User";
 
 -- Create the trigger to fire after updates on specific status columns
 CREATE TRIGGER user_status_change_notifications_trigger
-  AFTER UPDATE OF admin, verified, verifier, spammer ON "User"
+  AFTER UPDATE OF admin, verified, moderator, spammer ON "User"
   FOR EACH ROW
   EXECUTE FUNCTION trigger_user_status_change_notifications();

web/scripts/faker.ts

@@ -85,7 +85,7 @@ async function createAccount(preGeneratedToken?: string) {
       verifiedLink,
       verified: !!verifiedLink,
       admin: faker.datatype.boolean({ probability: 0.1 }),
-      verifier: faker.datatype.boolean({ probability: 0.1 }),
+      moderator: faker.datatype.boolean({ probability: 0.1 }),
     },
     include: {
       serviceAffiliations: true,
@@ -859,6 +859,22 @@ const generateFakeServiceContactMethod = (serviceId: number) => {
     {
       value: `https://x.com/${faker.internet.username()}`,
     },
+    {
+      value: `https://matrix.to/#/@${faker.internet.username()}:${faker.internet.domainName()}`,
+    },
+    {
+      value: `https://instagram.com/${faker.internet.username()}`,
+    },
+    {
+      value: `https://linkedin.com/in/${faker.helpers.slugify(faker.person.fullName())}`,
+    },
+    {
+      label: faker.lorem.word({ length: 2 }),
+      value: `https://bitcointalk.org/index.php?topic=${faker.number.int({ min: 1, max: 1000000 }).toString()}.0`,
+    },
+    {
+      value: `https://bitcointalk.org/index.php?topic=${faker.number.int({ min: 1, max: 1000000 }).toString()}.0`,
+    },
     {
       value: faker.internet.url(),
     },
@@ -867,7 +883,7 @@ const generateFakeServiceContactMethod = (serviceId: number) => {
       value: faker.internet.url(),
     },
     {
-      value: `https://www.linkedin.com/company/${faker.helpers.slugify(faker.company.name())}`,
+      value: `https://linkedin.com/company/${faker.helpers.slugify(faker.company.name())}`,
     },
   ] as const satisfies Partial<Prisma.ServiceContactMethodCreateInput>[]
 
@@ -883,19 +899,19 @@ const specialUsersData = {
     envToken: 'DEV_ADMIN_USER_SECRET_TOKEN',
     defaultToken: 'admin',
     admin: true,
-    verifier: true,
+    moderator: true,
     verified: true,
     verifiedLink: 'https://kycnot.me',
     totalKarma: 1001,
     link: 'https://kycnot.me',
     picture: 'https://comments.kycnot.me/api/users/549f290e-0542-4c18-b437-5b64b35758f0/avatar?size=L',
   },
-  verifier: {
+  moderator: {
-    name: 'verifier_dev',
+    name: 'moderator_dev',
-    envToken: 'DEV_VERIFIER_USER_SECRET_TOKEN',
+    envToken: 'DEV_MODERATOR_USER_SECRET_TOKEN',
-    defaultToken: 'verifier',
+    defaultToken: 'moderator',
     admin: false,
-    verifier: true,
+    moderator: true,
     verified: true,
     verifiedLink: 'https://kycnot.me',
     totalKarma: 1001,
@@ -907,7 +923,7 @@ const specialUsersData = {
     envToken: 'DEV_VERIFIED_USER_SECRET_TOKEN',
     defaultToken: 'verified',
     admin: false,
-    verifier: false,
+    moderator: false,
     verified: true,
     verifiedLink: 'https://kycnot.me',
     totalKarma: 1001,
@@ -917,7 +933,7 @@ const specialUsersData = {
     envToken: 'DEV_NORMAL_USER_SECRET_TOKEN',
     defaultToken: 'normal',
     admin: false,
-    verifier: false,
+    moderator: false,
     verified: false,
   },
   spam: {
@@ -925,7 +941,7 @@ const specialUsersData = {
     envToken: 'DEV_SPAM_USER_SECRET_TOKEN',
     defaultToken: 'spam',
     admin: false,
-    verifier: false,
+    moderator: false,
     verified: false,
     totalKarma: -100,
     spammer: true,
@@ -1290,7 +1306,7 @@ async function runFaker() {
               tx.internalUserNote.create({
                 data: generateFakeInternalNote(
                   user.id,
-                  faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.verifier.id])
+                  faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.moderator.id])
                 ),
               })
             )
@@ -1307,7 +1323,7 @@ async function runFaker() {
               tx.internalUserNote.create({
                 data: generateFakeInternalNote(
                   user.id,
-                  faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.verifier.id])
+                  faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.moderator.id])
                 ),
               })
             )

web/src/actions/admin/service.ts

@@ -187,13 +187,17 @@ export const adminServiceActions = {
     accept: 'form',
     permissions: 'admin',
     input: z.object({
-      label: z.string().min(1).max(50).optional(),
+      label: z.string().min(1).max(50).nullable(),
       value: z.string().url(),
       serviceId: z.number().int().positive(),
     }),
     handler: async (input) => {
       const contactMethod = await prisma.serviceContactMethod.create({
-        data: input,
+        data: {
+          label: input.label,
+          value: input.value,
+          serviceId: input.serviceId,
+        },
       })
       return { contactMethod }
     },
@@ -203,16 +207,19 @@ export const adminServiceActions = {
     accept: 'form',
     permissions: 'admin',
     input: z.object({
-      id: z.number().int().positive().optional(),
+      id: z.number().int().positive(),
-      label: z.string().min(1).max(50).optional(),
+      label: z.string().min(1).max(50).nullable(),
       value: z.string().url(),
       serviceId: z.number().int().positive(),
     }),
     handler: async (input) => {
-      const { id, ...data } = input
       const contactMethod = await prisma.serviceContactMethod.update({
-        where: { id },
+        where: { id: input.id },
-        data,
+        data: {
+          label: input.label,
+          value: input.value,
+          serviceId: input.serviceId,
+        },
       })
       return { contactMethod }
     },

web/src/actions/admin/user.ts

@@ -16,7 +16,7 @@ const selectUserReturnFields = {
   picture: true,
   admin: true,
   verified: true,
-  verifier: true,
+  moderator: true,
   verifiedLink: true,
   secretTokenHash: true,
   totalKarma: true,
@@ -55,7 +55,7 @@ export const adminUserActions = {
         .default(null) // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         .transform((val) => val || null),
       pictureFile: z.instanceof(File).optional(),
-      type: z.array(z.enum(['admin', 'verifier', 'spammer'])),
+      type: z.array(z.enum(['admin', 'moderator', 'spammer'])),
       verifiedLink: z
         .string()
         .url('Invalid URL')
@@ -101,7 +101,7 @@ export const adminUserActions = {
           verified: !!valuesToUpdate.verifiedLink,
           picture: pictureUrl,
           admin: type.includes('admin'),
-          verifier: type.includes('verifier'),
+          moderator: type.includes('moderator'),
           spammer: type.includes('spammer'),
         },
         select: selectUserReturnFields,

web/src/actions/comment.ts

@@ -331,7 +331,7 @@ export const commentActions = {
   }),
 
   moderate: defineProtectedAction({
-    permissions: ['admin', 'verifier'],
+    permissions: ['admin', 'moderator'],
     input: z.object({
       commentId: z.number(),
       userId: z.number(),

web/src/components/Button.astro

@@ -58,27 +58,17 @@ const button = tv({
       },
     },
     color: {
-      black: {
+      black: '',
-        base: 'border-night-500 bg-night-800 hover:bg-night-900 hover:text-day-200 focus-visible:bg-night-500 text-white/50 focus-visible:text-white focus-visible:ring-white',
+      white: '',
-      },
+      gray: '',
-      white: {
+      success: '',
-        base: 'border-day-300 bg-day-100 hover:bg-day-200 text-black focus-visible:ring-green-500',
+      danger: '',
-      },
+      warning: '',
-      gray: {
+      info: '',
-        base: 'border-day-500 bg-day-400 hover:bg-day-500 text-black focus-visible:ring-white',
+    },
-      },
+    variant: {
-      success: {
+      solid: '',
-        base: 'border-green-600 bg-green-500 text-black hover:bg-green-600',
+      faded: '',
-      },
-      error: {
-        base: 'border-red-600 bg-red-500 text-white hover:bg-red-600',
-      },
-      warning: {
-        base: 'border-yellow-600 bg-yellow-500 text-white hover:bg-yellow-600',
-      },
-      info: {
-        base: 'border-blue-600 bg-blue-500 text-white hover:bg-blue-600',
-      },
     },
     shadow: {
       true: {
@@ -92,6 +82,107 @@ const button = tv({
     },
   },
   compoundVariants: [
+    // Color variants - solid
+    {
+      color: 'black',
+      variant: 'solid',
+      class: {
+        base: 'border-night-500 bg-night-800 hover:bg-night-900 hover:text-day-200 focus-visible:bg-night-500 text-white/50 focus-visible:text-white focus-visible:ring-white',
+      },
+    },
+    {
+      color: 'white',
+      variant: 'solid',
+      class: {
+        base: 'border-day-300 bg-day-100 hover:bg-day-200 text-black focus-visible:ring-green-500',
+      },
+    },
+    {
+      color: 'gray',
+      variant: 'solid',
+      class: {
+        base: 'border-day-500 bg-day-400 hover:bg-day-500 text-black focus-visible:ring-white',
+      },
+    },
+    {
+      color: 'success',
+      variant: 'solid',
+      class: {
+        base: 'border-green-600 bg-green-500 text-black hover:bg-green-600',
+      },
+    },
+    {
+      color: 'danger',
+      variant: 'solid',
+      class: {
+        base: 'border-red-600 bg-red-500 text-white hover:bg-red-600',
+      },
+    },
+    {
+      color: 'warning',
+      variant: 'solid',
+      class: {
+        base: 'border-yellow-600 bg-yellow-500 text-white hover:bg-yellow-600',
+      },
+    },
+    {
+      color: 'info',
+      variant: 'solid',
+      class: {
+        base: 'border-blue-600 bg-blue-500 text-white hover:bg-blue-600',
+      },
+    },
+    // Color variants - faded
+    {
+      color: 'black',
+      variant: 'faded',
+      class: {
+        base: 'border-night-300/30 bg-night-800/30 hover:bg-night-700/50 text-white/70 hover:text-white/90 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'white',
+      variant: 'faded',
+      class: {
+        base: 'border-day-300/30 bg-day-100/30 hover:bg-day-200/50 text-white/70 hover:text-white/90 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'gray',
+      variant: 'faded',
+      class: {
+        base: 'border-day-500/30 bg-day-400/30 hover:bg-day-500/50 text-day-300 hover:text-day-100 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'success',
+      variant: 'faded',
+      class: {
+        base: 'border-green-600/30 bg-green-500/30 text-green-300 hover:bg-green-500/50 hover:text-green-100',
+      },
+    },
+    {
+      color: 'danger',
+      variant: 'faded',
+      class: {
+        base: 'border-red-600/30 bg-red-500/30 text-red-300 hover:bg-red-500/50 hover:text-red-100',
+      },
+    },
+    {
+      color: 'warning',
+      variant: 'faded',
+      class: {
+        base: 'border-yellow-600/30 bg-yellow-500/30 text-yellow-300 hover:bg-yellow-500/50 hover:text-yellow-100',
+      },
+    },
+    {
+      color: 'info',
+      variant: 'faded',
+      class: {
+        base: 'border-blue-600/30 bg-blue-500/30 text-blue-300 hover:bg-blue-500/50 hover:text-blue-100',
+      },
+    },
+    // Shadow variants
     {
       color: 'black',
       shadow: true,
@@ -113,7 +204,7 @@ const button = tv({
       class: 'shadow-green-500/30',
     },
     {
-      color: 'error',
+      color: 'danger',
       shadow: true,
       class: 'shadow-red-500/30',
     },
@@ -127,6 +218,7 @@ const button = tv({
       shadow: true,
       class: 'shadow-blue-500/30',
     },
+    // Icon only variants
     {
       iconOnly: true,
       size: 'sm',
@@ -146,6 +238,7 @@ const button = tv({
   defaultVariants: {
     size: 'md',
     color: 'black',
+    variant: 'solid',
     shadow: false,
     disabled: false,
     iconOnly: false,
@@ -159,6 +252,7 @@ const {
   endIcon,
   size,
   color,
+  variant,
   shadow,
   class: className,
   classNames,
@@ -174,7 +268,7 @@ const {
   icon: iconSlot,
   label: labelSlot,
   endIcon: endIconSlot,
-} = button({ size, color, shadow, disabled, iconOnly: !label && !(!!icon && !!endIcon) })
+} = button({ size, color, variant, shadow, disabled, iconOnly: !label && !(!!icon && !!endIcon) })
 
 const ActualTag = disabled && Tag === 'a' ? 'span' : Tag
 ---

web/src/components/CommentItem.astro

@@ -61,8 +61,8 @@ const isHighlighted = comment.id === highlightedCommentId
 const userVote = user ? comment.votes.find((v) => v.userId === user.id) : null
 
 const isAuthor = user?.id === comment.author.id
-const isAdminOrVerifier = !!user && (user.admin || user.verifier)
+const isAdminOrModerator = !!user && (user.admin || user.moderator)
-const isAuthorOrPrivileged = isAuthor || isAdminOrVerifier
+const isAuthorOrPrivileged = isAuthor || isAdminOrModerator
 
 // Check if user is new (less than 1 week old)
 const isNewUser =
@@ -75,7 +75,7 @@ const isRatingActive =
   !comment.suspicious &&
   (comment.status === 'APPROVED' || comment.status === 'VERIFIED')
 
-// Skip rendering if comment is not approved/verified and user is not the author or admin/verifier
+// Skip rendering if comment is not approved/verified and user is not the author or admin/moderator
 const shouldShow =
   comment.status === 'APPROVED' ||
   comment.status === 'VERIFIED' ||
@@ -164,10 +164,10 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
       />
 
       {
-        (comment.author.verified || comment.author.admin || comment.author.verifier) && (
+        (comment.author.verified || comment.author.admin || comment.author.moderator) && (
           <Tooltip
             text={`${
-              comment.author.admin || comment.author.verifier
+              comment.author.admin || comment.author.moderator
                 ? `KYCnot.me ${comment.author.admin ? 'Admin' : 'Moderator'}${comment.author.verifiedLink ? '. ' : ''}`
                 : ''
             }${comment.author.verifiedLink ? `Related to ${comment.author.verifiedLink}` : ''}`}
@@ -186,7 +186,7 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
         )
       }
       {
-        comment.author.verifier && !comment.author.admin && (
+        comment.author.moderator && !comment.author.admin && (
           <BadgeSmall
             icon="ri:graduation-cap-fill"
             color="teal"
@@ -198,14 +198,14 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
       }
 
       {
-        isNewUser && !comment.author.admin && !comment.author.verifier && (
+        isNewUser && !comment.author.admin && !comment.author.moderator && (
           <Tooltip text={`Joined ${formatDateShort(comment.author.createdAt, { hourPrecision: true })}`}>
             <BadgeSmall icon="ri:user-add-fill" color="purple" text="New User" variant="faded" inlineIcon />
           </Tooltip>
         )
       }
       {
-        authorUnlocks.highKarmaBadge && !comment.author.admin && !comment.author.verifier && (
+        authorUnlocks.highKarmaBadge && !comment.author.admin && !comment.author.moderator && (
           <BadgeSmall
             icon={karmaUnlocksById.highKarmaBadge.icon}
             color="lime"
@@ -380,7 +380,7 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
   }
 
   {
-    user && (user.admin || user.verifier) && comment.internalNote && (
+    user && (user.admin || user.moderator) && comment.internalNote && (
       <div class="mt-2 peer-checked/collapse:hidden">
         <div class="border-l-2 border-red-600 bg-red-900/20 py-0.5 pl-2 text-xs">
           <span class="font-medium text-red-400">Internal note:</span>
@@ -391,7 +391,7 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
   }
 
   {
-    user && (user.admin || user.verifier) && comment.privateContext && (
+    user && (user.admin || user.moderator) && comment.privateContext && (
       <div class="mt-2 peer-checked/collapse:hidden">
         <div class="border-l-2 border-blue-600 bg-blue-900/20 py-0.5 pl-2 text-xs">
           <span class="font-medium text-blue-400">Private context:</span>

web/src/components/CommentModeration.astro

@@ -28,8 +28,8 @@ const { comment, class: className, ...divProps } = Astro.props
 
 const user = Astro.locals.user
 
-// Only render for admin/verifier users
+// Only render for admin/moderator users
-if (!user || !user.admin || !user.verifier) return null
+if (!user || !user.admin || !user.moderator) return null
 ---
 
 <div {...divProps} class={cn('text-xs', className)}>

web/src/components/CommentSection.astro

@@ -202,7 +202,7 @@ function makeReplySchema(comment: CommentWithRepliesPopulated): Comment {
           Most Upvotes
         </a>
         {
-          user && (user.admin || user.verifier) && (
+          user && (user.admin || user.moderator) && (
             <a
               href={getSortUrl('status')}
               class={cn([

web/src/components/FormSection.astro

@@ -0,0 +1,24 @@
+---
+import { cn } from '../lib/cn'
+
+import type { AstroChildren } from '../lib/astro'
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'section'> & {
+  title: string
+  subtitle?: string
+  heading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  children: AstroChildren
+}
+
+const { title, subtitle, class: className, heading = 'h2', ...props } = Astro.props
+
+const HeadingTag = heading
+---
+
+<section class={cn('mt-24 space-y-2 first:mt-0', className)} {...props}>
+  <HeadingTag class="font-title text-center text-3xl leading-none font-bold">{title}</HeadingTag>
+  {subtitle && <p class="text-day-400 text-center">{subtitle}</p>}
+
+  <slot />
+</section>

web/src/components/FormSubSection.astro

@@ -0,0 +1,24 @@
+---
+import { cn } from '../lib/cn'
+
+import type { AstroChildren } from '../lib/astro'
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'section'> & {
+  title: string
+  subtitle?: string
+  heading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  children: AstroChildren
+}
+
+const { title, subtitle, class: className, heading = 'h3', ...props } = Astro.props
+
+const HeadingTag = heading
+---
+
+<section class={cn('mt-6 space-y-2 first:mt-0', className)} {...props}>
+  <HeadingTag class="font-title text-day-400 text-center text-lg font-medium">{title}</HeadingTag>
+  {subtitle && <p class="text-day-400 text-center">{subtitle}</p>}
+
+  <slot />
+</section>

web/src/components/InputCheckboxGroup.astro

@@ -12,13 +12,15 @@ type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId'> &
   options: {
     label: string
     value: string
-    icon?: string
+    icon?: string[] | string
+    iconClassName?: string[] | string
   }[]
   disabled?: boolean
   selectedValues?: string[]
+  size?: 'lg' | 'md'
 }
 
-const { options, disabled, selectedValues = [], ...wrapperProps } = Astro.props
+const { options, disabled, selectedValues = [], size = 'md', ...wrapperProps } = Astro.props
 
 const inputId = Astro.locals.makeId(`input-${wrapperProps.name}`)
 const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
@@ -26,23 +28,38 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
 
 <InputWrapper inputId={inputId} {...wrapperProps}>
   <div class={cn(baseInputClassNames.div, hasError && baseInputClassNames.error)}>
-    <div class="h-48 overflow-y-auto mask-y-from-[calc(100%-var(--spacing)*8)] py-5">
+    <div
+      class={cn('h-48 overflow-y-auto mask-y-from-[calc(100%-var(--spacing)*8)] py-5', {
+        'h-96': size === 'lg',
+        'h-48': size === 'md',
+      })}
+    >
       {
-        options.map((option) => (
+        options.map((option) => {
-          <label class="hover:bg-night-500 flex cursor-pointer items-center gap-2 px-5 py-1">
+          const icons = option.icon ? (Array.isArray(option.icon) ? option.icon : [option.icon]) : []
-            <input
+          const iconClassName = option.iconClassName
-              transition:persist
+            ? Array.isArray(option.iconClassName)
-              type="checkbox"
+              ? option.iconClassName
-              name={wrapperProps.name}
+              : Array.from({ length: icons.length }, () => option.iconClassName)
-              value={option.value}
+            : []
-              checked={selectedValues.includes(option.value)}
+          return (
-              class={cn(hasError && baseInputClassNames.error, disabled && baseInputClassNames.disabled)}
+            <label class="hover:bg-night-500 flex cursor-pointer items-center gap-2 px-5 py-1">
-              disabled={disabled}
+              <input
-            />
+                transition:persist
-            {option.icon && <Icon name={option.icon} class="size-4" />}
+                type="checkbox"
-            <span class="text-sm leading-none">{option.label}</span>
+                name={wrapperProps.name}
-          </label>
+                value={option.value}
-        ))
+                checked={selectedValues.includes(option.value)}
+                class={cn(hasError && baseInputClassNames.error, disabled && baseInputClassNames.disabled)}
+                disabled={disabled}
+              />
+              {icons.map((icon, index) => (
+                <Icon name={icon} class={cn('size-4', iconClassName[index])} />
+              ))}
+              <span class="text-sm leading-none">{option.label}</span>
+            </label>
+          )
+        })
       }
     </div>
   </div>

web/src/components/InputTextArea.astro

@@ -10,7 +10,7 @@ import type { ComponentProps, HTMLAttributes } from 'astro/types'
 
 type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId' | 'required'> & {
   inputProps?: Omit<HTMLAttributes<'textarea'>, 'name'>
-  value?: string
+  value?: string | null | undefined
 }
 
 const { inputProps, value, ...wrapperProps } = Astro.props

web/src/constants/accountStatusChange.ts

@@ -43,14 +43,14 @@ export const {
       notificationTitle: 'Your account is no longer verified',
     },
     {
-      value: 'VERIFIER_TRUE',
+      value: 'MODERATOR_TRUE',
-      label: 'Verifier role granted',
+      label: 'Moderator role granted',
-      notificationTitle: 'Verifier role granted',
+      notificationTitle: 'Moderator role granted',
     },
     {
-      value: 'VERIFIER_FALSE',
+      value: 'MODERATOR_FALSE',
-      label: 'Verifier role revoked',
+      label: 'Moderator role revoked',
-      notificationTitle: 'Verifier role revoked',
+      notificationTitle: 'Moderator role revoked',
     },
     {
       value: 'SPAMMER_TRUE',

web/src/constants/contactMethods.ts

@@ -30,14 +30,14 @@ export const {
     {
       type: 'email',
       label: 'Email',
-      matcher: /mailto:(.*)/,
+      matcher: /mailto:(.+)/,
       formatter: (value) => value,
       icon: 'ri:mail-line',
     },
     {
       type: 'telephone',
       label: 'Telephone',
-      matcher: /tel:(.*)/,
+      matcher: /tel:(.+)/,
       formatter: (value) => {
         return parsePhoneNumberWithError(value).formatInternational()
       },
@@ -46,7 +46,7 @@ export const {
     {
       type: 'whatsapp',
       label: 'WhatsApp',
-      matcher: /https?:\/\/(?:www\.)?wa\.me\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?wa\.me\/(.+)/,
       formatter: (value) => {
         return parsePhoneNumberWithError(value).formatInternational()
       },
@@ -55,42 +55,35 @@ export const {
     {
       type: 'telegram',
       label: 'Telegram',
-      matcher: /https?:\/\/(?:www\.)?t\.me\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?t\.me\/(.+)/,
       formatter: (value) => `t.me/${value}`,
       icon: 'ri:telegram-line',
     },
     {
       type: 'linkedin',
       label: 'LinkedIn',
-      matcher: /https?:\/\/(?:www\.)?linkedin\.com\/(?:in|company)\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?linkedin\.com\/(?:in|company)\/(.+)/,
       formatter: (value) => `in/${value}`,
       icon: 'ri:linkedin-box-line',
     },
-    {
-      type: 'website',
-      label: 'Website',
-      matcher: /https?:\/\/(?:www\.)?((?:[a-zA-Z0-9-]+\.)+[a-zA-Z]+)/,
-      formatter: (value) => value,
-      icon: 'ri:global-line',
-    },
     {
       type: 'x',
       label: 'X',
-      matcher: /https?:\/\/(?:www\.)?x\.com\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?x\.com\/(.+)/,
       formatter: (value) => `@${value}`,
       icon: 'ri:twitter-x-line',
     },
     {
       type: 'instagram',
       label: 'Instagram',
-      matcher: /https?:\/\/(?:www\.)?instagram\.com\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?instagram\.com\/(.+)/,
       formatter: (value) => `@${value}`,
       icon: 'ri:instagram-line',
     },
     {
       type: 'matrix',
       label: 'Matrix',
-      matcher: /https?:\/\/(?:www\.)?matrix\.to\/#\/(.*)\/?/,
+      matcher: /https?:\/\/(?:www\.)?matrix\.to\/#\/(.+)/,
       formatter: (value) => value,
       icon: 'ri:hashtag',
     },
@@ -101,6 +94,14 @@ export const {
       formatter: () => 'BitcoinTalk',
       icon: 'ri:btc-line',
     },
+    // Website must go last because it's a catch-all
+    {
+      type: 'website',
+      label: 'Website',
+      matcher: /https?:\/\/(?:www\.)?((?:[a-zA-Z0-9-]+\.)+[a-zA-Z]+)/,
+      formatter: (value) => value,
+      icon: 'ri:global-line',
+    },
   ] as const satisfies ContactMethodInfo[]
 )
 

web/src/constants/eventTypes.ts

@@ -1,7 +1,9 @@
 import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
 import { transformCase } from '../lib/strings'
 
+import type BadgeSmall from '../components/BadgeSmall.astro'
 import type { EventType } from '@prisma/client'
+import type { ComponentProps } from 'astro/types'
 
 type EventTypeInfo<T extends string | null | undefined = string> = {
   id: T
@@ -12,6 +14,7 @@ type EventTypeInfo<T extends string | null | undefined = string> = {
     dot: string
   }
   icon: string
+  color: ComponentProps<typeof BadgeSmall>['color']
 }
 
 export const {
@@ -32,6 +35,7 @@ export const {
       dot: 'bg-zinc-700 text-zinc-300 ring-zinc-700/50',
     },
     icon: 'ri:question-fill',
+    color: 'gray',
   }),
   [
     {
@@ -43,6 +47,7 @@ export const {
         dot: 'bg-amber-900 text-amber-300 ring-amber-900/50',
       },
       icon: 'ri:error-warning-fill',
+      color: 'yellow',
     },
     {
       id: 'WARNING_SOLVED',
@@ -53,6 +58,7 @@ export const {
         dot: 'bg-green-900 text-green-300 ring-green-900/50',
       },
       icon: 'ri:check-fill',
+      color: 'green',
     },
     {
       id: 'ALERT',
@@ -63,6 +69,7 @@ export const {
         dot: 'bg-red-900 text-red-300 ring-red-900/50',
       },
       icon: 'ri:alert-fill',
+      color: 'red',
     },
     {
       id: 'ALERT_SOLVED',
@@ -73,6 +80,7 @@ export const {
         dot: 'bg-green-900 text-green-300 ring-green-900/50',
       },
       icon: 'ri:check-fill',
+      color: 'green',
     },
     {
       id: 'INFO',
@@ -83,6 +91,7 @@ export const {
         dot: 'bg-blue-900 text-blue-300 ring-blue-900/50',
       },
       icon: 'ri:information-fill',
+      color: 'sky',
     },
     {
       id: 'NORMAL',
@@ -93,6 +102,7 @@ export const {
         dot: 'bg-zinc-700 text-zinc-300 ring-zinc-700/50',
       },
       icon: 'ri:notification-fill',
+      color: 'green',
     },
     {
       id: 'UPDATE',
@@ -103,6 +113,7 @@ export const {
         dot: 'bg-sky-900 text-sky-300 ring-sky-900/50',
       },
       icon: 'ri:pencil-fill',
+      color: 'sky',
     },
   ] as const satisfies EventTypeInfo<EventType>[]
 )

web/src/constants/verificationStepStatus.ts

@@ -0,0 +1,53 @@
+import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
+import { transformCase } from '../lib/strings'
+
+import type BadgeSmall from '../components/BadgeSmall.astro'
+import type { VerificationStepStatus } from '@prisma/client'
+import type { ComponentProps } from 'astro/types'
+
+type VerificationStepStatusInfo<T extends string | null | undefined = string> = {
+  value: T
+  label: string
+  icon: string
+  color: ComponentProps<typeof BadgeSmall>['color']
+}
+
+export const {
+  dataArray: verificationStepStatuses,
+  dataObject: verificationStepStatusesByValue,
+  getFn: getVerificationStepStatusInfo,
+} = makeHelpersForOptions(
+  'value',
+  (value): VerificationStepStatusInfo<typeof value> => ({
+    value,
+    label: value ? transformCase(value, 'title') : String(value),
+    icon: 'ri:question-line',
+    color: 'gray',
+  }),
+  [
+    {
+      value: 'PASSED',
+      label: 'Passed',
+      icon: 'ri:verified-badge-fill',
+      color: 'green',
+    },
+    {
+      value: 'IN_PROGRESS',
+      label: 'In Progress',
+      icon: 'ri:loader-line',
+      color: 'yellow',
+    },
+    {
+      value: 'FAILED',
+      label: 'Failed',
+      icon: 'ri:alert-line',
+      color: 'red',
+    },
+    {
+      value: 'PENDING',
+      label: 'Pending',
+      icon: 'ri:time-line',
+      color: 'sky',
+    },
+  ] as const satisfies VerificationStepStatusInfo<VerificationStepStatus>[]
+)

web/src/layouts/MiniLayout.astro

@@ -8,7 +8,7 @@ import BaseLayout from './BaseLayout.astro'
 import type { ComponentProps } from 'astro/types'
 
 type Props = Omit<ComponentProps<typeof BaseLayout>, 'widthClassName'> & {
-  layoutHeader: { icon: string; title: string; subtitle: string }
+  layoutHeader: { icon: string; title: string; subtitle?: string }
 }
 
 const { layoutHeader, ...baseLayoutProps } = Astro.props
@@ -28,10 +28,19 @@ const { layoutHeader, ...baseLayoutProps } = Astro.props
       <Icon name={layoutHeader.icon} class="text-night-800 size-8" />
     </div>
 
-    <h1 class="font-title text-day-200 mt-1 text-center text-3xl font-semibold">
+    <h1
+      class={cn(
+        'font-title text-day-200 mt-1 text-center text-3xl font-semibold',
+        !layoutHeader.subtitle && 'xs:mb-8 mb-6'
+      )}
+    >
       {layoutHeader.title}
     </h1>
-    <p class="text-day-500 xs:mb-8 mt-1 mb-6 text-center">{layoutHeader.subtitle}</p>
+    {
+      !!layoutHeader.subtitle && (
+        <p class="text-day-500 xs:mb-8 mt-1 mb-6 text-center">{layoutHeader.subtitle}</p>
+      )
+    }
 
     <slot />
   </div>

web/src/lib/commentsWithReplies.ts

@@ -31,7 +31,7 @@ const commentReplyQuery = {
         name: true,
         verified: true,
         admin: true,
-        verifier: true,
+        moderator: true,
         createdAt: true,
         displayName: true,
         picture: true,

web/src/lib/defineProtectedAction.ts

@@ -9,7 +9,7 @@ import {
 import type { MaybePromise } from 'astro/actions/runtime/utils.js'
 import type { z } from 'astro/zod'
 
-type SpecialUserPermission = 'admin' | 'verified' | 'verifier'
+type SpecialUserPermission = 'admin' | 'verified' | 'moderator'
 type Permission = SpecialUserPermission | 'guest' | 'not-spammer' | 'user'
 
 type ActionAPIContextWithUser = ActionAPIContext & {
@@ -87,8 +87,8 @@ export function defineProtectedAction<
       }
 
       if (
-        (permissions === 'verifier' || (Array.isArray(permissions) && permissions.includes('verifier'))) &&
+        (permissions === 'moderator' || (Array.isArray(permissions) && permissions.includes('moderator'))) &&
-        !context.locals.user.verifier
+        !context.locals.user.moderator
       ) {
         if (context.locals.user.spammer) {
           throw new ActionError({
@@ -98,7 +98,7 @@ export function defineProtectedAction<
         }
         throw new ActionError({
           code: 'FORBIDDEN',
-          message: 'Verifier privileges required.',
+          message: 'Moderator privileges required.',
         })
       }
 

web/src/lib/userSecretToken.ts

@@ -29,8 +29,8 @@ const USER_SECRET_TOKEN_DEV_USERS_REGEX = (() => {
       defaultToken: 'admin',
     },
     {
-      envToken: 'DEV_VERIFIER_USER_SECRET_TOKEN',
+      envToken: 'DEV_MODERATOR_USER_SECRET_TOKEN',
-      defaultToken: 'verifier',
+      defaultToken: 'moderator',
     },
     {
       envToken: 'DEV_VERIFIED_USER_SECRET_TOKEN',

web/src/pages/account/index.astro

@@ -44,7 +44,7 @@ const user = await Astro.locals.banners.try('user', async () => {
         spammer: true,
         verified: true,
         admin: true,
-        verifier: true,
+        moderator: true,
         verifiedLink: true,
         totalKarma: true,
         createdAt: true,
@@ -206,7 +206,7 @@ if (!user) return Astro.rewrite('/404')
           </h1>
           {user.displayName && <p class="text-day-200 font-title">{user.name}</p>}
           {
-            (user.admin || user.verified || user.verifier) && (
+            (user.admin || user.verified || user.moderator) && (
               <div class="mt-1 flex gap-2">
                 {user.admin && (
                   <span class="rounded-full border border-red-500/50 bg-red-500/20 px-2 py-0.5 text-xs text-red-400">
@@ -218,9 +218,9 @@ if (!user) return Astro.rewrite('/404')
                     verified
                   </span>
                 )}
-                {user.verifier && (
+                {user.moderator && (
                   <span class="rounded-full border border-green-500/50 bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
-                    verifier
+                    moderator
                   </span>
                 )}
               </div>
@@ -356,14 +356,14 @@ if (!user) return Astro.rewrite('/404')
                     )
                   }
                   {
-                    user.verifier && (
+                    user.moderator && (
                       <span class="rounded-full border border-green-500/50 bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
-                        Verifier
+                        Moderator
                       </span>
                     )
                   }
                   {
-                    !user.admin && !user.verified && !user.verifier && (
+                    !user.admin && !user.verified && !user.moderator && (
                       <span class="border-day-700/50 bg-day-700/20 text-day-400 rounded-full border px-2 py-0.5 text-xs">
                         Standard User
                       </span>

web/src/pages/admin/comments.astro

@@ -20,7 +20,7 @@ import { prisma } from '../../lib/prisma'
 import { urlWithParams } from '../../lib/urls'
 
 const user = Astro.locals.user
-if (!user || (!user.admin && !user.verifier)) {
+if (!user || (!user.admin && !user.moderator)) {
   return Astro.rewrite('/404')
 }
 

web/src/pages/admin/index.astro

@@ -1,7 +1,9 @@
 ---
 import { Icon } from 'astro-icon/components'
+import { DATABASE_UI_URL } from 'astro:env/server'
 
 import BaseLayout from '../../layouts/BaseLayout.astro'
+import { cn } from '../../lib/cn'
 
 import type { ComponentProps } from 'astro/types'
 
@@ -9,7 +11,9 @@ type AdminLink = {
   icon: ComponentProps<typeof Icon>['name']
   title: string
   href: string
-  description: string
+  classNames: {
+    base?: string
+  }
 }
 
 const adminLinks: AdminLink[] = [
@@ -17,66 +21,98 @@ const adminLinks: AdminLink[] = [
     icon: 'ri:box-3-line',
     title: 'Services',
     href: '/admin/services',
-    description: 'Manage your available services',
+    classNames: {
-  },
+      base: 'text-green-300',
-  {
+    },
-    icon: 'ri:file-list-3-line',
-    title: 'Attributes',
-    href: '/admin/attributes',
-    description: 'Configure service attributes',
   },
   {
     icon: 'ri:user-3-line',
     title: 'Users',
     href: '/admin/users',
-    description: 'Manage user accounts',
+    classNames: {
+      base: 'text-red-300',
+    },
   },
   {
-    icon: 'ri:chat-settings-line',
+    icon: 'ri:chat-4-line',
     title: 'Comments',
     href: '/admin/comments',
-    description: 'Moderate user comments',
+    classNames: {
+      base: 'text-yellow-300',
+    },
   },
   {
     icon: 'ri:lightbulb-line',
-    title: 'Service suggestions',
+    title: 'Suggestions',
     href: '/admin/service-suggestions',
-    description: 'Review and manage service suggestions',
+    classNames: {
+      base: 'text-purple-300',
+    },
+  },
+  {
+    icon: 'ri:price-tag-3-line',
+    title: 'Attributes',
+    href: '/admin/attributes',
+    classNames: {
+      base: 'text-blue-300',
+    },
   },
   {
     icon: 'ri:megaphone-line',
     title: 'Announcements',
     href: '/admin/announcements',
-    description: 'Manage site announcements',
+    classNames: {
+      base: 'text-pink-300',
+    },
+  },
+  {
+    icon: 'ri:rocket-2-line',
+    title: 'Releases',
+    href: '/admin/releases',
+    classNames: {
+      base: 'text-orange-300',
+    },
+  },
+  {
+    icon: 'ri:database-2-line',
+    title: 'Database',
+    href: DATABASE_UI_URL,
+    classNames: {
+      base: 'text-gray-300',
+    },
   },
 ]
 ---
 
 <BaseLayout pageTitle="Admin Dashboard" widthClassName="max-w-screen-xl">
-  <h1 class="font-title mb-8 text-3xl font-bold text-zinc-100">
+  <h1 class="font-title text-day-100 mb-8 text-3xl font-bold">
     <Icon name="ri:home-gear-line" class="me-1 inline-block size-10 align-[-0.35em]" />
     Admin Dashboard
   </h1>
 
-  <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+  <nav>
-    {
+    <ol class="grid grid-cols-[repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))] gap-4">
-      adminLinks.map((link) => (
+      {
-        <a
+        adminLinks.map((link) => (
-          href={link.href}
+          <li
-          class="group block rounded-lg border border-zinc-800 bg-gradient-to-br from-zinc-900/90 to-zinc-900/50 p-6 shadow-lg backdrop-blur-xs transition-all duration-300 hover:-translate-y-0.5 hover:from-zinc-800/90 hover:to-zinc-800/50 hover:shadow-xl hover:shadow-zinc-900/20"
+            class={cn(
-        >
+              'group ease-out-back transition-transform duration-250 hover:-translate-y-0.5 hover:scale-105',
-          <div class="mb-4 flex items-center gap-3">
+              link.classNames.base
-            <Icon
+            )}
-              name={link.icon}
+          >
-              class="h-6 w-6 text-zinc-400 transition-colors group-hover:text-green-400"
+            <a
-            />
+              href={link.href}
-            <h2 class="font-title text-xl font-semibold text-zinc-100 transition-colors group-hover:text-green-400">
+              class="flex min-h-24 flex-col items-center justify-around rounded-lg border border-current/4 bg-current/3 py-3 text-center transition-all duration-250 group-hover:border-current/10 group-hover:bg-current/10 group-hover:shadow-xl"
-              {link.title}
+            >
-            </h2>
+              <Icon
-          </div>
+                name={link.icon}
-          <p class="text-sm text-zinc-400">{link.description}</p>
+                class="size-8 text-current opacity-50 transition-opacity duration-250 group-hover:opacity-100"
-        </a>
+              />
-      ))
+              <span class="font-title text-xl leading-none font-semibold text-current">{link.title}</span>
-    }
+            </a>
-  </div>
+          </li>
+        ))
+      }
+    </ol>
+  </nav>
 </BaseLayout>

web/src/pages/admin/releases.astro

@@ -0,0 +1,44 @@
+---
+import { RELEASE_DATE, RELEASE_NUMBER } from 'astro:env/server'
+
+import TimeFormatted from '../../components/TimeFormatted.astro'
+import MiniLayout from '../../layouts/MiniLayout.astro'
+
+const releaseDate =
+  RELEASE_DATE && !isNaN(new Date(RELEASE_DATE).getTime()) ? new Date(RELEASE_DATE) : undefined
+---
+
+<MiniLayout
+  pageTitle="Releases"
+  description="Manage releases"
+  layoutHeader={{
+    icon: 'ri:rocket-2-line',
+    title: 'Releases',
+    subtitle: 'Current release',
+  }}
+  className={{
+    main: 'flex flex-col items-center justify-center text-center',
+  }}
+>
+  <p class="text-day-200 font-title text-center text-6xl font-medium tracking-wider">
+    {RELEASE_NUMBER ? `#${RELEASE_NUMBER}` : '???'}
+  </p>
+  <time class="text-day-400 mt-4 block text-center text-xl" datetime={releaseDate?.toISOString()}>
+    {
+      releaseDate?.toLocaleString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      }) ?? 'Unknown release date'
+    }
+  </time>
+  {
+    !!releaseDate && (
+      <p class="text-day-500 mt-2">
+        (<TimeFormatted date={releaseDate} hourPrecision daysUntilDate={Infinity} />)
+      </p>
+    )
+  }
+</MiniLayout>

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

@@ -4,6 +4,7 @@ import { actions, isInputError } from 'astro:actions'
 
 import BadgeSmall from '../../../components/BadgeSmall.astro'
 import Button from '../../../components/Button.astro'
+import FormSection from '../../../components/FormSection.astro'
 import InputCardGroup from '../../../components/InputCardGroup.astro'
 import InputImageFile from '../../../components/InputImageFile.astro'
 import InputSelect from '../../../components/InputSelect.astro'
@@ -52,7 +53,7 @@ const [user, allServices] = await Astro.locals.banners.tryMany([
           link: true,
           admin: true,
           verified: true,
-          verifier: true,
+          moderator: true,
           spammer: true,
           verifiedLink: true,
           internalNotes: {
@@ -141,7 +142,7 @@ if (!user) return Astro.rewrite('/404')
     <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.moderator && <BadgeSmall color="blue" text="Moderator" icon="ri:graduation-cap-fill" />}
       {user.spammer && <BadgeSmall color="red" text="Spammer" icon="ri:alert-fill" />}
     </div>
 
@@ -171,90 +172,88 @@ if (!user) return Astro.rewrite('/404')
     </div>
   </div>
 
-  <form
+  <FormSection title="Edit profile">
-    method="POST"
+    <form
-    action={actions.admin.user.update}
+      method="POST"
-    enctype="multipart/form-data"
+      action={actions.admin.user.update}
-    class="space-y-2"
+      enctype="multipart/form-data"
-    data-astro-reload
+      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} />
 
-    <input type="hidden" name="id" value={user.id} />
+      <div class="grid grid-cols-2 gap-x-4 gap-y-2">
+        <InputText
+          label="Name"
+          name="name"
+          error={updateInputErrors.name}
+          inputProps={{ value: user.name, required: true }}
+        />
 
-    <div class="grid grid-cols-2 gap-x-4 gap-y-2">
+        <InputText
-      <InputText
+          label="Display Name"
-        label="Name"
+          name="displayName"
-        name="name"
+          error={updateInputErrors.displayName}
-        error={updateInputErrors.name}
+          inputProps={{ value: user.displayName ?? '', maxlength: 50 }}
-        inputProps={{ value: user.name, required: true }}
+        />
+
+        <InputText
+          label="Link"
+          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."
       />
 
-      <InputText
+      <InputCardGroup
-        label="Display Name"
+        name="type"
-        name="displayName"
+        label="Type"
-        error={updateInputErrors.displayName}
+        options={[
-        inputProps={{ value: user.displayName ?? '', maxlength: 50 }}
+          { label: 'Admin', value: 'admin', icon: 'ri:shield-star-fill' },
+          { label: 'Moderator', value: 'moderator', icon: 'ri:graduation-cap-fill' },
+          { label: 'Spammer', value: 'spammer', icon: 'ri:alert-fill' },
+          {
+            label: 'Verified',
+            value: 'verified',
+            icon: 'ri:verified-badge-fill',
+            disabled: true,
+            noTransitionPersist: true,
+          },
+        ]}
+        selectedValue={[
+          user.admin ? 'admin' : null,
+          user.verified ? 'verified' : null,
+          user.moderator ? 'moderator' : null,
+          user.spammer ? 'spammer' : null,
+        ].filter((v) => v !== null)}
+        required
+        cardSize="sm"
+        iconSize="sm"
+        multiple
+        error={updateInputErrors.type}
       />
 
-      <InputText
+      <InputSubmitButton label="Save" icon="ri:save-line" hideCancel />
-        label="Link"
+    </form>
-        name="link"
+  </FormSection>
-        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>
 
+  <FormSection title="Internal Notes">
     {
       user.internalNotes.length === 0 ? (
         <p class="text-day-300 text-center">No internal notes yet.</p>
@@ -294,7 +293,7 @@ if (!user) return Astro.rewrite('/404')
                   <form
                     method="POST"
                     action={actions.admin.user.internalNotes.delete}
-                    class="contents"
+                    class="space-y-2"
                     data-astro-reload
                   >
                     <input type="hidden" name="noteId" value={note.id} />
@@ -347,11 +346,9 @@ if (!user) return Astro.rewrite('/404')
       />
       <InputSubmitButton label="Add" icon="ri:add-line" hideCancel />
     </form>
-  </section>
+  </FormSection>
-
-  <section class="space-y-2">
-    <h2 class="font-title text-center text-3xl leading-none font-bold">Service Affiliations</h2>
 
+  <FormSection title="Service Affiliations">
     {
       user.serviceAffiliations.length === 0 ? (
         <p class="text-day-200 text-center">No service affiliations yet.</p>
@@ -380,7 +377,7 @@ if (!user) return Astro.rewrite('/404')
                   method="POST"
                   action={actions.admin.user.serviceAffiliations.remove}
                   data-astro-reload
-                  class="contents"
+                  class="space-y-2"
                 >
                   <input type="hidden" name="id" value={affiliation.id} />
                   <button type="submit" class="text-day-300 transition-colors hover:text-red-400">
@@ -429,29 +426,29 @@ if (!user) return Astro.rewrite('/404')
 
       <InputSubmitButton label="Add Affiliation" icon="ri:link" hideCancel />
     </form>
-  </section>
+  </FormSection>
 
-  <form method="POST" action={actions.admin.user.karmaTransactions.add} data-astro-reload class="space-y-2">
+  <FormSection title="Grant/Remove Karma">
-    <h2 class="font-title text-center text-3xl leading-none font-bold">Grant/Remove Karma</h2>
+    <form method="POST" action={actions.admin.user.karmaTransactions.add} data-astro-reload class="space-y-2">
+      <input type="hidden" name="userId" value={user.id} />
 
-    <input type="hidden" name="userId" value={user.id} />
+      <InputText
+        label="Points"
+        name="points"
+        error={addKarmaTransactionResult?.error?.message}
+        inputProps={{ type: 'number', required: true }}
+      />
 
-    <InputText
+      <InputTextArea
-      label="Points"
+        label="Description"
-      name="points"
+        name="description"
-      error={addKarmaTransactionResult?.error?.message}
+        error={addKarmaTransactionResult?.error?.message}
-      inputProps={{ type: 'number', required: true }}
+        inputProps={{ required: true }}
-    />
+      />
 
-    <InputTextArea
+      <InputSubmitButton label="Submit" icon="ri:add-line" hideCancel />
-      label="Description"
+    </form>
-      name="description"
+  </FormSection>
-      error={addKarmaTransactionResult?.error?.message}
-      inputProps={{ required: true }}
-    />
-
-    <InputSubmitButton label="Submit" icon="ri:add-line" hideCancel />
-  </form>
 </BaseLayout>
 
 <script>

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

@@ -21,7 +21,7 @@ const { data: filters } = zodParseQueryParamsStoringErrors(
     'sort-by': z.enum(['name', 'role', 'createdAt', 'karma']).default('createdAt'),
     'sort-order': z.enum(['asc', 'desc']).default('desc'),
     search: z.string().optional(),
-    role: z.enum(['user', 'admin', 'verifier', 'verified', 'spammer']).optional(),
+    role: z.enum(['user', 'admin', 'moderator', 'verified', 'spammer']).optional(),
   },
   Astro
 )
@@ -46,7 +46,7 @@ if (filters.role) {
   switch (filters.role) {
     case 'user': {
       whereClause.admin = false
-      whereClause.verifier = false
+      whereClause.moderator = false
       whereClause.verified = false
       whereClause.spammer = false
       break
@@ -55,8 +55,8 @@ if (filters.role) {
       whereClause.admin = true
       break
     }
-    case 'verifier': {
+    case 'moderator': {
-      whereClause.verifier = true
+      whereClause.moderator = true
       break
     }
     case 'verified': {
@@ -80,7 +80,7 @@ const dbUsers = await prisma.user.findMany({
     picture: true,
     verified: true,
     admin: true,
-    verifier: true,
+    moderator: true,
     spammer: true,
     totalKarma: true,
     createdAt: true,
@@ -147,7 +147,7 @@ const makeSortUrl = (sortBy: NonNullable<(typeof filters)['sort-by']>) => {
             <option value="" selected={!filters.role}>All Users</option>
             <option value="user" selected={filters.role === 'user'}>Regular Users</option>
             <option value="admin" selected={filters.role === 'admin'}>Admins</option>
-            <option value="verifier" selected={filters.role === 'verifier'}>Verifiers</option>
+            <option value="moderator" selected={filters.role === 'moderator'}>Moderators</option>
             <option value="verified" selected={filters.role === 'verified'}>Verified Users</option>
             <option value="spammer" selected={filters.role === 'spammer'}>Spammers</option>
           </select>
@@ -277,10 +277,10 @@ const makeSortUrl = (sortBy: NonNullable<(typeof filters)['sort-by']>) => {
                           Verified
                         </span>
                       )}
-                      {user.verifier && (
+                      {user.moderator && (
                         <span class="inline-flex items-center gap-1 rounded-md bg-blue-900/30 px-2 py-0.5 text-xs font-medium text-blue-400">
                           <Icon name="ri:shield-check-fill" class="size-3.5" />
-                          Verifier
+                          Moderator
                         </span>
                       )}
                     </div>

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

@@ -43,7 +43,7 @@ const user = await Astro.locals.banners.try('user', async () => {
         spammer: true,
         verified: true,
         admin: true,
-        verifier: true,
+        moderator: true,
         verifiedLink: true,
         totalKarma: true,
         createdAt: true,
@@ -208,7 +208,7 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
         sameAs: user.link ? [user.link] : undefined,
         description: `User profile page for ${user.displayName ?? user.name} on KYCnot.me`,
         identifier: [user.name, user.id.toString()],
-        jobTitle: user.admin ? 'Administrator' : user.verifier ? 'Moderator' : undefined,
+        jobTitle: user.admin ? 'Administrator' : user.moderator ? 'Moderator' : undefined,
         memberOf: KYCNOTME_SCHEMA_MINI,
         interactionStatistic: [
           {
@@ -281,9 +281,9 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
               )
             }
             {
-              user.verifier && (
+              user.moderator && (
                 <span class="rounded-full border border-green-500/50 bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
-                  verifier
+                  moderator
                 </span>
               )
             }
@@ -415,14 +415,14 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
                     )
                   }
                   {
-                    user.verifier && (
+                    user.moderator && (
                       <span class="rounded-full border border-green-500/50 bg-green-500/20 px-2 py-0.5 text-xs text-green-400">
-                        Verifier
+                        Moderator
                       </span>
                     )
                   }
                   {
-                    !user.admin && !user.verified && !user.verifier && (
+                    !user.admin && !user.verified && !user.moderator && (
                       <span class="border-day-700/50 bg-day-700/20 text-day-400 rounded-full border px-2 py-0.5 text-xs">
                         Standard User
                       </span>