From c35dace7c7728d9012b41da1a731642fce445543 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 17 Jul 2023 01:47:15 +0200
Subject: [PATCH] Localization updates

---
 l10n/bundle.l10n.json                         | 138 +++++++++++++++++-
 .../uniforms-frontmatter/LabelField.tsx       |   4 +-
 .../uniforms-frontmatter/UnknownField.tsx     |   4 +-
 .../components/Chatbot/Answer.tsx             |   8 +-
 .../components/Chatbot/Chatbot.tsx            |   4 +-
 .../components/Chatbot/Chatbox.tsx            |   4 +-
 .../components/Chatbot/Header.tsx             |   6 +-
 .../components/Common/ChoiceButton.tsx        |   4 +-
 .../components/Contents/ContentActions.tsx    |  20 +--
 .../components/Contents/Item.tsx              |   8 +-
 .../components/Contents/List.tsx              |   8 +-
 .../components/Contents/Overview.tsx          |  16 +-
 .../components/Contents/Status.tsx            |   4 +-
 .../components/DataView/DataForm.tsx          |  12 +-
 .../components/DataView/DataFormControls.tsx  |   4 +-
 .../components/DataView/DataView.tsx          |  22 +--
 .../components/DataView/EmptyView.tsx         |   6 +-
 .../components/DataView/SortableItem.tsx      |  20 +--
 .../components/ErrorView/index.tsx            |  12 +-
 .../components/Header/Breadcrumb.tsx          |  30 ++--
 .../components/Header/ClearFilters.tsx        |  22 +--
 .../components/Header/Filter.tsx              |   4 +-
 .../components/Header/FilterInput.tsx         |  19 +--
 .../components/Header/Folders.tsx             |  10 +-
 .../components/Header/Grouping.tsx            |  14 +-
 .../components/Header/Header.tsx              |   6 +-
 .../components/Header/Pagination.tsx          |  25 ++--
 .../components/Header/PaginationStatus.tsx    |  23 +--
 .../components/Header/ProjectSwitcher.tsx     |   4 +-
 .../Header/RefreshDashboardData.tsx           |  19 +--
 .../components/Header/Searchbox.tsx           |  17 ++-
 .../components/Header/Sorting.tsx             |  37 ++---
 .../components/Header/SyncButton.tsx          |   8 +-
 .../components/Header/Tabs.tsx                |  12 +-
 .../components/Layout/SponsorMsg.tsx          |  12 +-
 .../components/Media/DetailsSlideOver.tsx     |  44 +++---
 .../components/Media/FolderCreation.tsx       |   6 +-
 src/localization/localization.enum.ts         | 105 ++++++++++++-
 src/services/PagesParser.ts                   |   8 +-
 39 files changed, 517 insertions(+), 212 deletions(-)

diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json
index 05c765eb..61696726 100644
--- a/l10n/bundle.l10n.json
+++ b/l10n/bundle.l10n.json
@@ -1,7 +1,143 @@
 {
-  "dashboard.header.createContent": "Create content",
+  "common.edit": "Edit",
+  "common.delete": "Delete",
+  "common.cancel": "Cancel",
+  "common.clear": "Clear",
+  "common.search": "Search",
+  "common.save": "Save",
+  "common.error.message": "Sorry, something went wrong.",
+
+  "field.required": "Required field",
+  "field.unknown": "Unknown field",
+
+  "dashboard.chatbot.answer.answer": "Answer",
+  "dashboard.chatbot.answer.resources": "Resources",
+  "dashboard.chatbot.answer.warning": "Warning: Anwers might be wrong. In case of doubt, please consult the docs.",
+
+  "dashboard.chatbot.chatbot.loading": "Assistent is getting ready",
+  "dashboard.chatbot.chatbot.ready": "I'm ready, what do you want to know?",
+
+  "dashboard.chatbot.chatbox.placeholder": "How can I configure Front Matter?",
+
+  "dashboard.chatbot.header.heading": "Ask Front Matter AI",
+  "dashboard.chatbot.header.description": "Our AI, powered by mendable.ai, has processed the documentation and can assist you with any queries regarding Front Matter. Go ahead and ask away!",
+
+  "dashboard.common.choiceButton.open": "Open options",
+
+  "dashboard.contents.contentActions.actionMenuButton.title": "Menu",
+  "dashboard.contents.contentActions.menuItem.view": "View",
+  "dashboard.contents.contentActions.alert.title": "Delete: {0}",
+  "dashboard.contents.contentActions.alert.description": "Are you sure you want to delete the \"{0}\" content?",
+
+  "dashboard.contents.item.invalidTitle": "<invalid title>",
+  "dashboard.contents.item.invalidDescription": "<invalid description>",
+
+  "dashboard.contents.list.title": "Title",
+  "dashboard.contents.list.date": "Date",
+  "dashboard.contents.list.status": "Status",
+
+  "dashboard.contents.overview.noMarkdown": "No Markdown to show",
+  "dashboard.contents.overview.noFolders": "Make sure you registered a content folder in your project to let Front Matter find the contents.",
+
+  "dashboard.contents.status.draft": "Draft",
+  "dashboard.contents.status.published": "Published",
+
+  "dashboard.dataView.dataForm.modify": "Modify the data",
+  "dashboard.dataView.dataForm.add": "Add new data",
+
+  "dashboard.dataView.dataView.select": "Select your data type",
+  "dashboard.dataView.dataView.title": "Your {0} data items",
+  "dashboard.dataView.dataView.add": "Add a new entry",
+  "dashboard.dataView.dataView.empty": "No {0} data entries found",
+  "dashboard.dataView.dataView.createOrModify": "Create or modify your {0} data",
+  "dashboard.dataView.dataView.getStarted": "Select a data type to get started",
+  "dashboard.dataView.dataView.noDataFiles": "No data files found",
+  "dashboard.dataView.dataView.getStarted.link": "Read more to get started using data files",
+
+  "dashboard.dataView.emptyView.heading": "Select your date type first",
+
+  "dashboard.dataView.sortableItem.editButton.title": "Edit \"{0}\"",
+  "dashboard.dataView.sortableItem.deleteButton.title": "Delete \"{0}\"",
+  "dashboard.dataView.sortableItem.alert.title": "Delete data entry",
+  "dashboard.dataView.sortableItem.alert.description": "Are you sure you want to delete the data entry?",
+
+  "dashboard.errorView.description": "Please close the dashboard and try again.",
+
+  "dashboard.header.breadcrumb.home": "Home",
+
+  "dashboard.header.clearFilters.title": "Clear filters, grouping, and sorting",
+
+  "dashboard.header.filter.default": "No filter",
+
+  "dashboard.header.folders.default": "All types",
+  "dashboard.header.folders.menuButton.showing": "Showing",
+
+  "dashboard.header.grouping.option.none": "None",
+  "dashboard.header.grouping.option.year": "Year",
+  "dashboard.header.grouping.option.draft": "Draft/Published",
+  "dashboard.header.grouping.menuButton.label": "Group by",
+
+  "dashboard.header.header.createContent": "Create content",
+  "dashboard.header.header.createByContentType": "Create by content type",
+  "dashboard.header.header.createByTemplate": "Create by template",
+
+  "dashboard.header.pagination.first": "First",
+  "dashboard.header.pagination.previous": "Previous",
+  "dashboard.header.pagination.next": "next",
+  "dashboard.header.pagination.last": "Last",
+
+  "dashboard.header.paginationStatus.text": "Showing {0} to {1} of {2} results",
+
+  "dashboard.header.projectSwitcher.label": "project",
+
+  "dashboard.header.refreshDashboard.label": "Refresh dashboard",
+
+  "dashboard.header.sorting.lastModified.asc": "Last modified (asc)",
+  "dashboard.header.sorting.lastModified.desc": "Last modified (desc)",
+  "dashboard.header.sorting.filename.asc": "By filename (asc)",
+  "dashboard.header.sorting.filename.desc": "By filename (desc)",
+  "dashboard.header.sorting.published.asc": "Published (asc)",
+  "dashboard.header.sorting.published.desc": "Published (desc)",
+  "dashboard.header.sorting.size.asc": "Size (asc)",
+  "dashboard.header.sorting.size.desc": "Size (desc)",
+  "dashboard.header.sorting.caption.asc": "Caption (asc)",
+  "dashboard.header.sorting.caption.desc": "Caption (desc)",
+  "dashboard.header.sorting.alt.asc": "Alt (asc)",
+  "dashboard.header.sorting.alt.desc": "Alt (desc)",
+  "dashboard.header.sorting.label": "Sort by",
+  
   "dashboard.header.startup.label": "Open on startup?",
 
+  "dashboard.header.syncButton.label": "Sync",
+
+  "dashboard.header.tabs.contents": "Contents",
+  "dashboard.header.tabs.media": "Media",
+  "dashboard.header.tabs.snippets": "Snippets",
+  "dashboard.header.tabs.data": "data",
+  "dashboard.header.tabs.taxonomies": "Taxonomies",
+
+  "dashboard.layout.sponsor.support.label": "Support",
+  "dashboard.layout.sponsor.support.msg": "Support Front Matter",
+  "dashboard.layout.sponsor.review.label": "Review",
+  "dashboard.layout.sponsor.review.msg": "Review Front Matter",
+
+  "dashboard.media.dialog.title": "View details",
+  "dashboard.media.panel.close": "Close panel",
+  "dashboard.media.metadata.panel.title": "Update metadata",
+  "dashboard.media.metadata.panel.description": "Please specify the metadata you want to set for the file.",
+  "dashboard.media.metadata.panel.field.fileName": "Filename",
+  "dashboard.media.metadata.panel.field.title": "Title",
+  "dashboard.media.metadata.panel.field.caption": "Caption",
+  "dashboard.media.metadata.panel.field.alt": "Alternate text",
+  "dashboard.media.metadata.panel.form.metadata.title": "Metadata",
+  "dashboard.media.metadata.panel.form.information.title": "Information",
+  "dashboard.media.metadata.panel.form.information.createdDate": "Created",
+  "dashboard.media.metadata.panel.form.information.modifiedDate": "Last modified",
+  "dashboard.media.metadata.panel.form.information.dimensions": "Dimensions",
+  "dashboard.media.metadata.panel.form.information.folder": "Folder",
+
+  "dashboard.media.folderCreation.button.create": "Create post asset folder",
+
   "panel.actions.title": "Actions",
   "panel.actions.openDashboard": "Open dashboard",
   "panel.actions.openPreview": "Open preview",
diff --git a/src/components/uniforms-frontmatter/LabelField.tsx b/src/components/uniforms-frontmatter/LabelField.tsx
index e0ac9a47..ec4b3689 100644
--- a/src/components/uniforms-frontmatter/LabelField.tsx
+++ b/src/components/uniforms-frontmatter/LabelField.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
 import './LabelField.css';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../localization';
 
 export interface ILabelFieldProps {
   id: string;
@@ -17,7 +19,7 @@ export const LabelField: React.FunctionComponent<ILabelFieldProps> = ({
     <label className="autoform__label" htmlFor={id}>
       {label}
       {required && (
-        <span title="Required field" className="autoform__label__required">
+        <span title={l10n.t(LocalizationKey.fieldRequired)} className="autoform__label__required">
           *
         </span>
       )}
diff --git a/src/components/uniforms-frontmatter/UnknownField.tsx b/src/components/uniforms-frontmatter/UnknownField.tsx
index 0a19633b..2d12836d 100644
--- a/src/components/uniforms-frontmatter/UnknownField.tsx
+++ b/src/components/uniforms-frontmatter/UnknownField.tsx
@@ -2,6 +2,8 @@ import { Ref } from 'react';
 import * as React from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
 import { LabelField } from './LabelField';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../localization';
 
 export type UnknownFieldProps = HTMLFieldProps<
   string,
@@ -27,7 +29,7 @@ function UnknownField({
     <div {...filterDOMProps(props)}>
       <LabelField label={label} id={id} required={props.required} />
 
-      <div className={`text-[var(--vscode-errorForeground)]`}>Unknown field</div>
+      <div className={`text-[var(--vscode-errorForeground)]`}>{l10n.t(LocalizationKey.fieldUnknown)}</div>
     </div>
   );
 }
diff --git a/src/dashboardWebView/components/Chatbot/Answer.tsx b/src/dashboardWebView/components/Chatbot/Answer.tsx
index 19570109..a6a80111 100644
--- a/src/dashboardWebView/components/Chatbot/Answer.tsx
+++ b/src/dashboardWebView/components/Chatbot/Answer.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Feedback } from './Feedback';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IAnswerProps {
   answer: string;
@@ -21,7 +23,7 @@ export const Answer: React.FunctionComponent<IAnswerProps> = ({
   return (
     <li className='answer'>
       <div className='text-lg flex justify-between'>
-        <p>Answer</p>
+        <p>{l10n.t(LocalizationKey.dashboardChatbotAnswerAnswer)}</p>
 
         <Feedback answerId={answerId} />
       </div>
@@ -31,7 +33,7 @@ export const Answer: React.FunctionComponent<IAnswerProps> = ({
       {
         sources && sources.length > 0 && (
           <div>
-            <p className='text-lg'>Resources</p>
+            <p className='text-lg'>{l10n.t(LocalizationKey.dashboardChatbotAnswerResources)}</p>
             <ul className={`space-y-2 list-disc pl-4`}>
               {sources.map((source, idx) => (
                 <li key={`source-${idx}`} className={`text-sm`}>
@@ -46,7 +48,7 @@ export const Answer: React.FunctionComponent<IAnswerProps> = ({
       <div className={`-mx-4 -mb-4 py-2 px-4 bg-[var(--vscode-sideBar-background)] text-[var(--vscode-sideBarTitle-foreground)] text-xs rounded-b`} style={{
         fontFamily: "var(--vscode-editor-font-family)",
       }}>
-        Warning: Anwers might be wrong. In case of doubt, please consult the docs.
+        {l10n.t(LocalizationKey.dashboardChatbotAnswerWarning)}
       </div>
     </li>
   );
diff --git a/src/dashboardWebView/components/Chatbot/Chatbot.tsx b/src/dashboardWebView/components/Chatbot/Chatbot.tsx
index bba3e200..56a68412 100644
--- a/src/dashboardWebView/components/Chatbot/Chatbot.tsx
+++ b/src/dashboardWebView/components/Chatbot/Chatbot.tsx
@@ -7,6 +7,8 @@ import { QuestionAnswer } from './QuestionAnswer';
 import { Placeholder } from './Placeholder';
 import { useSettingsContext } from '../../providers/SettingsProvider';
 import { AiInitResponse } from './models/AiInitResponse';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IChatbotProps { }
 
@@ -141,7 +143,7 @@ export const Chatbot: React.FunctionComponent<IChatbotProps> = ({ }: React.Props
               sources={sources[idx]} />
           )) : (
             <Placeholder>
-              {loading ? <div className='dots'>Assistent is getting ready</div> : `I'm ready, what do you want to know?`}
+              {loading ? <div className='dots'>{l10n.t(LocalizationKey.dashboardChatbotChatbotLoading)}</div> : l10n.t(LocalizationKey.dashboardChatbotChatbotReady)}
             </Placeholder>
           )
         }
diff --git a/src/dashboardWebView/components/Chatbot/Chatbox.tsx b/src/dashboardWebView/components/Chatbot/Chatbox.tsx
index 53833044..351b3b1c 100644
--- a/src/dashboardWebView/components/Chatbot/Chatbox.tsx
+++ b/src/dashboardWebView/components/Chatbot/Chatbox.tsx
@@ -2,6 +2,8 @@ import { PaperAirplaneIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useCallback } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IChatboxProps {
   isLoading: boolean;
@@ -32,7 +34,7 @@ export const Chatbox: React.FunctionComponent<IChatboxProps> = ({ isLoading, onT
               'focus:outline-none border-gray-300 text-vulcan-500',
               'border-transparent bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-none focus:border-transparent'
             )}`}
-            placeholder='How can I configure Front Matter?'
+            placeholder={l10n.t(LocalizationKey.dashboardChatbotChatboxPlaceholder)}
             autoFocus={true}
             value={message}
             cols={30}
diff --git a/src/dashboardWebView/components/Chatbot/Header.tsx b/src/dashboardWebView/components/Chatbot/Header.tsx
index e805fb1a..21d702bc 100644
--- a/src/dashboardWebView/components/Chatbot/Header.tsx
+++ b/src/dashboardWebView/components/Chatbot/Header.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { ChatIcon } from '../../../components/icons/ChatIcon';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IHeaderProps { }
 
@@ -8,7 +10,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = (props: React.Props
     <header className={`w-full max-w-xl m-4 px-4`}>
       <h1 className='text-2xl flex items-center space-x-4'>
         <ChatIcon className='h-6 w-6' />
-        <span>Ask Front Matter AI</span>
+        <span>{l10n.t(LocalizationKey.dashboardChatbotHeaderHeading)}</span>
       </h1>
       <h2
         className='mt-2 text-sm text-[var(--frontmatter-secondary-text)]'
@@ -16,7 +18,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = (props: React.Props
           fontFamily: "var(--vscode-editor-font-family)",
         }}
       >
-        Our AI, powered by <a className={`text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]`} href={`https://www.mendable.ai/`} title={`mendable.ai`}>mendable.ai</a>, has processed the documentation and can assist you with any queries regarding Front Matter. Go ahead and ask away!
+        {l10n.t(LocalizationKey.dashboardChatbotHeaderDescription)}
       </h2>
     </header>
   );
diff --git a/src/dashboardWebView/components/Common/ChoiceButton.tsx b/src/dashboardWebView/components/Common/ChoiceButton.tsx
index 8617f672..3d20cfb5 100644
--- a/src/dashboardWebView/components/Common/ChoiceButton.tsx
+++ b/src/dashboardWebView/components/Common/ChoiceButton.tsx
@@ -3,6 +3,8 @@ import { ChevronDownIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
 import { MenuItem, MenuItems } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IChoiceButtonProps {
   title: string;
@@ -50,7 +52,7 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
               }`}
             disabled={disabled}
           >
-            <span className="sr-only">Open options</span>
+            <span className="sr-only">{l10n.t(LocalizationKey.dashboardCommonChoiceButtonOpen)}</span>
             <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
           </Menu.Button>
 
diff --git a/src/dashboardWebView/components/Contents/ContentActions.tsx b/src/dashboardWebView/components/Contents/ContentActions.tsx
index 6536eec5..d6daa6a7 100644
--- a/src/dashboardWebView/components/Contents/ContentActions.tsx
+++ b/src/dashboardWebView/components/Contents/ContentActions.tsx
@@ -9,6 +9,8 @@ import { Alert } from '../Modals/Alert';
 import { usePopper } from 'react-popper';
 import { useState } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IContentActionsProps {
   title: string;
@@ -110,7 +112,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
             )}
 
             <div ref={setReferenceElement} className={`flex`}>
-              <ActionMenuButton title={`Menu`} />
+              <ActionMenuButton title={l10n.t(LocalizationKey.dashboardContentsContentActionsActionMenuButtonTitle)} />
             </div>
 
             <div
@@ -128,10 +130,10 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
                   title={
                     <div className="flex items-center">
                       <EyeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                      <span>View</span>
+                      <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)}</span>
                     </div>
                   }
-                  onClick={(value, e) => onView(e)}
+                  onClick={(_, e) => onView(e)}
                 />
 
                 {customScriptActions}
@@ -140,10 +142,10 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
                   title={
                     <div className="flex items-center">
                       <TrashIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                      <span>Delete</span>
+                      <span>{l10n.t(LocalizationKey.commonDelete)}</span>
                     </div>
                   }
-                  onClick={(value, e) => onDelete(e)}
+                  onClick={(_, e) => onDelete(e)}
                 />
               </MenuItems>
             </div>
@@ -153,10 +155,10 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
 
       {showDeletionAlert && (
         <Alert
-          title={`Delete: ${title}`}
-          description={`Are you sure you want to delete the "${title}" content?`}
-          okBtnText={`Delete`}
-          cancelBtnText={`Cancel`}
+          title={l10n.t(LocalizationKey.dashboardContentsContentActionsAlertTitle, title)}
+          description={l10n.t(LocalizationKey.dashboardContentsContentActionsAlertDescription, title)}
+          okBtnText={l10n.t(LocalizationKey.commonDelete)}
+          cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
           dismiss={() => setShowDeletionAlert(false)}
           trigger={onDeleteConfirm}
         />
diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx
index afed50ee..1c73e2cf 100644
--- a/src/dashboardWebView/components/Contents/Item.tsx
+++ b/src/dashboardWebView/components/Contents/Item.tsx
@@ -7,11 +7,13 @@ import { DateField } from '../Common/DateField';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardViewType } from '../../models';
 import { ContentActions } from './ContentActions';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
 import { Status } from './Status';
 import * as React from 'react';
 import useExtensibility from '../../hooks/useExtensibility';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IItemProps extends Page { }
 
@@ -53,7 +55,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     }
 
     if (value && typeof value !== 'string') {
-      return '<invalid title>';
+      return l10n.t(LocalizationKey.dashboardContentsItemInvalidTitle);
     }
 
     return value;
@@ -73,7 +75,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     }
 
     if (value && typeof value !== 'string') {
-      return '<invalid description>';
+      return l10n.t(LocalizationKey.dashboardContentsItemInvalidDescription);
     }
 
     return value;
diff --git a/src/dashboardWebView/components/Contents/List.tsx b/src/dashboardWebView/components/Contents/List.tsx
index 269ddba6..f78db468 100644
--- a/src/dashboardWebView/components/Contents/List.tsx
+++ b/src/dashboardWebView/components/Contents/List.tsx
@@ -3,6 +3,8 @@ import { useRecoilValue } from 'recoil';
 import useThemeColors from '../../hooks/useThemeColors';
 import { DashboardViewType } from '../../models';
 import { ViewSelector } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IListProps { }
 
@@ -25,9 +27,9 @@ export const List: React.FunctionComponent<IListProps> = ({
         <li className={`px-5 relative uppercase py-2 border-b ${getColors('text-vulcan-100 dark:text-whisper-900 border-vulcan-50', 'text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]')
           }`}>
           <div className={`grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8`}>
-            <div className="col-span-8">Title</div>
-            <div className="col-span-2">Date</div>
-            <div className="col-span-2">Status</div>
+            <div className="col-span-8">{l10n.t(LocalizationKey.dashboardContentsListTitle)}</div>
+            <div className="col-span-2">{l10n.t(LocalizationKey.dashboardContentsListDate)}</div>
+            <div className="col-span-2">{l10n.t(LocalizationKey.dashboardContentsListStatus)}</div>
           </div>
         </li>
       )}
diff --git a/src/dashboardWebView/components/Contents/Overview.tsx b/src/dashboardWebView/components/Contents/Overview.tsx
index 828f6a90..330f1bb4 100644
--- a/src/dashboardWebView/components/Contents/Overview.tsx
+++ b/src/dashboardWebView/components/Contents/Overview.tsx
@@ -13,6 +13,8 @@ import { Item } from './Item';
 import { List } from './List';
 import usePagination from '../../hooks/usePagination';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IOverviewProps {
   pages: Page[];
@@ -52,19 +54,13 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
       <div className={`flex items-center justify-center h-full`}>
         <div className={`max-w-xl text-center`}>
           <FrontMatterIcon
-            className={`h-32 mx-auto opacity-90 mb-8 ${
-              getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
-            }`}
+            className={`h-32 mx-auto opacity-90 mb-8 ${getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
+              }`}
           />
           {settings && settings?.contentFolders?.length > 0 ? (
-            <p className={`text-xl font-medium`}>No Markdown to show</p>
+            <p className={`text-xl font-medium`}>{l10n.t(LocalizationKey.dashboardContentsOverviewNoMarkdown)}</p>
           ) : (
-            <>
-              <p className={`text-lg font-medium`}>
-                Make sure you registered a content folder in your project to let Front Matter find
-                the contents.
-              </p>
-            </>
+            <p className={`text-lg font-medium`}>{l10n.t(LocalizationKey.dashboardContentsOverviewNoFolders)}</p>
           )}
         </div>
       </div>
diff --git a/src/dashboardWebView/components/Contents/Status.tsx b/src/dashboardWebView/components/Contents/Status.tsx
index 69423fbf..8214921a 100644
--- a/src/dashboardWebView/components/Contents/Status.tsx
+++ b/src/dashboardWebView/components/Contents/Status.tsx
@@ -3,6 +3,8 @@ import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SettingsAtom } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IStatusProps {
   draft: boolean | string;
@@ -50,7 +52,7 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
           getColors(`bg-teal-500`, 'bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)]')
         }`}
     >
-      {draftValue ? 'Draft' : 'Published'}
+      {draftValue ? l10n.t(LocalizationKey.dashboardContentsStatusDraft) : l10n.t(LocalizationKey.dashboardContentsStatusPublished)}
     </span>
   );
 };
diff --git a/src/dashboardWebView/components/DataView/DataForm.tsx b/src/dashboardWebView/components/DataView/DataForm.tsx
index bd3a969a..f3bdc721 100644
--- a/src/dashboardWebView/components/DataView/DataForm.tsx
+++ b/src/dashboardWebView/components/DataView/DataForm.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
-import Ajv, { FormatDefinition } from 'ajv';
+import Ajv from 'ajv';
 import { useEffect, useState } from 'react';
 import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
 import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter';
 import { ErrorBoundary } from '@sentry/react';
 import { DataFormControls } from './DataFormControls';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IDataFormProps {
   schema: any;
@@ -79,9 +81,13 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({
     <ErrorBoundary>
       <div className="autoform">
         {model ? (
-          <h2 className={getColors(`text - gray - 500 dark: text - whisper - 900`, `text - [var(--frontmatter - secondary - text)]`)}>Modify the data</h2>
+          <h2 className={getColors(`text - gray - 500 dark: text - whisper - 900`, `text - [var(--frontmatter - secondary - text)]`)}>
+            {l10n.t(LocalizationKey.dashboardDataViewDataFormModify)}
+          </h2>
         ) : (
-          <h2 className={getColors(`text - gray - 500 dark: text - whisper - 900`, `text - [var(--frontmatter - secondary - text)]`)}>Add new data</h2>
+          <h2 className={getColors(`text - gray - 500 dark: text - whisper - 900`, `text - [var(--frontmatter - secondary - text)]`)}>
+            {l10n.t(LocalizationKey.dashboardDataViewDataFormAdd)}
+          </h2>
         )}
 
         <AutoForm
diff --git a/src/dashboardWebView/components/DataView/DataFormControls.tsx b/src/dashboardWebView/components/DataView/DataFormControls.tsx
index 3601be66..31b82aa9 100644
--- a/src/dashboardWebView/components/DataView/DataFormControls.tsx
+++ b/src/dashboardWebView/components/DataView/DataFormControls.tsx
@@ -3,6 +3,8 @@ import { useForm } from 'uniforms';
 import { SubmitField } from 'uniforms-unstyled';
 import useThemeColors from '../../hooks/useThemeColors';
 import { Button } from '../Common/Button';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IDataFormControlsProps {
   model: any | null;
@@ -30,7 +32,7 @@ export const DataFormControls: React.FunctionComponent<IDataFormControlsProps> =
           formRef.reset();
         }}
       >
-        Cancel
+        {l10n.t(LocalizationKey.commonCancel)}
       </Button>
     </div>
   );
diff --git a/src/dashboardWebView/components/DataView/DataView.tsx b/src/dashboardWebView/components/DataView/DataView.tsx
index 56bb680f..a1bf7369 100644
--- a/src/dashboardWebView/components/DataView/DataView.tsx
+++ b/src/dashboardWebView/components/DataView/DataView.tsx
@@ -22,6 +22,8 @@ import { DataType } from '../../../models/DataType';
 import { TelemetryEvent } from '../../../constants';
 import { NavigationItem } from '../Layout';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IDataViewProps { }
 
@@ -186,7 +188,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                 `text-[var(--frontmatter-text)]`
               )
                 }`}>
-                Select your data type
+                {l10n.t(LocalizationKey.dashboardDataViewDataViewSelect)}
               </h2>
 
               <nav className={`flex-1 py-4 -mx-4`}>
@@ -230,7 +232,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                       `text-[var(--frontmatter-text)]`
                     )
                       }`}>
-                      Your {selectedData?.title?.toLowerCase() || ''} data items
+                      {l10n.t(LocalizationKey.dashboardDataViewDataViewTitle, selectedData?.title?.toLowerCase() || '')}
                     </h2>
 
                     <div className="py-4">
@@ -250,13 +252,13 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                             ))}
                           </Container>
                           <Button className="mt-4" onClick={() => setSelectedIndex(null)}>
-                            Add a new entry
+                            {l10n.t(LocalizationKey.dashboardDataViewDataViewAdd)}
                           </Button>
                         </>
                       ) : (
                         <div className={`flex flex-col items-center justify-center`}>
                           <p className={getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}>
-                            No {selectedData.title.toLowerCase()} data entries found
+                            {l10n.t(LocalizationKey.dashboardDataViewDataViewEmpty, selectedData.title.toLowerCase())}
                           </p>
                         </div>
                       )}
@@ -268,7 +270,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                     } py-6 px-4 overflow-auto`}
                 >
                   <h2 className={`text-lg ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}`}>
-                    Create or modify your {selectedData.title.toLowerCase()} data
+                    {l10n.t(LocalizationKey.dashboardDataViewDataViewCreateOrModify, selectedData.title.toLowerCase())}
                   </h2>
                   {selectedData ? (
                     <DataForm
@@ -278,7 +280,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                       onClear={() => setSelectedIndex(null)}
                     />
                   ) : (
-                    <p>Select a data type to get started</p>
+                    <p>{l10n.t(LocalizationKey.dashboardDataViewDataViewGetStarted)}</p>
                   )}
                 </div>
               </>
@@ -295,14 +297,14 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
           )
             }`}>
             <DatabaseIcon className="w-32 h-32" />
