#301 - Visualize tags on content cards

src/dashboardWebView/components/Contents/Item.tsx

@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Page } from '../../models/Page';
-import { ViewSelector } from '../../state';
+import { SettingsSelector, ViewSelector } from '../../state';
 import { DateField } from '../DateField';
 import { Status } from '../Status';
 import { Messenger } from '@estruyf/vscode/dist/client';
@@ -15,11 +15,21 @@ const PREVIEW_IMAGE_FIELD = 'fmPreviewImage';
 
 export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, title, draft, description, type, ...pageData }: React.PropsWithChildren<IItemProps>) => {
   const view = useRecoilValue(ViewSelector);
+  const settings = useRecoilValue(SettingsSelector);
   
   const openFile = () => {
     Messenger.send(DashboardMessage.openFile, fmFilePath);
   };
 
+  const tags: string[] | undefined = React.useMemo(() => {
+    if (!settings?.dashboardState?.contents?.tags) {
+      return undefined;
+    }
+
+    const tagField = settings.dashboardState.contents.tags;
+    return pageData[tagField] || [];
+  }, [settings, pageData]);
+
   if (view === DashboardViewType.Grid) {
     return (
       <li className="relative">
@@ -47,6 +57,22 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
             <h2 className="mt-2 mb-2 font-bold">{title}</h2>
 
             <p className="text-xs text-vulcan-200 dark:text-whisper-800">{description}</p>
+
+            {
+              tags && tags.length > 0 && (
+                <div className="mt-2">
+                  {
+                    tags.map((tag, index) => (
+                      <span 
+                        key={index} 
+                        className="inline-block mr-1 mt-1 text-[#5D561D] dark:text-[#F0ECD0] text-xs">
+                        #{tag}
+                      </span>
+                    ))
+                  }
+                </div>
+              )
+            }
           </div>
         </button>
       </li>

src/dashboardWebView/models/Settings.ts

@@ -34,15 +34,16 @@ export interface Settings {
 }
 
 export interface DashboardState {
-  contents: ViewState;
+  contents: ContentsViewState;
   media: MediaViewState;
 }
 
-export interface ViewState {
+export interface ContentsViewState {
   sorting: SortingOption | null | undefined;
   defaultSorting: string | null | undefined;
+  tags: string | null | undefined;
 }
 
-export interface MediaViewState extends ViewState {
+export interface MediaViewState extends ContentsViewState {
   selectedFolder: string | null | undefined;
 }