Release 2025-05-22-Uvv4

web/src/components/Header.astro

@@ -119,7 +119,7 @@ const splashText = showSplashText ? sample(splashTexts) : null
         <Tooltip
           as="a"
           href="/admin"
-          class="text-red-500 transition-colors hover:text-red-400"
+          class="flex h-full items-center text-red-500 transition-colors hover:text-red-400"
           transition:name="header-admin-link"
           text="Admin Dashboard"
           position="left"

web/src/components/InputText.astro

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

web/src/components/InputWrapper.astro

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

web/src/components/PillsRadioGroup.astro

@@ -9,10 +9,11 @@ type Props = HTMLAttributes<'div'> & {
     value: HTMLAttributes<'input'>['value']
     label: string
   }[]
+  inputProps?: Omit<HTMLAttributes<'input'>, 'checked' | 'class' | 'name' | 'type' | 'value'>
   selectedValue?: string | null
 }
 
-const { name, options, selectedValue, class: className, ...rest } = Astro.props
+const { name, options, selectedValue, inputProps, class: className, ...rest } = Astro.props
 ---
 
 <div
@@ -31,6 +32,7 @@ const { name, options, selectedValue, class: className, ...rest } = Astro.props
           value={option.value}
           checked={selectedValue === option.value}
           class="peer sr-only"
+          {...inputProps}
         />
         <span class="peer-checked:bg-night-400 inline-block cursor-pointer px-1.5 py-0.5 text-white peer-checked:text-green-500">
           {option.label}

web/src/components/ServicesFilters.astro

