move pin action to dropdown

elpassion · Oct 10, 2024 · 974aa2e · 974aa2e
1 parent 35fad8a
commit 974aa2e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git a/apps/web-remix/app/components/pages/pipelines/list/PipelinesList.tsx b/apps/web-remix/app/components/pages/pipelines/list/PipelinesList.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Bookmark, BookmarkCheck } from 'lucide-react';
 
 import { BasicLink } from '~/components/link/BasicLink';
 import { ItemList } from '~/components/list/ItemList';
@@ -20,7 +19,7 @@ interface PipelinesListProps {
   onDelete?: (pipeline: IPipeline, e: React.MouseEvent<HTMLDivElement>) => void;
   onToggleFavorite?: (
     pipeline: IPipeline,
-    e: React.MouseEvent<HTMLButtonElement>,
+    e: React.MouseEvent<HTMLDivElement>,
   ) => void;
 }
 
@@ -38,27 +37,12 @@ export const PipelinesList: React.FC<PipelinesListProps> = ({
       renderItem={(item) => (
         <BasicLink to={routes.pipelineBuild(item.organization_id, item.id)}>
           <PipelinesListItem className="flex flex-col relative group">
-            <PipelineListItemHeader pipeline={item} onDelete={onDelete} />
+            <PipelineListItemHeader
+              pipeline={item}
+              onDelete={onDelete}
+              onToggleFavorite={onToggleFavorite}
+            />
             <PipelineListItemContent pipeline={item} />
-
-            <button
-              className={cn(
-                'font-light hover:text-blue-500 absolute bottom-2 right-2 lg:bottom-4 lg:right-6 group-hover:opacity-100 group-hover:translate-x-0 transition-all',
-                {
-                  'lg:translate-x-4 lg:opacity-0 text-muted-foreground':
-                    !item.favorite,
-                  'text-foreground': item.favorite,
-                },
-              )}
-              onClick={(e) => onToggleFavorite?.(item, e)}
-              aria-label="Toggle favorite"
-            >
-              {item.favorite ? (
-                <BookmarkCheck className="w-4 h-4" />
-              ) : (
-                <Bookmark className="w-4 h-4" />
-              )}
-            </button>
           </PipelinesListItem>
         </BasicLink>
       )}

diff --git a/apps/web-remix/app/components/pages/pipelines/list/PipelinesListItem.tsx b/apps/web-remix/app/components/pages/pipelines/list/PipelinesListItem.tsx
@@ -2,6 +2,8 @@ import type { PropsWithChildren } from 'react';
 import React, { useMemo } from 'react';
 import { withZod } from '@remix-validated-form/with-zod';
 import {
+  Bookmark,
+  BookmarkCheck,
   CircleCheck,
   CircleX,
   EllipsisVertical,
@@ -64,15 +66,24 @@ export const PipelinesListItem = ({
 interface PipelineListItemHeaderProps {
   pipeline: IPipeline;
   onDelete?: (pipeline: IPipeline, e: React.MouseEvent<HTMLDivElement>) => void;
+  onToggleFavorite?: (
+    pipeline: IPipeline,
+    e: React.MouseEvent<HTMLDivElement>,
+  ) => void;
 }
 export const PipelineListItemHeader = ({
   pipeline,
   onDelete,
+  onToggleFavorite,
 }: PipelineListItemHeaderProps) => {
   const handleDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
     onDelete?.(pipeline, e);
   };
 
+  const handleToggleFavorite = async (e: React.MouseEvent<HTMLDivElement>) => {
+    onToggleFavorite?.(pipeline, e);
+  };
+
   return (
     <CardHeader className="flex flex-row gap-4 items-start justify-between space-y-0">
       <div className="flex flex-col gap-2 mt-1.5 lg:items-center lg:flex-row">
@@ -110,6 +121,20 @@ export const PipelineListItemHeader = ({
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DuplicateForm pipeline={pipeline} />
+
+            <DropdownMenuItem
+              className="w-full flex gap-1 items-center cursor-pointer text-muted-foreground font-medium"
+              onClick={handleToggleFavorite}
+            >
+              {pipeline.favorite ? (
+                <BookmarkCheck className="w-4 h-4" />
+              ) : (
+                <Bookmark className="w-4 h-4" />
+              )}
+
+              <span>{pipeline.favorite ? 'Unpin' : 'Pin'}</span>
+            </DropdownMenuItem>
+
             <DropdownMenuItem
               className="w-full flex gap-1 items-center text-red-500"
               onClick={handleDelete}

diff --git a/apps/web-remix/app/components/pages/pipelines/list/page.tsx b/apps/web-remix/app/components/pages/pipelines/list/page.tsx
@@ -264,7 +264,7 @@ function useToggleWorkflow({
 
   const action = async (
     pipeline: IPipeline,
-    e: React.MouseEvent<HTMLButtonElement>,
+    e: React.MouseEvent<HTMLDivElement>,
   ) => {
     e.preventDefault();