-            <p className="text-3xl mt-2">No data files found</p>
+            <p className="text-3xl mt-2">{l10n.t(LocalizationKey.dashboardDataViewDataViewNoDataFiles)}</p>
             <p className="text-xl mt-4">
               <a
                 className={getColors(`text-teal-700 hover:text-teal-900`, `text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`)}
                 href={`https://frontmatter.codes/docs/dashboard#data-files-view`}
-                title={`Read more to get started using data files`}
+                title={l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
               >
-                Read more to get started using data files
+                {l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
               </a>
             </p>
           </div>
@@ -318,7 +320,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
 
       <ToastContainer />
 
-      <img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=dataview" alt="DataView metrics" />
+      <img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=DataView" alt="DataView metrics" />
     </div >
   );
 };
diff --git a/src/dashboardWebView/components/DataView/EmptyView.tsx b/src/dashboardWebView/components/DataView/EmptyView.tsx
index c9d2ec0a..6400c079 100644
--- a/src/dashboardWebView/components/DataView/EmptyView.tsx
+++ b/src/dashboardWebView/components/DataView/EmptyView.tsx
@@ -1,6 +1,8 @@
 import { ExclamationCircleIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IEmptyViewProps { }
 
@@ -12,7 +14,9 @@ export const EmptyView: React.FunctionComponent<IEmptyViewProps> = (
   return (
     <div className="flex flex-col items-center justify-center w-full">
       <ExclamationCircleIcon className={`w-1/12 opacity-90 ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}`} />
-      <h2 className={`text-xl ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}`}>Select your date type first</h2>
+      <h2 className={`text-xl ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}`}>
+        {l10n.t(LocalizationKey.dashboardDataViewEmptyViewHeading)}
+      </h2>
     </div>
   );
 };
diff --git a/src/dashboardWebView/components/DataView/SortableItem.tsx b/src/dashboardWebView/components/DataView/SortableItem.tsx
index bfcd2bd1..a8cd61ce 100644
--- a/src/dashboardWebView/components/DataView/SortableItem.tsx
+++ b/src/dashboardWebView/components/DataView/SortableItem.tsx
@@ -1,9 +1,11 @@
-import { PencilIcon, SelectorIcon, TrashIcon, XIcon } from '@heroicons/react/outline';
+import { PencilIcon, SelectorIcon, TrashIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { SortableHandle, SortableElement } from 'react-sortable-hoc';
 import useThemeColors from '../../hooks/useThemeColors';
 import { LinkButton } from '../Common/LinkButton';
 import { Alert } from '../Modals/Alert';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface ISortableItemProps {
   value: string;
@@ -52,27 +54,27 @@ export const SortableItem = SortableElement(
 
           <div className={`space-x-2 flex items-center`}>
             <LinkButton
-              title={`Edit "${value}"`}
+              title={l10n.t(LocalizationKey.dashboardDataViewSortableItemEditButtonTitle)}
               onClick={() => onSelectedIndexChange(crntIndex)}>
               <PencilIcon className="w-4 h-4" />
-              <span className="sr-only">Edit</span>
+              <span className="sr-only">{l10n.t(LocalizationKey.commonEdit)}</span>
             </LinkButton>
 
             <LinkButton
-              title={`Delete "${value}"`}
+              title={l10n.t(LocalizationKey.dashboardDataViewSortableItemDeleteButtonTitle)}
               onClick={() => deleteItemConfirm()}>
               <TrashIcon className="w-4 h-4" />
-              <span className="sr-only">Delete</span>
+              <span className="sr-only">{l10n.t(LocalizationKey.commonDelete)}</span>
             </LinkButton>
           </div>
         </li>
 
         {showAlert && (
           <Alert
-            title={`Delete data entry`}
-            description={`Are you sure you want to delete the data entry?`}
-            okBtnText={`Delete`}
-            cancelBtnText={`Cancel`}
+            title={l10n.t(LocalizationKey.dashboardDataViewSortableItemAlertTitle)}
+            description={l10n.t(LocalizationKey.dashboardDataViewSortableItemAlertDescription)}
+            okBtnText={l10n.t(LocalizationKey.commonDelete)}
+            cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
             dismiss={() => setShowAlert(false)}
             trigger={() => {
               setShowAlert(false);
diff --git a/src/dashboardWebView/components/ErrorView/index.tsx b/src/dashboardWebView/components/ErrorView/index.tsx
index 359871a0..078c0e0b 100644
--- a/src/dashboardWebView/components/ErrorView/index.tsx
+++ b/src/dashboardWebView/components/ErrorView/index.tsx
@@ -1,19 +1,21 @@
 import { ExclamationIcon } 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 IErrorViewProps {}
+export interface IErrorViewProps { }
 
 export const ErrorView: React.FunctionComponent<IErrorViewProps> = (
-  props: React.PropsWithChildren<IErrorViewProps>
+  _: React.PropsWithChildren<IErrorViewProps>
 ) => {
   const { getColors } = useThemeColors();
-  
+
   return (
     <main className={`h-full w-full flex flex-col justify-center items-center space-y-2`}>
       <ExclamationIcon className={`w-24 h-24 ${getColors(`text-red-500`, `text-[var(--vscode-editorError-foreground)]`)}`} />
-      <p className="text-xl">Sorry, something went wrong.</p>
-      <p className="text-base">Please close the dashboard and try again.</p>
+      <p className="text-xl">{l10n.t(LocalizationKey.commonErrorMessage)}</p>
+      <p className="text-base">{l10n.t(LocalizationKey.dashboardErrorViewDescription)}</p>
     </main>
   );
 };
diff --git a/src/dashboardWebView/components/Header/Breadcrumb.tsx b/src/dashboardWebView/components/Header/Breadcrumb.tsx
index 9a538a65..404745bf 100644
--- a/src/dashboardWebView/components/Header/Breadcrumb.tsx
+++ b/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>
diff --git a/src/dashboardWebView/components/Header/ClearFilters.tsx b/src/dashboardWebView/components/Header/ClearFilters.tsx
index 17036729..62d2a4ca 100644
--- a/src/dashboardWebView/components/Header/ClearFilters.tsx
+++ b/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>
   );
 };
diff --git a/src/dashboardWebView/components/Header/Filter.tsx b/src/dashboardWebView/components/Header/Filter.tsx
index 7063c102..b3bf2c44 100644
--- a/src/dashboardWebView/components/Header/Filter.tsx
+++ b/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,
diff --git a/src/dashboardWebView/components/Header/FilterInput.tsx b/src/dashboardWebView/components/Header/FilterInput.tsx
index 52a4a0b3..9beaf020 100644
--- a/src/dashboardWebView/components/Header/FilterInput.tsx
+++ b/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)}
diff --git a/src/dashboardWebView/components/Header/Folders.tsx b/src/dashboardWebView/components/Header/Folders.tsx
index 0091f812..4b339689 100644
--- a/src/dashboardWebView/components/Header/Folders.tsx
+++ b/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
diff --git a/src/dashboardWebView/components/Header/Grouping.tsx b/src/dashboardWebView/components/Header/Grouping.tsx
index d1d8a88f..4a3d34e0 100644
--- a/src/dashboardWebView/components/Header/Grouping.tsx
+++ b/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) => (
diff --git a/src/dashboardWebView/components/Header/Header.tsx b/src/dashboardWebView/components/Header/Header.tsx
index e2a49d4d..d8790a5e 100644
--- a/src/dashboardWebView/components/Header/Header.tsx
+++ b/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}
diff --git a/src/dashboardWebView/components/Header/Pagination.tsx b/src/dashboardWebView/components/Header/Pagination.tsx
index 48646a54..cc1b8aff 100644
--- a/src/dashboardWebView/components/Header/Pagination.tsx
+++ b/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)}
       />
diff --git a/src/dashboardWebView/components/Header/PaginationStatus.tsx b/src/dashboardWebView/components/Header/PaginationStatus.tsx
index de3a6919..056f58e9 100644
--- a/src/dashboardWebView/components/Header/PaginationStatus.tsx
+++ b/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>
   );
