Commit be80e369394f5d0cb771b51669686f2bc916e543 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-09-22 12:22:13-07:00
committer	GitHub <noreply@github.com> 2026-09-22 12:22:13-07:00
log	be80e369394f5d0cb771b51669686f2bc916e543
tree	3ac15b3d1e1c4e654abb7b9cd6770b01f3cb6edf
parent	7b54af90f79a6858f75ff86d42a2f083d4edfa2a
signature	Signed by PGP key B5690EEEBB952194

refactor(web): add SidebarInput (#13028)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

4 files changed, 23 insertions(+), 10 deletions(-)

apps
- web
  - src
    components
    settings
    SettingsSidebarNav.tsx
    sidebar
    SidebarThreadHeader.tsx
    ui
    sidebar.tsx
scripts
- lint-restyle-ceiling.ts

apps/web/src/components/settings/SettingsSidebarNav.tsx+3-4

...	...	@@ -27,7 +27,6 @@ import {
27	27	import { useLocation, useNavigate } from "@tanstack/react-router";
28	28
29	29	import { Button } from "../ui/button";
30		import { Input } from "../ui/input";
31	30	import { Kbd } from "../ui/kbd";
32	31	import {
33	32	SidebarContent,
...	...	@@ -37,6 +36,7 @@ import {
37	36	SidebarMenuButton,
38	37	SidebarMenuItem,
39	38	useSidebar,
	39	SidebarInput,
40	40	} from "../ui/sidebar";
41	41	import { SidebarUtilityMenu } from "../sidebar/SidebarChrome";
42	42	import { scrollToSettingsTarget } from "./settingsLayout";
...	...	@@ -237,10 +237,9 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
237	237	<SidebarGroup className="gap-2 p-[var(--sidebar-content-inset)]">
238	238	<div className="flex h-8 items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-sidebar-muted-foreground hover:bg-sidebar-row-hover hover:text-sidebar-foreground">
239	239	<SearchIcon className="size-4 shrink-0 text-sidebar-muted-foreground/80" />
240		<Input
	240	<SidebarInput
241	241	ref={searchInputRef}
242	242	nativeInput
243		unstyled
244	243	type="search"
245	244	value={query}
246	245	onChange={(event) => {
...	...	@@ -259,7 +258,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
259	258	? `settings-search-result-${results[activeResultIndex].id}`
260	259	: undefined
261	260	}
262		className="min-w-0 flex-1 [&_[data-slot=input]]:h-auto [&_[data-slot=input]]:p-0 [&_[data-slot=input]]:leading-normal [&_[data-slot=input]]:text-sm [&_[data-slot=input]]:font-medium [&_[data-slot=input]]:text-sidebar-foreground [&_[data-slot=input]]:placeholder:text-sidebar-muted-foreground"
	261	className="min-w-0 flex-1"
263	262	/>
264	263	{isSearching ? (
265	264	<Button

apps/web/src/components/sidebar/SidebarThreadHeader.tsx+3-5

...	...	@@ -21,8 +21,7 @@ import {
21	21
22	22	import { cn } from "~/lib/utils";
23	23	import { Button } from "../ui/button";
24		import { Input } from "../ui/input";
25		import { SidebarMenuButton } from "../ui/sidebar";
	24	import { SidebarInput, SidebarMenuButton } from "../ui/sidebar";
26	25	import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
27	26
28	27	export interface SidebarThreadHeaderProps {
...	...	@@ -85,10 +84,9 @@ export function SidebarThreadHeader({
85	84	className="flex h-8 min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-sidebar-muted-foreground hover:bg-sidebar-row-hover hover:text-sidebar-foreground"
86	85	>
87	86	<SearchIcon className="size-4 shrink-0 text-[var(--sidebar-icon-color)]" />
88		<Input
	87	<SidebarInput
89	88	ref={searchInputRef}
90	89	nativeInput
91		unstyled
92	90	type="search"
93	91	value={searchQuery}
94	92	onChange={(event) => onSearchQueryChange(event.currentTarget.value)}
...	...	@@ -104,7 +102,7 @@ export function SidebarThreadHeader({
104	102	? `sidebar-thread-search-result-${activeSearchResultIndex}`
105	103	: undefined
106	104	}
107		className="min-w-0 flex-1 [&_[data-slot=input]]:h-auto [&_[data-slot=input]]:p-0 [&_[data-slot=input]]:leading-normal [&_[data-slot=input]]:text-sm [&_[data-slot=input]]:font-medium [&_[data-slot=input]]:text-sidebar-foreground [&_[data-slot=input]]:placeholder:text-[var(--sidebar-icon-color)]"
	105	className="min-w-0 flex-1"
108	106	/>
109	107	{isSearching ? (
110	108	<Button

apps/web/src/components/ui/sidebar.tsx+16

...	...	@@ -5,6 +5,7 @@ import { PanelLeftCloseIcon, PanelLeftIcon } from "lucide-react";
5	5	import * as React from "react";
6	6	import { cn } from "~/lib/utils";
7	7	import { Button } from "~/components/ui/button";
	8	import { Input, type InputProps } from "~/components/ui/input";
8	9	import { ScrollArea } from "~/components/ui/scroll-area";
9	10	import {
10	11	Sheet,
...	...	@@ -530,6 +531,20 @@ function SidebarRail({
530	531	);
531	532	}
532	533
	534	/** A bare search or rename field that sits in a row of sidebar chrome. */
	535	function SidebarInput({ className, ...props }: Omit<InputProps, "unstyled" \| "variant">) {
	536	return (
	537	<Input
	538	className={cn(
	539	"[&_[data-slot=input]]:h-auto [&_[data-slot=input]]:p-0 [&_[data-slot=input]]:font-medium [&_[data-slot=input]]:text-sidebar-foreground [&_[data-slot=input]]:text-sm [&_[data-slot=input]]:leading-normal [&_[data-slot=input]]:placeholder:text-sidebar-muted-foreground",
	540	className,
	541	)}
	542	unstyled
	543	{...props}
	544	/>
	545	);
	546	}
	547
533	548	function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
534	549	return (
535	550	<main
...	...	@@ -770,6 +785,7 @@ function SidebarMenuSubButton({
770	785	}
771	786
772	787	export {
	788	SidebarInput,
773	789	Sidebar,
774	790	SidebarContent,
775	791	SidebarFooter,

scripts/lint-restyle-ceiling.ts+1-1

...	...	@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
8	8	// components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
9	9	// count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
10	10	// migrate a file, and delete this script when the rule becomes an error.
11		export const RESTYLE_CEILING = 1043;
	11	export const RESTYLE_CEILING = 1031;
12	12
13	13	const RULE = "shadcn(no-restyle)";
14	14