770 organize large projects

package.json

@@ -49,10 +49,6 @@
     "devDependencies": {
         "@google-cloud/translate": "^9",
         "@playwright/test": "^1",
-        "svelte": "^5",
-        "svelte-check": "^4",
-        "svelte-jester": "^5",
-        "svelte-preprocess": "^6.0",
         "@sveltejs/adapter-static": "^3",
         "@sveltejs/kit": "^2.20.6",
         "@sveltejs/vite-plugin-svelte": "^5",
@@ -71,6 +67,10 @@
         "prettier": "^3",
         "prettier-plugin-svelte": "^3",
         "run-script-os": "^1",
+        "svelte": "^5",
+        "svelte-check": "^4",
+        "svelte-jester": "^5",
+        "svelte-preprocess": "^6.0",
         "ts-jest": "^29",
         "ts-json-schema-generator": "^2",
         "tslib": "^2",
@@ -90,19 +90,23 @@
         "firebase-admin": "^13",
         "firebase-functions": "^6",
         "firebase-functions-test": "^3",
+        "fuse.js": "^7.1.0",
         "graphemer": "^1.4.0",
         "matter-js": "^0.20",
         "pitchy": "^4.1.0",
         "recoverable-random": "^1.0.5",
+        "shared-types": "file:./functions/src/shared",
         "uuid": "^11",
-        "zod": "^3.23.8",
-        "shared-types": "file:./functions/src/shared"
+        "zod": "^3.23.8"
     },
     "browserslist": [
         "defaults",
         "not op_mini all"
     ],
     "bundledDependencies": [
         "shared-types"
+    ],
+    "bundleDependencies": [
+        "shared-types"
     ]
 }

src/components/app/ProjectPreview.svelte

@@ -35,6 +35,8 @@
         children?: import('svelte').Snippet;
         anonymize?: boolean;
         showCollaborators?: boolean;
+        /** Search term for highlighting matches in project names */
+        searchTerm?: string;
     }
 
     function findCharacterName(value: Value): string | null {
@@ -71,6 +73,7 @@
         children,
         anonymize = true,
         showCollaborators = false,
+        searchTerm = '',
     }: Props = $props();
 
     // Clone the project and get its initial value, then stop the project's evaluator.
@@ -166,6 +169,7 @@
     const user = getUser();
 
     let path = $derived(link ?? project.getLink(true));
+
     /** See if this is a public project being viewed by someone who isn't a creator or collaborator */
     let audience = $derived(isAudience($user, project));
 
@@ -223,14 +227,38 @@
     {#if name}
         <div class="name">
             {#if action}
-                {project.getName()}
+                {#if searchTerm.trim()}
+                    {@const name = project.getName()}
+                    {@const searchLower = searchTerm.toLowerCase()}
+                    {@const textLower = name.toLowerCase()}
+                    {@const index = textLower.indexOf(searchLower)}
+                    {#if index !== -1}
+                        {name.substring(0, index)}<mark class="search-highlight">{name.substring(index, index + searchTerm.length)}</mark>{name.substring(index + searchTerm.length)}
+                    {:else}
+                        {name}
+                    {/if}
+                {:else}
+                    {project.getName()}
+                {/if}
             {:else}
                 <Link to={path}>
                     {#if project.getName().length === 0}<em class="untitled"
                             >&mdash;</em
                         >
                     {:else}
-                        {project.getName()}{/if}</Link
+                        {#if searchTerm.trim()}
+                            {@const name = project.getName()}
+                            {@const searchLower = searchTerm.toLowerCase()}
+                            {@const textLower = name.toLowerCase()}
+                            {@const index = textLower.indexOf(searchLower)}
+                            {#if index !== -1}
+                                {name.substring(0, index)}<mark class="search-highlight">{name.substring(index, index + searchTerm.length)}</mark>{name.substring(index + searchTerm.length)}
+                            {:else}
+                                {name}
+                            {/if}
+                        {:else}
+                            {project.getName()}
+                        {/if}{/if}</Link
                 >
                 {#if navigating && `${navigating.to?.url.pathname}${navigating.to?.url.search}` === path}
                     <Spinning />{:else}{@render children?.()}
@@ -353,4 +381,12 @@
         gap: var(--wordplay-spacing);
         row-gap: var(--wordplay-spacing);
     }
+
+    .search-highlight {
+        background-color: #ffffff;
+        color: #1f2937;
+        padding: 0 2px;
+        border-radius: 2px;
+        font-weight: 600;
+    }
 </style>

src/components/app/ProjectPreviewSet.svelte

@@ -34,6 +34,7 @@
         children?: Snippet;
         anonymize?: boolean;
         showCollaborators?: boolean;
+        searchTerm?: string;
     }
 
     let {
@@ -44,6 +45,7 @@
         children,
         anonymize = true,
         showCollaborators = false,
+        searchTerm = '',
     }: Props = $props();
 
     function sortProjects(projects: Project[]): Project[] {
@@ -63,6 +65,7 @@
             link={project.getLink(true)}
             {anonymize}
             {showCollaborators}
+            {searchTerm}
             ><div class="controls">
                 {#if edit}<Button
                         tip={edit.description}

src/components/app/ProjectPreviewSetWithHighlight.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    import type { LocaleTextAccessor } from '@locale/Locales';
+    import { type Snippet } from 'svelte';
+    import { locales } from '../../db/Database';
+    import type Project from '../../db/projects/Project';
+    import ProjectPreviewWithHighlight from './ProjectPreviewWithHighlight.svelte';
+
+    interface Props {
+        set: Project[];
+        searchTerm: string;
+        edit:
+            | {
+                  description: LocaleTextAccessor;
+                  label: string;
+                  action: (project: Project) => void;
+              }
+            | false;
+        remove: (project: Project) =>
+            | {
+                  description: LocaleTextAccessor;
+                  prompt: LocaleTextAccessor;
+                  label: string;
+                  action: () => void;
+              }
+            | false;
+        copy:
+            | {
+                  description: LocaleTextAccessor;
+                  label: string;
+                  action: (project: Project) => void;
+              }
+            | false;
+        children?: Snippet;
+        anonymize?: boolean;
+        showCollaborators?: boolean;
+    }
+
+    let {
+        set,
+        searchTerm,
+        edit,
+        remove,
+        copy,
+        children,
+        anonymize = true,
+        showCollaborators = false,
+    }: Props = $props();
+
+    function sortProjects(projects: Project[]): Project[] {
+        return [...projects].sort((a, b) =>
+            a.getName().localeCompare(b.getName(), $locales.getLanguages()),
+        );
+    }
+
+    let listed = $derived(sortProjects(set).filter((p) => p.isListed()));
+</script>
+
+<div class="projects">
+    {#each listed as project (project.getID())}
+        <ProjectPreviewWithHighlight
+            {project}
+            {searchTerm}
+            {edit}
+            {remove}
+            {copy}
+            {anonymize}
+            {showCollaborators}
+        >
+            {@render children?.()}
+        </ProjectPreviewWithHighlight>
+    {/each}
+</div>
+
+<style>
+    .projects {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        gap: calc(2 * var(--wordplay-spacing));
+        row-gap: calc(2 * var(--wordplay-spacing));
+    }
+</style>