diff --git a/src/dashboardWebView/components/Header/ProjectSwitcher.tsx b/src/dashboardWebView/components/Header/ProjectSwitcher.tsx
index 514cf3ac..f9918e54 100644
--- a/src/dashboardWebView/components/Header/ProjectSwitcher.tsx
+++ b/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} />
diff --git a/src/dashboardWebView/components/Header/RefreshDashboardData.tsx b/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
index 749e4b38..e8f4efc3 100644
--- a/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
+++ b/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>
   );
 };
diff --git a/src/dashboardWebView/components/Header/Searchbox.tsx b/src/dashboardWebView/components/Header/Searchbox.tsx
index 50642116..d469c203 100644
--- a/src/dashboardWebView/components/Header/Searchbox.tsx
+++ b/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}
diff --git a/src/dashboardWebView/components/Header/Sorting.tsx b/src/dashboardWebView/components/Header/Sorting.tsx
index 4953da58..c7754877 100644
--- a/src/dashboardWebView/components/Header/Sorting.tsx
+++ b/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}
         />
diff --git a/src/dashboardWebView/components/Header/SyncButton.tsx b/src/dashboardWebView/components/Header/SyncButton.tsx
index fac95142..90f3a278 100644
--- a/src/dashboardWebView/components/Header/SyncButton.tsx
+++ b/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>
   );
