770 organize large projects #832

Yabtse · 2025-09-04T01:58:51Z

Context

This PR implements a search bar that allows users to search across all projects(and source files) - owned, shared, and archived helping users organize / and navigate large number of projects

Related Issues

Related Issue Organize large number of projects #770
Closes Organize large number of projects #770

Verification

Verified on Chrome and Safari that the search bar appears on top of the project page with proper styling
confirmed that the real-time search updates results as you type, without requiring form submission
Tested that search works across all project categories (owned, shared, & archived)
Verified that fuzzy search finds projects despite typos and partial matches
checked that search highlighting works correctly for exact matches
confirmed that error handling displays "no result" message
Tested that clearing the search input returns to showing all projects
Accessibility:
- Search input has proper placeholder text and is keyboard accessible
- Search results maintain proper focus management and screen reader compatibility

Checklist

-## Checklist

Added visible search bar with magnifying glass icon to src/routes/projects/+page.svelte
Implemented fuzzy search algorithm (Fuse.js) with 0.4 threshold for typo tolerance
Set search scope to cover project names and source file names in src/routes/projects/+page.svelte
Added archived projects to search scope with proper user ownership filtering
Implemented real-time search that updates results as you type (no submit button needed)
Added "No projects found" error message with helpful suggestions when search returns no results
Updated src/components/app/ProjectPreview.svelte to highlight search matches with <mark> tags
Ensured search results are ranked by relevance score (best matches first)
Updated unit tests in src/routes/projects/search.test.ts to validate all search functionality

Screenshot

amyjko

Thanks for a wonderful start to this feature! I think it's close, but there are several things to clean up before its ready for merging:

This PR is proposing to merge your branch into wordplaydev:Somali, which is the wrong branch. You want to merge it into main. That should clean up the 1000+ files being modified here and make it easier to review this PR.
I'd like to learn more about the value of adding the fuse.js dependency. It adds 10-20 kb to our bundle size. How much value is it adding, versus some more basic fuzzy matching that we build ourselves, such as a simple Levenstein distance check? We want to keep this as small as possible, as students use very underpowered computers at school, with slow internet and low memory.
It appears you're not using the standard TextField component from the platform, and instead bringing in a third party text field. (I can't quite tell, since there are 1001 files changed in this PR, so cleaning it up will help clarify). Why not use the standard component on the platform, for consistency?

Yabtse · 2025-09-07T00:41:39Z

Hey @amyjko ,

Thank you for pointing out that merging mistakes I'll merge my branch into main
I started by experimenting with different fuzzy search algorithms, and Levenshtein distance was actually one of the first I tested. I found it too rigid—it only worked well when the input was off by a single character or so. That’s when I came across Fuse.js, which proved far more forgiving. In my tests, it handled typos and small mistakes with much greater precision. As you mentioned, I imagined a student making a typo, and Levenshtein just wasn’t the best solution in that scenario. I hadn’t realized Fuse.js added 10–20 KB to the bundle size, but I still see its value, especially for users managing a large number of projects.
also You're absolutely right! I was using a custom HTML input instead of the platform's standard TextField component. I've updated the implementation to use TextField

amyjko

I've added a few other comments based on review; there are some test and CSS things to clean up and conflicts in the package.json and package-lock.json dependencies to clean up.

Also, I don't see your TextField updates yet. Are you sure they're included in the PR? I'm still seeing the custom text field.

Related to the text field, there is hard coded English in the implementation. It needs to use our localization infrastructure, including an update to the English locale file, so that this works across languages. (I can generate the draft machine translations for the other languages).

amyjko · 2025-09-08T23:53:57Z

scripts/test-search.js

