Release 202507030838

web/src/components/AnnouncementBanner.astro

@@ -6,20 +6,24 @@ import { cn } from '../lib/cn'
 
 import type { Prisma } from '@prisma/client'
 import type { HTMLAttributes } from 'astro/types'
+import type { O } from 'ts-toolbelt'
 
 type Props = HTMLAttributes<'div'> & {
-  announcement: Prisma.AnnouncementGetPayload<{
-    select: {
-      id: true
-      content: true
-      type: true
-      link: true
-      linkText: true
-      startDate: true
-      endDate: true
-      isActive: true
-    }
-  }>
+  announcement: O.Optional<
+    Prisma.AnnouncementGetPayload<{
+      select: {
+        id: true
+        content: true
+        type: true
+        link: true
+        linkText: true
+        startDate: true
+        endDate: true
+        isActive: true
+      }
+    }>,
+    'link' | 'linkText'
+  >
 }
 
 const { announcement, class: className, ...props } = Astro.props
@@ -31,7 +35,9 @@ const Tag = announcement.link ? 'a' : 'div'
 
 <Tag
   href={announcement.link}
-  target={announcement.link ? '_blank' : undefined}
+  target={announcement.link && new URL(announcement.link, Astro.url.origin).origin !== Astro.url.origin
+    ? '_blank'
+    : undefined}
   rel="noopener noreferrer"
   class={cn(
     'group xs:px-6 2xs:px-4 relative isolate z-50 flex items-center justify-center gap-x-2 overflow-hidden border-b border-zinc-800 bg-black px-2 py-2 focus-visible:outline-none sm:gap-x-6 sm:px-3.5',
@@ -78,15 +84,15 @@ const Tag = announcement.link ? 'a' : 'div'
     </span>
   </div>
 
-  <div
-    class="text-day-300 group-focus-visible:outline-primary transition-background 2xs:px-4 relative inline-flex h-full shrink-0 cursor-pointer items-center justify-center gap-1.5 overflow-hidden rounded-full border border-white/20 bg-black/10 p-[1px] px-1 py-1 text-sm font-medium shadow-sm backdrop-blur-3xl transition-colors group-hover:bg-white/5 group-focus-visible:ring-2 group-focus-visible:ring-blue-500 group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-black/80 sm:min-w-[120px]"
-  >
-    <span class="2xs:inline-block hidden">
-      {announcement.linkText}
-    </span>
-    <Icon
-      name="ri:arrow-right-line"
-      class="size-4 shrink-0 transition-transform group-hover:translate-x-0.5"
-    />
-  </div>
+  {
+    !!announcement.linkText && (
+      <div class="text-day-300 group-focus-visible:outline-primary transition-background 2xs:px-4 relative inline-flex h-full shrink-0 cursor-pointer items-center justify-center gap-1.5 overflow-hidden rounded-full border border-white/20 bg-black/10 p-[1px] px-1 py-1 text-sm font-medium shadow-sm backdrop-blur-3xl transition-colors group-hover:bg-white/5 group-focus-visible:ring-2 group-focus-visible:ring-blue-500 group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-black/80 sm:min-w-[120px]">
+        <span class="2xs:inline-block hidden">{announcement.linkText}</span>
+        <Icon
+          name="ri:arrow-right-line"
+          class="size-4 shrink-0 transition-transform group-hover:translate-x-0.5"
+        />
+      </div>
+    )
+  }
 </Tag>

web/src/components/HtmxScript.astro

@@ -3,7 +3,7 @@
 ---
 
 <script>
-  import * as htmx from 'htmx.org'
+  import htmx from 'htmx.org'
 
   htmx.config.globalViewTransitions = false
 

web/src/components/ServiceFiltersPill.astro

@@ -11,9 +11,19 @@ type Props = HTMLAttributes<'a'> & {
   searchParamValue?: string
   icon?: string
   iconClass?: string
+  inlineIcons?: boolean
 }
 
-const { text, searchParamName, searchParamValue, icon, iconClass, class: className, ...aProps } = Astro.props
+const {
+  text,
+  searchParamName,
+  searchParamValue,
+  icon,
+  iconClass,
+  inlineIcons = true,
+  class: className,
+  ...aProps
+} = Astro.props
 
 const makeUrlWithoutFilter = (filter: string, value?: string) => {
   const url = new URL(Astro.url)
@@ -30,7 +40,7 @@ const makeUrlWithoutFilter = (filter: string, value?: string) => {
     className
   )}
 >
-  {icon && <Icon name={icon} class={cn('size-4', iconClass)} />}
+  {icon && <Icon name={icon} class={cn('size-4', iconClass)} is:inline={inlineIcons} />}
   {text}
-  <Icon name="ri:close-large-line" class="text-day-400 size-4" />
+  <Icon name="ri:close-large-line" class="text-day-400 size-4" is:inline={inlineIcons} />
 </a>

web/src/components/ServiceFiltersPillsRow.astro

@@ -0,0 +1,182 @@
+---
+import { orderBy } from 'lodash-es'
+
+import { getCurrencyInfo } from '../constants/currencies'
+import { getNetworkInfo } from '../constants/networks'
+import { getVerificationStatusInfo } from '../constants/verificationStatus'
+import { areEqualArraysWithoutOrder } from '../lib/arrays'
+import { cn } from '../lib/cn'
+import { transformCase } from '../lib/strings'
+
+import ServiceFiltersPill from './ServiceFiltersPill.astro'
+
+import type { AttributeOption, ServicesFiltersObject, ServicesFiltersOptions } from '../pages/index.astro'
+import type { Prisma } from '@prisma/client'
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'div'> & {
+  filters: ServicesFiltersObject
+  filtersOptions: ServicesFiltersOptions
+  categories: Prisma.CategoryGetPayload<{
+    select: {
+      name: true
+      slug: true
+      icon: true
+    }
+  }>[]
+  attributes: Prisma.AttributeGetPayload<{
+    select: {
+      title: true
+      id: true
+    }
+  }>[]
+  attributeOptions: AttributeOption[]
+}
+
+const {
+  class: className,
+  filters,
+  filtersOptions,
+  categories,
+  attributes,
+  attributeOptions,
+  ...divProps
+} = Astro.props
+---
+
+<div
+  class={cn(
+    'not-pointer-coarse:no-scrollbar -ml-4 flex shrink grow items-center gap-2 overflow-x-auto mask-r-from-[calc(100%-var(--spacing)*16)] pr-12 pl-4',
+    className
+  )}
+  {...divProps}
+>
+  {
+    filters.q && (
+      <ServiceFiltersPill text={`"${filters.q}"`} searchParamName="q" searchParamValue={filters.q} />
+    )
+  }
+
+  {
+    filters.categories.map((categorySlug) => {
+      const category = categories.find((c) => c.slug === categorySlug)
+      if (!category) return null
+
+      return (
+        <ServiceFiltersPill
+          text={category.name}
+          icon={category.icon}
+          searchParamName="categories"
+          searchParamValue={categorySlug}
+        />
+      )
+    })
+  }
+  {
+    filters.currencies.map((currencyId) => {
+      const currency = getCurrencyInfo(currencyId)
+
+      return (
+        <ServiceFiltersPill
+          text={currency.name}
+          searchParamName="currencies"
+          searchParamValue={currency.slug}
+          icon={currency.icon}
+        />
+      )
+    })
+  }
+  {
+    filters.networks.map((network) => {
+      const networkOption = getNetworkInfo(network)
+
+      return (
+        <ServiceFiltersPill
+          text={networkOption.name}
+          icon={networkOption.icon}
+          searchParamName="networks"
+          searchParamValue={network}
+        />
+      )
+    })
+  }
+  {
+    filters['max-kyc'] < 4 && (
+      <ServiceFiltersPill
+        text={`KYC Lvl ≤ ${filters['max-kyc'].toLocaleString()}`}
+        icon="ri:shield-keyhole-line"
+        searchParamName="max-kyc"
+      />
+    )
+  }
+  {
+    filters['user-rating'] > 0 && (
+      <ServiceFiltersPill
+        text={`Rating ≥ ${filters['user-rating'].toLocaleString()}★`}
+        icon="ri:star-fill"
+        searchParamName="user-rating"
+      />
+    )
+  }
+  {
+    filters['min-score'] > 0 && (
+      <ServiceFiltersPill
+        text={`Score ≥ ${filters['min-score'].toLocaleString()}`}
+        icon="ri:medal-line"
+        searchParamName="min-score"
+      />
+    )
+  }
+  {
+    filters['attribute-mode'] === 'and' && filters.attr && Object.keys(filters.attr).length > 1 && (
+      <ServiceFiltersPill
+        text="Attributes: AND"
+        icon="ri:filter-3-line"
+        searchParamName="attribute-mode"
+        searchParamValue="and"
+      />
+    )
+  }
+  {
+    filters.attr &&
+      Object.entries(filters.attr)
+        .filter((entry): entry is [string, 'no' | 'yes'] => entry[1] === 'yes' || entry[1] === 'no')
+        .map(([attributeId, attributeValue]) => {
+          const attribute = attributes.find((attr) => String(attr.id) === attributeId)
+          if (!attribute) return null
+          const valueInfo = attributeOptions.find((option) => option.value === attributeValue)
+          const prefix = valueInfo?.prefix ?? transformCase(attributeValue, 'title')
+          return (
+            <ServiceFiltersPill
+              text={`${prefix}: ${attribute.title}`}
+              searchParamName={`attr-${attributeId}`}
+              searchParamValue={attributeValue}
+            />
+          )
+        })
+  }
+
+  {
+    !areEqualArraysWithoutOrder(
+      filters.verification,
+      filtersOptions.verification
+        .filter((verification) => verification.default)
+        .map((verification) => verification.value)
+    ) &&
+      orderBy(
+        filters.verification.map((verificationStatus) => getVerificationStatusInfo(verificationStatus)),
+        'order',
+        'desc'
+      ).map((verificationStatusInfo) => {
+        return (
+          <ServiceFiltersPill
+            text={verificationStatusInfo.label}
+            icon={verificationStatusInfo.icon}
+            iconClass={verificationStatusInfo.classNames.icon}
+            searchParamName="verification"
+            searchParamValue={verificationStatusInfo.slug}
+          />
+        )
+      })
+  }
+</div>

web/src/components/ServicesSearchResults.astro

@@ -1,16 +1,22 @@
 ---
 import { Icon } from 'astro-icon/components'
-import { uniq } from 'lodash-es'
+import { uniq, orderBy } from 'lodash-es'
 
-import { verificationStatusesByValue } from '../constants/verificationStatus'
+import { getCurrencyInfo } from '../constants/currencies'
+import { getKycLevelInfo } from '../constants/kycLevels'
+import { verificationStatusesByValue, getVerificationStatusInfo } from '../constants/verificationStatus'
+import { areEqualArraysWithoutOrder } from '../lib/arrays'
 import { cn } from '../lib/cn'
 import { pluralize } from '../lib/pluralize'
+import { transformCase } from '../lib/strings'
 import { createPageUrl, urlWithParams } from '../lib/urls'
 
 import Button from './Button.astro'
 import ServiceCard from './ServiceCard.astro'
+import ServiceFiltersPillsRow from './ServiceFiltersPillsRow.astro'
 
-import type { ServicesFiltersObject } from '../pages/index.astro'
+import type { AttributeOption, ServicesFiltersObject, ServicesFiltersOptions } from '../pages/index.astro'
+import type { Prisma } from '@prisma/client'
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
 
 type Props = HTMLAttributes<'div'> & {
@@ -23,6 +29,22 @@ type Props = HTMLAttributes<'div'> & {
   filters: ServicesFiltersObject
   countCommunityOnly: number | null
   inlineIcons?: boolean
+  filtersOptions: ServicesFiltersOptions
+  categories: Prisma.CategoryGetPayload<{
+    select: {
+      name: true
+      namePluralLong: true
+      slug: true
+      icon: true
+    }
+  }>[]
+  attributes: Prisma.AttributeGetPayload<{
+    select: {
+      title: true
+      id: true
+    }
+  }>[]
+  attributeOptions: AttributeOption[]
 }
 
 const {
@@ -36,6 +58,10 @@ const {
   filters,
   countCommunityOnly,
   inlineIcons,
+  categories,
+  filtersOptions,
+  attributes,
+  attributeOptions,
   ...divProps
 } = Astro.props
 
@@ -55,9 +81,117 @@ const urlIfIncludingCommunity = urlWithParams(Astro.url, {
     verificationStatusesByValue.COMMUNITY_CONTRIBUTED.slug,
   ]),
 })
+
+const searchTitle = (() => {
+  if (filters.q) {
+    return `Search results for “${filters.q}”`
+  }
+  const listOrformatter = new Intl.ListFormat('en', { style: 'long', type: 'disjunction' })
+  const listAndformatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
+
+  let [prefix, base, attributesPart, currencies, kycLevel, score] = ['', 'services', '', '', '', '']
+
+  if (!hasDefaultFilters) {
+    prefix = 'filtered'
+  }
+
+  const attributesFilters = Object.entries(filters.attr ?? {})
+    .filter((entry): entry is [string, 'no' | 'yes'] => entry[1] === 'yes' || entry[1] === 'no')
+    .map(([attributeId, attributeValue]) => {
+      const attribute = attributes.find((attr) => String(attr.id) === attributeId)
+      if (!attribute) return null
+      const valueInfo = attributeOptions.find((option) => option.value === attributeValue)
+      const prefix = valueInfo?.prefix ?? transformCase(attributeValue, 'title')
+      const prefixWith = valueInfo?.prefixWith ?? transformCase(attributeValue, 'title')
+      return {
+        prefix,
+        prefixWith,
+        attribute,
+        valueInfo,
+        value: attributeValue,
+      }
+    })
+    .filter((attr) => !!attr)
+
+  if (attributesFilters.length === 1 || attributesFilters.length === 2) {
+    const formatter = filters['attribute-mode'] === 'and' ? listAndformatter : listOrformatter
+    attributesPart = formatter.format(
+      attributesFilters.map((attr) => `${attr.prefixWith} ${attr.attribute.title}`)
+    )
+    prefix = ''
+  }
+
+  if (
+    filters.verification.length === 1 ||
+    (!attributesFilters.length &&
+      !filters.currencies.length &&
+      !(filters['max-kyc'] <= 3) &&
+      !(filters['min-score'] >= 1) &&
+      areEqualArraysWithoutOrder(filters.verification, ['APPROVED', 'VERIFICATION_SUCCESS']))
+  ) {
+    base = `${listAndformatter.format(
+      orderBy(
+        filters.verification.map((v) => getVerificationStatusInfo(v)),
+        'order',
+        'desc'
+      ).map((v) => v.label)
+    )} services`
+    prefix = ''
+  }
+
+  if (filters.categories.length >= 1) {
+    base = listAndformatter.format(
+      filters.categories.map((c) => {
+        const cat = categories.find((cat) => cat.slug === c)
+        if (!cat) return c
+        return cat.namePluralLong ?? cat.name
+      })
+    )
+    prefix = ''
+  }
+
+  if (filters.currencies.length >= 1) {
+    const currenciesList = filters.currencies.map((c) => getCurrencyInfo(c).name)
+    const formatter = filters['currency-mode'] === 'and' ? listAndformatter : listOrformatter
+    currencies = `that accept ${formatter.format(currenciesList)}`
+    prefix = ''
+  }
+
+  if (filters['max-kyc'] === 0) {
+    const kycLevelInfo = getKycLevelInfo(String(filters['max-kyc']))
+    kycLevel = `with ${kycLevelInfo.name}`
+    prefix = ''
+  } else if (filters['max-kyc'] <= 3) {
+    kycLevel = `with KYC level ${filters['max-kyc']} or better`
+    prefix = ''
+  }
+
+  if (filters['min-score'] >= 1) {
+    score = `with score ${filters['min-score'].toLocaleString()} or more`
+    prefix = ''
+  }
+
+  const finalArray = [attributesPart, currencies, kycLevel, score].filter((str) => !!str)
+  const title = transformCase(`${prefix} ${base} ${finalArray.join('; ')}`.trim(), 'first-upper')
+
+  return title.length > 60 ? 'Filtered Services' : title
+})()
 ---
 
-<div {...divProps} class={cn('flex-1', className)}>
+<div {...divProps} class={cn('min-w-0 flex-1', className)}>
+  <div class="hidden flex-wrap items-center justify-between gap-x-4 sm:flex">
+    <h1 class="font-title text-day-100 mb-2 text-xl leading-tight lg:text-2xl">
+      {searchTitle}
+    </h1>
+    <ServiceFiltersPillsRow
+      class="mask-l-from-[calc(100%-var(--spacing)*4)] pb-2"
+      filters={filters}
+      filtersOptions={filtersOptions}
+      categories={categories}
+      attributes={attributes}
+      attributeOptions={attributeOptions}
+    />
+  </div>
   <div class="flex items-center justify-between">
     <span class="text-day-500 xs:gap-x-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm sm:gap-x-6">
       {total.toLocaleString()}