diff --git a/src/dashboardWebView/components/Header/Tabs.tsx b/src/dashboardWebView/components/Header/Tabs.tsx
index 494db5c9..5e39fb08 100644
--- a/src/dashboardWebView/components/Header/Tabs.tsx
+++ b/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>
diff --git a/src/dashboardWebView/components/Layout/SponsorMsg.tsx b/src/dashboardWebView/components/Layout/SponsorMsg.tsx
index 76af9c32..0990fcc1 100644
--- a/src/dashboardWebView/components/Layout/SponsorMsg.tsx
+++ b/src/dashboardWebView/components/Layout/SponsorMsg.tsx
@@ -3,6 +3,8 @@ import * as React from 'react';
 import { REVIEW_LINK, SPONSOR_LINK } from '../../../constants';
 import { VersionInfo } from '../../../models';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface ISponsorMsgProps {
   beta: boolean | undefined;
@@ -57,18 +59,20 @@ export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = ({
       ) : (
         <>
           <SponsorLink
-            title={`Support Front Matter`}
+            title={l10n.t(LocalizationKey.dashboardLayoutSponsorSupportMsg)}
             href={SPONSOR_LINK}>
-            <span>Support</span> <HeartIcon className={`h-5 w-5 group-hover:fill-current`} />
+            <span>{l10n.t(LocalizationKey.dashboardLayoutSponsorSupportLabel)}</span>{` `}
+            <HeartIcon className={`h-5 w-5 group-hover:fill-current`} />
           </SponsorLink>
           <span>
             Front Matter
             {version ? ` (v${version.installedVersion}${!!beta ? ` BETA` : ''})` : ''}
           </span>
           <SponsorLink
-            title={`Review Front Matter`}
+            title={l10n.t(LocalizationKey.dashboardLayoutSponsorReviewMsg)}
             href={REVIEW_LINK}>
-            <StarIcon className={`h-5 w-5 group-hover:fill-current`} /> <span>Review</span>
+            <StarIcon className={`h-5 w-5 group-hover:fill-current`} />{` `}
+            <span>{l10n.t(LocalizationKey.dashboardLayoutSponsorReviewLabel)}</span>
           </SponsorLink>
         </>
       )}
diff --git a/src/dashboardWebView/components/Media/DetailsSlideOver.tsx b/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
index 5f006bf0..cfe25ef5 100644
--- a/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
+++ b/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
@@ -13,6 +13,8 @@ import { PageSelector, SelectedMediaFolderSelector } from '../../state';
 import useThemeColors from '../../hooks/useThemeColors';
 import { DetailsItem } from './DetailsItem';
 import { DetailsInput } from './DetailsInput';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IDetailsSlideOverProps {
   imgSrc: string;
@@ -108,7 +110,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                         'text-[var(--vscode-editor-foreground)]'
                       )
                         }`}>
-                        View details
+                        {l10n.t(LocalizationKey.dashboardMediaDialogTitle)}
                       </Dialog.Title>
                       <div className="ml-3 flex h-7 items-center">
                         <button
@@ -120,7 +122,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                             }`}
                           onClick={onDismiss}
                         >
