Localization of steps + taxonomy

src/dashboardWebView/components/SnippetsView/NewForm.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { GeneralCommands } from '../../../constants';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SnippetInput } from './SnippetInput';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface INewFormProps {
   title: string;
@@ -39,7 +41,8 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
     <div className="space-y-4">
       <div>
         <label htmlFor={`title`} className="block text-sm font-medium capitalize">
-          Title{' '}
+          {l10n.t(LocalizationKey.commonTitle)}
+          {' '}
           <span className={getColors(`text-red-400`, `text-[var(--vscode-notificationsErrorIcon-foreground)]`)} title="Required field">
             *
           </span>
@@ -48,7 +51,7 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
           <SnippetInput
             name='title'
             value={title}
-            placeholder='Snippet title'
+            placeholder={l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputTitlePlaceholder)}
             onChange={(e) => onTitleUpdate(e.currentTarget.value)}
           />
         </div>
@@ -56,13 +59,13 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
 
       <div>
         <label htmlFor={`description`} className="block text-sm font-medium capitalize">
-          Description
+          {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputDescriptionLabel)}
         </label>
         <div className="mt-1">
           <SnippetInput
             name='description'
             value={description}
-            placeholder='Snippet description'
+            placeholder={l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputDescriptionPlaceholder)}
             onChange={(e) => onDescriptionUpdate(e.currentTarget.value)}
           />
         </div>
@@ -70,7 +73,8 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
 
       <div>
         <label htmlFor={`snippet`} className="block text-sm font-medium capitalize">
-          Snippet{' '}
+          {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputSnippetLabel)}
+          {' '}
           <span className="text-red-400" title="Required field">
             *
           </span>
@@ -79,7 +83,7 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
           <SnippetInput
             name='snippet'
             value={body}
-            placeholder='Snippet content'
+            placeholder={l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputSnippetPlaceholder)}
             onChange={(e) => onBodyUpdate(e.currentTarget.value)}
             isTextArea
           />
@@ -87,8 +91,8 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
       </div>
 
       <div>
-        <label htmlFor={`snippet`} className="block text-sm font-medium">
-          Is a media snippet?
+        <label htmlFor={`isMediaSnippet`} className="block text-sm font-medium">
+          {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputIsMediaSnippetLabel)}
         </label>
         <div className="mt-1 relative flex items-start">
           <div className="flex items-center h-5">
@@ -112,21 +116,19 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
               className={`font-medium ${getColors(`text-vulcan-100 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
                 }`}
             >
-              Media snippet
+              {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputIsMediaSnippetCheckboxLabel)}
             </label>
             <p id="isMediaSnippet-description" className={getColors('text-vulcan-300 dark:text-whisper-500', `text-[var(--vscode-foreground)]`)}>
-              Use the current snippet for inserting media files into your content.
+              {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputIsMediaSnippetCheckboxDescription)}
             </p>
             <p>
-              Check our{' '}
               <button
                 className={getColors('text-teal-700 hover:text-teal-500', 'text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]')}
                 onClick={openLink}
-                title="media snippet placeholders"
+                title={l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputDocsButtonTitle)}
               >
-                media snippet placeholders
-              </button>{' '}
-              documentation to know which placeholders you can use.
+                {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputDocsButtonDescription)}
+              </button>
             </p>
           </div>
         </div>

src/dashboardWebView/components/SnippetsView/Snippets.tsx

@@ -16,11 +16,13 @@ import { FormDialog } from '../Modals/FormDialog';
 import { SponsorMsg } from '../Layout/SponsorMsg';
 import { Item } from './Item';
 import { NewForm } from './NewForm';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface ISnippetsProps { }
 
 export const Snippets: React.FunctionComponent<ISnippetsProps> = (
-  props: React.PropsWithChildren<ISnippetsProps>
+  _: React.PropsWithChildren<ISnippetsProps>
 ) => {
   const settings = useRecoilValue(SettingsSelector);
   const viewData = useRecoilValue(ViewDataSelector);
@@ -92,10 +94,10 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
           <div
             className={`py-3 px-4 flex items-center justify-between border-b ${getColors(`border-gray-300 dark:border-vulcan-100`, `border-[var(--frontmatter-border)]`)
               }`}
-            aria-label="snippets header"
+            aria-label={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsAriaLabel)}
           >
             <FilterInput
-              placeholder="Search"
+              placeholder={l10n.t(LocalizationKey.commonSearch)}
               isReady={true}
               autoFocus={(snippetKeys && snippetKeys.length > 0)}
               value={snippetFilter}
@@ -110,11 +112,13 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
                   `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
                 )
                   }`}
-                title={`Create new snippet`}
+                title={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsButtonCreate)}
                 onClick={() => setShowCreateDialog(true)}
               >
                 <PlusSmIcon className={`mr-2 h-6 w-6`} />
-                <span className={`text-sm`}>Create new snippet</span>
+                <span className={`text-sm`}>
+                  {l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsButtonCreate)}
+                </span>
               </button>
             </div>
           </div>
@@ -124,7 +128,9 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
       <div className="flex flex-col h-full">
         {viewData?.data?.filePath && (
           <div className={`text-xl text-center mb-6`}>
-            <p>Select the snippet to add to your content.</p>
+            <p>
+              {l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsSelectDescription)}
+            </p>
           </div>
         )}
 
@@ -142,14 +148,16 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
             <div className={`flex flex-col items-center ${getColors('text-gray-500 dark:text-whisper-900', 'text-[var(--frontmatter-text)]')
               }`}>
               <CodeIcon className="w-32 h-32" />
-              <p className="text-3xl mt-2">No snippets found</p>
+              <p className="text-3xl mt-2">
+                {l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsEmptyMessage)}
+              </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/snippets`}
-                  title={`Read more to get started with snippets`}
+                  title={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsReadMore)}
                 >
-                  Read more to get started with snippets
+                  {l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsReadMore)}
                 </a>
               </p>
             </div>
@@ -158,13 +166,13 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
 
         {showCreateDialog && (
           <FormDialog
-            title={`Create a snippet`}
+            title={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsFormDialogTitle)}
             description={``}
             isSaveDisabled={!snippetTitle || !snippetBody}
             trigger={onSnippetAdd}
             dismiss={reset}
-            okBtnText="Save"
-            cancelBtnText="Cancel"
+            okBtnText={l10n.t(LocalizationKey.commonSave)}
+            cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
           >
             <NewForm
               title={snippetTitle}