admin: data/auth route-driven settings and collapsible components (#168)

introduced `useRoutePathState` for managing active states via routes, added `CollapsibleList` for reusable collapsible UI, and updated various components to leverage route awareness for improved navigation state handling. Also adjusted routing for entities, strategies, and schema to support optional sub-paths.

app/src/ui/layouts/AppShell/AppShell.tsx

@@ -13,6 +13,7 @@ import {
 import type { IconType } from "react-icons";
 import { twMerge } from "tailwind-merge";
 import { IconButton } from "ui/components/buttons/IconButton";
+import { useRoutePathState } from "ui/hooks/use-route-path-state";
 import { AppShellProvider, useAppShell } from "ui/layouts/AppShell/use-appshell";
 import { appShellStore } from "ui/store";
 import { useLocation } from "wouter";
@@ -376,6 +377,15 @@ export function Scrollable({
    );
 }
 
+type SectionHeaderAccordionItemProps = {
+   title: string;
+   open: boolean;
+   toggle: () => void;
+   ActiveIcon?: any;
+   children?: React.ReactNode;
+   renderHeaderRight?: (props: { open: boolean }) => React.ReactNode;
+};
+
 export const SectionHeaderAccordionItem = ({
    title,
    open,
@@ -383,14 +393,7 @@ export const SectionHeaderAccordionItem = ({
    ActiveIcon = IconChevronUp,
    children,
    renderHeaderRight,
-}: {
-   title: string;
-   open: boolean;
-   toggle: () => void;
-   ActiveIcon?: any;
-   children?: React.ReactNode;
-   renderHeaderRight?: (props: { open: boolean }) => React.ReactNode;
-}) => (
+}: SectionHeaderAccordionItemProps) => (
    <div
       style={{ minHeight: 49 }}
       className={twMerge(
@@ -422,6 +425,19 @@ export const SectionHeaderAccordionItem = ({
    </div>
 );
 
+export const RouteAwareSectionHeaderAccordionItem = ({
+   routePattern,
+   identifier,
+   ...props
+}: Omit<SectionHeaderAccordionItemProps, "open" | "toggle"> & {
+   // it's optional because it could be provided using the context
+   routePattern?: string;
+   identifier: string;
+}) => {
+   const { active, toggle } = useRoutePathState(routePattern, identifier);
+   return <SectionHeaderAccordionItem {...props} open={active} toggle={toggle} />;
+};
+
 export const Separator = ({ className, ...props }: ComponentPropsWithoutRef<"hr">) => (
    <hr {...props} className={twMerge("border-muted my-3", className)} />
 );