feat: dashboard favourites

.claude/skills/i18n-migrate/SKILL.md

@@ -0,0 +1,58 @@
+---
+description: Find hardcoded user-facing strings in the branch's changes and migrate them to i18n (paraglide messages), following the repo's i18n conventions
+allowed-tools: Bash(git:*), Bash(npm:*), Glob, Grep, Read, Edit, AskUserQuestion
+argument-hint: "[optional: files/dirs to narrow focus]"
+---
+
+Audit the changes on the current branch for hardcoded user-facing strings that should be moved to i18n (Paraglide/inlang messages), following the conventions in `web-common/src/lib/i18n/README.md`.
+
+Optional focus: $ARGUMENTS
+
+## Instructions
+
+### 1. Determine the diff to audit
+
+- If `$ARGUMENTS` lists files or directories, scope the audit to those paths only.
+- Otherwise, audit the PR diff: `git diff --merge-base main` to get changed lines across the branch.
+- Only consider **added or modified** lines. Do not flag pre-existing strings unless the file was explicitly passed in `$ARGUMENTS`.
+- Only frontend files are in scope: `web-common/`, `web-admin/`, `web-local/`, with extensions `.svelte` and `.ts`/`.svelte.ts`.
+
+### 2. Find hardcoded user-facing strings
+
+Mirror the heuristics in `scripts/i18n-guard.js`:
+
+- **Svelte visible text**: content between `>` and `<` that contains real words.
+- **Human-facing attributes**: `placeholder`, `title`, `aria-label`, `alt`, `label`.
+- **TypeScript**: string literals used as user-facing copy — e.g. `label:`, `header:`, `body:`, toast/notification text, thrown error messages shown to users, option arrays.
+
+**Skip** (not user-facing): identifiers, URLs, paths, `CONSTANT_CASE`, class/style names, object keys, `console.*`/log messages, code comments, test files (`*.spec.ts`, `*.test.ts`, e2e), and lines with an `i18n-ignore` comment on or above them.
+
+### 3. Propose keys, reusing what exists
+
+For each finding, before proposing a new key, grep `web-common/src/lib/i18n/messages/en.json` for the exact copy — **reuse an existing key** if one matches (especially `common_*`).
+
+When a new key is needed, follow the README conventions:
+
+- Naming: `feature_component_purpose`, lower snake_case, grouped by prefix.
+- `common_*` for copy reused across features; otherwise prefix with the feature directory name.
+- **Generic shared components** (in `web-common/src/components/`) should use `common_*` keys, not feature-specific ones.
+- **Interpolation**: named placeholders, never string concatenation — `"Sort by {label}"`, not `"Sort by " + label`.
+- **Pluralization**: use Paraglide variants, not `count === 1 ? ... : ...`.
+
+### 4. Watch for these patterns
+
+- **Module-level `const` in `.ts`** (e.g. an options array with `label`): calling `m.key()` at module load freezes the locale. Use a getter — `get label() { return m.key(); }` — so it resolves lazily and stays locale-reactive.
+- **Composed labels**: parameterize the whole string as one interpolated message rather than concatenating a translated prefix with a value.
+
+### 5. Report
+
+Present a table ordered by significance: `file:line`, the current string, the suggested key (or existing key to reuse), and whether interpolation/variants are needed. Note any strings that are borderline or intentionally left as-is.
+
+### 6. Offer to migrate
+
+Ask whether to apply the migration. If yes, for each string:
+
+1. Add the key to **both** `messages/en.json` and `messages/es.json`, placed alphabetically within its prefix group. Provide a real Spanish translation for `es.json`.
+2. Replace the literal in code with `m.key()` / `m.key({ var })`.
+3. Run `npm run build:i18n` to compile and confirm the message functions generate cleanly.
+4. If the change fully migrates a new area, append its directory to `MIGRATED_GLOBS` in `scripts/i18n-guard.js`.

web-admin/src/features/dashboards/listing/DashboardsTable.svelte

@@ -10,20 +10,28 @@
   import { renderComponent } from "tanstack-table-8-svelte-5";
   import DashboardsTableCompositeCell from "./DashboardsTableCompositeCell.svelte";
   import { useDashboards, useIsInitialBuild } from "./selectors";
-  import { Search } from "@rilldata/web-common/components/search";
   import { UrlParamsState } from "web-common/src/lib/store-utils/url-params-state.svelte.ts";
   import { getAllTagsForResources } from "@rilldata/web-common/features/resources/resource-tag-utils.ts";
   import ResizableSidebar from "@rilldata/web-common/layout/ResizableSidebar.svelte";
   import DashboardsTagSidebar from "@rilldata/web-admin/features/dashboards/listing/DashboardsTagSidebar.svelte";
   import { filterResources } from "@rilldata/web-common/features/resources/resource-filter-utils.ts";
