Curiosity - SearchArea

SearchArea recipe

Source: 02_SearchArea/ · three flavours of SearchArea shown side-by-side in a Pivot so you can compare them.

How it looks

A search box, a facet sidebar, and a column of result cards. The real SearchArea queries the workspace; the runnable Tesserae preview below sketches the same layout with static data.

search-area-preview.cs

using System;
using System.Linq;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            IComponent Facet(string title, params string[] values) =>
                VStack().Children(
                    new IComponent[] { TextBlock(title).SmallPlus().SemiBold().PB(4) }
                        .Concat(values.Select(v => (IComponent)CheckBox(v).PT(2))).ToArray());

            IComponent Result(string title, string sub) =>
                Card(VStack().Children(
                    TextBlock(title).SemiBold(),
                    TextBlock(sub).Small().Secondary().PT(2))).WS().MB(8);

            var facets = VStack().W(160.px()).Children(
                Facet("Type", "Article", "Report", "Note"),
                Facet("Year", "2024", "2025").PT(12));

            var results = VStack().Grow().Children(
                Result("Quarterly report 2025", "Report · 2025 · 12 pages"),
                Result("Onboarding notes", "Note · 2024 · updated last week"),
                Result("Release announcement", "Article · 2025"));

            var page = VStack().WS().Children(
                SectionTitle(UIcons.Search, "SearchArea", "Workspace search with facets and custom result cards"),
                SearchBox("Search the workspace...").WS().PT(12),
                HStack().WS().PT(12).Children(facets, results.PL(16))
            ).P(16);

            document.body.style.overflow = "hidden";
            MountToBody(page);
        }
    }
}

What it teaches

Default — SearchArea() with nothing customised. Hits the workspace's default search endpoint and renders the standard result cards.
With facets — Pre-filter the query with OnSearch(sr => sr.SetBeforeTypesFacet("...")) and enable the facet sidebar with .WithFacets(). The right starting point for "search inside a single node type".
Custom row — Adjust the search-result row with Renderer(r => r.CustomizeResult(result => ...)). You receive the row the node type built, with the search's own marks already on it, and return the same row or another one. Use this when you need a denser list, custom row commands, or to surface fields the default row doesn't show.
Appending a button next to the search box with SearchBox(b => b.AppendToSearchBox(...)).

Three flavours

// 1. Default
SearchArea()

// 2. Filter to one node type + facet sidebar
SearchArea()
    .OnSearch(sr => sr.SetBeforeTypesFacet(nameof(MyNodeType)))
    .WithFacets()

// 3. Customize the result row
SearchArea()
    .Renderer(r => r.CustomizeResult(result => result
       .SetText(null)
       .InlineCommands(Button().SetIcon(UIcons.Plus).OnClick(() => Select(result.Result)))))
    .SearchBox(b => b.AppendToSearchBox(Button("Action").SetIcon(UIcons.Bolt)))

SearchArea recipe

How it looks

What it teaches

Three flavours

See also