Remove project label from Rill Dev Breadcrumbs (#4625)

* initial commit

* change label

* cleanup

* remove project name to match mocks

* merge bits-ui revert

* revert bits downgrade

* spacing

web-common/src/components/navigation/breadcrumbs/Breadcrumbs.svelte

@@ -21,7 +21,7 @@
   $: currentPage = currentPath.findLastIndex(Boolean);
 </script>
 
-<nav class="flex gap-x-0 pl-1.5 items-center">
+<nav class="flex gap-x-2 pl-1.5 items-center">
   <slot name="icon" />
   <ol class="flex flex-row items-center">
     {#each pathParts as options, depth (depth)}

web-local/src/routes/(viz)/+layout.svelte

@@ -1,22 +1,23 @@
 <script lang="ts">
   import Rill from "@rilldata/web-common/components/icons/Rill.svelte";
   import Breadcrumbs from "@rilldata/web-common/components/navigation/breadcrumbs/Breadcrumbs.svelte";
-  import { useProjectTitle } from "@rilldata/web-common/features/project/selectors";
   import { useValidDashboards } from "@rilldata/web-common/features/dashboards/selectors.js";
   import { page } from "$app/stores";
   import type { PathOption } from "@rilldata/web-common/components/navigation/breadcrumbs/Breadcrumbs.svelte";
   import DashboardCtAs from "@rilldata/web-common/features/dashboards/workspace/DashboardCTAs.svelte";
+  import type { LayoutData } from "../$types";
 
-  export let data;
+  export let data: LayoutData;
 
   $: ({ instanceId } = data);
 
-  $: dashboardName = $page.params.name;
+  $: ({
+    params: { name: dashboardName },
+    route,
+  } = $page);
 
-  $: projectTitleQuery = useProjectTitle(instanceId);
   $: dashboardsQuery = useValidDashboards(instanceId);
 
-  $: projectName = ($projectTitleQuery.data as string | undefined) ?? null;
   $: dashboards = $dashboardsQuery.data ?? [];
 
   $: dashboardOptions = dashboards.reduce((map, dimension) => {
@@ -28,26 +29,24 @@
     return map;
   }, new Map<string, PathOption>());
 
-  $: projectOptions = new Map<string, PathOption>([
-    [projectName ?? "", { label: projectName ?? "", href: "/" }],
-  ]);
+  $: pathParts = [dashboardOptions];
 
-  $: pathParts = [projectOptions, dashboardOptions];
-
-  $: currentPath = [projectName ?? "", dashboardName];
+  $: currentPath = [dashboardName];
 </script>
 
 <div class="flex flex-col size-full">
   <header class="py-3 w-full bg-white flex gap-x-2 items-center px-4 border-b">
     {#if $dashboardsQuery.data}
       <Breadcrumbs {pathParts} {currentPath}>
-        <Rill slot="icon" />
+        <a href="/" slot="icon">
+          <Rill />
+        </a>
       </Breadcrumbs>
     {/if}
     <span class="rounded-full px-2 border text-gray-800 bg-gray-50">
       PREVIEW
     </span>
-    {#if $page.route.id?.includes("dashboard")}
+    {#if route.id?.includes("dashboard")}
       <DashboardCtAs metricViewName={dashboardName} />
     {/if}
   </header>