feat: new /developer/tools pages

app/[locale]/apps/[application]/page.tsx

@@ -8,6 +8,7 @@ import {
 
 import type { ChainName, CommitHistory, Lang, PageParams } from "@/lib/types"
 
+import AppCard from "@/components/AppCard"
 import ChainImages from "@/components/ChainImages"
 import { ChevronNext } from "@/components/Chevron"
 import I18nProvider from "@/components/I18nProvider"
@@ -41,8 +42,6 @@ import {
 import { slugify } from "@/lib/utils/url"
 import { formatStringList } from "@/lib/utils/wallets"
 
-import AppCard from "../_components/AppCard"
-
 import ScreenshotSwiper from "./_components/ScreenshotSwiper"
 import AppsAppJsonLD from "./page-jsonld"
 
@@ -366,12 +365,27 @@ const Page = async ({
                       className="flex-1 lg:w-1/3 lg:flex-none"
                     >
                       <AppCard
-                        app={relatedApp}
-                        imageSize={24}
-                        showDescription
-                        hoverClassName="hover:bg-background-highlight/50"
-                        matomoCategory="detail"
-                        matomoAction="more_apps"
+                        name={relatedApp.name}
+                        description={relatedApp.description}
+                        thumbnail={relatedApp.image}
+                        category={relatedApp.category}
+                        categoryTagStatus={
+                          APP_TAG_VARIANTS[relatedApp.category]
+                        }
+                        tags={relatedApp.subCategory}
+                        href={`/apps/${slugify(relatedApp.name)}`}
+                        imageSize="large"
+                        className="hover:bg-background-highlight/50"
+                        customEventOptions={{
+                          eventCategory: "detail",
+                          eventAction: "more_apps",
+                          eventName: `app name ${relatedApp.name}`,
+                        }}
+                        descriptionTracking={{
+                          eventCategory: "detail",
+                          eventAction: "more_apps_show_more",
+                          eventName: `app description ${relatedApp.name}`,
+                        }}
                       />
                     </div>
                   ))}

app/[locale]/apps/_components/AppsHighlight.tsx

@@ -1,12 +1,13 @@
 import { AppData } from "@/lib/types"
 
+import AppCard from "@/components/AppCard"
 import { Image } from "@/components/Image"
 import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
 import TruncatedText from "@/components/ui/TruncatedText"
 
+import { APP_TAG_VARIANTS } from "@/lib/utils/apps"
 import { slugify } from "@/lib/utils/url"
 
-import AppCard from "./AppCard"
 import AppsSwiper from "./AppsSwiper"
 
 interface AppsHighlightProps {
@@ -49,11 +50,13 @@ const AppsHighlight = ({ apps, matomoCategory }: AppsHighlightProps) => {
           </TruncatedText>
         </div>
         <AppCard
-          app={app}
-          imageSize={16}
-          disableLink
-          matomoCategory={matomoCategory}
-          matomoAction="highlights"
+          name={app.name}
+          thumbnail={app.image}
+          category={app.category}
+          categoryTagStatus={APP_TAG_VARIANTS[app.category]}
+          tags={app.subCategory}
+          layout="horizontal"
+          imageSize="medium"
         />
       </LinkOverlay>
     </LinkBox>

app/[locale]/apps/_components/AppsTable.tsx

@@ -4,23 +4,13 @@ import { useMemo, useState } from "react"
 
 import { AppData } from "@/lib/types"
 
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
+import AppCard from "@/components/AppCard"
+import FilterBar from "@/components/FilterBar"
 
-import { trackCustomEvent } from "@/lib/utils/matomo"
-
-import AppCard from "./AppCard"
-
-import useTranslation from "@/hooks/useTranslation"
+import { slugify } from "@/lib/utils/url"
 
 const AppsTable = ({ apps }: { apps: AppData[] }) => {
-  const { t } = useTranslation("page-apps")
-  const [filterBy, setFilterBy] = useState("All")
+  const [filterBy, setFilterBy] = useState<string>()
 
   const subCategories = useMemo(
     () => [...new Set(apps.flatMap((app) => app.subCategory))],
@@ -34,72 +24,46 @@ const AppsTable = ({ apps }: { apps: AppData[] }) => {
   const filteredApps = useMemo(
     () =>
       apps.filter((app) => {
-        if (filterBy === "All") return true
+        if (!filterBy) return true
         return app.subCategory.includes(filterBy)
       }),
     [apps, filterBy]
   )
 
+  const filterItems = subCategories.map((subCategory) => ({
+    value: subCategory,
+    label: `${subCategory} (${getSubCategoryCount(subCategory)})`,
+  }))
+
   return (
     <div className="flex flex-col gap-7">
-      <div className="flex flex-row items-end justify-between border-b pb-2 sm:items-center">
-        <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
-          <p className="whitespace-nowrap">{t("page-apps-filter-by")}</p>
-          <Select
-            value={filterBy}
-            onValueChange={(value) => {
-              setFilterBy(value)
-              trackCustomEvent({
-                eventCategory: "category_page",
-                eventAction: "filter_by",
-                eventName: `subcategory name ${value}`,
-              })
-            }}
-          >
-            <SelectTrigger className="min-w-28">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem
-                value="All"
-                className="cursor-pointer hover:bg-primary-low-contrast"
-              >
-                {t("page-apps-filter-all")}
-              </SelectItem>
-              {subCategories.map((subCategory) => (
-                <SelectItem
-                  key={subCategory}
-                  value={subCategory}
-                  className="cursor-pointer hover:bg-primary-low-contrast"
-                >
-                  {subCategory} ({getSubCategoryCount(subCategory)})
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div>
-          <p className="text-body-medium">
-            {t("page-apps-showing")}{" "}
-            <span className="text-body">
-              (
-              {filteredApps.length === apps.length
-                ? apps.length
-                : `${filteredApps.length}/${apps.length}`}
-              )
-            </span>
-          </p>
-        </div>
-      </div>
+      <FilterBar
+        items={filterItems}
+        value={filterBy}
+        onValueChange={setFilterBy}
+        count={filteredApps.length}
+        totalCount={apps.length}
+        matomoEvent={{
+          eventCategory: "category_page",
+          eventAction: "filter_by",
+          eventName: "",
+        }}
+      />
       <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
         {filteredApps.map((app) => (
           <div key={app.name}>
             <AppCard
-              app={app}
-              imageSize={14}
-              hideTag
-              matomoCategory="category_page"
-              matomoAction="apps"
+              name={app.name}
+              thumbnail={app.image}
+              tags={app.subCategory}
+              href={`/apps/${slugify(app.name)}`}
+              layout="horizontal"
+              imageSize="thumbnail"
+              customEventOptions={{
+                eventCategory: "category_page",
+                eventAction: "apps",
+                eventName: `app name ${app.name}`,
+              }}
             />
           </div>
         ))}