release-34

.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 [seed.ts](mdc:web/prisma/seed.ts), you run `npm run db-reset` (from `/web/` folder) [package.json](mdc:web/package.json). And never do the migrations manually.
+- 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 [seed.ts](mdc:web/prisma/seed.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,312 +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',
-      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>
-  ```
-
-- 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

README.md

@@ -23,8 +23,7 @@ cd web
 nvm install
 npm i
 cp -n .env.example .env
-npm run db-push
+npm run db-reset
-npm run db-fill-clean
 ```
 
 Now open the [.env](web/.env) file and fill in the missing values.

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

web/README.md

@@ -6,24 +6,23 @@
 
 All commands are run from the root of the project, from a terminal:
 
-| Command                   | Action                                                               |
+| Command                   | Action                                                              |
-| :------------------------ | :------------------------------------------------------------------- |
+| :------------------------ | :------------------------------------------------------------------ |
-| `nvm install`             | Installs and uses the correct version of node                        |
+| `nvm install`             | Installs and uses the correct version of node                       |
-| `npm install`             | Installs dependencies                                                |
+| `npm install`             | Installs dependencies                                               |
-| `npm run dev`             | Starts local dev server at `localhost:4321`                          |
+| `npm run dev`             | Starts local dev server at `localhost:4321`                         |
-| `npm run build`           | Build your production site to `./dist/`                              |
+| `npm run build`           | Build your production site to `./dist/`                             |
-| `npm run preview`         | Preview your build locally, before deploying                         |
+| `npm run preview`         | Preview your build locally, before deploying                        |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check`                     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check`                    |
-| `npm run astro -- --help` | Get help using the Astro CLI                                         |
+| `npm run astro -- --help` | Get help using the Astro CLI                                        |
-| `npm run db-admin`        | Runs Prisma Studio (database admin)                                  |
+| `npm run db-admin`        | Runs Prisma Studio (database admin)                                 |
-| `npm run db-gen`          | Generates the Prisma client without running migrations               |
+| `npm run db-gen`          | Generates the Prisma client without running migrations              |
-| `npm run db-push`         | Updates the database schema with latest changes (development mode).  |
+| `npm run db-push`         | Updates the database schema with latest changes (development mode). |
-| `npm run db-fill`         | Fills the database with fake data (development mode)                 |
+| `npm run db-seed`         | Seeds the database with fake data (development mode)                |
-| `npm run db-fill-clean`   | Cleans existing data and fills with new fake data (development mode) |
+| `npm run format`          | Formats the code with Prettier                                      |
-| `npm run format`          | Formats the code with Prettier                                       |
+| `npm run lint`            | Lints the code with ESLint                                          |
-| `npm run lint`            | Lints the code with ESLint                                           |
+| `npm run lint-fix`        | Lints the code with ESLint and fixes the issues                     |
-| `npm run lint-fix`        | Lints the code with ESLint and fixes the issues                      |
 
-> **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-seed` support the `-- --services=n` flag, where n is the number of fake services to add. It defaults to 10. For example, `npm run db-seed -- --services=5` will add 5 fake services.
 
-> **Note**: `db-fill` and `db-fill-clean` create default users with tokens: `admin`, `moderator`, `verified`, `normal` (override with `DEV_*****_USER_SECRET_TOKEN` env vars)
+> **Note**: `db-seed` create default users with tokens: `admin`, `moderator`, `verified`, `normal` (override with `DEV_*****_USER_SECRET_TOKEN` env vars)

web/package.json

@@ -12,13 +12,15 @@
     "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",
-    "db-fill": "tsx scripts/faker.ts",
+    "db-seed": "prisma db seed",
-    "db-fill-clean": "tsx scripts/faker.ts --cleanup",
     "format": "prettier --write .",
     "lint": "eslint .",
     "lint-fix": "eslint . --fix && prettier --write ."
   },
+  "prisma": {
+    "seed": "tsx prisma/seed.ts"
+  },
   "dependencies": {
     "@astrojs/check": "0.9.4",
     "@astrojs/db": "0.14.14",

web/prisma/migrations/20250525101939_archieved/migration.sql

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

web/prisma/migrations/20250526094537_service_internal_notes/migration.sql

@@ -0,0 +1,26 @@
+-- CreateTable
+CREATE TABLE "InternalServiceNote" (
+    "id" SERIAL NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "serviceId" INTEGER NOT NULL,
+    "addedByUserId" INTEGER,
+
+    CONSTRAINT "InternalServiceNote_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "InternalServiceNote_serviceId_idx" ON "InternalServiceNote"("serviceId");
+
+-- CreateIndex
+CREATE INDEX "InternalServiceNote_addedByUserId_idx" ON "InternalServiceNote"("addedByUserId");
+
+-- CreateIndex
+CREATE INDEX "InternalServiceNote_createdAt_idx" ON "InternalServiceNote"("createdAt");
+
+-- AddForeignKey
+ALTER TABLE "InternalServiceNote" ADD CONSTRAINT "InternalServiceNote_serviceId_fkey" FOREIGN KEY ("serviceId") REFERENCES "Service"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "InternalServiceNote" ADD CONSTRAINT "InternalServiceNote_addedByUserId_fkey" FOREIGN KEY ("addedByUserId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

web/prisma/schema.prisma

@@ -87,6 +87,7 @@ enum ServiceVisibility {
   PUBLIC
   UNLISTED
   HIDDEN
+  ARCHIVED
 }
 
 enum Currency {
@@ -376,6 +377,7 @@ model Service {
   attributes             ServiceAttribute[]
   verificationSteps      VerificationStep[]
   suggestions            ServiceSuggestion[]
+  internalNotes          InternalServiceNote[]        @relation("ServiceRecievedNotes")
 
   onEventCreatedForServices       NotificationPreferences[] @relation("onEventCreatedForServices")
   onRootCommentCreatedForServices NotificationPreferences[] @relation("onRootCommentCreatedForServices")
@@ -441,6 +443,7 @@ model Attribute {
 
 model InternalUserNote {
   id        Int      @id @default(autoincrement())
+  /// Markdown
   content   String
   createdAt DateTime @default(now())
   updatedAt DateTime @default(now()) @updatedAt
@@ -455,6 +458,23 @@ model InternalUserNote {
   @@index([createdAt])
 }
 
+model InternalServiceNote {
+  id        Int      @id @default(autoincrement())
+  /// Markdown
+  content   String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @default(now()) @updatedAt
+
+  service       Service @relation("ServiceRecievedNotes", fields: [serviceId], references: [id], onDelete: Cascade)
+  serviceId     Int
+  addedByUser   User?   @relation("UserAddedServiceNotes", fields: [addedByUserId], references: [id], onDelete: SetNull)
+  addedByUserId Int?
+
+  @@index([serviceId])
+  @@index([addedByUserId])
+  @@index([createdAt])
+}
+
 model User {
   id              Int     @id @default(autoincrement())
   name            String  @unique
@@ -481,6 +501,7 @@ model User {
   suggestionMessages       ServiceSuggestionMessage[]
   internalNotes            InternalUserNote[]           @relation("UserRecievedNotes")
   addedInternalNotes       InternalUserNote[]           @relation("UserAddedNotes")
+  addedServiceNotes        InternalServiceNote[]        @relation("UserAddedServiceNotes")
   verificationRequests     ServiceVerificationRequest[]
   notifications            Notification[]               @relation("NotificationOwner")
   notificationPreferences  NotificationPreferences?

web/prisma/seed.ts

@@ -1,20 +1,23 @@
 import crypto from 'crypto'
+import { execSync } from 'node:child_process'
+import { parseArgs } from 'node:util'
 
 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,
-  AnnouncementType,
+  ServiceSuggestionType,
 } from '@prisma/client'
 import { uniqBy } from 'lodash-es'
 import { generateUsername } from 'unique-username-generator'
@@ -95,20 +98,6 @@ async function createAccount(preGeneratedToken?: string) {
   return { token, user }
 }
 
-// Parse command line arguments
-const args = process.argv.slice(2)
-const shouldCleanup = args.includes('--cleanup') || args.includes('-c')
-const onlyCleanup = args.includes('--only-cleanup') || args.includes('-oc')
-
-// Parse number of services from --services or -s flag
-const servicesArg = args.find((arg) => arg.startsWith('--services=') || arg.startsWith('-s='))
-const numServices = parseIntWithFallback(servicesArg?.split('=')[1], 100) // Default to 100 if not specified
-
-if (isNaN(numServices) || numServices < 1) {
-  console.error('❌ Invalid number of services specified. Must be a positive number.')
-  process.exit(1)
-}
-
 const prisma = new PrismaClient()
 
 const generateFakeAttribute = () => {
@@ -611,7 +600,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' })}`
 
@@ -623,6 +617,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,
@@ -636,25 +636,37 @@ const generateFakeService = (users: User[]) => {
     },
     verificationProofMd:
       status === 'VERIFICATION_SUCCESS' || status === 'VERIFICATION_FAILED' ? faker.lorem.paragraphs() : null,
-    referral: `?ref=${faker.string.alphanumeric(6)}`,
+    referral: faker.helpers.arrayElement([
+      `?ref=${faker.string.alphanumeric(6)}`,
+      `/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()),
+    serviceUrls: faker.helpers.multiple(() => faker.internet.url(), { count: { min: 1, max: 3 } }),
-    tosUrls: Array.from({ length: faker.number.int({ min: 0, max: 2 }) }, () => faker.internet.url()),
+    tosUrls: faker.helpers.multiple(() => faker.internet.url(), { count: { min: 1, max: 2 } }),
-    onionUrls: Array.from(
+    onionUrls: faker.helpers.multiple(
-      { length: faker.number.int({ min: 0, max: 2 }) },
+      () => `http://${faker.string.alphanumeric({ length: 56, casing: 'lower' })}.onion`,
-      () => `http://${faker.string.alphanumeric({ length: 56, casing: 'lower' })}.onion`
+      { count: { min: 0, max: 2 } }
     ),
-    i2pUrls: Array.from(
+    i2pUrls: faker.helpers.multiple(
-      { length: faker.number.int({ min: 0, max: 2 }) },
+      () => `http://${faker.string.alphanumeric({ length: 52, casing: 'lower' })}.b32.i2p`,
-      () => `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(),
+    internalNotes: faker.helpers.maybe(
+      () => ({
+        create: {
+          content: faker.lorem.paragraph(),
+          addedByUserId: faker.helpers.arrayElement(users.filter((user) => user.admin)).id,
+        },
+      }),
+      { probability: 0.33 }
+    ),
   } as const satisfies Prisma.ServiceCreateInput
 }
 
@@ -1003,359 +1015,378 @@ const generateFakeAnnouncement = () => {
   } as const satisfies Prisma.AnnouncementCreateInput
 }
 
-async function runFaker() {
+async function cleanup() {
-  await prisma.$transaction(
+  console.info('🧹 Cleaning up existing data...')
-    async (tx) => {
-      // ---- Clean up existing data if requested ----
-      if (shouldCleanup || onlyCleanup) {
-        console.info('🧹 Cleaning up existing data...')
 
-        try {
-          await tx.commentVote.deleteMany()
-          await tx.karmaTransaction.deleteMany()
-          await tx.comment.deleteMany()
-          await tx.serviceAttribute.deleteMany()
-          await tx.serviceContactMethod.deleteMany()
-          await tx.event.deleteMany()
-          await tx.verificationStep.deleteMany()
-          await tx.serviceSuggestionMessage.deleteMany()
-          await tx.serviceSuggestion.deleteMany()
-          await tx.serviceVerificationRequest.deleteMany()
-          await tx.service.deleteMany()
-          await tx.attribute.deleteMany()
-          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)
-          throw error
-        }
-        if (onlyCleanup) return
-      }
-
-      // ---- Get or create categories ----
-      const categories = await Promise.all(
-        categoriesToCreate.map(async (cat) => {
-          const existing = await tx.category.findUnique({
-            where: { name: cat.name },
-          })
-          if (existing) return existing
-
-          return await tx.category.create({
-            data: cat,
-          })
-        })
-      )
-
-      // ---- Create users ----
-      const specialUsersUntyped = Object.fromEntries(
-        await Promise.all(
-          Object.entries(specialUsersData).map(async ([key, userData]) => {
-            const secretToken = process.env[userData.envToken] ?? userData.defaultToken
-            const secretTokenHash = hashUserSecretToken(secretToken)
-
-            const { envToken, defaultToken, ...userCreateData } = userData
-            const user = await tx.user.create({
-              data: {
-                notificationPreferences: { create: {} },
-                ...userCreateData,
-                secretTokenHash,
-              },
-            })
-
-            console.info(`✅ Created ${user.name} with secret token "${secretToken}"`)
-
-            return [key, user] as const
-          })
-        )
-      )
-
-      const specialUsers = specialUsersUntyped as {
-        [K in keyof typeof specialUsersData]: (typeof specialUsersUntyped)[K]
-      }
-
-      let users = await Promise.all(
-        Array.from({ length: 10 }, async () => {
-          const { user } = await createAccount()
-          return user
-        })
-      )
-
-      // ---- Create attributes ----
-      const attributes = await Promise.all(
-        Array.from({ length: 16 }, async () => {
-          return await tx.attribute.create({
-            data: generateFakeAttribute(),
-          })
-        })
-      )
-
-      // ---- Create services ----
-      const services = await Promise.all(
-        Array.from({ length: numServices }, async () => {
-          const serviceData = generateFakeService(users)
-          const randomCategories = faker.helpers.arrayElements(categories, { min: 1, max: 3 })
-
-          const service = await tx.service.create({
-            data: {
-              ...serviceData,
-              categories: {
-                connect: randomCategories.map((cat) => ({ id: cat.id })),
-              },
-            },
-          })
-
-          // Create contact methods for each service
-          await Promise.all(
-            Array.from({ length: faker.number.int({ min: 1, max: 3 }) }, () =>
-              tx.serviceContactMethod.create({
-                data: generateFakeServiceContactMethod(service.id),
-              })
-            )
-          )
-
-          // Link random attributes to the service
-          await Promise.all(
-            faker.helpers.arrayElements(attributes, { min: 2, max: 5 }).map((attr) =>
-              tx.serviceAttribute.create({
-                data: {
-                  serviceId: service.id,
-                  attributeId: attr.id,
-                },
-              })
-            )
-          )
-
-          // Create events for the service
-          await Promise.all(
-            Array.from({ length: faker.number.int({ min: 0, max: 5 }) }, () =>
-              tx.event.create({
-                data: generateFakeEvent(service.id),
-              })
-            )
-          )
-
-          return service
-        })
-      )
-
-      // ---- Create service user affiliations for the service ----
-      await Promise.all(
-        users
-          .filter((user) => user.verified)
-          .map(async (user) => {
-            const servicesToAddAffiliations = uniqBy(
-              faker.helpers.arrayElements(services, {
-                min: 1,
-                max: 3,
-              }),
-              'id'
-            )
-
-            return tx.user.update({
-              where: { id: user.id },
-              data: {
-                serviceAffiliations: {
-                  createMany: {
-                    data: servicesToAddAffiliations.map((service) => ({
-                      role: faker.helpers.arrayElement(Object.values(ServiceUserRole)),
-                      serviceId: service.id,
-                    })),
-                  },
-                },
-              },
-            })
-          })
-      )
-
-      users = await tx.user.findMany({
-        include: {
-          serviceAffiliations: true,
-        },
-      })
-
-      // ---- Create comments and replies ----
-      await Promise.all(
-        services.map(async (service) => {
-          // Create parent comments
-          const commentCount = faker.number.int({ min: 1, max: 10 })
-          const commentData = Array.from({ length: commentCount }, () =>
-            generateFakeComment(faker.helpers.arrayElement(users).id, service.id)
-          )
-          const indexesToUpdate = users.map((user) => {
-            return commentData.findIndex((comment) => comment.authorId === user.id && comment.rating !== null)
-          })
-          commentData.forEach((comment, index) => {
-            if (indexesToUpdate.includes(index)) comment.ratingActive = true
-          })
-
-          await tx.comment.createMany({
-            data: commentData,
-          })
-
-          const comments = await tx.comment.findMany({
-            where: {
-              serviceId: service.id,
-              parentId: null,
-            },
-            orderBy: {
-              createdAt: 'desc',
-            },
-            take: commentCount,
-          })
-
-          const affiliatedUsers = undefinedIfEmpty(
-            users.filter((user) =>
-              user.serviceAffiliations.some((affiliation) => affiliation.serviceId === service.id)
-            )
-          )
-
-          // Create replies to comments
-          await Promise.all(
-            comments.map(async (comment) => {
-              const replyCount = faker.number.int({ min: 0, max: 3 })
-              return Promise.all(
-                Array.from({ length: replyCount }, () => {
-                  const user = faker.helpers.arrayElement(
-                    faker.helpers.maybe(() => affiliatedUsers, { probability: 0.3 }) ?? users
-                  )
-
-                  return tx.comment.create({
-                    data: generateFakeComment(user.id, service.id, comment.id),
-                  })
-                })
-              )
-            })
-          )
-        })
-      )
-
-      // ---- Create service suggestions for normal_dev user ----
-      // First create 3 CREATE_SERVICE suggestions with their services
-      for (let i = 0; i < 3; i++) {
-        const serviceData = generateFakeService(users)
-        const randomCategories = faker.helpers.arrayElements(categories, { min: 1, max: 3 })
-
-        const service = await tx.service.create({
-          data: {
-            ...serviceData,
-            verificationStatus: VerificationStatus.COMMUNITY_CONTRIBUTED,
-            categories: {
-              connect: randomCategories.map((cat) => ({ id: cat.id })),
-            },
-          },
-        })
-
-        const serviceSuggestion = await tx.serviceSuggestion.create({
-          data: generateFakeServiceSuggestion({
-            type: ServiceSuggestionType.CREATE_SERVICE,
-            userId: specialUsers.normal.id,
-            serviceId: service.id,
-          }),
-        })
-
-        // Create some messages for each suggestion
-        await Promise.all(
-          Array.from({ length: faker.number.int({ min: 1, max: 3 }) }, () =>
-            tx.serviceSuggestionMessage.create({
-              data: generateFakeServiceSuggestionMessage(serviceSuggestion.id, [
-                specialUsers.normal.id,
-                specialUsers.admin.id,
-              ]),
-            })
-          )
-        )
-      }
-
-      // Then create 5 EDIT_SERVICE suggestions
-      await Promise.all(
-        services.slice(0, 5).map(async (service) => {
-          const status = faker.helpers.arrayElement(Object.values(ServiceSuggestionStatus))
-          const suggestion = await tx.serviceSuggestion.create({
-            data: generateFakeServiceSuggestion({
-              type: ServiceSuggestionType.EDIT_SERVICE,
-              status,
-              userId: specialUsers.normal.id,
-              serviceId: service.id,
-            }),
-          })
-
-          // Create some messages for each suggestion
-          await Promise.all(
-            Array.from({ length: faker.number.int({ min: 0, max: 3 }) }, () =>
-              tx.serviceSuggestionMessage.create({
-                data: generateFakeServiceSuggestionMessage(suggestion.id, [
-                  specialUsers.normal.id,
-                  specialUsers.admin.id,
-                ]),
-              })
-            )
-          )
-        })
-      )
-
-      // ---- Create internal notes for users ----
-      await Promise.all(
-        users.map(async (user) => {
-          // Create 1-3 notes for each user
-          const numNotes = faker.number.int({ min: 1, max: 3 })
-          return Promise.all(
-            Array.from({ length: numNotes }, () =>
-              tx.internalUserNote.create({
-                data: generateFakeInternalNote(
-                  user.id,
-                  faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.moderator.id])
-                ),
-              })
-            )
-          )
-        })
-      )
-
-      // Add some notes to special users as well
-      await Promise.all(
-        Object.values(specialUsers).map(async (user) => {
-          const numNotes = faker.number.int({ min: 1, max: 3 })
-          return Promise.all(
-            Array.from({ length: numNotes }, () =>
-              tx.internalUserNote.create({
-                data: generateFakeInternalNote(
-                  user.id,
-                  faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.moderator.id])
-                ),
-              })
-            )
-          )
-        })
-      )
-
-      // ---- Create announcement ----
-      await tx.announcement.create({
-        data: generateFakeAnnouncement(),
-      })
-    },
-    {
-      timeout: 1000 * 60 * 10, // 10 minutes
-    }
-  )
-}
-
-async function main() {
   try {
-    await runFaker()
+    await prisma.commentVote.deleteMany()
-
+    await prisma.karmaTransaction.deleteMany()
-    console.info('✅ Fake data generated successfully')
+    await prisma.comment.deleteMany()
+    await prisma.serviceAttribute.deleteMany()
+    await prisma.serviceContactMethod.deleteMany()
+    await prisma.event.deleteMany()
+    await prisma.verificationStep.deleteMany()
+    await prisma.serviceSuggestionMessage.deleteMany()
+    await prisma.serviceSuggestion.deleteMany()
+    await prisma.serviceVerificationRequest.deleteMany()
+    await prisma.service.deleteMany()
+    await prisma.attribute.deleteMany()
+    await prisma.category.deleteMany()
+    await prisma.internalUserNote.deleteMany()
+    await prisma.user.deleteMany()
+    await prisma.announcement.deleteMany()
+    console.info('✅ Existing data cleaned up')
   } catch (error) {
-    console.error('❌ Error generating fake data:', error)
+    console.error('❌ Error cleaning up data:', error)
-    process.exit(1)
+    throw error
-  } finally {
-    await prisma.$disconnect()
   }
 }
 
-main().catch((error: unknown) => {
+function importTriggers() {
-  console.error('❌ Fatal error:', error)
+  console.info('🔄 Importing SQL triggers...')
-  process.exit(1)
+  try {
-})
+    execSync('just import-triggers', { stdio: 'inherit' })
+    console.info('✅ Triggers imported')
+  } catch (error) {
+    console.error('❌ Error importing triggers:', error)
+    throw error
+  }
+}
+
+async function main() {
+  const { values: options } = parseArgs({
+    options: {
+      services: { type: 'string', short: 's', default: '100' },
+      cleanup: { type: 'boolean', short: 'c', default: true },
+      'only-cleanup': { type: 'boolean', short: 'o', default: false },
+    },
+  })
+  const numServices = parseIntWithFallback(options.services, 100)
+  if (isNaN(numServices) || numServices < 1) {
+    console.error('❌ Invalid number of services specified. Must be a positive number.')
+    process.exit(1)
+  }
+
+  importTriggers()
+
+  if (options.cleanup || options['only-cleanup']) {
+    await cleanup()
+    if (options['only-cleanup']) return
+  }
+
+  // ---- Get or create categories ----
+  const categories = await Promise.all(
+    categoriesToCreate.map(async (cat) => {
+      const existing = await prisma.category.findUnique({
+        where: { name: cat.name },
+      })
+      if (existing) return existing
+
+      return await prisma.category.create({
+        data: cat,
+      })
+    })
+  )
+
+  // ---- Create users ----
+  const specialUsersUntyped = Object.fromEntries(
+    await Promise.all(
+      Object.entries(specialUsersData).map(async ([key, userData]) => {
+        const secretToken = process.env[userData.envToken] ?? userData.defaultToken
+        const secretTokenHash = hashUserSecretToken(secretToken)
+
+        const { envToken, defaultToken, ...userCreateData } = userData
+        const user = await prisma.user.create({
+          data: {
+            notificationPreferences: { create: {} },
+            ...userCreateData,
+            secretTokenHash,
+          },
+        })
+
+        console.info(`✅ Created ${user.name} with secret token "${secretToken}"`)
+
+        return [key, user] as const
+      })
+    )
+  )
+
+  const specialUsers = specialUsersUntyped as {
+    [K in keyof typeof specialUsersData]: (typeof specialUsersUntyped)[K]
+  }
+
+  let users = await Promise.all(
+    Array.from({ length: 10 }, async () => {
+      const { user } = await createAccount()
+      return user
+    })
+  )
+
+  // ---- Create attributes ----
+  const attributes = await Promise.all(
+    Array.from({ length: 16 }, async () => {
+      return await prisma.attribute.create({
+        data: generateFakeAttribute(),
+      })
+    })
+  )
+
+  // ---- Create services ----
+  const services = await Promise.all(
+    Array.from({ length: numServices }, async () => {
+      const serviceData = generateFakeService(users)
+      const randomCategories = faker.helpers.arrayElements(categories, { min: 1, max: 3 })
+
+      const service = await prisma.service.create({
+        data: {
+          ...serviceData,
+          categories: {
+            connect: randomCategories.map((cat) => ({ id: cat.id })),
+          },
+        },
+      })
+
+      // Create contact methods for each service
+      await Promise.all(
+        Array.from({ length: faker.number.int({ min: 1, max: 3 }) }, () =>
+          prisma.serviceContactMethod.create({
+            data: generateFakeServiceContactMethod(service.id),
+          })
+        )
+      )
+
+      // Link random attributes to the service
+      await Promise.all(
+        faker.helpers.arrayElements(attributes, { min: 2, max: 5 }).map((attr) =>
+          prisma.serviceAttribute.create({
+            data: {
+              serviceId: service.id,
+              attributeId: attr.id,
+            },
+          })
+        )
+      )
+
+      // Create events for the service
+      await Promise.all(
+        Array.from({ length: faker.number.int({ min: 0, max: 5 }) }, () =>
+          prisma.event.create({
+            data: generateFakeEvent(service.id),
+          })
+        )
+      )
+
+      return service
+    })
+  )
+
+  // ---- Create service user affiliations for the service ----
+  await Promise.all(
+    users
+      .filter((user) => user.verified)
+      .map(async (user) => {
+        const servicesToAddAffiliations = uniqBy(
+          faker.helpers.arrayElements(services, {
+            min: 1,
+            max: 3,
+          }),
+          'id'
+        )
+
+        return prisma.user.update({
+          where: { id: user.id },
+          data: {
+            serviceAffiliations: {
+              createMany: {
+                data: servicesToAddAffiliations.map((service) => ({
+                  role: faker.helpers.arrayElement(Object.values(ServiceUserRole)),
+                  serviceId: service.id,
+                })),
+              },
+            },
+          },
+        })
+      })
+  )
+
+  users = await prisma.user.findMany({
+    include: {
+      serviceAffiliations: true,
+    },
+  })
+
+  // ---- Create comments and replies ----
+  await Promise.all(
+    services.map(async (service) => {
+      // Create parent comments
+      const commentCount = faker.number.int({ min: 1, max: 10 })
+      const commentData = Array.from({ length: commentCount }, () =>
+        generateFakeComment(faker.helpers.arrayElement(users).id, service.id)
+      )
+      const indexesToUpdate = users.map((user) => {
+        return commentData.findIndex((comment) => comment.authorId === user.id && comment.rating !== null)
+      })
+      commentData.forEach((comment, index) => {
+        if (indexesToUpdate.includes(index)) comment.ratingActive = true
+      })
+
+      await prisma.comment.createMany({
+        data: commentData,
+      })
+
+      const comments = await prisma.comment.findMany({
+        where: {
+          serviceId: service.id,
+          parentId: null,
+        },
+        orderBy: {
+          createdAt: 'desc',
+        },
+        take: commentCount,
+      })
+
+      const affiliatedUsers = undefinedIfEmpty(
+        users.filter((user) =>
+          user.serviceAffiliations.some((affiliation) => affiliation.serviceId === service.id)
+        )
+      )
+
+      // Create replies to comments
+      await Promise.all(
+        comments.map(async (comment) => {
+          const replyCount = faker.number.int({ min: 0, max: 3 })
+          return Promise.all(
+            Array.from({ length: replyCount }, () => {
+              const user = faker.helpers.arrayElement(
+                faker.helpers.maybe(() => affiliatedUsers, { probability: 0.3 }) ?? users
+              )
+
+              return prisma.comment.create({
+                data: generateFakeComment(user.id, service.id, comment.id),
+              })
+            })
+          )
+        })
+      )
+    })
+  )
+
+  // ---- Create service suggestions for normal_dev user ----
+  // First create 3 CREATE_SERVICE suggestions with their services
+  for (let i = 0; i < 3; i++) {
+    const serviceData = generateFakeService(users)
+    const randomCategories = faker.helpers.arrayElements(categories, { min: 1, max: 3 })
+
+    const service = await prisma.service.create({
+      data: {
+        ...serviceData,
+        verificationStatus: VerificationStatus.COMMUNITY_CONTRIBUTED,
+        categories: {
+          connect: randomCategories.map((cat) => ({ id: cat.id })),
+        },
+      },
+    })
+
+    const serviceSuggestion = await prisma.serviceSuggestion.create({
+      data: generateFakeServiceSuggestion({
+        type: ServiceSuggestionType.CREATE_SERVICE,
+        userId: specialUsers.normal.id,
+        serviceId: service.id,
+      }),
+    })
+
+    // Create some messages for each suggestion
+    await Promise.all(
+      Array.from({ length: faker.number.int({ min: 1, max: 3 }) }, () =>
+        prisma.serviceSuggestionMessage.create({
+          data: generateFakeServiceSuggestionMessage(serviceSuggestion.id, [
+            specialUsers.normal.id,
+            specialUsers.admin.id,
+          ]),
+        })
+      )
+    )
+  }
+
+  // Then create 5 EDIT_SERVICE suggestions
+  await Promise.all(
+    services.slice(0, 5).map(async (service) => {
+      const status = faker.helpers.arrayElement(Object.values(ServiceSuggestionStatus))
+      const suggestion = await prisma.serviceSuggestion.create({
+        data: generateFakeServiceSuggestion({
+          type: ServiceSuggestionType.EDIT_SERVICE,
+          status,
+          userId: specialUsers.normal.id,
+          serviceId: service.id,
+        }),
+      })
+
+      // Create some messages for each suggestion
+      await Promise.all(
+        Array.from({ length: faker.number.int({ min: 0, max: 3 }) }, () =>
+          prisma.serviceSuggestionMessage.create({
+            data: generateFakeServiceSuggestionMessage(suggestion.id, [
+              specialUsers.normal.id,
+              specialUsers.admin.id,
+            ]),
+          })
+        )
+      )
+    })
+  )
+
+  // ---- Create internal notes for users ----
+  await Promise.all(
+    users.map(async (user) => {
+      // Create 1-3 notes for each user
+      const numNotes = faker.number.int({ min: 1, max: 3 })
+      return Promise.all(
+        Array.from({ length: numNotes }, () =>
+          prisma.internalUserNote.create({
+            data: generateFakeInternalNote(
+              user.id,
+              faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.moderator.id])
+            ),
+          })
+        )
+      )
+    })
+  )
+
+  // Add some notes to special users as well
+  await Promise.all(
+    Object.values(specialUsers).map(async (user) => {
+      const numNotes = faker.number.int({ min: 1, max: 3 })
+      return Promise.all(
+        Array.from({ length: numNotes }, () =>
+          prisma.internalUserNote.create({
+            data: generateFakeInternalNote(
+              user.id,
+              faker.helpers.arrayElement([specialUsers.admin.id, specialUsers.moderator.id])
+            ),
+          })
+        )
+      )
+    })
+  )
+
+  // ---- Create announcement ----
+  await prisma.announcement.create({
+    data: generateFakeAnnouncement(),
+  })
+}
+
+main()
+  .then(async () => {
+    console.info('✅ Fake data generated successfully')
+    await prisma.$disconnect()
+  })
+  .catch(async (error: unknown) => {
+    console.error(
+      '❌ Fatal error:',
+      typeof error === 'object' && error !== null && 'message' in error ? error.message : 'Unknown error'
+    )
+    console.error(error)
+    await prisma.$disconnect()
+    process.exit(1)
+  })

web/src/actions/admin/service.ts

@@ -31,10 +31,16 @@ const serviceSchemaBase = z.object({
   verificationSummary: z.string().optional().nullable().default(null),
   verificationProofMd: z.string().optional().nullable().default(null),
   acceptedCurrencies: z.array(z.nativeEnum(Currency)),
-  referral: z.string().optional().nullable().default(null),
+  referral: z
+    .string()
+    .regex(/^(\?\w+=.|\/.+)/, 'Referral must be a valid URL parameter or path, not a full URL')
+    .optional()
+    .nullable()
+    .default(null),
   imageFile: imageFileSchema,
   overallScore: zodCohercedNumber(z.number().int().min(0).max(10)).optional(),
   serviceVisibility: z.nativeEnum(ServiceVisibility),
+  internalNote: z.string().optional(),
 })
 
 const addSlugIfMissing = <
@@ -61,7 +67,7 @@ export const adminServiceActions = {
     accept: 'form',
     permissions: 'admin',
     input: serviceSchemaBase.omit({ id: true }).transform(addSlugIfMissing),
-    handler: async (input) => {
+    handler: async (input, context) => {
       const existing = await prisma.service.findUnique({
         where: {
           slug: input.slug,
@@ -75,12 +81,26 @@ export const adminServiceActions = {
         })
       }
 
-      const { imageFile, ...serviceData } = input
+      const imageUrl = input.imageFile
-      const imageUrl = imageFile ? await saveFileLocally(imageFile, imageFile.name) : undefined
+        ? await saveFileLocally(input.imageFile, input.imageFile.name)
+        : undefined
 
       const service = await prisma.service.create({
         data: {
-          ...serviceData,
+          name: input.name,
+          description: input.description,
+          serviceUrls: input.serviceUrls,
+          tosUrls: input.tosUrls,
+          onionUrls: input.onionUrls,
+          kycLevel: input.kycLevel,
+          verificationStatus: input.verificationStatus,
+          verificationSummary: input.verificationSummary,
+          verificationProofMd: input.verificationProofMd,
+          acceptedCurrencies: input.acceptedCurrencies,
+          referral: input.referral,
+          serviceVisibility: input.serviceVisibility,
+          slug: input.slug,
+          overallScore: input.overallScore,
           categories: {
             connect: input.categories.map((id) => ({ id })),
           },
@@ -92,6 +112,14 @@ export const adminServiceActions = {
             })),
           },
           imageUrl,
+          internalNotes: input.internalNote
+            ? {
+                create: {
+                  content: input.internalNote,
+                  addedByUserId: context.locals.user.id,
+                },
+              }
+            : undefined,
         },
         select: {
           id: true,
@@ -106,29 +134,34 @@ 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 anotherServiceWithNewSlug = await prisma.service.findUnique({
-
-      const existing = await prisma.service.findUnique({
         where: {
           slug: input.slug,
-          NOT: { id },
+          NOT: { id: input.id },
         },
       })
 
-      if (existing) {
+      if (anotherServiceWithNewSlug) {
         throw new ActionError({
           code: 'CONFLICT',
           message: 'A service with this slug already exists',
         })
       }
 
-      const imageUrl = imageFile ? await saveFileLocally(imageFile, imageFile.name) : undefined
+      const imageUrl = input.removeImage
+        ? null
+        : input.imageFile
+          ? await saveFileLocally(input.imageFile, input.imageFile.name)
+          : undefined
 
-      // Get existing attributes and categories to compute differences
       const existingService = await prisma.service.findUnique({
-        where: { id },
+        where: { id: input.id },
         include: {
           categories: true,
           attributes: {
@@ -146,96 +179,191 @@ export const adminServiceActions = {
         })
       }
 
-      // Find categories to connect and disconnect
       const existingCategoryIds = existingService.categories.map((c) => c.id)
-      const categoriesToAdd = categories.filter((cId) => !existingCategoryIds.includes(cId))
+      const categoriesToAdd = input.categories.filter((cId) => !existingCategoryIds.includes(cId))
-      const categoriesToRemove = existingCategoryIds.filter((cId) => !categories.includes(cId))
+      const categoriesToRemove = existingCategoryIds.filter((cId) => !input.categories.includes(cId))
 
-      // Find attributes to connect and disconnect
       const existingAttributeIds = existingService.attributes.map((a) => a.attributeId)
-      const attributesToAdd = attributes.filter((aId) => !existingAttributeIds.includes(aId))
+      const attributesToAdd = input.attributes.filter((aId) => !existingAttributeIds.includes(aId))
-      const attributesToRemove = existingAttributeIds.filter((aId) => !attributes.includes(aId))
+      const attributesToRemove = existingAttributeIds.filter((aId) => !input.attributes.includes(aId))
 
       const service = await prisma.service.update({
-        where: { id },
+        where: { id: input.id },
         data: {
-          ...data,
+          name: input.name,
+          description: input.description,
+          serviceUrls: input.serviceUrls,
+          tosUrls: input.tosUrls,
+          onionUrls: input.onionUrls,
+          kycLevel: input.kycLevel,
+          verificationStatus: input.verificationStatus,
+          verificationSummary: input.verificationSummary,
+          verificationProofMd: input.verificationProofMd,
+          acceptedCurrencies: input.acceptedCurrencies,
+          referral: input.referral,
+          serviceVisibility: input.serviceVisibility,
+          slug: input.slug,
+          overallScore: input.overallScore,
+
           imageUrl,
           categories: {
             connect: categoriesToAdd.map((id) => ({ id })),
             disconnect: categoriesToRemove.map((id) => ({ id })),
           },
           attributes: {
-            // Connect new attributes
             create: attributesToAdd.map((attributeId) => ({
               attribute: {
                 connect: { id: attributeId },
               },
             })),
-            // Delete specific attributes that are no longer needed
+
             deleteMany: attributesToRemove.map((attributeId) => ({
               attributeId,
             })),
           },
         },
       })
+
       return { service }
     },
   }),
 
-  createContactMethod: defineProtectedAction({
+  contactMethod: {
-    accept: 'form',
+    add: defineProtectedAction({
-    permissions: 'admin',
+      accept: 'form',
-    input: z.object({
+      permissions: 'admin',
-      label: z.string().min(1).max(50).nullable(),
+      input: z.object({
-      value: z.string().url(),
+        label: z.string().min(1).max(50).nullable(),
-      serviceId: z.number().int().positive(),
+        value: z.string().url(),
+        serviceId: z.number().int().positive(),
+      }),
+      handler: async (input) => {
+        const contactMethod = await prisma.serviceContactMethod.create({
+          data: {
+            label: input.label,
+            value: input.value,
+            serviceId: input.serviceId,
+          },
+        })
+        return { contactMethod }
+      },
     }),
-    handler: async (input) => {
-      const contactMethod = await prisma.serviceContactMethod.create({
-        data: {
-          label: input.label,
-          value: input.value,
-          serviceId: input.serviceId,
-        },
-      })
-      return { contactMethod }
-    },
-  }),
 
-  updateContactMethod: defineProtectedAction({
+    update: defineProtectedAction({
-    accept: 'form',
+      accept: 'form',
-    permissions: 'admin',
+      permissions: 'admin',
-    input: z.object({
+      input: z.object({
-      id: z.number().int().positive(),
+        id: z.number().int().positive(),
-      label: z.string().min(1).max(50).nullable(),
+        label: z.string().min(1).max(50).nullable(),
-      value: z.string().url(),
+        value: z.string().url(),
-      serviceId: z.number().int().positive(),
+        serviceId: z.number().int().positive(),
+      }),
+      handler: async (input) => {
+        const contactMethod = await prisma.serviceContactMethod.update({
+          where: { id: input.id },
+          data: {
+            label: input.label,
+            value: input.value,
+            serviceId: input.serviceId,
+          },
+        })
+        return { contactMethod }
+      },
     }),
-    handler: async (input) => {
-      const contactMethod = await prisma.serviceContactMethod.update({
-        where: { id: input.id },
-        data: {
-          label: input.label,
-          value: input.value,
-          serviceId: input.serviceId,
-        },
-      })
-      return { contactMethod }
-    },
-  }),
 
-  deleteContactMethod: defineProtectedAction({
+    delete: defineProtectedAction({
-    accept: 'form',
+      accept: 'form',
-    permissions: 'admin',
+      permissions: 'admin',
-    input: z.object({
+      input: z.object({
-      id: z.number().int().positive(),
+        id: z.number().int().positive(),
+      }),
+      handler: async (input) => {
+        await prisma.serviceContactMethod.delete({
+          where: { id: input.id },
+        })
+        return { success: true }
+      },
     }),
-    handler: async (input) => {
+  },
-      await prisma.serviceContactMethod.delete({
+
-        where: { id: input.id },
+  internalNote: {
-      })
+    add: defineProtectedAction({
-      return { success: true }
+      accept: 'form',
-    },
+      permissions: 'admin',
-  }),
+      input: z.object({
+        serviceId: z.number().int().positive(),
+        content: z.string().min(1),
+      }),
+      handler: async (input, { locals }) => {
+        const service = await prisma.service.findUnique({
+          where: { id: input.serviceId },
+        })
+
+        if (!service) {
+          throw new ActionError({
+            code: 'NOT_FOUND',
+            message: 'Service not found',
+          })
+        }
+
+        await prisma.internalServiceNote.create({
+          data: {
+            content: input.content,
+            serviceId: input.serviceId,
+            addedByUserId: locals.user.id,
+          },
+        })
+      },
+    }),
+
+    update: defineProtectedAction({
+      accept: 'form',
+      permissions: 'admin',
+      input: z.object({
+        noteId: z.number().int().positive(),
+        content: z.string().min(1),
+      }),
+      handler: async (input) => {
+        const note = await prisma.internalServiceNote.findUnique({
+          where: { id: input.noteId },
+        })
+
+        if (!note) {
+          throw new ActionError({
+            code: 'NOT_FOUND',
+            message: 'Note not found',
+          })
+        }
+
+        await prisma.internalServiceNote.update({
+          where: { id: input.noteId },
+          data: { content: input.content },
+        })
+      },
+    }),
+
+    delete: defineProtectedAction({
+      accept: 'form',
+      permissions: 'admin',
+      input: z.object({
+        noteId: z.number().int().positive(),
+      }),
+      handler: async (input) => {
+        const note = await prisma.internalServiceNote.findUnique({
+          where: { id: input.noteId },
+        })
+
+        if (!note) {
+          throw new ActionError({
+            code: 'NOT_FOUND',
+            message: 'Note not found',
+          })
+        }
+
+        await prisma.internalServiceNote.delete({
+          where: { id: input.noteId },
+        })
+      },
+    }),
+  },
 }

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?: {
@@ -55,6 +57,7 @@ const button = tv({
     iconOnly: {
       true: {
         base: 'p-0',
+        label: 'sr-only',
       },
     },
     color: {
@@ -137,49 +140,49 @@ const button = tv({
       color: 'black',
       variant: 'faded',
       class: {
-        base: 'border-night-300/30 bg-night-800/30 hover:bg-night-700/50 text-white/70 hover:text-white/90 focus-visible:ring-white/50',
+        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: 'border-day-300/30 bg-day-100/30 hover:bg-day-200/50 text-white/70 hover:text-white/90 focus-visible:ring-white/50',
+        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: 'border-day-500/30 bg-day-400/30 hover:bg-day-500/50 text-day-300 hover:text-day-100 focus-visible:ring-white/50',
+        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-green-600/30 bg-green-500/30 text-green-300 hover:bg-green-500/50 hover:text-green-100',
+        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-red-600/30 bg-red-500/30 text-red-300 hover:bg-red-500/50 hover:text-red-100',
+        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-yellow-600/30 bg-yellow-500/30 text-yellow-300 hover:bg-yellow-500/50 hover:text-yellow-100',
+        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-blue-600/30 bg-blue-500/30 text-blue-300 hover:bg-blue-500/50 hover:text-blue-100',
+        base: 'border-current/20 bg-blue-500/15 text-blue-300 hover:bg-blue-500/30 hover:text-blue-100',
       },
     },
     // Shadow variants
@@ -260,6 +263,7 @@ const {
   dataAstroReload,
   disabled,
   inlineIcon,
+  iconOnly,
   ...htmlProps
 } = Astro.props
 
@@ -268,13 +272,20 @@ const {
   icon: iconSlot,
   label: labelSlot,
   endIcon: endIconSlot,
-} = button({ size, color, variant, shadow, disabled, iconOnly: !label && !(!!icon && !!endIcon) })
+} = 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}
@@ -282,7 +293,7 @@ const ActualTag = disabled && Tag === 'a' ? 'span' : Tag
   {...htmlProps}
 >
   {!!icon && <Icon name={icon} class={iconSlot({ class: classNames?.icon })} is:inline={inlineIcon} />}
-  {!!label && <span class={labelSlot({ class: classNames?.label })}>{label}</span>}
+  <span class={labelSlot({ class: classNames?.label })}>{label}</span>
   {
     !!endIcon && (
       <Icon name={endIcon} class={endIconSlot({ class: classNames?.endIcon })} is:inline={inlineIcon}>

web/src/components/CommentItem.astro

@@ -150,7 +150,7 @@ 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>

web/src/components/Footer.astro

@@ -52,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/InputCardGroup.astro

@@ -70,7 +70,7 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
           )}
         >
           <input
-            transition:persist={option.noTransitionPersist ? undefined : true}
+            transition:persist={option.noTransitionPersist || !multiple ? undefined : true}
             type={multiple ? 'checkbox' : 'radio'}
             name={wrapperProps.name}
             value={option.value}

web/src/components/InputCheckboxGroup.astro

@@ -54,9 +54,9 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
                 disabled={disabled}
               />
               {icons.map((icon, index) => (
-                <Icon name={icon} class={cn('size-4', iconClassName[index])} />
+                <Icon name={icon} class={cn('size-4 shrink-0', iconClassName[index])} />
               ))}
-              <span class="text-sm leading-none">{option.label}</span>
+              <span class="truncate text-sm leading-none">{option.label}</span>
             </label>
           )
         })

web/src/components/InputFile.astro

@@ -16,13 +16,20 @@ 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

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

@@ -19,6 +19,9 @@ type Props = HTMLAttributes<'div'> & {
   icon?: string
   inputId?: string
   hideLabel?: boolean
+  classNames?: {
+    description?: string
+  }
 }
 
 const {
@@ -32,13 +35,14 @@ const {
   class: className,
   inputId,
   hideLabel,
+  classNames,
   ...htmlProps
 } = Astro.props
 
 const hasError = !!error && error.length > 0
 ---
 
-<fieldset class={cn('space-y-1', className)} {...htmlProps}>
+<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')}>
@@ -71,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/ServiceCard.astro

@@ -2,6 +2,7 @@
 import { Icon } from 'astro-icon/components'
 
 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'
@@ -25,6 +26,7 @@ type Props = HTMLAttributes<'a'> & {
       kycLevel: true
       imageUrl: true
       verificationStatus: true
+      serviceVisibility: true
       acceptedCurrencies: true
       categories: {
         select: {
@@ -43,11 +45,11 @@ const {
     slug,
     description,
     overallScore,
-
     kycLevel,
     imageUrl,
     categories,
     verificationStatus,
+    serviceVisibility,
     acceptedCurrencies,
   },
   class: className,
@@ -69,7 +71,9 @@ 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
   )}
 >
@@ -79,7 +83,11 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
       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}
     />
@@ -110,6 +118,23 @@ const overallScoreInfo = makeOverallScoreInfo(overallScore)
               ]}
             </Tooltip>
           )
+        }{
+          serviceVisibility === 'ARCHIVED' && (
+            <Tooltip
+              text={serviceVisibilitiesById.ARCHIVED.label}
+              position="right"
+              class="-my-2 shrink-0 whitespace-nowrap"
+            >
+              <Icon
+                is:inline={inlineIcons}
+                name={serviceVisibilitiesById.ARCHIVED.icon}
+                class={cn(
+                  'inline-block size-6 shrink-0 rounded-lg p-1 align-[-0.37em]',
+                  serviceVisibilitiesById.ARCHIVED.iconClass
+                )}
+              />
+            </Tooltip>
+          )
         }
       </h3>
       <div class="max-h-2 flex-1"></div>

web/src/components/ServicesFilters.astro

@@ -40,6 +40,7 @@ const {
   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)
@@ -107,7 +108,7 @@ const {
       {
         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"
@@ -116,6 +117,7 @@ const {
                 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>

web/src/components/ServicesSearchResults.astro

@@ -205,6 +205,13 @@ const urlIfIncludingCommunity = urlWithParams(Astro.url, {
               inlineIcon={inlineIcons}
             />
           )}
+          <Button
+            as="a"
+            href="/service-suggestion/new"
+            label="Add service"
+            icon="ri:add-line"
+            inlineIcon={inlineIcons}
+          />
         </div>
       </div>
     ) : (
@@ -241,14 +248,18 @@ const urlIfIncludingCommunity = urlWithParams(Astro.url, {
       </>
     )
   }
-  <div class="mt-4 text-center">
+  {
-    <Button
+    services && services.length > 0 && (
-      as="a"
+      <div class="mt-4 text-center">
-      href="/service-suggestion/new"
+        <Button
-      label="Add service"
+          as="a"
-      icon="ri:add-line"
+          href="/service-suggestion/new"
-      inlineIcon={inlineIcons}
+          label="Add service"
-      class="mx-auto"
+          icon="ri:add-line"
-    />
+          inlineIcon={inlineIcons}
-  </div>
+          class="mx-auto"
+        />
+      </div>
+    )
+  }
 </div>

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 longer operational',
+      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/icons/nostr.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 620 620">
+  <path
+    d="M620 270v328c0 12-10 22-22 22H332c-12 0-22-10-22-22v-61c1-75 9-147 26-179 9-20 26-30 44-36 36-11 98-4 124-5 0 0 80 3 80-42 0-37-36-34-36-34-39 1-69-1-88-9-33-13-34-36-34-44-1-91-134-102-252-79-128 24 2 209 2 456v33c0 12-10 22-22 22H22c-12 0-22-10-22-22V31C0 19 10 9 22 9h124c12 0 22 10 22 22 0 19 20 29 35 18C248 17 305 0 369 0c143 0 251 84 251 270Zm-238-66c0-27-21-48-47-48s-47 21-47 48c0 26 21 48 47 48s47-22 47-48Z" />
+</svg>

web/src/icons/simplex.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+  <path fill-rule="evenodd"
+    d="m2.14 6.31 3.95 3.79 3.97-3.81L6.11 2.5 8.13.57l3.94 3.79L16.1.5l1.98 1.9-4.03 3.85L18 10.03l4.03-3.85L24 8.07l-4.03 3.86 3.95 3.78-2.01 1.93-3.95-3.78-4.03 3.85 3.95 3.79-2 1.93-3.96-3.79L7.9 23.5l-1.98-1.9 4.06-3.89-3.95-3.78-4.06 3.89L0 15.92l4.06-3.88L.1 8.26 2.14 6.3Zm13.85 5.65L12 15.77 8.06 12l3.98-3.81 3.95 3.78Z"
+    clip-rule="evenodd" />
+</svg>

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/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' | 'moderator'
+type SpecialUserPermission = 'admin' | 'moderator' | 'verified'
 type Permission = SpecialUserPermission | 'guest' | 'not-spammer' | 'user'
 
 type ActionAPIContextWithUser = ActionAPIContext & {

web/src/lib/userSecretToken.ts

@@ -50,7 +50,7 @@ const USER_SECRET_TOKEN_DEV_USERS_REGEX = (() => {
   }[]
 
   const env =
-    // This file can also be called from faker.ts, where import.meta.env is not available
+    // This file can also be called from seed.ts, where import.meta.env is not available
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     (import.meta.env
       ? Object.fromEntries(specialUsersData.map(({ envToken }) => [envToken, import.meta.env[envToken]]))

web/src/lib/zodUtils.ts

@@ -16,8 +16,8 @@ export const zodCohercedNumber = (zodPipe?: ZodTypeAny) =>
 export const zodUrlOptionalProtocol = z.preprocess(
   (input) => {
     if (typeof input !== 'string') return input
-    const trimmedVal = input.trim()
+    const cleanInput = input.trim().replace(/\/$/, '')
-    return !/^\w+:\/\//i.test(trimmedVal) ? `https://${trimmedVal}` : trimmedVal
+    return !/^\w+:\/\//i.test(cleanInput) ? `https://${cleanInput}` : cleanInput
   },
   z.string().refine((value) => /^(https?):\/\/(?=.*\.[a-z]{2,})[^\s$.?#].[^\s]*$/i.test(value), {
     message: 'Invalid URL',

web/src/pages/about.mdx

@@ -206,7 +206,6 @@ You can contact via direct chat:
 
 - [SimpleX Chat](https://simplex.chat/contact#/?v=2&smp=smp%3A%2F%2F0YuTwO05YJWS8rkjn9eLJDjQhFKvIYd8d4xG8X1blIU%3D%40smp8.simplex.im%2FcgKHYUYnpAIVoGb9lxb0qEMEpvYIvc1O%23%2F%3Fv%3D1-2%26dh%3DMCowBQYDK2VuAyEAIW_JSq8wOsLKG4Xv4O54uT2D_l8MJBYKQIFj1FjZpnU%253D%26srv%3Dbeccx4yfxxbvyhqypaavemqurytl6hozr47wfc7uuecacjqdvwpw2xid.onion)
 
-
 ## Disclaimer
 
 This website is strictly for informational purposes regarding privacy technology in the cryptocurrency space. We unequivocally condemn and do not endorse, support, or facilitate money laundering, terrorist financing, or any other illegal financial activities. The use of any information or service mentioned herein for such purposes is strictly prohibited and contrary to the core principles of this project.

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

@@ -143,9 +143,9 @@ if (toggleResult?.error) {
 }
 ---
 
-<BaseLayout pageTitle="Announcement Management" widthClassName="max-w-screen-xl">
+<BaseLayout pageTitle="Announcements" widthClassName="max-w-screen-xl">
   <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
-    <h1 class="font-title text-2xl font-bold text-white">Announcement Management</h1>
+    <h1 class="font-title text-2xl font-bold text-white">Announcements</h1>
     <div class="mt-2 flex items-center gap-4 sm:mt-0">
       <span class="text-sm text-zinc-400">{announcements.length} announcements</span>
     </div>
@@ -193,12 +193,17 @@ if (toggleResult?.error) {
             <option value="active" selected={filters.status === 'active'}>Active</option>
             <option value="inactive" selected={filters.status === 'inactive'}>Inactive</option>
           </select>
-          <button
+          <Button
+            as="button"
             type="submit"
-            class="inline-flex items-center rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+            color="info"
-          >
+            variant="solid"
-            <Icon name="ri:search-2-line" class="h-4 w-4" />
+            size="md"
-          </button>
+            iconOnly
+            icon="ri:search-2-line"
+            label="Search"
+            class="rounded-l-none"
+          />
         </div>
       </div>
     </form>
@@ -206,13 +211,16 @@ if (toggleResult?.error) {
 
   <!-- Create New Announcement Form -->
   <div class="mb-6">
-    <button
+    <Button
+      as="button"
       id="toggle-new-announcement-form"
-      class="mb-4 inline-flex items-center rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+      color="success"
-    >
+      variant="solid"
-      <Icon name="ri:add-line" class="mr-1 h-4 w-4" />
+      size="md"
-      Create New Announcement
+      icon="ri:add-line"
-    </button>
+      label="Create"
+      class="mb-4"
+    />
 
     <div
       id="new-announcement-form"
@@ -306,13 +314,16 @@ if (toggleResult?.error) {
 
           <div class="pt-4">
             <InputSubmitButton label="Create Announcement" icon="ri:save-line" hideCancel />
-            <button
+            <Button
+              as="button"
               type="button"
               id="cancel-create"
-              class="ml-2 inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700 focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+              color="gray"
-            >
+              variant="faded"
-              Cancel
+              size="md"
-            </button>
+              label="Cancel"
+              class="ml-2"
+            />
           </div>
         </div>
       </form>
@@ -339,19 +350,24 @@ if (toggleResult?.error) {
       <form method="POST" action={actions.admin.announcement.delete} id="delete-form">
         <input type="hidden" name="id" id="delete-id" />
         <div class="flex justify-end gap-2">
-          <button
+          <Button
+            as="button"
             type="button"
-            class="close-modal inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700 focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+            class="close-modal"
-          >
+            color="gray"
-            Cancel
+            variant="faded"
-          </button>
+            size="md"
-          <button
+            label="Cancel"
+          />
+          <Button
+            as="button"
             type="submit"
-            class="inline-flex items-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+            color="danger"
-          >
+            variant="solid"
-            <Icon name="ri:delete-bin-line" class="mr-1 h-4 w-4" />
+            size="md"
-            Delete
+            icon="ri:delete-bin-line"
-          </button>
+            label="Delete"
+          />
         </div>
       </form>
     </div>
@@ -497,60 +513,64 @@ if (toggleResult?.error) {
                       </td>
                       <td class="px-4 py-3">
                         <div class="flex justify-center gap-2">
-                          <Tooltip
+                          <Tooltip text="Edit">
-                            as="button"
+                            <Button
-                            type="button"
+                              as="button"
-                            data-id={announcement.id}
+                              type="button"
-                            class="edit-button inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-1 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
+                              data-id={announcement.id}
-                            text="Edit"
+                              class="edit-button"
-                            onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
+                              color="info"
-                          >
+                              variant="faded"
-                            <Icon name="ri:edit-line" class="size-4" />
+                              size="sm"
+                              iconOnly
+                              icon="ri:edit-line"
+                              label="Edit"
+                              onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
+                            />
                           </Tooltip>
 
-                          <form
+                          <Tooltip text={announcement.isActive ? 'Deactivate' : 'Activate'}>
-                            method="POST"
+                            <form
-                            action={actions.admin.announcement.toggleActive}
+                              method="POST"
-                            class="inline-block"
+                              action={actions.admin.announcement.toggleActive}
-                            data-confirm={`Are you sure you want to ${announcement.isActive ? 'deactivate' : 'activate'} this announcement?`}
+                              class="inline-block"
-                          >
+                              data-confirm={`Are you sure you want to ${announcement.isActive ? 'deactivate' : 'activate'} this announcement?`}
-                            <input type="hidden" name="id" value={announcement.id} />
-                            <input type="hidden" name="isActive" value={String(!announcement.isActive)} />
-                            <button
-                              type="submit"
-                              class={`rounded-md border px-1 py-1 text-xs transition-colors ${
-                                announcement.isActive
-                                  ? 'border-yellow-500/50 bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30'
-                                  : 'border-green-500/50 bg-green-500/20 text-green-400 hover:bg-green-500/30'
-                              }`}
                             >
-                              <Tooltip text={announcement.isActive ? 'Deactivate' : 'Activate'}>
+                              <input type="hidden" name="id" value={announcement.id} />
-                                <Icon
+                              <input type="hidden" name="isActive" value={String(!announcement.isActive)} />
-                                  name={
+                              <Button
-                                    announcement.isActive ? 'ri:pause-circle-line' : 'ri:play-circle-line'
+                                as="button"
-                                  }
+                                type="submit"
-                                  class="size-4"
+                                color={announcement.isActive ? 'warning' : 'success'}
-                                />
+                                variant="faded"
-                              </Tooltip>
+                                size="sm"
-                            </button>
+                                iconOnly
-                          </form>
+                                icon={announcement.isActive ? 'ri:pause-circle-line' : 'ri:play-circle-line'}
+                                label={announcement.isActive ? 'Deactivate' : 'Activate'}
+                              />
+                            </form>
+                          </Tooltip>
 
-                          <form
+                          <Tooltip text="Delete">
-                            method="POST"
+                            <form
-                            action={actions.admin.announcement.delete}
+                              method="POST"
-                            class="inline-block"
+                              action={actions.admin.announcement.delete}
-                            data-confirm="Are you sure you want to delete this announcement?"
+                              class="inline-block"
-                          >
+                              data-confirm="Are you sure you want to delete this announcement?"
-                            <input type="hidden" name="id" value={announcement.id} />
-                            <button
-                              type="submit"
-                              class="rounded-md border border-red-500/50 bg-red-500/20 px-1 py-1 text-xs text-red-400 transition-colors hover:bg-red-500/30"
                             >
-                              <Tooltip text="Delete">
+                              <input type="hidden" name="id" value={announcement.id} />
-                                <Icon name="ri:delete-bin-line" class="size-4" />
+                              <Button
-                              </Tooltip>
+                                as="button"
-                            </button>
+                                type="submit"
-                          </form>
+                                color="danger"
+                                variant="faded"
+                                size="sm"
+                                iconOnly
+                                icon="ri:delete-bin-line"
+                                label="Delete"
+                              />
+                            </form>
+                          </Tooltip>
                         </div>
                       </td>
                     </tr>
@@ -648,9 +668,12 @@ if (toggleResult?.error) {
                             <div class="pt-4">
                               <InputSubmitButton label="Save Changes" icon="ri:save-line" hideCancel />
                               <Button
+                                as="button"
                                 type="button"
                                 label="Cancel"
                                 color="gray"
+                                variant="faded"
+                                size="md"
                                 onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
                                 class="ml-2"
                               />

web/src/pages/admin/attributes.astro

@@ -5,7 +5,9 @@ import { actions, isInputError } from 'astro:actions'
 import { z } from 'astro:content'
 import { orderBy as lodashOrderBy } from 'lodash-es'
 
+import Button from '../../components/Button.astro'
 import SortArrowIcon from '../../components/SortArrowIcon.astro'
+import Tooltip from '../../components/Tooltip.astro'
 import { getAttributeCategoryInfo } from '../../constants/attributeCategories'
 import { getAttributeTypeInfo } from '../../constants/attributeTypes'
 import BaseLayout from '../../layouts/BaseLayout.astro'
@@ -136,14 +138,15 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
     <h1 class="font-title text-2xl font-bold text-white">Attribute Management</h1>
     <div class="mt-2 flex items-center gap-4 sm:mt-0">
       <span class="text-sm text-zinc-400">{attributeCount} attributes</span>
-      <button
+      <Button
-        type="button"
+        as="button"
-        class="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none"
+        color="success"
+        variant="solid"
+        size="md"
+        icon="ri:add-line"
+        label="New Attribute"
         onclick="document.getElementById('create-attribute-form').classList.toggle('hidden')"
-      >
+      />
-        <Icon name="ri:add-line" class="size-4" />
-        <span>New Attribute</span>
-      </button>
     </div>
   </div>
 
@@ -286,12 +289,15 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
         </div>
       </div>
 
-      <button
+      <Button
+        as="button"
         type="submit"
-        class="w-full rounded-md bg-green-600 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+        color="success"
-      >
+        variant="solid"
-        Create Attribute
+        size="md"
-      </button>
+        label="Create Attribute"
+        class="w-full"
+      />
     </form>
   </div>
 
@@ -343,12 +349,17 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
               ))
             }
           </select>
-          <button
+          <Button
+            as="button"
             type="submit"
-            class="inline-flex items-center rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+            color="info"
-          >
+            variant="solid"
-            <Icon name="ri:search-2-line" class="h-4 w-4" />
+            size="md"
-          </button>
+            iconOnly
+            icon="ri:search-2-line"
+            label="Search"
+            class="rounded-l-none"
+          />
         </div>
       </div>
     </form>
@@ -519,25 +530,34 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
                     </td>
                     <td class="px-4 py-3 text-right">
                       <div class="flex justify-end gap-2">
-                        <button
+                        <Tooltip text="Edit">
-                          type="button"
+                          <Button
-                          class="inline-flex items-center justify-center rounded-md border border-blue-500/50 bg-blue-500/20 p-1.5 text-blue-400 transition-colors hover:bg-blue-500/30 focus:outline-none"
+                            as="button"
-                          onclick={`document.getElementById('edit-form-${index}').classList.toggle('hidden')`}
+                            color="info"
-                          title="Edit attribute"
+                            variant="faded"
-                        >
+                            size="sm"
-                          <Icon name="ri:edit-line" class="size-3.5" />
+                            iconOnly
-                        </button>
+                            icon="ri:edit-line"
-                        <form method="POST" action={actions.admin.attribute.delete} class="inline-block">
+                            label="Edit"
-                          <input type="hidden" name="id" value={attribute.id} />
+                            onclick={`document.getElementById('edit-form-${index}').classList.toggle('hidden')`}
-                          <button
+                          />
-                            type="submit"
+                        </Tooltip>
-                            class="inline-flex items-center justify-center rounded-md border border-red-500/50 bg-red-500/20 p-1.5 text-red-400 transition-colors hover:bg-red-500/30 focus:outline-none"
+                        <Tooltip text="Delete">
-                            onclick="return confirm('Are you sure you want to delete this attribute?')"
+                          <form method="POST" action={actions.admin.attribute.delete} class="inline-block">
-                            title="Delete attribute"
+                            <input type="hidden" name="id" value={attribute.id} />
-                          >
+                            <Button
-                            <Icon name="ri:delete-bin-line" class="size-3.5" />
+                              as="button"
-                          </button>
+                              type="submit"
-                        </form>
+                              color="danger"
+                              variant="faded"
+                              size="sm"
+                              iconOnly
+                              icon="ri:delete-bin-line"
+                              label="Delete"
+                              onclick="return confirm('Are you sure you want to delete this attribute?')"
+                            />
+                          </form>
+                        </Tooltip>
                       </div>
                     </td>
                   </tr>
@@ -673,19 +693,23 @@ const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
                         </div>
 
                         <div class="flex justify-end space-x-3">
-                          <button
+                          <Button
-                            type="button"
+                            as="button"
-                            class="rounded-md border border-zinc-600 bg-zinc-800 px-3 py-2 text-sm font-medium text-zinc-300 hover:bg-zinc-700 focus:outline-none"
+                            color="gray"
+                            variant="faded"
+                            size="sm"
+                            label="Cancel"
                             onclick={`document.getElementById('edit-form-${index}').classList.toggle('hidden')`}
-                          >
+                          />
-                            Cancel
+                          <Button
-                          </button>
+                            as="button"
-                          <button
                             type="submit"
-                            class="rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+                            color="info"
-                          >
+                            variant="solid"
-                            Save Changes
+                            size="sm"
-                          </button>
+                            icon="ri:save-line"
+                            label="Save"
+                          />
                         </div>
                       </form>
                     </td>

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

@@ -2,10 +2,14 @@
 import { Icon } from 'astro-icon/components'
 import { actions } from 'astro:actions'
 
+import Button from '../../../components/Button.astro'
 import Chat from '../../../components/Chat.astro'
 import ServiceCard from '../../../components/ServiceCard.astro'
 import UserBadge from '../../../components/UserBadge.astro'
-import { getServiceSuggestionStatusInfo } from '../../../constants/serviceSuggestionStatus'
+import {
+  getServiceSuggestionStatusInfo,
+  serviceSuggestionStatuses,
+} from '../../../constants/serviceSuggestionStatus'
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { cn } from '../../../lib/cn'
 import { parseIntWithFallback } from '../../../lib/numbers'
@@ -96,13 +100,15 @@ const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
   widthClassName="max-w-screen-md"
 >
   <div class="mb-4 flex items-center gap-4">
-    <a
+    <Button
+      as="a"
       href="/admin/service-suggestions"
-      class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-3 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
+      color="success"
-    >
+      variant="faded"
-      <Icon name="ri:arrow-left-s-line" class="mr-1 size-4" />
+      size="md"
-      Back
+      icon="ri:arrow-left-s-line"
-    </a>
+      label="Back"
+    />
 
     <h1 class="font-title text-xl text-green-500">Service Suggestion</h1>
   </div>
@@ -170,17 +176,23 @@ const statusInfo = getServiceSuggestionStatusInfo(serviceSuggestion.status)
           name="status"
           class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-sm text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500 disabled:opacity-50"
         >
-          <option value="PENDING" selected={serviceSuggestion.status === 'PENDING'}> Pending </option>
+          {
-          <option value="APPROVED" selected={serviceSuggestion.status === 'APPROVED'}> Approve </option>
+            serviceSuggestionStatuses.map((status) => (
-          <option value="REJECTED" selected={serviceSuggestion.status === 'REJECTED'}> Reject </option>
+              <option value={status.value} selected={serviceSuggestion.status === status.value}>
-          <option value="WITHDRAWN" selected={serviceSuggestion.status === 'WITHDRAWN'}> Withdrawn </option>
+                {status.label}
+              </option>
+            ))
+          }
         </select>
-        <button
+        <Button
+          as="button"
           type="submit"
-          class="font-title inline-flex items-center justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
+          color="success"
-        >
+          variant="faded"
-          <Icon name="ri:save-line" class="mr-1 size-4" /> Update
+          size="md"
-        </button>
+          icon="ri:save-line"
+          label="Update"
+        />
       </form>
     </div>
 

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

@@ -4,8 +4,10 @@ import { actions } from 'astro:actions'
 import { z } from 'astro:content'
 import { orderBy } from 'lodash-es'
 
+import Button from '../../../components/Button.astro'
 import SortArrowIcon from '../../../components/SortArrowIcon.astro'
 import TimeFormatted from '../../../components/TimeFormatted.astro'
+import Tooltip from '../../../components/Tooltip.astro'
 import UserBadge from '../../../components/UserBadge.astro'
 import {
   getServiceSuggestionStatusInfo,
@@ -183,12 +185,16 @@ const makeSortUrl = (slug: string) => {
         </select>
       </div>
       <div class="flex items-end">
-        <button
+        <Button
+          as="button"
           type="submit"
-          class="inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+          color="info"
-        >
+          variant="solid"
-          <Icon name="ri:search-2-line" class="h-4 w-4" />
+          size="md"
-        </button>
+          iconOnly
+          icon="ri:search-2-line"
+          label="Search"
+        />
       </div>
     </form>
   </div>
@@ -317,13 +323,18 @@ const makeSortUrl = (slug: string) => {
                   </td>
                   <td class="px-4 py-3 text-right">
                     <div class="flex justify-end gap-1">
-                      <a
+                      <Tooltip text="Manage">
-                        href={`/admin/service-suggestions/${suggestion.id}`}
+                        <Button
-                        class="inline-flex items-center justify-center rounded-full border border-green-500/40 bg-green-500/10 p-1.5 text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
+                          as="a"
-                        title="View"
+                          href={`/admin/service-suggestions/${suggestion.id}`}
-                      >
+                          color="success"
-                        <Icon name="ri:external-link-line" class="size-4" />
+                          variant="faded"
-                      </a>
+                          size="sm"
+                          iconOnly
+                          icon="ri:arrow-right-line"
+                          label="Manage"
+                        />
+                      </Tooltip>
                     </div>
                   </td>
                 </tr>

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

@@ -1,5 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components'
+import { Markdown } from 'astro-remote'
 import { actions, isInputError } from 'astro:actions'
 import { orderBy } from 'lodash-es'
 
@@ -27,46 +28,63 @@ import { eventTypes, getEventTypeInfo } from '../../../../constants/eventTypes'
 import { kycLevels } from '../../../../constants/kycLevels'
 import { serviceVisibilities } from '../../../../constants/serviceVisibility'
 import { verificationStatuses } from '../../../../constants/verificationStatus'
-import { getVerificationStepStatusInfo } from '../../../../constants/verificationStepStatus'
+import {
+  getVerificationStepStatusInfo,
+  verificationStepStatuses,
+} from '../../../../constants/verificationStepStatus'
 import BaseLayout from '../../../../layouts/BaseLayout.astro'
 import { pluralize } from '../../../../lib/pluralize'
 import { prisma } from '../../../../lib/prisma'
 
 const { slug } = Astro.params
 
-const serviceResult = Astro.getActionResult(actions.admin.service.update)
+if (!slug) return Astro.rewrite('/404')
-const eventCreateResult = Astro.getActionResult(actions.admin.event.create)
-const eventToggleResult = Astro.getActionResult(actions.admin.event.toggle)
-const eventDeleteResult = Astro.getActionResult(actions.admin.event.delete)
-const eventUpdateResult = Astro.getActionResult(actions.admin.event.update)
-const verificationStepCreateResult = Astro.getActionResult(actions.admin.verificationStep.create)
-const verificationStepUpdateResult = Astro.getActionResult(actions.admin.verificationStep.update)
-const verificationStepDeleteResult = Astro.getActionResult(actions.admin.verificationStep.delete)
 
+const serviceResult = Astro.getActionResult(actions.admin.service.update)
 Astro.locals.banners.addIfSuccess(serviceResult, 'Service updated successfully')
-Astro.locals.banners.addIfSuccess(eventCreateResult, 'Event created successfully')
+const serviceInputErrors = isInputError(serviceResult?.error) ? serviceResult.error.fields : {}
-Astro.locals.banners.addIfSuccess(eventToggleResult, 'Event visibility updated successfully')
-Astro.locals.banners.addIfSuccess(eventDeleteResult, 'Event deleted successfully')
-Astro.locals.banners.addIfSuccess(eventUpdateResult, 'Event updated successfully')
-Astro.locals.banners.addIfSuccess(verificationStepCreateResult, 'Verification step added successfully')
-Astro.locals.banners.addIfSuccess(verificationStepUpdateResult, 'Verification step updated successfully')
-Astro.locals.banners.addIfSuccess(verificationStepDeleteResult, 'Verification step deleted successfully')
 
 if (serviceResult && !serviceResult.error && slug !== serviceResult.data.service.slug) {
   return Astro.redirect(`/admin/services/${serviceResult.data.service.slug}/edit`)
 }
 
-const serviceInputErrors = isInputError(serviceResult?.error) ? serviceResult.error.fields : {}
+const eventCreateResult = Astro.getActionResult(actions.admin.event.create)
+Astro.locals.banners.addIfSuccess(eventCreateResult, 'Event created successfully')
 const eventInputErrors = isInputError(eventCreateResult?.error) ? eventCreateResult.error.fields : {}
+
+const eventUpdateResult = Astro.getActionResult(actions.admin.event.update)
+Astro.locals.banners.addIfSuccess(eventUpdateResult, 'Event updated successfully')
 const eventUpdateInputErrors = isInputError(eventUpdateResult?.error) ? eventUpdateResult.error.fields : {}
+
+const eventToggleResult = Astro.getActionResult(actions.admin.event.toggle)
+Astro.locals.banners.addIfSuccess(eventToggleResult, 'Event visibility updated successfully')
+
+const eventDeleteResult = Astro.getActionResult(actions.admin.event.delete)
+Astro.locals.banners.addIfSuccess(eventDeleteResult, 'Event deleted successfully')
+
+const verificationStepCreateResult = Astro.getActionResult(actions.admin.verificationStep.create)
+Astro.locals.banners.addIfSuccess(verificationStepCreateResult, 'Verification step added successfully')
 const verificationStepInputErrors = isInputError(verificationStepCreateResult?.error)
   ? verificationStepCreateResult.error.fields
   : {}
+
+const verificationStepUpdateResult = Astro.getActionResult(actions.admin.verificationStep.update)
+Astro.locals.banners.addIfSuccess(verificationStepUpdateResult, 'Verification step updated successfully')
 const verificationStepUpdateInputErrors = isInputError(verificationStepUpdateResult?.error)
   ? verificationStepUpdateResult.error.fields
   : {}
 
-if (!slug) return Astro.rewrite('/404')
+const verificationStepDeleteResult = Astro.getActionResult(actions.admin.verificationStep.delete)
+Astro.locals.banners.addIfSuccess(verificationStepDeleteResult, 'Verification step deleted successfully')
+
+const internalNoteCreateResult = Astro.getActionResult(actions.admin.service.internalNote.add)
+Astro.locals.banners.addIfSuccess(internalNoteCreateResult, 'Internal note added successfully')
+const internalNoteInputErrors = isInputError(internalNoteCreateResult?.error)
+  ? internalNoteCreateResult.error.fields
+  : {}
+
+const internalNoteDeleteResult = Astro.getActionResult(actions.admin.service.internalNote.delete)
+Astro.locals.banners.addIfSuccess(internalNoteDeleteResult, 'Internal note deleted successfully')
 
 const [service, categories, attributes] = await Astro.locals.banners.tryMany([
   [
@@ -122,6 +140,20 @@ const [service, categories, attributes] = await Astro.locals.banners.tryMany([
               label: 'asc',
             },
           },
+          internalNotes: {
+            include: {
+              addedByUser: {
+                select: {
+                  name: true,
+                  displayName: true,
+                  picture: true,
+                },
+              },
+            },
+            orderBy: {
+              createdAt: 'desc',
+            },
+          },
           _count: {
             select: {
               verificationRequests: true,
@@ -253,6 +285,7 @@ if (!service) return Astro.rewrite('/404')
             inputProps={{
               rows: 3,
               placeholder: 'https://example1.com/tos\nhttps://example2.com/tos',
+              required: true,
             }}
             value={service.tosUrls.join('\n')}
             error={serviceInputErrors.tosUrls}
@@ -281,25 +314,36 @@ if (!service) return Astro.rewrite('/404')
         </div>
 
         <InputText
-          label="Referral Code/Link"
+          label="Referral link path"
           name="referral"
           inputProps={{
-            value: service.referral ?? undefined,
+            value: service.referral,
-            placeholder: 'e.g., REFCODE123 or https://example.com?ref=123',
+            placeholder: 'e.g. ?ref=123 or /ref/123',
           }}
           error={serviceInputErrors.referral}
+          description="Will be appended to the service URL"
         />
 
-        <InputImageFile
+        <div class="flex items-center justify-between gap-2">
-          label="Image"
+          <InputImageFile
-          name="imageFile"
+            label="Image"
-          description="Square image. At least 192x192px. Transparency supported. Leave empty to keep current image."
+            name="imageFile"
-          error={serviceInputErrors.imageFile}
+            description="Square image. At least 192x192px. Transparency supported. Leave empty to keep current image."
-          square
+            error={serviceInputErrors.imageFile}
-          value={service.imageUrl}
+            square
-        />
+            value={service.imageUrl}
+            downloadButton
+            removeCheckbox={service.imageUrl
+              ? {
+                  name: 'removeImage',
+                  label: 'Remove image',
+                }
+              : undefined}
+            class="grow"
+          />
+        </div>
 
-        <div class="grid grid-cols-1 items-stretch gap-x-4 gap-y-6 sm:grid-cols-[1fr_2fr]">
+        <div class="xs:grid-cols-[1fr_2fr] grid grid-cols-1 items-stretch gap-x-4 gap-y-6">
           <InputCheckboxGroup
             name="categories"
             label="Categories"
@@ -312,6 +356,7 @@ if (!service) return Astro.rewrite('/404')
             }))}
             selectedValues={service.categories.map((c) => c.id.toString())}
             error={serviceInputErrors.categories}
+            class="min-w-auto"
           />
 
           <InputCheckboxGroup
@@ -428,6 +473,108 @@ if (!service) return Astro.rewrite('/404')
       </form>
     </FormSection>
 
+    <FormSection title="Internal Notes" id="internal-notes">
+      <FormSubSection title="Existing Notes">
+        {
+          service.internalNotes.length === 0 ? (
+            <p class="border-night-600 bg-night-800 text-day-300 rounded-xl border p-6 text-center">
+              No internal notes yet.
+            </p>
+          ) : (
+            <div class="space-y-4">
+              {service.internalNotes.map((note) => (
+                <div class="border-night-600 bg-night-800 rounded-md border p-4">
+                  <input
+                    type="checkbox"
+                    class="peer/edit-note sr-only"
+                    data-edit-note-checkbox
+                    id={`edit-note-${note.id}`}
+                  />
+
+                  <div class="flex items-start justify-between">
+                    <div class="flex-grow space-y-1">
+                      <div
+                        data-note-content
+                        class="prose text-day-200 prose-sm prose-invert max-w-none text-pretty"
+                      >
+                        <Markdown content={note.content} />
+                      </div>
+                      <div class="text-day-500 flex items-center gap-2 text-xs">
+                        <TimeFormatted date={note.createdAt} hourPrecision />
+                        {note.addedByUser && (
+                          <span class="flex items-center gap-1">
+                            by <UserBadge user={note.addedByUser} size="sm" />
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    <div class="flex items-center gap-1">
+                      <Button
+                        as="label"
+                        for={`edit-note-${note.id}`}
+                        variant="faded"
+                        size="sm"
+                        icon="ri:edit-line"
+                        iconOnly
+                        label="Edit"
+                      />
+
+                      <form method="POST" action={actions.admin.service.internalNote.delete} class="contents">
+                        <input type="hidden" name="noteId" value={note.id} />
+                        <Button
+                          type="submit"
+                          size="sm"
+                          variant="faded"
+                          icon="ri:delete-bin-line"
+                          iconOnly
+                          label="Delete"
+                        />
+                      </form>
+                    </div>
+                  </div>
+
+                  <form
+                    method="POST"
+                    action={actions.admin.service.internalNote.update}
+                    data-note-edit-form
+                    data-astro-reload
+                    class="mt-4 hidden space-y-4 peer-checked/edit-note:block"
+                  >
+                    <input type="hidden" name="noteId" value={note.id} />
+                    <InputTextArea
+                      label="Note Content"
+                      name="content"
+                      value={note.content}
+                      inputProps={{ class: 'bg-night-700' }}
+                    />
+                    <InputSubmitButton label="Save" icon="ri:save-line" hideCancel />
+                  </form>
+                </div>
+              ))}
+            </div>
+          )
+        }
+      </FormSubSection>
+
+      <FormSubSection title="Add New Note">
+        <form method="POST" action={actions.admin.service.internalNote.add} class="space-y-4">
+          <input type="hidden" name="serviceId" value={service.id} />
+          <InputTextArea
+            label="Note Content"
+            name="content"
+            inputProps={{
+              required: true,
+              rows: 4,
+              placeholder: 'Add internal note about this service...',
+            }}
+            error={internalNoteInputErrors.content}
+          />
+          <InputSubmitButton label="Add Note" icon="ri:add-line" hideCancel />
+        </form>
+      </FormSubSection>
+    </FormSection>
+
     <FormSection title="Events">
       <FormSubSection title="Existing Events">
         {
@@ -470,28 +617,43 @@ if (!service) return Astro.rewrite('/404')
                         </div>
                       </div>
                       <div class="flex shrink-0 gap-1.5">
-                        <form method="POST" action={actions.admin.event.toggle} class="contents">
+                        <Tooltip text={event.visible ? 'Hide' : 'Show'}>
-                          <input type="hidden" name="eventId" value={event.id} />
+                          <form method="POST" action={actions.admin.event.toggle} class="contents">
-                          <Tooltip text={event.visible ? 'Hide Event' : 'Show Event'}>
+                            <input type="hidden" name="eventId" value={event.id} />
                             <Button
                               type="submit"
                               variant="faded"
                               size="sm"
                               icon={event.visible ? 'ri:eye-off-line' : 'ri:eye-line'}
+                              iconOnly
+                              label={event.visible ? 'Hide' : 'Show'}
                             />
-                          </Tooltip>
+                          </form>
-                        </form>
+                        </Tooltip>
-                        <Button
+                        <Tooltip text="Edit">
-                          type="button"
+                          <Button
-                          variant="faded"
+                            type="button"
-                          size="sm"
+                            variant="faded"
-                          icon="ri:pencil-line"
+                            size="sm"
-                          onclick={`document.getElementById('edit-event-${event.id}')?.classList.toggle('hidden')`}
+                            icon="ri:pencil-line"
-                        />
+                            onclick={`document.getElementById('edit-event-${event.id}')?.classList.toggle('hidden')`}
-                        <form method="POST" action={actions.admin.event.delete} class="contents">
+                            iconOnly
-                          <input type="hidden" name="eventId" value={event.id} />
+                            label="Edit"
-                          <Button type="submit" size="sm" variant="faded" icon="ri:delete-bin-line" />
+                          />
-                        </form>
+                        </Tooltip>
+                        <Tooltip text="Delete">
+                          <form method="POST" action={actions.admin.event.delete} class="contents">
+                            <input type="hidden" name="eventId" value={event.id} />
+                            <Button
+                              type="submit"
+                              size="sm"
+                              variant="faded"
+                              icon="ri:delete-bin-line"
+                              iconOnly
+                              label="Delete"
+                            />
+                          </form>
+                        </Tooltip>
                       </div>
                     </div>
                     {/* Edit Event Form - Hidden by default */}
@@ -665,17 +827,30 @@ if (!service) return Astro.rewrite('/404')
                         </p>
                       </div>
                       <div class="flex shrink-0 gap-1.5">
-                        <Button
+                        <Tooltip text="Edit">
-                          type="button"
+                          <Button
-                          size="sm"
+                            type="button"
-                          variant="faded"
+                            size="sm"
-                          icon="ri:pencil-line"
+                            variant="faded"
-                          onclick={`document.getElementById('edit-verification-step-${step.id}')?.classList.toggle('hidden')`}
+                            icon="ri:pencil-line"
-                        />
+                            onclick={`document.getElementById('edit-verification-step-${step.id}')?.classList.toggle('hidden')`}
-                        <form method="POST" action={actions.admin.verificationStep.delete} class="inline">
+                            iconOnly
-                          <input type="hidden" name="id" value={step.id} />
+                            label="Edit"
-                          <Button type="submit" size="sm" variant="faded" icon="ri:delete-bin-line" />
+                          />
-                        </form>
+                        </Tooltip>
+                        <Tooltip text="Delete">
+                          <form method="POST" action={actions.admin.verificationStep.delete} class="inline">
+                            <input type="hidden" name="id" value={step.id} />
+                            <Button
+                              type="submit"
+                              size="sm"
+                              variant="faded"
+                              icon="ri:delete-bin-line"
+                              iconOnly
+                              label="Delete"
+                            />
+                          </form>
+                        </Tooltip>
                       </div>
                     </div>
 
@@ -715,7 +890,7 @@ if (!service) return Astro.rewrite('/404')
                       <InputSelect
                         label="Status"
                         name="status"
-                        options={verificationStatuses.map((status) => ({
+                        options={verificationStepStatuses.map((status) => ({
                           label: status.label,
                           value: status.value,
                         }))}
@@ -763,7 +938,7 @@ if (!service) return Astro.rewrite('/404')
           <InputSelect
             label="Status"
             name="status"
-            options={verificationStatuses.map((status) => ({
+            options={verificationStepStatuses.map((status) => ({
               label: status.label,
               value: status.value,
             }))}
@@ -836,21 +1011,34 @@ if (!service) return Astro.rewrite('/404')
                         <p class="text-day-400 text-sm text-pretty">{method.value}</p>
                       </div>
                       <div class="flex shrink-0 gap-1.5">
-                        <Button
+                        <Tooltip text="Edit">
-                          type="button"
+                          <Button
-                          variant="faded"
+                            type="button"
-                          size="sm"
+                            variant="faded"
-                          icon="ri:pencil-line"
+                            size="sm"
-                          onclick={`document.getElementById('edit-contact-method-${method.id}')?.classList.toggle('hidden')`}
+                            icon="ri:pencil-line"
-                        />
+                            onclick={`document.getElementById('edit-contact-method-${method.id}')?.classList.toggle('hidden')`}
-                        <form
+                            iconOnly
-                          method="POST"
+                            label="Edit"
-                          action={actions.admin.service.deleteContactMethod}
+                          />
-                          class="contents"
+                        </Tooltip>
-                        >
+                        <Tooltip text="Delete">
-                          <input type="hidden" name="id" value={method.id} />
+                          <form
-                          <Button type="submit" size="sm" variant="faded" icon="ri:delete-bin-line" />
+                            method="POST"
-                        </form>
+                            action={actions.admin.service.contactMethod.delete}
+                            class="contents"
+                          >
+                            <input type="hidden" name="id" value={method.id} />
+                            <Button
+                              type="submit"
+                              size="sm"
+                              variant="faded"
+                              icon="ri:delete-bin-line"
+                              iconOnly
+                              label="Delete"
+                            />
+                          </form>
+                        </Tooltip>
                       </div>
                     </div>
 
@@ -858,7 +1046,7 @@ if (!service) return Astro.rewrite('/404')
                     <form
                       id={`edit-contact-method-${method.id}`}
                       method="POST"
-                      action={actions.admin.service.updateContactMethod}
+                      action={actions.admin.service.contactMethod.update}
                       class="border-night-500 bg-night-700 mt-3 hidden space-y-3 rounded-md border p-3"
                     >
                       <input type="hidden" name="id" value={method.id} />
@@ -893,7 +1081,7 @@ if (!service) return Astro.rewrite('/404')
       </FormSubSection>
 
       <FormSubSection title="Add New Contact Method">
-        <form method="POST" action={actions.admin.service.createContactMethod} class="space-y-2">
+        <form method="POST" action={actions.admin.service.contactMethod.add} class="space-y-2">
           <input type="hidden" name="serviceId" value={service.id} />
 
           <InputText label="Override Label" name="label" />

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

@@ -3,10 +3,13 @@ import { ServiceVisibility, VerificationStatus, type Prisma } from '@prisma/clie
 import { z } from 'astro/zod'
 import { Icon } from 'astro-icon/components'
 
+import Button from '../../../components/Button.astro'
 import MyPicture from '../../../components/MyPicture.astro'
 import SortArrowIcon from '../../../components/SortArrowIcon.astro'
+import Tooltip from '../../../components/Tooltip.astro'
 import { getKycLevelInfo } from '../../../constants/kycLevels'
-import { getVerificationStatusInfo } from '../../../constants/verificationStatus'
+import { serviceVisibilities } from '../../../constants/serviceVisibility'
+import { getVerificationStatusInfo, verificationStatuses } from '../../../constants/verificationStatus'
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { cn } from '../../../lib/cn'
 import { zodParseQueryParamsStoringErrors } from '../../../lib/parseUrlFilters'
@@ -108,6 +111,7 @@ const services = await Astro.locals.banners.try(
         _count: {
           select: {
             verificationRequests: true,
+            internalNotes: true,
           },
         },
       },
@@ -171,13 +175,15 @@ const truncate = (text: string, length: number) => {
     <h1 class="font-title text-2xl font-bold text-white">Service Management</h1>
     <div class="mt-2 flex items-center gap-4 sm:mt-0">
       <span class="text-sm text-zinc-400">{totalServicesCount} services</span>
-      <a
+      <Button
+        as="a"
         href="/admin/services/new"
-        class="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none"
+        color="success"
-      >
+        variant="solid"
-        <Icon name="ri:add-line" class="size-4" />
+        size="md"
-        <span>New Service</span>
+        icon="ri:add-line"
-      </a>
+        label="New Service"
+      />
     </div>
   </div>
 
@@ -205,11 +211,11 @@ const truncate = (text: string, length: number) => {
           id="visibility"
           class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
         >
-          <option value="">All Visibilities</option>
+          <option value="">All</option>
           {
-            Object.values(ServiceVisibility).map((status) => (
+            serviceVisibilities.map((visibility) => (
-              <option value={status} selected={filters.visibility === status}>
+              <option value={visibility.value} selected={filters.visibility === visibility.value}>
-                {status}
+                {visibility.label}
               </option>
             ))
           }
@@ -223,11 +229,11 @@ const truncate = (text: string, length: number) => {
           id="verificationStatus"
           class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
         >
-          <option value="">All Statuses</option>
+          <option value="">All</option>
           {
-            Object.values(VerificationStatus).map((status) => (
+            verificationStatuses.map((status) => (
-              <option value={status} selected={filters.verificationStatus === status}>
+              <option value={status.value} selected={filters.verificationStatus === status.value}>
-                {status}
+                {status.label}
               </option>
             ))
           }
@@ -250,12 +256,17 @@ const truncate = (text: string, length: number) => {
               ))
             }
           </select>
-          <button
+          <Button
+            as="button"
             type="submit"
-            class="ml-2 inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+            color="info"
-          >
+            variant="solid"
-            <Icon name="ri:search-2-line" class="h-4 w-4" />
+            size="md"
-          </button>
+            iconOnly
+            icon="ri:search-2-line"
+            label="Search"
+            class="ml-2"
+          />
         </div>
       </div>
     </form>
@@ -430,27 +441,46 @@ const truncate = (text: string, length: number) => {
                     </div>
                   </td>
                   <td class="px-4 py-3 text-center">
-                    <span class="inline-flex items-center rounded-full bg-orange-900/30 px-2.5 py-0.5 text-xs text-orange-400">
+                    <div class="flex flex-col items-center justify-center gap-1">
-                      {service._count.verificationRequests}
+                      <span class="inline-flex items-center rounded-full bg-orange-900/30 px-2.5 py-0.5 text-xs text-orange-400">
-                    </span>
+                        {service._count.verificationRequests}
+                      </span>
+
+                      {service._count.internalNotes > 0 && (
+                        <span class="inline-flex items-center text-purple-400">
+                          <Icon name="ri:sticky-note-line" class="mr-0.5 size-4" />
+                          {service._count.internalNotes}
+                        </span>
+                      )}
+                    </div>
                   </td>
                   <td class="px-4 py-3 text-center text-xs text-zinc-400">{service.formattedDate}</td>
                   <td class="px-4 py-3 text-right">
                     <div class="flex justify-end space-x-2">
-                      <a
+                      <Tooltip text="View">
-                        href={`/service/${service.slug}`}
+                        <Button
-                        target="_blank"
+                          as="a"
-                        class="inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-2 py-1 text-xs text-zinc-300 transition-colors hover:bg-zinc-700"
+                          href={`/service/${service.slug}`}
-                        title="View on site"
+                          color="success"
-                      >
+                          variant="faded"
-                        <Icon name="ri:external-link-line" class="size-3.5" />
+                          size="sm"
-                      </a>
+                          iconOnly
-                      <a
+                          icon="ri:global-line"
-                        href={`/admin/services/${service.slug}/edit`}
+                          label="View"
-                        class="inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-2 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
+                        />
-                      >
+                      </Tooltip>
-                        Edit
+                      <Tooltip text="Edit">
-                      </a>
+                        <Button
+                          as="a"
+                          href={`/admin/services/${service.slug}/edit`}
+                          color="info"
+                          variant="faded"
+                          size="sm"
+                          iconOnly
+                          icon="ri:edit-line"
+                          label="Edit"
+                        />
+                      </Tooltip>
                     </div>
                   </td>
                 </tr>

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

@@ -350,13 +350,13 @@ const inputErrors = isInputError(result?.error) ? result.error.fields : {}
       </div>
 
       <div>
-        <label class="font-title mb-2 block text-sm text-green-500" for="referral">referral</label>
+        <label class="font-title mb-2 block text-sm text-green-500" for="referral">referral link path</label>
         <input
           transition:persist
           type="text"
           name="referral"
           id="referral"
-          placeholder="Optional referral code/link"
+          placeholder="e.g. ?ref=123 or /ref/123"
           class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
         />
         {
@@ -366,6 +366,26 @@ const inputErrors = isInputError(result?.error) ? result.error.fields : {}
         }
       </div>
 
+      <div>
+        <label for="internalNote" class="font-title mb-2 block text-sm text-green-500">internalNote</label>
+        <div class="space-y-2">
+          <textarea
+            transition:persist
+            name="internalNote"
+            id="internalNote"
+            rows={4}
+            placeholder="Markdown supported"
+            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
+            set:text=""
+          />
+        </div>
+        {
+          inputErrors.internalNote && (
+            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.internalNote.join(', ')}</p>
+          )
+        }
+      </div>
+
       <button
         type="submit"
         class="font-title inline-flex justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"

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

@@ -1,5 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components'
+import { Markdown } from 'astro-remote'
 import { actions, isInputError } from 'astro:actions'
 
 import BadgeSmall from '../../../components/BadgeSmall.astro'
@@ -304,8 +305,8 @@ if (!user) return Astro.rewrite('/404')
                 </div>
               </div>
 
-              <div data-note-content>
+              <div data-note-content class="prose prose-sm text-day-200 prose-invert max-w-none text-pretty">
-                <p class="text-day-200 wrap-anywhere whitespace-pre-wrap" set:text={note.content} />
+                <Markdown content={note.content} />
               </div>
 
               <form

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

@@ -3,6 +3,7 @@ import { Icon } from 'astro-icon/components'
 import { z } from 'astro:content'
 import { orderBy as lodashOrderBy } from 'lodash-es'
 
+import Button from '../../../components/Button.astro'
 import SortArrowIcon from '../../../components/SortArrowIcon.astro'
 import TimeFormatted from '../../../components/TimeFormatted.astro'
 import Tooltip from '../../../components/Tooltip.astro'
@@ -151,12 +152,17 @@ const makeSortUrl = (sortBy: NonNullable<(typeof filters)['sort-by']>) => {
             <option value="verified" selected={filters.role === 'verified'}>Verified Users</option>
             <option value="spammer" selected={filters.role === 'spammer'}>Spammers</option>
           </select>
-          <button
+          <Button
+            as="button"
             type="submit"
-            class="inline-flex items-center rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
+            color="info"
-          >
+            variant="solid"
-            <Icon name="ri:search-2-line" class="h-4 w-4" />
+            size="md"
-          </button>
+            iconOnly
+            icon="ri:search-2-line"
+            label="Search"
+            class="rounded-l-none"
+          />
         </div>
       </div>
     </form>
@@ -320,30 +326,43 @@ const makeSortUrl = (sortBy: NonNullable<(typeof filters)['sort-by']>) => {
                   </td>
                   <td class="px-4 py-3">
                     <div class="flex justify-center gap-2">
-                      <Tooltip
+                      <Tooltip text="Impersonate">
-                        as="a"
+                        <Button
-                        href={`/account/impersonate?targetUserId=${user.id}&redirect=/account`}
+                          as="a"
-                        data-astro-prefetch="tap"
+                          href={`/account/impersonate?targetUserId=${user.id}&redirect=/account`}
-                        class="inline-flex items-center rounded-md border border-orange-500/50 bg-orange-500/20 px-1 py-1 text-xs text-orange-400 transition-colors hover:bg-orange-500/30"
+                          data-astro-prefetch="tap"
-                        text="Impersonate"
+                          color="warning"
-                      >
+                          variant="faded"
-                        <Icon name="ri:spy-line" class="size-4" />
+                          size="sm"
+                          iconOnly
+                          icon="ri:spy-line"
+                          label="Impersonate"
+                          disabled={user.admin}
+                        />
                       </Tooltip>
-                      <Tooltip
+                      <Tooltip text="Edit">
-                        as="a"
+                        <Button
-                        href={`/admin/users/${user.name}`}
+                          as="a"
-                        class="inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-1 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
+                          href={`/admin/users/${user.name}`}
-                        text="Edit"
+                          color="info"
-                      >
+                          variant="faded"
-                        <Icon name="ri:edit-line" class="size-4" />
+                          size="sm"
+                          iconOnly
+                          icon="ri:edit-line"
+                          label="Edit"
+                        />
                       </Tooltip>
-                      <Tooltip
+                      <Tooltip text="Public profile">
-                        as="a"
+                        <Button
-                        href={`/u/${user.name}`}
+                          as="a"
-                        class="inline-flex items-center rounded-md border border-green-500/50 bg-green-500/20 px-1 py-1 text-xs text-green-400 transition-colors hover:bg-green-500/30"
+                          href={`/u/${user.name}`}
-                        text="Public profile"
+                          color="success"
-                      >
+                          variant="faded"
-                        <Icon name="ri:global-line" class="size-4" />
+                          size="sm"
+                          iconOnly
+                          icon="ri:global-line"
+                          label="Public profile"
+                        />
                       </Tooltip>
                     </div>
                   </td>

web/src/pages/index.astro

@@ -1,5 +1,4 @@
 ---
-import { ServiceVisibility } from '@prisma/client'
 import { z } from 'astro:schema'
 import { groupBy, omit, orderBy, uniq } from 'lodash-es'
 import seedrandom from 'seedrandom'
@@ -222,7 +221,9 @@ const where = {
   verificationStatus: {
     in: includeScams ? uniq([...filters.verification, 'VERIFICATION_FAILED'] as const) : filters.verification,
   },
-  serviceVisibility: ServiceVisibility.PUBLIC,
+  serviceVisibility: {
+    in: ['PUBLIC', 'ARCHIVED'],
+  },
   overallScore: { gte: filters['min-score'] },
   acceptedCurrencies: filters.currencies.length
     ? filters['currency-mode'] === 'and'
@@ -322,7 +323,13 @@ const [categories, [services, totalServices], countCommunityOnly, attributes] =
             icon: true,
             _count: {
               select: {
-                services: true,
+                services: {
+                  where: {
+                    serviceVisibility: {
+                      in: ['PUBLIC', 'ARCHIVED'],
+                    },
+                  },
+                },
               },
             },
           },
@@ -368,6 +375,7 @@ const [categories, [services, totalServices], countCommunityOnly, attributes] =
             imageUrl: true,
             verificationStatus: true,
             acceptedCurrencies: true,
+            serviceVisibility: true,
             attributes: {
               select: {
                 attribute: {
@@ -530,6 +538,7 @@ const showFiltersId = 'show-filters'
             hx-trigger="input delay:500ms, keyup[key=='Enter']"
             hx-target={`#${searchResultsId}`}
             hx-select={`#${searchResultsId}`}
+            hx-swap="outerHTML"
             hx-push-url="true"
             hx-indicator="#search-indicator"
             class="contents"

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

@@ -53,6 +53,7 @@ const service = await Astro.locals.banners.try(
             icon: true,
           },
         },
+        serviceVisibility: true,
       },
       where: { id: params.serviceId },
     }),
@@ -101,7 +102,7 @@ if (!service) return Astro.rewrite('/404')
       error={inputErrors.notes}
     />
 
-    <Captcha action={actions.serviceSuggestion.createService} />
+    <Captcha action={actions.serviceSuggestion.editService} />
 
     <InputHoneypotTrap name="message" />
 

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

@@ -1,6 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components'
 import { actions, isInputError } from 'astro:actions'
+import { orderBy } from 'lodash-es'
 
 import {
   SUGGESTION_DESCRIPTION_MAX_LENGTH,
@@ -16,6 +17,8 @@ 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 { getAttributeCategoryInfo } from '../../constants/attributeCategories'
+import { getAttributeTypeInfo } from '../../constants/attributeTypes'
 import { currencies } from '../../constants/currencies'
 import { kycLevels } from '../../constants/kycLevels'
 import BaseLayout from '../../layouts/BaseLayout.astro'
@@ -55,6 +58,8 @@ const [categories, attributes] = await Astro.locals.banners.tryMany([
         select: {
           id: true,
           title: true,
+          category: true,
+          type: true,
         },
       }),
     [],
@@ -241,27 +246,41 @@ const [categories, attributes] = await Astro.locals.banners.tryMany([
       error={inputErrors.kycLevel}
     />
 
-    <InputCheckboxGroup
+    <div class="xs:grid-cols-[1fr_2fr] grid grid-cols-1 items-stretch gap-x-4 gap-y-6">
-      name="categories"
+      <InputCheckboxGroup
-      label="Categories"
+        name="categories"
-      required
+        label="Categories"
-      options={categories.map((category) => ({
+        required
-        label: category.name,
+        options={categories.map((category) => ({
-        value: category.id.toString(),
+          label: category.name,
-        icon: category.icon,
+          value: category.id.toString(),
-      }))}
+          icon: category.icon,
-      error={inputErrors.categories}
+        }))}
-    />
+        size="lg"
+        error={inputErrors.categories}
+        class="min-w-auto"
+      />
 
-    <InputCheckboxGroup
+      <InputCheckboxGroup
-      name="attributes"
+        name="attributes"
-      label="Attributes"
+        label="Attributes"
-      options={attributes.map((attribute) => ({
+        options={orderBy(
-        label: attribute.title,
+          attributes.map((attribute) => ({
-        value: attribute.id.toString(),
+            ...attribute,
-      }))}
+            categoryInfo: getAttributeCategoryInfo(attribute.category),
-      error={inputErrors.attributes}
+            typeInfo: getAttributeTypeInfo(attribute.type),
-    />
+          })),
+          ['categoryInfo.order', 'typeInfo.order']
+        ).map((attribute) => ({
+          label: attribute.title,
+          value: attribute.id.toString(),
+          icon: [attribute.categoryInfo.icon, attribute.typeInfo.icon],
+          iconClassName: [attribute.categoryInfo.classNames.icon, attribute.typeInfo.classNames.icon],
+        }))}
+        error={inputErrors.attributes}
+        size="lg"
+      />
+    </div>
 
     <InputCardGroup
       name="acceptedCurrencies"

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

@@ -16,6 +16,8 @@ import DropdownButton from '../../components/DropdownButton.astro'
 import DropdownButtonItemForm from '../../components/DropdownButtonItemForm.astro'
 import DropdownButtonItemLink from '../../components/DropdownButtonItemLink.astro'
 import FormatTimeInterval from '../../components/FormatTimeInterval.astro'
+import InputSubmitButton from '../../components/InputSubmitButton.astro'
+import InputTextArea from '../../components/InputTextArea.astro'
 import MyPicture from '../../components/MyPicture.astro'
 import { makeOgImageUrl, type OgImageAllTemplatesWithProps } from '../../components/OgImage'
 import ScoreGauge from '../../components/ScoreGauge.astro'
@@ -23,6 +25,7 @@ import ScoreSquare from '../../components/ScoreSquare.astro'
 import ServiceLinkButton from '../../components/ServiceLinkButton.astro'
 import TimeFormatted from '../../components/TimeFormatted.astro'
 import Tooltip from '../../components/Tooltip.astro'
+import UserBadge from '../../components/UserBadge.astro'
 import VerificationWarningBanner from '../../components/VerificationWarningBanner.astro'
 import { getAttributeCategoryInfo } from '../../constants/attributeCategories'
 import { getAttributeTypeInfo } from '../../constants/attributeTypes'
@@ -30,7 +33,7 @@ import { formatContactMethod } from '../../constants/contactMethods'
 import { currencies, getCurrencyInfo } from '../../constants/currencies'
 import { getEventTypeInfo } from '../../constants/eventTypes'
 import { getKycLevelInfo, kycLevels } from '../../constants/kycLevels'
-import { serviceVisibilitiesById } from '../../constants/serviceVisibility'
+import { getServiceVisibilityInfo } from '../../constants/serviceVisibility'
 import { getTosHighlightRatingInfo } from '../../constants/tosHighlightRating'
 import { getUserSentimentInfo } from '../../constants/userSentiment'
 import { getVerificationStatusInfo, verificationStatusesByValue } from '../../constants/verificationStatus'
@@ -159,6 +162,21 @@ const [service, dbNotificationPreferences] = await Astro.locals.banners.tryMany(
               updatedAt: true,
             },
           },
+          internalNotes: {
+            select: {
+              id: true,
+              content: true,
+              createdAt: true,
+              addedByUser: {
+                select: {
+                  name: true,
+                  displayName: true,
+                  picture: true,
+                },
+              },
+            },
+            orderBy: { createdAt: 'desc' },
+          },
           _count: {
             select: {
               comments: {
@@ -240,7 +258,11 @@ const watchingDetails = makeWatchingDetails(dbNotificationPreferences, service?.
 
 if (!service) return Astro.rewrite('/404')
 
-if (service.serviceVisibility !== 'PUBLIC' && service.serviceVisibility !== 'UNLISTED') {
+if (
+  service.serviceVisibility !== 'PUBLIC' &&
+  service.serviceVisibility !== 'UNLISTED' &&
+  service.serviceVisibility !== 'ARCHIVED'
+) {
   return Astro.rewrite('/404')
 }
 
@@ -356,6 +378,8 @@ const ogImageTemplateData = {
   score: service.overallScore,
   imageUrl: service.imageUrl,
 } satisfies OgImageAllTemplatesWithProps
+
+const serviceVisibilityInfo = getServiceVisibilityInfo(service.serviceVisibility)
 ---
 
 <BaseLayout
@@ -457,16 +481,17 @@ const ogImageTemplateData = {
   ]}
 >
   {
-    service.serviceVisibility === 'UNLISTED' && (
+    (serviceVisibilityInfo.value === 'UNLISTED' || serviceVisibilityInfo.value === 'ARCHIVED') && (
-      <div class={cn('mb-4 rounded-md bg-yellow-900/50 p-2 text-sm text-yellow-400')}>
+      <div class={cn('mb-4 rounded-md bg-yellow-900/50 px-3 py-2 text-sm text-yellow-400')}>
         <Icon
-          name={serviceVisibilitiesById.UNLISTED.icon}
+          name={serviceVisibilityInfo.icon}
-          class={cn('me-1.5 inline-block size-4 align-[-0.15em]', serviceVisibilitiesById.UNLISTED.iconClass)}
+          class="me-1.5 inline-block size-4 align-[-0.15em] text-yellow-500"
         />
-        Unlisted service, only accessible via direct link and won't appear in searches.
+        {serviceVisibilityInfo.longDescription}
       </div>
     )
   }
+
   <VerificationWarningBanner service={service} />
 
   <div class="flex items-center gap-4">
@@ -742,6 +767,61 @@ const ogImageTemplateData = {
     )
   }
 
+  <AdminOnly>
+    <div class="border-day-500 mt-6 mb-3 flex items-center justify-between border-b">
+      <h2 class="font-title text-day-100 text-lg font-bold">Internal Notes</h2>
+      <a
+        href={`/admin/services/${service.slug}/edit#internal-notes`}
+        class="text-day-500 hover:text-day-200 inline-flex items-center gap-1 text-xs leading-none transition-colors hover:underline"
+      >
+        Manage
+        <Icon name="ri:arrow-right-s-line" class="size-4" />
+      </a>
+    </div>
+
+    {
+      service.internalNotes.length === 0 ? (
+        <p class="text-day-400 mt-2 text-center text-xs">No internal notes yet.</p>
+      ) : (
+        <div
+          class={cn(
+            'grid grid-cols-1 items-start gap-2',
+            service.internalNotes.length > 1 && 'sm:grid-cols-2'
+          )}
+        >
+          {service.internalNotes.map((note) => (
+            <div class="border-night-600 bg-night-800 rounded-lg border p-3">
+              <div class="prose text-day-200 prose-sm prose-invert max-w-none text-pretty">
+                <Markdown content={note.content} />
+              </div>
+
+              <div class="text-day-500 mt-2 flex items-center gap-1 text-xs">
+                <TimeFormatted date={note.createdAt} hourPrecision />
+                {note.addedByUser && (
+                  <span class="flex items-center gap-1">
+                    by <UserBadge user={note.addedByUser} size="sm" />
+                  </span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    <form
+      method="POST"
+      action={actions.admin.service.internalNote.add}
+      data-note-edit-form
+      class="mt-4 space-y-4"
+    >
+      <input type="hidden" name="serviceId" value={service.id} />
+
+      <InputTextArea label="Add a note" name="content" />
+      <InputSubmitButton label="Save" icon="ri:save-line" hideCancel />
+    </form>
+  </AdminOnly>
+
   <h2 class="font-title border-day-500 text-day-200 mt-6 mb-3 border-b text-lg font-bold" id="scores">
     Scores
   </h2>
@@ -1245,7 +1325,8 @@ const ogImageTemplateData = {
       <div class="flex flex-col gap-2">
         {
           service.verificationStatus !== 'VERIFICATION_SUCCESS' &&
-            service.verificationStatus !== 'VERIFICATION_FAILED' && (
+            service.verificationStatus !== 'VERIFICATION_FAILED' &&
+            service.serviceVisibility !== 'ARCHIVED' && (
               <form
                 method="POST"
                 action={actions.service.requestVerification}

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

@@ -1,5 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components'
+import { Markdown } from 'astro-remote'
 import { actions } from 'astro:actions'
 import { sortBy } from 'lodash-es'
 
@@ -525,7 +526,9 @@ const isCurrentUser = !!Astro.locals.user && user.id === Astro.locals.user.id
                     <TimeFormatted date={note.createdAt} hourPrecision />
                   </span>
                 </div>
-                <div class="text-day-200 wrap-anywhere whitespace-pre-wrap" set:text={note.content} />
+                <div class="prose text-day-200 prose-sm prose-invert max-w-none text-pretty">
+                  <Markdown content={note.content} />
+                </div>
               </div>
             ))}
           </div>

web/src/styles/global.css

@@ -103,6 +103,10 @@
     drop-shadow(0 0 4px color-mix(in oklab, currentColor 60%, transparent));
 }
 
+@utility scrollbar-w-none {
+  scrollbar-width: none;
+}
+
 @utility checkbox-force-checked {
   &:not(:checked) {
     @apply border-transparent! bg-current/50!;