-                          <span className="sr-only">Close panel</span>
+                          <span className="sr-only">{l10n.t(LocalizationKey.dashboardMediaPanelClose)}</span>
                           <XIcon className="h-6 w-6" aria-hidden="true" />
                         </button>
                       </div>
@@ -169,14 +171,14 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                               'text-[var(--vscode-editor-foreground)]'
                             )
                               }`}>
-                              Update metadata
+                              {l10n.t(LocalizationKey.dashboardMediaMetadataPanelTitle)}
                             </h3>
                             <p className={`text-sm font-medium ${getColors(
                               'text-vulcan-100 dark:text-whisper-900',
                               'text-[var(--vscode-editor-foreground)]'
                             )
                               }`}>
-                              Please specify the metadata you want to set for the file.
+                              {l10n.t(LocalizationKey.dashboardMediaMetadataPanelDescription)}
                             </p>
                             <div className="flex flex-col py-3 space-y-3">
                               <div>
@@ -185,7 +187,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                   'text-[var(--vscode-editor-foreground)]'
                                 )
                                   }`}>
-                                  Filename
+                                  {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldFileName)}
                                 </label>
                                 <div className="relative mt-1">
                                   <DetailsInput value={name || ""} onChange={(e) => setFilename(`${e.target.value}.${extension}`)} />
@@ -202,7 +204,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                   'text-[var(--vscode-editor-foreground)]'
                                 )
                                   }`}>
-                                  Title
+                                  {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldTitle)}
                                 </label>
                                 <div className="mt-1">
                                   <DetailsInput value={title || ""} onChange={(e) => setTitle(e.target.value)} />
@@ -217,7 +219,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                       'text-[var(--vscode-editor-foreground)]'
                                     )
                                       }`}>
-                                      Caption
+                                      {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldCaption)}
                                     </label>
                                     <div className="mt-1">
                                       <DetailsInput value={caption || ""} onChange={(e) => setCaption(e.target.value)} isTextArea />
@@ -229,7 +231,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                       'text-[var(--vscode-editor-foreground)]'
                                     )
                                       }`}>
-                                      Alt tag value
+                                      {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldAlt)}
                                     </label>
                                     <div className="mt-1">
                                       <DetailsInput value={alt || ""} onChange={(e) => setAlt(e.target.value)} isTextArea />
@@ -250,7 +252,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                 onClick={onSubmitMetadata}
                                 disabled={!filename}
                               >
-                                Save
+                                {l10n.t(LocalizationKey.commonSave)}
                               </button>
                               <button
                                 type="button"
@@ -261,7 +263,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                   }`}
                                 onClick={onEditClose}
                               >
-                                Cancel
+                                {l10n.t(LocalizationKey.commonCancel)}
                               </button>
                             </div>
                           </>
