feat_favorites_homepage_section

Author: Mbeaulne

src/components/Home/FavoritesSection/FavoritesSection.tsx

@@ -0,0 +1,66 @@
+import { useNavigate } from "@tanstack/react-router";
+import { Star } from "lucide-react";
+
+import { FavoriteToggle } from "@/components/shared/FavoriteToggle";
+import { Badge } from "@/components/ui/badge";
+import { InlineStack } from "@/components/ui/layout";
+import { Paragraph, Text } from "@/components/ui/typography";
+import { type FavoriteItem, useFavorites } from "@/hooks/useFavorites";
+import { EDITOR_PATH, RUNS_BASE_PATH } from "@/routes/router";
+
+function getFavoriteUrl(item: FavoriteItem): string {
+  if (item.type === "pipeline") return `${EDITOR_PATH}/${item.id}`;
+  return `${RUNS_BASE_PATH}/${item.id}`;
+}
+
+const FavoriteCard = ({ item }: { item: FavoriteItem }) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate({ to: getFavoriteUrl(item) });
+  };
+
+  return (
+    <div
+      onClick={handleClick}
+      className="w-48 shrink-0 p-3 border rounded-lg cursor-pointer hover:bg-muted/50 flex flex-col gap-2"
+    >
+      <Paragraph className="truncate text-sm font-medium" title={item.name}>
+        {item.name}
+      </Paragraph>
+      <InlineStack align="space-between" blockAlign="center">
+        <Badge variant="secondary" size="sm">
+          {item.type === "pipeline" ? "Pipeline" : "Run"}
+        </Badge>
+        <FavoriteToggle type={item.type} id={item.id} name={item.name} />
+      </InlineStack>
+    </div>
+  );
+};
+
+export const FavoritesSection = () => {
+  const { favorites } = useFavorites();
+
+  return (
+    <div className="flex flex-col gap-2">
+      <InlineStack blockAlign="center" gap="1">
+        <Star className="h-4 w-4 text-warning" fill="oklch(79.5% 0.184 86.047)" />
+        <Text as="h2" size="sm" weight="semibold">
+          Favorites
+        </Text>
+      </InlineStack>
+
+      {favorites.length === 0 ? (
+        <Paragraph tone="subdued" size="sm">
+          No favorites yet. Star a pipeline or run to pin it here.
+        </Paragraph>
+      ) : (
+        <div className="flex gap-3 overflow-x-auto pb-1">
+          {favorites.map((item) => (
+            <FavoriteCard key={`${item.type}-${item.id}`} item={item} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

src/routes/Dashboard/Dashboard.tsx

@@ -1,3 +1,4 @@
+import { FavoritesSection } from "@/components/Home/FavoritesSection/FavoritesSection";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Text } from "@/components/ui/typography";
 
@@ -17,6 +18,7 @@ export const Dashboard = () => {
           Beta
         </Text>
       </InlineStack>
+      <FavoritesSection />
     </BlockStack>
   );
 };