feat: List view and sorting of projects in dashboard (#5467)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/dashboard/dashboard.tsx

@@ -174,6 +174,7 @@ export const Dashboard = () => {
           as="aside"
           align="stretch"
           direction="column"
+          shrink={false}
           css={{
             width: theme.sizes.sidebarWidth,
             borderRight: `1px solid ${theme.colors.borderMain}`,

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

@@ -1,10 +1,5 @@
 import { useEffect, useState } from "react";
 import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  IconButton,
   css,
   Flex,
   Text,
@@ -15,7 +10,7 @@ import {
   Link,
   Box,
 } from "@webstudio-is/design-system";
-import { InfoCircleIcon, EllipsesIcon } from "@webstudio-is/icons";
+import { InfoCircleIcon, UploadIcon } from "@webstudio-is/icons";
 import type { DashboardProject } from "@webstudio-is/dashboard";
 import { builderUrl } from "~/shared/router-utils";
 import {
@@ -32,6 +27,8 @@ import { Spinner } from "../shared/spinner";
 import { Card, CardContent, CardFooter } from "../shared/card";
 import type { User } from "~/shared/db/user.server";
 import { TagsDialog } from "./tags";
+import { ProjectMenu } from "./project-menu";
+import { formatDate } from "./utils";
 
 const infoIconStyle = css({ flexShrink: 0 });
 
@@ -58,52 +55,6 @@ const PublishedLink = ({
   );
 };
 
-const Menu = ({
-  tabIndex,
-  onDelete,
-  onRename,
-  onDuplicate,
-  onShare,
-  onUpdateTags,
-}: {
-  tabIndex: number;
-  onDelete: () => void;
-  onRename: () => void;
-  onDuplicate: () => void;
-  onShare: () => void;
-  onUpdateTags: () => void;
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger asChild>
-        <IconButton
-          aria-label="Menu Button"
-          tabIndex={tabIndex}
-          css={{ alignSelf: "center" }}
-        >
-          <EllipsesIcon width={15} height={15} />
-        </IconButton>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" css={{ width: theme.spacing[24] }}>
-        <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>
-  );
-};
-
-const formatDate = (date: string) => {
-  return new Date(date).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
-};
-
 type ProjectCardProps = {
   project: DashboardProject;
   hasProPlan: boolean;
@@ -196,6 +147,24 @@ export const ProjectCard = ({
             opacity: 0,
           }}
         />
+        {isPublished && (
+          <Box
+            css={{
+              position: "absolute",
+              top: theme.spacing[5],
+              left: theme.spacing[5],
+              zIndex: 1,
+              backgroundColor: "oklch(0 0 0 / 0.3)",
+              borderRadius: theme.borderRadius[3],
+              padding: theme.spacing[2],
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <UploadIcon color={rawTheme.colors.foregroundContrastMain} />
+          </Box>
+        )}
         <Flex
           wrap="wrap"
           gap={1}
@@ -245,13 +214,19 @@ export const ProjectCard = ({
               variant="wrapped"
               content={
                 <Text variant="small">
-                  Created on {formatDate(createdAt)}
-                  {latestBuildVirtual?.publishStatus === "PUBLISHED" && (
+                  Created: {formatDate(createdAt)}
+                  {latestBuildVirtual?.updatedAt && (
                     <>
                       <br />
-                      Published on {formatDate(latestBuildVirtual.createdAt)}
+                      Last modified: {formatDate(latestBuildVirtual.updatedAt)}
                     </>
                   )}
+                  <br />
+                  {latestBuildVirtual?.publishStatus === "PUBLISHED" ? (
+                    <>Published: {formatDate(latestBuildVirtual.createdAt)}</>
+                  ) : (
+                    <>Not published</>
+                  )}
                 </Text>
               }
             >
@@ -268,8 +243,7 @@ export const ProjectCard = ({
             <Text color="subtle">Not Published</Text>
           )}
         </Flex>
-        <Menu
-          tabIndex={-1}
+        <ProjectMenu
           onDelete={() => setIsDeleteDialogOpen(true)}
           onRename={() => setIsRenameDialogOpen(true)}
           onShare={() => setIsShareDialogOpen(true)}

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

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  IconButton,
+  theme,
+} from "@webstudio-is/design-system";
+import { EllipsesIcon } from "@webstudio-is/icons";
+
+type ProjectMenuProps = {
+  onDelete: () => void;
+  onRename: () => void;
+  onDuplicate: () => void;
+  onShare: () => void;
+  onUpdateTags: () => void;
+};
+
+export const ProjectMenu = ({
+  onDelete,
+  onRename,
+  onDuplicate,
+  onShare,
+  onUpdateTags,
+}: ProjectMenuProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <IconButton
+          aria-label="Menu Button"
+          tabIndex={-1}
+          css={{ alignSelf: "center", position: "relative", zIndex: 1 }}
+        >
+          <EllipsesIcon width={15} height={15} />
+        </IconButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" css={{ width: theme.spacing[24] }}>
+        <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>
+  );
+};