@@ -274,10 +276,10 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                               'text-[var(--vscode-foreground)]'
                             )
                               }`}>
-                              <span>Metadata</span>
+                              <span>{l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormMetadataTitle)}</span>
                               <button onClick={onEdit}>
                                 <PencilAltIcon className="w-4 h-4 ml-2" aria-hidden="true" />
-                                <span className="sr-only">Edit</span>
+                                <span className="sr-only">{l10n.t(LocalizationKey.commonEdit)}</span>
                               </button>
                             </h3>
                             <dl className={`mt-2 border-t border-b divide-y ${getColors(
@@ -285,13 +287,13 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                               'border-[var(--frontmatter-border)] divide-[var(--frontmatter-border)]'
                             )
                               }`}>
-                              <DetailsItem title={`Filename`} details={media.filename} />
-                              <DetailsItem title={`Title`} details={media.title || ""} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldFileName)} details={media.filename} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldTitle)} details={media.title || ""} />
 
                               {isImageFile && (
                                 <>
-                                  <DetailsItem title={`Caption`} details={media.caption || ''} />
-                                  <DetailsItem title={`Alternate text`} details={media.alt || ''} />
+                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldCaption)} details={media.caption || ''} />
+                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldAlt)} details={media.alt || ''} />
                                 </>
                               )}
                             </dl>
@@ -306,7 +308,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                             'text-[var(--vscode-foreground)]'
                           )
                             }`}>
-                            Information
+                            {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormInformationTitle)}
                           </h3>
                           <dl className={`mt-2 border-t border-b divide-y ${getColors(
                             'border-gray-200 dark:border-vulcan-200 divide-gray-200 dark:divide-vulcan-200',
@@ -314,19 +316,19 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                           )
                             }`}>
                             {createdDate && (
-                              <DetailsItem title={`Created`} details={format(createdDate, 'MMM dd, yyyy')} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormInformationCreatedDate)} details={format(createdDate, 'MMM dd, yyyy')} />
                             )}
 
                             {modifiedDate && (
-                              <DetailsItem title={`Last modified`} details={format(modifiedDate, 'MMM dd, yyyy')} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormInformationModifiedDate)} details={format(modifiedDate, 'MMM dd, yyyy')} />
                             )}
 
                             {dimensions && (
-                              <DetailsItem title={`Dimensions`} details={dimensions} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormInformationDimensions)} details={dimensions} />
                             )}
 
                             {folder && (
-                              <DetailsItem title={`Folder`} details={folder} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormInformationFolder)} details={folder} />
                             )}
                           </dl>
                         </div>
diff --git a/src/dashboardWebView/components/Media/FolderCreation.tsx b/src/dashboardWebView/components/Media/FolderCreation.tsx
index 4fff1612..0072d428 100644
--- a/src/dashboardWebView/components/Media/FolderCreation.tsx
+++ b/src/dashboardWebView/components/Media/FolderCreation.tsx
@@ -17,6 +17,8 @@ import { useCallback, useMemo } from 'react';
 import { extname } from 'path';
 import { parseWinPath } from '../../../helpers/parseWinPath';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IFolderCreationProps { }
 
@@ -81,11 +83,11 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
             `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
           )
             }`}
-          title={`Create post asset folder`}
+          title={l10n.t(LocalizationKey.dashboardMediaFolderCreationButtonCreate)}
           onClick={onAssetFolderCreation}
         >
           <FolderAddIcon className={`mr-2 h-6 w-6`} />
-          <span className={``}>Create post asset folder</span>
+          <span className={``}>{l10n.t(LocalizationKey.dashboardMediaFolderCreationButtonCreate)}</span>
         </button>
       );
     }
