web: easier to navigate around + a lot of minor ui improvements

apps/web/src/components/navbar/Breadcrumbs.tsx

@@ -29,6 +29,16 @@ export function Breadcrumbs() {
     }
   );
 
+  const dashboard = api.dashboard.get.useQuery(
+    {
+      slug: params.dashboard,
+    },
+    {
+      enabled: !!params.dashboard,
+      staleTime: Infinity,
+    }
+  );
+
   return (
     <div className="border-b border-border text-xs">
       <Container className="flex items-center gap-2 h-8">
@@ -52,6 +62,18 @@ export function Breadcrumbs() {
             </Link>
           </>
         )}
+
+        {org.data && pro.data && dashboard.data && (
+          <>
+            <ChevronRight size={10} />
+            <Link
+              shallow
+              href={`/${org.data.slug}/${pro.data.slug}/${dashboard.data.slug}`}
+            >
+              {dashboard.data.name}
+            </Link>
+          </>
+        )}
       </Container>
     </div>
   );

apps/web/src/components/navbar/NavbarMenu.tsx

@@ -1,5 +1,6 @@
 import { useOrganizationParams } from '@/hooks/useOrganizationParams';
 import { cn } from '@/utils/cn';
+import { strip } from '@/utils/object';
 import Link from 'next/link';
 
 import { NavbarUserDropdown } from './NavbarUserDropdown';
@@ -29,7 +30,12 @@ export function NavbarMenu() {
       {params.project && (
         <Link
           shallow
-          href={`/${params.organization}/${params.project}/reports`}
+          href={{
+            pathname: `/${params.organization}/${params.project}/reports`,
+            query: strip({
+              dashboard: params.dashboard,
+            }),
+          }}
         >
           Create report
         </Link>