From c67a1f987029bd908f0cd879129f62cc403af07c Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 16 Jan 2024 21:12:28 +0100
Subject: [PATCH] View action added

---
 .../TaxonomyView/TaxonomyActions.tsx          | 10 ++++--
 .../TaxonomyView/TaxonomyManager.tsx          |  2 +-
 .../TaxonomyView/TaxonomyTagging.tsx          | 35 +++++++++++++++----
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/dashboardWebView/components/TaxonomyView/TaxonomyActions.tsx b/src/dashboardWebView/components/TaxonomyView/TaxonomyActions.tsx
index fe8e4897..a1183b0b 100644
--- a/src/dashboardWebView/components/TaxonomyView/TaxonomyActions.tsx
+++ b/src/dashboardWebView/components/TaxonomyView/TaxonomyActions.tsx
@@ -2,10 +2,11 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import {
   ArrowUpCircleIcon,
   PencilIcon,
+  PlusCircleIcon,
   PlusIcon,
   TagIcon,
   TrashIcon,
-} from '@heroicons/react/24/outline';
+} from '@heroicons/react/24/solid';
 import * as React from 'react';
 import { useCallback } from 'react';
 import { MergeIcon } from '../../../components/icons/MergeIcon';
@@ -68,7 +69,7 @@ export const TaxonomyActions: React.FunctionComponent<ITaxonomyActionsProps> = (
 
   return (
     <>
-      <div className={`space-x-2`}>
+      <div className={`space-x-2 text-[var(--frontmatter-text)]`}>
         {unmapped && (
           <LinkButton
             title={l10n.t(LocalizationKey.dashboardTaxonomyViewButtonAddTitle, value)}
@@ -83,7 +84,10 @@ export const TaxonomyActions: React.FunctionComponent<ITaxonomyActionsProps> = (
         <LinkButton
           title={`Tag content`}
           onClick={onTagging}>
-          <TagIcon className={`w-4 h-4`} aria-hidden={true} />
+          <div className='relative'>
+            <TagIcon className={`w-4 h-4`} aria-hidden={true} />
+            <PlusCircleIcon className={`w-3 h-3 absolute left-[-3px] bottom-[-4px] border-1 bg-[var(--vscode-editor-background)] rounded-full`} aria-hidden={true} />
+          </div>
           <span className="sr-only">{l10n.t(LocalizationKey.commonEdit)}</span>
         </LinkButton>
 
diff --git a/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx b/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx
index 5360342a..35108658 100644
--- a/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx
+++ b/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx
@@ -174,7 +174,7 @@ export const TaxonomyManager: React.FunctionComponent<ITaxonomyManagerProps> = (
             <tr>
               <th
                 scope="col"
-                className={`px-6 py-3 text-left text-xs font-medium uppercase text-[var(--frontmatter-secondary-text)]'`}
+                className={`px-6 py-3 text-left text-xs font-medium uppercase text-[var(--frontmatter-secondary-text)]`}
               >
                 {l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyManagerTableHeadingName)}
               </th>
diff --git a/src/dashboardWebView/components/TaxonomyView/TaxonomyTagging.tsx b/src/dashboardWebView/components/TaxonomyView/TaxonomyTagging.tsx
index 7fff6ee1..92cf5001 100644
--- a/src/dashboardWebView/components/TaxonomyView/TaxonomyTagging.tsx
+++ b/src/dashboardWebView/components/TaxonomyView/TaxonomyTagging.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Page, PageMappings, SortingOption } from '../../models';
 import { useRecoilValue } from 'recoil';
-import { SettingsSelector, SortingAtom } from '../../state';
+import { SettingsSelector } from '../../state';
 import { getTaxonomyField } from '../../../helpers/getTaxonomyField';
 import { Sorting } from '../../../helpers/Sorting';
-import { ArrowLeftIcon } from '@heroicons/react/24/outline';
+import { ArrowLeftIcon, EyeIcon } from '@heroicons/react/24/outline';
 import { Button } from '../Common/Button';
 import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
 import { FilterInput } from './FilterInput';
@@ -12,9 +12,10 @@ import { useDebounce } from '../../../hooks/useDebounce';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { sortPages } from '../../../utils/sortPages';
-import { messageHandler } from '@estruyf/vscode/dist/client';
+import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { ExtensionState } from '../../../constants';
+import { LinkButton } from '../Common/LinkButton';
 
 export interface ITaxonomyTaggingProps {
   taxonomy: string | null;
@@ -123,6 +124,10 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
     return (!untaggedPages.find((p: Page) => p.fmFilePath === page.fmFilePath) && !pageMappings.untagged.find((p: Page) => p.fmFilePath === page.fmFilePath)) || pageMappings.tagged.find((p: Page) => p.fmFilePath === page.fmFilePath);
   }, [untaggedPages, pageMappings.tagged]);
 
+  const onFileView = (filePath: string) => {
+    Messenger.send(DashboardMessage.openFile, filePath);
+  }
+
   React.useEffect(() => {
     messageHandler.request<{ key: string; value: SortingOption; }>(DashboardMessage.getState, {
       key: ExtensionState.Dashboard.Contents.Sorting
@@ -173,12 +178,18 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
               >
                 {l10n.t(LocalizationKey.commonTitle)}
               </th>
+              <th
+                scope="col"
+                className={``}
+              >
+
+              </th>
             </tr>
           </thead>
           <tbody className={`divide-y divide-[var(--frontmatter-border)]`}>
             {untaggedPages && sortedPages && sortedPages.map((page) => (
-              <tr key={page.fmFilePath} className='py-2'>
-                <td className={`pl-6 w-[25px]`}>
+              <tr key={page.fmFilePath}>
+                <td className={`pl-6 py-2 w-[25px]`}>
                   <VSCodeCheckbox
                     title={l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyTaggingCheckbox, value)}
                     onClick={() => onCheckboxClick(page)}
@@ -188,14 +199,24 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
                     </span>
                   </VSCodeCheckbox>
                 </td>
-                <td className={`pr-6 whitespace-nowrap text-sm font-medium text-[var(--frontmatter-text)]`}>
+                <td className={`py-2 text-sm font-medium text-[var(--frontmatter-text)]`}>
                   <button
                     title={l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyTaggingCheckbox, value)}
-                    className='hover:text-[var(--vscode-textLink-activeForeground)]'
+                    className='hover:text-[var(--vscode-textLink-activeForeground)] text-left'
                     onClick={() => onCheckboxClick(page)}>
                     {page.title}
                   </button>
                 </td>
+                <td className={`py-2 pr-6`}>
+                  <LinkButton
+                    title={l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)}
+                    onClick={() => onFileView(page.fmFilePath)}>
+                    <EyeIcon className={`w-4 h-4`} aria-hidden={true} />
+                    <span className='sr-only'>
+                      {l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)}
+                    </span>
+                  </LinkButton>
+                </td>
               </tr>
             ))}
           </tbody>