diff --git a/src/localization/localization.enum.ts b/src/localization/localization.enum.ts
index b7624d02..ccc8d680 100644
--- a/src/localization/localization.enum.ts
+++ b/src/localization/localization.enum.ts
@@ -1,6 +1,109 @@
 export enum LocalizationKey {
-  dashboardHeaderCreateContent = 'dashboard.header.createContent',
+  commonEdit = 'common.edit',
+  commonDelete = 'common.delete',
+  commonCancel = 'common.cancel',
+  commonClear = 'common.clear',
+  commonSearch = 'common.search',
+  commonSave = 'common.save',
+  commonErrorMessage = 'common.error.message',
+  fieldRequired = 'field.required',
+  fieldUnknown = 'field.unknown',
+  dashboardChatbotAnswerAnswer = 'dashboard.chatbot.answer.answer',
+  dashboardChatbotAnswerResources = 'dashboard.chatbot.answer.resources',
+  dashboardChatbotAnswerWarning = 'dashboard.chatbot.answer.warning',
+  dashboardChatbotChatbotLoading = 'dashboard.chatbot.chatbot.loading',
+  dashboardChatbotChatbotReady = 'dashboard.chatbot.chatbot.ready',
+  dashboardChatbotChatboxPlaceholder = 'dashboard.chatbot.chatbox.placeholder',
+  dashboardChatbotHeaderHeading = 'dashboard.chatbot.header.heading',
+  dashboardChatbotHeaderDescription = 'dashboard.chatbot.header.description',
+  dashboardCommonChoiceButtonOpen = 'dashboard.common.choiceButton.open',
+  dashboardContentsContentActionsActionMenuButtonTitle = 'dashboard.contents.contentActions.actionMenuButton.title',
+  dashboardContentsContentActionsMenuItemView = 'dashboard.contents.contentActions.menuItem.view',
+  dashboardContentsContentActionsAlertTitle = 'dashboard.contents.contentActions.alert.title',
+  dashboardContentsContentActionsAlertDescription = 'dashboard.contents.contentActions.alert.description',
+  dashboardContentsItemInvalidTitle = 'dashboard.contents.item.invalidTitle',
+  dashboardContentsItemInvalidDescription = 'dashboard.contents.item.invalidDescription',
+  dashboardContentsListTitle = 'dashboard.contents.list.title',
+  dashboardContentsListDate = 'dashboard.contents.list.date',
+  dashboardContentsListStatus = 'dashboard.contents.list.status',
+  dashboardContentsOverviewNoMarkdown = 'dashboard.contents.overview.noMarkdown',
+  dashboardContentsOverviewNoFolders = 'dashboard.contents.overview.noFolders',
+  dashboardContentsStatusDraft = 'dashboard.contents.status.draft',
+  dashboardContentsStatusPublished = 'dashboard.contents.status.published',
+  dashboardDataViewDataFormModify = 'dashboard.dataView.dataForm.modify',
+  dashboardDataViewDataFormAdd = 'dashboard.dataView.dataForm.add',
+  dashboardDataViewDataViewSelect = 'dashboard.dataView.dataView.select',
+  dashboardDataViewDataViewTitle = 'dashboard.dataView.dataView.title',
+  dashboardDataViewDataViewAdd = 'dashboard.dataView.dataView.add',
+  dashboardDataViewDataViewEmpty = 'dashboard.dataView.dataView.empty',
+  dashboardDataViewDataViewCreateOrModify = 'dashboard.dataView.dataView.createOrModify',
+  dashboardDataViewDataViewGetStarted = 'dashboard.dataView.dataView.getStarted',
+  dashboardDataViewDataViewNoDataFiles = 'dashboard.dataView.dataView.noDataFiles',
+  dashboardDataViewDataViewGetStartedLink = 'dashboard.dataView.dataView.getStarted.link',
+  dashboardDataViewEmptyViewHeading = 'dashboard.dataView.emptyView.heading',
+  dashboardDataViewSortableItemEditButtonTitle = 'dashboard.dataView.sortableItem.editButton.title',
+  dashboardDataViewSortableItemDeleteButtonTitle = 'dashboard.dataView.sortableItem.deleteButton.title',
+  dashboardDataViewSortableItemAlertTitle = 'dashboard.dataView.sortableItem.alert.title',
+  dashboardDataViewSortableItemAlertDescription = 'dashboard.dataView.sortableItem.alert.description',
+  dashboardErrorViewDescription = 'dashboard.errorView.description',
+  dashboardHeaderBreadcrumbHome = 'dashboard.header.breadcrumb.home',
+  dashboardHeaderClearFiltersTitle = 'dashboard.header.clearFilters.title',
+  dashboardHeaderFilterDefault = 'dashboard.header.filter.default',
+  dashboardHeaderFoldersDefault = 'dashboard.header.folders.default',
+  dashboardHeaderFoldersMenuButtonShowing = 'dashboard.header.folders.menuButton.showing',
+  dashboardHeaderGroupingOptionNone = 'dashboard.header.grouping.option.none',
+  dashboardHeaderGroupingOptionYear = 'dashboard.header.grouping.option.year',
+  dashboardHeaderGroupingOptionDraft = 'dashboard.header.grouping.option.draft',
+  dashboardHeaderGroupingMenuButtonLabel = 'dashboard.header.grouping.menuButton.label',
+  dashboardHeaderHeaderCreateContent = 'dashboard.header.header.createContent',
+  dashboardHeaderHeaderCreateByContentType = 'dashboard.header.header.createByContentType',
+  dashboardHeaderHeaderCreateByTemplate = 'dashboard.header.header.createByTemplate',
+  dashboardHeaderPaginationFirst = 'dashboard.header.pagination.first',
+  dashboardHeaderPaginationPrevious = 'dashboard.header.pagination.previous',
+  dashboardHeaderPaginationNext = 'dashboard.header.pagination.next',
+  dashboardHeaderPaginationLast = 'dashboard.header.pagination.last',
+  dashboardHeaderPaginationStatusText = 'dashboard.header.paginationStatus.text',
+  dashboardHeaderProjectSwitcherLabel = 'dashboard.header.projectSwitcher.label',
+  dashboardHeaderRefreshDashboardLabel = 'dashboard.header.refreshDashboard.label',
+  dashboardHeaderSortingLastModifiedAsc = 'dashboard.header.sorting.lastModified.asc',
+  dashboardHeaderSortingLastModifiedDesc = 'dashboard.header.sorting.lastModified.desc',
+  dashboardHeaderSortingFilenameAsc = 'dashboard.header.sorting.filename.asc',
+  dashboardHeaderSortingFilenameDesc = 'dashboard.header.sorting.filename.desc',
+  dashboardHeaderSortingPublishedAsc = 'dashboard.header.sorting.published.asc',
+  dashboardHeaderSortingPublishedDesc = 'dashboard.header.sorting.published.desc',
+  dashboardHeaderSortingSizeAsc = 'dashboard.header.sorting.size.asc',
+  dashboardHeaderSortingSizeDesc = 'dashboard.header.sorting.size.desc',
+  dashboardHeaderSortingCaptionAsc = 'dashboard.header.sorting.caption.asc',
+  dashboardHeaderSortingCaptionDesc = 'dashboard.header.sorting.caption.desc',
+  dashboardHeaderSortingAltAsc = 'dashboard.header.sorting.alt.asc',
+  dashboardHeaderSortingAltDesc = 'dashboard.header.sorting.alt.desc',
+  dashboardHeaderSortingLabel = 'dashboard.header.sorting.label',
   dashboardHeaderStartupLabel = 'dashboard.header.startup.label',
+  dashboardHeaderSyncButtonLabel = 'dashboard.header.syncButton.label',
+  dashboardHeaderTabsContents = 'dashboard.header.tabs.contents',
+  dashboardHeaderTabsMedia = 'dashboard.header.tabs.media',
+  dashboardHeaderTabsSnippets = 'dashboard.header.tabs.snippets',
+  dashboardHeaderTabsData = 'dashboard.header.tabs.data',
+  dashboardHeaderTabsTaxonomies = 'dashboard.header.tabs.taxonomies',
+  dashboardLayoutSponsorSupportLabel = 'dashboard.layout.sponsor.support.label',
+  dashboardLayoutSponsorSupportMsg = 'dashboard.layout.sponsor.support.msg',
+  dashboardLayoutSponsorReviewLabel = 'dashboard.layout.sponsor.review.label',
+  dashboardLayoutSponsorReviewMsg = 'dashboard.layout.sponsor.review.msg',
+  dashboardMediaDialogTitle = 'dashboard.media.dialog.title',
+  dashboardMediaPanelClose = 'dashboard.media.panel.close',
+  dashboardMediaMetadataPanelTitle = 'dashboard.media.metadata.panel.title',
+  dashboardMediaMetadataPanelDescription = 'dashboard.media.metadata.panel.description',
+  dashboardMediaMetadataPanelFieldFileName = 'dashboard.media.metadata.panel.field.fileName',
+  dashboardMediaMetadataPanelFieldTitle = 'dashboard.media.metadata.panel.field.title',
+  dashboardMediaMetadataPanelFieldCaption = 'dashboard.media.metadata.panel.field.caption',
+  dashboardMediaMetadataPanelFieldAlt = 'dashboard.media.metadata.panel.field.alt',
+  dashboardMediaMetadataPanelFormMetadataTitle = 'dashboard.media.metadata.panel.form.metadata.title',
+  dashboardMediaMetadataPanelFormInformationTitle = 'dashboard.media.metadata.panel.form.information.title',
+  dashboardMediaMetadataPanelFormInformationCreatedDate = 'dashboard.media.metadata.panel.form.information.createdDate',
+  dashboardMediaMetadataPanelFormInformationModifiedDate = 'dashboard.media.metadata.panel.form.information.modifiedDate',
+  dashboardMediaMetadataPanelFormInformationDimensions = 'dashboard.media.metadata.panel.form.information.dimensions',
+  dashboardMediaMetadataPanelFormInformationFolder = 'dashboard.media.metadata.panel.form.information.folder',
+  dashboardMediaFolderCreationButtonCreate = 'dashboard.media.folderCreation.button.create',
   panelActionsTitle = 'panel.actions.title',
   panelActionsOpenDashboard = 'panel.actions.openDashboard',
   panelActionsOpenPreview = 'panel.actions.openPreview',
diff --git a/src/services/PagesParser.ts b/src/services/PagesParser.ts
index c9d0cb8d..4bf0fa30 100644
--- a/src/services/PagesParser.ts
+++ b/src/services/PagesParser.ts
@@ -30,6 +30,7 @@ export class PagesParser {
   public static cachedPages: Page[] | undefined = undefined;
   private static parser: Promise<void> | undefined;
   private static initialized: boolean = false;
+  private static pagesStatusBar = window.createStatusBarItem(StatusBarAlignment.Left);
 
   /**
    * Start the page parser
@@ -75,11 +76,10 @@ export class PagesParser {
     // Update the dashboard with the fresh data
     const folderInfo = await Folders.getInfo();
     const pages: Page[] = [];
-    const statusBar = window.createStatusBarItem(StatusBarAlignment.Left);
 
     if (folderInfo) {
-      statusBar.text = '$(sync~spin) Processing pages...';
-      statusBar.show();
+      PagesParser.pagesStatusBar.text = '$(sync~spin) Processing pages...';
+      PagesParser.pagesStatusBar.show();
 
       for (const folder of folderInfo) {
         for (const file of folder.lastModified) {
@@ -118,7 +118,7 @@ export class PagesParser {
     this.parser = undefined;
     this.initialized = true;
     PagesParser.allPages = [...pages];
-    statusBar.hide();
+    PagesParser.pagesStatusBar.hide();
   }
 
   /**