@@ -34,7 +34,8 @@ const {
 <form
   method="GET"
   hx-get={Astro.url.pathname}
-  hx-trigger={`input delay:500ms from:input[type='text'], keyup[key=='Enter'], change from:input:not([data-show-more-input], #${showFiltersId}), change from:select`}
+  hx-trigger={// NOTE: I need to do the [data-trigger-on-change] hack, because HTMX doesnt suport the :not() selector, and I need to exclude the Show more buttons, and not trigger for inputs outside the form
+  "input delay:500ms from:([data-services-filters-form] input[type='text']), keyup[key=='Enter'], change from:([data-services-filters-form] [data-trigger-on-change])"}
   hx-target={`#${searchResultsId}`}
   hx-select={`#${searchResultsId}`}
   hx-push-url="true"
@@ -44,7 +45,11 @@ const {
     .filter((verification) => verification.default)
     .map((verification) => verification.slug)}
   {...formProps}
-  class={cn('', className)}
+  class={cn(
+    // Check the scam filter when there is a text quey and the user has checked verified and approved
+    'has-[input[name=q]:not(:placeholder-shown)]:has-[&_input[name=verification][value=verified]:checked]:has-[&_input[name=verification][value=approved]:checked]:[&_input[name=verification][value=scam]]:checkbox-force-checked',
+    className
+  )}
 >
   <div class="mb-4 flex items-center justify-between">
     <h2 class="font-title text-xl text-green-500">FILTERS</h2>
@@ -64,6 +69,7 @@ const {
       name="sort"
       id="sort"
       class="border-night-600 bg-night-900 w-full rounded-md border p-2 text-white focus:border-green-500 focus:outline-hidden"
+      data-trigger-on-change
     >
       {
         options.sort.map((option) => (
@@ -108,6 +114,7 @@ const {
                 name="categories"
                 value={category.slug}
                 checked={category.checked}
+                data-trigger-on-change
               />
               <span class="peer-checked:font-bold">
                 {category.name}
@@ -121,13 +128,7 @@ const {
     {
       options.categories.filter((category) => category.showAlways).length < options.categories.length && (
         <>
-          <input
+          <input type="checkbox" id="show-more-categories" class="peer sr-only" hx-preserve />
-            type="checkbox"
-            id="show-more-categories"
-            class="peer sr-only"
-            hx-preserve
-            data-show-more-input
-          />
           <label
             for="show-more-categories"
             class="peer-focus-visible:ring-offset-night-700 mt-2 block cursor-pointer rounded-sm text-sm text-green-500 peer-checked:hidden peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2"
@@ -158,6 +159,7 @@ const {
               name="verification"
               value={verification.slug}
               checked={filters.verification.includes(verification.value)}
+              data-trigger-on-change
             />
             <Icon name={verification.icon} class={cn('size-4', verification.classNames.icon)} />
             <span class="peer-checked:font-bold">{verification.labelShort}</span>
@@ -176,6 +178,9 @@ const {
         options={options.modeOptions}
         selectedValue={filters['currency-mode']}
         class="-my-2"
+        inputProps={{
+          'data-trigger-on-change': true,
+        }}
       />
     </div>
     <div>
@@ -188,6 +193,7 @@ const {
               name="currencies"
               value={currency.slug}
               checked={filters.currencies?.some((id) => id === currency.id)}
+              data-trigger-on-change
             />
             <Icon name={currency.icon} class="size-4" />
             <span class="peer-checked:font-bold">{currency.name}</span>
@@ -210,6 +216,7 @@ const {
               name="networks"
               value={network.slug}
               checked={filters.networks?.some((slug) => slug === network.slug)}
+              data-trigger-on-change
             />
             <Icon name={network.icon} class="size-4" />
             <span class="peer-checked:font-bold">{network.name}</span>
@@ -233,6 +240,7 @@ const {
         id="max-kyc"
         value={filters['max-kyc'] ?? 4}
         class="w-full accent-green-500"
+        data-trigger-on-change
       />
     </div>
     <div class="text-day-400 mt-1 flex justify-between px-1 text-xs">
@@ -261,6 +269,7 @@ const {
         id="user-rating"
         value={filters['user-rating']}
         class="w-full accent-green-500"
+        data-trigger-on-change
       />
     </div>
     <div class="text-day-400 mt-1 flex justify-between px-2 text-xs">
@@ -289,6 +298,9 @@ const {
         options={options.modeOptions}
         selectedValue={filters['attribute-mode']}
         class="-my-2"
+        inputProps={{
+          'data-trigger-on-change': true,
+        }}
       />
     </div>
     {
@@ -318,6 +330,7 @@ const {
                       value=""
                       checked={!attribute.value}
                       aria-label="Ignore"
+                      data-trigger-on-change
                     />
                     <input
                       type="radio"
@@ -327,6 +340,7 @@ const {
                       class="peer/yes sr-only"
                       checked={attribute.value === 'yes'}
                       aria-label="Include"
+                      data-trigger-on-change
                     />
                     <input
                       type="radio"
@@ -336,6 +350,7 @@ const {
                       class="peer/no sr-only"
                       checked={attribute.value === 'no'}
                       aria-label="Exclude"
+                      data-trigger-on-change
                     />
 
                     <div class="pointer-events-none absolute inset-y-0 -left-[2px] hidden w-[calc(var(--spacing)*4.5*2+1px)] rounded-md border-2 border-blue-500 peer-focus-visible/empty:block peer-focus-visible/no:block peer-focus-visible/yes:block" />
@@ -420,7 +435,6 @@ const {
                 id={`show-more-attributes-${category}`}
                 class="peer sr-only"
                 hx-preserve
-                data-show-more-input
               />
               <label
                 for={`show-more-attributes-${category}`}
@@ -455,6 +469,7 @@ const {
         id="min-score"
         value={filters['min-score']}
         class="w-full accent-green-500"
+        data-trigger-on-change
       />
     </div>
     <div class="-mx-1.5 mt-2 flex justify-between px-1">

web/src/components/ServicesSearchResults.astro

@@ -19,7 +19,7 @@ type Props = HTMLAttributes<'div'> & {
   pageSize: number
   sortSeed?: string
   filters: ServicesFiltersObject
-  hadToIncludeCommunityContributed: boolean
+  includeScams: boolean
 }
 
 const {
@@ -31,14 +31,15 @@ const {
   sortSeed,
   class: className,
   filters,
-  hadToIncludeCommunityContributed,
+  includeScams,
   ...divProps
 } = Astro.props
 
-const hasScams = filters.verification.includes('VERIFICATION_FAILED')
+const hasScams =
-const hasCommunityContributed =
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  filters.verification.includes('COMMUNITY_CONTRIBUTED') || hadToIncludeCommunityContributed
+  filters.verification.includes('VERIFICATION_FAILED') || includeScams
+
+const hasCommunityContributed = filters.verification.includes('COMMUNITY_CONTRIBUTED')
 
 const totalPages = Math.ceil(total / pageSize) || 1
 ---
@@ -66,7 +67,7 @@ const totalPages = Math.ceil(total / pageSize) || 1
         <Icon name="ri:alert-fill" class="-mr-1 inline-block size-4 text-red-500" />
         <Icon name="ri:question-line" class="mr-2 inline-block size-4 text-yellow-500" />
         Showing SCAM and unverified community-contributed services.
-        {hadToIncludeCommunityContributed && 'Because there were no other results.'}
+        {includeScams && 'Because there is a text query.'}
       </div>
     )
   }
@@ -75,7 +76,7 @@ const totalPages = Math.ceil(total / pageSize) || 1
     hasScams && !hasCommunityContributed && (
       <div class="font-title mb-6 rounded-lg border border-red-500/30 bg-red-950 p-4 text-sm text-red-500">
         <Icon name="ri:alert-fill" class="mr-2 inline-block size-4 text-red-500" />
-        Showing SCAM services!
+        {includeScams ? 'Showing SCAM services because there is a text query.' : 'Showing SCAM services!'}
       </div>
     )
   }
@@ -84,10 +85,7 @@ const totalPages = Math.ceil(total / pageSize) || 1
     !hasScams && hasCommunityContributed && (
       <div class="font-title mb-6 rounded-lg border border-yellow-500/30 bg-yellow-950 p-4 text-sm text-yellow-500">
         <Icon name="ri:question-line" class="mr-2 inline-block size-4" />
-
+        Showing unverified community-contributed services, some might be scams.
-        {hadToIncludeCommunityContributed
-          ? 'Showing unverified community-contributed services, because there were no other results. Some might be scams.'
-          : 'Showing unverified community-contributed services, some might be scams.'}
       </div>
     )
   }

web/src/pages/events.astro

@@ -169,7 +169,7 @@ const createUrlWithoutFilter = (paramName: keyof typeof params) => {
       '[&:has(~[data-has-default-filters="true"])_[data-clear-filters-button]]:hidden'
     )}
     hx-get={Astro.url.pathname}
-    hx-trigger="input from:input, keyup[key=='Enter'], change from:select"
+    hx-trigger="input from:find input, keyup[key=='Enter'], change from:find select"
     hx-target="#events-list-container"
     hx-select="#events-list-container"
     hx-swap="outerHTML"

web/src/pages/index.astro

@@ -1,10 +1,11 @@
 ---
 import { ServiceVisibility } from '@prisma/client'
 import { z } from 'astro:schema'
-import { groupBy, orderBy } from 'lodash-es'
+import { groupBy, omit, orderBy, uniq } from 'lodash-es'
 import seedrandom from 'seedrandom'
 
 import Button from '../components/Button.astro'
+import InputText from '../components/InputText.astro'
 import Pagination from '../components/Pagination.astro'
 import ServiceFiltersPill from '../components/ServiceFiltersPill.astro'
 import ServicesFilters from '../components/ServicesFilters.astro'
@@ -26,6 +27,7 @@ import {
 import BaseLayout from '../layouts/BaseLayout.astro'
 import { areEqualArraysWithoutOrder, zodEnumFromConstant } from '../lib/arrays'
 import { parseIntWithFallback } from '../lib/numbers'
+import { areEqualObjectsWithoutOrder } from '../lib/objects'
 import { zodParseQueryParamsStoringErrors } from '../lib/parseUrlFilters'
 import { prisma } from '../lib/prisma'
 import { makeSortSeed } from '../lib/sortSeed'
@@ -130,9 +132,12 @@ const attributeOptions = [
   prefix: string
 }[]
 
+const ignoredKeysForDefaultData = ['sort-seed']
+
 const {
   data: filters,
   hasDefaultData: hasDefaultFilters,
+  defaultData: defaultFilters,
   redirectUrl,
 } = zodParseQueryParamsStoringErrors(
   {
@@ -164,7 +169,7 @@ const {
   },
   Astro,
   {
-    ignoredKeysForDefaultData: ['sort-seed'],
+    ignoredKeysForDefaultData,
     cleanUrl: {
       removeUneededObjectParams: true,
       removeParams: {
@@ -181,46 +186,63 @@ const {
   }
 )
 
+const hasDefaultFiltersIgnoringQ = areEqualObjectsWithoutOrder(
+  omit(filters, [...ignoredKeysForDefaultData, 'q']),
+  omit(defaultFilters, [...ignoredKeysForDefaultData, 'q'])
+)
+
 if (redirectUrl) return Astro.redirect(redirectUrl.toString())
 
+const includeScams =
+  !!filters.q &&
+  (areEqualArraysWithoutOrder(filters.verification, ['VERIFICATION_SUCCESS', 'APPROVED']) ||
+    areEqualArraysWithoutOrder(filters.verification, [
+      'VERIFICATION_SUCCESS',
+      'APPROVED',
+      'COMMUNITY_CONTRIBUTED',
+    ]))
+
 export type ServicesFiltersObject = typeof filters
 
-const [categories, [services, totalServices, hadToIncludeCommunityContributed]] =
+const [categories, [services, totalServices]] = await Astro.locals.banners.tryMany([
-  await Astro.locals.banners.tryMany([
+  [
-    [
+    'Unable to load category filters.',
-      'Unable to load category filters.',
+    () =>
-      () =>
+      prisma.category.findMany({
-        prisma.category.findMany({
+        select: {
-          select: {
+          name: true,
-            name: true,
+          slug: true,
-            slug: true,
+          icon: true,
-            icon: true,
+          _count: {
-            _count: {
+            select: {
-              select: {
+              services: true,
-                services: true,
-              },
             },
           },
+        },
+      }),
+  ],
+  [
+    'Unable to load services.',
+    async () => {
+      const groupedAttributes = groupBy(
+        Object.entries(filters.attr ?? {}).flatMap(([key, value]) => {
+          const id = parseIntWithFallback(key)
+          if (id === null) return []
+          return [{ id, value }]
         }),
-    ],
+        'value'
-    [
+      )
-      'Unable to load services.',
+
-      async () => {
+      const [unsortedServices, totalServices] = await prisma.service.findManyAndCount({
-        const groupedAttributes = groupBy(
+        where: {
-          Object.entries(filters.attr ?? {}).flatMap(([key, value]) => {
-            const id = parseIntWithFallback(key)
-            if (id === null) return []
-            return [{ id, value }]
-          }),
-          'value'
-        )
-        const where = {
           listedAt: {
             lte: new Date(),
           },
           categories: filters.categories.length ? { some: { slug: { in: filters.categories } } } : undefined,
           verificationStatus: {
-            in: filters.verification,
+            in: includeScams
+              ? uniq([...filters.verification, 'VERIFICATION_FAILED'] as const)
+              : filters.verification,
           },
           serviceVisibility: ServiceVisibility.PUBLIC,
           overallScore: { gte: filters['min-score'] },
@@ -308,108 +330,79 @@ const [categories, [services, totalServices, hadToIncludeCommunityContributed]]
                 ]
               : []),
           ],
-        } as const satisfies Prisma.ServiceWhereInput
+        },
-
+        select: {
-        const select = {
           id: true,
           ...(Object.fromEntries(sortOptions.map((option) => [option.orderBy.key, true])) as Record<
             (typeof sortOptions)[number]['orderBy']['key'],
             true
           >),
-        } as const satisfies Prisma.ServiceSelect
+        },
+      })
 
-        let [unsortedServices, totalServices] = await prisma.service.findManyAndCount({
+      const rng = seedrandom(filters['sort-seed'])
-          where,
+      const selectedSort = sortOptions.find((sort) => sort.value === filters.sort) ?? defaultSortOption
-          select,
-        })
-        let hadToIncludeCommunityContributed = false
 
-        if (
+      const sortedServices = orderBy(
-          totalServices === 0 &&
+        unsortedServices,
-          areEqualArraysWithoutOrder(where.verificationStatus.in, ['VERIFICATION_FAILED', 'APPROVED'])
+        [selectedSort.orderBy.key, () => rng()],
-        ) {
+        [selectedSort.orderBy.direction, 'asc']
-          const [unsortedServiceCommunityServices, totalCommunityServices] =
+      ).slice((filters.page - 1) * PAGE_SIZE, filters.page * PAGE_SIZE)
-            await prisma.service.findManyAndCount({
-              where: {
-                ...where,
-                verificationStatus: {
-                  ...where.verificationStatus,
-                  in: [...where.verificationStatus.in, 'COMMUNITY_CONTRIBUTED'],
-                },
-              },
-              select,
-            })
 
-          if (totalCommunityServices !== 0) {
+      const unsortedServicesWithInfo = await prisma.service.findMany({
-            hadToIncludeCommunityContributed = true
+        where: {
-            unsortedServices = unsortedServiceCommunityServices
+          id: {
-            totalServices = totalCommunityServices
+            in: sortedServices.map((service) => service.id),
-          }
-        }
-
-        const rng = seedrandom(filters['sort-seed'])
-        const selectedSort = sortOptions.find((sort) => sort.value === filters.sort) ?? defaultSortOption
-
-        const sortedServices = orderBy(
-          unsortedServices,
-          [selectedSort.orderBy.key, () => rng()],
-          [selectedSort.orderBy.direction, 'asc']
-        ).slice((filters.page - 1) * PAGE_SIZE, filters.page * PAGE_SIZE)
-
-        const unsortedServicesWithInfo = await prisma.service.findMany({
-          where: {
-            id: {
-              in: sortedServices.map((service) => service.id),
-            },
           },
-          select: {
+        },
-            name: true,
+        select: {
-            slug: true,
+          name: true,
-            description: true,
+          slug: true,
-            overallScore: true,
+          description: true,
-            privacyScore: true,
+          overallScore: true,
-            trustScore: true,
+          privacyScore: true,
-            kycLevel: true,
+          trustScore: true,
-            imageUrl: true,
+          kycLevel: true,
-            verificationStatus: true,
+          imageUrl: true,
-            acceptedCurrencies: true,
+          verificationStatus: true,
-            attributes: {
+          acceptedCurrencies: true,
-              select: {
+          attributes: {
-                attribute: {
+            select: {
-                  select: {
+              attribute: {
-                    id: true,
+                select: {
-                    slug: true,
+                  id: true,
-                    title: true,
+                  slug: true,
-                    category: true,
+                  title: true,
-                    type: true,
+                  category: true,
-                  },
+                  type: true,
                 },
               },
             },
-            categories: {
+          },
-              select: {
+          categories: {
-                name: true,
+            select: {
-                icon: true,
+              name: true,
-              },
+              icon: true,
             },
           },
-        })
+        },
+      })
 
-        const sortedServicesWithInfo = orderBy(
+      const sortedServicesWithInfo = orderBy(
-          unsortedServicesWithInfo,
+        unsortedServicesWithInfo,
-          [
+        [
-            selectedSort.orderBy.key,
+          selectedSort.orderBy.key,
-            // Now we can shuffle indeternimistically, because the pagination was already applied
+          // Now we can shuffle indeternimistically, because the pagination was already applied
-            () => Math.random(),
+          () => Math.random(),
-          ],
+        ],
-          [selectedSort.orderBy.direction, 'asc']
+        [selectedSort.orderBy.direction, 'asc']
-        )
+      )
 
-        return [sortedServicesWithInfo, totalServices, hadToIncludeCommunityContributed] as const
+      return [sortedServicesWithInfo, totalServices] as const
-      },
+    },
-      [[] as [], 0, false] as const,
+    [[] as [], 0, false] as const,
-    ],
+  ],
-  ])
+])
 
 const attributes = await Astro.locals.banners.try(
   'Unable to load attribute filters.',
@@ -488,7 +481,8 @@ const filtersOptions = {
 
 export type ServicesFiltersOptions = typeof filtersOptions
 
-//
+const searchResultsId = 'search-results'
+const showFiltersId = 'show-filters'
 ---
 
 <BaseLayout
@@ -509,7 +503,33 @@ export type ServicesFiltersOptions = typeof filtersOptions
       class='[&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-offset-night-700 flex items-stretch sm:hidden [&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-2 [&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-green-500 [&:has(~_#show-filters:focus-visible)_[for="show-filters"]]:ring-offset-2'
     >
       {
-        !hasDefaultFilters ? (
+        hasDefaultFilters || hasDefaultFiltersIgnoringQ ? (
+          <form
+            method="GET"
+            hx-get={Astro.url.pathname}
+            hx-trigger="input delay:500ms, keyup[key=='Enter']"
+            hx-target={`#${searchResultsId}`}
+            hx-select={`#${searchResultsId}`}
+            hx-push-url="true"
+            hx-indicator="#search-indicator"
+            class="contents"
+          >
+            <InputText
+              name="q"
+              label="Search..."
+              hideLabel
+              inputIcon="ri:search-line"
+              inputIconClass="text-day-500 size-4.5"
+              inputProps={{
+                placeholder: 'Search',
+                value: filters.q,
+                class: 'bg-night-800 border-night-500',
+                'transition:persist': false,
+              }}
+              class="mr-4 flex-1"
+            />
+          </form>
+        ) : (
           <div class="-ml-4 flex flex-1 items-center gap-2 overflow-x-auto mask-r-from-[calc(100%-var(--spacing)*16)] pr-12 pl-4">
             {filters.q && (
               <ServiceFiltersPill text={`"${filters.q}"`} searchParamName="q" searchParamValue={filters.q} />
@@ -618,12 +638,19 @@ export type ServicesFiltersOptions = typeof filtersOptions
                   )
                 })}
           </div>
-        ) : (
-          <div class="text-day-500 flex flex-1 items-center">No filters</div>
         )
       }
 
-      <Button as="label" for="show-filters" label="Filters" icon="ri:filter-3-line" />
+      <Button
+        as="label"
+        for="show-filters"
+        label="Filters"
+        icon="ri:filter-3-line"
+        class="max-2xs:w-9 max-2xs:px-0"
+        classNames={{
+          label: 'max-2xs:hidden',
+        }}
+      />
     </div>
 
     <input
@@ -637,8 +664,8 @@ export type ServicesFiltersOptions = typeof filtersOptions
       class="bg-night-700 fixed top-0 left-0 z-50 hidden h-dvh w-dvw shrink-0 translate-y-full overflow-y-auto overscroll-contain border-t border-green-500/30 px-8 pt-4 transition-transform peer-checked:translate-y-0 max-sm:peer-checked:block sm:relative sm:z-auto sm:block sm:h-auto sm:w-64 sm:translate-y-0 sm:overflow-visible sm:border-none sm:bg-none sm:p-0"
     >
       <ServicesFilters
-        searchResultsId="search-results"
+        searchResultsId={searchResultsId}
-        showFiltersId="show-filters"
+        showFiltersId={showFiltersId}
         filters={{
           ...filters,
           'sort-seed': makeSortSeed(),
@@ -656,7 +683,7 @@ export type ServicesFiltersOptions = typeof filtersOptions
       pageSize={PAGE_SIZE}
       sortSeed={filters['sort-seed']}
       filters={filters}
-      hadToIncludeCommunityContributed={hadToIncludeCommunityContributed}
+      includeScams={includeScams}
     />
   </div>
   {

web/src/styles/global.css

@@ -93,15 +93,20 @@
   --color-night-950: oklch(11.97% 0.004 145.32);
 }
 
-@layer utilities {
+@utility text-shadow-glow {
-  .text-shadow-glow {
+  text-shadow:
-    text-shadow:
+    0 0 16px color-mix(in oklab, currentColor 30%, transparent),
-      0 0 16px color-mix(in oklab, currentColor 30%, transparent),
+    0 0 4px color-mix(in oklab, currentColor 60%, transparent);
-      0 0 4px color-mix(in oklab, currentColor 60%, transparent);
+}
-  }
+@utility drop-shadow-glow {
-  .drop-shadow-glow {
+  filter: drop-shadow(0 0 16px color-mix(in oklab, currentColor 30%, transparent))
-    filter: drop-shadow(0 0 16px color-mix(in oklab, currentColor 30%, transparent))
+    drop-shadow(0 0 4px color-mix(in oklab, currentColor 60%, transparent));
-      drop-shadow(0 0 4px color-mix(in oklab, currentColor 60%, transparent));
+}
+
+@utility checkbox-force-checked {
+  &:not(:checked) {
+    @apply border-transparent! bg-current/50!;
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
   }
 }