feat: add project tags in dashboard (#5399)

Ref #860





https://github.com/user-attachments/assets/a85b525a-d43b-4361-aa5f-f2158b3c0211

---------

Co-authored-by: Oleg Isonen <[email protected]>

Author: TrySound

apps/builder/app/builder/features/pages/page-settings.stories.tsx

@@ -63,6 +63,7 @@ $project.set({
   isDeleted: false,
   userId: "userId",
   domain: "new-2x9tcd",
+  tags: [],
 
   marketplaceApprovalStatus: "UNLISTED",
 

apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx

@@ -214,7 +214,7 @@ const InvalidCollectionDataStub = forwardRef<
       <a
         style={{ color: "inherit" }}
         target="_blank"
-        href="https://docs.webstudio.is/university/core-components/collection.md#whats-an-array"
+        href="https://docs.webstudio.is/university/core-components/collection#whats-an-array"
         // avoid preventing click by events interceptor
         onClickCapture={(event) => event.stopPropagation()}
       >

apps/builder/app/dashboard/dashboard.stories.tsx

@@ -18,6 +18,7 @@ const user = {
   username: "Taylor",
   teamId: null,
   provider: "github",
+  projectsTags: [],
 };
 
 const createRouter = (element: JSX.Element, path: string, current?: string) =>
@@ -49,6 +50,7 @@ const projects = [
     previewImageAssetId: "",
     latestBuildVirtual: null,
     marketplaceApprovalStatus: "UNLISTED" as const,
+    tags: [],
   } as DashboardProject,
 ];
 

apps/builder/app/dashboard/dashboard.tsx

@@ -256,6 +256,7 @@ export const Dashboard = () => {
             projects={projects}
             hasProPlan={userPlanFeatures.hasProPlan}
             publisherHost={publisherHost}
+            projectsTags={user.projectsTags}
           />
         )}
         {view === "templates" && <Templates projects={templates} />}

apps/builder/app/dashboard/projects/colors.ts

@@ -0,0 +1,6 @@
+export const colors = Array.from({ length: 50 }, (_, i) => {
+  const l = 55 + (i % 3) * 3; // Reduced variation in lightness (55-61%) to lower contrast
+  const c = 0.14 + (i % 2) * 0.02; // Reduced variation in chroma (0.14-0.16) for balance
+  const h = (i * 137.5) % 360; // Golden angle for pleasing hue distribution
+  return `oklch(${l}% ${c.toFixed(2)} ${h.toFixed(1)})`;
+});

apps/builder/app/dashboard/projects/project-card.tsx

@@ -30,6 +30,8 @@ import {
 } from "../shared/thumbnail";
 import { Spinner } from "../shared/spinner";
 import { Card, CardContent, CardFooter } from "../shared/card";
+import type { User } from "~/shared/db/user.server";
+import { TagsDialog } from "./tags";
 
 const infoIconStyle = css({ flexShrink: 0 });
 
@@ -64,12 +66,14 @@ const Menu = ({
   onRename,
   onDuplicate,
   onShare,
+  onUpdateTags,
 }: {
   tabIndex: number;
   onDelete: () => void;
   onRename: () => void;
   onDuplicate: () => void;
   onShare: () => void;
+  onUpdateTags: () => void;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   return (
@@ -87,6 +91,7 @@ const Menu = ({
         <DropdownMenuItem onSelect={onDuplicate}>Duplicate</DropdownMenuItem>
         <DropdownMenuItem onSelect={onRename}>Rename</DropdownMenuItem>
         <DropdownMenuItem onSelect={onShare}>Share</DropdownMenuItem>
+        <DropdownMenuItem onSelect={onUpdateTags}>Tags</DropdownMenuItem>
         <DropdownMenuItem onSelect={onDelete}>Delete</DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
@@ -105,6 +110,7 @@ type ProjectCardProps = {
   project: DashboardProject;
   hasProPlan: boolean;
   publisherHost: string;
+  projectsTags: User["projectsTags"];
 };
 
 export const ProjectCard = ({
@@ -116,18 +122,30 @@ export const ProjectCard = ({
     createdAt,
     latestBuildVirtual,
     previewImageAsset,
+    tags,
   },
   hasProPlan,
   publisherHost,
+  projectsTags,
   ...props
 }: ProjectCardProps) => {
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
+  const [isTagsDialogOpen, setIsTagsDialogOpen] = useState(false);
   const [isHidden, setIsHidden] = useState(false);
   const handleCloneProject = useCloneProject(id);
   const [isTransitioning, setIsTransitioning] = useState(false);
 
+  // Makes sure there are no project tags that reference deleted User tags.
+  // We are not deleting project tag from project.tags when deleting User tags.
+  const projectTagsIds = (tags || [])
+    .map((tagId) => {
+      const tag = projectsTags.find((tag) => tag.id === tagId);
+      return tag ? tag.id : undefined;
+    })
+    .filter(Boolean) as string[];
+
   useEffect(() => {
     const linkPath = builderUrl({ origin: window.origin, projectId: id });
 
@@ -173,7 +191,33 @@ export const ProjectCard = ({
             opacity: 0,
           }}
         />
-
+        <Flex
+          wrap="wrap"
+          gap={1}
+          css={{
+            position: "absolute",
+            padding: theme.panel.padding,
+            bottom: 0,
+            zIndex: 1,
+          }}
+        >
+          {projectsTags.map((tag) => {
+            const isApplied = projectTagsIds.includes(tag.id);
+            if (isApplied) {
+              return (
+                <Text
+                  color="contrast"
+                  key={tag.id}
+                  css={{
+                    background: "oklch(0 0 0 / 0.3)",
+                    borderRadius: theme.borderRadius[3],
+                    paddingInline: theme.spacing[3],
+                  }}
+                >{`#${tag.label}`}</Text>
+              );
+            }
+          })}
+        </Flex>
         {previewImageAsset ? (
           <ThumbnailLinkWithImage to={linkPath} name={previewImageAsset.name} />
         ) : (
@@ -225,16 +269,11 @@ export const ProjectCard = ({
         </Flex>
         <Menu
           tabIndex={-1}
-          onDelete={() => {
-            setIsDeleteDialogOpen(true);
-          }}
-          onRename={() => {
-            setIsRenameDialogOpen(true);
-          }}
-          onShare={() => {
-            setIsShareDialogOpen(true);
-          }}
+          onDelete={() => setIsDeleteDialogOpen(true)}
+          onRename={() => setIsRenameDialogOpen(true)}
+          onShare={() => setIsShareDialogOpen(true)}
           onDuplicate={handleCloneProject}
+          onUpdateTags={() => setIsTagsDialogOpen(true)}
         />
       </CardFooter>
       <RenameProjectDialog
@@ -256,6 +295,13 @@ export const ProjectCard = ({
         projectId={id}
         hasProPlan={hasProPlan}
       />
+      <TagsDialog
+        projectId={id}
+        projectsTags={projectsTags}
+        projectTagsIds={projectTagsIds}
+        isOpen={isTagsDialogOpen}
+        onOpenChange={setIsTagsDialogOpen}
+      />
     </Card>
   );
 };

apps/builder/app/dashboard/projects/projects.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   Flex,
   Grid,
   List,
@@ -11,11 +12,16 @@ import type { DashboardProject } from "@webstudio-is/dashboard";
 import { ProjectCard } from "./project-card";
 import { CreateProject } from "./project-dialogs";
 import { Header, Main } from "../shared/layout";
+import { useSearchParams } from "react-router-dom";
+import { setIsSubsetOf } from "~/shared/shim";
+import type { User } from "~/shared/db/user.server";
+import { Tag } from "./tags";
 
 export const ProjectsGrid = ({
   projects,
   hasProPlan,
   publisherHost,
+  projectsTags,
 }: ProjectsProps) => {
   return (
     <List asChild>
@@ -33,6 +39,7 @@ export const ProjectsGrid = ({
                 project={project}
                 hasProPlan={hasProPlan}
                 publisherHost={publisherHost}
+                projectsTags={projectsTags}
               />
             </ListItem>
           );
@@ -46,9 +53,19 @@ type ProjectsProps = {
   projects: Array<DashboardProject>;
   hasProPlan: boolean;
   publisherHost: string;
+  projectsTags: User["projectsTags"];
 };
 
 export const Projects = (props: ProjectsProps) => {
+  const [searchParams] = useSearchParams();
+  const selectedTags = searchParams.getAll("tag");
+  let projects = props.projects;
+  if (selectedTags.length > 0) {
+    projects = projects.filter((project) =>
+      setIsSubsetOf(new Set(selectedTags), new Set(project.tags))
+    );
+  }
+
   return (
     <Main>
       <Header variant="main">
@@ -60,12 +77,43 @@ export const Projects = (props: ProjectsProps) => {
         </Flex>
       </Header>
       <Flex
-        direction="column"
-        gap="3"
-        css={{ paddingInline: theme.spacing[13] }}
+        gap="2"
+        wrap="wrap"
+        css={{
+          display: "none",
+          flexShrink: 0,
+          paddingInline: theme.spacing[13],
+          paddingBlockStart: theme.spacing[2],
+          paddingBlockEnd: theme.spacing[10],
+          "&:has(*:first-child)": {
+            display: "flex",
+          },
+        }}
       >
-        <ProjectsGrid {...props} />
+        {props.projectsTags.map((tag, index) => {
+          return (
+            <Tag
+              tag={tag}
+              key={tag.id}
+              index={index}
+              state={selectedTags.includes(tag.id) ? "pressed" : "auto"}
+            >
+              {tag.label}
+            </Tag>
+          );
+        })}
       </Flex>
+      <Box css={{ paddingInline: theme.spacing[13] }}>
+        {projects.length === 0 && (
+          <Text
+            variant="brandRegular"
+            css={{ padding: theme.spacing[13], textAlign: "center" }}
+          >
+            No projects found
+          </Text>
+        )}
+        <ProjectsGrid {...props} projects={projects} />
+      </Box>
     </Main>
   );
 };