Localization updates

src/dashboardWebView/components/Header/Breadcrumb.tsx

@@ -6,11 +6,13 @@ import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
 import { parseWinPath } from '../../../helpers/parseWinPath';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SearchAtom, SelectedMediaFolderAtom, SettingsAtom } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
-export interface IBreadcrumbProps {}
+export interface IBreadcrumbProps { }
 
 export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
-  props: React.PropsWithChildren<IBreadcrumbProps>
+  _: React.PropsWithChildren<IBreadcrumbProps>
 ) => {
   const [selectedFolder, setSelectedFolder] = useRecoilState(SelectedMediaFolderAtom);
   const [, setSearchValue] = useRecoilState(SearchAtom);
@@ -90,7 +92,7 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
             )}
           >
             <CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
-            <span className="sr-only">Home</span>
+            <span className="sr-only">{l10n.t(LocalizationKey.dashboardHeaderBreadcrumbHome)}</span>
           </button>
         </div>
       </li>
@@ -99,12 +101,11 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
         <li key={folder} className="flex">
           <div className="flex items-center">
             <svg
-              className={`flex-shrink-0 h-5 w-5 ${
-                getColors(
-                  `text-gray-300 dark:text-whisper-900`,
-                  `text-[var(--vscode-tab-inactiveForeground)]`
-                )
-              }`}
+              className={`flex-shrink-0 h-5 w-5 ${getColors(
+                `text-gray-300 dark:text-whisper-900`,
+                `text-[var(--vscode-tab-inactiveForeground)]`
+              )
+                }`}
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
               viewBox="0 0 20 20"
@@ -115,12 +116,11 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
 
             <button
               onClick={() => updateFolder(folder)}
-              className={`ml-4 text-sm font-medium ${
-                getColors(
-                  `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
-                  `text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
-                )
-              }`}
+              className={`ml-4 text-sm font-medium ${getColors(
+                `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
+                `text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
+              )
+                }`}
             >
               {basename(folder)}
             </button>

src/dashboardWebView/components/Header/ClearFilters.tsx

@@ -17,16 +17,18 @@ import {
 import { DefaultValue } from 'recoil';
 import { useEffect } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import { l10n } from 'vscode';
+import { LocalizationKey } from '../../../localization';
 
 export const guardRecoilDefaultValue = (candidate: any): candidate is DefaultValue => {
   if (candidate instanceof DefaultValue) return true;
   return false;
 };
 
-export interface IClearFiltersProps {}
+export interface IClearFiltersProps { }
 
 export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
-  props: React.PropsWithChildren<IClearFiltersProps>
+  _: React.PropsWithChildren<IClearFiltersProps>
 ) => {
   const [show, setShow] = React.useState(false);
   const { getColors } = useThemeColors();
@@ -64,18 +66,16 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
 
   return (
     <button
-      className={`flex items-center ${
-        getColors(
-          'hover:text-teal-600',
-          'hover:text-[var(--vscode-textLink-activeForeground)]'
-        )
-      }`}
+      className={`flex items-center ${getColors(
+        'hover:text-teal-600',
+        'hover:text-[var(--vscode-textLink-activeForeground)]'
+      )
+        }`}
       onClick={reset}
-      title={`Clear filters, grouping, and sorting`}
+      title={l10n.t(LocalizationKey.dashboardHeaderClearFiltersTitle)}
     >
       <XCircleIcon className={`inline-block w-5 h-5 mr-1`} />
-      <span>Clear</span>
-      <span className={`sr-only`}> filters and grouping</span>
+      <span>{l10n.t(LocalizationKey.commonClear)}</span>
     </button>
   );
 };

src/dashboardWebView/components/Header/Filter.tsx

