From 273927807a23bb14e2bcbdfb977f6a292eaa0979 Mon Sep 17 00:00:00 2001
From: sgoudham <sgoudham@gmail.com>
Date: Sun, 10 Aug 2025 02:09:55 +0100
Subject: [PATCH] feat(ports): use virtual list

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 19 +++++++++++++
 src/pages/ports/_components/PortCard.svelte   | 28 +++++++++++++------
 src/pages/ports/_components/PortGrid.svelte   | 16 +++++++++--
 .../ports/_components/PortMaintainers.svelte  | 10 +++++--
 5 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 7c5a2265..a1729aea 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "surge": "^0.24.6",
     "svelte": "5.35.3",
     "svelte-intersection-observer-action": "^0.0.5",
+    "svelte-virtuallists": "^1.4.2",
     "tsx": "^4.20.3",
     "typescript": "^5.9.2",
     "vite": "^6.3.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 75c7c268..83d83abc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,6 +110,9 @@ importers:
       svelte-intersection-observer-action:
         specifier: ^0.0.5
         version: 0.0.5
+      svelte-virtuallists:
+        specifier: ^1.4.2
+        version: 1.4.2(svelte@5.35.3)
       tsx:
         specifier: ^4.20.3
         version: 4.20.3
@@ -412,6 +415,10 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@eslint/js@9.33.0':
+    resolution: {integrity: sha512-5K1/mKhWaMfreBGJTwval43JJmkip0RmM+3+IuqupeSKNC/Th2Kc7ucaq5ovTSra/OOKB9c58CGSz3QMVbWt0A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@expressive-code/core@0.41.3':
     resolution: {integrity: sha512-9qzohqU7O0+JwMEEgQhnBPOw5DtsQRBXhW++5fvEywsuX44vCGGof1SL5OvPElvNgaWZ4pFZAFSlkNOkGyLwSQ==}
 
@@ -2933,6 +2940,11 @@ packages:
   svelte-intersection-observer-action@0.0.5:
     resolution: {integrity: sha512-d5WVlE3Dpxx554cOYBm9BkIfba0+/r1O1yKuekQH/ScXW78mNB+R7A/LSfmGTFBNHvqjPZ9Vehfx1iIJti1saw==}
 
+  svelte-virtuallists@1.4.2:
+    resolution: {integrity: sha512-ZvBU1BMmt2uY/spjuZn+XOtHVxOpU/Cfiy+dajxrOXe6KysjAY2O0R1cLonEGl+/AMy0or6/dO+KA3/C6R3l2A==}
+    peerDependencies:
+      svelte: ^5.20.5
+
   svelte2tsx@0.7.42:
     resolution: {integrity: sha512-PSNrKS16aVdAajoFjpF5M0t6TA7ha7GcKbBajD9RG3M+vooAuvLnWAGUSC6eJL4zEOVbOWKtcS2BuY4rxPljoA==}
     peerDependencies:
@@ -3789,6 +3801,8 @@ snapshots:
   '@esbuild/win32-x64@0.25.8':
     optional: true
 
+  '@eslint/js@9.33.0': {}
+
   '@expressive-code/core@0.41.3':
     dependencies:
       '@ctrl/tinycolor': 4.1.0
@@ -6982,6 +6996,11 @@ snapshots:
 
   svelte-intersection-observer-action@0.0.5: {}
 
+  svelte-virtuallists@1.4.2(svelte@5.35.3):
+    dependencies:
+      '@eslint/js': 9.33.0
+      svelte: 5.35.3
+
   svelte2tsx@0.7.42(svelte@5.35.3)(typescript@5.9.2):
     dependencies:
       dedent-js: 1.0.1
diff --git a/src/pages/ports/_components/PortCard.svelte b/src/pages/ports/_components/PortCard.svelte
index 851c0e46..5d3e5245 100644
--- a/src/pages/ports/_components/PortCard.svelte
+++ b/src/pages/ports/_components/PortCard.svelte
@@ -1,10 +1,20 @@
 <script lang="ts">
-  import type { PortWithIcons } from "@data/ports";
   import Icon from "@iconify/svelte";
   import { intersect } from "svelte-intersection-observer-action";
   import PortMaintainers from "./PortMaintainers.svelte";
+  import type { Collaborator } from "@catppuccin/catppuccin/resources/types/ports.porcelain.schema";
+
+  interface Props {
+    url: string;
+    name: string;
+    color: string;
+    iconBody: string;
+    iconWidth: number | undefined;
+    iconHeight: number | undefined;
+    currentMaintainers: Collaborator[];
+  }
 
-  let { port }: { port: PortWithIcons } = $props();
+  let { url, name, color, iconBody, iconWidth, iconHeight, currentMaintainers }: Props = $props();
   let visible = $state(false);
 
   const threshold = 0.1;
@@ -20,20 +30,20 @@
   }
 </script>
 