+  import {
+    DashboardTableSortOptions,
+    getDashboardFavouritesStore,
+    RecentlyUsedDashboards,
+  } from "./dashboard-favourites.ts";
   import { DebouncedRuneStore } from "@rilldata/web-common/lib/store-utils/types.svelte.ts";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
   import { escapeHtml } from "@rilldata/web-common/lib/i18n";
+  import { TableToolbar } from "@rilldata/web-common/components/table-toolbar";
+  import { dedupe } from "@rilldata/web-common/lib/arrayUtils.ts";
+
+  type DashboardRow = V1Resource & { lastUsed: number };
 
   let {
     isEmbedded = false,
     isPreview = false,
-    previewLimit = 5,
+    previewLimit = undefined,
   }: {
     isEmbedded?: boolean;
     isPreview?: boolean;
@@ -37,6 +45,16 @@
     500,
   );
 
+  const sortStore = UrlParamsState.createStringParam(
+    "sort",
+    DashboardTableSortOptions[0].value,
+  );
+  let sortingOption = $derived(
+    DashboardTableSortOptions.find(
+      (option) => option.value === sortStore.value,
+    ) ?? DashboardTableSortOptions[0],
+  );
+
   const runtimeClient = useRuntimeClient();
   let { organization, project } = $derived(page.params);
 
@@ -66,14 +84,38 @@
     ),
   );
 
-  let displayData = $derived(
-    isPreview ? filteredDashboards.slice(0, previewLimit) : filteredDashboards,
+  let dashboardFavourites = $derived(
+    getDashboardFavouritesStore(organization, project),
+  );
+  let recentlyUsedDashboards = $derived(
+    new RecentlyUsedDashboards(organization, project),
+  );
+
+  let validDashboardFavourites = $derived(
+    dedupe(
+      dashboardFavourites.value.filter((f) =>
+        filteredDashboards.find((r) => r.meta?.name?.name?.toLowerCase() === f),
+      ),
+      (e) => e,
+    ),
   );
 
   let hasMoreDashboards = $derived(
     isPreview && filteredDashboards.length > previewLimit,
   );
 
+  let displayData = $derived(
+    filteredDashboards.map(
+      (r): DashboardRow => ({
+        ...r,
+        lastUsed:
+          recentlyUsedDashboards.recentlyUsed.value[
+            r.meta?.name?.name?.toLowerCase() ?? ""
+          ] ?? 0,
+      }),
+    ),
+  );
+
   const columns = [
     {
       id: "composite",
@@ -103,6 +145,8 @@
           organization,
           project,
           tags,
+          dashboardFavourites,
+          recentlyUsedDashboards,
         });
       },
     },
@@ -135,16 +179,19 @@
         return isMetricsExplorer ? row.explore.spec.description : "";
       },
     },
+    {
+      id: "lastUsed",
+      accessorFn: (row: DashboardRow) => row.lastUsed,
+    },
   ];
 
   const columnVisibility = {
     title: false,
     name: false,
     lastRefreshed: false,
     description: false,
+    lastUsed: false,
   };