@@ -2,6 +2,8 @@ import { Menu } from '@headlessui/react';
 import { FilterIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IFilterProps {
   label: string;
@@ -10,7 +12,7 @@ export interface IFilterProps {
   onClick: (item: string | null) => void;
 }
 
-const DEFAULT_VALUE = 'No filter';
+const DEFAULT_VALUE = l10n.t(LocalizationKey.dashboardHeaderFilterDefault);
 
 export const Filter: React.FunctionComponent<IFilterProps> = ({
   label,

src/dashboardWebView/components/Header/FilterInput.tsx

@@ -1,6 +1,8 @@
 import { SearchIcon, XCircleIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IFilterInputProps {
   placeholder: string;
@@ -20,12 +22,12 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
   onChange
 }: React.PropsWithChildren<IFilterInputProps>) => {
   const { getColors } = useThemeColors();
-  
+
   return (
     <div className="flex space-x-4 flex-1">
       <div className="min-w-0">
         <label htmlFor="search" className="sr-only">
-          Search
+          {l10n.t(LocalizationKey.commonSearch)}
         </label>
         <div className="relative flex justify-center">
           <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -35,13 +37,12 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
           <input
             type="text"
             name="search"
-            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${
-              getColors(
-                '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',
-                'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
-              )
-            }`}
-            placeholder={placeholder || 'Search'}
+            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${getColors(
+              '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',
+              'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+            )
+              }`}
+            placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
             value={value}
             autoFocus={autoFocus}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.value)}

src/dashboardWebView/components/Header/Folders.tsx

@@ -3,14 +3,16 @@ import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { FolderAtom, SettingsSelector } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
-export interface IFoldersProps {}
+export interface IFoldersProps { }
 
-const DEFAULT_TYPE = 'All types';
+const DEFAULT_TYPE = l10n.t(LocalizationKey.dashboardHeaderFoldersDefault);
 
 export const Folders: React.FunctionComponent<
   IFoldersProps
-> = ({}: React.PropsWithChildren<IFoldersProps>) => {
+> = ({ }: React.PropsWithChildren<IFoldersProps>) => {
   const [crntFolder, setCrntFolder] = useRecoilState(FolderAtom);
   const settings = useRecoilValue(SettingsSelector);
   const contentFolders = settings?.contentFolders || [];
@@ -22,7 +24,7 @@ export const Folders: React.FunctionComponent<
   return (
     <div className="flex items-center">
       <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={`Showing`} title={crntFolder || DEFAULT_TYPE} />
+        <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderFoldersMenuButtonShowing)} title={crntFolder || DEFAULT_TYPE} />
 
         <MenuItems disablePopper>
           <MenuItem

src/dashboardWebView/components/Header/Grouping.tsx

@@ -4,18 +4,20 @@ import { useRecoilState } from 'recoil';
 import { GroupOption } from '../../constants/GroupOption';
 import { GroupingAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
-export interface IGroupingProps {}
+export interface IGroupingProps { }
 
 export const GROUP_OPTIONS = [
-  { name: 'None', id: GroupOption.none },
-  { name: 'Year', id: GroupOption.Year },
-  { name: 'Draft/Published', id: GroupOption.Draft }
+  { name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionNone), id: GroupOption.none },
+  { name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionYear), id: GroupOption.Year },
+  { name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionDraft), id: GroupOption.Draft }
 ];
 
 export const Grouping: React.FunctionComponent<
   IGroupingProps
-> = ({}: React.PropsWithChildren<IGroupingProps>) => {
+> = ({ }: React.PropsWithChildren<IGroupingProps>) => {
   const [group, setGroup] = useRecoilState(GroupingAtom);
 
   const crntGroup = GROUP_OPTIONS.find((x) => x.id === group);
@@ -23,7 +25,7 @@ export const Grouping: React.FunctionComponent<
   return (
     <div className="flex items-center">
       <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={`Group by`} title={crntGroup?.name || ''} />
+        <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderGroupingMenuButtonLabel)} title={crntGroup?.name || ''} />
 
         <MenuItems disablePopper>
           {GROUP_OPTIONS.map((option) => (

src/dashboardWebView/components/Header/Header.tsx

@@ -99,7 +99,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
           title: (
             <div className="flex items-center">
               <PlusIcon className="w-4 h-4 mr-2" />
-              <span>Create by content type</span>
+              <span>{l10n.t(LocalizationKey.dashboardHeaderHeaderCreateByContentType)}</span>
             </div>
           ),
           onClick: createByContentType,
@@ -109,7 +109,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
           title: (
             <div className="flex items-center">
               <PlusIcon className="w-4 h-4 mr-2" />
-              <span>Create by template</span>
+              <span>{l10n.t(LocalizationKey.dashboardHeaderHeaderCreateByTemplate)}</span>
             </div>
           ),
           onClick: createByTemplate,
@@ -170,7 +170,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
               <SyncButton />
 
               <ChoiceButton
-                title={l10n.t(LocalizationKey.dashboardHeaderCreateContent)}
+                title={l10n.t(LocalizationKey.dashboardHeaderHeaderCreateContent)}
                 choices={choiceOptions}
                 onClick={createContent}
                 disabled={!settings?.initialized}

src/dashboardWebView/components/Header/Pagination.tsx

@@ -5,6 +5,8 @@ import usePagination from '../../hooks/usePagination';
 import useThemeColors from '../../hooks/useThemeColors';
 import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
 import { PaginationButton } from './PaginationButton';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IPaginationProps {
   totalPages?: number;
@@ -48,7 +50,7 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
   return (
     <div className="flex justify-between items-center sm:justify-end space-x-2 text-sm">
       <PaginationButton
-        title="First"
+        title={l10n.t(LocalizationKey.dashboardHeaderPaginationFirst)}
         disabled={page === 0}
         onClick={() => {
           if (page > 0) {
@@ -58,7 +60,7 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
       />
 
       <PaginationButton
-        title="Previous"
+        title={l10n.t(LocalizationKey.dashboardHeaderPaginationPrevious)}
         disabled={page === 0}
         onClick={() => {
           if (page > 0) {
@@ -74,27 +76,26 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
           onClick={() => {
             setPage(button);
           }}
-          className={`max-h-8 rounded ${
-            page === button
-              ? `px-2 ${getColors('bg-gray-200  text-vulcan-500', 'bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]')}`
-              : getColors(
-                `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
-                `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`
-              )
-          }`}
+          className={`max-h-8 rounded ${page === button
+            ? `px-2 ${getColors('bg-gray-200  text-vulcan-500', 'bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]')}`
+            : getColors(
+              `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
+              `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`
+            )
+            }`}
         >
           {button + 1}
         </button>
       ))}
 
       <PaginationButton
-        title="Next"
+        title={l10n.t(LocalizationKey.dashboardHeaderPaginationNext)}
         disabled={page >= totalPagesNr}
         onClick={() => setPage(page + 1)}
       />
 
       <PaginationButton
-        title="Last"
+        title={l10n.t(LocalizationKey.dashboardHeaderPaginationLast)}
         disabled={page >= totalPagesNr}
         onClick={() => setPage(totalPagesNr)}
       />

src/dashboardWebView/components/Header/PaginationStatus.tsx

@@ -4,6 +4,8 @@ import { useRecoilValue } from 'recoil';
 import usePagination from '../../hooks/usePagination';
 import useThemeColors from '../../hooks/useThemeColors';
 import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IPaginationStatusProps {
   totalPages?: number;
@@ -32,15 +34,18 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =
 
   return (
     <div className="hidden sm:flex">
-      <p className={`text-sm ${
-        getColors(
-          'text-gray-500 dark:text-whisper-900',
-          'text-[var(--vscode-tab-inactiveForeground)]'
-        )
-      }`}>
-        Showing <span className="font-medium">{page * pageSetNr + 1}</span> to{' '}
-        <span className="font-medium">{totelItemsOnPage}</span> of{' '}
-        <span className="font-medium">{totalItems}</span> results
+      <p className={`text-sm ${getColors(
+        'text-gray-500 dark:text-whisper-900',
+        'text-[var(--vscode-tab-inactiveForeground)]'
+      )
+        }`}>
+        {
+          l10n.t(LocalizationKey.dashboardHeaderPaginationStatusText,
+            (page * pageSetNr + 1),
+            totelItemsOnPage,
+            totalItems
+          )
+        }
       </p>
     </div>
   );

src/dashboardWebView/components/Header/ProjectSwitcher.tsx

@@ -6,6 +6,8 @@ import { useRecoilValue } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
 import { SettingsSelector } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IProjectSwitcherProps { }
 
@@ -36,7 +38,7 @@ export const ProjectSwitcher: React.FunctionComponent<IProjectSwitcherProps> = (
           label={(
             <div className="inline-flex items-center">
               <SwitchHorizontalIcon className="h-4 w-4 mr-2" />
-              <span>project</span>
+              <span>{l10n.t(LocalizationKey.dashboardHeaderProjectSwitcherLabel)}</span>
             </div>
           )}
           title={crntProject} />

src/dashboardWebView/components/Header/RefreshDashboardData.tsx

@@ -17,8 +17,10 @@ import {
   SortingAtom,
   TagAtom
 } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
-export interface IRefreshDashboardDataProps {}
+export interface IRefreshDashboardDataProps { }
 
 export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardDataProps> = (
   props: React.PropsWithChildren<IRefreshDashboardDataProps>
@@ -62,17 +64,16 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
 
   return (
     <button
-      className={`mr-2 ${
-        getColors(
-          'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500',
-          'text-[var(--vscode-foreground)] hover:text-[var(--vscode-textLink-foreground)]'
-        )
-      }`}
-      title="Refresh dashboard"
+      className={`mr-2 ${getColors(
+        'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500',
+        'text-[var(--vscode-foreground)] hover:text-[var(--vscode-textLink-foreground)]'
+      )
+        }`}
+      title={l10n.t(LocalizationKey.dashboardHeaderRefreshDashboardLabel)}
       onClick={refresh}
     >
       <RefreshIcon className={`h-5 w-5`} />
-      <span className="sr-only">Refresh dashboard</span>
+      <span className="sr-only">{l10n.t(LocalizationKey.dashboardHeaderRefreshDashboardLabel)}</span>
     </button>
   );
 };

src/dashboardWebView/components/Header/Searchbox.tsx

@@ -5,6 +5,8 @@ import { useDebounce } from '../../../hooks/useDebounce';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SearchAtom, SearchReadyAtom } from '../../state';
 import { RefreshDashboardData } from './RefreshDashboardData';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface ISearchboxProps {
   placeholder?: string;
@@ -42,7 +44,7 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
     <div className="flex space-x-4 flex-1">
       <div className="min-w-0">
         <label htmlFor="search" className="sr-only">
-          Search
+          {l10n.t(LocalizationKey.commonSearch)}
         </label>
         <div className="relative flex justify-center">
           <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -52,13 +54,12 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
           <input
             type="text"
             name="search"
-            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${
-              getColors(
-                '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',
-                'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
-              )
-            }`}
-            placeholder={placeholder || 'Search'}
+            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${getColors(
+              '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',
+              'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+            )
+              }`}
+            placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
             value={value}
             onChange={handleChange}
             disabled={!searchReady}

src/dashboardWebView/components/Header/Sorting.tsx

@@ -11,6 +11,8 @@ import { SortingOption } from '../../models/SortingOption';
 import { SearchSelector, SettingsSelector, SortingAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 import { Sorting as SortingHelpers } from '../../../helpers/Sorting';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface ISortingProps {
   disableCustomSorting?: boolean;
@@ -19,25 +21,25 @@ export interface ISortingProps {
 
 export const sortOptions: SortingOption[] = [
   {
-    name: 'Last modified (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingLastModifiedAsc),
     id: SortOption.LastModifiedAsc,
     order: SortOrder.asc,
     type: SortType.date
   },
   {
-    name: 'Last modified (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingLastModifiedDesc),
     id: SortOption.LastModifiedDesc,
     order: SortOrder.desc,
     type: SortType.date
   },
   {
-    name: 'By filename (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingFilenameAsc),
     id: SortOption.FileNameAsc,
     order: SortOrder.asc,
     type: SortType.string
   },
   {
-    name: 'By filename (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingFilenameDesc),
     id: SortOption.FileNameDesc,
     order: SortOrder.desc,
     type: SortType.string
@@ -46,13 +48,13 @@ export const sortOptions: SortingOption[] = [
 
 const contentSortOptions: SortingOption[] = [
   {
-    name: 'Published (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingPublishedAsc),
     id: SortOption.PublishedAsc,
     order: SortOrder.asc,
     type: SortType.date
   },
   {
-    name: 'Published (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingPublishedDesc),
     id: SortOption.PublishedDesc,
     order: SortOrder.desc,
     type: SortType.date
@@ -61,37 +63,37 @@ const contentSortOptions: SortingOption[] = [
 
 const mediaSortOptions: SortingOption[] = [
   {
-    name: 'Size (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingSizeAsc),
     id: SortOption.SizeAsc,
     order: SortOrder.asc,
     type: SortType.number
   },
   {
-    name: 'Size (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingSizeDesc),
     id: SortOption.SizeDesc,
     order: SortOrder.desc,
     type: SortType.number
   },
   {
-    name: 'Caption (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingCaptionAsc),
     id: SortOption.CaptionAsc,
     order: SortOrder.asc,
     type: SortType.string
   },
   {
-    name: 'Caption (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingCaptionDesc),
     id: SortOption.CaptionDesc,
     order: SortOrder.desc,
     type: SortType.string
   },
   {
-    name: 'Alt (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingAltAsc),
     id: SortOption.AltAsc,
     order: SortOrder.asc,
     type: SortType.string
   },
   {
-    name: 'Alt (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingAltDesc),
     id: SortOption.AltDesc,
     order: SortOrder.desc,
     type: SortType.string
@@ -108,11 +110,10 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
 
   const updateSorting = (value: SortingOption) => {
     Messenger.send(DashboardMessage.setState, {
-      key: `${
-        view === NavigationType.Contents
-          ? ExtensionState.Dashboard.Contents.Sorting
-          : ExtensionState.Dashboard.Media.Sorting
-      }`,
+      key: `${view === NavigationType.Contents
+        ? ExtensionState.Dashboard.Contents.Sorting
+        : ExtensionState.Dashboard.Media.Sorting
+        }`,
       value: value
     });
 
@@ -170,7 +171,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
     <div className="flex items-center">
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton
-          label={`Sort by`}
+          label={l10n.t(LocalizationKey.dashboardHeaderSortingLabel)}
           title={crntSort?.title || crntSort?.name || ''}
           disabled={!!searchValue}
         />

src/dashboardWebView/components/Header/SyncButton.tsx

@@ -7,11 +7,13 @@ import { useRecoilValue } from 'recoil';
 import { GeneralCommands } from '../../../constants';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SettingsSelector } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface ISyncButtonProps { }
 
 export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
-  props: React.PropsWithChildren<ISyncButtonProps>
+  _: React.PropsWithChildren<ISyncButtonProps>
 ) => {
   const settings = useRecoilValue(SettingsSelector);
   const [isSyncing, setIsSyncing] = useState(false);
@@ -22,7 +24,7 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
   };
 
   const messageListener = (message: MessageEvent<EventData<any>>) => {
-    const { command, payload } = message.data;
+    const { command } = message.data;
 
     if (command === GeneralCommands.toWebview.gitSyncingStart) {
       setIsSyncing(true);
@@ -59,7 +61,7 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
           className={`w-4 h-4 mr-2 ${isSyncing ? 'animate-reverse-spin' : ''}`}
           aria-hidden="true"
         />
-        <span>Sync</span>
+        <span>{l10n.t(LocalizationKey.dashboardHeaderSyncButtonLabel)}</span>
       </button>
     </div>
   );

src/dashboardWebView/components/Header/Tabs.tsx

@@ -7,6 +7,8 @@ import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIco
 import { NavigationType } from '../../models';
 import { ModeAtom } from '../../state';
 import { Tab } from './Tab';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface ITabsProps {
   onNavigate: (navigationType: NavigationType) => void;
@@ -26,20 +28,20 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
       <li className="mr-2" role="presentation">
         <Tab navigationType={NavigationType.Contents} onNavigate={onNavigate}>
           <MarkdownIcon className={`h-6 w-auto mr-2`} />
-          <span>Contents</span>
+          <span>{l10n.t(LocalizationKey.dashboardHeaderTabsContents)}</span>
         </Tab>
       </li>
       <li className="mr-2" role="presentation">
         <Tab navigationType={NavigationType.Media} onNavigate={onNavigate}>
           <PhotographIcon className={`h-6 w-auto mr-2`} />
-          <span>Media</span>
+          <span>{l10n.t(LocalizationKey.dashboardHeaderTabsMedia)}</span>
         </Tab>
       </li>
       <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.view}>
         <li className="mr-2" role="presentation">
           <Tab navigationType={NavigationType.Snippets} onNavigate={onNavigate}>
             <ScissorsIcon className={`h-6 w-auto mr-2`} />
-            <span>Snippets</span>
+            <span>{l10n.t(LocalizationKey.dashboardHeaderTabsSnippets)}</span>
           </Tab>
         </li>
       </FeatureFlag>
@@ -47,7 +49,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
         <li className="mr-2" role="presentation">
           <Tab navigationType={NavigationType.Data} onNavigate={onNavigate}>
             <DatabaseIcon className={`h-6 w-auto mr-2`} />
-            <span>Data</span>
+            <span>{l10n.t(LocalizationKey.dashboardHeaderTabsData)}</span>
           </Tab>
         </li>
       </FeatureFlag>
@@ -55,7 +57,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
         <li className="mr-2" role="presentation">
           <Tab navigationType={NavigationType.Taxonomy} onNavigate={onNavigate}>
             <TagIcon className={`h-6 w-auto mr-2`} />
-            <span>Taxonomies</span>
+            <span>{l10n.t(LocalizationKey.dashboardHeaderTabsTaxonomies)}</span>
           </Tab>
         </li>
       </FeatureFlag>