feat: optionally count list items and display number after list name …

…in format: 'yourListname (<number of li>)'

src/lib/components/composites/NamedList.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-    type T = $$Generic; /* eslint-disable-line no. */
+    type T = $$Generic; /* eslint-disable-line no-undef */
 
     interface NamedListProps {
         listName: string;
-        items: [T];
+        items: T[];
         ListItemComponent: Snippet<[T]>;
+        showNumberOfListItems?: boolean;
     }
 
-    const { listName, items, ListItemComponent: children }: NamedListProps = $props();
+    const {
+        listName,
+        items,
+        ListItemComponent: children,
+        showNumberOfListItems = false,
+    }: NamedListProps = $props();
 </script>
 
 <!--@component
@@ -19,21 +25,26 @@ Therefore use this component as following:
 
 Usage:
 ```svelte
-    <NamedList listName={yourListName} items={yourListItems}>
+    <NamedList listName={yourListName} items={yourListItems} showNumberOfListItems>
         {#snippet ListItemComponent(componentData)}
             <YourComponent {...componentData} />
         {/snippet}
     </NamedList>
 ```
-
 items require a list of objects of type T, so of the same type
 as the props of `YourComponent`.
+If the option showNumberOfListItems is set to true (default: false),
+the number of list items is added to the list name / header, like 'yourListName (10)'.
 -->
-<section class="flex flex-col h-full w-full px-5 gap-y-5">
-    <h2>{listName}</h2>
+<div class="flex flex-col h-full w-full px-5 gap-y-5">
+    {#if showNumberOfListItems}
+        <h2>{listName} ({items.length})</h2>
+    {:else}
+        <h2>{listName}</h2>
+    {/if}
     <ul class="space-y-4">
         {#each items as item}
             <li>{@render children?.(item)}</li>
         {/each}
     </ul>
-</section>
+</div>

src/routes/+page.svelte

@@ -18,7 +18,7 @@
     <section class="flex flex-col h-full w-full px-5 gap-y-4">
         <h2>Open Reviews</h2>
     </section>
-    <NamedList listName="Projects" items={projectMetadata}>
+    <NamedList listName="Projects" items={projectMetadata} showNumberOfListItems={true}>
         {#snippet ListItemComponent(componentData)}
             <ProjectListEntry {...componentData} />
         {/snippet}

src/routes/+page.ts

@@ -93,6 +93,24 @@ export const load: PageLoad = async () => {
             stage: 1,
             stageProgress: 82,
         },
+        {
+            project: createProject({ id: 3, name: "Demo Project 2" }),
+            members: [Users.johnDoe, Users.janeDoe],
+            stage: 2,
+            stageProgress: 70,
+        },
+        {
+            project: createProject({ id: 4, name: "Demo Project 3" }),
+            members: [Users.johnDoe, Users.janeDoe],
+            stage: 2,
+            stageProgress: 70,
+        },
+        {
+            project: createProject({ id: 5, name: "Demo Project 4" }),
+            members: [Users.johnDoe, Users.janeDoe],
+            stage: 2,
+            stageProgress: 70,
+        },
     ];
 
     return { projectMetadata: projectMetadataExamples };