search wip

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

@@ -163,12 +163,12 @@ export const ProjectCard = ({
   },
   hasProPlan,
   publisherHost,
+  ...props
 }: ProjectCardProps) => {
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
   const [isHidden, setIsHidden] = useState(false);
-  const { thumbnailRef, handleKeyDown } = useProjectCard();
   const handleCloneProject = useCloneProject(id);
   const [isTransitioning, setIsTransitioning] = useState(false);
 
@@ -195,7 +195,7 @@ export const ProjectCard = ({
   const linkPath = builderUrl({ origin: window.origin, projectId: id });
 
   return (
-    <Card hidden={isHidden} tabIndex={0} onKeyDown={handleKeyDown}>
+    <Card hidden={isHidden} {...props}>
       <CardContent
         css={{
           background: theme.colors.brandBackgroundProjectCardBack,
@@ -219,17 +219,9 @@ export const ProjectCard = ({
         />
 
         {previewImageAsset ? (
-          <ThumbnailLinkWithImage
-            to={linkPath}
-            name={previewImageAsset.name}
-            ref={thumbnailRef}
-          />
+          <ThumbnailLinkWithImage to={linkPath} name={previewImageAsset.name} />
         ) : (
-          <ThumbnailLinkWithAbbr
-            title={title}
-            to={linkPath}
-            ref={thumbnailRef}
-          />
+          <ThumbnailLinkWithAbbr title={title} to={linkPath} />
         )}
         {isTransitioning && <Spinner delay={0} />}
       </CardContent>

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

@@ -1,9 +1,24 @@
-import { Flex, Grid, Text, rawTheme, theme } from "@webstudio-is/design-system";
+import {
+  Flex,
+  Grid,
+  InputField,
+  List,
+  ListItem,
+  SearchField,
+  Text,
+  findNextListItemIndex,
+  rawTheme,
+  theme,
+  useSearchFieldKeys,
+} from "@webstudio-is/design-system";
 import type { DashboardProject } from "@webstudio-is/dashboard";
 import { EmptyState } from "./empty-state";
 import { ProjectCard } from "./project-card";
 import { CreateProject } from "./project-dialogs";
 import { Header, Main } from "../shared/layout";
+import { useState } from "react";
+import { matchSorter } from "match-sorter";
+import { builderUrl } from "~/shared/router-utils";
 
 type ProjectsProps = {
   projects: Array<DashboardProject>;
@@ -16,13 +31,48 @@ export const Projects = ({
   hasProPlan,
   publisherHost,
 }: ProjectsProps) => {
+  const [selectedProjectId, setSelectedProjectId] = useState<string>();
+
+  const resetSelectedProjectId = () => setSelectedProjectId(undefined);
+
+  const searchProps = useSearchFieldKeys({
+    onChange: resetSelectedProjectId,
+    onCancel: resetSelectedProjectId,
+    onMove({ direction }) {
+      if (direction === "current") {
+        location.href = builderUrl({
+          origin: window.origin,
+          projectId: selectedProjectId ?? foundProjects[0].id,
+        });
+        return;
+      }
+      const index = foundProjects.findIndex(
+        (project) => project.id === selectedProjectId
+      );
+      const nextIndex = findNextListItemIndex(
+        index,
+        foundProjects.length,
+        direction
+      );
+
+      setSelectedProjectId(foundProjects[nextIndex].id);
+    },
+  });
+
+  const foundProjects = searchProps.value
+    ? matchSorter(projects, searchProps.value, {
+        keys: ["title", "domain"],
+      })
+    : projects;
+
   return (
     <Main>
       <Header variant="main">
         <Text variant="brandSectionTitle" as="h2">
           Projects
         </Text>
         <Flex gap="2">
+          <SearchField {...searchProps} autoFocus placeholder="Find projects" />
           <CreateProject />
         </Flex>
       </Header>
@@ -34,25 +84,36 @@ export const Projects = ({
           paddingTop: projects.length === 0 ? "20vh" : 0,
         }}
       >
-        {projects.length === 0 && <EmptyState />}
-        <Grid
-          gap="6"
-          css={{
-            gridTemplateColumns: `repeat(auto-fill, minmax(${rawTheme.spacing[31]}, 1fr))`,
-            paddingBottom: theme.spacing[13],
-          }}
-        >
-          {projects.map((project) => {
-            return (
-              <ProjectCard
-                project={project}
-                key={project.id}
-                hasProPlan={hasProPlan}
-                publisherHost={publisherHost}
-              />
-            );
-          })}
-        </Grid>
+        {foundProjects.length === 0 && <EmptyState />}
+        <List asChild>
+          <Grid
+            gap="6"
+            css={{
+              gridTemplateColumns: `repeat(auto-fill, minmax(${rawTheme.spacing[31]}, 1fr))`,
+              paddingBottom: theme.spacing[13],
+            }}
+          >
+            {foundProjects.map((project, index) => {
+              return (
+                <ListItem
+                  state={
+                    project.id === selectedProjectId ? "selected" : undefined
+                  }
+                  index={index}
+                  key={project.id}
+                  asChild
+                >
+                  <ProjectCard
+                    project={project}
+                    key={project.id}
+                    hasProPlan={hasProPlan}
+                    publisherHost={publisherHost}
+                  />
+                </ListItem>
+              );
+            })}
+          </Grid>
+        </List>
       </Flex>
     </Main>
   );

apps/builder/app/dashboard/shared/card.tsx

@@ -21,7 +21,7 @@ const cardStyle = css({
   alignItems: "center",
   flexShrink: 0,
   outline: "none",
-  "&:focus-within": {
+  "&:focus-within, &[aria-selected=true]": {
     [borderColorVar]: theme.colors.borderFocus,
   },
 });