Release 2025-05-25-GgNU

.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,55 @@
+---
+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.
+- After making changes to the [schema.prisma](mdc:web/prisma/schema.prisma) database or [faker.ts](mdc:web/scripts/faker.ts), you can run `npm run db-reset` (from `/web/` folder) [package.json](mdc:web/package.json).
+- 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

@@ -12,7 +12,7 @@
     "db-push": "prisma migrate dev",
     "db-triggers": "just import-triggers",
     "db-update": "prisma migrate dev && just import-triggers",
-    "db-reset": "prisma migrate reset && prisma migrate dev && just import-triggers && tsx scripts/faker.ts",
+    "db-reset": "prisma migrate reset -f && prisma migrate dev && just import-triggers && tsx scripts/faker.ts",
     "db-fill": "tsx scripts/faker.ts",
     "db-fill-clean": "tsx scripts/faker.ts --cleanup",
     "format": "prettier --write .",
@@ -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/migrations/20250525101939_archieved/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "ServiceVisibility" ADD VALUE 'ARCHIVED';

web/prisma/schema.prisma

@@ -87,6 +87,7 @@ enum ServiceVisibility {
   PUBLIC
   UNLISTED
   HIDDEN
+  ARCHIVED
 }
 
 enum Currency {
@@ -120,8 +121,8 @@ enum AccountStatusChange {
   ADMIN_FALSE
   VERIFIED_TRUE
   VERIFIED_FALSE
-  VERIFIER_TRUE
-  VERIFIER_FALSE
+  MODERATOR_TRUE
+  MODERATOR_FALSE
   SPAMMER_TRUE
   SPAMMER_FALSE
 }
@@ -135,6 +136,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 +209,8 @@ model Notification {
   aboutCommentStatusChange             CommentStatusChange?
   aboutServiceVerificationStatusChange ServiceVerificationStatusChange?
   aboutSuggestionStatusChange          ServiceSuggestionStatusChange?
+  aboutKarmaTransaction                KarmaTransaction?                @relation(fields: [aboutKarmaTransactionId], references: [id])
+  aboutKarmaTransactionId              Int?
 
   @@index([userId])
   @@index([read])
@@ -229,6 +233,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 +398,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 +465,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 +530,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 +622,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

@@ -2,18 +2,20 @@ import crypto from 'crypto'
 
 import { faker } from '@faker-js/faker'
 import {
+  AnnouncementType,
   AttributeCategory,
   AttributeType,
   CommentStatus,
   Currency,
+  EventType,
   PrismaClient,
   ServiceSuggestionStatus,
   ServiceSuggestionType,
+  ServiceUserRole,
   VerificationStatus,
   type Prisma,
-  EventType,
   type User,
-  ServiceUserRole,
+  type ServiceVisibility,
 } from '@prisma/client'
 import { uniqBy } from 'lodash-es'
 import { generateUsername } from 'unique-username-generator'
@@ -84,7 +86,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,
@@ -610,7 +612,12 @@ const generateFakeEvent = (serviceId: number) => {
 }
 
 const generateFakeService = (users: User[]) => {
-  const status = faker.helpers.arrayElement(Object.values(VerificationStatus))
+  const status = faker.helpers.weightedArrayElement<VerificationStatus>([
+    { weight: 20, value: 'VERIFICATION_SUCCESS' },
+    { weight: 30, value: 'APPROVED' },
+    { weight: 40, value: 'COMMUNITY_CONTRIBUTED' },
+    { weight: 10, value: 'VERIFICATION_FAILED' },
+  ])
   const name = faker.helpers.arrayElement(serviceNames)
   const slug = `${faker.helpers.slugify(name).toLowerCase()}-${faker.string.alphanumeric({ length: 6, casing: 'lower' })}`
 
@@ -622,6 +629,12 @@ const generateFakeService = (users: User[]) => {
     overallScore: 0,
     privacyScore: 0,
     trustScore: 0,
+    serviceVisibility: faker.helpers.weightedArrayElement<ServiceVisibility>([
+      { weight: 80, value: 'PUBLIC' },
+      { weight: 10, value: 'UNLISTED' },
+      { weight: 5, value: 'HIDDEN' },
+      { weight: 5, value: 'ARCHIVED' },
+    ]),
     verificationStatus: status,
     verificationSummary:
       status === 'VERIFICATION_SUCCESS' || status === 'VERIFICATION_FAILED' ? faker.lorem.paragraph() : null,
@@ -637,22 +650,22 @@ const generateFakeService = (users: User[]) => {
       status === 'VERIFICATION_SUCCESS' || status === 'VERIFICATION_FAILED' ? faker.lorem.paragraphs() : null,
     referral: `?ref=${faker.string.alphanumeric(6)}`,
     acceptedCurrencies: faker.helpers.arrayElements(Object.values(Currency), { min: 1, max: 5 }),
-    serviceUrls: Array.from({ length: faker.number.int({ min: 1, max: 3 }) }, () => faker.internet.url()),
-    tosUrls: Array.from({ length: faker.number.int({ min: 0, max: 2 }) }, () => faker.internet.url()),
-    onionUrls: Array.from(
-      { length: faker.number.int({ min: 0, max: 2 }) },
-      () => `http://${faker.string.alphanumeric({ length: 56, casing: 'lower' })}.onion`
+    serviceUrls: faker.helpers.multiple(() => faker.internet.url(), { count: { min: 1, max: 3 } }),
+    tosUrls: faker.helpers.multiple(() => faker.internet.url(), { count: { min: 1, max: 2 } }),
+    onionUrls: faker.helpers.multiple(
+      () => `http://${faker.string.alphanumeric({ length: 56, casing: 'lower' })}.onion`,
+      { count: { min: 0, max: 2 } }
     ),
-    i2pUrls: Array.from(
-      { length: faker.number.int({ min: 0, max: 2 }) },
-      () => `http://${faker.string.alphanumeric({ length: 52, casing: 'lower' })}.b32.i2p`
+    i2pUrls: faker.helpers.multiple(
+      () => `http://${faker.string.alphanumeric({ length: 52, casing: 'lower' })}.b32.i2p`,
+      { count: { min: 0, max: 2 } }
     ),
     imageUrl: `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=random&format=svg`,
     listedAt: faker.date.past(),
     verifiedAt: status === VerificationStatus.VERIFICATION_SUCCESS ? faker.date.past() : null,
     tosReview: faker.helpers.arrayElement(tosReviewExamples),
     tosReviewAt: faker.date.past(),
-    userSentiment: Math.random() > 0.2 ? generateFakeUserSentiment() : undefined,
+    userSentiment: faker.helpers.maybe(() => generateFakeUserSentiment(), { probability: 0.8 }),
     userSentimentAt: faker.date.recent(),
   } as const satisfies Prisma.ServiceCreateInput
 }
@@ -844,40 +857,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 +911,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 +935,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 +945,7 @@ const specialUsersData = {
     envToken: 'DEV_NORMAL_USER_SECRET_TOKEN',
     defaultToken: 'normal',
     admin: false,
-    verifier: false,
+    moderator: false,
     verified: false,
   },
   spam: {
@@ -935,7 +953,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 +999,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 +1038,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 +1318,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 +1335,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',
@@ -115,9 +106,13 @@ export const adminServiceActions = {
   update: defineProtectedAction({
     accept: 'form',
     permissions: 'admin',
-    input: serviceSchemaBase.transform(addSlugIfMissing),
+    input: serviceSchemaBase
+      .extend({
+        removeImage: z.boolean().optional(),
+      })
+      .transform(addSlugIfMissing),
     handler: async (input) => {
-      const { id, categories, attributes, imageFile, ...data } = input
+      const { id, categories, attributes, imageFile, removeImage, ...data } = input
 
       const existing = await prisma.service.findUnique({
         where: {
@@ -133,7 +128,11 @@ export const adminServiceActions = {
         })
       }
 
-      const imageUrl = imageFile ? await saveFileLocally(imageFile, imageFile.name) : undefined
+      const imageUrl = removeImage
+        ? null
+        : imageFile
+          ? await saveFileLocally(imageFile, imageFile.name)
+          : undefined
 
       // Get existing attributes and categories to compute differences
       const existingService = await prisma.service.findUnique({
@@ -195,10 +194,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 +214,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 +237,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' ||
@@ -149,41 +150,24 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
     checked={comment.suspicious}
   />
 
-  <div class="comment-header flex items-center gap-2 text-sm">
+  <div class="comment-header scrollbar-w-none flex items-center gap-2 overflow-auto text-sm">
     <label for={`collapse-${comment.id.toString()}`} class="cursor-pointer text-zinc-500 hover:text-zinc-300">
       <span class="collapse-symbol text-xs"></span>
       <span class="sr-only">Toggle comment visibility</span>
     </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 shrink-0', iconClassName[index])} />
+              ))}
+              <span class="truncate text-sm leading-none">{option.label}</span>
+            </label>
+          )
+        })
       }
     </div>
   </div>

web/src/components/InputFile.astro

@@ -16,17 +16,35 @@ type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId'> &
   }
 }
 
-const { accept, disabled, multiple, removeCheckbox, ...wrapperProps } = Astro.props
+const { accept, disabled, multiple, removeCheckbox, classNames, ...wrapperProps } = Astro.props
 
 const inputId = Astro.locals.makeId(`input-${wrapperProps.name}`)
 const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
 ---
 
-<InputWrapper inputId={inputId} {...wrapperProps}>
+<InputWrapper
+  inputId={inputId}
+  classNames={{
+    ...classNames,
+    description: cn(classNames?.description, '[&:is(:has([data-remove-checkbox]:checked)_~_*)]:hidden'),
+  }}
+  {...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/InputImageFile.astro

@@ -2,16 +2,24 @@
 import { cn } from '../lib/cn'
 import { ACCEPTED_IMAGE_TYPES } from '../lib/zodUtils'
 
+import Button from './Button.astro'
 import InputFile from './InputFile.astro'
+import Tooltip from './Tooltip.astro'
 
 import type { ComponentProps } from 'astro/types'
 
 type Props = Omit<ComponentProps<typeof InputFile>, 'accept'> & {
   square?: boolean
   value?: string | null
+  downloadButton?: boolean
 }
 
-const { class: className, square, value, ...inputFileProps } = Astro.props
+const { class: className, square, value, downloadButton, ...inputFileProps } = Astro.props
+
+function makeDownloadFilename(value: string) {
+  const url = new URL(value, Astro.url.origin)
+  return url.pathname.split('/').pop() ?? 'service-image'
+}
 ---
 
 <div class={cn('flex flex-wrap items-center justify-center gap-4', className)} data-preview-image>
@@ -30,6 +38,31 @@ const { class: className, square, value, ...inputFileProps } = Astro.props
       '[&:is(:has([data-remove-checkbox]:checked)_~_*)]:hidden'
     )}
   />
+  {
+    downloadButton && value && (
+      <Tooltip
+        text="Download"
+        classNames={{
+          tooltip: 'min-2xs:[&:is(:has([data-remove-checkbox]:checked)_~_*_*)]:hidden',
+        }}
+      >
+        <Button
+          as="a"
+          href={value}
+          download={makeDownloadFilename(value)}
+          icon="ri:download-line"
+          size="sm"
+          label="Download"
+          class={cn(
+            'bg-night-600 border-night-400 text-day-200 2xs:[&:is(:has([data-remove-checkbox]:not(:checked))_~_*_*)]:h-24 2xs:[&:is(:has([data-remove-checkbox]:not(:checked))_~_*_*)]:px-0 2xs:[&:is(:has([data-remove-checkbox]:not(:checked))_~_*_*)]:w-8 shrink-0 rounded-md border'
+          )}
+          classNames={{
+            label: '2xs:[&:is(:has([data-remove-checkbox]:not(:checked))_~_*_*)]:hidden block ',
+          }}
+        />
+      </Tooltip>
+    )
+  }
 </div>
 
 <script>

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,10 @@ type Props = HTMLAttributes<'div'> & {
   error?: string[] | string
   icon?: string
   inputId?: string
+  hideLabel?: boolean
+  classNames?: {
+    description?: string
+  }
 }
 
 const {
@@ -30,24 +34,29 @@ const {
   icon,
   class: className,
   inputId,
+  hideLabel,
+  classNames,
   ...htmlProps
 } = Astro.props
 
 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>
+<fieldset class={cn('min-w-0 space-y-1', className)} {...htmlProps}>
+  {
+    !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 />
 
@@ -66,7 +75,12 @@ const hasError = !!error && error.length > 0
 
   {
     !!description && (
-      <div class="prose prose-sm prose-invert prose-a:text-current prose-a:font-normal hover:prose-a:text-day-300 prose-a:transition-colors text-day-400 max-w-none text-xs text-pretty">
+      <div
+        class={cn(
+          'prose prose-sm prose-invert prose-a:text-current prose-a:font-normal hover:prose-a:text-day-300 prose-a:transition-colors text-day-400 max-w-none text-xs text-pretty',
+          classNames?.description
+        )}
+      >
         <Markdown content={description} />
       </div>
     )

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,14 @@
 ---
 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 { serviceVisibilitiesById } from '../constants/serviceVisibility'
 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'
@@ -26,6 +26,7 @@ type Props = HTMLAttributes<'a'> & {
       kycLevel: true
       imageUrl: true
       verificationStatus: true
+      serviceVisibility: true
       acceptedCurrencies: true
       categories: {
         select: {
@@ -44,11 +45,11 @@ const {
     slug,
     description,
     overallScore,
-
     kycLevel,
     imageUrl,
     categories,
     verificationStatus,
+    serviceVisibility,
     acceptedCurrencies,
   },
   class: className,
@@ -70,17 +71,23 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
   href={Element === 'a' ? `/service/${slug}` : undefined}
   {...aProps}
   class={cn(
-    'border-night-600 bg-night-800 flex flex-col gap-(--gap) rounded-xl border p-(--gap) [--gap:calc(var(--spacing)*3)]',
+    'border-night-600 group/card bg-night-800 flex flex-col gap-(--gap) rounded-xl border p-(--gap) [--gap:calc(var(--spacing)*3)]',
+    (serviceVisibility === 'ARCHIVED' || verificationStatus === 'VERIFICATION_FAILED') &&
+      'opacity-75 transition-opacity hover:opacity-100 focus-visible:opacity-100',
     className
   )}
 >
   <!-- 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"
+      class={cn(
+        'size-12 shrink-0 rounded-sm object-contain text-white',
+        (serviceVisibility === 'ARCHIVED' || verificationStatus === 'VERIFICATION_FAILED') &&
+          'grayscale-67 transition-all group-hover/card:grayscale-0 group-focus-visible/card:grayscale-0'
+      )}
       width={48}
       height={48}
     />
@@ -89,11 +96,42 @@ 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">
+            <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>
+          )
+        }{
+          serviceVisibility === 'ARCHIVED' && (
+            <Tooltip
+              text={serviceVisibilitiesById.ARCHIVED.label}
+              position="right"
+              class="-my-2 shrink-0 whitespace-nowrap"
+            >
               <Icon
                 is:inline={inlineIcons}
-                name={statusIcon.icon}
-                class={cn('inline-block size-6 shrink-0 rounded-lg p-1', statusIcon.classNames.icon)}
+                name={serviceVisibilitiesById.ARCHIVED.icon}
+                class={cn(
+                  'inline-block size-6 shrink-0 rounded-lg p-1 align-[-0.37em]',
+                  serviceVisibilitiesById.ARCHIVED.iconClass
+                )}
               />
             </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/serviceVisibility.ts

@@ -8,6 +8,7 @@ type ServiceVisibilityInfo<T extends string | null | undefined = string> = {
   slug: string
   label: string
   description: string
+  longDescription: string
   icon: string
   iconClass: string
 }
@@ -28,6 +29,7 @@ export const {
     slug: value ? value.toLowerCase() : '',
     label: value ? transformCase(value, 'title') : String(value),
     description: '',
+    longDescription: '',
     icon: 'ri:eye-line',
     iconClass: 'text-current/60',
   }),
@@ -37,6 +39,7 @@ export const {
       slug: 'public',
       label: 'Public',
       description: 'Listed in search and browse.',
+      longDescription: 'Listed in search and browse.',
       icon: 'ri:global-line',
       iconClass: 'text-green-500',
     },
@@ -45,6 +48,7 @@ export const {
       slug: 'unlisted',
       label: 'Unlisted',
       description: 'Only accessible via direct link.',
+      longDescription: "Unlisted service, only accessible via direct link and won't appear in searches.",
       icon: 'ri:link',
       iconClass: 'text-yellow-500',
     },
@@ -53,8 +57,19 @@ export const {
       slug: 'hidden',
       label: 'Hidden',
       description: 'Only visible to moderators.',
+      longDescription: 'Hidden service, only visible to moderators.',
       icon: 'ri:lock-line',
       iconClass: 'text-red-500',
     },
+    {
+      value: 'ARCHIVED',
+      slug: 'archived',
+      label: 'Archived',
+      description: 'No ceased operations.',
+      longDescription:
+        'Archived service, no longer exists or ceased operations. Information may be outdated.',
+      icon: 'ri:archive-line',
+      iconClass: 'text-day-100',
+    },
   ] as const satisfies ServiceVisibilityInfo<ServiceVisibility>[]
 )

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

@@ -2,6 +2,7 @@ import { orderBy } from 'lodash-es'
 
 import { getAttributeCategoryInfo } from '../constants/attributeCategories'
 import { getAttributeTypeInfo } from '../constants/attributeTypes'
+import { serviceVisibilitiesById } from '../constants/serviceVisibility'
 import { READ_MORE_SENTENCE_LINK, verificationStatusesByValue } from '../constants/verificationStatus'
 
 import { formatDateShort } from './timeAgo'
@@ -36,6 +37,7 @@ export function makeNonDbAttributes(
   service: Prisma.ServiceGetPayload<{
     select: {
       verificationStatus: true
+      serviceVisibility: true
       isRecentlyListed: true
       listedAt: true
       createdAt: true
@@ -134,6 +136,16 @@ export function makeNonDbAttributes(
         },
       ],
     },
+    {
+      title: serviceVisibilitiesById.ARCHIVED.label,
+      show: service.serviceVisibility === 'ARCHIVED',
+      type: 'WARNING',
+      category: 'TRUST',
+      description: serviceVisibilitiesById.ARCHIVED.longDescription,
+      privacyPoints: 0,
+      trustPoints: 0,
+      links: [],
+    },
     {
       title: 'Recently listed',
       show: service.isRecentlyListed,

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
+}