feat: improve micro-interactions across CTA, pagination, and likes cache

docs/MODEL_CACHE_SPLIT.md

@@ -0,0 +1,61 @@
+# Model cache: likes vs stable content
+
+## Current behavior
+
+Model list data (`searchModels`) and detail data (`getModelBySlug`) share the `"models"` cache tag. A like/unlike calls `invalidateAllModels()` → `updateTag("models")`, which expires every entry tagged `"models"`.
+
+Rebuild is **lazy**: Next.js only re-runs a cache entry when something requests it again. Invalidation itself is cheap; cost shows up as fresher DB work + RSC serialization on the next hit of each expired key (each query/page/sort/category combo is its own entry).
+
+This is intentional for now: likes affect both displayed counts and `sort=popular` ordering, so list-level invalidation keeps rankings and counts consistent for the next request (read-your-own-writes via `updateTag`).
+
+## Longer-term: split long-lived and short-lived caches
+
+Today one cached blob mixes fields that change at different rates:
+
+| Layer | Fields | Change rate | Suggested life / tags |
+|-------|--------|-------------|------------------------|
+| **Stable content** | `slug`, `name`, `description`, `image`, `categorySlug`, `dateAdded` | Rare (edit/create) | Long `cacheLife` (`max` / days); tags like `model-content-${slug}`, `model-content` |
+| **Volatile counters** | `likes` | Every toggle | Short life or per-slug tags `model-likes-${slug}`; optional soft tag `model-likes` with `revalidateTag(..., "max")` for other users |
+| **Per-user** | `hasLiked` | Per user | Already request-scoped / private (not in shared `"models"` list cache) |
+
+### What gets cheaper
+
+Invalidating only the likes layer avoids re-fetching and re-serializing stable content (titles, descriptions, image props) on every heart click. Toggle should prefer `updateTag(\`model-likes-${slug}\`)` so one counter entry expires, not every content entry.
+
+### Sorting impact (the hard part)
+
+Splitting **counts** from **content** does not fully solve list caching:
+
+- **`sort=recent` / name**: Order does not depend on likes. A long-lived “page of slugs + content” cache can stay warm; only the likes overlay refreshes.
+- **`sort=popular`**: `ORDER BY likes DESC` means **which models appear on a page** depends on likes. That ordering key is volatile. Options:
+  1. Accept eventual consistency (short `cacheLife` or SWR on popular page keys only).
+  2. Tag popular order separately (e.g. `models-order-popular`) and revalidate that on toggle without touching content caches.
+  3. Keep today’s broad `"models"` invalidation for popular correctness (**chosen for now**).
+
+Until popular order is its own short-lived cache (or staleness is accepted), “invalidate all models on like” remains the simple correctness choice. `invalidateModel` was removed; only `invalidateAllModels()` remains.
+
+### Suggested end state
+
+```
+search / list (stable fields + slug order for non-popular sorts)
+  → long cache
+
+popular slug pages
+  → short cache / dedicated order tags
+
+per-model likes (and detail likes)
+  → per-slug likes tags on toggle
+
+model content by slug
+  → long cache; invalidate only on content edits
+```
+
+Wire invalidation in `src/utils/cache-invalidation.ts` and call sites (e.g. `toggleLike`) once those layers exist.
+
+## Related code
+
+- `src/utils/cache-invalidation.ts` — `invalidateAllModels` only (simple broad `"models"` tag)
+- `src/features/models/likes/actions/toggle-like.ts` — like/unlike invalidation
+- `src/features/models/dal/search-models.ts` — `cacheTag("models")`
+- `src/features/models/queries/get-model-by-slug.ts` — `cacheTag("models", \`model-${slug}\`)`
+- `src/features/models/sort/order-for-sort.ts` — popular orders by `models.likes`

package.json

@@ -18,21 +18,21 @@
     "react-icons": "5.7.0",
     "slugify": "1.6.9",
     "valibot": "1.4.2",
-    "varlock": "1.14.1"
+    "varlock": "1.15.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.3",
+    "@biomejs/biome": "2.5.6",
     "@happy-dom/global-registrator": "20.11.1",
     "@pandacss/dev": "2.0.0-beta.11",
     "@pandacss/preset-base": "2.0.0-beta.11",
     "@pandacss/preset-panda": "2.0.0-beta.11",
     "@pandacss/preset-typography": "2.0.0-beta.11",
-    "@playwright/test": "1.62.0",
+    "@playwright/test": "1.62.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
     "@types/bun": "1.3.14",
-    "@types/react": "19.2.17",
-    "@types/react-dom": "19.2.3",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
     "@varlock/nextjs-integration": "1.2.0",
     "drizzle-kit": "1.0.0-rc.4",
     "happy-dom": "20.11.1",

src/app/page.tsx

@@ -1,8 +1,10 @@
-import { css } from "@styled-system/css";
+import { css, cx } from "@styled-system/css";
 import { grid, gridItem } from "@styled-system/patterns";
 import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
