Release 2025-05-25-ELtG

.cursor/rules/astro-actions-api.mdc

@@ -0,0 +1,20 @@
+---
+description: 
+globs: web/src/actions,web/src/pages
+alwaysApply: false
+---
+- In the astro actions return, generaly don't return anythig unless the caller doesn't needs it. Specially don't `return { success: true }`, or similar. If needed, just return an object with the newly created/edited objects (Like: `return { newService: service }` or don't return anything if not needed).
+- When importing actions, use `import { actions } from 'astro:actions'`. Example:
+
+  ```ts
+  import { actions } from 'astro:actions'; /* CORRECT */
+  import { server } from '~/actions'; /* WRONG!!!! DON'T DO THIS */
+  import { adminAttributeActions } from '~/actions/admin/attribute.ts'; /* WRONG!!!! DON'T DO THIS */
+
+  const result = Astro.getActionResult(actions.admin.attribute.create);
+  ```
+- When adding actions, don't create and export a new variable called actions. Notice that Astro already provides that variable from `import { actions } from 'astro:actions'`. So just add the new actions to the `server` variable in `web/src/actions/index.ts` and that's it.
+- When throwing errors in Astro actions use ActionError.
+- Always use Astro actions instead of with API routes and instead of `if (Astro.request.method === "POST")`.
+- Generally call the actions using html forms. But if you need to, you can call them from the server-side code with Astro.callAction(), or [callActionWithUrlParams.ts](mdc:web/src/lib/callActionWithUrlParams.ts).
+- The admin actions go into a separate folder.

.cursor/rules/client-side-javascript.mdc

@@ -0,0 +1,26 @@
+---
+description: 
+globs: web/src/pages,web/src/components
+alwaysApply: false
+---
+- Avoid sending JavaScript to the client. The JS send should always be optional.
+- Avoid using client-side JavaScript as much as possible. And if it has to be done, make it optional.
+- To avoid using JavaScript, you can use HTML and CSS features such as hidden checkboxes, deltails tag, etc.
+- The admin pages can use client-side JavaScript.
+- When adding clientside JS do it with HTMX.
+- When adding HTMX, the layout component BaseLayout [BaseLayout.astro](mdc:web/src/layouts/BaseLayout.astro) [BaseHead.astro](mdc:web/src/components/BaseHead.astro) accepts a prop htmx to load it in that page. No need to use a cdn.
+- When adding client scripts remember to use the event `astro:page-load`, `querySelectorAll<Type>` and add an explanation comment, like so:
+
+  ```tsx
+  <script>
+    ////////////////////////////////////////////////////////////
+    // Optional script for __________.                        //
+    // Desctiption goes here...                               //
+    ////////////////////////////////////////////////////////////
+    document.addEventListener('astro:page-load', () => {
+      document.querySelectorAll<HTMLDivElement>('[data-my-div]').forEach((myDiv) => {
+        // Do something
+      })
+    })
+  </script>
+  ```

.cursor/rules/code-style.mdc

@@ -0,0 +1,8 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+- Instead of using the syntax`Array<T>`, use `T[]`.
+- Use TypeScript `type` over `interface`.
+- You should never add unnecessary or unuseful comments, if you add a comment it must provide some value to the code.

.cursor/rules/database.mdc

@@ -0,0 +1,54 @@
+---
+description: Querying the database, editing the database, needing to import types from the database,  or anything related to the database or Prisma.
+globs: 
+alwaysApply: false
+---
+- We use Prisma as ORM.
+- Remember to check the prisma schema [schema.prisma](mdc:web/prisma/schema.prisma) when doing things related to the database.
+- Import the types from prisma instead of hardcoding duplicates. Specially use the Prisma.___GetPayload type and the enums. Like this:
+    ```ts
+    type Props = {
+      user: Prisma.UserGetPayload<{
+        select: {
+          name: true
+          displayName: true
+          picture: true
+        }
+      }>
+    }
+    ```
+
+- Only `select` the necessary fields, no more.
+- In prisma preffer `select` over `include` when making queries.
+- Avoid hardcoding enums from the database, import them from prisma.
+- To query the database from Astro pages, use Astro.locals.try() or Astro.locals.tryMany([]) [errorBanners.ts](mdc:web/src/lib/errorBanners.ts) [middleware.ts](mdc:web/src/middleware.ts) , like so:
+```ts
+const [user, services] = await Astro.locals.banners.tryMany([
+  [
+    'Error fetching user',
+    () =>
+      prisma.user.findUnique({
+        where: { id: userId },
+        select: {
+          name: true,
+          displayName: true,
+          picture: true,
+        },
+      }),
+  ],
+  [
+    'Error fetching services',
+    () =>
+      prisma.service.findMany({
+        where: { categories: { some: { id: categoryId } } },
+        select: {
+          id: true,
+          name: true,
+          slug: true,
+        },
+      }),
+    [] as [],
+  ],
+])
+```
+- When editing the database, remember to edit the db seeding file [faker.ts](mdc:web/scripts/faker.ts) to generate data for the new schema.

.cursor/rules/design-patterns.mdc

@@ -0,0 +1,98 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+- The main libraries used are: Astro, TypeScript, Tailwind 4, HTMX, Prisma, npm, zod, lodash-es, date-fns, ts-toolbelt. Full list in: [package.json](mdc:web/package.json)
+- When creating constants or enums, use the `makeHelpersForOptions` function [makeHelpersForOptions.ts](mdc:web/src/lib/makeHelpersForOptions.ts) like in this example. Save the file in the `web/src/constants` folder (like [attributeTypes.ts](mdc:web/src/constants/attributeTypes.ts)). Note that it's not necessary to use all the options or export all the variables that the example has, just the ones you need.
+
+```ts
+import { makeHelpersForOptions } from '../lib/makeHelpersForOptions';
+import { transformCase } from '../lib/strings';
+
+import type { AttributeType } from '@prisma/client';
+
+type AttributeTypeInfo<T extends string | null | undefined = string> = {
+  value: T;
+  slug: string;
+  label: string;
+  icon: string;
+  order: number;
+  classNames: {
+    text: string;
+    icon: string;
+  };
+};
+
+export const {
+  dataArray: attributeTypes,
+  dataObject: attributeTypesById,
+  getFn: getAttributeTypeInfo,
+  getFnSlug: getAttributeTypeInfoBySlug,
+  zodEnumBySlug: attributeTypesZodEnumBySlug,
+  zodEnumById: attributeTypesZodEnumById,
+  keyToSlug: attributeTypeIdToSlug,
+  slugToKey: attributeTypeSlugToId,
+} = makeHelpersForOptions(
+  'value',
+  (value): AttributeTypeInfo<typeof value> => ({
+    value,
+    slug: value ? value.toLowerCase() : '',
+    label: value
+      ? transformCase(value.replace('_', ' '), 'title')
+      : String(value),
+    icon: 'ri:question-line',
+    order: Infinity,
+    classNames: {
+      text: 'text-current/60',
+      icon: 'text-current/60',
+    },
+  }),
+  [
+    {
+      value: 'BAD',
+      slug: 'bad',
+      label: 'Bad',
+      icon: 'ri:close-line',
+      order: 1,
+      classNames: {
+        text: 'text-red-200',
+        icon: 'text-red-400',
+      },
+    },
+    {
+      value: 'WARNING',
+      slug: 'warning',
+      label: 'Warning',
+      icon: 'ri:alert-line',
+      order: 2,
+      classNames: {
+        text: 'text-yellow-200',
+        icon: 'text-yellow-400',
+      },
+    },
+    {
+      value: 'GOOD',
+      slug: 'good',
+      label: 'Good',
+      icon: 'ri:check-line',
+      order: 3,
+      classNames: {
+        text: 'text-green-200',
+        icon: 'text-green-400',
+      },
+    },
+    {
+      value: 'INFO',
+      slug: 'info',
+      label: 'Info',
+      icon: 'ri:information-line',
+      order: 4,
+      classNames: {
+        text: 'text-blue-200',
+        icon: 'text-blue-400',
+      },
+    },
+  ] as const satisfies AttributeTypeInfo<AttributeType>[]
+);
+```

.cursor/rules/pages-and-components.mdc

