Add hosts settings page for managing host access

apps/desktop/src/renderer/routes/_authenticated/settings/components/SettingsSidebar/GeneralSettings.tsx

@@ -5,8 +5,10 @@ import {
 	HiOutlineBell,
 	HiOutlineBuildingOffice2,
 	HiOutlineCommandLine,
+	HiOutlineComputerDesktop,
 	HiOutlineCpuChip,
 	HiOutlineCreditCard,
+	HiOutlineFolder,
 	HiOutlineKey,
 	HiOutlineLink,
 	HiOutlineLockClosed,
@@ -41,7 +43,9 @@ type SettingsRoute =
 	| "/settings/billing"
 	| "/settings/api-keys"
 	| "/settings/security"
-	| "/settings/permissions";
+	| "/settings/permissions"
+	| "/settings/projects"
+	| "/settings/hosts";
 
 interface SectionItem {
 	id: SettingsRoute;
@@ -136,6 +140,18 @@ const SECTION_GROUPS: SectionGroup[] = [
 				label: "Organization",
 				icon: <HiOutlineBuildingOffice2 className="h-4 w-4" />,
 			},
+			{
+				id: "/settings/projects",
+				section: "project",
+				label: "Projects",
+				icon: <HiOutlineFolder className="h-4 w-4" />,
+			},
+			{
+				id: "/settings/hosts",
+				section: "hosts",
+				label: "Hosts",
+				icon: <HiOutlineComputerDesktop className="h-4 w-4" />,
+			},
 			{
 				id: "/settings/integrations",
 				section: "integrations",
@@ -206,7 +222,10 @@ export function GeneralSettings({ matchCounts }: GeneralSettingsProps) {
 						</h2>
 						<nav className="flex flex-col">
 							{filteredItems.map((section) => {
-								const isActive = matchRoute({ to: section.id });
+								const isActive = !!matchRoute({
+									to: section.id,
+									fuzzy: true,
+								});
 								const count = matchCounts?.[section.section];
 
 								return (

apps/desktop/src/renderer/routes/_authenticated/settings/components/SettingsSidebar/SettingsSidebar.tsx

@@ -13,15 +13,13 @@ import {
 } from "renderer/stores/settings-state";
 import { getMatchCountBySection } from "../../utils/settings-search";
 import { GeneralSettings } from "./GeneralSettings";
-import { ProjectsSettings } from "./ProjectsSettings";
 
 export function SettingsSidebar() {
 	const searchQuery = useSettingsSearchQuery();
 	const setSearchQuery = useSetSettingsSearchQuery();
 	const originRoute = useSettingsOriginRoute();
 	const normalizedSearchQuery = searchQuery.trim();
-	const isSearchActive = normalizedSearchQuery.length > 0;
-	const matchCounts = isSearchActive
+	const matchCounts = normalizedSearchQuery
 		? getMatchCountBySection(normalizedSearchQuery)
 		: null;
 
@@ -62,10 +60,6 @@ export function SettingsSidebar() {
 
 			<div className="flex-1 overflow-y-auto min-h-0">
 				<GeneralSettings matchCounts={matchCounts} />
-				<ProjectsSettings
-					isSearchActive={isSearchActive}
-					matchCounts={matchCounts}
-				/>
 			</div>
 
 			<div className="pt-3 mt-3 border-t border-border">