+import { FaArrowRight } from "react-icons/fa6";
+import { arrowRecipe } from "@/components/arrow-recipe";
 import {
   HERO_IMAGE_SQUARE_HEIGHT,
   HERO_IMAGE_SQUARE_SRC,
@@ -65,20 +67,47 @@ const Home = () => (
         user-submitted models.
       </p>
       <Link
-        className={gridItem({
-          backgroundColor: { _hover: "black", base: "white" },
-          borderColor: "black",
-          borderWidth: 2,
-          color: { _hover: "white", base: "black" },
-          justifySelf: "start",
-          paddingBlock: 3,
-          paddingInline: 6,
-          transitionDuration: "normal",
-          transitionProperty: "colors",
-        })}
+        className={cx(
+          "group",
+          gridItem({
+            _active: {
+              backgroundColor: "brand.subtle",
+              borderColor: "brand",
+            },
+            _focusVisible: {
+              borderColor: "brand",
+              outline: "3px solid token(colors.brand)",
+              outlineOffset: "4px",
+            },
+            _hover: {
+              borderColor: "brand",
+            },
+            alignItems: "center",
+            backgroundColor: "white",
+            borderColor: "black",
+            borderWidth: 2,
+            color: "black",
+            display: "inline-flex",
+            gap: 3,
+            justifySelf: "start",
+            paddingBlock: 3,
+            paddingInline: 6,
+            transitionDuration: "fast",
+            transitionProperty: "colors",
+            transitionTimingFunction: "outDramatic",
+          }),
+        )}
         href="/3d-models"
       >
-        Browse Models
+        <span>Browse Models</span>
+        <FaArrowRight
+          aria-hidden="true"
+          className={arrowRecipe({
+            direction: "right",
+            distance: "default",
+            size: "md",
+          })}
+        />
       </Link>
     </div>
     <Image

src/components/arrow-recipe.ts

@@ -0,0 +1,129 @@
+import { cva } from "@styled-system/css";
+
+/**
+ * PandaCSS CVA recipe for directional arrow icons inside interactive groups.
+ *
+ * Directions: `left` | `right`
+ * Distances: `compact` | `default`
+ * Sizes: `sm` | `md` | `lg`
+ */
+export const arrowRecipe = cva({
+  base: {
+    // Panda emits group-hover rules after group-disabled rules. Keep disabled
+    // arrows visually inert even when the pointer is over the disabled button.
+    _groupDisabled: {
+      color: "gray.500 !important",
+      scale: "1 !important",
+      translate: "0 !important",
+    },
+    color: "gray.500",
+    flexShrink: 0,
+    scale: "1",
+    transitionDuration: "normal",
+    transitionProperty: "colors,translate,scale",
+    transitionTimingFunction: "glide",
+    translate: "0",
+  },
+  compoundVariants: [
+    {
+      css: {
+        _groupActive: {
+          color: "brand",
+          scale: "0.9",
+          translate: "-0.125rem 0",
+        },
+        _groupFocus: {
+          color: "brand",
+          translate: "-0.1875rem 0",
+        },
+        _groupHover: {
+          color: "brand",
+          translate: "-0.1875rem 0",
+        },
+      },
+      direction: "left",
+      distance: "compact",
+    },
+    {
+      css: {
+        _groupActive: {
+          color: "brand",
+          scale: "0.9",
+          translate: "-0.25rem 0",
+        },
+        _groupFocus: {
+          color: "brand",
+          translate: "-0.375rem 0",
+        },
+        _groupHover: {
+          color: "brand",
+          translate: "-0.375rem 0",
+        },
+      },
+      direction: "left",
+      distance: "default",
+    },
+    {
+      css: {
+        _groupActive: {
+          color: "brand",
+          scale: "0.9",
+          translate: "0.125rem 0",
+        },
+        _groupFocus: {
+          color: "brand",
+          translate: "0.1875rem 0",
+        },
+        _groupHover: {
+          color: "brand",
+          translate: "0.1875rem 0",
+        },
+      },
+      direction: "right",
+      distance: "compact",
+    },
+    {
+      css: {
+        _groupActive: {
+          color: "brand",
+          scale: "0.9",
+          translate: "0.25rem 0",
+        },
+        _groupFocus: {
+          color: "brand",
+          translate: "0.375rem 0",
+        },
+        _groupHover: {
+          color: "brand",
+          translate: "0.375rem 0",
+        },
+      },
+      direction: "right",
+      distance: "default",
+    },
+  ],
+  defaultVariants: {
+    direction: "right",
+    distance: "default",
+    size: "md",
+  },
+  variants: {
+    direction: {
+      left: {},
+      right: {},
+    },
+    distance: {
+      compact: {},
+      default: {},
+    },
+    size: {
+      lg: { size: 6 },
+      md: { size: 4 },
+      sm: { size: 3 },
+    },
+  },
+});
+
+// type ArrowVariantProps = NonNullable<
+//   RecipeVariantProps<typeof arrowRecipe>
+// >;