@@ -0,0 +1,161 @@
+---
+description: 
+globs: web/src/pages,web/src/components
+alwaysApply: false
+---
+- On .astro files, don't forget to include the three dashes (`---`) at the begining of the file and where the server js ends. I noticed that sometimes you forget them.
+- For icons use the `Icon` component from `astro-icon/components`.
+- For icons use the Remix Icon library preferably.
+- Use the `MyPicture` component from `src/components/MyPicture.astro` for images.
+- When redirecting to login use the `makeLoginUrl` function from [redirectUrls.ts](mdc:web/src/lib/redirectUrls.ts) and if the link is for an `<a>` tag, use the `data-astro-reload` attribute. Similar for the logout and impersonate.
+- Don't use the `web/src/pages/admin` pages as example unless explicitly stated or you're creating/editing an admin page.
+- Checkout the @errorBanners.ts @middleware.ts @env.d.ts to see the avilable Astro.locals values.
+- Avoid duplicating similar html code. You can use jsx for loops, create variables in the constants folder, or create separate components.
+- When redirecting to the 404 not found page, use `Astro.rewrite` (Like this example: `if (!user) return Astro.rewrite('/404')`)
+- Include schema markup in the pages when it makes sense. Examples: [[slug].astro](mdc:web/src/pages/service/[slug].astro)
+- When creating forms, we already have utilities, components and established design patterns. Follow this example. (Note that this example may come slightly outdaded, but the overall philosophy doesn't change)
+  ```astro
+  ---
+  import { actions, isInputError } from 'astro:actions'
+  import { z } from 'astro:content'
+
+  import Captcha from '../../components/Captcha.astro'
+  import InputCardGroup from '../../components/InputCardGroup.astro'
+  import InputCheckboxGroup from '../../components/InputCheckboxGroup.astro'
+  import InputHoneypotTrap from '../../components/InputHoneypotTrap.astro'
+  import InputImageFile from '../../components/InputImageFile.astro'
+  import InputSubmitButton from '../../components/InputSubmitButton.astro'
+  import InputText from '../../components/InputText.astro'
+  import InputTextArea from '../../components/InputTextArea.astro'
+  import { kycLevels } from '../../constants/kycLevels'
+  import BaseLayout from '../../layouts/BaseLayout.astro'
+  import { zodParseQueryParamsStoringErrors } from '../../lib/parseUrlFilters'
+  import { prisma } from '../../lib/prisma'
+  import { makeLoginUrl } from '../../lib/redirectUrls'
+
+  const user = Astro.locals.user
+  if (!user) {
+    return Astro.redirect(makeLoginUrl(Astro.url, { message: 'Login to suggest a new service' }))
+  }
+
+  const result = Astro.getActionResult(actions.serviceSuggestion.editService)
+  if (result && !result.error) {
+    return Astro.redirect(`/service-suggestion/${result.data.serviceSuggestion.id}`)
+  }
+  const inputErrors = isInputError(result?.error) ? result.error.fields : {}
+
+  const { data: params } = zodParseQueryParamsStoringErrors(
+    {
+      serviceId: z.coerce.number().int().positive(),
+      notes: z.string().default(''),
+    },
+    Astro
+  )
+
+  if (!params.serviceId) return Astro.rewrite('/404')
+
+  const service = await Astro.locals.banners.try(
+    'Failed to fetch service',
+    async () =>
+      prisma.service.findUnique({
+        select: {
+          id: true,
+          name: true,
+          slug: true,
+          description: true,
+          overallScore: true,
+          kycLevel: true,
+          imageUrl: true,
+          verificationStatus: true,
+          acceptedCurrencies: true,
+          categories: {
+            select: {
+              name: true,
+              icon: true,
+            },
+          },
+        },
+        where: { id: params.serviceId },
+      }),
+    null
+  )
+
+  if (!service) return Astro.rewrite('/404')
+  ---
+
+  <BaseLayout
+    pageTitle="Edit service"
+    description="Suggest an edit to 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>
+
+    <form method="POST" action={actions.serviceSuggestion.editService} class="space-y-6">
+      <input type="hidden" name="serviceId" value={params.serviceId} />
+
+      <InputText
+        label="Service name"
+        name="name"
+        value={service.name}
+        error={inputErrors.name}
+        inputProps={{ 'data-custom-value': true, required: true }}
+      />
+
+      <InputCardGroup
+        name="kycLevel"
+        label="KYC Level"
+        options={kycLevels.map((kycLevel) => ({
+          label: kycLevel.name,
+          value: kycLevel.id.toString(),
+          icon: kycLevel.icon,
+          description: `${kycLevel.description}\n\n_KYC Level ${kycLevel.value}/5_`,
+        }))}
+        iconSize="md"
+        cardSize="md"
+        required
+        error={inputErrors.kycLevel}
+      />
+
+      <InputCheckboxGroup
+        name="categories"
+        label="Categories"
+        required
+        options={categories.map((category) => ({
+          label: category.name,
+          value: category.id.toString(),
+          icon: category.icon,
+        }))}
+        error={inputErrors.categories}
+      />
+
+      <InputImageFile
+        label="Service Image"
+        name="imageFile"
+        description="Square image. At least 192x192px. Transparency supported."
+        error={inputErrors.imageFile}
+        square
+        required
+      />
+
+      <InputTextArea
+        label="Note for Moderators"
+        name="notes"
+        value={params.notes}
+        inputProps={{ rows: 10 }}
+        error={inputErrors.notes}
+      />
+
+      <Captcha action={actions.serviceSuggestion.createService} />
+
+      <InputHoneypotTrap name="message" />
+
+      <InputSubmitButton hideCancel />
+    </form>
+  </BaseLayout>
+  ```

.cursor/rules/styles.mdc

@@ -0,0 +1,10 @@
+---
+description: 
+globs: /web/src/pages,/web/src/components,/web/src/constants
+alwaysApply: false
+---
+- We use Tailwind 4 (the latest version), make sure to not use outdated classes from Tailwind 3.
+- Checkout the custom tailwind theme [global.css](mdc:web/src/styles/global.css).  
+- When adding conditional styles or merging tailwind classes, use the `cn` function. Never use template strings. [cn.ts](mdc:web/src/lib/cn.ts)
+- For the grayscale colors, try to use the custom color `day` for the light/foreground colors (50-500) and `night` for the dark/bakground (500-950). 
+- Generally avoid using opacity modifiers (In `text-red-500/50` the `/50`), but it's fine to also use it.

.cursorrules

@@ -1,307 +0,0 @@
-# Cursor Rules
-
-- When merging tailwind classes, use the `cn` function.
-- When using Tailwind and you need to merge classes use the `cn` function if avilable.
-- We use Tailwind 4 (the latest version), make sure to not use outdated classes.
-- Instead of using the syntax`Array<T>`, use `T[]`.
-- Use TypeScript `type` over `interface`.
-- You are forbiddent o add comments unless explicitly stated by the user.
-- Avoid sending JavaScript to the client. The JS send should be optional.
-- In prisma preffer `select` over `include` when making queries.
-- Import the types from prisma instead of hardcoding duplicates.
-- Avoid duplicating similar html code, and parametrize it when possible or create separate components.
-- Remember to check the prisma schema when doing things related to the database.
-- Avoid hardcoding enums from the database, import them from prisma.
-- Avoid using client-side JavaScript as much as possible. And if it has to be done, make it optional.
-- The admin pages can use client-side JavaScript.
-- Keep README.md in sync with new capabilities.
-- The package manager is npm.
-- For icons use the `Icon` component from `astro-icon/components`.
-- For icons use the Remix Icon library preferably.
-- Use the `Image` component from `astro:assets` for images.
-- Use the `zod` library for schema validation.
-- In the astro actions return, don't return success: true, or similar, just return an object with the newly created/edited objects or nothing.
-- When adding actions, don't create and export a new variable called actions. Notice that Astro already provides that variable from `import { actions } from 'astro:actions'`. So just add the new actions to the `server` variable in `web/src/actions/index.ts` and that's it.
-- Don't forget that the astro files have three dashes (`---`) at the begining of the file and where the server js ends. I noticed that sometimes you forget them.
-- The admin actions go into a separate folder.
-- In Actro actions when throwing errors use ActionError.
-- @deprecated Don't import this object, use {@link actions} instead, like: `import { actions } from 'astro:actions'`. Example:
-
-  ```ts
-  import { actions } from 'astro:actions'; /* CORRECT */
-  import { server } from '~/actions'; /* WRONG!!!! DON'T DO THIS */
-  import { adminAttributeActions } from '~/actions/admin/attribute.ts'; /* WRONG!!!! DON'T DO THIS */
-
-  const result = Astro.getActionResult(actions.admin.attribute.create);
-  ```
-
-- Always use Astro actions instead of with API routes or `if (Astro.request.method === "POST")`.
-- When adding clientside js do it with HTMX.
-- When adding HTMX, the layout component BaseLayout accepts a prop htmx to load it in that page. No need to use a cdn.
-- When redirecting to login use the `makeLoginUrl` function from web/src/lib/redirectUrls.ts and if the link is for an `<a>` tag, use the `data-astro-reload` attribute.
-
-  ```ts
-  function makeLoginUrl(
-    currentUrl: URL,
-    options: {
-      redirect?: URL | string | null;
-      error?: string | null;
-      logout?: boolean;
-      message?: string | null;
-    } = {}
-  );
-  ```
-
-- When adding client scripts remember to use the event `astro:page-load`, `querySelectorAll<Type>` and add an explanation comment, like so:
-
-  ```tsx
-  <script>
-    ////////////////////////////////////////////////////////////
-    // Optional script for __________.                        //
-    // Desctiption goes here...                               //
-    ////////////////////////////////////////////////////////////
-
-    document.addEventListener('astro:page-load', () => {
-      document.querySelectorAll<HTMLDivElement>('[data-my-div]').forEach((myDiv) => {
-        // Do something
-      })
-    })
-  </script>
-  ```
-
-- When creating forms, we already have utilities, components and established design patterns. Follow this example:
-
-  ```astro
-  ---
-  import { actions, isInputError } from 'astro:actions'
-  import { z } from 'astro:content'
-
-  import Captcha from '../../components/Captcha.astro'
-  import InputCardGroup from '../../components/InputCardGroup.astro'
-  import InputCheckboxGroup from '../../components/InputCheckboxGroup.astro'
-  import InputHoneypotTrap from '../../components/InputHoneypotTrap.astro'
-  import InputImageFile from '../../components/InputImageFile.astro'
-  import InputSubmitButton from '../../components/InputSubmitButton.astro'
-  import InputText from '../../components/InputText.astro'
-  import InputTextArea from '../../components/InputTextArea.astro'
-  import { kycLevels } from '../../constants/kycLevels'
-  import BaseLayout from '../../layouts/BaseLayout.astro'
-  import { zodParseQueryParamsStoringErrors } from '../../lib/parseUrlFilters'
-  import { prisma } from '../../lib/prisma'
-  import { makeLoginUrl } from '../../lib/redirectUrls'
-
-  const user = Astro.locals.user
-  if (!user) {
-    return Astro.redirect(makeLoginUrl(Astro.url, { message: 'Login to suggest a new service' }))
-  }
-
-  const result = Astro.getActionResult(actions.serviceSuggestion.editService)
-  if (result && !result.error) {
-    return Astro.redirect(`/service-suggestion/${result.data.serviceSuggestion.id}`)
-  }
-  const inputErrors = isInputError(result?.error) ? result.error.fields : {}
-
-  const { data: params } = zodParseQueryParamsStoringErrors(
-    {
-      serviceId: z.coerce.number().int().positive(),
-      notes: z.string().default(''),
-    },
-    Astro
-  )
-
-  if (!params.serviceId) return Astro.rewrite('/404')
-
-  const service = await Astro.locals.banners.try(
-    'Failed to fetch service',
-    async () =>
-      prisma.service.findUnique({
-        select: {
-          id: true,
-          name: true,
-          slug: true,
-          description: true,
-          overallScore: true,
-          kycLevel: true,
-          imageUrl: true,
-          verificationStatus: true,
-          acceptedCurrencies: true,
-          categories: {
-            select: {
-              name: true,
-              icon: true,
-            },
-          },
-        },
-        where: { id: params.serviceId },
-      }),
-    null
-  )
-
-  if (!service) return Astro.rewrite('/404')
-  ---
-
-  <BaseLayout
-    pageTitle="Edit service"
-    description="Suggest an edit to service"
-    ogImage={{ template: 'generic', title: 'Edit service' }}
-    widthClassName="max-w-screen-md"
-  >
-    <h1 class="font-title mt-12 mb-6 text-center text-3xl font-bold">Edit service</h1>
-
-    <form method="POST" action={actions.serviceSuggestion.editService} class="space-y-6">
-      <input type="hidden" name="serviceId" value={params.serviceId} />
-
-      <InputText
-        label="Service name"
-        name="name"
-        value={service.name}
-        error={inputErrors.name}
-        inputProps={{ 'data-custom-value': true, required: true }}
-      />
-
-      <InputCardGroup
-        name="kycLevel"
-        label="KYC Level"
-        options={kycLevels.map((kycLevel) => ({
-          label: kycLevel.name,
-          value: kycLevel.id.toString(),
-          icon: kycLevel.icon,
-          description: `${kycLevel.description}\n\n_KYC Level ${kycLevel.value}/5_`,
-        }))}
-        iconSize="md"
-        cardSize="md"
-        required
-        error={inputErrors.kycLevel}
-      />
-
-      <InputCheckboxGroup
-        name="categories"
-        label="Categories"
-        required
-        options={categories.map((category) => ({
-          label: category.name,
-          value: category.id.toString(),
-          icon: category.icon,
-        }))}
-        error={inputErrors.categories}
-      />
-
-      <InputImageFile
-        label="Service Image"
-        name="imageFile"
-        description="Square image. At least 192x192px. Transparency supported."
-        error={inputErrors.imageFile}
-        square
-        required
-      />
-
-      <InputTextArea
-        label="Note for Moderators"
-        name="notes"
-        value={params.notes}
-        inputProps={{ rows: 10 }}
-        error={inputErrors.notes}
-      />
-
-      <Captcha action={actions.serviceSuggestion.createService} />
-
-      <InputHoneypotTrap name="message" />
-
-      <InputSubmitButton hideCancel />
-    </form>
-  </BaseLayout>
-  ```
-
-- Don't use the `web/src/pages/admin` pages as example unless explicitly stated or you're creating/editing an admin page.
-- When creating constants or enums, use the `makeHelpersForOptions` function like in this example. Save the file in the `web/src/constants` folder. Note that it's not necessary to use all the options the example has, just the ones you need.
-
-```ts
-import { makeHelpersForOptions } from '../lib/makeHelpersForOptions';
-import { transformCase } from '../lib/strings';
-
-import type { AttributeType } from '@prisma/client';
-
-type AttributeTypeInfo<T extends string | null | undefined = string> = {
-  value: T;
-  slug: string;
-  label: string;
-  icon: string;
-  order: number;
-  classNames: {
-    text: string;
-    icon: string;
-  };
-};
-
-export const {
-  dataArray: attributeTypes,
-  dataObject: attributeTypesById,
-  getFn: getAttributeTypeInfo,
-  getFnSlug: getAttributeTypeInfoBySlug,
-  zodEnumBySlug: attributeTypesZodEnumBySlug,
-  zodEnumById: attributeTypesZodEnumById,
-  keyToSlug: attributeTypeIdToSlug,
-  slugToKey: attributeTypeSlugToId,
-} = makeHelpersForOptions(
-  'value',
-  (value): AttributeTypeInfo<typeof value> => ({
-    value,
-    slug: value ? value.toLowerCase() : '',
-    label: value
-      ? transformCase(value.replace('_', ' '), 'title')
-      : String(value),
-    icon: 'ri:question-line',
-    order: Infinity,
-    classNames: {
-      text: 'text-current/60',
-      icon: 'text-current/60',
-    },
-  }),
-  [
-    {
-      value: 'BAD',
-      slug: 'bad',
-      label: 'Bad',
-      icon: 'ri:close-line',
-      order: 1,
-      classNames: {
-        text: 'text-red-200',
-        icon: 'text-red-400',
-      },
-    },
-    {
-      value: 'WARNING',
-      slug: 'warning',
-      label: 'Warning',
-      icon: 'ri:alert-line',
-      order: 2,
-      classNames: {
-        text: 'text-yellow-200',
-        icon: 'text-yellow-400',
-      },
-    },
-    {
-      value: 'GOOD',
-      slug: 'good',
-      label: 'Good',
-      icon: 'ri:check-line',
-      order: 3,
-      classNames: {
-        text: 'text-green-200',
-        icon: 'text-green-400',
-      },
-    },
-    {
-      value: 'INFO',
-      slug: 'info',
-      label: 'Info',
-      icon: 'ri:information-line',
-      order: 4,
-      classNames: {
-        text: 'text-blue-200',
-        icon: 'text-blue-400',
-      },
-    },
-  ] as const satisfies AttributeTypeInfo<AttributeType>[]
-);
-```

.gitignore

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

.platform/hooks/predeploy/01_dump_database.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+pwd
+just dump-db

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
 

docker-compose.yml

@@ -62,6 +62,8 @@ services:
       POSTGRES_DB: ${POSTGRES_DATABASE:-kycnot}
       DATABASE_URL: "postgresql://${POSTGRES_USER:-kycnot}:${POSTGRES_PASSWORD:-kycnot}@database:5432/${POSTGRES_DATABASE:-kycnot}?schema=public"
       REDIS_URL: "redis://redis:6379"
+    env_file:
+      - .env
     depends_on:
       database:
         condition: service_healthy
@@ -70,7 +72,7 @@ services:
     expose:
       - 4321
     healthcheck:
-      test: ["CMD", "curl", "-k", "--silent", "--fail", "http://localhost:4321"]
+      test: ["CMD", "curl", "-k", "--silent", "--fail", "http://localhost:4321/health"]
       interval: 10s
       timeout: 5s
       retries: 5

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:
-                        # Execute the task instance's run method directly
-                        task_instance.run()
+                    with task_info["instance"]:
+                        # Execute the registered task function with its arguments
+                        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/.env.example

@@ -1,4 +1,9 @@
 DATABASE_URL="postgresql://kycnot:kycnot@localhost:3399/kycnot?schema=public"
 REDIS_URL="redis://localhost:6379"
 SOURCE_CODE_URL="https://github.com"
-SITE_URL="https://localhost:4321"
+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/Dockerfile

@@ -19,9 +19,8 @@ ENV HOST=0.0.0.0
 ENV PORT=4321
 EXPOSE 4321
 
-# Add entrypoint script and make it executable
-COPY docker-entrypoint.sh /usr/local/bin/
-RUN chmod +x /usr/local/bin/docker-entrypoint.sh
+# Add knm-migrate command script and make it executable
+COPY migrate.sh /usr/local/bin/knm-migrate
+RUN chmod +x /usr/local/bin/knm-migrate
 
-ENTRYPOINT ["docker-entrypoint.sh"]
 CMD ["node", "./dist/server/entry.mjs"]

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

@@ -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',
@@ -70,6 +74,18 @@ export default defineConfig({
         url: true,
         optional: false,
       }),
+      I2P_ADDRESS: envField.string({
+        context: 'server',
+        access: 'public',
+        url: true,
+        optional: false,
+      }),
+      ONION_ADDRESS: envField.string({
+        context: 'server',
+        access: 'public',
+        url: true,
+        optional: false,
+      }),
 
       REDIS_URL: envField.string({
         context: 'server',
@@ -115,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',
@@ -154,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/migrate.sh

@@ -16,6 +16,4 @@ for trigger_file in prisma/triggers/*.sql; do
   fi
 done
 
-# Start the application
-echo "Starting the application..."
-exec "$@"
+echo "Migrations completed."

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/20250520083518_add_announcement_link/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Announcement" ADD COLUMN     "link" TEXT;

web/prisma/migrations/20250520090825_announcement_link/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `title` on the `Announcement` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Announcement" DROP COLUMN "title";

web/prisma/migrations/20250520092201_link_text/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Announcement" ADD COLUMN     "linkText" TEXT;

web/prisma/migrations/20250521140743_karma_change_notifications/migration.sql

@@ -0,0 +1,11 @@
+-- AlterEnum
+ALTER TYPE "NotificationType" ADD VALUE 'KARMA_CHANGE';
+
+-- AlterTable
+ALTER TABLE "Notification" ADD COLUMN     "aboutKarmaTransactionId" INTEGER;
+
+-- AlterTable
+ALTER TABLE "NotificationPreferences" ADD COLUMN     "karmaNotificationThreshold" INTEGER NOT NULL DEFAULT 10;
+
+-- AddForeignKey
+ALTER TABLE "Notification" ADD CONSTRAINT "Notification_aboutKarmaTransactionId_fkey" FOREIGN KEY ("aboutKarmaTransactionId") REFERENCES "KarmaTransaction"("id") ON DELETE SET NULL ON UPDATE CASCADE;

web/prisma/migrations/20250523111356_remove_icon_id_from_contact_methods/migration.sql

@@ -0,0 +1,13 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `iconId` on the `ServiceContactMethod` table. All the data in the column will be lost.
+  - You are about to drop the column `info` on the `ServiceContactMethod` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "ServiceContactMethod" DROP COLUMN "iconId",
+DROP COLUMN "info",
+ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ALTER COLUMN "label" DROP NOT NULL;

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
-  VERIFIER_FALSE
+  MODERATOR_TRUE
+  MODERATOR_FALSE
   SPAMMER_TRUE
   SPAMMER_FALSE
 }
@@ -135,6 +135,7 @@ enum NotificationType {
   SUGGESTION_MESSAGE
   SUGGESTION_STATUS_CHANGE
   // KARMA_UNLOCK // TODO: [KARMA_UNLOCK] Will be added later, when karma unloks are in the database, not in the code.
+  KARMA_CHANGE
   /// Marked as spammer, promoted to admin, etc.
   ACCOUNT_STATUS_CHANGE
   EVENT_CREATED
@@ -207,6 +208,8 @@ model Notification {
   aboutCommentStatusChange             CommentStatusChange?
   aboutServiceVerificationStatusChange ServiceVerificationStatusChange?
   aboutSuggestionStatusChange          ServiceSuggestionStatusChange?
+  aboutKarmaTransaction                KarmaTransaction?                @relation(fields: [aboutKarmaTransactionId], references: [id])
+  aboutKarmaTransactionId              Int?
 
   @@index([userId])
   @@index([read])
@@ -229,6 +232,7 @@ model NotificationPreferences {
   enableOnMyCommentStatusChange     Boolean @default(true)
   enableAutowatchMyComments         Boolean @default(true)
   enableNotifyPendingRepliesOnWatch Boolean @default(false)
+  karmaNotificationThreshold        Int     @default(10)
 
   onEventCreatedForServices       Service[] @relation("onEventCreatedForServices")
   onRootCommentCreatedForServices Service[] @relation("onRootCommentCreatedForServices")
@@ -393,12 +397,15 @@ model Service {
 }
 
 model ServiceContactMethod {
-  id        Int     @id @default(autoincrement())
-  label     String
+  id    Int     @id @default(autoincrement())
+  /// Only include it if you want to override the formatted value.
+  label String?
   /// Including the protocol (e.g. "mailto:", "tel:", "https://")
-  value     String
-  iconId    String
-  info      String
+  value String
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @default(now()) @updatedAt
+
   services  Service @relation("ServiceToContactMethod", fields: [serviceId], references: [id], onDelete: Cascade)
   serviceId Int
 }
@@ -457,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.
@@ -522,6 +529,7 @@ model KarmaTransaction {
   createdAt       DateTime               @default(now())
   grantedBy       User?                  @relation("KarmaGrantedBy", fields: [grantedByUserId], references: [id], onDelete: SetNull)
   grantedByUserId Int?
+  Notification    Notification[]
 
   @@index([createdAt])
   @@index([userId])
@@ -613,9 +621,10 @@ model ServiceUser {
 
 model Announcement {
   id        Int              @id @default(autoincrement())
-  title     String
   content   String
   type      AnnouncementType
+  link      String?
+  linkText  String?
   startDate DateTime
   endDate   DateTime?
   isActive  Boolean          @default(true)

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,26 +20,30 @@ 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(
     p_user_id INT,
     p_points INT,
-    p_action "KarmaTransactionAction",
+    p_action TEXT,
     p_comment_id INT,
     p_description TEXT,
     p_suggestion_id INT DEFAULT NULL
 ) RETURNS VOID AS $$
 BEGIN
     INSERT INTO "KarmaTransaction" (
-        "userId", "points", "action", "commentId", 
-        "suggestionId",
-        "description", "processed", "createdAt"
-    ) 
+        "userId", "points", "action", "commentId", "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;

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
-  IF OLD.verifier IS DISTINCT FROM NEW.verifier THEN
-    IF NEW.verifier = true THEN
-      status_change := 'VERIFIER_TRUE';
+  -- Check for moderator status change
+  IF OLD.moderator IS DISTINCT FROM NEW.moderator THEN
+    IF NEW.moderator = true THEN
+      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/prisma/triggers/11_notifications_karma.sql

@@ -0,0 +1,29 @@
+CREATE OR REPLACE FUNCTION trigger_karma_notifications()
+RETURNS TRIGGER AS $$
+BEGIN
+  -- Only create notification if the user has enabled karma notifications
+  -- and the karma change exceeds their threshold
+  INSERT INTO "Notification" ("userId", "type", "aboutKarmaTransactionId")
+  SELECT NEW."userId", 'KARMA_CHANGE', NEW.id
+  FROM "NotificationPreferences" np
+  WHERE np."userId" = NEW."userId"
+    AND ABS(NEW.points) >= COALESCE(np."karmaNotificationThreshold", 10)
+    AND NOT EXISTS (
+      SELECT 1 FROM "Notification" n
+      WHERE n."userId" = NEW."userId"
+        AND n."type" = 'KARMA_CHANGE'
+        AND n."aboutKarmaTransactionId" = NEW.id
+    );
+
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+-- Drop the trigger if it exists to ensure a clean setup
+DROP TRIGGER IF EXISTS karma_notifications_trigger ON "KarmaTransaction";
+
+-- Create the trigger to fire after inserts
+CREATE TRIGGER karma_notifications_trigger
+  AFTER INSERT ON "KarmaTransaction"
+  FOR EACH ROW
+  EXECUTE FUNCTION trigger_karma_notifications(); 

web/scripts/faker.ts

@@ -14,6 +14,7 @@ import {
   EventType,
   type User,
   ServiceUserRole,
+  AnnouncementType,
 } from '@prisma/client'
 import { uniqBy } from 'lodash-es'
 import { generateUsername } from 'unique-username-generator'
@@ -84,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,
@@ -844,40 +845,45 @@ const generateFakeComment = (userId: number, serviceId: number, parentId?: numbe
 const generateFakeServiceContactMethod = (serviceId: number) => {
   const types = [
     {
-      label: 'Email',
       value: `mailto:${faker.internet.email()}`,
-      iconId: 'ri:mail-line',
-      info: faker.lorem.sentence(),
     },
     {
-      label: 'Phone',
       value: `tel:${faker.phone.number({ style: 'international' })}`,
-      iconId: 'ri:phone-line',
-      info: faker.lorem.sentence(),
     },
     {
-      label: 'WhatsApp',
       value: `https://wa.me/${faker.phone.number({ style: 'international' })}`,
-      iconId: 'ri:whatsapp-line',
-      info: faker.lorem.sentence(),
     },
     {
-      label: 'Telegram',
       value: `https://t.me/${faker.internet.username()}`,
-      iconId: 'ri:telegram-line',
-      info: faker.lorem.sentence(),
     },
     {
-      label: 'Website',
+      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(),
-      iconId: 'ri:global-line',
-      info: faker.lorem.sentence(),
     },
     {
-      label: 'LinkedIn',
-      value: `https://www.linkedin.com/company/${faker.helpers.slugify(faker.company.name())}`,
-      iconId: 'ri:linkedin-box-line',
-      info: faker.lorem.sentence(),
+      label: faker.lorem.word({ length: 2 }),
+      value: faker.internet.url(),
+    },
+    {
+      value: `https://linkedin.com/company/${faker.helpers.slugify(faker.company.name())}`,
     },
   ] as const satisfies Partial<Prisma.ServiceContactMethodCreateInput>[]
 
@@ -893,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: {
-    name: 'verifier_dev',
-    envToken: 'DEV_VERIFIER_USER_SECRET_TOKEN',
-    defaultToken: 'verifier',
+  moderator: {
+    name: 'moderator_dev',
+    envToken: 'DEV_MODERATOR_USER_SECRET_TOKEN',
+    defaultToken: 'moderator',
     admin: false,
-    verifier: true,
+    moderator: true,
     verified: true,
     verifiedLink: 'https://kycnot.me',
     totalKarma: 1001,
@@ -917,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,
@@ -927,7 +933,7 @@ const specialUsersData = {
     envToken: 'DEV_NORMAL_USER_SECRET_TOKEN',
     defaultToken: 'normal',
     admin: false,
-    verifier: false,
+    moderator: false,
     verified: false,
   },
   spam: {
@@ -935,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,
@@ -981,6 +987,22 @@ const generateFakeInternalNote = (userId: number, addedByUserId?: number) =>
     addedByUser: addedByUserId ? { connect: { id: addedByUserId } } : undefined,
   }) satisfies Prisma.InternalUserNoteCreateInput
 
+const generateFakeAnnouncement = () => {
+  const type = faker.helpers.arrayElement(Object.values(AnnouncementType))
+  const startDate = faker.date.past()
+  const endDate = faker.helpers.maybe(() => faker.date.future(), { probability: 0.3 })
+
+  return {
+    content: faker.lorem.sentence(),
+    type,
+    link: faker.internet.url(),
+    linkText: faker.lorem.word({ length: 2 }),
+    startDate,
+    endDate,
+    isActive: true,
+  } as const satisfies Prisma.AnnouncementCreateInput
+}
+
 async function runFaker() {
   await prisma.$transaction(
     async (tx) => {
@@ -1004,6 +1026,7 @@ async function runFaker() {
           await tx.category.deleteMany()
           await tx.internalUserNote.deleteMany()
           await tx.user.deleteMany()
+          await tx.announcement.deleteMany()
           console.info('✅ Existing data cleaned up')
         } catch (error) {
           console.error('❌ Error cleaning up data:', error)
@@ -1283,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])
                 ),
               })
             )
@@ -1300,13 +1323,18 @@ 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])
                 ),
               })
             )
           )
         })
       )
+
+      // ---- Create announcement ----
+      await tx.announcement.create({
+        data: generateFakeAnnouncement(),
+      })
     },
     {
       timeout: 1000 * 60 * 10, // 10 minutes

web/src/actions/account.ts

@@ -151,15 +151,10 @@ export const accountActions = {
     permissions: 'user',
     input: z.object({
       id: z.coerce.number().int().positive(),
-      displayName: z.string().max(100, 'Display name must be 100 characters or less').optional().nullable(),
-      link: z
-        .string()
-        .url('Must be a valid URL')
-        .max(255, 'URL must be 255 characters or less')
-        .optional()
-        .nullable(),
+      displayName: z.string().max(100, 'Display name must be 100 characters or less').nullable(),
+      link: z.string().url('Must be a valid URL').max(255, 'URL must be 255 characters or less').nullable(),
       pictureFile: imageFileSchema,
-      removePicture: z.coerce.boolean().default(false),
+      removePicture: z.coerce.boolean(),
     }),
     handler: async (input, context) => {
       if (input.id !== context.locals.user.id) {
@@ -170,7 +165,7 @@ export const accountActions = {
       }
 
       if (
-        input.displayName !== undefined &&
+        input.displayName !== null &&
         input.displayName !== context.locals.user.displayName &&
         !context.locals.user.karmaUnlocks.displayName
       ) {
@@ -181,7 +176,7 @@ export const accountActions = {
       }
 
       if (
-        input.link !== undefined &&
+        input.link !== null &&
         input.link !== context.locals.user.link &&
         !context.locals.user.karmaUnlocks.websiteLink
       ) {
@@ -198,6 +193,13 @@ export const accountActions = {
         })
       }
 
+      if (input.removePicture && !context.locals.user.karmaUnlocks.profilePicture) {
+        throw new ActionError({
+          code: 'FORBIDDEN',
+          message: makeKarmaUnlockMessage(karmaUnlocksById.profilePicture),
+        })
+      }
+
       const pictureUrl =
         input.pictureFile && input.pictureFile.size > 0
           ? await saveFileLocally(
@@ -210,9 +212,13 @@ export const accountActions = {
       const user = await prisma.user.update({
         where: { id: context.locals.user.id },
         data: {
-          displayName: input.displayName ?? null,
-          link: input.link ?? null,
-          picture: input.removePicture ? null : (pictureUrl ?? undefined),
+          displayName: context.locals.user.karmaUnlocks.displayName ? (input.displayName ?? null) : undefined,
+          link: context.locals.user.karmaUnlocks.websiteLink ? (input.link ?? null) : undefined,
+          picture: context.locals.user.karmaUnlocks.profilePicture
+            ? input.removePicture
+              ? null
+              : (pictureUrl ?? undefined)
+            : undefined,
         },
       })
 

web/src/actions/admin/announcement.ts

@@ -1,4 +1,4 @@
-import { type Prisma, type PrismaClient, type AnnouncementType } from '@prisma/client'
+import { type Prisma, type PrismaClient } from '@prisma/client'
 import { ActionError } from 'astro:actions'
 import { z } from 'zod'
 
@@ -9,9 +9,10 @@ const prisma = prismaInstance as PrismaClient
 
 const selectAnnouncementReturnFields = {
   id: true,
-  title: true,
   content: true,
   type: true,
+  link: true,
+  linkText: true,
   startDate: true,
   endDate: true,
   isActive: true,
@@ -24,12 +25,18 @@ export const adminAnnouncementActions = {
     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']),
+      link: z.string().url().nullable().optional(),
+      linkText: z
+        .string()
+        .min(1, 'Link text is required')
+        .max(255, 'Link text must be less than 255 characters')
+        .nullable()
+        .optional(),
       startDate: z.coerce.date(),
       endDate: z.coerce.date().nullable().optional(),
       isActive: z.coerce.boolean().default(true),
@@ -37,8 +44,13 @@ export const adminAnnouncementActions = {
     handler: async (input) => {
       const announcement = await prisma.announcement.create({
         data: {
-          ...input,
-          endDate: input.endDate || null,
+          content: input.content,
+          type: input.type,
+          startDate: input.startDate,
+          isActive: input.isActive,
+          link: input.link ?? null,
+          linkText: input.linkText ?? null,
+          endDate: input.endDate ?? null,
         },
         select: selectAnnouncementReturnFields,
       })
@@ -52,12 +64,18 @@ export const adminAnnouncementActions = {
     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']),
+      link: z.string().url().nullable().optional(),
+      linkText: z
+        .string()
+        .min(1, 'Link text is required')
+        .max(255, 'Link text must be less than 255 characters')
+        .nullable()
+        .optional(),
       startDate: z.coerce.date(),
       endDate: z.coerce.date().nullable().optional(),
       isActive: z.coerce.boolean().default(true),
@@ -82,8 +100,13 @@ export const adminAnnouncementActions = {
       const updatedAnnouncement = await prisma.announcement.update({
         where: { id: announcement.id },
         data: {
-          ...input,
-          endDate: input.endDate || null,
+          content: input.content,
+          type: input.type,
+          startDate: input.startDate,
+          isActive: input.isActive,
+          link: input.link ?? null,
+          linkText: input.linkText ?? null,
+          endDate: input.endDate ?? null,
         },
         select: selectAnnouncementReturnFields,
       })

web/src/actions/admin/service.ts

@@ -14,7 +14,7 @@ import {
 } from '../../lib/zodUtils'
 
 const serviceSchemaBase = z.object({
-  id: z.number(),
+  id: z.number().int().positive(),
   slug: z
     .string()
     .regex(/^[a-z0-9-]+$/, 'Allowed characters: lowercase letters, numbers, and hyphens')
@@ -56,15 +56,6 @@ const addSlugIfMissing = <
     }),
 })
 
-const contactMethodSchema = z.object({
-  id: z.number().optional(),
-  label: z.string().min(1).max(50),
-  value: z.string().min(1).max(200),
-  iconId: z.string().min(1).max(50),
-  info: z.string().max(200).optional().default(''),
-  serviceId: z.number(),
-})
-
 export const adminServiceActions = {
   create: defineProtectedAction({
     accept: 'form',
@@ -195,10 +186,18 @@ export const adminServiceActions = {
   createContactMethod: defineProtectedAction({
     accept: 'form',
     permissions: 'admin',
-    input: contactMethodSchema.omit({ id: true }),
+    input: z.object({
+      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 }
     },
@@ -207,12 +206,20 @@ export const adminServiceActions = {
   updateContactMethod: defineProtectedAction({
     accept: 'form',
     permissions: 'admin',
-    input: contactMethodSchema,
+    input: z.object({
+      id: z.number().int().positive(),
+      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 },
-        data,
+        where: { id: input.id },
+        data: {
+          label: input.label,
+          value: input.value,
+          serviceId: input.serviceId,
+        },
       })
       return { contactMethod }
     },
@@ -222,7 +229,7 @@ export const adminServiceActions = {
     accept: 'form',
     permissions: 'admin',
     input: z.object({
-      id: z.number(),
+      id: z.number().int().positive(),
     }),
     handler: async (input) => {
       await prisma.serviceContactMethod.delete({

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(),
-      role: z.enum(['admin', 'verifier', 'spammer']),
+      type: z.array(z.enum(['admin', 'moderator', 'spammer'])),
       verifiedLink: z
         .string()
         .url('Invalid URL')
@@ -69,7 +69,7 @@ export const adminUserActions = {
         .default(null) // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         .transform((val) => val || null),
     }),
-    handler: async ({ id, pictureFile, ...valuesToUpdate }) => {
+    handler: async ({ id, pictureFile, type, ...valuesToUpdate }) => {
       const user = await prisma.user.findUnique({
         where: {
           id,
@@ -94,9 +94,15 @@ export const adminUserActions = {
       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'),
+          moderator: type.includes('moderator'),
+          spammer: type.includes('spammer'),
         },
         select: selectUserReturnFields,
       })

web/src/actions/comment.ts

@@ -14,9 +14,9 @@ import { timeTrapSecretKey } from '../lib/timeTrapSecret'
 
 import type { CommentStatus, Prisma } from '@prisma/client'
 
-const COMMENT_RATE_LIMIT_WINDOW_MINUTES = 5
+const COMMENT_RATE_LIMIT_WINDOW_MINUTES = 2
 const MAX_COMMENTS_PER_WINDOW = 1
-const MAX_COMMENTS_PER_WINDOW_VERIFIED_USER = 5
+const MAX_COMMENTS_PER_WINDOW_VERIFIED_USER = 10
 
 export const commentActions = {
   vote: defineProtectedAction({
@@ -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/actions/notifications.ts

@@ -31,6 +31,7 @@ export const notificationActions = {
         enableOnMyCommentStatusChange: z.coerce.boolean().optional(),
         enableAutowatchMyComments: z.coerce.boolean().optional(),
         enableNotifyPendingRepliesOnWatch: z.coerce.boolean().optional(),
+        karmaNotificationThreshold: z.coerce.number().int().min(1).optional(),
       }),
       handler: async (input, context) => {
         await prisma.notificationPreferences.upsert({
@@ -39,12 +40,14 @@ export const notificationActions = {
             enableOnMyCommentStatusChange: input.enableOnMyCommentStatusChange,
             enableAutowatchMyComments: input.enableAutowatchMyComments,
             enableNotifyPendingRepliesOnWatch: input.enableNotifyPendingRepliesOnWatch,
+            karmaNotificationThreshold: input.karmaNotificationThreshold,
           },
           create: {
             userId: context.locals.user.id,
             enableOnMyCommentStatusChange: input.enableOnMyCommentStatusChange,
             enableAutowatchMyComments: input.enableAutowatchMyComments,
             enableNotifyPendingRepliesOnWatch: input.enableNotifyPendingRepliesOnWatch,
+            karmaNotificationThreshold: input.karmaNotificationThreshold,
           },
         })
       },

web/src/components/AnnouncementBanner.astro

@@ -1,82 +1,92 @@
 ---
 import { Icon } from 'astro-icon/components'
-import { Markdown } from 'astro-remote'
 
-import type { AnnouncementType } from '@prisma/client'
+import { getAnnouncementTypeInfo } from '../constants/announcementTypes'
+import { cn } from '../lib/cn'
 
-export type Announcement = {
-  id: number
-  title: string
-  content: string
-  type: AnnouncementType
-  startDate: Date
-  endDate: Date | null
-  isActive: boolean
+import type { Prisma } from '@prisma/client'
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'div'> & {
+  announcement: Prisma.AnnouncementGetPayload<{
+    select: {
+      id: true
+      content: true
+      type: true
+      link: true
+      linkText: true
+      startDate: true
+      endDate: true
+      isActive: true
+    }
+  }>
 }
 
-export type Props = {
-  announcements: Announcement[]
-}
+const { announcement, class: className, ...props } = Astro.props
 
-const { announcements } = Astro.props
+const typeInfo = getAnnouncementTypeInfo(announcement.type)
 
-// Get icon and class based on announcement type
-const getTypeInfo = (type: AnnouncementType) => {
-  switch (type) {
-    case 'INFO':
-      return {
-        icon: 'ri:information-line',
-        containerClass: 'bg-blue-900/40 border-blue-500/30',
-        titleClass: 'text-blue-400',
-        contentClass: 'text-blue-300',
-      }
-    case 'WARNING':
-      return {
-        icon: 'ri:alert-line',
-        containerClass: 'bg-yellow-900/40 border-yellow-500/30',
-        titleClass: 'text-yellow-400',
-        contentClass: 'text-yellow-300',
-      }
-    case 'ALERT':
-      return {
-        icon: 'ri:error-warning-line',
-        containerClass: 'bg-red-900/40 border-red-500/30',
-        titleClass: 'text-red-400',
-        contentClass: 'text-red-300',
-      }
-    default:
-      return {
-        icon: 'ri:information-line',
-        containerClass: 'bg-blue-900/40 border-blue-500/30',
-        titleClass: 'text-blue-400',
-        contentClass: 'text-blue-300',
-      }
-  }
-}
+const Tag = announcement.link ? 'a' : 'div'
 ---
 
-{
-  announcements.length > 0 && (
-    <div class="mb-4 flex flex-col items-center space-y-1">
-      {announcements.map((announcement) => {
-        const typeInfo = getTypeInfo(announcement.type)
-
-        return (
-          <div
-            class={`flex flex-row items-center rounded border ${typeInfo.containerClass} mx-auto w-auto max-w-full px-3 py-2`}
-          >
-            <Icon name={typeInfo.icon} class={`size-4 flex-shrink-0 ${typeInfo.titleClass} mr-2`} />
-            <div class="flex min-w-0 flex-col">
-              <span class={`text-sm leading-tight font-bold ${typeInfo.titleClass} truncate`}>
-                {announcement.title}
-              </span>
-              <span class={`text-xs ${typeInfo.contentClass} truncate leading-snug [&_a]:underline`}>
-                <Markdown content={announcement.content} />
-              </span>
-            </div>
-          </div>
-        )
-      })}
+<Tag
+  href={announcement.link}
+  target={announcement.link ? '_blank' : undefined}
+  rel="noopener noreferrer"
+  class={cn(
+    'group xs:px-6 2xs:px-4 relative isolate z-50 flex items-center justify-center gap-x-2 overflow-hidden border-b border-zinc-800 bg-black px-2 py-2 focus-visible:outline-none sm:gap-x-6 sm:px-3.5',
+    className
+  )}
+  {...props}
+>
+  <div
+    aria-hidden="true"
+    class="pointer-events-none absolute top-1/2 left-[max(-7rem,calc(50%-52rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+  >
+    <div
+      class={cn(
+        'aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-green-500 to-green-700 opacity-20',
+        typeInfo.classNames.bg
+      )}
+      style="clip-path:polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
+    >
     </div>
-  )
-}
+  </div>
+  <div
+    aria-hidden="true"
+    class="pointer-events-none absolute top-1/2 left-[max(45rem,calc(50%+8rem))] -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+  >
+    <div
+      class={cn(
+        'aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-green-500 to-green-700 opacity-30',
+        typeInfo.classNames.bg
+      )}
+      style="clip-path:polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
+    >
+    </div>
+  </div>
+
+  <div class={cn('flex items-center justify-between gap-x-3 md:justify-center', typeInfo.classNames.icon)}>
+    <Icon name={typeInfo.icon} class={cn('size-5 flex-shrink-0')} />
+    <span
+      class={cn(
+        'font-title animate-text-gradient line-clamp-3 bg-[linear-gradient(90deg,var(--gradient-edge,#FFEBF9)_0%,var(--gradient-center,#8a56cc)_50%,var(--gradient-edge,#FFEBF9)_100%)] bg-size-[200%] bg-clip-text text-sm leading-tight text-pretty text-transparent [&_a]:underline',
+        typeInfo.classNames.content
+      )}
+    >
+      {announcement.content}
+    </span>
+  </div>
+
+  <div
+    class="text-day-300 group-focus-visible:outline-primary transition-background 2xs:px-4 relative inline-flex h-full shrink-0 cursor-pointer items-center justify-center gap-1.5 overflow-hidden rounded-full border border-white/20 bg-black/10 p-[1px] px-1 py-1 text-sm font-medium shadow-sm backdrop-blur-3xl transition-colors group-hover:bg-white/5 group-focus-visible:ring-2 group-focus-visible:ring-blue-500 group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-black/80 sm:min-w-[120px]"
+  >
+    <span class="2xs:inline-block hidden">
+      {announcement.linkText}
+    </span>
+    <Icon
+      name="ri:arrow-right-line"
+      class="size-4 shrink-0 transition-transform group-hover:translate-x-0.5"
+    />
+  </div>
+</Tag>

web/src/components/Button.astro

@@ -2,13 +2,15 @@
 import { Icon } from 'astro-icon/components'
 import { tv, type VariantProps } from 'tailwind-variants'
 
+import { cn } from '../lib/cn'
+
 import type { HTMLAttributes, Polymorphic } from 'astro/types'
 
 type Props<Tag extends 'a' | 'button' | 'label' = 'button'> = Polymorphic<
   Required<Pick<HTMLAttributes<'label'>, Tag extends 'label' ? 'for' : never>> &
     VariantProps<typeof button> & {
       as: Tag
-      label?: string
+      label: string
       icon?: string
       endIcon?: string
       classNames?: {
@@ -19,6 +21,7 @@ type Props<Tag extends 'a' | 'button' | 'label' = 'button'> = Polymorphic<
       dataAstroReload?: boolean
       children?: never
       disabled?: boolean
+      inlineIcon?: boolean
     }
 >
 
@@ -26,7 +29,7 @@ export type ButtonProps<Tag extends 'a' | 'button' | 'label' = 'button'> = Props
 
 const button = tv({
   slots: {
-    base: 'inline-flex items-center justify-center gap-2 rounded-lg border transition-colors duration-100 focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-2 focus-visible:ring-offset-black focus-visible:outline-hidden',
+    base: 'inline-flex shrink-0 items-center justify-center gap-2 rounded-lg border transition-colors duration-100 focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-2 focus-visible:ring-offset-black focus-visible:outline-hidden',
     icon: 'size-4 shrink-0',
     label: 'text-left whitespace-nowrap',
     endIcon: 'size-4 shrink-0',
@@ -51,28 +54,24 @@ const button = tv({
         label: 'font-bold tracking-wider uppercase',
       },
     },
+    iconOnly: {
+      true: {
+        base: 'p-0',
+        label: 'sr-only',
+      },
+    },
     color: {
-      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: {
-        base: 'border-day-300 bg-day-100 hover:bg-day-200 text-black focus-visible:ring-green-500',
-      },
-      gray: {
-        base: 'border-day-500 bg-day-400 hover:bg-day-500 text-black focus-visible:ring-white',
-      },
-      success: {
-        base: 'border-green-600 bg-green-500 text-black hover:bg-green-600',
-      },
-      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',
-      },
+      black: '',
+      white: '',
+      gray: '',
+      success: '',
+      danger: '',
+      warning: '',
+      info: '',
+    },
+    variant: {
+      solid: '',
+      faded: '',
     },
     shadow: {
       true: {
@@ -86,6 +85,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: 'bg2night-800/15 hover:bg-night-700/30 border-current/30 text-white/70 hover:text-white/90 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'white',
+      variant: 'faded',
+      class: {
+        base: 'b2-day-100/15 hover:bg-day-200/30 border-current/30 text-white/70 hover:text-white/90 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'gray',
+      variant: 'faded',
+      class: {
+        base: 'b2-day-400/15 hover:bg-day-500/30 text-day-300 hover:text-day-100 border-current/30 focus-visible:ring-white/50',
+      },
+    },
+    {
+      color: 'success',
+      variant: 'faded',
+      class: {
+        base: 'border-current/20 bg-green-500/15 text-green-300 hover:bg-green-500/30 hover:text-green-100',
+      },
+    },
+    {
+      color: 'danger',
+      variant: 'faded',
+      class: {
+        base: 'border-current/20 bg-red-500/15 text-red-300 hover:bg-red-500/30 hover:text-red-100',
+      },
+    },
+    {
+      color: 'warning',
+      variant: 'faded',
+      class: {
+        base: 'border-current/20 bg-yellow-500/15 text-yellow-300 hover:bg-yellow-500/30 hover:text-yellow-100',
+      },
+    },
+    {
+      color: 'info',
+      variant: 'faded',
+      class: {
+        base: 'border-current/20 bg-blue-500/15 text-blue-300 hover:bg-blue-500/30 hover:text-blue-100',
+      },
+    },
+    // Shadow variants
     {
       color: 'black',
       shadow: true,
@@ -107,7 +207,7 @@ const button = tv({
       class: 'shadow-green-500/30',
     },
     {
-      color: 'error',
+      color: 'danger',
       shadow: true,
       class: 'shadow-red-500/30',
     },
@@ -121,12 +221,30 @@ const button = tv({
       shadow: true,
       class: 'shadow-blue-500/30',
     },
+    // Icon only variants
+    {
+      iconOnly: true,
+      size: 'sm',
+      class: 'w-8',
+    },
+    {
+      iconOnly: true,
+      size: 'md',
+      class: 'w-9',
+    },
+    {
+      iconOnly: true,
+      size: 'lg',
+      class: 'w-10',
+    },
   ],
   defaultVariants: {
     size: 'md',
     color: 'black',
+    variant: 'solid',
     shadow: false,
     disabled: false,
+    iconOnly: false,
   },
 })
 
@@ -137,12 +255,15 @@ const {
   endIcon,
   size,
   color,
+  variant,
   shadow,
   class: className,
   classNames,
   role,
   dataAstroReload,
   disabled,
+  inlineIcon,
+  iconOnly,
   ...htmlProps
 } = Astro.props
 
@@ -151,24 +272,31 @@ const {
   icon: iconSlot,
   label: labelSlot,
   endIcon: endIconSlot,
-} = button({ size, color, shadow, disabled })
+} = button({
+  size,
+  color,
+  variant,
+  shadow,
+  disabled,
+  iconOnly: iconOnly ?? (!label && !(!!icon && !!endIcon)),
+})
 
 const ActualTag = disabled && Tag === 'a' ? 'span' : Tag
 ---
 
 <ActualTag
-  class={base({ class: className })}
+  class={base({ class: cn({ 'opacity-20 hover:opacity-50': disabled }, className) })}
   role={role ??
     (ActualTag === 'button' || ActualTag === 'label' || ActualTag === 'span' ? undefined : 'button')}
   aria-disabled={disabled}
   {...dataAstroReload && { 'data-astro-reload': dataAstroReload }}
   {...htmlProps}
 >
-  {!!icon && <Icon name={icon} class={iconSlot({ class: classNames?.icon })} />}
-  {!!label && <span class={labelSlot({ class: classNames?.label })}>{label}</span>}
+  {!!icon && <Icon name={icon} class={iconSlot({ class: classNames?.icon })} is:inline={inlineIcon} />}
+  <span class={labelSlot({ class: classNames?.label })}>{label}</span>
   {
     !!endIcon && (
-      <Icon name={endIcon} class={endIconSlot({ class: classNames?.endIcon })}>
+      <Icon name={endIcon} class={endIconSlot({ class: classNames?.endIcon })} is:inline={inlineIcon}>
         {endIcon}
       </Icon>
     )

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 UserBadge from './UserBadge.astro'
+
 import type { Prisma } from '@prisma/client'
 import type { HTMLAttributes } from 'astro/types'
 
@@ -15,6 +15,7 @@ export type ChatMessage = {
     select: {
       id: true
       name: true
+      displayName: true
       picture: true
     }
   }>
@@ -71,32 +72,19 @@ const { messages, userId, class: className, ...htmlProps } = Astro.props
               )}
             >
               {!isCurrentUser && !isNextFromSameUser && (
-                <p class="text-day-500 mb-0.5 text-xs">
-                  {!!message.user.picture && (
-                    <Picture
-                      src={message.user.picture}
-                      height={16}
-                      width={16}
-                      class="inline-block rounded-full align-[-0.33em]"
-                      alt=""
-                      formats={['jxl', 'avif', 'webp']}
-                    />
-                  )}
-                  {message.user.name}
-                </p>
+                <UserBadge user={message.user} size="sm" class="text-day-500 mb-0.5 text-xs" />
               )}
               <p
                 class={cn(
-                  'rounded-xl p-3 text-sm whitespace-pre-wrap',
+                  'rounded-xl p-3 text-sm wrap-anywhere whitespace-pre-wrap',
                   isCurrentUser ? 'bg-blue-900 text-white' : 'bg-night-500 text-day-300',
                   isCurrentUser ? 'rounded-br-xs' : 'rounded-bl-xs',
                   isCurrentUser && isNextFromSameUser && isNextSameDate && 'rounded-tr-xs',
                   !isCurrentUser && isNextFromSameUser && isNextSameDate && 'rounded-tl-xs'
                 )}
                 id={`message-${message.id.toString()}`}
-              >
-                {message.content}
-              </p>
+                set:text={message.content}
+              />
               {(!isPrevFromSameUser || !isPrevSameDate) && (
                 <p class="text-day-500 mt-0.5 mb-2 text-xs">{message.formattedCreatedAt}</p>
               )}

web/src/components/CommentItem.astro

@@ -1,10 +1,10 @@
 ---
-import Image from 'astro/components/Image.astro'
 import { Icon } from 'astro-icon/components'
 import { Markdown } from 'astro-remote'
 import { Schema } from 'astro-seo-schema'
 import { actions } from 'astro:actions'
 
+import { commentStatusById } from '../constants/commentStatus'
 import { karmaUnlocksById } from '../constants/karmaUnlocks'
 import { getServiceUserRoleInfo } from '../constants/serviceUserRoles'
 import { cn } from '../lib/cn'
@@ -21,6 +21,7 @@ import CommentModeration from './CommentModeration.astro'
 import CommentReply from './CommentReply.astro'
 import TimeFormatted from './TimeFormatted.astro'
 import Tooltip from './Tooltip.astro'
+import UserBadge from './UserBadge.astro'
 
 import type { HTMLAttributes } from 'astro/types'
 
@@ -60,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 isAuthorOrPrivileged = isAuthor || isAdminOrVerifier
+const isAdminOrModerator = !!user && (user.admin || user.moderator)
+const isAuthorOrPrivileged = isAuthor || isAdminOrModerator
 
 // Check if user is new (less than 1 week old)
 const isNewUser =
@@ -74,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' ||
@@ -156,34 +157,17 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
     </label>
 
     <span class="flex items-center gap-1">
-      {
-        comment.author.picture && (
-          <Image
-            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}
-          />
-        )
-      }
-
-      <a
-        href={`/u/${comment.author.name}`}
-        class={cn([
-          'font-title text-day-300 font-medium hover:underline focus-visible:underline',
-          isAuthor && 'font-medium text-green-500',
-        ])}
-      >
-        {comment.author.displayName ?? comment.author.name}
-      </a>
+      <UserBadge
+        user={comment.author}
+        size="md"
+        class={cn('text-day-300', isAuthor && 'font-medium text-green-500')}
+      />
 
       {
-        (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}` : ''}`}
@@ -202,20 +186,26 @@ 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 />
+        comment.author.moderator && !comment.author.admin && (
+          <BadgeSmall
+            icon="ri:graduation-cap-fill"
+            color="teal"
+            text="Moderator"
+            variant="faded"
+            inlineIcon
+          />
         )
       }
 
       {
-        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"
@@ -302,20 +292,35 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
 
     {
       comment.status === 'VERIFIED' && (
-        <BadgeSmall icon="ri:check-double-fill" color="green" text="Verified" inlineIcon />
+        <BadgeSmall
+          icon={commentStatusById.VERIFIED.icon}
+          color={commentStatusById.VERIFIED.color}
+          text={commentStatusById.VERIFIED.label}
+          inlineIcon
+        />
       )
     }
 
     {
       (comment.status === 'PENDING' || comment.status === 'HUMAN_PENDING') &&
         (showPending || isHighlightParent || isAuthorOrPrivileged) && (
-          <BadgeSmall icon="ri:time-fill" color="yellow" text="Unmoderated" inlineIcon />
+          <BadgeSmall
+            icon={commentStatusById.PENDING.icon}
+            color={commentStatusById.PENDING.color}
+            text={commentStatusById.PENDING.label}
+            inlineIcon
+          />
         )
     }
 
     {
       comment.status === 'REJECTED' && isAuthorOrPrivileged && (
-        <BadgeSmall icon="ri:close-circle-fill" color="red" text="Rejected" inlineIcon />
+        <BadgeSmall
+          icon={commentStatusById.REJECTED.icon}
+          color={commentStatusById.REJECTED.color}
+          text={commentStatusById.REJECTED.label}
+          inlineIcon
+        />
       )
     }
 
@@ -366,15 +371,16 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
     comment.communityNote && (
       <div class="mt-2 peer-checked/collapse:hidden">
         <div class="border-l-2 border-zinc-600 bg-zinc-900/30 py-0.5 pl-2 text-xs">
-          <span class="font-medium text-zinc-400">Added context:</span>
-          <span class="text-zinc-300">{comment.communityNote}</span>
+          <span class="prose prose-sm prose-invert prose-strong:text-zinc-300/90 text-xs text-zinc-300">
+            <Markdown content={`**Added context:** ${comment.communityNote}`} />
+          </span>
         </div>
       </div>
     )
   }
 
   {
-    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>
@@ -385,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,15 +28,15 @@ const { comment, class: className, ...divProps } = Astro.props
 
 const user = Astro.locals.user
 
-// Only render for admin/verifier users
-if (!user || !user.admin || !user.verifier) return null
+// Only render for admin/moderator users
+if (!user || !user.admin || !user.moderator) 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
@@ -110,16 +110,18 @@ if (!user || !user.admin || !user.verifier) return null
       <button
         class={cn(
           'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
-          comment.status === 'PENDING'
+          comment.status === 'PENDING' || comment.status === 'HUMAN_PENDING'
             ? 'border border-blue-500/30 bg-blue-500/20 text-blue-400'
             : 'bg-night-700 hover:bg-blue-500/20 hover:text-blue-400'
         )}
         data-action="status"
-        data-value={comment.status === 'PENDING' ? 'APPROVED' : 'PENDING'}
+        data-value={comment.status === 'PENDING' || comment.status === 'HUMAN_PENDING'
+          ? 'APPROVED'
+          : 'PENDING'}
         data-comment-id={comment.id}
         data-user-id={user.id}
       >
-        {comment.status === 'PENDING' ? 'Approve' : 'Pending'}
+        {comment.status === 'PENDING' || comment.status === 'HUMAN_PENDING' ? 'Approve' : 'Pending'}
       </button>
 
       <button

web/src/components/CommentReply.astro

@@ -11,6 +11,7 @@ import InputHoneypotTrap from './InputHoneypotTrap.astro'
 import InputRating from './InputRating.astro'
 import InputText from './InputText.astro'
 import InputWrapper from './InputWrapper.astro'
+import UserBadge from './UserBadge.astro'
 
 import type { Prisma } from '@prisma/client'
 import type { HTMLAttributes } from 'astro/types'
@@ -67,7 +68,7 @@ const userCommentsDisabled = user ? user.karmaUnlocks.commentsDisabled : false
             <div class="text-day-400 flex items-center gap-2 text-xs peer-checked/use-form-secret-token:hidden">
               <Icon name="ri:user-line" class="size-3.5" />
               <span>
-                Commenting as: <span class="font-title font-medium text-green-400">{user.name}</span>
+                Commenting as: <UserBadge user={user} size="sm" class="text-green-400" />
               </span>
             </div>
 

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/DonationAddress.astro

@@ -0,0 +1,65 @@
+---
+import { Icon } from 'astro-icon/components'
+import * as 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: 256,
+  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="cursor-pointer px-7 font-mono text-base leading-snug tracking-wide break-all text-white select-all"
+    >
+      {
+        address.length > 12
+          ? [
+              <span class="mr-0.5 font-bold text-green-500">{address.substring(0, 6)}</span>,
+              address.substring(6, address.length - 6),
+              <span class="ml-0.5 font-bold text-green-500">{address.substring(address.length - 6)}</span>,
+            ]
+          : address
+      }
+    </p>
+  </div>
+  <img
+    src={qrCodeDataURL}
+    alt={`${cryptoName} QR code`}
+    width="128"
+    height="128"
+    class="mr-4 hidden size-32 rounded sm:block"
+  />
+</div>

web/src/components/Footer.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components'
-import { SOURCE_CODE_URL } from 'astro:env/server'
+import { SOURCE_CODE_URL, I2P_ADDRESS, ONION_ADDRESS } from 'astro:env/server'
 
 import { cn } from '../lib/cn'
 
@@ -11,10 +11,22 @@ type Props = HTMLAttributes<'footer'>
 const links = [
   {
     href: SOURCE_CODE_URL,
-    label: 'Source Code',
+    label: 'Code',
     icon: 'ri:git-repository-line',
     external: true,
   },
+  {
+    href: ONION_ADDRESS,
+    label: 'Tor',
+    icon: 'onion',
+    external: true,
+  },
+  {
+    href: I2P_ADDRESS,
+    label: 'I2P',
+    icon: 'i2p',
+    external: true,
+  },
   {
     href: '/about',
     label: 'About',
@@ -40,7 +52,7 @@ const { class: className, ...htmlProps } = Astro.props
             href={href}
             target={external ? '_blank' : undefined}
             rel={external ? 'noopener noreferrer' : undefined}
-            class="text-day-500 dark:text-day-400 dark:hover:text-day-300 flex items-center gap-1 text-sm transition-colors hover:text-gray-700"
+            class="text-day-500 flex items-center gap-1 text-sm transition-colors hover:text-gray-200 hover:underline"
           >
             <Icon name={icon} class="h-4 w-4" />
             {label}

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/Header.astro

@@ -12,6 +12,7 @@ import HeaderNotificationIndicator from './HeaderNotificationIndicator.astro'
 import HeaderSplashTextScript from './HeaderSplashTextScript.astro'
 import Logo from './Logo.astro'
 import Tooltip from './Tooltip.astro'
+import UserBadge from './UserBadge.astro'
 
 const user = Astro.locals.user
 const actualUser = Astro.locals.actualUser
@@ -35,6 +36,7 @@ const splashText = showSplashText ? sample(splashTexts) : null
       'border-red-900 bg-red-500/60': !!actualUser,
     }
   )}
+  transition:name="header-container"
 >
   <nav class={cn('container mx-auto flex h-full w-full items-stretch justify-between px-4', classNames?.nav)}>
     <div class="@container -ml-4 flex max-w-[192px] grow-99999 items-center">
@@ -117,7 +119,7 @@ const splashText = showSplashText ? sample(splashTexts) : null
         <Tooltip
           as="a"
           href="/admin"
-          class="text-red-500 transition-colors hover:text-red-400"
+          class="flex h-full items-center text-red-500 transition-colors hover:text-red-400"
           transition:name="header-admin-link"
           text="Admin Dashboard"
           position="left"
@@ -130,9 +132,12 @@ const splashText = showSplashText ? sample(splashTexts) : null
         user ? (
           <>
             {actualUser && (
-              <span class="text-sm text-white/40 hover:text-white" transition:name="header-actual-user-name">
-                ({actualUser.name})
-              </span>
+              <UserBadge
+                user={actualUser}
+                size="sm"
+                class="text-white/40 hover:text-white"
+                transition:name="header-actual-user-name"
+              />
             )}
 
             <HeaderNotificationIndicator
@@ -140,13 +145,17 @@ const splashText = showSplashText ? sample(splashTexts) : null
               transition:name="header-notification-indicator"
             />
 
-            <a
+            <UserBadge
               href="/account"
-              class="xs:px-3 2xs:px-2 last:xs:-mr-3 last:2xs:-mr-2 flex h-full items-center px-1 text-sm text-zinc-400 transition-colors last:-mr-1 hover:text-zinc-300"
+              user={user}
+              size="md"
+              class="xs:px-3 2xs:px-2 last:xs:-mr-3 last:2xs:-mr-2 h-full px-1 text-zinc-400 transition-colors last:-mr-1 hover:text-zinc-300"
+              classNames={{
+                image: 'max-2xs:hidden',
+              }}
               transition:name="header-user-link"
-            >
-              {user.name}
-            </a>
+            />
+
             {actualUser ? (
               <a
                 href={makeUnimpersonateUrl(Astro.url)}
@@ -158,17 +167,15 @@ const splashText = showSplashText ? sample(splashTexts) : null
                 <Icon name="ri:user-shared-2-line" class="size-4" />
               </a>
             ) : (
-              DEPLOYMENT_MODE !== 'production' && (
-                <a
-                  href="/account/logout"
-                  data-astro-prefetch="tap"
-                  class="xs:px-3 2xs:px-2 last:xs:-mr-3 last:2xs:-mr-2 flex h-full items-center px-1 text-sm text-stone-100 transition-colors last:-mr-1 hover:text-stone-200"
-                  transition:name="header-logout-link"
-                  aria-label="Logout"
-                >
-                  <Icon name="ri:logout-box-r-line" class="size-4" />
-                </a>
-              )
+              <a
+                href="/account/logout"
+                data-astro-prefetch="tap"
+                class="xs:px-3 2xs:px-2 last:xs:-mr-3 last:2xs:-mr-2 flex h-full items-center px-1 text-sm text-stone-100 transition-colors last:-mr-1 hover:text-stone-200"
+                transition:name="header-logout-link"
+                aria-label="Logout"
+              >
+                <Icon name="ri:logout-box-r-line" class="size-4" />
+              </a>
             )}
           </>
         ) : (

web/src/components/InputCardGroup.astro

@@ -20,6 +20,7 @@ type Props<Multiple extends boolean = false> = Omit<
     iconClass?: string
     description?: MarkdownString
     disabled?: boolean
+    noTransitionPersist?: boolean
   }[]
   disabled?: boolean
   selectedValue?: Multiple extends true ? string[] : string
@@ -39,13 +40,11 @@ const {
   ...wrapperProps
 } = Astro.props
 
-const inputId = Astro.locals.makeId(`input-${wrapperProps.name}`)
-
 const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
 ---
 
 {/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */}
-<InputWrapper inputId={inputId} class={cn('@container', className)} {...wrapperProps}>
+<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',
@@ -71,7 +70,7 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
           )}
         >
           <input
