examples: add filter input (#3625)

This was @Taha-Hassan-Git 's idea originally but I thought it wasn't
necessary at the time (with our much shorter list of examples just a
couple months ago!). I think now that we have a plethora of examples
that @Taha-Hassan-Git 's original instinct here was correct and we
should a filter box.

<img width="255" alt="Screenshot 2024-04-26 at 15 22 08"
src="https://github.com/tldraw/tldraw/assets/469604/1eabc04e-c4d0-414d-881c-7ca965dbd6a3">


### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [x] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

### Release Notes

- Examples: add a filter box.

apps/examples/src/ExamplePage.tsx

@@ -28,6 +28,10 @@ export function ExamplePage({
 	children: React.ReactNode
 }) {
 	const categories = examples.map((e) => e.id)
+	const [filterValue, setFilterValue] = useState('')
+	const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setFilterValue(e.target.value)
+	}
 
 	return (
 		<DialogContextProvider>
@@ -69,6 +73,12 @@ export function ExamplePage({
 							Develop
 						</a>
 					</div>
+					<input
+						className="example__sidebar__filter"
+						placeholder="Filter…"
+						value={filterValue}
+						onChange={handleFilterChange}
+					/>
 					<ul className="example__sidebar__categories scroll-light">
 						{categories.map((currentCategory) => (
 							<li key={currentCategory} className="example__sidebar__category">
@@ -76,7 +86,10 @@ export function ExamplePage({
 								<ul className="example__sidebar__category__items">
 									{examples
 										.find((category) => category.id === currentCategory)
-										?.value.map((sidebarExample) => (
+										?.value.filter((example) =>
+											example.title.toLowerCase().includes(filterValue.toLowerCase())
+										)
+										.map((sidebarExample) => (
 											<ExampleSidebarListItem
 												key={sidebarExample.path}
 												example={sidebarExample}

apps/examples/src/styles.css

@@ -70,7 +70,7 @@ html,
 	width: 256px;
 	min-width: 256px;
 	display: grid;
-	grid-template-rows: auto 1fr auto;
+	grid-template-rows: auto 48px 48px 1fr auto;
 	border-right: 1px solid var(--black-transparent-light);
 	overflow: hidden;
 	font-size: 14px;
@@ -83,6 +83,14 @@ html,
 	color: inherit;
 }
 
+.example__sidebar__filter {
+	margin: 8px;
+	padding: 8px;
+	border-radius: 6px;
+	border: 1px solid #e8e8e8;
+	font-size: 14px;
+}
+
 /* Header */
 
 .example__sidebar__header {
@@ -131,10 +139,15 @@ ul.example__sidebar__categories {
 /* Category */
 
 li.example__sidebar__category {
+	display: none;
 	position: relative;
 	padding: 8px 0px;
 }
 
+.example__sidebar__category:has(> ul > li) {
+	display: block;
+}
+
 ul.example__sidebar__category__items {
 	list-style: none;
 	padding: 0px 0px 0px 4px;