migrate to app dir and ssr

apps/web/src/app/(app)/layout-project-selector.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { Combobox } from '@/components/ui/combobox';
+import type { getProjectsByOrganizationId } from '@/server/services/project.service';
+import { useParams, usePathname, useRouter } from 'next/navigation';
+
+interface LayoutProjectSelectorProps {
+  projects: Awaited<ReturnType<typeof getProjectsByOrganizationId>>;
+  organizationId: string | null;
+}
+export default function LayoutProjectSelector({
+  projects,
+  organizationId,
+}: LayoutProjectSelectorProps) {
+  const router = useRouter();
+  const params = useParams<{ projectId: string }>();
+  const projectId = params?.projectId ? params.projectId : null;
+  const pathname = usePathname() || '';
+
+  return (
+    <div>
+      <Combobox
+        className="w-auto min-w-0 max-sm:max-w-[100px]"
+        placeholder={'Select project'}
+        onChange={(value) => {
+          // If we are on a page with only organizationId and projectId (as params)
+          // we know its safe to just replace the current projectId
+          // since the rest of the url is to a static page
+          // e.g. /[organizationId]/[projectId]/events
+          if (params && projectId && Object.keys(params).length === 2) {
+            router.push(pathname.replace(projectId, value));
+          } else {
+            router.push(`/${organizationId}/${value}`);
+          }
+        }}
+        value={projectId}
+        items={
+          projects.map((item) => ({
+            label: item.name,
+            value: item.id,
+          })) ?? []
+        }
+      />
+    </div>
+  );
+}