Small refactoring

src/dashboardWebView/DashboardMessage.ts

@@ -75,7 +75,6 @@ export enum DashboardMessage {
   getState = 'getState',
   runCustomScript = 'runCustomScript',
   sendTelemetry = 'sendTelemetry',
-  logError = 'logError',
   showNotification = 'showNotification',
 
   // Settings

src/dashboardWebView/components/App.tsx

@@ -9,7 +9,7 @@ import { Contents } from './Contents/Contents';
 import { Media } from './Media/Media';
 import { DataView } from './DataView';
 import { Snippets } from './SnippetsView/Snippets';
-import { FEATURE_FLAG } from '../../constants';
+import { FEATURE_FLAG, GeneralCommands } from '../../constants';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { TaxonomyView } from './TaxonomyView';
 import { Route, Routes, useNavigate } from 'react-router-dom';
@@ -18,7 +18,6 @@ import { useEffect, useMemo, useState } from 'react';
 import { UnknownView } from './UnknownView';
 import { ErrorBoundary } from '@sentry/react';
 import { ErrorView } from './ErrorView';
-import { DashboardMessage } from '../DashboardMessage';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../localization';
 import { SettingsView } from './SettingsView/SettingsView';
@@ -100,7 +99,7 @@ export const App: React.FunctionComponent<IAppProps> = ({
       fallback={<ErrorView />}
       onError={(error: Error, componentStack: string, eventId: string) => {
         Messenger.send(
-          DashboardMessage.logError,
+          GeneralCommands.toVSCode.logging.error,
           `Event ID: ${eventId}
 Message: ${error.message}
 

src/dashboardWebView/components/Header/Header.tsx

@@ -32,6 +32,7 @@ import { Link } from '../Common/Link';
 import { SPONSOR_LINK } from '../../../constants';
 import { Filters } from './Filters';
 import { ActionsBar } from './ActionsBar';
+import { RefreshDashboardData } from './RefreshDashboardData';
 
 export interface IHeaderProps {
   header?: React.ReactNode;
@@ -163,13 +164,15 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
       {location.pathname === routePaths.contents && (
         <>
           <div className={`px-4 mt-2 mb-2 flex items-center justify-between`}>
-            <div className={`flex items-center justify-start space-x-4 flex-1`}>
+            <div className={`flex items-center justify-start space-x-2 flex-1`}>
               <ChoiceButton
                 title={l10n.t(LocalizationKey.dashboardHeaderHeaderCreateContent)}
                 choices={choiceOptions}
                 onClick={createContent}
                 disabled={!settings?.initialized}
               />
+
+              <RefreshDashboardData />
             </div>
 
             <Searchbox />

src/dashboardWebView/components/Header/Navigation.tsx

@@ -63,7 +63,7 @@ export const Navigation: React.FunctionComponent<INavigationProps> = ({
   }, [settings?.draftField?.type, tabInfo]);
 
   return (
-    <nav className="flex-1 -mb-px flex space-x-6 xl:space-x-8" aria-label="Tabs">
+    <nav className="flex-1 -mb-px flex space-x-2 xl:space-x-4" aria-label="Tabs">
       {settings?.draftField?.type === 'boolean' ? (
         tabs.map((tab) => (
           <NavigationItem

src/dashboardWebView/components/Header/RefreshDashboardData.tsx

@@ -1,5 +1,4 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { useCallback } from 'react';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
@@ -18,6 +17,7 @@ import {
 } from '../../state';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { ArrowClockwiseIcon } from '../../../components/icons/ArrowClockwiseIcon';
 
 export interface IRefreshDashboardDataProps { }
 
@@ -66,7 +66,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
       title={l10n.t(LocalizationKey.dashboardHeaderRefreshDashboardLabel)}
       onClick={refresh}
     >
-      <ArrowPathIcon className={`h-5 w-5`} />
+      <ArrowClockwiseIcon className={`h-5 w-5`} />
       <span className="sr-only">{l10n.t(LocalizationKey.dashboardHeaderRefreshDashboardLabel)}</span>
     </button>
   );

src/dashboardWebView/components/Header/Searchbox.tsx

@@ -1,9 +1,8 @@
-import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/solid';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useDebounce } from '../../../hooks/useDebounce';
 import { SearchAtom, SearchReadyAtom } from '../../state';
-import { RefreshDashboardData } from './RefreshDashboardData';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { TextField } from '../Common/TextField';
@@ -58,8 +57,6 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
           onReset={reset}
         />
       </div>
-
-      <RefreshDashboardData />
     </div>
   );
 };

src/dashboardWebView/components/Header/Tab.tsx

@@ -15,8 +15,6 @@ export const Tab: React.FunctionComponent<ITabProps> = ({
 }: React.PropsWithChildren<ITabProps>) => {
   const location = useLocation();
 
-  console.log(location.pathname, navigationType);
-
   return (
     <button
       className={cn(`h-full flex items-center py-2 px-1 text-sm font-medium text-center border-b-2 border-transparent hover:border-[var(--vscode-tab-activeForeground)] hover:text-[var(--vscode-tab-activeForeground)] ${location.pathname === `/${navigationType}`

src/dashboardWebView/components/Header/Tabs.tsx

@@ -27,20 +27,20 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
     >
       <li role="presentation">
         <Tab navigationType={NavigationType.Contents} onNavigate={onNavigate}>
-          <PageIcon className={`h-4 w-auto mr-2`} />
+          <PageIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
           <span>{l10n.t(LocalizationKey.dashboardHeaderTabsContents)}</span>
         </Tab>
       </li>
       <li role="presentation">
         <Tab navigationType={NavigationType.Media} onNavigate={onNavigate}>
-          <PhotoIcon className={`h-4 w-auto mr-2`} />
+          <PhotoIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
           <span>{l10n.t(LocalizationKey.dashboardHeaderTabsMedia)}</span>
         </Tab>
       </li>
       <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.view}>
         <li role="presentation">
           <Tab navigationType={NavigationType.Snippets} onNavigate={onNavigate}>
-            <ScissorsIcon className={`h-4 w-auto mr-2`} />
+            <ScissorsIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
             <span>{l10n.t(LocalizationKey.dashboardHeaderTabsSnippets)}</span>
           </Tab>
         </li>
@@ -48,7 +48,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
       <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.data.view}>
         <li role="presentation">
           <Tab navigationType={NavigationType.Data} onNavigate={onNavigate}>
-            <CircleStackIcon className={`h-4 w-auto mr-2`} />
+            <CircleStackIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
             <span>{l10n.t(LocalizationKey.dashboardHeaderTabsData)}</span>
           </Tab>
         </li>
@@ -56,7 +56,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
       <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.taxonomy.view}>
         <li role="presentation">
           <Tab navigationType={NavigationType.Taxonomy} onNavigate={onNavigate}>
-            <TagIcon className={`h-4 w-auto mr-2`} />
+            <TagIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
             <span>{l10n.t(LocalizationKey.dashboardHeaderTabsTaxonomies)}</span>
           </Tab>
         </li>

src/dashboardWebView/components/Media/FolderCreation.tsx

@@ -18,6 +18,7 @@ import { parseWinPath } from '../../../helpers/parseWinPath';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import useMediaFolder from '../../hooks/useMediaFolder';
+import { RefreshDashboardData } from '../Header/RefreshDashboardData';
 
 export interface IFolderCreationProps { }
 
@@ -107,7 +108,7 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
   }
 
   return (
-    <div className="flex flex-1 justify-start">
+    <div className="flex flex-1 justify-start space-x-2">
       {renderPostAssetsButton}
       <button
         className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none rounded text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
@@ -117,6 +118,8 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
         <FolderPlusIcon className={`mr-2 h-6 w-6`} />
         <span className={``}>{l10n.t(LocalizationKey.dashboardMediaFolderCreationFolderCreate)}</span>
       </button>
+
+      <RefreshDashboardData />
     </div>
   );
 };

src/dashboardWebView/components/SnippetsView/SnippetForm.tsx

@@ -8,6 +8,7 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { SettingsAtom, ViewDataSelector } from '../../state';
 import { SnippetInputField } from './SnippetInputField';
 import { SNIPPET } from '../../../constants/Snippet';
+import { GeneralCommands } from '../../../constants';
 
 export interface ISnippetFormProps {
   snippetKey?: string;
@@ -144,22 +145,17 @@ ${snippetBody}
     const allFields: SnippetField[] = [];
     const snippetFields = snippet.fields || [];
 
-    // Loop over all fields to check if they are present in the snippet
-    console.log('placeholders', placeholders);
-    console.log('snippetFields', snippetFields);
-
     for await (const field of snippetFields) {
-      console.log('field', field);
       const idx = placeholders.findIndex((fieldName) => fieldName === field.name);
       if (idx > -1) {
         try {
           const value = await insertPlaceholderValues(field.default || '');
-          console.log('value', value);
           allFields.push({
             ...field,
             value
           });
         } catch (e) {
+          messageHandler.send(GeneralCommands.toVSCode.logging.error, `SnippetForm: ${(e as Error).message}`);
           console.log('Error', (e as Error).message)
         }
       }