-
-  const initialSorting = [{ id: "name", desc: false }];
 </script>
 
 {#if isLoading || isBuilding}
@@ -156,16 +203,11 @@
 {:else if isSuccess}
   <div class="flex flex-col w-full gap-y-3">
     {#if !isPreview}
-      <div class="flex flex-row items-center gap-x-2">
-        <Search
-          placeholder={m.common_search()}
-          autofocus={false}
-          bind:value={searchTextStore.getter, searchTextStore.setter}
-          rounded="lg"
-          retainValueOnMount
-          large
-        />
-      </div>
+      <TableToolbar
+        {searchTextStore}
+        {sortStore}
+        sortOptions={DashboardTableSortOptions}
+      />
     {/if}
 
     <div class="flex flex-row flex-1 w-full gap-x-2 overflow-hidden">
@@ -191,8 +233,10 @@
           data={displayData}
           {columns}
           {columnVisibility}
-          {initialSorting}
+          sorting={[sortingOption.sort]}
           toolbar={false}
+          pinnedRows={validDashboardFavourites}
+          maxRows={previewLimit}
         >
           <ResourceListEmptyState
             slot="empty"

web-admin/src/features/dashboards/listing/DashboardsTableCompositeCell.svelte

@@ -5,7 +5,10 @@
   import ResourceTypeBadge from "@rilldata/web-common/features/entity-management/ResourceTypeBadge.svelte";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { timeAgo } from "@rilldata/web-common/lib/time/relative-time";
+  import { Star } from "lucide-svelte";
+  import { ArrayRuneStore } from "web-common/src/lib/store-utils/types.svelte.ts";
   import { m } from "@rilldata/web-common/lib/i18n/gen/messages";
+  import type { RecentlyUsedDashboards } from "./dashboard-favourites.ts";
 
   export let name: string;
   export let title: string;
@@ -17,6 +20,10 @@
   export let organization: string;
   export let project: string;
   export let tags: string[] = [];
+  export let dashboardFavourites: ArrayRuneStore<string> | undefined =
+    undefined;
+  export let recentlyUsedDashboards: RecentlyUsedDashboards | undefined =
+    undefined;
 
   $: lastRefreshedDate = lastRefreshed ? new Date(lastRefreshed) : null;
 
@@ -28,9 +35,41 @@
   $: resourceKind = isMetricsExplorer
     ? ResourceKind.Explore
     : ResourceKind.Canvas;
+
+  $: favourites = dashboardFavourites?.value ?? [];
+  $: isFavourite = favourites.includes(name?.toLowerCase());
+
+  $: lastUsed =
+    recentlyUsedDashboards?.recentlyUsed?.value?.[name.toLowerCase()];
+  $: lastUsedDate = lastUsed ? new Date(lastUsed) : null;
+
+  let hovered = false;
+
+  function toggleFavourite() {
+    dashboardFavourites?.toggle(name?.toLowerCase());
+  }
+
+  function onDashboardFavouriteToggle(e: MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleFavourite();
+  }
+
+  function onDashboardFavouriteKeydown(e: KeyboardEvent) {
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.stopPropagation();
+    e.preventDefault();
+    toggleFavourite();
+  }
 </script>
 
-<a class="flex flex-col gap-y-1 group px-4 py-2.5 w-full h-full" {href}>
+<!-- TODO: Support non-hover actions like using keyboard for showing favourite icon -->
+<a
+  class="flex flex-col gap-y-1 group px-4 py-2.5 w-full h-full"
+  {href}
+  onmouseenter={() => (hovered = true)}
+  onmouseleave={() => (hovered = false)}
+>
   <div class="flex gap-x-2 items-center min-h-[20px]">
     <ResourceTypeBadge kind={resourceKind} />
     <span
@@ -44,6 +83,25 @@
     {#each tags as tag (tag)}
       <Tag color="gray">{tag}</Tag>
     {/each}
+    <div class="grow"></div>
+    {#if dashboardFavourites && (hovered || isFavourite)}
+      <span
+        role="button"
+        tabindex="0"
+        aria-label={isFavourite
+          ? m.dashboard_remove_favourite()
+          : m.dashboard_add_favourite()}
+        aria-pressed={isFavourite}
+        class="shrink-0 flex cursor-pointer"
+        onclick={onDashboardFavouriteToggle}
+        onkeydown={onDashboardFavouriteKeydown}
+      >
+        <Star
+          size="16px"
+          class={isFavourite ? "fill-accent-primary-action" : "none"}
+        />
+      </span>
+    {/if}
   </div>
   <div
     class="flex gap-x-1 text-fg-tertiary text-xs font-normal min-h-[16px] overflow-hidden"
@@ -62,6 +120,19 @@
         </TooltipContent>
       </Tooltip>
     {/if}
+    {#if lastUsedDate}
+      <span class="shrink-0">•</span>
+      <Tooltip distance={8}>
+        <span class="shrink-0"
+          >{m.dashboard_last_used_ago({
+            time: timeAgo(lastUsedDate),
+          })}</span
+        >
+        <TooltipContent slot="tooltip-content">
+          {lastUsedDate.toLocaleString()}
+        </TooltipContent>
+      </Tooltip>
+    {/if}
     {#if description}
       <span class="shrink-0">•</span>
       <span class="truncate">{description}</span>

web-admin/src/features/dashboards/listing/DashboardsTagFilter.svelte

@@ -8,8 +8,12 @@
     getAllTagsForResources,
     getTagFilterLabel,
   } from "@rilldata/web-common/features/resources/resource-tag-utils.ts";
-
   import type { ArrayRuneStore } from "web-common/src/lib/store-utils/types.svelte.ts";
+  import {
+    getDashboardTagFavouritesStore,
+    sortByFavourites,
+  } from "./dashboard-favourites.ts";
+  import { page } from "$app/state";
 
   let {
     align = "start",
@@ -28,6 +32,15 @@
   let availableTags = $derived(getAllTagsForResources($dashboards?.data ?? []));
 
   let tagsLabel = $derived(getTagFilterLabel(selectedTagsStore.value));
+
+  let { organization, project } = $derived(page.params);
+  let tagsFavourites = $derived(
+    getDashboardTagFavouritesStore(organization, project),
+  );
+
+  let sortedTags = $derived(
+    sortByFavourites(availableTags, tagsFavourites.value, (t) => t.name),
+  );
 </script>
 
 {#if availableTags.length > 0}
@@ -45,7 +58,7 @@
       {/if}
     </DropdownMenu.Trigger>
     <DropdownMenu.Content {align} class="w-48 max-h-72 overflow-y-auto">
-      {#each availableTags as tag (tag.name)}
+      {#each sortedTags as tag (tag.name)}
         <DropdownMenu.CheckboxItem
           checked={selectedTagsStore.value.includes(tag.name)}
           onCheckedChange={() => selectedTagsStore.toggle(tag.name)}