Homescreen search (#11262)

jwunderl · web-flow · commit a158a24ad1ae · 2026-04-28T16:30:39.000-07:00
* app / header portion

* add search to service

* add to projects view

* add a searchTerms field for hidden search terms (e.g. platformer for that type of game)

* bring all back scoped to projects.tsx for search

* make it more of a mode

* search 'mode'

* prewarm / fix bug with space

* include user projects in search results

* fix detail view in search

* typing annoyance and show description from pxt.json

* less tall start typing instructions

* remove import from search view

* header

* still show footer at bottom, and maintain scroll bar so it doesn't pop in / out and rearrange

* fix first result card being mildly higher, and add a targetconfig field for additional searchable galleries

* react common buttons / links / search

* spacing

* fix issue with less evaling numbers
diff --git a/localtypings/pxtarget.d.ts b/localtypings/pxtarget.d.ts
@@ -24,6 +24,8 @@ declare namespace pxt {
         multiplayer?: MultiplayerConfig;
         // common galleries
         galleries?: pxt.Map<string | GalleryProps>;
+        // additional galleries included in projects search but not shown on the homescreen
+        searchGalleries?: pxt.Map<string | GalleryProps>;
         // localized galleries
         localizedGalleries?: pxt.Map<pxt.Map<string>>;
         windowsStoreLink?: string;
diff --git a/localtypings/pxtpackage.d.ts b/localtypings/pxtpackage.d.ts
@@ -158,6 +158,7 @@ declare namespace pxt {
         labelIcon?: string;
         labelClass?: string;
         tags?: string[]; // tags shown in home screen, colors specified in theme
+        searchTerms?: string[]; // extra terms used to improve home screen search matching
         tabIndex?: number;
         style?: string; // "card" | "item" | undefined;
 
diff --git a/pxtcompiler/emitter/service.ts b/pxtcompiler/emitter/service.ts
@@ -723,6 +723,8 @@ namespace ts.pxtc.service {
     // don't export, fuse is internal only
     let lastFuse: Fuse<SearchInfo>;
     let lastProjectFuse: Fuse<ProjectSearchInfo>;
+    let lastHomeFuse: Fuse<HomeSearchInfo>;
+    let lastHomeFuseKey: string;
     export let builtinItems: SearchInfo[];
     export let blockDefinitions: pxt.Map<pxt.blocks.BlockDefinition>;
     export let tbSubset: pxt.Map<boolean | string>;
@@ -771,6 +773,23 @@ namespace ts.pxtc.service {
         return newOpts
     }
 
+    export interface HomeSearchInfo {
+        id: string;
+        name: string;
+        description?: string;
+        tags?: string;
+        searchTerms?: string;
+    }
+
+    export interface HomeSearchOptions {
+        term: string;
+        entries: HomeSearchInfo[];
+    }
+
+    export interface OpArg {
+        homeSearch?: HomeSearchOptions;
+    }
+
     export interface ServiceOps {
         reset: () => void;
         setOptions: (v: OpArg) => void;
@@ -796,6 +815,8 @@ namespace ts.pxtc.service {
         apiSearch: (v: OpArg) => SearchInfo[];
         projectSearch: (v: OpArg) => ProjectSearchInfo[];
         projectSearchClear: () => void;
+        homeSearch: (v: OpArg) => HomeSearchInfo[];
+        homeSearchClear: () => void;
     };
 
     export type OpRes =
@@ -804,7 +825,7 @@ namespace ts.pxtc.service {
         | { words: number[]; }
         | KsDiagnostic[]
         | { formatted: string; pos: number; }
-        | ApisInfo | BlocksInfo | ProjectSearchInfo[]
+        | ApisInfo | BlocksInfo | ProjectSearchInfo[] | HomeSearchInfo[]
         | {};
 
     export type OpError = { errorMessage: string };
@@ -1362,6 +1383,38 @@ namespace ts.pxtc.service {
         },
         projectSearchClear: () => {
             lastProjectFuse = undefined;
+        },
+        homeSearch: v => {
+            const search = v.homeSearch;
+            const searchSet = search.entries;
+            const searchKey = searchSet.map((h: HomeSearchInfo) => h.id).join("\n");
+
+            if (!lastHomeFuse || lastHomeFuseKey !== searchKey) {
+                const fuseOptions = {
+                    shouldSort: true,
+                    threshold: 0.4,
+                    location: 0,
+                    distance: 1000,
+                    maxPatternLength: 16,
+                    minMatchCharLength: 2,
+                    findAllMatches: false,
+                    caseSensitive: false,
+                    keys: [
+                        { name: 'name', weight: 0.45 },
+                        { name: 'description', weight: 0.35 },
+                        { name: 'searchTerms', weight: 0.35 },
+                        { name: 'tags', weight: 0.15 },
+                    ]
+                };
+                lastHomeFuse = new Fuse(searchSet, fuseOptions);
+                lastHomeFuseKey = searchKey;
+            }
+
+            return lastHomeFuse.search(search.term);
+        },
+        homeSearchClear: () => {
+            lastHomeFuse = undefined;
+            lastHomeFuseKey = undefined;
         }
     }
 
diff --git a/pxtlib/service.ts b/pxtlib/service.ts
@@ -1740,6 +1740,7 @@ namespace ts.pxtc.service {
         blocks?: BlocksOptions;
         extensions?: ExtensionsOptions;
         projectSearch?: ProjectSearchOptions;
+        homeSearch?: HomeSearchOptions;
         snippet?: SnippetOptions;
         runtime?: pxt.RuntimeOptions;
         light?: boolean; // in light mode?
@@ -1807,6 +1808,19 @@ namespace ts.pxtc.service {
         id?: string;
     }
 
+    export interface HomeSearchOptions {
+        term: string;
+        entries: HomeSearchInfo[];
+    }
+
+    export interface HomeSearchInfo {
+        id: string;
+        name: string;
+        description?: string;
+        tags?: string;
+        searchTerms?: string;
+    }
+
     export interface BlocksOptions {
         bannedCategories?: string[];
     }
diff --git a/react-common/components/controls/Button.tsx b/react-common/components/controls/Button.tsx
@@ -8,6 +8,7 @@ export interface ButtonViewProps extends ContainerProps {
     labelClassName?: string;
     leftIcon?: string;
     rightIcon?: string;
+    autoFocus?: boolean;
     disabled?: boolean;     // Disables the button in an accessible-friendly way.
     hardDisabled?: boolean; // Disables the button and prevents clicks. Not recommended. Use `disabled` instead.
     href?: string;
@@ -97,6 +98,7 @@ export function inflateButtonProps(props: ButtonProps) {
         href,
         target,
         tabIndex,
+        autoFocus,
     } = props;
 
     let {
@@ -140,6 +142,7 @@ export function inflateButtonProps(props: ButtonProps) {
         "onFocus": onFocus,
         "role": role || "button",
         "tabIndex": tabIndex || (disabled ? -1 : 0),
+        "autoFocus": autoFocus,
         "disabled": hardDisabled,
         "aria-label": ariaLabel,
         "aria-hidden": ariaHidden,
diff --git a/react-common/components/controls/Input.tsx b/react-common/components/controls/Input.tsx
@@ -16,6 +16,7 @@ export interface InputProps extends ControlProps {
     disabled?: boolean;
     type?: string;
     readOnly?: boolean;
+    autoFocus?: boolean;
     autoComplete?: boolean;
     selectOnClick?: boolean;
     treatSpaceAsEnter?: boolean;
@@ -59,6 +60,7 @@ export const Input = (props: InputProps) => {
         disabled,
         type,
         readOnly,
+        autoFocus,
         autoComplete,
         selectOnClick,
         onChange,
@@ -217,6 +219,7 @@ export const Input = (props: InputProps) => {
                     placeholder={placeholder}
                     value={value}
                     readOnly={!!readOnly}
+                    autoFocus={autoFocus}
                     onClick={clickHandler}
                     onChange={changeHandler}
                     onKeyDown={keyDownHandler}
diff --git a/theme/home.less b/theme/home.less
@@ -31,7 +31,9 @@
 .projectsdialog {
     position: relative;
     height: 100%;
-    overflow: auto;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
     z-index: @homeScreenZIndex+1;
     .accessibleMenu {
         z-index: @homeScreenZIndex+3 !important;
@@ -144,18 +146,97 @@
         padding-top: calc(@mainMenuHeight + 2rem) !important;
         margin: 0;
         border: 0;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
         width: 100%;
-        min-height: 100%;
+        min-height: 100vh;
         background: var(--pxt-target-background1);
         color: var(--pxt-target-foreground1);
     }
+    
+    .button.large {
+        font-weight: 700;
+    }
+
     .ui.segment.gallerysegment {
         background: none;
         border: none;
         box-shadow: none;
         padding: 0rem;
         margin: 0;
 
+        &.mystuff-segment {
+            .gallery-actions button,
+            &.search-mode .heading button {
+               padding: .75em;
+            }
+        }
+
+        &.mystuff-segment.search-mode {
+            .gallery-heading-column {
+                padding-left: @carouselArrowSize !important;
+            }
+
+            .heading {
+                position: relative;
+                align-items: center;
+            }
+
+            .ui.header.search-mode-title {
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                padding-left: 0;
+                margin: 0;
+                text-align: center;
+                pointer-events: none;
+            }
+
+            .search-input {
+                height: 3em;
+                input {
+                    padding: .75em 1em;
+                }
+                i {
+                    bottom: 1em;
+                };
+            }
+        }
+
+        &.search-segment {
+            padding: 1rem @carouselArrowSize;
+
+            .search-results-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+                gap: 1rem;
+                align-items: start;
+                grid-auto-flow: dense;
+
+                // override default that's bumping it up
+                > .ui.card:first-child {
+                    margin: 1em 0;
+                }
+            }
+
+            .search-detailview.detailview {
+                grid-column-start: 1;
+                grid-column-end: -1;
+                min-width: 0;
+                width: 100%;
+            }
+
+            .search-empty-state {
+                margin: 0;
+                width: 100%;
+                box-sizing: border-box;
+                display: flex;
+                align-items: center;
+                align-self: stretch;
+            }
+        }
+
         .ui.header {
             margin: 0;
             padding-left: @carouselArrowSize;
@@ -192,13 +273,27 @@
             margin-bottom: -1rem !important;
             margin-top: 1rem !important;
         }
+        .gallery-heading-column,
+        .gallery-actions {
+            z-index: 1;
+        }
+        .gallery-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+        }
         .column {
             padding: 0 !important;
         }
         .column.right.aligned {
             padding-right: @carouselArrowSize !important;
         }
     }
+    .homescreen-search-box {
+        padding-top: 1em;
+        margin: 1em @carouselArrowSize;
+    }
     .import-dialog-btn {
         position: relative;
         z-index: 1; /* Move up so it's above the carousel container that has an offset margin */
@@ -216,8 +311,9 @@
         width: 100%;
         text-align: center;
         padding: 5px !important;
+        margin-top: auto !important;
         z-index: @homeFooterZIndex;
-        position: absolute;
+        position: relative;
         .item {
             font-size: 0.8rem !important;
             color: var(--pxt-neutral-foreground1) !important;
@@ -441,6 +537,19 @@
                 display: inline-block;
                 width: 100%;
             }
+            .card-action .card-action-button-link.common-link {
+                text-decoration: none;
+            }
+            .card-action .card-action-button-link.common-link:hover,
+            .card-action .card-action-button-link.common-link:focus,
+            .card-action .card-action-button-link.common-link:visited {
+                text-decoration: none;
+                color: var(--pxt-neutral-foreground3);
+            }
+            .card-action .card-action-button-link .ui.text {
+                display: inline-block;
+                width: 100%;
+            }
             .card-action .button {
                 border: none!important;
                 outline: none!important;
@@ -760,6 +869,17 @@
 
 @media only screen and (max-width: @largestTabletScreen) {
     /* Carousel */
+    .gallerysegment.search-segment {
+        padding: 1rem @carouselArrowSizeTablet;
+    }
+    .ui.segment.gallerysegment.mystuff-segment.search-mode {
+        .gallery-heading-column {
+            padding-left: @carouselArrowSizeTablet !important;
+        }
+    }
+    .homescreen-search-box {
+        margin: 1em @carouselArrowSizeTablet;
+    }
     .projectsdialog {
         .ui.segment.getting-started-segment {
             background-position: left center;
@@ -833,6 +953,21 @@
 
 @media only screen and (max-width: @largestMobileScreen) {
     /* Carousel */
+    .gallerysegment.search-segment {
+        padding: 1rem @carouselArrowSizeMobile;
+    }
+    .ui.segment.gallerysegment.mystuff-segment.search-mode {
+        .gallery-heading-column {
+            padding-left: @carouselArrowSizeMobile !important;
+        }
+
+        .ui.header.search-mode-title {
+            display: none;
+        }
+    }
+    .homescreen-search-box {
+        margin: 1em @carouselArrowSizeMobile;
+    }
     .projectsdialog {
         .ui.segment.getting-started-segment {
             height: 10rem;
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
diff --git a/webapp/src/compiler.ts b/webapp/src/compiler.ts
diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