-<a href={port.repository.url} class="port-card" class:visible use:intersect={options}>
+<a href={url} class="port-card" class:visible use:intersect={options}>
   <div class="port-header">
-    <p class="port-name">{port.name}</p>
+    <p class="port-name">{name}</p>
     <Icon
-      color="var(--{port.color})"
+      color="var(--{color})"
       width={32}
       height={32}
       icon={{
-        body: port.icon.body,
-        width: port.icon.width,
-        height: port.icon.height,
+        body: iconBody,
+        width: iconWidth,
+        height: iconHeight,
       }} />
   </div>
-  <PortMaintainers {port} />
+  <!-- <PortMaintainers {currentMaintainers} currentMaintainersLength={currentMaintainers.length} /> -->
 </a>
 
 <style lang="scss">
diff --git a/src/pages/ports/_components/PortGrid.svelte b/src/pages/ports/_components/PortGrid.svelte
index b2be7a7b..8c7a761e 100644
--- a/src/pages/ports/_components/PortGrid.svelte
+++ b/src/pages/ports/_components/PortGrid.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { PortWithIcons } from "@data/ports";
   import PortCard from "./PortCard.svelte";
+  import { VirtualList, type VLSlotSignature } from "svelte-virtuallists";
 
   interface Props {
     portGrid: PortWithIcons[];
@@ -21,8 +22,17 @@
       </p>
     </div>
   {:else if portGrid.length > 0}
-    {#each portGrid as port (port.key)}
-      <PortCard {port} />
-    {/each}
+    <VirtualList items={portGrid}>
+      {#snippet vl_slot({ item }: VLSlotSignature<(typeof portGrid)[0]>)}
+        <PortCard
+          name={item.name}
+          url={item.repository.url}
+          color={item.color}
+          iconBody={item.icon.body}
+          iconWidth={item.icon.width}
+          iconHeight={item.icon.height}
+          currentMaintainers={item.repository["current-maintainers"]} />
+      {/snippet}
+    </VirtualList>
   {/if}
 </div>
diff --git a/src/pages/ports/_components/PortMaintainers.svelte b/src/pages/ports/_components/PortMaintainers.svelte
index 6cc63839..41409aee 100644
--- a/src/pages/ports/_components/PortMaintainers.svelte
+++ b/src/pages/ports/_components/PortMaintainers.svelte
@@ -2,13 +2,17 @@
   import type { PortWithIcons } from "@data/ports";
   import ProfilePicture from "@components/ProfilePicture.svelte";
   import NoMaintainerIcon from "@data/icons/lucide-user-round-x.svg?raw";
+  import type { RepositoryCurrentMaintainers } from "@catppuccin/catppuccin/resources/types/ports.porcelain.schema";
 
-  let { port }: { port: PortWithIcons } = $props();
+  let {
+    currentMaintainers,
+    currentMaintainersLength,
+  }: { currentMaintainers: RepositoryCurrentMaintainers; currentMaintainersLength: number } = $props();
 </script>
 
-{#if port.repository["current-maintainers"].length > 0}
+{#if currentMaintainersLength > 0}
   <div class="current-maintainers" title="All users who currently maintain this port">
-    {#each port.repository["current-maintainers"] as maintainer}
+    {#each currentMaintainers as maintainer}
       <ProfilePicture username={maintainer.username} size={64} wxh={32} />
     {/each}
   </div>