-            transition:persist
+            transition:persist={option.noTransitionPersist ? undefined : true}
             type={multiple ? 'checkbox' : 'radio'}
             name={wrapperProps.name}
             value={option.value}

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) => (
-          <label class="hover:bg-night-500 flex cursor-pointer items-center gap-2 px-5 py-1">
-            <input
-              transition:persist
-              type="checkbox"
-              name={wrapperProps.name}
-              value={option.value}
-              checked={selectedValues.includes(option.value)}
-              class={cn(hasError && baseInputClassNames.error, disabled && baseInputClassNames.disabled)}
-              disabled={disabled}
-            />
-            {option.icon && <Icon name={option.icon} class="size-4" />}
-            <span class="text-sm leading-none">{option.label}</span>
-          </label>
-        ))
+        options.map((option) => {
+          const icons = option.icon ? (Array.isArray(option.icon) ? option.icon : [option.icon]) : []
+          const iconClassName = option.iconClassName
+            ? Array.isArray(option.iconClassName)
+              ? option.iconClassName
+              : Array.from({ length: icons.length }, () => option.iconClassName)
+            : []
+          return (
+            <label class="hover:bg-night-500 flex cursor-pointer items-center gap-2 px-5 py-1">
+              <input
+                transition:persist
+                type="checkbox"
+                name={wrapperProps.name}
+                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/InputFile.astro

@@ -25,8 +25,19 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
 <InputWrapper inputId={inputId} {...wrapperProps}>
   {
     !!removeCheckbox && (
-      <label class="flex cursor-pointer items-center gap-2 py-1 pl-1 text-sm leading-none">
-        <input transition:persist type="checkbox" name={removeCheckbox.name} data-remove-checkbox />
+      <label
+        class={cn(
+          'flex cursor-pointer items-center gap-2 py-1 pl-1 text-sm leading-none',
+          disabled && 'cursor-not-allowed opacity-50'
+        )}
+      >
+        <input
+          transition:persist
+          type="checkbox"
+          name={removeCheckbox.name}
+          data-remove-checkbox
+          disabled={disabled}
+        />
         {removeCheckbox.label || 'Remove'}
       </label>
     )

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/InputText.astro

@@ -10,7 +10,9 @@ import InputWrapper from './InputWrapper.astro'
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
 
 type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId' | 'required'> & {
-  inputProps?: Omit<HTMLAttributes<'input'>, 'name'>
+  inputProps?: Omit<HTMLAttributes<'input'>, 'name'> & {
+    'transition:persist'?: boolean
+  }
   inputIcon?: string
   inputIconClass?: string
 }
@@ -26,7 +28,7 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
     inputIcon ? (
       <div class="relative">
         <input
-          transition:persist
+          transition:persist={inputProps?.['transition:persist'] === false ? undefined : true}
           {...omit(inputProps, ['class', 'id', 'name'])}
           id={inputId}
           class={cn(

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
@@ -31,6 +31,7 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
       hasError && baseInputClassNames.error,
       !!inputProps?.disabled && baseInputClassNames.disabled
     )}
-    name={wrapperProps.name}>{value}</textarea
-  >
+    name={wrapperProps.name}
+    set:text={value}
+  />
 </InputWrapper>

web/src/components/InputWrapper.astro

@@ -18,6 +18,7 @@ type Props = HTMLAttributes<'div'> & {
   error?: string[] | string
   icon?: string
   inputId?: string
+  hideLabel?: boolean
 }
 
 const {
@@ -30,6 +31,7 @@ const {
   icon,
   class: className,
   inputId,
+  hideLabel,
   ...htmlProps
 } = Astro.props
 
@@ -37,17 +39,20 @@ const hasError = !!error && error.length > 0
 ---
 
 <fieldset class={cn('space-y-1', className)} {...htmlProps}>
-  <div class={cn('contents', !!descriptionLabel && 'flex flex-wrap items-center gap-x-4')}>
-    <legend class={cn('font-title block text-sm font-medium', hasError && 'text-red-500')}>
-      {icon && <Icon name={icon} class="inline-block size-4 align-[-0.2em]" />}
-      <label for={inputId}>{label}</label>{required && '*'}
-    </legend>
-    {
-      !!descriptionLabel && (
-        <span class="text-day-400 flex-1 basis-24 text-xs text-pretty">{descriptionLabel}</span>
-      )
-    }
-  </div>
+  {
+    !hideLabel && (
+      <div class={cn('contents', !!descriptionLabel && 'flex flex-wrap items-center gap-x-4')}>
+        <legend class={cn('font-title block text-sm font-medium', hasError && 'text-red-500')}>
+          {icon && <Icon name={icon} class="inline-block size-4 align-[-0.2em]" />}
+          <label for={inputId}>{label}</label>
+          {required && '*'}
+        </legend>
+        {!!descriptionLabel && (
+          <span class="text-day-400 flex-1 basis-24 text-xs text-pretty">{descriptionLabel}</span>
+        )}
+      </div>
+    )
+  }
 
   <slot />
 

web/src/components/MyPicture.astro

@@ -0,0 +1,48 @@
+---
+import type { ComponentProps } from 'react'
+
+import { Picture } from 'astro:assets'
+
+import defaultServiceImage from '../assets/fallback-service-image.jpg'
+import { cn } from '../lib/cn'
+
+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,
+  pictureAttributes,
+  ...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}
+      pictureAttributes={{
+        ...pictureAttributes,
+        class: cn('shrink-0', pictureAttributes?.class),
+      }}
+      {...(props as any)}
+    />
+  )
+}

web/src/components/PillsRadioGroup.astro

@@ -9,15 +9,16 @@ type Props = HTMLAttributes<'div'> & {
     value: HTMLAttributes<'input'>['value']
     label: string
   }[]
+  inputProps?: Omit<HTMLAttributes<'input'>, 'checked' | 'class' | 'name' | 'type' | 'value'>
   selectedValue?: string | null
 }
 
-const { name, options, selectedValue, class: className, ...rest } = Astro.props
+const { name, options, selectedValue, inputProps, 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 +31,8 @@ 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"
+          {...inputProps}
         />
         <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
-      src={// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      imageUrl || (defaultImage as unknown as string)}
+    <MyPicture
+      src={imageUrl}
+      fallback="service"
       alt={name || 'Service logo'}
       class="size-12 shrink-0 rounded-sm object-contain text-white"
       width={48}
@@ -89,12 +88,26 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
       <h3 class="font-title text-lg leading-none font-medium tracking-wide text-white">
         {name}{
           statusIcon && (
-            <Tooltip text={statusIcon.label} position="right" class="-my-2 shrink-0">
-              <Icon
-                is:inline={inlineIcons}
-                name={statusIcon.icon}
-                class={cn('inline-block size-6 shrink-0 rounded-lg p-1', statusIcon.classNames.icon)}
-              />
+            <Tooltip
+              text={statusIcon.label}
+              position="right"
+              class="-my-2 shrink-0 whitespace-nowrap"
+              enabled={verificationStatus !== 'VERIFICATION_FAILED'}
+            >
+              {[
+                <Icon
+                  is:inline={inlineIcons}
+                  name={statusIcon.icon}
+                  class={cn(
+                    'inline-block size-6 shrink-0 rounded-lg p-1 align-[-0.37em]',
+                    verificationStatus === 'VERIFICATION_FAILED' && 'pr-0',
+                    statusIcon.classNames.icon
+                  )}
+                />,
+                verificationStatus === 'VERIFICATION_FAILED' && (
+                  <span class="text-sm font-bold text-red-500">SCAM</span>
+                ),
+              ]}
             </Tooltip>
           )
         }

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'
@@ -34,17 +34,23 @@ const {
 <form
   method="GET"
   hx-get={Astro.url.pathname}
-  hx-trigger={`input delay:500ms from:input[type='text'], keyup[key=='Enter'], change from:input:not([data-show-more-input], #${showFiltersId}), change from:select`}
+  hx-trigger={// NOTE: I need to do the [data-trigger-on-change] hack, because HTMX doesnt suport the :not() selector, and I need to exclude the Show more buttons, and not trigger for inputs outside the form
+  "input delay:500ms from:([data-services-filters-form] input[type='text']), keyup[key=='Enter'], change from:([data-services-filters-form] [data-trigger-on-change])"}
   hx-target={`#${searchResultsId}`}
   hx-select={`#${searchResultsId}`}
   hx-push-url="true"
   hx-indicator="#search-indicator"
+  hx-swap="outerHTML"
   data-services-filters-form
   data-default-verification-filter={options.verification
     .filter((verification) => verification.default)
     .map((verification) => verification.slug)}
   {...formProps}
-  class={cn('', className)}
+  class={cn(
+    // Check the scam filter when there is a text quey and the user has checked verified and approved
+    'has-[input[name=q]:not(:placeholder-shown)]:has-[&_input[name=verification][value=verified]:checked]:has-[&_input[name=verification][value=approved]:checked]:[&_input[name=verification][value=scam]]:checkbox-force-checked',
+    className
+  )}
 >
   <div class="mb-4 flex items-center justify-between">
     <h2 class="font-title text-xl text-green-500">FILTERS</h2>
@@ -64,6 +70,7 @@ const {
       name="sort"
       id="sort"
       class="border-night-600 bg-night-900 w-full rounded-md border p-2 text-white focus:border-green-500 focus:outline-hidden"
+      data-trigger-on-change
     >
       {
         options.sort.map((option) => (
@@ -97,19 +104,20 @@ 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-peer-checked:[&>li:not([data-show-always])]:hidden">
+    <ul class="[&:not(:has(~_.peer:checked))]:[&>li:not([data-show-always])]:hidden">
       {
         options.categories?.map((category) => (
           <li data-show-always={category.showAlways ? '' : undefined}>
-            <label class="flex cursor-pointer items-center space-x-2 text-sm text-white">
+            <label class="flex cursor-pointer items-center gap-2 text-sm text-white">
               <input
                 type="checkbox"
                 class="peer text-green-500"
                 name="categories"
                 value={category.slug}
                 checked={category.checked}
+                data-trigger-on-change
               />
+              <Icon name={category.icon} class="size-4" />
               <span class="peer-checked:font-bold">
                 {category.name}
                 <span class="text-day-500 font-normal">{category._count.services}</span>
@@ -122,15 +130,16 @@ const {
     {
       options.categories.filter((category) => category.showAlways).length < options.categories.length && (
         <>
+          <input type="checkbox" id="show-more-categories" class="peer sr-only" hx-preserve />
           <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>
@@ -152,6 +161,7 @@ const {
               name="verification"
               value={verification.slug}
               checked={filters.verification.includes(verification.value)}
+              data-trigger-on-change
             />
             <Icon name={verification.icon} class={cn('size-4', verification.classNames.icon)} />
             <span class="peer-checked:font-bold">{verification.labelShort}</span>
@@ -170,6 +180,9 @@ const {
         options={options.modeOptions}
         selectedValue={filters['currency-mode']}
         class="-my-2"
+        inputProps={{
+          'data-trigger-on-change': true,
+        }}
       />
     </div>
     <div>
@@ -182,6 +195,7 @@ const {
               name="currencies"
               value={currency.slug}
               checked={filters.currencies?.some((id) => id === currency.id)}
+              data-trigger-on-change
             />
             <Icon name={currency.icon} class="size-4" />
             <span class="peer-checked:font-bold">{currency.name}</span>
@@ -204,6 +218,7 @@ const {
               name="networks"
               value={network.slug}
               checked={filters.networks?.some((slug) => slug === network.slug)}
+              data-trigger-on-change
             />
             <Icon name={network.icon} class="size-4" />
             <span class="peer-checked:font-bold">{network.name}</span>
@@ -227,6 +242,7 @@ const {
         id="max-kyc"
         value={filters['max-kyc'] ?? 4}
         class="w-full accent-green-500"
+        data-trigger-on-change
       />
     </div>
     <div class="text-day-400 mt-1 flex justify-between px-1 text-xs">
@@ -255,6 +271,7 @@ const {
         id="user-rating"
         value={filters['user-rating']}
         class="w-full accent-green-500"
+        data-trigger-on-change
       />
     </div>
     <div class="text-day-400 mt-1 flex justify-between px-2 text-xs">
@@ -283,20 +300,24 @@ const {
         options={options.modeOptions}
         selectedValue={filters['attribute-mode']}
         class="-my-2"
+        inputProps={{
+          'data-trigger-on-change': true,
+        }}
       />
     </div>
     {
-      options.attributesByCategory.map(({ category, attributes }) => (
+      options.attributesByCategory.map(({ categoryInfo, attributes }) => (
         <fieldset class="min-w-0">
-          <legend class="font-title mb-0.5 text-xs tracking-wide text-white">{category}</legend>
-          <input
-            type="checkbox"
-            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">
+          <legend class="font-title mb-0.5 inline-flex items-center gap-1 text-[0.8125rem] tracking-wide text-white uppercase">
+            <Icon
+              name={categoryInfo.icon}
+              class={cn('size-4 shrink-0 opacity-80', categoryInfo.classNames.icon)}
+              aria-hidden="true"
+            />
+            {categoryInfo.label}
+          </legend>
+
+          <ul class="[:not(:has(~_.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,65 +327,73 @@ 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=""
                       checked={!attribute.value}
                       aria-label="Ignore"
+                      data-trigger-on-change
                     />
                     <input
                       type="radio"
                       name={inputName}
                       value="yes"
                       id={yesId}
-                      class="peer/yes hidden"
+                      class="peer/yes sr-only"
                       checked={attribute.value === 'yes'}
                       aria-label="Include"
+                      data-trigger-on-change
                     />
                     <input
                       type="radio"
                       name={inputName}
                       value="no"
                       id={noId}
-                      class="peer/no hidden"
+                      class="peer/no sr-only"
                       checked={attribute.value === 'no'}
                       aria-label="Exclude"
+                      data-trigger-on-change
                     />
 
+                    <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 before:bg-night-400 before:border-night-600 pointer-events-none block h-4 w-px border-y peer-checked/no:w-[0.5px] peer-checked/yes:w-[0.5px] before:h-full before:w-px before:border-y-2"
+                      aria-hidden="true"
+                    />
 
                     <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 +405,8 @@ const {
                       aria-hidden="true"
                     >
                       <Icon
-                        name={attribute.icon}
-                        class={cn('mr-2 size-3 shrink-0 opacity-80', attribute.iconClass)}
+                        name={attribute.typeInfo.icon}
+                        class={cn('mr-2 size-3 shrink-0 opacity-80', attribute.typeInfo.classNames.icon)}
                         aria-hidden="true"
                       />
                       <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
@@ -391,8 +420,8 @@ const {
                       aria-hidden="true"
                     >
                       <Icon
-                        name={attribute.icon}
-                        class={cn('mr-2 size-3 shrink-0 opacity-100', attribute.iconClass)}
+                        name={attribute.typeInfo.icon}
+                        class={cn('mr-2 size-3 shrink-0 opacity-100', attribute.typeInfo.classNames.icon)}
                         aria-hidden="true"
                       />
                       <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
@@ -405,17 +434,24 @@ const {
               )
             })}
           </ul>
+
           {attributes.filter((attribute) => attribute.showAlways).length < attributes.length && (
             <>
+              <input
+                type="checkbox"
+                id={`show-more-attributes-${categoryInfo.slug}`}
+                class="peer sr-only"
+                hx-preserve
+              />
               <label
-                for={`show-more-attributes-${category}`}
-                class="mt-2 block cursor-pointer text-sm text-green-500 peer-checked:hidden"
+                for={`show-more-attributes-${categoryInfo.slug}`}
+                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"
+                for={`show-more-attributes-${categoryInfo.slug}`}
+                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>
@@ -440,6 +476,7 @@ const {
         id="min-score"
         value={filters['min-score']}
         class="w-full accent-green-500"
+        data-trigger-on-change
       />
     </div>
     <div class="-mx-1.5 mt-2 flex justify-between px-1">

web/src/components/ServicesSearchResults.astro

@@ -1,9 +1,11 @@
 ---
 import { Icon } from 'astro-icon/components'
+import { uniq } from 'lodash-es'
 
+import { verificationStatusesByValue } from '../constants/verificationStatus'
 import { cn } from '../lib/cn'
 import { pluralize } from '../lib/pluralize'
-import { createPageUrl } from '../lib/urls'
+import { createPageUrl, urlWithParams } from '../lib/urls'
 
 import Button from './Button.astro'
 import ServiceCard from './ServiceCard.astro'
@@ -19,7 +21,9 @@ type Props = HTMLAttributes<'div'> & {
   pageSize: number
   sortSeed?: string
   filters: ServicesFiltersObject
-  hadToIncludeCommunityContributed: boolean
+  includeScams: boolean
+  countCommunityOnly: number | null
+  inlineIcons?: boolean
 }
 
 const {
@@ -31,89 +35,191 @@ const {
   sortSeed,
   class: className,
   filters,
-  hadToIncludeCommunityContributed,
+  includeScams,
+  countCommunityOnly,
+  inlineIcons,
   ...divProps
 } = Astro.props
 
-const hasScams = filters.verification.includes('VERIFICATION_FAILED')
-const hasCommunityContributed =
+const hasScams =
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  filters.verification.includes('COMMUNITY_CONTRIBUTED') || hadToIncludeCommunityContributed
+  filters.verification.includes('VERIFICATION_FAILED') || includeScams
+const hasSomeScam = !!services?.some((service) => service.verificationStatus.includes('VERIFICATION_FAILED'))
+
+const hasCommunityContributed = filters.verification.includes('COMMUNITY_CONTRIBUTED')
+const hasSomeCommunityContributed = !!services?.some((service) =>
+  service.verificationStatus.includes('COMMUNITY_CONTRIBUTED')
+)
 
 const totalPages = Math.ceil(total / pageSize) || 1
+
+const urlIfIncludingCommunity = urlWithParams(Astro.url, {
+  verification: uniq([
+    ...filters.verification.map((v) => verificationStatusesByValue[v].slug),
+    verificationStatusesByValue.COMMUNITY_CONTRIBUTED.slug,
+  ]),
+})
 ---
 
 <div {...divProps} class={cn('flex-1', className)}>
-  <div class="mb-6 flex items-center justify-between">
-    <span class="text-day-500 text-sm">
+  <div class="flex items-center justify-between">
+    <span class="text-day-500 xs:gap-x-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm sm:gap-x-6">
       {total.toLocaleString()}
       {pluralize('result', total)}
 
-      <span
+      <Icon
+        name="ri:loader-4-line"
         id="search-indicator"
-        class="htmx-request:opacity-100 text-white opacity-0 transition-opacity duration-500"
-      >
-        <Icon name="ri:loader-4-line" class="inline-block size-4 animate-spin" />
-        Loading...
-      </span>
+        class="htmx-request:opacity-100 xs:-mx-1.5 -mx-1 inline-block size-4 animate-spin text-white opacity-0 transition-opacity duration-500 sm:-mx-3"
+        is:inline={inlineIcons}
+      />
+
+      {
+        countCommunityOnly && (
+          <>
+            <Button
+              as="a"
+              href={urlIfIncludingCommunity}
+              label={`Include +${countCommunityOnly.toLocaleString()} community contributed`}
+              size="sm"
+              class="hidden lg:inline-flex"
+              icon="ri:search-line"
+              inlineIcon={inlineIcons}
+            />
+            <Button
+              as="a"
+              href={urlIfIncludingCommunity}
+              label={`Include +${countCommunityOnly.toLocaleString()}`}
+              size="sm"
+              class="hidden sm:inline-flex lg:hidden"
+              icon="ri:search-line"
+              endIcon="ri:question-line"
+              classNames={{
+                endIcon: 'text-yellow-200/50',
+              }}
+              inlineIcon={inlineIcons}
+            />
+
+            <a
+              href={urlIfIncludingCommunity}
+              class="border-night-500 bg-night-800 flex items-center gap-1 rounded-md border px-2 py-0.5 text-sm sm:hidden"
+            >
+              <Icon
+                name="ri:search-line"
+                class="mr-0.5 inline-block size-3.5 shrink-0 align-[-0.15em]"
+                is:inline={inlineIcons}
+              />
+              Include
+              {countCommunityOnly.toLocaleString()}
+              <Icon
+                name="ri:question-line"
+                class="inline-block size-3.5 shrink-0 align-[-0.15em] text-yellow-200/50"
+                is:inline={inlineIcons}
+              />
+            </a>
+          </>
+        )
+      }
     </span>
-    <Button as="a" href="/service-suggestion/new" label="Add service" icon="ri:add-line" />
+    <Button
+      as="a"
+      href="/service-suggestion/new"
+      label="Add service"
+      icon="ri:add-line"
+      inlineIcon={inlineIcons}
+      class="max-xs:w-9 max-xs:px-0"
+      classNames={{
+        label: 'max-xs:hidden',
+      }}
+    />
   </div>
 
   {
     hasScams && hasCommunityContributed && (
-      <div class="font-title mb-6 rounded-lg border border-red-500/30 bg-red-950 p-4 text-sm text-red-500">
-        <Icon name="ri:alert-fill" class="-mr-1 inline-block size-4 text-red-500" />
-        <Icon name="ri:question-line" class="mr-2 inline-block size-4 text-yellow-500" />
-        Showing SCAM and unverified community-contributed services.
-        {hadToIncludeCommunityContributed && 'Because there were no other results.'}
+      <div class="font-title mt-2 rounded-lg bg-red-900/50 px-3 py-2 text-sm text-pretty text-red-400">
+        <Icon
+          name="ri:alert-fill"
+          class="inline-block size-4 shrink-0 align-[-0.2em] text-red-500"
+          is:inline={inlineIcons}
+        />
+        <Icon
+          name="ri:question-line"
+          class="mr-1 inline-block size-4 shrink-0 align-[-0.2em] text-yellow-400"
+          is:inline={inlineIcons}
+        />
+        Results {hasSomeScam || hasSomeCommunityContributed ? 'include' : 'may include'} SCAMs or
+        community-contributed services.
       </div>
     )
   }
 
   {
     hasScams && !hasCommunityContributed && (
-      <div class="font-title mb-6 rounded-lg border border-red-500/30 bg-red-950 p-4 text-sm text-red-500">
-        <Icon name="ri:alert-fill" class="mr-2 inline-block size-4 text-red-500" />
-        Showing SCAM services!
+      <div class="font-title mt-2 rounded-lg bg-red-900/50 px-3 py-2 text-sm text-pretty text-red-400">
+        <Icon
+          name="ri:alert-fill"
+          class="mr-1 inline-block size-4 shrink-0 align-[-0.2em] text-red-500"
+          is:inline={inlineIcons}
+        />
+        Results {hasSomeScam ? 'include' : 'may include'} SCAM services
       </div>
     )
   }
 
   {
     !hasScams && hasCommunityContributed && (
-      <div class="font-title mb-6 rounded-lg border border-yellow-500/30 bg-yellow-950 p-4 text-sm text-yellow-500">
-        <Icon name="ri:question-line" class="mr-2 inline-block size-4" />
-
-        {hadToIncludeCommunityContributed
-          ? 'Showing unverified community-contributed services, because there were no other results. Some might be scams.'
-          : 'Showing unverified community-contributed services, some might be scams.'}
+      <div class="font-title mt-2 rounded-lg bg-yellow-600/30 px-3 py-2 text-sm text-pretty text-yellow-200">
+        <Icon
+          name="ri:question-line"
+          class="mr-1 inline-block size-4 shrink-0 align-[-0.2em] text-yellow-400"
+          is:inline={inlineIcons}
+        />
+        Results {hasSomeCommunityContributed ? 'include' : 'may include'} unverified community-contributed
+        services, some might be scams.
       </div>
     )
   }
 
   {
     !services || services.length === 0 ? (
-      <div class="sticky top-20 flex flex-col items-center justify-center rounded-lg border border-green-500/30 bg-black/40 p-12 text-center">
-        <Icon name="ri:emotion-sad-line" class="mb-4 size-16 text-green-500/50" />
+      <div class="sticky top-20 mt-6 flex flex-col items-center justify-center py-12 text-center">
+        <Icon name="ri:emotion-sad-line" class="mb-4 size-16 text-green-500/50" is:inline={inlineIcons} />
         <h3 class="font-title mb-3 text-xl text-green-500">No services found</h3>
         <p class="text-day-400">Try adjusting your filters to find more services</p>
-        <a
-          href={Astro.url.pathname}
-          class={cn(
-            'bg-night-800 font-title mt-4 rounded-md px-4 py-2 text-sm tracking-wider text-white uppercase',
-            hasDefaultFilters && 'hidden'
+        <div class="mt-4 flex justify-center gap-2">
+          {!hasDefaultFilters && (
+            <Button
+              as="a"
+              href={Astro.url.pathname}
+              label="Clear filters"
+              icon="ri:close-line"
+              inlineIcon={inlineIcons}
+            />
           )}
-        >
-          Clear filters
-        </a>
+          {countCommunityOnly && (
+            <Button
+              as="a"
+              href={urlIfIncludingCommunity}
+              label={`Show ${countCommunityOnly.toLocaleString()} community contributed`}
+              icon="ri:search-line"
+              inlineIcon={inlineIcons}
+            />
+          )}
+          <Button
+            as="a"
+            href="/service-suggestion/new"
+            label="Add service"
+            icon="ri:add-line"
+            inlineIcon={inlineIcons}
+          />
+        </div>
       </div>
     ) : (
       <>
-        <div class="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-[repeat(auto-fill,minmax(calc(var(--spacing)*80),1fr))]">
+        <div class="mt-6 grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-[repeat(auto-fill,minmax(calc(var(--spacing)*80),1fr))]">
           {services.map((service, i) => (
             <ServiceCard
-              inlineIcons
+              inlineIcons={inlineIcons}
               service={service}
               data-hx-search-results-card
               {...(i === services.length - 1 && currentPage < totalPages
@@ -131,11 +237,29 @@ const totalPages = Math.ceil(total / pageSize) || 1
 
         <div class="no-js:hidden mt-8 flex justify-center" id="infinite-scroll-indicator">
           <div class="htmx-request:opacity-100 flex items-center gap-2 opacity-0 transition-opacity duration-500">
-            <Icon name="ri:loader-4-line" class="size-8 animate-spin text-green-500" />
+            <Icon
+              name="ri:loader-4-line"
+              class="size-8 animate-spin text-green-500"
+              is:inline={inlineIcons}
+            />
             Loading more services...
           </div>
         </div>
       </>
     )
   }
+  {
+    services && services.length > 0 && (
+      <div class="mt-4 text-center">
+        <Button
+          as="a"
+          href="/service-suggestion/new"
+          label="Add service"
+          icon="ri:add-line"
+          inlineIcon={inlineIcons}
+          class="mx-auto"
+        />
+      </div>
+    )
+  }
 </div>

web/src/components/Tooltip.astro

@@ -36,7 +36,7 @@ const {
         class={cn(
           'pointer-events-none hidden select-none group-hover/tooltip:flex',
           'ease-out-cubic scale-75 opacity-0 transition-all transition-discrete duration-100 group-hover/tooltip:scale-100 group-hover/tooltip:opacity-100 starting:group-hover/tooltip:scale-75 starting:group-hover/tooltip:opacity-0',
-          'z-1000 w-max max-w-sm rounded-lg px-3 py-2 font-sans text-sm font-normal tracking-normal text-pretty whitespace-pre-wrap',
+          'z-1000 w-max max-w-sm rounded-lg px-3 py-2 font-sans text-sm font-normal tracking-normal text-pretty wrap-anywhere whitespace-pre-wrap',
           // Position classes
           {
             'absolute -top-2 left-1/2 origin-bottom -translate-x-1/2 translate-y-[calc(-100%+0.5rem)] text-center group-hover/tooltip:-translate-y-full starting:group-hover/tooltip:translate-y-[calc(-100%+0.25rem)]':
@@ -85,9 +85,8 @@ const {
           },
           classNames?.tooltip
         )}
-      >
-        {text}
-      </span>
+        set:text={text}
+      />
     )
   }
 </Component>

web/src/components/UserBadge.astro

@@ -0,0 +1,87 @@
+---
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { getSizePxFromTailwindClasses } from '../lib/tailwind'
+
+import MyPicture from './MyPicture.astro'
+
+import type { Prisma } from '@prisma/client'
+import type { HTMLAttributes } from 'astro/types'
+import type { O } from 'ts-toolbelt'
+
+const userBadge = tv({
+  slots: {
+    base: 'group/user-badge font-title inline-flex max-w-full items-center gap-1 overflow-hidden font-medium',
+    image: 'inline-block rounded-full object-cover',
+    text: 'truncate',
+  },
+  variants: {
+    size: {
+      sm: {
+        base: 'gap-1 text-xs',
+        image: 'size-4',
+      },
+      md: {
+        base: 'gap-2 text-sm',
+        image: 'size-5',
+      },
+      lg: {
+        base: 'gap-2 text-base',
+        image: 'size-6',
+      },
+    },
+    noLink: {
+      true: {
+        text: 'cursor-default',
+      },
+      false: {
+        base: 'cursor-pointer',
+        text: 'group-hover/user-badge:underline',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+    noLink: false,
+  },
+})
+
+type Props = O.Optional<HTMLAttributes<'a'>, 'href'> &
+  VariantProps<typeof userBadge> & {
+    user: Prisma.UserGetPayload<{
+      select: {
+        name: true
+        displayName: true
+        picture: true
+      }
+    }>
+    classNames?: {
+      image?: string
+      text?: string
+    }
+    children?: never
+  }
+
+const { user, href, class: className, size = 'sm', classNames, noLink = false, ...htmlProps } = Astro.props
+const { base, image, text } = userBadge({ size, noLink })
+
+const imageClassName = image({ class: classNames?.image })
+const imageSizePx = getSizePxFromTailwindClasses(imageClassName, 16)
+
+const Tag = noLink ? 'span' : 'a'
+---
+
+<Tag
+  href={Tag === 'a' ? (href ?? `/u/${user.name}`) : undefined}
+  class={base({ class: className })}
+  {...htmlProps}
+>
+  {
+    !!user.picture && (
+      <MyPicture src={user.picture} height={imageSizePx} width={imageSizePx} class={imageClassName} alt="" />
+    )
+  }
+  <span class={text({ class: classNames?.text })}>
+    {user.displayName ?? user.name}
+  </span>
+</Tag>

web/src/components/VerificationWarningBanner.astro

@@ -19,6 +19,11 @@ type Props = {
       verificationSummary: true
       listedAt: true
       createdAt: true
+      verificationSteps: {
+        select: {
+          status: true
+        }
+      }
     }
   }>
 }
@@ -45,7 +50,7 @@ const wasRecentlyAdded = isPast(listedDate) && differenceInDays(new Date(), list
         )}
       </p>
       {!!service.verificationSummary && (
-        <div class="mt-2 whitespace-pre-wrap">{service.verificationSummary}</div>
+        <div class="mt-2 wrap-anywhere whitespace-pre-wrap" set:text={service.verificationSummary} />
       )}
     </div>
   ) : service.verificationStatus === 'COMMUNITY_CONTRIBUTED' ? (
@@ -67,3 +72,18 @@ const wasRecentlyAdded = isPast(listedDate) && differenceInDays(new Date(), list
     </div>
   ) : null
 }
+
+{
+  service.verificationStatus !== 'VERIFICATION_FAILED' &&
+    service.verificationSteps.some((step) => step.status === 'FAILED') && (
+      <div class="mb-3 flex items-center gap-2 rounded-md bg-red-900/50 p-2 text-sm text-red-400">
+        <Icon
+          name={verificationStatusesByValue.VERIFICATION_FAILED.icon}
+          class={cn('size-5', verificationStatusesByValue.VERIFICATION_FAILED.classNames.icon)}
+        />
+        <span>
+          This service has failed one or more verification steps. Review the verification details carefully.
+        </span>
+      </div>
+    )
+}

web/src/constants/accountStatusChange.ts

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

web/src/constants/announcementTypes.ts

@@ -0,0 +1,75 @@
+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
+    bg: string
+    content: string
+    icon: string
+    badge: string
+  }
+}
+export const {
+  dataArray: announcementTypes,
+  dataObject: announcementTypesById,
+  getFn: getAnnouncementTypeInfo,
+  zodEnumById: zodAnnouncementTypesById,
+} = makeHelpersForOptions(
+  'value',
+  (value): AnnouncementTypeInfo<typeof value> => ({
+    value,
+    label: value ? transformCase(value.replaceAll('_', ' '), 'title') : String(value),
+    icon: 'ri:question-line',
+    classNames: {
+      container: 'bg-cyan-950',
+      bg: 'from-cyan-400 to-cyan-700',
+      content: '[--gradient-edge:var(--color-green-100)] [--gradient-center:var(--color-cyan-400)]',
+      icon: 'text-cyan-300/80',
+      badge: 'bg-blue-900/30 text-blue-400',
+    },
+  }),
+  [
+    {
+      value: 'INFO',
+      label: 'Info',
+      icon: 'ri:information-line',
+      classNames: {
+        container: 'bg-cyan-950',
+        bg: 'from-cyan-400 to-cyan-700',
+        content: '[--gradient-edge:var(--color-green-100)] [--gradient-center:var(--color-cyan-400)]',
+        icon: 'text-cyan-300/80',
+        badge: 'bg-blue-900/30 text-blue-400',
+      },
+    },
+    {
+      value: 'WARNING',
+      label: 'Warning',
+      icon: 'ri:alert-fill',
+      classNames: {
+        container: 'bg-yellow-950',
+        bg: 'from-yellow-400 to-yellow-700',
+        content: '[--gradient-edge:var(--color-lime-100)] [--gradient-center:var(--color-yellow-400)]',
+        icon: 'text-yellow-400/80',
+        badge: 'bg-yellow-900/30 text-yellow-400',
+      },
+    },
+    {
+      value: 'ALERT',
+      label: 'Alert',
+      icon: 'ri:spam-fill',
+      classNames: {
+        container: 'bg-red-950',
+        bg: 'from-red-400 to-red-700',
+        content: '[--gradient-edge:var(--color-red-100)] [--gradient-center:var(--color-rose-400)]',
+        icon: 'text-red-400/80',
+        badge: 'bg-red-900/30 text-red-400',
+      },
+    },
+  ] 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/commentStatus.ts

@@ -1,12 +1,15 @@
 import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
 import { transformCase } from '../lib/strings'
 
+import type BadgeSmall from '../components/BadgeSmall.astro'
 import type { CommentStatus } from '@prisma/client'
+import type { ComponentProps } from 'astro/types'
 
 type CommentStatusInfo<T extends string | null | undefined = string> = {
   id: T
   icon: string
   label: string
+  color: ComponentProps<typeof BadgeSmall>['color']
   creativeWorkStatus: string | undefined
 }
 
@@ -20,37 +23,43 @@ export const {
     id,
     icon: 'ri:question-line',
     label: id ? transformCase(id, 'title') : String(id),
+    color: 'gray',
     creativeWorkStatus: undefined,
   }),
   [
     {
       id: 'PENDING',
       icon: 'ri:question-line',
-      label: 'Pending',
+      label: 'Unmoderated',
+      color: 'yellow',
       creativeWorkStatus: 'Deleted',
     },
     {
       id: 'HUMAN_PENDING',
       icon: 'ri:question-line',
-      label: 'Pending 2',
+      label: 'Unmoderated',
+      color: 'yellow',
       creativeWorkStatus: 'Deleted',
     },
     {
       id: 'VERIFIED',
-      icon: 'ri:check-line',
+      icon: 'ri:verified-badge-fill',
       label: 'Verified',
+      color: 'blue',
       creativeWorkStatus: 'Verified',
     },
     {
       id: 'REJECTED',
       icon: 'ri:close-line',
       label: 'Rejected',
+      color: 'red',
       creativeWorkStatus: 'Deleted',
     },
     {
       id: 'APPROVED',
       icon: 'ri:check-line',
       label: 'Approved',
+      color: 'green',
       creativeWorkStatus: 'Active',
     },
   ] as const satisfies CommentStatusInfo<CommentStatus>[]

web/src/constants/commentStatusFilters.ts

@@ -1,15 +1,20 @@
 import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
 import { transformCase } from '../lib/strings'
 
+import { commentStatusById } from './commentStatus'
+
+import type BadgeSmall from '../components/BadgeSmall.astro'
 import type { Prisma } from '@prisma/client'
+import type { ComponentProps } from 'astro/types'
 
 type CommentStatusFilterInfo<T extends string | null | undefined = string> = {
   value: T
   label: string
+  color: ComponentProps<typeof BadgeSmall>['color']
+  icon: string
   whereClause: Prisma.CommentWhereInput
-  styles: {
+  classNames: {
     filter: string
-    badge: string
   }
 }
 
@@ -24,9 +29,10 @@ export const {
     value,
     label: value ? transformCase(value, 'title') : String(value),
     whereClause: {},
-    styles: {
+    color: 'gray',
+    icon: 'ri:question-line',
+    classNames: {
       filter: 'border-zinc-700 transition-colors hover:border-green-500/50',
-      badge: '',
     },
   }),
   [
@@ -34,75 +40,92 @@ export const {
       label: 'All',
       value: 'all',
       whereClause: {},
-      styles: {
+      color: 'gray',
+      icon: 'ri:question-line',
+      classNames: {
         filter: 'border-green-500 bg-green-500/20 text-green-400',
-        badge: '',
       },
     },
     {
-      label: 'Pending',
       value: 'pending',
+      label: 'AI pending',
+      color: commentStatusById.PENDING.color,
+      icon: 'ri:robot-2-line',
       whereClause: {
         OR: [{ status: 'PENDING' }, { status: 'HUMAN_PENDING' }],
       },
-      styles: {
+      classNames: {
+        filter: 'border-blue-500 bg-blue-500/20 text-blue-400',
+      },
+    },
+    {
+      value: 'human-pending',
+      label: 'Human needed',
+      color: commentStatusById.HUMAN_PENDING.color,
+      icon: 'ri:user-search-line',
+      whereClause: { status: 'HUMAN_PENDING' },
+      classNames: {
         filter: 'border-blue-500 bg-blue-500/20 text-blue-400',
-        badge: 'rounded-sm bg-blue-500/20 px-2 py-0.5 text-[12px] font-medium text-blue-500',
       },
     },
     {
-      label: 'Rejected',
       value: 'rejected',
+      label: commentStatusById.REJECTED.label,
+      color: commentStatusById.REJECTED.color,
+      icon: commentStatusById.REJECTED.icon,
       whereClause: {
         status: 'REJECTED',
       },
-      styles: {
+      classNames: {
         filter: 'border-red-500 bg-red-500/20 text-red-400',
-        badge: 'rounded-sm bg-red-500/20 px-2 py-0.5 text-[12px] font-medium text-red-500',
       },
     },
     {
       label: 'Suspicious',
       value: 'suspicious',
+      color: 'red',
+      icon: 'ri:close-circle-fill',
       whereClause: {
         suspicious: true,
       },
-      styles: {
+      classNames: {
         filter: 'border-red-500 bg-red-500/20 text-red-400',
-        badge: 'rounded-sm bg-red-500/20 px-2 py-0.5 text-[12px] font-medium text-red-500',
       },
     },
     {
-      label: 'Verified',
       value: 'verified',
+      label: commentStatusById.VERIFIED.label,
+      color: commentStatusById.VERIFIED.color,
+      icon: commentStatusById.VERIFIED.icon,
       whereClause: {
         status: 'VERIFIED',
       },
-      styles: {
+      classNames: {
         filter: 'border-blue-500 bg-blue-500/20 text-blue-400',
-        badge: 'rounded-sm bg-blue-500/20 px-2 py-0.5 text-[12px] font-medium text-blue-500',
       },
     },
     {
-      label: 'Approved',
       value: 'approved',
+      label: commentStatusById.APPROVED.label,
+      color: commentStatusById.APPROVED.color,
+      icon: commentStatusById.APPROVED.icon,
       whereClause: {
         status: 'APPROVED',
       },
-      styles: {
+      classNames: {
         filter: 'border-green-500 bg-green-500/20 text-green-400',
-        badge: 'rounded-sm bg-green-500/20 px-2 py-0.5 text-[12px] font-medium text-green-500',
       },
     },
     {
       label: 'Needs Review',
       value: 'needs-review',
+      color: 'yellow',
+      icon: 'ri:question-line',
       whereClause: {
         requiresAdminReview: true,
       },
-      styles: {
+      classNames: {
         filter: 'border-yellow-500 bg-yellow-500/20 text-yellow-400',
-        badge: 'rounded-sm bg-yellow-500/20 px-2 py-0.5 text-[12px] font-medium text-yellow-500',
       },
     },
   ] as const satisfies CommentStatusFilterInfo[]
@@ -123,10 +146,12 @@ export function getCommentStatusFilterValue(
   if (comment.suspicious) return 'suspicious'
 
   switch (comment.status) {
-    case 'PENDING':
-    case 'HUMAN_PENDING': {
+    case 'PENDING': {
       return 'pending'
     }
+    case 'HUMAN_PENDING': {
+      return 'human-pending'
+    }
     case 'VERIFIED': {
       return 'verified'
     }

web/src/constants/contactMethods.ts

@@ -0,0 +1,123 @@
+import { parsePhoneNumberWithError } from 'libphonenumber-js'
+
+import { makeHelpersForOptions } from '../lib/makeHelpersForOptions'
+import { transformCase } from '../lib/strings'
+
+type ContactMethodInfo<T extends string | null | undefined = string> = {
+  type: T
+  label: string
+  /** Notice that the first capture group is then used to format the value */
+  matcher: RegExp
+  formatter: (value: string) => string | null
+  icon: string
+}
+
+export const {
+  dataArray: contactMethods,
+  dataObject: contactMethodsById,
+  /** Use {@link formatContactMethod} instead */
+  getFn: getContactMethodInfo,
+} = makeHelpersForOptions(
+  'type',
+  (type): ContactMethodInfo<typeof type> => ({
+    type,
+    label: type ? transformCase(type, 'title') : String(type),
+    icon: 'ri:shield-fill',
+    matcher: /(.*)/,
+    formatter: (value) => value,
+  }),
+  [
+    {
+      type: 'email',
+      label: 'Email',
+      matcher: /mailto:(.+)/,
+      formatter: (value) => value,
+      icon: 'ri:mail-line',
+    },
+    {
+      type: 'telephone',
+      label: 'Telephone',
+      matcher: /tel:(.+)/,
+      formatter: (value) => {
+        return parsePhoneNumberWithError(value).formatInternational()
+      },
+      icon: 'ri:phone-line',
+    },
+    {
+      type: 'whatsapp',
+      label: 'WhatsApp',
+      matcher: /https?:\/\/(?:www\.)?wa\.me\/(.+)/,
+      formatter: (value) => {
+        return parsePhoneNumberWithError(value).formatInternational()
+      },
+      icon: 'ri:whatsapp-line',
+    },
+    {
+      type: 'telegram',
+      label: 'Telegram',
+      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)\/(.+)/,
+      formatter: (value) => `in/${value}`,
+      icon: 'ri:linkedin-box-line',
+    },
+    {
+      type: 'x',
+      label: 'X',
+      matcher: /https?:\/\/(?:www\.)?x\.com\/(.+)/,
+      formatter: (value) => `@${value}`,
+      icon: 'ri:twitter-x-line',
+    },
+    {
+      type: 'instagram',
+      label: 'Instagram',
+      matcher: /https?:\/\/(?:www\.)?instagram\.com\/(.+)/,
+      formatter: (value) => `@${value}`,
+      icon: 'ri:instagram-line',
+    },
+    {
+      type: 'matrix',
+      label: 'Matrix',
+      matcher: /https?:\/\/(?:www\.)?matrix\.to\/#\/(.+)/,
+      formatter: (value) => value,
+      icon: 'ri:hashtag',
+    },
+    {
+      type: 'bitcointalk',
+      label: 'BitcoinTalk',
+      matcher: /https?:\/\/(?:www\.)?bitcointalk\.org/,
+      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[]
+)
+
+export function formatContactMethod(url: string) {
+  for (const contactMethod of contactMethods) {
+    const captureGroup = url.match(contactMethod.matcher)?.[1]
+    if (!captureGroup) continue
+
+    const formattedValue = contactMethod.formatter(captureGroup)
+    if (!formattedValue) continue
+
+    return {
+      ...contactMethod,
+      formattedValue,
+    } as const
+  }
+
+  return { ...getContactMethodInfo('unknown'), formattedValue: url } as const
+}

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/karmaTransactionActions.ts

@@ -78,8 +78,8 @@ export const {
     },
     {
       value: 'MANUAL_ADJUSTMENT',
-      slug: 'manual-adjustment',
-      label: 'Manual adjustment',
+      slug: 'gift',
+      label: 'Gift',
       icon: 'ri:gift-line',
     },
   ] as const satisfies KarmaTransactionActionInfo<KarmaTransactionAction>[]

web/src/constants/notificationTypes.ts

@@ -46,11 +46,11 @@ export const {
       icon: 'ri:lightbulb-line',
     },
     // TODO: [KARMA_UNLOCK] Will be added later, when karma unloks are in the database, not in the code.
-    // {
-    //   id: 'KARMA_UNLOCK',
-    //   label: 'Karma unlock',
-    //   icon: 'ri:award-line',
-    // },
+    {
+      id: 'KARMA_CHANGE',
+      label: 'Karma recieved',
+      icon: 'ri:award-line',
+    },
     {
       id: 'ACCOUNT_STATUS_CHANGE',
       label: 'Change in account status',

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/constants/splashTexts.ts

@@ -14,4 +14,7 @@ export const splashTexts: string[] = [
   'Ditch the gatekeepers.',
   'Own your identity.',
   'Financial privacy matters.',
+  'Surveillance is the enemy of the soul.',
+  'Privacy is freedom.',
+  'Privacy is the freedom to try things out.',
 ]

web/src/constants/verificationStatus.ts

@@ -70,7 +70,7 @@ export const {
       description:
         'Thoroughly tested and verified by the team. But things might change, this is not a guarantee.',
       privacyPoints: 0,
-      trustPoints: 5,
+      trustPoints: 10,
       classNames: {
         icon: 'text-[#40e6c2]',
         badgeBig: 'bg-green-800/50 text-green-100',

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/BaseLayout.astro

@@ -1,8 +1,10 @@
 ---
+import AnnouncementBanner from '../components/AnnouncementBanner.astro'
 import BaseHead from '../components/BaseHead.astro'
 import Footer from '../components/Footer.astro'
 import Header from '../components/Header.astro'
 import { cn } from '../lib/cn'
+import { prisma } from '../lib/prisma'
 
 import type { AstroChildren } from '../lib/astro'
 import type { ComponentProps } from 'astro/types'
@@ -42,6 +44,31 @@ const {
 
 const actualErrors = [...errors, ...Astro.locals.banners.errors]
 const actualSuccess = [...success, ...Astro.locals.banners.successes]
+
+const currentDate = new Date()
+const announcement = await Astro.locals.banners.try(
+  'Unable to load announcements.',
+  () =>
+    prisma.announcement.findFirst({
+      where: {
+        isActive: true,
+        startDate: { lte: currentDate },
+        OR: [{ endDate: null }, { endDate: { gt: currentDate } }],
+      },
+      select: {
+        id: true,
+        content: true,
+        type: true,
+        link: true,
+        linkText: true,
+        startDate: true,
+        endDate: true,
+        isActive: true,
+      },
+      orderBy: [{ type: 'desc' }, { createdAt: 'desc' }],
+    }),
+  null
+)
 ---
 
 <html lang="en" transition:name="root" transition:animate="none">
@@ -51,6 +78,7 @@ const actualSuccess = [...success, ...Astro.locals.banners.successes]
     <BaseHead {...baseHeadProps} />
   </head>
   <body class={cn('bg-night-700 text-day-300 flex min-h-dvh flex-col *:shrink-0', className?.body)}>
+    {announcement && <AnnouncementBanner announcement={announcement} transition:name="header-announcement" />}
     <Header
       classNames={{
         nav: cn(

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/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/contactMethods.ts

@@ -1,60 +0,0 @@
-import { parsePhoneNumberWithError } from 'libphonenumber-js'
-
-type Formatter = {
-  id: string
-  matcher: RegExp
-  formatter: (value: string) => string | null
-}
-const formatters = [
-  {
-    id: 'email',
-    matcher: /mailto:(.*)/,
-    formatter: (value) => value,
-  },
-  {
-    id: 'telephone',
-    matcher: /tel:(.*)/,
-    formatter: (value) => {
-      return parsePhoneNumberWithError(value).formatInternational()
-    },
-  },
-  {
-    id: 'whatsapp',
-    matcher: /https?:\/\/wa\.me\/(.*)\/?/,
-    formatter: (value) => {
-      return parsePhoneNumberWithError(value).formatInternational()
-    },
-  },
-  {
-    id: 'telegram',
-    matcher: /https?:\/\/t\.me\/(.*)\/?/,
-    formatter: (value) => `t.me/${value}`,
-  },
-  {
-    id: 'linkedin',
-    matcher: /https?:\/\/(?:www\.)?linkedin\.com\/(?:in|company)\/(.*)\/?/,
-    formatter: (value) => `in/${value}`,
-  },
-  {
-    id: 'website',
-    matcher: /https?:\/\/(?:www\.)?((?:[a-zA-Z0-9-]+\.)+[a-zA-Z]+)/,
-    formatter: (value) => value,
-  },
-] as const satisfies Formatter[]
-
-export function formatContactMethod(url: string) {
-  for (const formatter of formatters) {
-    const captureGroup = url.match(formatter.matcher)?.[1]
-    if (!captureGroup) continue
-
-    const formattedValue = formatter.formatter(captureGroup)
-    if (!formattedValue) continue
-
-    return {
-      type: formatter.id,
-      formattedValue,
-    } as const
-  }
-
-  return null
-}

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' | 'moderator' | 'verified'
 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'))) &&
-        !context.locals.user.verifier
+        (permissions === 'moderator' || (Array.isArray(permissions) && permissions.includes('moderator'))) &&
+        !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/notifications.ts

@@ -1,6 +1,7 @@
 import { accountStatusChangesById } from '../constants/accountStatusChange'
 import { commentStatusChangesById } from '../constants/commentStatusChange'
 import { eventTypesById } from '../constants/eventTypes'
+import { getKarmaTransactionActionInfo } from '../constants/karmaTransactionActions'
 import { serviceVerificationStatusChangesById } from '../constants/serviceStatusChange'
 import { serviceSuggestionStatusChangesById } from '../constants/suggestionStatusChange'
 
@@ -16,6 +17,12 @@ export function makeNotificationTitle(
       aboutCommentStatusChange: true
       aboutServiceVerificationStatusChange: true
       aboutSuggestionStatusChange: true
+      aboutKarmaTransaction: {
+        select: {
+          points: true
+          action: true
+        }
+      }
       aboutComment: {
         select: {
           author: { select: { id: true } }
@@ -137,6 +144,13 @@ export function makeNotificationTitle(
     // case 'KARMA_UNLOCK': {
     //   return 'New karma level unlocked'
     // }
+    case 'KARMA_CHANGE': {
+      if (!notification.aboutKarmaTransaction) return 'Your karma has changed'
+      const { points, action } = notification.aboutKarmaTransaction
+      const sign = points > 0 ? '+' : ''
+      const karmaInfo = getKarmaTransactionActionInfo(action)
+      return `${sign}${points.toLocaleString()} karma for ${karmaInfo.label}`
+    }
     case 'ACCOUNT_STATUS_CHANGE': {
       if (!notification.aboutAccountStatusChange) return 'Your account status has been updated'
       const accountStatusChange = accountStatusChangesById[notification.aboutAccountStatusChange]
@@ -165,6 +179,11 @@ export function makeNotificationContent(
   notification: Prisma.NotificationGetPayload<{
     select: {
       type: true
+      aboutKarmaTransaction: {
+        select: {
+          description: true
+        }
+      }
       aboutComment: {
         select: {
           content: true
@@ -187,6 +206,10 @@ export function makeNotificationContent(
   switch (notification.type) {
     // TODO: [KARMA_UNLOCK] Will be added later, when karma unloks are in the database, not in the code.
     // case 'KARMA_UNLOCK':
+    case 'KARMA_CHANGE': {
+      if (!notification.aboutKarmaTransaction) return null
+      return notification.aboutKarmaTransaction.description
+    }
     case 'SUGGESTION_STATUS_CHANGE':
     case 'ACCOUNT_STATUS_CHANGE':
     case 'SERVICE_VERIFICATION_STATUS_CHANGE': {
@@ -280,6 +303,9 @@ export function makeNotificationLink(
     // case 'KARMA_UNLOCK': {
     //   return `${origin}/account#karma-unlocks`
     // }
+    case 'KARMA_CHANGE': {
+      return `${origin}/account#karma-transactions`
+    }
     case 'ACCOUNT_STATUS_CHANGE': {
       return `${origin}/account#account-status`
     }

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/tailwind.ts

@@ -0,0 +1,8 @@
+import { parseIntWithFallback } from './numbers'
+
+const TW_SIZING_TO_PX_RATIO = 4
+
+export function getSizePxFromTailwindClasses(className: string, fallbackPxSize: number) {
+  const twSizing = /(?: |^|\n)(?:(?:size-(\d+))|(?:w-(\d+))|(?:h-(\d+)))(?: |$|\n)/.exec(className)?.[1]
+  return parseIntWithFallback(twSizing, fallbackPxSize / TW_SIZING_TO_PX_RATIO) * TW_SIZING_TO_PX_RATIO
+}

web/src/lib/userSecretToken.ts

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

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/500.astro

@@ -39,16 +39,19 @@ const {
   </p>
   {
     (DEPLOYMENT_MODE !== 'production' || Astro.locals.user?.admin) && (
-      <div class="bg-night-800 mt-4 block max-h-96 min-h-32 w-full max-w-4xl overflow-auto rounded-lg p-4 text-left text-sm break-words whitespace-pre-wrap">
-        {error instanceof Error
-          ? error.message
-          : error === undefined
-            ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-              message || 'undefined'
-            : typeof error === 'object'
-              ? JSON.stringify(error, null, 2)
-              : String(error as unknown)}
-      </div>
+      <div
+        class="bg-night-800 mt-4 block max-h-96 min-h-32 w-full max-w-4xl overflow-auto rounded-lg p-4 text-left text-sm wrap-anywhere whitespace-pre-wrap"
+        set:text={
+          error instanceof Error
+            ? error.message
+            : error === undefined
+              ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                message || 'undefined'
+              : typeof error === 'object'
+                ? JSON.stringify(error, null, 2)
+                : String(error as unknown)
+        }
+      />
     )
   }
 

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.
@@ -187,23 +190,22 @@ Some reviews may be spam or fake. Read comments carefully and **always do your o
 
 To **see comments waiting for moderation**, toggle the switch in the comments section. These comments show up with a yellow background and a "pending" label.
 
-## Support the project
+## Support
 
-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:
-  - `88V2Xi2mvcu3NdnHkVeZGyPtACg2w3iXZdUMJugUiPvFQHv5mVkih3o43ceVGz6cVs9uTBMt4MRMVW2xFgfGdh8DTCQ7vtp`
+<DonationAddress
+  cryptoName="Monero"
+  cryptoIcon="monero"
+  address="86nkJeHWarEYZJh3gcPGKcQeueKbq2uRRC2NX6kopBpdHFfY1j4vmrVAwRG1T4pNBwBwfJ4U4USLUZ6CjDtacp8x4y8v3rq"
+/>
 
 ## Contact
 
-You can contact via direct chat or via email.
+You can contact via direct chat:
 
 - [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
 
 This website is strictly for informational purposes regarding privacy technology in the cryptocurrency space. We unequivocally condemn and do not endorse, support, or facilitate money laundering, terrorist financing, or any other illegal financial activities. The use of any information or service mentioned herein for such purposes is strictly prohibited and contrary to the core principles of this project.

web/src/pages/access-denied.astro

@@ -34,9 +34,10 @@ if (reasonType === 'admin-required' && Astro.locals.user?.admin) {
   <h1 class="font-title mt-8 text-3xl font-semibold tracking-wide text-white sm:mt-12 sm:text-5xl">
     Access denied
   </h1>
-  <p class="mt-8 text-lg leading-7 text-balance whitespace-pre-wrap text-red-400">
-    {reason}
-  </p>
+  <p
+    class="mt-8 text-lg leading-7 text-balance wrap-anywhere whitespace-pre-wrap text-red-400"
+    set:text={reason}
+  />
 
   <div class="mt-12 flex flex-wrap items-center justify-center">
     <a href="/" class="focus-visible:outline-primary group flex items-center gap-2 px-3.5 py-2.5 text-white">