Function ProjectSelect

frontend/src/react/components/ProjectSelect.tsx:29–137

({
  value,
  onChange,
  placeholder,
  disabled,
  className,
  excludeDefault = true,
  emptyContent,
  portal,
}: ProjectSelectProps)

}

export function ProjectSelect({
  value,
  onChange,
  placeholder,
  disabled,
  className,
  excludeDefault = true,
  emptyContent,
  portal,
}: ProjectSelectProps) {
  const { t } = useTranslation();
  const [projects, setProjects] = useState<Project[]>([]);
  // Projects referenced by `value` that aren't in the paged fetch.
  // Mirrors Vue's `additionalOptions` so deep-linked URLs (e.g.
  // `/sql-editor/projects/foo/...`) show the correct project label
  // when the user lands on the page before the matching page-1 fetch
  // returns it.
  const [additionalProjects, setAdditionalProjects] = useState<Project[]>([]);

  // Read `excludeDefault` from a ref inside the callback so the
  // callback identity stays stable across re-renders. Without this, any
  // parent re-render that re-evaluates the `excludeDefault` prop
  // expression (e.g. the SQL Editor's `AsidePanel` re-rendering on
  // tab.connection mutations) recreates the callback, which causes the
  // mount-`useEffect` below to re-fire and hit `ListProjects` on every
  // re-render. The boolean value itself is read live each call, so
  // updates still take effect — just without re-running the effect.
  const excludeDefaultRef = useRef(excludeDefault);
  excludeDefaultRef.current = excludeDefault;

  const fetchProjects = useCallback((query: string) => {
    useAppStore
      .getState()
      .fetchProjectList({
        filter: { query, excludeDefault: excludeDefaultRef.current },
        pageSize: getDefaultPagination(),
      })
      .then(({ projects: result }) => setProjects(result));
  }, []);

  // Fetch the first page on mount, and re-fetch only when
  // `excludeDefault` actually flips (rare — typically once after
  // permissions hydrate). `fetchProjects` is stable so this effect
  // never re-fires from parent re-renders alone.
  useEffect(() => {
    fetchProjects("");
  }, [excludeDefault, fetchProjects]);

  // Hydrate the selected project so the trigger always renders its
  // label, even before the paged list loads or when the project is
  // outside the first page window.
  useEffect(() => {
    if (!isValidProjectName(value)) return;
    let cancelled = false;
    void useAppStore
      .getState()
      .getOrFetchProjectByName(value)
      .then((p) => {