+/**
+ * Console Testing Script for Search Functionality
+ * 
+ * This script allows you to test the search functionality from the command line


This test should be integrated into the vitest infrastructure we have, rather than creating a standalone script. Write this using the test APIs so it's included in the standard test suite.

I see that there is a vitest test. What is this for then? Is this redundant? If so, remove it.

amyjko · 2025-09-08T23:55:48Z

src/components/app/ProjectPreview.svelte

        row-gap: var(--wordplay-spacing);
    }
+    
+    :global(.search-highlight) {


Don't use global CSS for a local style class. Instead of returning raw HTML and. using an @html directive, just use a Svelte 5 snippet.

Yabtse · 2025-09-13T03:58:34Z

@amyjko What's the path to the English Locale file again?

amyjko · 2025-09-13T19:10:35Z

See the documentation for locales. The key things to update are:

The relevant part of UITexts.ts and more specifically ui.page.projects.
Run npm run schemas to update the locale schemas based on the changes
Update en-US.json with the strings added to the type

I can machine translate those before deployment so we have placeholders for other supported languages.

Yabtse · 2025-09-26T22:05:57Z

@amyjko I've made some changes

amyjko

This is pretty close. Just a little bit too clean up:

Resolve conflicts with package.json, package-lock.json. You should be using the latest of both from main. The only change should be the addition of the fuse.js dependency.
Resolve the type errors reported by npm run check, including missing Playwright APIs and an invalid use of {@const} in ProjectPreviewWithHighlight.svelte.

I committed one fix to the test fail that was causing .DS_Store to be included as a test project.

Yabtse · 2025-09-30T06:01:20Z

@amyjko ok thanks could you take a look

amyjko · 2025-10-02T14:16:26Z

I should be able to check on Saturday.

amyjko

There are still several issues:

Three conflicts to resolve
1 Svelte error to resolve (still an invalid @const)
4 Typescript errors in the new test
I'm still seeing a reference to "files" in the search prompt, even though there's no such thing as a "file" in Wordplay, and the search feature is not searching files.

amyjko · 2025-12-19T16:46:48Z

@Yabtse Are you still working on this PR?

Yabtse · 2025-12-19T16:56:03Z

@amyjko Yes, I am sorry for the delay. I’ve been out of the country. I’m actively working on resolving the issue now, and I’ve removed the reference to files from the search bar’s placeholder text.

amyjko · 2025-12-19T17:22:21Z

Thanks for the update! I'm just cleaning up stale PRs and issues, but glad to you know you plan to wrap this.

amyjko · 2025-12-19T18:16:14Z

Yes, you can only put a ***@***.***}` in particular places: ***@***.*** Amy On Dec 19, 2025 at 8:58 AM -0800, Yabtse Amente ***@***.***>, wrote: [https://avatars.githubusercontent.com/u/186685251?s=20&v=4]Yabtse left a comment (wordplaydev/wordplay#832)<https://urldefense.com/v3/__https://github.com/wordplaydev/wordplay/pull/832*issuecomment-3675812851__;Iw!!K-Hz7m0Vt54!lF4HUQlOOyRrOX38zl1DOFi9wVkNFnKgAe19j9eNfbLMt1NJCLUIby47bONJanLOCjGyez0YxlqRnj39h7xz$> @amyjko<https://urldefense.com/v3/__https://github.com/amyjko__;!!K-Hz7m0Vt54!lF4HUQlOOyRrOX38zl1DOFi9wVkNFnKgAe19j9eNfbLMt1NJCLUIby47bONJanLOCjGyez0YxlqRnqzh-QB1$> are you seeing the invalid @const<https://urldefense.com/v3/__https://github.com/const__;!!K-Hz7m0Vt54!lF4HUQlOOyRrOX38zl1DOFi9wVkNFnKgAe19j9eNfbLMt1NJCLUIby47bONJanLOCjGyez0YxlqRnmHRYWKe$> in ProjectPreviewWithHighlight.svelte. ? — Reply to this email directly, view it on GitHub<https://urldefense.com/v3/__https://github.com/wordplaydev/wordplay/pull/832*issuecomment-3675812851__;Iw!!K-Hz7m0Vt54!lF4HUQlOOyRrOX38zl1DOFi9wVkNFnKgAe19j9eNfbLMt1NJCLUIby47bONJanLOCjGyez0YxlqRnj39h7xz$>, or unsubscribe<https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/AAEG2VAYAST3MSRMAYHQ2U34CQVCHAVCNFSM6AAAAACFSMEIS2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTMNZVHAYTEOBVGE__;!!K-Hz7m0Vt54!lF4HUQlOOyRrOX38zl1DOFi9wVkNFnKgAe19j9eNfbLMt1NJCLUIby47bONJanLOCjGyez0YxlqRntaHd5QI$>. You are receiving this because you were mentioned.Message ID: ***@***.***>

amyjko requested changes Sep 6, 2025

View reviewed changes

Project Search feature

d6913cb

Yabtse changed the base branch from Somali to main September 7, 2025 02:01

amyjko requested changes Sep 9, 2025

View reviewed changes

Fix search functionality

e973c90

amyjko requested changes Sep 27, 2025

View reviewed changes

amyjko and others added 2 commits September 27, 2025 14:02

Only include .wp files in example tests.

33866ad

Fix type errors and package conflicts

f8452eb

amyjko requested changes Oct 13, 2025

View reviewed changes

770 organize large projects #832

Are you sure you want to change the base?

770 organize large projects #832

Uh oh!

Conversation

Yabtse commented Sep 4, 2025

Context

Related Issues

Verification

Checklist

Screenshot

Uh oh!

amyjko left a comment

Choose a reason for hiding this comment

Uh oh!

Yabtse commented Sep 7, 2025

Uh oh!

amyjko left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amyjko Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

amyjko Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

amyjko Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Yabtse commented Sep 13, 2025

Uh oh!

amyjko commented Sep 13, 2025

Uh oh!

Yabtse commented Sep 26, 2025

Uh oh!

amyjko left a comment

Choose a reason for hiding this comment

Uh oh!

Yabtse commented Sep 30, 2025

Uh oh!

amyjko commented Oct 2, 2025

Uh oh!

amyjko left a comment

Choose a reason for hiding this comment

Uh oh!

amyjko commented Dec 19, 2025

Uh oh!

Yabtse commented Dec 19, 2025

Uh oh!

amyjko commented Dec 19, 2025

Uh oh!

amyjko commented Dec 19, 2025 via email

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

amyjko left a comment •

edited

Loading