From 35a0327387d1fd985ed8bca9969ef9861f07effb Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 28 Dec 2021 10:35:46 +0100
Subject: [PATCH] Added quick actions + some styling fixes

---
 CHANGELOG.md                                  |  1 +
 .../components/Header/Header.tsx              |  2 +-
 .../components/Header/Searchbox.tsx           |  8 ++--
 .../components/Header/Sorting.tsx             |  2 +-
 .../components/Media/Item.tsx                 | 48 +++++++++++++++++--
 .../components/Media/MediaHeaderTop.tsx       |  4 +-
 .../components/Media/QuickAction.tsx          | 19 ++++++++
 .../components/Menu/MenuItem.tsx              |  2 +-
 .../components/Menu/MenuItems.tsx             |  2 +-
 9 files changed, 75 insertions(+), 13 deletions(-)
 create mode 100644 src/dashboardWebView/components/Media/QuickAction.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e245164..e7324f8c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### 🎨 Enhancements
 
 - Fixing the spinner which overlaps the global navigation bar
+- Quick actions added for media files (edit, delete, insert markdown, insert snippet)
 - [#199](https://github.com/estruyf/vscode-front-matter/issues/199): Search media files in the currently selected folder
 - [#211](https://github.com/estruyf/vscode-front-matter/issues/211): Replace text selection on media inserts
 - [#212](https://github.com/estruyf/vscode-front-matter/issues/212): Create folder watchers for content folders. When new content gets created, the dashboard updates.
diff --git a/src/dashboardWebView/components/Header/Header.tsx b/src/dashboardWebView/components/Header/Header.tsx
index 8afbb253..028f5f2d 100644
--- a/src/dashboardWebView/components/Header/Header.tsx
+++ b/src/dashboardWebView/components/Header/Header.tsx
@@ -105,7 +105,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
               </div>
             </div>
 
-            <div className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end space-x-4 lg:space-x-6 xl:space-x-8 bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400  dark:border-vulcan-100`}>
+            <div className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400  dark:border-vulcan-100 space-x-4 lg:space-x-6 xl:space-x-8`}>
               <ClearFilters />
 
               <Folders />
diff --git a/src/dashboardWebView/components/Header/Searchbox.tsx b/src/dashboardWebView/components/Header/Searchbox.tsx
index a9840a80..3e088732 100644
--- a/src/dashboardWebView/components/Header/Searchbox.tsx
+++ b/src/dashboardWebView/components/Header/Searchbox.tsx
@@ -4,9 +4,11 @@ import { useRecoilState } from 'recoil';
 import { useDebounce } from '../../../hooks/useDebounce';
 import { SearchAtom } from '../../state';
 
-export interface ISearchboxProps {}
+export interface ISearchboxProps {
+  placeholder?: string;
+}
 
-export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({}: React.PropsWithChildren<ISearchboxProps>) => {
+export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({placeholder}: React.PropsWithChildren<ISearchboxProps>) => {
   const [ value, setValue ] = React.useState('');
   const [ debounceSearchValue, setDebounceValue ] = useRecoilState(SearchAtom);
   const debounceSearch = useDebounce<string>(value, 500);
@@ -38,7 +40,7 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({}: React.Pr
             type="search"
             name="search"
             className={`block w-full py-2 pl-10 pr-3 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none`}
-            placeholder="Search"
+            placeholder={placeholder || "Search"}
             value={value}
             onChange={handleChange}
           />
diff --git a/src/dashboardWebView/components/Header/Sorting.tsx b/src/dashboardWebView/components/Header/Sorting.tsx
index d5d4d9f8..4e35c6f5 100644
--- a/src/dashboardWebView/components/Header/Sorting.tsx
+++ b/src/dashboardWebView/components/Header/Sorting.tsx
@@ -78,7 +78,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({disableCustomSo
               key={option.id}
               title={option.title || option.name}
               value={option}
-              isCurrent={option.id === crntSorting?.id}
+              isCurrent={option.id === crntSort.id}
               onClick={(value) => updateSorting(value)} />
           ))}
         </MenuItems>
diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index 044fd57f..1a0e8c3b 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -1,6 +1,6 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
-import {PhotographIcon} from '@heroicons/react/outline';
+import {ArchiveIcon, ClipboardIcon, CodeIcon, PhotographIcon, PlusIcon} from '@heroicons/react/outline';
 import { basename, dirname } from 'path';
 import * as React from 'react';
 import { useEffect } from 'react';
@@ -15,6 +15,7 @@ import { MenuItem, MenuItems } from '../Menu';
 import { Alert } from '../Modals/Alert';
 import { Metadata } from '../Modals/Metadata';
 import { MenuButton } from './MenuButton'
+import { QuickAction } from './QuickAction';
  
 export interface IItemProps {
   media: MediaInfo;
@@ -206,11 +207,50 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
         <div className={`relative py-4 pl-4 pr-12`}>
           <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
 
-            <div className="flex items-center">
-              <Menu as="div" className="relative z-10 inline-block text-left">
+            <div className="flex items-center border border-transparent group-hover:bg-gray-50 dark:group-hover:bg-vulcan-200 group-hover:border-gray-100 dark:group-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
+
+              <div className='hidden group-hover:inline-block h-5'>
+                {
+                  viewData?.data?.filePath ? (
+                    <>
+                      <QuickAction 
+                        title='Insert image with markdown markup'
+                        onClick={insertToArticle}>
+                        <PlusIcon className={`h-5 w-5`} aria-hidden="true" />
+                      </QuickAction>
+
+                      {
+                        (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
+                          <QuickAction 
+                            title='Insert snippet'
+                            onClick={insertSnippet}>
+                            <CodeIcon className={`h-5 w-5`} aria-hidden="true" />
+                          </QuickAction>
+                        )
+                      }
+                    </>
+                  ) : (
+                    <>
+                      <QuickAction 
+                        title='Copy media path'
+                        onClick={copyToClipboard}>
+                        <ClipboardIcon className={`h-5 w-5`} aria-hidden="true" />
+                      </QuickAction>
+
+                      <QuickAction 
+                        title='Delete media file'
+                        onClick={deleteMedia}>
+                        <ArchiveIcon className={`h-5 w-5`} aria-hidden="true" />
+                      </QuickAction>
+                    </>
+                  )
+                }
+              </div>
+
+              <Menu as="div" className="relative z-10 inline-block text-left  h-5">
                 <MenuButton title={`Menu`} />
 
-                <MenuItems>
+                <MenuItems widthClass='w-40'>
                   <MenuItem 
                     title={`Edit metadata`}
                     onClick={updateMetadata}
diff --git a/src/dashboardWebView/components/Media/MediaHeaderTop.tsx b/src/dashboardWebView/components/Media/MediaHeaderTop.tsx
index 75ca8a1b..18e1e07c 100644
--- a/src/dashboardWebView/components/Media/MediaHeaderTop.tsx
+++ b/src/dashboardWebView/components/Media/MediaHeaderTop.tsx
@@ -68,10 +68,10 @@ export const MediaHeaderTop: React.FunctionComponent<IMediaHeaderTopProps> = ({}
 
   return (
     <nav
-      className="py-4 px-5 flex items-center justify-between border-b border-gray-300 dark:border-vulcan-100"
+      className="py-3 px-4 flex items-center justify-between border-b border-gray-300 dark:border-vulcan-100"
       aria-label="Pagination"
     >
-      <Searchbox />
+      <Searchbox placeholder={`Search in folder`} />
 
       <PaginationStatus />
 
diff --git a/src/dashboardWebView/components/Media/QuickAction.tsx b/src/dashboardWebView/components/Media/QuickAction.tsx
new file mode 100644
index 00000000..e76c8368
--- /dev/null
+++ b/src/dashboardWebView/components/Media/QuickAction.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface IQuickActionProps {
+  title: string;
+  onClick: () => void;
+}
+
+export const QuickAction: React.FunctionComponent<IQuickActionProps> = ({title, onClick, children}: React.PropsWithChildren<IQuickActionProps>) => {
+  return (    
+    <button
+      type='button'
+      title={title}
+      onClick={onClick}
+      className={`px-2 group inline-flex justify-center text-sm font-medium text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600`}>
+      {children}
+      <span className='sr-only'>{title}</span>
+    </button>
+  );
+};
\ No newline at end of file
diff --git a/src/dashboardWebView/components/Menu/MenuItem.tsx b/src/dashboardWebView/components/Menu/MenuItem.tsx
index aa1d930c..99492359 100644
--- a/src/dashboardWebView/components/Menu/MenuItem.tsx
+++ b/src/dashboardWebView/components/Menu/MenuItem.tsx
@@ -15,7 +15,7 @@ export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({title, value,
       <button
         disabled={disabled}
         onClick={() => onClick(value)}
-        className={`${!isCurrent ? `text-vulcan-500 dark:text-whisper-500` : `text-gray-500 dark:text-whisper-900`} block px-4 py-2 text-sm font-medium w-full text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100 disabled:bg-gray-500`}
+        className={`${!isCurrent ? `font-normal` : `font-bold`} text-gray-500 dark:text-whisper-900 block px-4 py-2 text-sm w-full text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100 disabled:bg-gray-500`}
       >
         {title}
       </button>
diff --git a/src/dashboardWebView/components/Menu/MenuItems.tsx b/src/dashboardWebView/components/Menu/MenuItems.tsx
index 77c3b185..78f414b5 100644
--- a/src/dashboardWebView/components/Menu/MenuItems.tsx
+++ b/src/dashboardWebView/components/Menu/MenuItems.tsx
@@ -17,7 +17,7 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass,
       leaveFrom="transform opacity-100 scale-100"
       leaveTo="transform opacity-0 scale-95"
     >
-      <Menu.Items className={`${widthClass || "w-40"} origin-top-right absolute right-0 z-10 mt-2 rounded-md shadow-2xl bg-white dark:bg-vulcan-500 ring-1 ring-vulcan-400 dark:ring-white ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto`}>
+      <Menu.Items className={`${widthClass || ""} origin-top-right absolute right-0 z-10 mt-2 rounded-md shadow-2xl bg-white dark:bg-vulcan-500 ring-1 ring-vulcan-400 dark:ring-white ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto`}>
         <div className="py-1">
           {children}
         </div>