Added localization

New i18n feature

.github/actions/localization/action.yml

@@ -0,0 +1,46 @@
+name: Localization sync
+description: Syncs the localization values from English to the other supported languages
+
+inputs:
+  TRANSLATION_API_KEY:
+    description: 'The API key for the translation service'
+    required: true
+  TRANSLATION_API_LOCATION:
+    description: 'The location of the translation service'
+    required: true
+  TRANSLATION_API_URL:
+    description: 'The URL of the translation service'
+    required: true
+  PACKAGE_NAME:
+    description: 'The name of the package to be uploaded'
+    required: true
+  
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 18
+        registry-url: https://registry.npmjs.org/
+        cache: 'npm'
+
+    - name: Install the dependencies
+      shell: bash
+      run: npm ci
+
+    - name: Sync localization
+      shell: bash
+      run: npm run localization:sync
+      env:
+        TRANSLATION_API_KEY: ${{ inputs.TRANSLATION_API_KEY }}
+        TRANSLATION_API_LOCATION: ${{ inputs.TRANSLATION_API_LOCATION }}
+        TRANSLATION_API_URL: ${{ inputs.TRANSLATION_API_URL }}
+
+    - name: Remove the node_modules
+      shell: bash
+      run: rm -rf node_modules
+
+    - uses: actions/upload-artifact@v4
+      with:
+        name: ${{ inputs.PACKAGE_NAME }}
+        path: .

.github/workflows/release-beta.yml

@@ -5,19 +5,45 @@ on:
       - dev
   workflow_dispatch:
 
+env:
+  PACKAGE_NAME: 'fm-localized'
+  MS_URL: 'https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter-beta'
+  VSX_URL: 'https://open-vsx.org/extension/eliostruyf/vscode-front-matter-beta'
+
 jobs:
-  build:
-    name: 'Build and release'
+  localization:
+    name: 'Localization'
     runs-on: ubuntu-latest
-    environment:
-      name: Beta
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+
+      - name: Localize the solution
+        uses: ./.github/actions/localization
+        with:
+          TRANSLATION_API_KEY: ${{ secrets.TRANSLATION_API_KEY }}
+          TRANSLATION_API_LOCATION: ${{ secrets.TRANSLATION_API_LOCATION }}
+          TRANSLATION_API_URL: ${{ secrets.TRANSLATION_API_URL }}
+          PACKAGE_NAME: ${{ env.PACKAGE_NAME }}
+
+  release-ms:
+    name: 'Release to VSCode Marketplace'
+    runs-on: ubuntu-latest
+    needs: localization
+    environment:
+      name: 'MS - BETA'
+      url: ${{ env.MS_URL }}
+
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: ${{ env.PACKAGE_NAME }}
+
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
           registry-url: https://registry.npmjs.org/
+          cache: 'npm'
 
       - name: Install the dependencies
         run: npm ci
@@ -25,15 +51,33 @@ jobs:
       - name: Prepare BETA
         run: node scripts/beta-release.js $GITHUB_RUN_ID
 
-      - name: Run localization sync
-        run: npm run localization:sync
-        env:
-          TRANSLATION_API_KEY: ${{ secrets.TRANSLATION_API_KEY }}
-          TRANSLATION_API_LOCATION: ${{ secrets.TRANSLATION_API_LOCATION }}
-          TRANSLATION_API_URL: ${{ secrets.TRANSLATION_API_URL }}
-
       - name: Publish
         run: npx @vscode/vsce publish -p ${{ secrets.VSCE_PAT }} --baseImagesUrl https://raw.githubusercontent.com/estruyf/vscode-front-matter/dev
 
+  release-vsx:
+    name: 'Release to Open VSX'
+    runs-on: ubuntu-latest
+    needs: localization
+    environment:
+      name: 'Open VSX - BETA'
+      url: ${{ env.VSX_URL }}
+
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: ${{ env.PACKAGE_NAME }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+          cache: 'npm'
+
+      - name: Install the dependencies
+        run: npm ci
+
+      - name: Prepare BETA
+        run: node scripts/beta-release.js $GITHUB_RUN_ID
+
       - name: Publish to open-vsx.org
         run: npx ovsx publish -p ${{ secrets.OPEN_VSX_PAT }}

.github/workflows/release.yml

@@ -5,19 +5,45 @@ on:
       - published
   workflow_dispatch:
 
+env:
+  PACKAGE_NAME: 'fm-localized'
+  MS_URL: 'https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter'
+  VSX_URL: 'https://open-vsx.org/extension/eliostruyf/vscode-front-matter'
+
 jobs:
-  build:
-    name: 'Build and release'
+  localization:
+    name: 'Localization'
     runs-on: ubuntu-latest
-    environment:
-      name: Stable
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+
+      - name: Localize the solution
+        uses: ./.github/actions/localization
+        with:
+          TRANSLATION_API_KEY: ${{ secrets.TRANSLATION_API_KEY }}
+          TRANSLATION_API_LOCATION: ${{ secrets.TRANSLATION_API_LOCATION }}
+          TRANSLATION_API_URL: ${{ secrets.TRANSLATION_API_URL }}
+          PACKAGE_NAME: ${{ env.PACKAGE_NAME }}
+
+  release-ms:
+    name: 'Release to VSCode Marketplace'
+    runs-on: ubuntu-latest
+    needs: localization
+    environment:
+      name: 'MS - Stable'
+      url: ${{ env.MS_URL }}
+
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: ${{ env.PACKAGE_NAME }}
+
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
           registry-url: https://registry.npmjs.org/
+          cache: 'npm'
 
       - name: Install the dependencies
         run: npm ci
@@ -25,15 +51,33 @@ jobs:
       - name: Prepare MAIN release
         run: node scripts/main-release.js
 
-      - name: Run localization sync
-        run: npm run localization:sync
-        env:
-          TRANSLATION_API_KEY: ${{ secrets.TRANSLATION_API_KEY }}
-          TRANSLATION_API_LOCATION: ${{ secrets.TRANSLATION_API_LOCATION }}
-          TRANSLATION_API_URL: ${{ secrets.TRANSLATION_API_URL }}
-
       - name: Publish
         run: npx @vscode/vsce publish -p ${{ secrets.VSCE_PAT }}
 
+  release-vsx:
+    name: 'Release to Open VSX'
+    runs-on: ubuntu-latest
+    needs: localization
+    environment:
+      name: 'Open VSX - Stable'
+      url: ${{ env.VSX_URL }}
+
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: ${{ env.PACKAGE_NAME }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+          cache: 'npm'
+
+      - name: Install the dependencies
+        run: npm ci
+
+      - name: Prepare MAIN release
+        run: node scripts/main-release.js
+
       - name: Publish to open-vsx.org
         run: npx ovsx publish -p ${{ secrets.OPEN_VSX_PAT }}

.vscode/settings.json

@@ -1,5 +1,11 @@
 // Place your settings in this file to overwrite default and user settings.
 {
+  "workbench.colorCustomizations": {
+    "titleBar.activeBackground": "#15c2cb",
+    "titleBar.inactiveBackground": "#44ffd299",
+    "titleBar.activeForeground": "#0E131F",
+    "titleBar.inactiveForeground": "#0E131F99"
+  },
   "files.exclude": {
     "out": false // set this to true to hide the "out" folder with the compiled JS files
   },
@@ -8,8 +14,6 @@
   },
   // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
   "typescript.tsc.autoDetect": "off",
-  "eliostruyf.writingstyleguide.terms.isDisabled": true,
-  "eliostruyf.writingstyleguide.biasFree.isDisabled": true,
   "squarl.groups": [
     {
       "id": "dashboard",

CHANGELOG.md

@@ -1,22 +1,52 @@
 # Change Log
 
-## [9.5.0] - 2024-xx-xx
+## [10.1.0] - 2024-xx-xx
+
+### ✨ New features
+
+### 🎨 Enhancements
+
+### ⚡️ Optimizations
+
+### 🐞 Fixes
+
+- [#768](https://github.com/estruyf/vscode-front-matter/issues/768): Update broken link to the documentation
+
+## [10.0.1] - 2024-02-28
+
+### 🐞 Fixes
+
+- [#766](https://github.com/estruyf/vscode-front-matter/issues/766): Fix for snippet placeholder retrieval
+
+## [10.0.0] - 2024-02-28 - [Release notes](https://beta.frontmatter.codes/updates/v10.0.0)
 
 ### ✨ New features
 
 - [#731](https://github.com/estruyf/vscode-front-matter/issues/731): Added the ability to map/unmap taxonomy to multiple pages at once
+- [#746](https://github.com/estruyf/vscode-front-matter/issues/746): Placeholder support added to to the `slug` field
+- [#749](https://github.com/estruyf/vscode-front-matter/issues/749): Ability to set your own filters on the content dashboard with the `frontMatter.content.filters` setting
+- [#756](https://github.com/estruyf/vscode-front-matter/issues/756): i18n/multilingual content support
 
 ### 🎨 Enhancements
 
+- [#673](https://github.com/estruyf/vscode-front-matter/pull/673): Added git settings to the welcome view and settings view
 - [#727](https://github.com/estruyf/vscode-front-matter/pull/727): Updated Japanese translations thanks to [mayumihara](https://github.com/mayumih387)
-
-### ⚡️ Optimizations
+- [#737](https://github.com/estruyf/vscode-front-matter/issues/737): Optimize the grid layout of the content and media dashboards
+- [#739](https://github.com/estruyf/vscode-front-matter/pull/739): New Git settings to disable and require a commit message
+- [#741](https://github.com/estruyf/vscode-front-matter/issues/741): Added message on the content dashboard when content is processed
+- [#747](https://github.com/estruyf/vscode-front-matter/issues/747): The `@frontmatter/extensibility` dependency now supports scripts for placeholders
+- [#752](https://github.com/estruyf/vscode-front-matter/issues/752): Placeholder support in default `list` field values
+- Support for using the `fieldCollection` field in a `block` field
+- Updated the list of commands which are available in the command palette
 
 ### 🐞 Fixes
 
 - [#721](https://github.com/estruyf/vscode-front-matter/issues/721): Fix keywords regex to support unicode characters
 - [#725](https://github.com/estruyf/vscode-front-matter/issues/725): Fix for opening menu of pinned items
 - [#730](https://github.com/estruyf/vscode-front-matter/issues/730): Add debounce to the input fields
+- [#738](https://github.com/estruyf/vscode-front-matter/issues/738): Fix when re-opening the preview after closing it
+- [#743](https://github.com/estruyf/vscode-front-matter/issues/743): Fix for storing data in YAML data files
+- [#745](https://github.com/estruyf/vscode-front-matter/issues/745): Fix for date field values in `block` field type
 
 ## [9.4.0] - 2023-12-12 - [Release notes](https://beta.frontmatter.codes/updates/v9.4.0)
 

README.beta.md

@@ -54,6 +54,12 @@ A couple of our extension highlights that hopefully get you interested in giving
 
 > If you see something missing in your article creation flow, please feel free to reach out.
 
+**Version 10**
+
+In version 10, we introduced the new i18n/multilingual support for your content. You can now manage your content in multiple languages, more information can be found in the [multilingual](https://frontmatter.codes/docs/content-creation/multilingual) section of our documentation.
+
+![Multilingual support](https://beta.frontmatter.codes/releases/v10.0.0/multilingual-content.png)
+
 **Version 9**
 
 The extension is now available in multiple languages: English, German, and Japanese. Want to add your language? Check out the [localization the extension](https://frontmatter.codes/docs/contributing#translating-the-extension).
@@ -187,6 +193,27 @@ You can open showcase issues for the following things:
   </a>
 </p>
 
+## 📊 Telemetry
+
+The Front Matter CMS extension collects telemetry data to help us build a better understand which features from the CMS are used. The extension respects the `telemetry.enableTelemetry` setting which you can learn more about in the [Visual Studio Code FAQ](https://aka.ms/vscode-remote/telemetry), or you can only disable it for the extension by configuring the `frontMatter.telemetry.disable` setting.
+
+We only collect the following data:
+
+- Type of event
+- Extension title (main or beta)
+- Extension version
+
+No user-specific data is collected, you can check the telemetry implementation in the following files:
+
+- [Telemetry class](https://github.com/estruyf/vscode-front-matter/blob/59528a3db01be8d34dc40638e6cf827090e31986/src/helpers/Telemetry.ts)
+- [Metrics API](https://github.com/FrontMatter/web-documentation-nextjs/blob/main/pages/api/metrics.ts)
+
+For crash reports in the webviews, we make use of Sentry to help us understand what went wrong. This data is only used to fix issues and improve the extension. You can find more information about the Sentry implementation in the following files:
+
+- [Sentry config](https://github.com/estruyf/vscode-front-matter/blob/63e296d62f11be73ac86d9e823084247952a7ddc/src/utils/sentryInit.ts)
+
+> The user ip address is not collected.
+
 ## 🔑 License
 
 [MIT](./LICENSE)

README.md

@@ -52,6 +52,12 @@ A couple of our extension highlights that hopefully get you interested in giving
 
 > If you see something missing in your article creation flow, please feel free to reach out.
 
+**Version 10**
+
+In version 10, we introduced the new i18n/multilingual support for your content. You can now manage your content in multiple languages, more information can be found in the [multilingual](https://frontmatter.codes/docs/content-creation/multilingual) section of our documentation.
+
+![Multilingual support](https://beta.frontmatter.codes/releases/v10.0.0/multilingual-content.png)
+
 **Version 9**
 
 The extension is now available in multiple languages: English, German, and Japanese. Want to add your language? Check out the [localization the extension](https://frontmatter.codes/docs/contributing#translating-the-extension).
@@ -193,6 +199,27 @@ You can open showcase issues for the following things:
    </a>
 </p>
 
+## 📊 Telemetry
+
+The Front Matter CMS extension collects telemetry data to help us build a better understand which features from the CMS are used. The extension respects the `telemetry.enableTelemetry` setting which you can learn more about in the [Visual Studio Code FAQ](https://aka.ms/vscode-remote/telemetry), or you can only disable it for the extension by configuring the `frontMatter.telemetry.disable` setting.
+
+We only collect the following data:
+
+- Type of event
+- Extension title (main or beta)
+- Extension version
+
+No user-specific data is collected, you can check the telemetry implementation in the following files:
+
+- [Telemetry class](https://github.com/estruyf/vscode-front-matter/blob/59528a3db01be8d34dc40638e6cf827090e31986/src/helpers/Telemetry.ts)
+- [Metrics API](https://github.com/FrontMatter/web-documentation-nextjs/blob/main/pages/api/metrics.ts)
+
+For crash reports in the webviews, we make use of Sentry to help us understand what went wrong. This data is only used to fix issues and improve the extension. You can find more information about the Sentry implementation in the following files:
+
+- [Sentry config](https://github.com/estruyf/vscode-front-matter/blob/63e296d62f11be73ac86d9e823084247952a7ddc/src/utils/sentryInit.ts)
+
+> The user ip address is not collected.
+
 ## 🔑 License
 
 [MIT](./LICENSE)

SUPPORT.md

@@ -0,0 +1,17 @@
+# Support
+
+This article provides information on how to get support for Front Matter CMS.
+
+> 👉 Note: before participating in our community, please read our [code of conduct](./CODE_OF_CONDUCT.md). By interacting with this repository, organization, or community you agree to abide by its terms.
+
+## Asking for help
+
+There are a few different ways to ask for help with Front Matter CMS:
+
+1. **GitHub Discussions**: You can ask questions and share your experiences in the [Discussions](https://github.com/estruyf/vscode-front-matter/discussions) section of this repository.
+2. **GitHub Issues**: If you encounter a bug or have a feature request, you can open an issue in the [Issues](https://github.com/estruyf/vscode-front-matter/issues) section of this repository.
+3. **Discord**: You can join our [Discord](https://discord.gg/JBVtNMsJFB) server and ask your questions there.
+
+## Contributing
+
+If you would like to contribute to Front Matter CMS, please read our [contributing guide](./CONTRIBUTING.md).

assets/icons/i18n-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
+</svg>

assets/icons/i18n-light.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#424242">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
+</svg>

assets/media/styles.css

@@ -247,14 +247,6 @@
   background-color: var(--vscode-button-secondaryHoverBackground);
 }
 
-.table__cell {
-  overflow: hidden;
-}
-
-.table__title {
-  text-transform: capitalize;
-}
-
 .table__cell__seo_details {
   padding: 10px;
 }
@@ -281,11 +273,6 @@
   margin-left: 0.5rem;
 }
 
-.seo__status__note {
-  font-size: 10px;
-  padding: 3px 0;
-}
-
 /* Fields */
 .field__toggle {
   position: relative;
@@ -364,7 +351,7 @@ input:checked + .field__toggle__slider:before {
 }
 
 /* File list */
-.file_list vscode-label {
+.file_list label {
   border-bottom: 1px solid var(--vscode-foreground);
 }
 

e2e/src/command.test.ts

@@ -1,78 +0,0 @@
-import { By, VSBrowser, EditorView, WebView, Workbench, Notification, StatusBar, NotificationType } from "vscode-extension-tester";
-import { expect } from "chai";
-import { sleep } from "./utils";
-import { join } from "path";
-
-// https://github.com/microsoft/vscode-java-dependency/blob/4256fa6adcaff5ec24dbdbb8d9a516fad21431c5/test/ui/index.ts
-// https://github.com/microsoft/vscode-java-dependency/blob/4256fa6adcaff5ec24dbdbb8d9a516fad21431c5/test/ui/command.test.ts
-
-describe("Initialization testing", function() {
-  this.timeout(2 * 60 * 1000 /*ms*/);
-
-  let workbench: Workbench;
-  let view: WebView;
-
-  before(async function() {
-    await VSBrowser.instance.openResources(join(__dirname, '../sample'));
-    await sleep(3000);
-    workbench = new Workbench();
-
-    await workbench.executeCommand("frontMatter.dashboard");
-    await sleep(3000);
-
-    await new EditorView().openEditor(`FrontMatter Dashboard`);
-
-    view = new WebView();
-    await view.switchToFrame();
-  });
-
-  it("1. Open welcome dashboard", async function() {
-    const element = await view.findWebElement(By.css('h1'));
-
-    const title = await element.getText();
-
-    expect(title).has.string(`Front Matter`);
-  });
-
-  it("2. Initialize project", async function() {
-    const btn = await view.findWebElement(By.css('[data-test="welcome-init"] button'));
-    expect(btn).to.exist;
-
-    await btn.click();
-
-    await sleep(1000);
-
-    await VSBrowser.instance.driver.wait(() => {
-      return notificationExists(workbench, 'Front Matter:');
-    }, 2000) as Notification;
-
-    const notifications = await workbench.getNotifications();
-
-    let notification!: Notification;
-    for (const not of notifications) {
-      console.log(not);
-
-      // const message = await not.get;
-      // console.log(message);
-      // if (message.includes('Front Matter:')) {
-      //   notification = not;
-      // }
-    }
-
-    expect(await notification.getMessage()).has.string(`Project initialized successfully.`);
-  });
-
-  it("3. Check if project file is created", async function() {});
-});
-
-
-async function notificationExists(workbench: Workbench, text: string): Promise<Notification | undefined> {
-  const notifications = await (await (new StatusBar()).openNotificationsCenter()).getNotifications(NotificationType.Info);
-
-  for (const notification of notifications) {
-    const message = await notification.getMessage();
-    if (message.indexOf(text) >= 0) {
-      return notification;
-    }
-  }
-}

e2e/src/runTests.ts

@@ -1,33 +0,0 @@
-import * as path from 'path'
-import * as semver from 'semver'
-import { ExTester, ReleaseQuality } from 'vscode-extension-tester'
-
-async function main(): Promise<void> {
-  const vsCodeVersion: semver.SemVer = new semver.SemVer(`1.66.0`)
-  const version = vsCodeVersion.version
-
-  const storageFolder = path.join(__dirname, '..', 'storage')
-  const extFolder = path.join(__dirname, '..', 'extensions')
-
-  try {
-    const testPath = path.join(__dirname, 'command.test.js')
-
-    const exTester = new ExTester(storageFolder, ReleaseQuality.Stable, extFolder)
-    await exTester.downloadCode(version)
-    await exTester.installVsix({ useYarn: false })
-    // await exTester.installFromMarketplace("eliostruyf.vscode-front-matter");
-    await exTester.downloadChromeDriver(version)
-    // await exTester.setupRequirements({vscodeVersion: version});
-    const result = await exTester.runTests(testPath, {
-      vscodeVersion: version,
-      resources: [storageFolder],
-    })
-
-    process.exit(result)
-  } catch (err) {
-    console.log(err)
-    process.exit(1)
-  }
-}
-
-main()

e2e/src/utils/index.ts

@@ -1 +0,0 @@
-export * from './sleep';

e2e/src/utils/sleep.ts

@@ -1,3 +0,0 @@
-export async function sleep(time: number) {
-  await new Promise((resolve) => setTimeout(resolve, time));
-}

l10n/bundle.l10n.ja.json

@@ -4,6 +4,7 @@
   "common.delete": "削除",
   "common.cancel": "キャンセル",
   "common.clear": "クリア",
+  "common.apply": "適用",
   "common.clear.value": "値をクリア",
   "common.search": "検索",
   "common.save": "保存",
@@ -20,6 +21,7 @@
   "common.slug": "スラッグ",
   "common.support": "サポート",
   "common.remove.value": "{0}を削除",
+  "common.filter": "絞り込み",
   "common.filter.value": "{0}で絞り込み",
   "common.error.message": "申し訳ありません。エラーが発生しました。",
   "common.openOnWebsite": "ウェブサイトで開く",
@@ -32,6 +34,7 @@
   "common.yes": "はい",
   "common.no": "いいえ",
   "common.openSettings": "設定を開く",
+  "common.back": "戻る",
 
   "notifications.outputChannel.link": "出力ウィンドウ",
   "notifications.outputChannel.description": "詳細は{0}を確認してください。",
@@ -117,7 +120,7 @@
 
   "dashboard.header.breadcrumb.home": "ホーム",
 
-  "dashboard.header.clearFilters.title": "フィルター・グループ・並べ替えを解除",
+  "dashboard.header.clearFilters.title": "絞り込み・グループ・並べ替えを解除",
 
   "dashboard.header.filter.default": "なし",
 
@@ -294,6 +297,10 @@
   "dashboard.taxonomyView.taxonomyManager.table.heading.action": "コマンド",
   "dashboard.taxonomyView.taxonomyManager.table.row.empty": "{0}はありません",
   "dashboard.taxonomyView.taxonomyManager.table.unmapped.title": "設定ファイルに見つかりません",
+  "dashboard.taxonomyView.taxonomyManager.filterInput.placeholder": "絞り込み",
+
+  "dashboard.taxonomyView.taxonomyTagging.pageTitle": "タクソノミー {0} をリマッピング",
+  "dashboard.taxonomyView.taxonomyTagging.checkbox": "ページにタクソノミー{0}を付ける",
 
   "dashboard.taxonomyView.taxonomyView.navigationBar.title": "タクソノミーを選択",
   "dashboard.taxonomyView.taxonomyView.button.import": "タクソノミーをインポート",
@@ -661,9 +668,11 @@
   "helpers.taxonomyHelper.createNew.input.placeholder": "作成したいタクソノミー名を入力してください。",
   "helpers.taxonomyHelper.createNew.input.validate.noValue": "タクソノミー名は必須です。",
   "helpers.taxonomyHelper.createNew.input.validate.exists": "このタクソノミー名は既に存在しています。",
+  "helpers.taxonomyHelper.process.insert": "{0}: 選択した記事に \"{1}\" を追加しています。",
   "helpers.taxonomyHelper.process.edit": "{0}: {2}内の\"{1}\"を{3}に変更しています。",
   "helpers.taxonomyHelper.process.merge": "{0}: {2}内の\"{1}\"を{3}にマージしています。",
   "helpers.taxonomyHelper.process.delete": "{0}: \"{1}\"を{2}から削除しています。",
+  "helpers.taxonomyHelper.process.insert.success": "追加しました。",
   "helpers.taxonomyHelper.process.edit.success": "変更しました。",
   "helpers.taxonomyHelper.process.merge.success": "マージしました。",
   "helpers.taxonomyHelper.process.delete.success": "削除しました。",

l10n/bundle.l10n.json

@@ -35,6 +35,14 @@
   "common.no": "no",
   "common.openSettings": "Open settings",
   "common.back": "Back",
+  "common.open": "Open",
+  "common.openWithValue": "Open: {0}",
+  "common.view": "View",
+  "common.translate": "Translate",
+  "common.languages": "Languages",
+  "common.scripts": "Scripts",
+
+  "loading.initPages": "Loading content",
 
   "notifications.outputChannel.link": "output window",
   "notifications.outputChannel.description": "Check the {0} for more details.",
@@ -42,18 +50,36 @@
   "settings.view.common": "Common",
   "settings.view.contentFolders": "Content folders",
   "settings.view.astro": "Astro",
+  "settings.view.integration": "Integration",
+
   "settings.openOnStartup": "Open dashboard on startup",
   "settings.contentTypes": "Content types",
   "settings.contentFolders": "Content folders",
   "settings.diagnostic": "Diagnostic",
   "settings.diagnostic.description": "You can run the diagnostics to check the whole Front Matter CMS configuration.",
   "settings.diagnostic.link": "Run full diagnostics",
+  "settings.git": "Git synchronization",
+  "settings.git.enabled": "Enable Git synchronization to easily sync your changes with your repository.",
+  "settings.git.commitMessage": "Commit message",
+  "settings.git.submoduleInfo": "When working with Git submodules, you can refer to the submodule settings in the documentation.",
+  "settings.git.submoduleLink": "Read more about Git submodules",
+  "settings.integration.title": "Integration",
 
   "settings.commonSettings.website.title": "Website and SSG settings",
   "settings.commonSettings.previewUrl": "Preview URL",
   "settings.commonSettings.websiteUrl": "Website URL",
   "settings.commonSettings.startCommand": "SSG/Framework start command",
 
+  "settings.integrationsView.deepl.title": "DeepL",
+  "settings.integrationsView.deepl.intput.label": "API key",
+  "settings.integrationsView.deepl.intput.placeholder": "Enter your Azure Translator API key",
+
+  "settings.integrationsView.azure.title": "Azure AI Translator Service",
+  "settings.integrationsView.azure.intput.label": "Subscription key",
+  "settings.integrationsView.azure.intput.placeholder": "Enter your Azure AI Translator - Subscription key",
+  "settings.integrationsView.azure.region.label": "Region",
+  "settings.integrationsView.azure.region.placeholder": "Enter your Azure AI Translator - Region. Example: westeurope",
+
   "developer.title": "Developer mode",
   "developer.reload.title": "Reload the dashboard",
   "developer.reload.label": "Reload",
@@ -81,6 +107,8 @@
   "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.contentActions.translations.create": "Create translation",
+  "dashboard.contents.contentActions.translations.menu": "Translations",
 
   "dashboard.contents.item.invalidTitle": "<invalid title>",
   "dashboard.contents.item.invalidDescription": "<invalid description>",
@@ -108,6 +136,7 @@
   "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.dataView.update.message": "Updated your data entries",
 
   "dashboard.dataView.emptyView.heading": "Select your date type first",
 
@@ -118,6 +147,13 @@
 
   "dashboard.errorView.description": "Please close the dashboard and try again.",
 
+  "dashboard.filters.languageFilter.label": "Locale",
+  "dashboard.filters.languageFilter.all": "All",
+
+  "dashboard.header.actionsBar.itemsSelected": "{0} selected",
+  "dashboard.header.actionsBar.alertDelete.title": "Delete selected files",
+  "dashboard.header.actionsBar.alertDelete.description": "Are you sure you want to delete the selected files?",
+
   "dashboard.header.breadcrumb.home": "Home",
 
   "dashboard.header.clearFilters.title": "Clear filters, grouping, and sorting",
@@ -201,10 +237,17 @@
   "dashboard.media.folderCreation.hexo.create": "Create post asset folder",
   "dashboard.media.folderCreation.folder.create": "Create new folder",
 
+  "dashboard.media.folderItem.contentDirectory": "Content directory",
+  "dashboard.media.folderItem.publicDirectory": "Public directory",
+
+  "dashboard.media.item.buttom.insert.image": "Insert image",
+  "dashboard.media.item.buttom.insert.snippet": "Insert snippet",
+
   "dashboard.media.item.quickAction.insert.field": "Insert image for your \"{0}\" field",
   "dashboard.media.item.quickAction.insert.markdown": "Insert image with markdown markup",
   "dashboard.media.item.quickAction.copy.path": "Copy media path",
   "dashboard.media.item.quickAction.delete": "Delete media file",
+  "dashboard.media.item.menuItem.view": "View media details",
   "dashboard.media.item.menuItem.edit.metadata": "Edit metadata",
   "dashboard.media.item.menuItem.insert.image": "Insert image",
   "dashboard.media.item.menuItem.reveal.media": "Reveal media",
@@ -215,7 +258,7 @@
   "dashboard.media.media.dragAndDrop": "You can also drag and drop images from your desktop and select them once uploaded.",
   "dashboard.media.media.folder.upload": "Upload to {0}",
   "dashboard.media.media.folder.default": "No folder selected, files you drop will be added to the {0} folder",
-  "dashboard.media.media.placeholder": "No media files to show. You can drag &amp; drop new files by holding your [shift] key.",
+  "dashboard.media.media.placeholder": "No media files to show. You can drag&drop new files by holding your [shift] key.",
   "dashboard.media.media.contentFolder": "Content folder",
   "dashboard.media.media.publicFolder": "Public folder",
 
@@ -275,6 +318,8 @@
   "dashboard.steps.stepsToGetStarted.contentFolders.information.description": "You can also perform this action by right-clicking on the folder in the explorer view, and selecting register folder",
   "dashboard.steps.stepsToGetStarted.tags.name": "Import all tags and categories (optional)",
   "dashboard.steps.stepsToGetStarted.tags.description": "Now that Front Matter knows all the content folders. Would you like to import all tags and categories from the available content?",
+  "dashboard.steps.stepsToGetStarted.git.name": "Do you want to enable Git synchronization?",
+  "dashboard.steps.stepsToGetStarted.git.description": "Enable Git synchronization to eaily sync your changes with your repository.",
   "dashboard.steps.stepsToGetStarted.showDashboard.name": "Show the dashboard",
   "dashboard.steps.stepsToGetStarted.showDashboard.description": "Once all actions are completed, the dashboard can be loaded.",
   "dashboard.steps.stepsToGetStarted.template.name": "Use a configuration template",
@@ -283,6 +328,7 @@
   "dashboard.steps.stepsToGetStarted.astroContentTypes.name": "Create Content-Types for your Astro Content Collections",
 
   "dashboard.taxonomyView.button.add.title": "Add {0} to taxonomy settings",
+  "dashboard.taxonomyView.button.tag.title": "Tag content",
   "dashboard.taxonomyView.button.edit.title": "Edit {0}",
   "dashboard.taxonomyView.button.merge.title": "Merge {0}",
   "dashboard.taxonomyView.button.move.title": "Move to another taxonomy type",
@@ -329,6 +375,11 @@
   "dashboard.configuration.astro.astroContentTypes.empty": "No Astro Content Collections found.",
   "dashboard.configuration.astro.astroContentTypes.description": "The following Astro Content Collections can be used to generate a content-type.",
 
+  "panel.git.gitAction.title": "Publish changes",
+  "panel.git.gitAction.branch.select": "Select branch",
+  "panel.git.gitAction.input.placeholder": "Commit message",
+  "panel.git.gitAction.button.fetch": "Fetch",
+
   "panel.contentType.contentTypeValidator.title": "Content-type",
   "panel.contentType.contentTypeValidator.hint": "We noticed field differences between the content-type and the front matter data. \n Would you like to create, update, or set the content-type for this content?",
   "panel.contentType.contentTypeValidator.button.create": "Create content-type",
@@ -501,6 +552,19 @@
   "commands.folders.get.notificationError.remove.action": "Remove folder",
   "commands.folders.get.notificationError.create.action": "Create folder",
 
+  "commands.i18n.create.warning.noFileSelected": "No file selected.",
+  "commands.i18n.create.warning.noFile": "The file could not be retrieved.",
+  "commands.i18n.create.warning.noContentType": "Content type could not be retrieved for the current file.",
+  "commands.i18n.create.warning.noConfig": "No i18n configuration found.",
+  "commands.i18n.create.error.noLocaleDefinition": "Could not retrieve the locale for the current file.",
+  "commands.i18n.create.error.noLocales": "Current file has been translated to all available languages.",
+  "commands.i18n.create.error.noContentFolder": "Could not define a content folder for the current file.",
+  "commands.i18n.create.error.fileExists": "The i18n translation already exists.",
+  "commands.i18n.create.success.created": "Created \"{0}\" i18n content file.",
+  "commands.i18n.create.quickPick.title": "Create content for locale",
+  "commands.i18n.create.quickPick.placeHolder": "To which locale do you want to create a new content?",
+  "commands.i18n.translate.progress.title": "Translating content...",
+
   "commands.preview.panel.title": "Preview: {0}",
   "commands.preview.askUserToPickFolder.title": "Select the folder of the article to preview",
 
@@ -611,9 +675,6 @@
   "helpers.extension.getVersion.changelog": "Check the changelog",
   "helpers.extension.getVersion.starIt": "Give it a ⭐️",
   "helpers.extension.getVersion.update.notification": "{0} has been updated to v{1} — check out what's new!",
-  "helpers.extension.migrateSettings.deprecated.warning": "The \"{0}\" and \"{1}\" settings have been deprecated. Please use the \"isPublishDate\" and \"isModifiedDate\" datetime field properties instead.",
-  "helpers.extension.migrateSettings.deprecated.warning.hide": "Hide",
-  "helpers.extension.migrateSettings.deprecated.warning.seeGuide": "See migration guide",
   "helpers.extension.migrateSettings.templates.quickPick.title": "{0} - Templates",
   "helpers.extension.migrateSettings.templates.quickPick.placeholder": "Do you want to keep on using the template functionality?",
   "helpers.extension.checkIfExtensionCanRun.warning": "Front Matter BETA cannot be used while the stable version is installed. Please ensure that you have only over version installed.",
@@ -648,6 +709,7 @@
   "helpers.questions.selectContentType.quickPick.title": "Content type",
   "helpers.questions.selectContentType.quickPick.placeholder": "Select the content type to create your new content",
   "helpers.questions.selectContentType.noSelection.warning": "No content type was selected.",
+  "helpers.questions.selectContentType.quickPick.error.noContentTypes": "There are no matching content types configured for this folder.",
 
   "helpers.seoHelper.checkLength.diagnostic.message": "Article {0} is longer than {1} characters (current length: {2}). For SEO reasons, it would be better to make it less than {1} characters.",
 
@@ -690,6 +752,7 @@
   "listeners.dashboard.settingsListener.triggerTemplate.progress.title": "Downloading and initializing the template...",
   "listeners.dashboard.settingsListener.triggerTemplate.download.error": "Failed to download the template.",
   "listeners.dashboard.settingsListener.triggerTemplate.init.error": "Failed to initialize the template.",
+  "listeners.dashboard.settingsListener.setSecretValue.message": "Setting has been updated.",
 
   "listeners.dashboard.snippetListener.addSnippet.missingFields.warning": "Snippet missing title or body",
   "listeners.dashboard.snippetListener.addSnippet.exists.warning": "Snippet with the same title already exists",

package.json

@@ -3,7 +3,7 @@
   "displayName": "Front Matter CMS",
   "description": "Front Matter is a CMS that runs within Visual Studio Code. It gives you the power and control of a full-blown CMS while also providing you the flexibility and speed of the static site generator of your choice like: Hugo, Jekyll, Docusaurus, NextJs, Gatsby, and many more...",
   "icon": "assets/frontmatter-teal-128x128.png",
-  "version": "9.5.0",
+  "version": "10.1.0",
   "preview": false,
   "publisher": "eliostruyf",
   "galleryBanner": {
@@ -311,6 +311,17 @@
                 "type": "boolean",
                 "default": false,
                 "description": "%setting.frontMatter.content.pageFolders.items.properties.disableCreation.description%"
+              },
+              "defaultLocale": {
+                "type": "string",
+                "description": "%setting.frontMatter.content.pageFolders.items.properties.defaultLocale.description%"
+              },
+              "locales": {
+                "type": "array",
+                "description": "%setting.frontMatter.content.pageFolders.items.properties.locales.description%",
+                "items": {
+                  "$ref": "#i18n"
+                }
               }
             },
             "additionalProperties": false,
@@ -321,6 +332,35 @@
           },
           "scope": "Content"
         },
+        "frontMatter.content.i18n": {
+          "type": "array",
+          "default": [],
+          "markdownDescription": "%setting.frontMatter.content.i18n.markdownDescription%",
+          "items": {
+            "$id": "#i18n",
+            "type": "object",
+            "properties": {
+              "title": {
+                "type": "string",
+                "description": "%setting.frontMatter.content.i18n.items.properties.title.description%"
+              },
+              "locale": {
+                "type": "string",
+                "description": "%setting.frontMatter.content.i18n.items.properties.locale.description%"
+              },
+              "path": {
+                "type": "string",
+                "description": "%setting.frontMatter.content.i18n.items.properties.path.description%"
+              }
+            },
+            "additionalProperties": false,
+            "required": [
+              "locale",
+              "path"
+            ]
+          },
+          "scope": "Content"
+        },
         "frontMatter.content.placeholders": {
           "type": "array",
           "default": [],
@@ -492,6 +532,36 @@
           "markdownDescription": "%setting.frontMatter.content.wysiwyg.markdownDescription%",
           "scope": "Content"
         },
+        "frontMatter.content.filters": {
+          "type": "array",
+          "default": [
+            "contentFolders",
+            "tags",
+            "categories"
+          ],
+          "markdownDescription": "%setting.frontMatter.content.filters.markdownDescription%",
+          "items": [
+            {
+              "type": "string",
+              "enum": [
+                "contentFolders",
+                "tags",
+                "categories"
+              ]
+            },
+            {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "name": {
+                  "type": "string"
+                }
+              }
+            }
+          ]
+        },
         "frontMatter.custom.scripts": {
           "type": "array",
           "default": [],
@@ -647,17 +717,6 @@
           "default": "",
           "markdownDescription": "%setting.frontMatter.dashboard.content.card.fields.title.markdownDescription%"
         },
-        "frontMatter.dashboard.mediaSnippet": {
-          "type": "array",
-          "default": [],
-          "markdownDescription": "%setting.frontMatter.dashboard.mediaSnippet.markdownDescription%",
-          "deprecationMessage": "%setting.frontMatter.dashboard.mediaSnippet.deprecationMessage%",
-          "items": {
-            "type": "string",
-            "description": "%setting.frontMatter.dashboard.mediaSnippet.items.description%"
-          },
-          "scope": "dashboard"
-        },
         "frontMatter.dashboard.openOnStart": {
           "type": [
             "boolean",
@@ -874,6 +933,22 @@
           "markdownDescription": "%setting.frontMatter.git.commitMessage.markdownDescription%",
           "default": "Synced by Front Matter"
         },
+        "frontMatter.git.disableOnBranches": {
+          "type": "array",
+          "markdownDescription": "%setting.frontMatter.git.disableOnBranches.markdownDescription%",
+          "default": [],
+          "items": {
+            "type": "string"
+          }
+        },
+        "frontMatter.git.requiresCommitMessage": {
+          "type": "array",
+          "markdownDescription": "%setting.frontMatter.git.requiresCommitMessage.markdownDescription%",
+          "default": [],
+          "items": {
+            "type": "string"
+          }
+        },
         "frontMatter.git.submodule.pull": {
           "type": "boolean",
           "markdownDescription": "%setting.frontMatter.git.submodule.pull.markdownDescription%",
@@ -982,6 +1057,82 @@
           "markdownDescription": "%setting.frontMatter.media.defaultSorting.markdownDescription%",
           "scope": "Content"
         },
+        "frontMatter.media.contentTypes": {
+          "type": [
+            "array",
+            "null"
+          ],
+          "markdownDescription": "%setting.frontMatter.media.contentTypes.markdownDescription%",
+          "items": {
+            "type": "object",
+            "description": "%setting.frontMatter.media.contentTypes.items.description%",
+            "properties": {
+              "name": {
+                "type": "string",
+                "description": "%setting.frontMatter.media.contentTypes.items.properties.name.description%"
+              },
+              "fileTypes": {
+                "type": "array",
+                "description": "%setting.frontMatter.media.contentTypes.items.properties.fileTypes.description%",
+                "items": {
+                  "type": "string"
+                }
+              },
+              "fields": {
+                "type": "array",
+                "description": "%setting.frontMatter.media.contentTypes.items.properties.fields.description%",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "title": {
+                      "type": "string",
+                      "description": "%setting.frontMatter.media.contentTypes.items.properties.fields.properties.title.description%"
+                    },
+                    "name": {
+                      "type": "string",
+                      "description": "%setting.frontMatter.media.contentTypes.items.properties.fields.properties.name.description%"
+                    },
+                    "type": {
+                      "type": "string",
+                      "enum": [
+                        "string"
+                      ],
+                      "description": "%setting.frontMatter.media.contentTypes.items.properties.fields.properties.type.description%"
+                    },
+                    "single": {
+                      "type": "boolean",
+                      "description": "%setting.frontMatter.media.contentTypes.items.properties.fields.properties.single.description%"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "default": [
+            {
+              "name": "default",
+              "fileTypes": null,
+              "fields": [
+                {
+                  "title": "Title",
+                  "name": "title",
+                  "type": "string"
+                },
+                {
+                  "title": "Caption",
+                  "name": "caption",
+                  "type": "string"
+                },
+                {
+                  "title": "Alt text",
+                  "name": "alt",
+                  "type": "string"
+                }
+              ]
+            }
+          ],
+          "scope": "Media"
+        },
         "frontMatter.media.supportedMimeTypes": {
           "type": "array",
           "default": [
@@ -1576,6 +1727,14 @@
                 "default": null,
                 "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.previewPath.description%"
               },
+              "slugTemplate": {
+                "type": [
+                  "null",
+                  "string"
+                ],
+                "default": null,
+                "description": "%setting.frontMatter.content.pageFolders.items.properties.slugTemplate.description%"
+              },
               "template": {
                 "type": "string",
                 "default": "",
@@ -1691,12 +1850,6 @@
           },
           "scope": "Taxonomy"
         },
-        "frontMatter.taxonomy.dateField": {
-          "type": "string",
-          "default": "date",
-          "markdownDescription": "%setting.frontMatter.taxonomy.dateField.markdownDescription%",
-          "deprecationMessage": "%setting.frontMatter.taxonomy.dateField.deprecationMessage%"
-        },
         "frontMatter.taxonomy.dateFormat": {
           "type": "string",
           "markdownDescription": "%setting.frontMatter.taxonomy.dateFormat.markdownDescription%",
@@ -1750,12 +1903,6 @@
           "markdownDescription": "%setting.frontMatter.taxonomy.indentArrays.markdownDescription%",
           "scope": "Taxonomy"
         },
-        "frontMatter.taxonomy.modifiedField": {
-          "type": "string",
-          "default": "lastmod",
-          "markdownDescription": "%setting.frontMatter.taxonomy.modifiedField.markdownDescription%",
-          "deprecationMessage": "%setting.frontMatter.taxonomy.modifiedField.deprecationMessage%"
-        },
         "frontMatter.taxonomy.quoteStringValues": {
           "type": "boolean",
           "default": false,
@@ -1818,6 +1965,11 @@
           "markdownDescription": "%setting.frontMatter.taxonomy.slugSuffix.markdownDescription%",
           "scope": "Taxonomy"
         },
+        "frontMatter.taxonomy.slugTemplate": {
+          "type": "string",
+          "markdownDescription": "%setting.frontMatter.taxonomy.slugTemplate.markdownDescription%",
+          "scope": "Taxonomy"
+        },
         "frontMatter.taxonomy.tags": {
           "type": "array",
           "markdownDescription": "%setting.frontMatter.taxonomy.tags.markdownDescription%",
@@ -2171,6 +2323,15 @@
         "command": "frontMatter.cache.clear",
         "title": "%command.frontMatter.cache.clear%",
         "category": "Front Matter"
+      },
+      {
+        "command": "frontMatter.i18n.create",
+        "title": "%command.frontMatter.i18n.create%",
+        "category": "Front Matter",
+        "icon": {
+          "light": "assets/icons/i18n-light.svg",
+          "dark": "assets/icons/i18n-dark.svg"
+        }
       }
     ],
     "submenus": [
@@ -2217,6 +2378,11 @@
           "group": "navigation@-128",
           "when": "frontMatter:file:isValid == true"
         },
+        {
+          "command": "frontMatter.i18n.create",
+          "group": "navigation@-127",
+          "when": "frontMatter:file:isValid && frontMatter:i18n:enabled"
+        },
         {
           "command": "frontMatter.markup.options",
           "group": "navigation@-126",
@@ -2300,14 +2466,6 @@
           "command": "frontMatter.project.switch",
           "when": "frontMatter:project:switch:enabled"
         },
-        {
-          "command": "frontMatter.createTemplate",
-          "when": "!frontMatterCanInit"
-        },
-        {
-          "command": "frontMatter.preview",
-          "when": "frontMatterCanOpenPreview"
-        },
         {
           "command": "frontMatter.dashboard.data",
           "when": "frontMatter:dashboard:data:enabled"
@@ -2320,10 +2478,30 @@
           "command": "frontMatter.git.sync",
           "when": "frontMatter:git:enabled"
         },
+        {
+          "command": "frontMatter.i18n.create",
+          "when": "frontMatter:i18n:enabled"
+        },
+        {
+          "command": "frontMatter.authenticate",
+          "when": "false"
+        },
         {
           "command": "frontMatter.collapseSections",
           "when": "false"
         },
+        {
+          "command": "frontMatter.remap",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.insertTags",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.insertCategories",
+          "when": "false"
+        },
         {
           "command": "frontMatter.registerFolder",
           "when": "false"
@@ -2384,10 +2562,38 @@
           "command": "frontMatter.markup.options",
           "when": "false"
         },
+        {
+          "command": "frontMatter.markup.hyperlink",
+          "when": "false"
+        },
         {
           "command": "frontMatter.config.reload",
           "when": "false"
         },
+        {
+          "command": "frontMatter.initTemplate",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.createTemplate",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.contenttype.addMissingFields",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.exportTaxonomy",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.generateSlug",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.promoteSettings",
+          "when": "false"
+        },
         {
           "command": "frontMatter.insertSnippet",
           "when": "frontMatter:file:isValid == true && frontMatter:dashboard:snippets:enabled"
@@ -2408,14 +2614,6 @@
           "command": "frontMatter.insertCategories",
           "when": "frontMatter:file:isValid == true"
         },
-        {
-          "command": "frontMatter.insertTags",
-          "when": "frontMatter:file:isValid == true"
-        },
-        {
-          "command": "frontMatter.createTemplate",
-          "when": "frontMatter:file:isValid == true"
-        },
         {
           "command": "frontMatter.preview",
           "when": "frontMatter:file:isValid == true"
@@ -2432,10 +2630,6 @@
           "command": "frontMatter.contenttype.generate",
           "when": "frontMatter:file:isValid == true"
         },
-        {
-          "command": "frontMatter.contenttype.addMissingFields",
-          "when": "frontMatter:file:isValid == true"
-        },
         {
           "command": "frontMatter.contenttype.setContentType",
           "when": "frontMatter:file:isValid == true"
@@ -2541,9 +2735,6 @@
     "prod:panel": "webpack --mode production --config ./webpack/panel.config.js",
     "test-compile": "tsc -p ./",
     "clean": "rimraf dist",
-    "start:site": "cd ./docs && npm run dev",
-    "clean:test": "rm ./e2e/sample/frontmatter.json || exit 0 && rm -rf ./e2e/sample/.frontmatter || exit 0",
-    "test": "npm run lint; tsc -p tsconfig.e2e.json && npm run clean:test && npm run i -g @vscode/vsce && node ./e2e/out/runTests.js",
     "lint": "eslint --max-warnings=0 ./src/{commands,components}",
     "prettier": "prettier --write ./src",
     "localization:watch": "node ./scripts/watch-localization.js",
@@ -2553,36 +2744,31 @@
   },
   "devDependencies": {
     "@actions/core": "^1.10.0",
-    "@bendera/vscode-webview-elements": "0.6.2",
     "@estruyf/vscode": "^1.1.0",
-    "@headlessui/react": "^1.7.17",
+    "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
     "@iarna/toml": "2.2.3",
     "@octokit/rest": "^18.12.0",
-    "@popperjs/core": "^2.11.6",
     "@sentry/react": "^6.19.7",
     "@sentry/tracing": "^6.19.7",
     "@tailwindcss/forms": "^0.5.3",
-    "@types/chai": "^4.3.4",
     "@types/glob": "7.1.3",
     "@types/invariant": "^2.2.35",
-    "@types/js-yaml": "3.12.1",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash.omit": "^4.5.7",
     "@types/lodash.uniqby": "4.7.6",
     "@types/lodash.xor": "^4.5.7",
     "@types/mdast": "^3.0.10",
     "@types/mime-types": "^2.1.1",
-    "@types/mocha": "^5.2.7",
     "@types/mustache": "^4.2.2",
-    "@types/node": "10.17.48",
-    "@types/node-fetch": "^2.6.2",
+    "@types/node": "^18.17.1",
     "@types/react": "17.0.0",
     "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "17.0.0",
     "@types/vscode": "^1.73.0",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
-    "@vscode/codicons": "0.0.20",
+    "@vscode-elements/elements": "^1.2.0",
     "@vscode/l10n": "^0.0.14",
     "@vscode/webview-ui-toolkit": "^1.2.2",
     "@webpack-cli/serve": "^1.7.0",
@@ -2590,8 +2776,8 @@
     "array-move": "^4.0.0",
     "assert": "^2.0.0",
     "autoprefixer": "^10.4.13",
-    "chai": "^4.3.7",
     "cheerio": "1.0.0-rc.12",
+    "clsx": "^2.1.0",
     "css-loader": "5.2.7",
     "date-fns": "2.23.0",
     "dotenv": "^16.3.1",
@@ -2613,9 +2799,7 @@
     "lodash.xor": "^4.5.0",
     "mdast-util-from-markdown": "1.0.0",
     "mime-types": "^2.1.35",
-    "mocha": "^10.2.0",
     "mustache": "^4.2.0",
-    "node-fetch": "^2.6.9",
     "node-json-db": "^2.2.0",
     "npm-run-all": "^4.1.5",
     "path-browserify": "^1.0.1",
@@ -2629,18 +2813,18 @@
     "react-dom": "17.0.1",
     "react-dropzone": "^11.7.1",
     "react-markdown": "^8.0.7",
-    "react-popper": "^2.3.0",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.8.0",
     "react-sortable-hoc": "^2.0.0",
-    "react-toastify": "^8.2.0",
-    "recoil": "^0.4.1",
+    "recoil": "^0.7.7",
     "remark-gfm": "^3.0.1",
     "rimraf": "^3.0.2",
     "semver": "^7.3.8",
     "simple-git": "^3.16.0",
     "style-loader": "2.0.0",
+    "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.2.4",
+    "tailwindcss-animate": "^1.0.7",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.5",
     "uniforms": "^3.10.2",
@@ -2648,7 +2832,6 @@
     "uniforms-bridge-json-schema": "^3.10.2",
     "uniforms-unstyled": "^3.10.2",
     "url-join-ts": "^1.0.5",
-    "vscode-extension-tester": "^5.3.0",
     "wc-react": "github:estruyf/wc-react",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.7.0",
@@ -2660,5 +2843,8 @@
   },
   "vsce": {
     "dependencies": false
+  },
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.0.6"
   }
 }

package.nls.json

@@ -15,7 +15,7 @@
   "command.frontMatter.initTemplate": "Initialize the template folder",
   "command.frontMatter.createTemplate": "Create template from current file",
   "command.frontMatter.createCategory": "Create category",
-  "command.frontMatter.createContent": "Create new content from defined content type or template",
+  "command.frontMatter.createContent": "Create new content",
   "command.frontMatter.createTag": "Create tag",
   "command.frontMatter.diagnostics": "Diagnostic logging",
   "command.frontMatter.exportTaxonomy": "Export all tags & categories to your settings",
@@ -48,6 +48,7 @@
   "command.frontMatter.markup.unorderedlist": "Unordered list",
   "command.frontMatter.git.sync": "Sync",
   "command.frontMatter.cache.clear": "Clear cache",
+  "command.frontMatter.i18n.create": "Create new translation",
   "settings.configuration.title": "Front Matter: use frontmatter.json for shared team settings",
   "setting.frontMatter.projects.markdownDescription": "Specify the list of projects to load in the Front Matter CMS. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.projects)",
   "setting.frontMatter.projects.items.properties.name.markdownDescription": "Specify the name of the project.",
@@ -75,6 +76,12 @@
   "setting.frontMatter.content.pageFolders.items.properties.filePrefix.description": "Defines a prefix for the file name.",
   "setting.frontMatter.content.pageFolders.items.properties.contentTypes.description": "Defines which content types can be used for the current location. If not defined, all content types will be available.",
   "setting.frontMatter.content.pageFolders.items.properties.disableCreation.description": "Disable the creation of new content in the folder.",
+  "setting.frontMatter.content.pageFolders.items.properties.defaultLocale.description": "Set the default locale ID for the page folder. All content from this folder is translatable to the languages defined in the `frontMatter.content.i18n` setting.",
+  "setting.frontMatter.content.pageFolders.items.properties.locales.description": "Define the locales for the page folder. This will be used for the translation of the content.",
+  "setting.frontMatter.content.i18n.markdownDescription": "Specify the locales you want to use for your website. This setting can be overwritten on page folder level. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.i18n)",
+  "setting.frontMatter.content.i18n.items.properties.title.description": "Title of the locale",
+  "setting.frontMatter.content.i18n.items.properties.locale.description": "Locale code",
+  "setting.frontMatter.content.i18n.items.properties.path.description": "Relative path of the locale folder",
   "setting.frontMatter.content.placeholders.markdownDescription": "This array of placeholders defines the placeholders that you can use in your content types and templates for automatically populating your content its front matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.placeholders)",
   "setting.frontMatter.content.placeholders.items.properties.id.description": "ID of the placeholder, in your content type or template, use it as follows: {{placeholder}}",
   "setting.frontMatter.content.placeholders.items.properties.value.description": "The placeholder its value",
@@ -92,6 +99,7 @@
   "setting.frontMatter.content.sorting.items.properties.type.description": "Type of the field value",
   "setting.frontMatter.content.supportedFileTypes.markdownDescription": "Specify the file types that you want to use in Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.supportedfiletypes)",
   "setting.frontMatter.content.wysiwyg.markdownDescription": "Specifies if you want to enable/disable the What You See, Is What You Get (WYSIWYG) markdown controls. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.wysiwyg)",
+  "setting.frontMatter.content.filters.markdownDescription": "Specify the filters you want to use for your content dashboard. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.filters)",
   "setting.frontMatter.custom.scripts.markdownDescription": "Specify the path to a Node.js script to execute. The current file path will be provided as an argument. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.custom.scripts)",
   "setting.frontMatter.custom.scripts.items.properties.id.description": "ID of the script.",
   "setting.frontMatter.custom.scripts.items.properties.title.description": "Title you want to give to your script. Will be shown as the title of the button.",
@@ -153,6 +161,17 @@
   "setting.frontMatter.global.disabledNotifications.markdownDescription": "This is an array with the notifications types that can be disabled for Front Matter CMS. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.global.disablednotifications)",
   "setting.frontMatter.media.defaultSorting.markdownDescription": "Specify the default sorting option for the media dashboard. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.media.defaultsorting)",
   "setting.frontMatter.media.supportedMimeTypes.markdownDescription": "Specify the mime types to support for the media files. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.media.supportedmimetypes)",
+
+  "setting.frontMatter.media.contentTypes.markdownDescription": "Specify the media content types you want to use in Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.media.contenttypes)",
+  "setting.frontMatter.media.contentTypes.items.description": "Define the media content types you want to use in Front Matter.",
+  "setting.frontMatter.media.contentTypes.items.properties.name.description": "Name of the media content type",
+  "setting.frontMatter.media.contentTypes.items.properties.fileTypes.description": "Specify the file types to allow for the media content type",
+  "setting.frontMatter.media.contentTypes.items.properties.fields.description": "Define the fields of the media content type",
+  "setting.frontMatter.media.contentTypes.items.properties.fields.properties.title.description": "Title to show in the UI",
+  "setting.frontMatter.media.contentTypes.items.properties.fields.properties.name.description": "Name of the field to use",
+  "setting.frontMatter.media.contentTypes.items.properties.fields.properties.type.description": "Define the type of field",
+  "setting.frontMatter.media.contentTypes.items.properties.fields.properties.single.description": "Is a single line field",
+
   "setting.frontMatter.panel.freeform.markdownDescription": "Specifies if you want to allow yourself from entering unknown tags/categories in the tag picker (when enabled, you will have the option to store them afterwards). Default: true. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.freeform)",
   "setting.frontMatter.panel.actions.disabled.markdownDescription": "Specify the actions you want to disable in the panel. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.actions.disabled)",
   "setting.frontMatter.preview.host.markdownDescription": "Specify the host URL (example: http://localhost:1313) to be used when opening the preview. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.preview.host)",
@@ -210,6 +229,7 @@
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.caseSensitive.description": "Specify if the comparison is case sensitive. Default: true",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.pageBundle.description": "Specify if you want to create a folder when creating new content.",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.previewPath.description": "Defines a custom preview path for the content type.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.slugTemplate.description": "Defines a custom slug template for the content type.",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.template.description": "An optional template that can be used for creating new content.",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.postScript.description": "An optional post script that can be used after new content creation.",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.filePrefix.description": "Defines a prefix for the file name.",
@@ -236,6 +256,7 @@
   "setting.frontMatter.taxonomy.seoTitleLength.markdownDescription": "Specifies the optimal title length for SEO (set to `-1` to turn it off). [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seotitlelength)",
   "setting.frontMatter.taxonomy.slugPrefix.markdownDescription": "Specify a prefix for the slug. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.slugprefix)",
   "setting.frontMatter.taxonomy.slugSuffix.markdownDescription": "Specify a suffix for the slug. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.slugsuffix)",
+  "setting.frontMatter.taxonomy.slugTemplate.markdownDescription": "Defines a custom slug template for the content you will create. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.slugtemplate)",
   "setting.frontMatter.taxonomy.tags.markdownDescription": "Specifies the tags which can be used in the Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.tags)",
   "setting.frontMatter.telemetry.disable.markdownDescription": "Specify if you want to disable the telemetry. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.telemetry.disable)",
   "setting.frontMatter.templates.enabled.markdownDescription": "Specify if you want to use templates. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.enabled)",
@@ -250,5 +271,8 @@
   "command.frontMatter.settings.refresh": "Refresh Front Matter Settings",
   "setting.frontMatter.config.dynamicFilePath.markdownDescription": "Specify the path to the dynamic config file (ex: [[workspace]]/config.js). [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.config.dynamicfilepath)",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.allowAsSubContent.description": "Specify if the content type can be used as sub content.",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.isSubContent.description": "Specify if the content type is sub content."
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.isSubContent.description": "Specify if the content type is sub content.",
+
+  "setting.frontMatter.git.disableOnBranches.markdownDescription": "Specify the branches on which you want to disable the Git actions. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.disableonbranches)",
+  "setting.frontMatter.git.requiresCommitMessage.markdownDescription": "Specify if you want to require a commit message when publishing your changes for a specified branch. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.requirescommitmessage)"
 }

src/commands/Article.ts

@@ -10,23 +10,29 @@ import {
   SETTING_SLUG_PREFIX,
   SETTING_SLUG_SUFFIX,
   SETTING_CONTENT_PLACEHOLDERS,
-  TelemetryEvent
+  TelemetryEvent,
+  SETTING_SLUG_TEMPLATE
 } from './../constants';
 import * as vscode from 'vscode';
-import { CustomPlaceholder, Field, TaxonomyType } from '../models';
+import { CustomPlaceholder, Field } from '../models';
 import { format } from 'date-fns';
-import { ArticleHelper, Settings, SlugHelper, TaxonomyHelper } from '../helpers';
+import {
+  ArticleHelper,
+  Settings,
+  SlugHelper,
+  processArticlePlaceholdersFromData,
+  processTimePlaceholders
+} from '../helpers';
 import { Notifications } from '../helpers/Notifications';
 import { extname, basename, parse, dirname } from 'path';
 import { COMMAND_NAME, DefaultFields } from '../constants';
-import { DashboardData, SnippetRange } from '../models/DashboardData';
+import { DashboardData, SnippetInfo, SnippetRange } from '../models/DashboardData';
 import { DateHelper } from '../helpers/DateHelper';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { Telemetry } from '../helpers/Telemetry';
 import { ParsedFrontMatter } from '../parsers';
 import { MediaListener } from '../listeners/panel';
 import { NavigationType } from '../dashboardWebView/models';
-import { processKnownPlaceholders } from '../helpers/PlaceholderHelper';
 import { Position } from 'vscode';
 import { SNIPPET } from '../constants/Snippet';
 import * as l10n from '@vscode/l10n';
@@ -110,9 +116,10 @@ export class Article {
     }
 
     const cloneArticle = Object.assign({}, article);
-    const dateField = ArticleHelper.getModifiedDateField(article) || DefaultFields.LastModified;
+    const dateField = ArticleHelper.getModifiedDateField(article);
     try {
-      cloneArticle.data[dateField] = Article.formatDate(new Date());
+      const fieldName = dateField?.name || DefaultFields.LastModified;
+      cloneArticle.data[fieldName] = Article.formatDate(new Date(), dateField?.dateFormat);
       return cloneArticle;
     } catch (e: unknown) {
       Notifications.error(
@@ -124,7 +131,7 @@ export class Article {
   /**
    * Generate the new slug
    */
-  public static generateSlug(title: string) {
+  public static generateSlug(title: string, article?: ParsedFrontMatter, slugTemplate?: string) {
     if (!title) {
       return;
     }
@@ -132,13 +139,15 @@ export class Article {
     const prefix = Settings.get(SETTING_SLUG_PREFIX) as string;
     const suffix = Settings.get(SETTING_SLUG_SUFFIX) as string;
 
-    const slug = SlugHelper.createSlug(title);
+    if (article?.data) {
+      const slug = SlugHelper.createSlug(title, article?.data, slugTemplate);
 
-    if (slug) {
-      return {
-        slug,
-        slugWithPrefixAndSuffix: `${prefix}${slug}${suffix}`
-      };
+      if (slug) {
+        return {
+          slug,
+          slugWithPrefixAndSuffix: `${prefix}${slug}${suffix}`
+        };
+      }
     }
 
     return undefined;
@@ -168,7 +177,7 @@ export class Article {
 
     const titleField = 'title';
     const articleTitle: string = article.data[titleField];
-    const slugInfo = Article.generateSlug(articleTitle);
+    const slugInfo = Article.generateSlug(articleTitle, article, contentType.slugTemplate);
 
     if (slugInfo && slugInfo.slug && slugInfo.slugWithPrefixAndSuffix) {
       article.data['slug'] = slugInfo.slugWithPrefixAndSuffix;
@@ -192,9 +201,13 @@ export class Article {
           );
           for (const pField of customPlaceholderFields) {
             article.data[pField.name] = customPlaceholder.value;
-            article.data[pField.name] = processKnownPlaceholders(
+            article.data[pField.name] = processArticlePlaceholdersFromData(
+              article.data[pField.name],
+              article.data,
+              contentType
+            );
+            article.data[pField.name] = processTimePlaceholders(
               article.data[pField.name],
-              articleTitle,
               dateFormat
             );
           }
@@ -249,6 +262,21 @@ export class Article {
       return;
     }
 
+    const slugTemplate = Settings.get<string>(SETTING_SLUG_TEMPLATE);
+    if (slugTemplate) {
+      if (slugTemplate === '{{title}}') {
+        const article = ArticleHelper.getFrontMatter(editor);
+        if (article?.data?.title) {
+          return article.data.title.toLowerCase().replace(/\s/g, '-');
+        }
+      } else {
+        const article = ArticleHelper.getFrontMatter(editor);
+        if (article?.data) {
+          return SlugHelper.createSlug(article.data.title, article.data, slugTemplate);
+        }
+      }
+    }
+
     const file = parseWinPath(editor.document.fileName);
 
     if (!isValidFile(file)) {
@@ -363,7 +391,7 @@ export class Article {
       return;
     }
 
-    let position = editor.selection.active;
+    const position = editor.selection.active;
     const selectionText = editor.document.getText(editor.selection);
 
     // Check for snippet wrapper
@@ -388,7 +416,7 @@ export class Article {
       snippetStartBeforePos = linesBeforeSelection.length - snippetStartBeforePos - 1;
     }
 
-    let snippetInfo: { id: string; fields: any[] } | undefined = undefined;
+    let snippetInfo: SnippetInfo | undefined = undefined;
     let range: SnippetRange | undefined = undefined;
     if (
       snippetEndAfterPos > -1 &&
@@ -412,6 +440,7 @@ export class Article {
     }
 
     const article = ArticleHelper.getFrontMatter(editor);
+    const contentType = article ? ArticleHelper.getContentType(article) : undefined;
 
     await vscode.commands.executeCommand(COMMAND_NAME.dashboard, {
       type: NavigationType.Snippets,
@@ -419,6 +448,7 @@ export class Article {
         fileTitle: article?.data.title || '',
         filePath: editor.document.uri.fsPath,
         fieldName: basename(editor.document.uri.fsPath),
+        contentType,
         position,
         range,
         selection: selectionText,

src/commands/Backers.ts

@@ -1,7 +1,6 @@
 import { authentication, commands, ExtensionContext } from 'vscode';
 import { COMMAND_NAME, CONTEXT } from '../constants';
 import { Extension, Logger } from '../helpers';
-import fetch from 'node-fetch';
 import { Dashboard } from './Dashboard';
 import { SettingsListener } from '../listeners/panel';
 import { PanelProvider } from '../panelWebView/PanelProvider';

src/commands/Cache.ts

@@ -22,7 +22,7 @@ export class Cache {
     await Extension.getInstance().setState(key, data, type);
   }
 
-  public static async clear(showNotification: boolean = true) {
+  public static async clear(showNotification = true) {
     const ext = Extension.getInstance();
 
     await ext.setState(ExtensionState.Dashboard.Pages.Cache, undefined, 'workspace', true);

src/commands/Dashboard.ts

@@ -3,11 +3,13 @@ import {
   CONTEXT,
   ExtensionState,
   SETTING_EXPERIMENTAL,
-  SETTING_EXTENSIBILITY_SCRIPTS
+  SETTING_EXTENSIBILITY_SCRIPTS,
+  COMMAND_NAME,
+  TelemetryEvent
 } from '../constants';
 import { join } from 'path';
 import { commands, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode';
-import { DashboardSettings, Logger, Settings as SettingsHelper } from '../helpers';
+import { DashboardSettings, Logger, Settings as SettingsHelper, Telemetry } from '../helpers';
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
 import { Extension } from '../helpers/Extension';
 import { WebviewHelper } from '@estruyf/vscode';
@@ -31,6 +33,8 @@ import { GitListener, ModeListener } from '../listeners/general';
 import { Folders } from './Folders';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
+import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
+import { NavigationType } from '../dashboardWebView/models';
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
@@ -51,6 +55,56 @@ export class Dashboard {
     }
   }
 
+  public static registerCommands() {
+    const subscriptions = Extension.getInstance().subscriptions;
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboard, (data?: DashboardData) => {
+        Telemetry.send(TelemetryEvent.openContentDashboard);
+        if (!data) {
+          Dashboard.open({ type: NavigationType.Contents });
+        } else {
+          Dashboard.open(data);
+        }
+      })
+    );
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboardMedia, () => {
+        Telemetry.send(TelemetryEvent.openMediaDashboard);
+        Dashboard.open({ type: NavigationType.Media });
+      })
+    );
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboardSnippets, () => {
+        Telemetry.send(TelemetryEvent.openSnippetsDashboard);
+        Dashboard.open({ type: NavigationType.Snippets });
+      })
+    );
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboardData, () => {
+        Telemetry.send(TelemetryEvent.openDataDashboard);
+        Dashboard.open({ type: NavigationType.Data });
+      })
+    );
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboardTaxonomy, () => {
+        Telemetry.send(TelemetryEvent.openTaxonomyDashboard);
+        Dashboard.open({ type: NavigationType.Taxonomy });
+      })
+    );
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboardClose, () => {
+        Telemetry.send(TelemetryEvent.closeDashboard);
+        Dashboard.close();
+      })
+    );
+  }
+
   /**
    * Open or reveal the dashboard
    */
@@ -204,7 +258,7 @@ export class Dashboard {
    * @param msg
    */
   public static postWebviewMessage(msg: {
-    command: DashboardCommand;
+    command: DashboardCommand | DashboardMessage;
     requestId?: string;
     payload?: unknown;
     error?: unknown;
@@ -304,7 +358,7 @@ export class Dashboard {
       version.usedVersion ? '' : `data-showWelcome="true"`
     } ${
       experimental ? `data-experimental="${experimental}"` : ''
-    } data-webview-url="${webviewUrl}" ></div>
+    } data-webview-url="${webviewUrl}" data-is-crash-disabled="${!Telemetry.isVscodeEnabled()}" ></div>
 
         ${(scriptsToLoad || [])
           .map((script) => {

src/commands/Folders.ts

@@ -1,6 +1,7 @@
 import { STATIC_FOLDER_PLACEHOLDER } from './../constants/StaticFolderPlaceholder';
 import { Questions } from './../helpers/Questions';
 import {
+  SETTING_CONTENT_I18N,
   SETTING_CONTENT_PAGE_FOLDERS,
   SETTING_CONTENT_STATIC_FOLDER,
   SETTING_CONTENT_SUPPORTED_FILETYPES,
@@ -9,11 +10,11 @@ import {
 } from './../constants';
 import { commands, Uri, workspace, window } from 'vscode';
 import { basename, dirname, join, relative, sep } from 'path';
-import { ContentFolder, FileInfo, FolderInfo, StaticFolder } from '../models';
+import { ContentFolder, FileInfo, FolderInfo, I18nConfig, StaticFolder } from '../models';
 import uniqBy = require('lodash.uniqby');
 import { Template } from './Template';
 import { Notifications } from '../helpers/Notifications';
-import { Logger, processKnownPlaceholders, Settings } from '../helpers';
+import { Logger, Settings, processTimePlaceholders } from '../helpers';
 import { existsSync } from 'fs';
 import { format } from 'date-fns';
 import { Dashboard } from './Dashboard';
@@ -98,7 +99,7 @@ export class Folders {
     }
 
     const folders = Folders.get().filter((f) => !f.disableCreation);
-    const location = folders.find((f) => f.title === selectedFolder);
+    const location = folders.find((f) => f.path === selectedFolder.path);
     if (location) {
       const folderPath = Folders.getFolderPath(Uri.file(location.path));
       if (folderPath) {
@@ -283,73 +284,14 @@ export class Folders {
   public static async getInfo(limit?: number): Promise<FolderInfo[] | null> {
     const supportedFiles = Settings.get<string[]>(SETTING_CONTENT_SUPPORTED_FILETYPES);
     const folders = Folders.get();
-    const wsFolder = parseWinPath(Folders.getWorkspaceFolder()?.fsPath || '');
 
     if (folders && folders.length > 0) {
       const folderInfo: FolderInfo[] = [];
 
       for (const folder of folders) {
-        try {
-          const folderPath = parseWinPath(folder.path);
-
-          if (typeof folderPath === 'string') {
-            let files: Uri[] = [];
-
-            for (const fileType of supportedFiles || DEFAULT_FILE_TYPES) {
-              let filePath = join(
-                folderPath,
-                folder.excludeSubdir ? '/' : '**',
-                `*${fileType.startsWith('.') ? '' : '.'}${fileType}`
-              );
-
-              if (folderPath === '' && folder.excludeSubdir) {
-                filePath = `*${fileType.startsWith('.') ? '' : '.'}${fileType}`;
-              }
-
-              let foundFiles = await Folders.findFiles(filePath);
-
-              // Make sure these file are coming from the folder path (this could be an issue in multi-root workspaces)
-              foundFiles = foundFiles.filter((f) => parseWinPath(f.fsPath).startsWith(folderPath));
-
-              files = [...files, ...foundFiles];
-            }
-
-            if (files) {
-              let fileStats: FileInfo[] = [];
-
-              for (const file of files) {
-                try {
-                  const fileName = basename(file.fsPath);
-                  const folderName = dirname(file.fsPath).split(sep).pop();
-
-                  const stats = await workspace.fs.stat(file);
-
-                  fileStats.push({
-                    filePath: file.fsPath,
-                    fileName,
-                    folderName,
-                    ...stats
-                  });
-                } catch (error) {
-                  // Skip the file
-                }
-              }
-
-              fileStats = fileStats.sort((a, b) => b.mtime - a.mtime);
-
-              if (limit) {
-                fileStats = fileStats.slice(0, limit);
-              }
-
-              folderInfo.push({
-                title: folder.title,
-                files: files.length,
-                lastModified: fileStats
-              });
-            }
-          }
-        } catch (e) {
-          // Skip the current folder
+        const crntFolderInfo = await Folders.getFilesByFolder(folder, supportedFiles, limit);
+        if (crntFolderInfo) {
+          folderInfo.push(crntFolderInfo);
         }
       }
 
@@ -366,11 +308,14 @@ export class Folders {
   public static get(): ContentFolder[] {
     const wsFolder = Folders.getWorkspaceFolder();
     let folders: ContentFolder[] = Settings.get(SETTING_CONTENT_PAGE_FOLDERS) as ContentFolder[];
+    const i18nSettings = Settings.get<I18nConfig[]>(SETTING_CONTENT_I18N);
 
     // Filter out folders without a path
     folders = folders.filter((f) => f.path);
 
-    const contentFolders = folders.map((folder) => {
+    const contentFolders: ContentFolder[] = [];
+
+    folders.forEach((folder) => {
       if (!folder.title) {
         folder.title = basename(folder.path);
       }
@@ -378,7 +323,7 @@ export class Folders {
       let folderPath: string | undefined = Folders.absWsFolder(folder, wsFolder);
       if (folderPath.includes(`{{`) && folderPath.includes(`}}`)) {
         const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
-        folderPath = processKnownPlaceholders(folderPath, undefined, dateFormat);
+        folderPath = processTimePlaceholders(folderPath, dateFormat);
       } else {
         if (folderPath && !existsSync(folderPath)) {
           Notifications.errorShowOnce(
@@ -404,11 +349,52 @@ export class Folders {
         }
       }
 
-      return {
-        ...folder,
-        originalPath: folder.path,
-        path: folderPath
-      };
+      // Check i18n
+      if (folder.defaultLocale && (folder.locales || i18nSettings)) {
+        const i18nConfig =
+          folder.locales && folder.locales.length > 0 ? folder.locales : i18nSettings;
+
+        let defaultLocale;
+        let sourcePath = folderPath;
+        let localeFolders: ContentFolder[] = [];
+
+        if (i18nConfig && i18nConfig.length > 0) {
+          for (const i18n of i18nConfig) {
+            if (i18n.locale === folder.defaultLocale) {
+              defaultLocale = i18n;
+            } else if (i18n.locale !== folder.defaultLocale && i18n.path) {
+              localeFolders.push({
+                ...folder,
+                title: folder.title,
+                originalPath: folder.path,
+                locale: i18n.locale,
+                localeTitle: i18n?.title || i18n.locale,
+                localeSourcePath: sourcePath,
+                path: parseWinPath(join(folderPath, i18n.path))
+              });
+            }
+          }
+        }
+
+        contentFolders.push({
+          ...folder,
+          title: folder.title,
+          locale: folder.defaultLocale,
+          localeTitle: defaultLocale?.title || folder.defaultLocale,
+          originalPath: folder.path,
+          localeSourcePath: sourcePath,
+          path: parseWinPath(join(folderPath, defaultLocale?.path || ''))
+        });
+
+        contentFolders.push(...localeFolders);
+      } else {
+        contentFolders.push({
+          ...folder,
+          locale: folder.defaultLocale,
+          originalPath: folder.path,
+          path: folderPath
+        });
+      }
     });
 
     return contentFolders.filter((folder) => folder !== null) as ContentFolder[];
@@ -604,6 +590,99 @@ export class Folders {
     return;
   }
 
+  /**
+   * Retrieves the page folder that matches the given file path.
+   *
+   * @param filePath - The file path to match against the page folders.
+   * @returns The page folder that matches the file path, or undefined if no match is found.
+   */
+  public static getPageFolderByFilePath(filePath: string): ContentFolder | undefined {
+    const folders = Folders.get();
+    const parsedPath = parseWinPath(filePath);
+    const pageFolderMatches = folders
+      .filter((folder) => parsedPath && folder.path && parsedPath.includes(folder.path))
+      .sort((a, b) => b.path.length - a.path.length);
+
+    if (pageFolderMatches.length > 0 && pageFolderMatches[0]) {
+      return pageFolderMatches[0];
+    }
+
+    return;
+  }
+
+  private static async getFilesByFolder(
+    folder: ContentFolder,
+    supportedFiles: string[] | undefined,
+    limit?: number
+  ): Promise<FolderInfo | undefined> {
+    try {
+      const folderPath = parseWinPath(folder.path);
+
+      if (typeof folderPath === 'string') {
+        let files: Uri[] = [];
+
+        for (const fileType of supportedFiles || DEFAULT_FILE_TYPES) {
+          let filePath = join(
+            folderPath,
+            folder.excludeSubdir ? '/' : '**',
+            `*${fileType.startsWith('.') ? '' : '.'}${fileType}`
+          );
+
+          if (folderPath === '' && folder.excludeSubdir) {
+            filePath = `*${fileType.startsWith('.') ? '' : '.'}${fileType}`;
+          }
+
+          let foundFiles = await Folders.findFiles(filePath);
+
+          // Make sure these file are coming from the folder path (this could be an issue in multi-root workspaces)
+          foundFiles = foundFiles.filter((f) => parseWinPath(f.fsPath).startsWith(folderPath));
+
+          files = [...files, ...foundFiles];
+        }
+
+        if (files) {
+          let fileStats: FileInfo[] = [];
+
+          for (const file of files) {
+            try {
+              const fileName = basename(file.fsPath);
+              const folderName = dirname(file.fsPath).split(sep).pop();
+
+              const stats = await workspace.fs.stat(file);
+
+              fileStats.push({
+                filePath: file.fsPath,
+                fileName,
+                folderName,
+                ...stats
+              });
+            } catch (error) {
+              // Skip the file
+            }
+          }
+
+          fileStats = fileStats.sort((a, b) => b.mtime - a.mtime);
+
+          if (limit) {
+            fileStats = fileStats.slice(0, limit);
+          }
+
+          return {
+            title: folder.title,
+            files: files.length,
+            lastModified: fileStats,
+            locale: folder.locale,
+            localeTitle: folder.localeTitle
+          };
+        }
+      }
+    } catch (e) {
+      // Skip the current folder
+    }
+
+    return;
+  }
+
   /**
    * Retrieve all content folders
    * @param pattern

src/commands/Preview.ts

@@ -14,7 +14,7 @@ import {
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { join, parse } from 'path';
 import { commands, env, Uri, ViewColumn, window, WebviewPanel, extensions } from 'vscode';
-import { Extension, parseWinPath, processKnownPlaceholders, Settings } from '../helpers';
+import { Extension, parseWinPath, processTimePlaceholders, Settings } from '../helpers';
 import { ContentFolder, ContentType, PreviewSettings } from '../models';
 import { format } from 'date-fns';
 import { DateHelper } from '../helpers/DateHelper';
@@ -97,6 +97,9 @@ export class Preview {
     const cspSource = webView.webview.cspSource;
 
     webView.onDidDispose(() => {
+      if (crntFilePath && this.webviews[crntFilePath]) {
+        delete this.webviews[crntFilePath];
+      }
       webView.dispose();
     });
 
@@ -196,7 +199,7 @@ export class Preview {
    * @param filePath
    * @param slug
    */
-  public static async updatePageUrl(filePath: string, slug?: string) {
+  public static async updatePageUrl(filePath: string, _: string) {
     const webView = this.webviews[filePath];
     if (webView) {
       const localhost = await this.getLocalServerUrl();
@@ -291,7 +294,7 @@ export class Preview {
     if (pathname) {
       // Known placeholders
       const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
-      pathname = processKnownPlaceholders(pathname, article?.data?.title, dateFormat);
+      pathname = processTimePlaceholders(pathname, dateFormat);
 
       // Custom placeholders
       pathname = await ArticleHelper.processCustomPlaceholders(
@@ -315,7 +318,7 @@ export class Preview {
       }
 
       // Support front matter placeholders - {{fm.<field>}}
-      pathname = processFmPlaceholders(pathname, article?.data);
+      pathname = article?.data ? processFmPlaceholders(pathname, article?.data) : pathname;
 
       try {
         const articleDate = ArticleHelper.getDate(article);

src/commands/Settings.ts

@@ -18,13 +18,13 @@ export class Settings {
     const taxonomy = type === TaxonomyType.Tag ? 'tag' : 'category';
 
     const newOption = await vscode.window.showInputBox({
-      prompt: l10n.t(LocalizationKey.commandsFoldersCreateInputPrompt, taxonomy),
-      placeHolder: l10n.t(LocalizationKey.commandsFoldersCreateInputPlaceholder, taxonomy),
+      prompt: l10n.t(LocalizationKey.commandsSettingsCreateInputPrompt, taxonomy),
+      placeHolder: l10n.t(LocalizationKey.commandsSettingsCreateInputPlaceholder, taxonomy),
       ignoreFocusOut: true
     });
 
     if (newOption) {
-      let options = (await TaxonomyHelper.get(type)) || [];
+      const options = (await TaxonomyHelper.get(type)) || [];
 
       if (options.find((o) => o === newOption)) {
         Notifications.warning(l10n.t(LocalizationKey.commandsSettingsCreateWarning, taxonomy));

src/commands/StatusListener.ts

@@ -19,6 +19,7 @@ import { Field } from '../models';
 import { Preview } from './Preview';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
+import { i18n } from './i18n';
 
 export class StatusListener {
   /**
@@ -42,6 +43,10 @@ export class StatusListener {
       try {
         commands.executeCommand('setContext', CONTEXT.isValidFile, true);
 
+        // Check i18n
+        const isI18nEnabled = await i18n.isLocaleEnabled(document.uri.fsPath);
+        commands.executeCommand('setContext', CONTEXT.isI18nEnabled, isI18nEnabled);
+
         const article = editor
           ? ArticleHelper.getFrontMatter(editor)
           : await ArticleHelper.getFrontMatterByPath(document.uri.fsPath);
@@ -83,6 +88,7 @@ export class StatusListener {
       }
     } else {
       commands.executeCommand('setContext', CONTEXT.isValidFile, false);
+      commands.executeCommand('setContext', CONTEXT.isI18nEnabled, false);
 
       const panel = PanelProvider.getInstance();
       if (panel && panel.visible) {

src/commands/Template.ts

@@ -163,7 +163,7 @@ export class Template {
     await copyFileAsync(template.fsPath, newFilePath);
 
     // Update the properties inside the template
-    let frontMatter = await ArticleHelper.getFrontMatterByPath(newFilePath);
+    const frontMatter = await ArticleHelper.getFrontMatterByPath(newFilePath);
     if (!frontMatter) {
       Notifications.warning(l10n.t(LocalizationKey.commonError));
       return;

src/commands/i18n.ts

@@ -0,0 +1,564 @@
+import { ProgressLocation, Uri, commands, window, workspace } from 'vscode';
+import {
+  ArticleHelper,
+  ContentType,
+  Extension,
+  FrameworkDetector,
+  Notifications,
+  Settings,
+  openFileInEditor,
+  parseWinPath
+} from '../helpers';
+import { COMMAND_NAME, SETTING_CONTENT_I18N } from '../constants';
+import { ContentFolder, Field, I18nConfig, ContentType as IContentType } from '../models';
+import { join, parse } from 'path';
+import { existsAsync } from '../utils';
+import { Folders } from '.';
+import { ParsedFrontMatter } from '../parsers';
+import { PagesListener } from '../listeners/dashboard';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
+import { Translations } from '../services/Translations';
+
+export class i18n {
+  private static processedFiles: {
+    [filePath: string]: { dir: string; filename: string; isPageBundle: boolean };
+  } = {};
+
+  /**
+   * Registers the i18n commands.
+   */
+  public static register() {
+    const subscriptions = Extension.getInstance().subscriptions;
+
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.i18n.create, i18n.create));
+
+    i18n.clearFiles();
+  }
+
+  /**
+   * Clear the processed files
+   */
+  public static clearFiles() {
+    i18n.processedFiles = {};
+  }
+
+  /**
+   * Retrieves all the I18nConfig settings.
+   *
+   * @returns An array of I18nConfig settings.
+   */
+  public static getAll() {
+    const i18nSettings = Settings.get<I18nConfig[]>(SETTING_CONTENT_I18N) || [];
+
+    const folders = Folders.get();
+    if (folders) {
+      for (const folder of folders) {
+        if (folder.locales) {
+          for (const locale of folder.locales) {
+            if (!i18nSettings.some((i18n) => i18n.locale === locale.locale)) {
+              i18nSettings.push(locale);
+            }
+          }
+        }
+      }
+    }
+
+    return i18nSettings;
+  }
+
+  /**
+   * Retrieves the I18nConfig settings from the application.
+   * @returns An array of I18nConfig objects if settings are found, otherwise undefined.
+   */
+  public static async getSettings(filePath: string): Promise<I18nConfig[] | undefined> {
+    if (!filePath) {
+      return;
+    }
+
+    const i18nSettings = Settings.get<I18nConfig[]>(SETTING_CONTENT_I18N);
+    let pageFolder = Folders.getPageFolderByFilePath(filePath);
+    if (!pageFolder) {
+      pageFolder = await i18n.getPageFolder(filePath);
+    }
+
+    if (!pageFolder || !pageFolder.locales) {
+      return i18nSettings;
+    }
+
+    return pageFolder.locales;
+  }
+
+  /**
+   * Checks if the locale is enabled for the given file path.
+   * @param filePath - The file path to check.
+   * @returns A promise that resolves to a boolean indicating whether the locale is enabled or not.
+   */
+  public static async isLocaleEnabled(filePath: string): Promise<boolean> {
+    const i18nSettings = await i18n.getSettings(filePath);
+    if (!i18nSettings) {
+      return false;
+    }
+
+    const pageFolder = Folders.getPageFolderByFilePath(filePath);
+    if (!pageFolder || !pageFolder.locale) {
+      return false;
+    }
+
+    return i18nSettings.some((i18n) => i18n.locale === pageFolder.locale);
+  }
+
+  /**
+   * Checks if the given file path corresponds to the default language.
+   * @param filePath - The file path to check.
+   * @returns True if the file path corresponds to the default language, false otherwise.
+   */
+  public static async isDefaultLanguage(filePath: string): Promise<boolean> {
+    const i18nSettings = await i18n.getSettings(filePath);
+    if (!i18nSettings) {
+      return false;
+    }
+
+    const pageFolder = Folders.getPageFolderByFilePath(filePath);
+    if (!pageFolder || !pageFolder.defaultLocale) {
+      return false;
+    }
+
+    const fileInfo = await i18n.getFileInfo(filePath);
+
+    if (pageFolder.path) {
+      if (pageFolder.locale) {
+        return pageFolder.locale === pageFolder.defaultLocale;
+      }
+
+      let pageFolderPath = parseWinPath(pageFolder.path);
+      if (!pageFolderPath.endsWith('/')) {
+        pageFolderPath += '/';
+      }
+
+      return (
+        parseWinPath(fileInfo.dir).toLowerCase() === parseWinPath(pageFolderPath).toLowerCase()
+      );
+    }
+
+    return false;
+  }
+
+  /**
+   * Retrieves the I18nConfig for a given file path.
+   * @param filePath - The path of the file.
+   * @returns The I18nConfig object if found, otherwise undefined.
+   */
+  public static async getLocale(filePath: string): Promise<I18nConfig | undefined> {
+    const i18nSettings = await i18n.getSettings(filePath);
+    if (!i18nSettings) {
+      return;
+    }
+
+    let pageFolder = Folders.getPageFolderByFilePath(filePath);
+
+    const fileInfo = await i18n.getFileInfo(filePath);
+
+    if (pageFolder && pageFolder.defaultLocale) {
+      let pageFolderPath = parseWinPath(pageFolder.path);
+      if (!pageFolderPath.endsWith('/')) {
+        pageFolderPath += '/';
+      }
+
+      if (
+        pageFolder.path &&
+        pageFolder.locale &&
+        parseWinPath(fileInfo.dir).toLowerCase() === parseWinPath(pageFolderPath).toLowerCase()
+      ) {
+        return i18nSettings.find((i18n) => i18n.locale === pageFolder?.locale);
+      }
+    }
+
+    pageFolder = await i18n.getPageFolder(filePath);
+    if (!pageFolder) {
+      return;
+    }
+
+    for (const locale of i18nSettings) {
+      if (locale.path && pageFolder.defaultLocale !== locale.locale) {
+        const translation = join(pageFolder.path, locale.path, fileInfo.filename);
+        if (parseWinPath(translation).toLowerCase() === parseWinPath(filePath).toLowerCase()) {
+          return locale;
+        }
+      }
+    }
+
+    return;
+  }
+
+  /**
+   * Retrieves translations for a given file path.
+   * @param filePath - The path of the file for which translations are requested.
+   * @returns A promise that resolves to an object containing translations for each locale, or undefined if i18n settings are not available.
+   */
+  public static async getTranslations(filePath: string): Promise<
+    | {
+        [locale: string]: {
+          locale: I18nConfig;
+          path: string;
+        };
+      }
+    | undefined
+  > {
+    const i18nSettings = await i18n.getSettings(filePath);
+    if (!i18nSettings) {
+      return;
+    }
+
+    const translations: {
+      [locale: string]: {
+        locale: I18nConfig;
+        path: string;
+      };
+    } = {};
+
+    let pageFolder = Folders.getPageFolderByFilePath(filePath);
+    const fileInfo = await i18n.getFileInfo(filePath);
+
+    if (pageFolder && pageFolder.defaultLocale && pageFolder.localeSourcePath) {
+      for (const i18n of i18nSettings) {
+        const translation = join(pageFolder.localeSourcePath, i18n.path || '', fileInfo.filename);
+        if (await existsAsync(translation)) {
+          translations[i18n.locale] = {
+            locale: i18n,
+            path: translation
+          };
+        }
+      }
+      return translations;
+    }
+
+    pageFolder = await i18n.getPageFolder(filePath);
+    if (!pageFolder) {
+      return translations;
+    }
+
+    for (const i18n of i18nSettings) {
+      const translation = join(pageFolder.path, i18n.path || '', fileInfo.filename);
+      if (await existsAsync(translation)) {
+        translations[i18n.locale] = {
+          locale: i18n,
+          path: translation
+        };
+      }
+    }
+
+    return translations;
+  }
+
+  /**
+   * Creates a new content file for a specific locale based on the i18n configuration.
+   * If a file path is provided, the new content file will be created in the same directory.
+   * If no file path is provided, the active file in the editor will be used.
+   * @param filePath The path of the file where the new content file should be created.
+   */
+  private static async create(fileUri?: Uri | string) {
+    if (!fileUri) {
+      const filePath = ArticleHelper.getActiveFile();
+      fileUri = filePath ? Uri.file(filePath) : undefined;
+    }
+
+    if (!fileUri) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoFileSelected));
+      return;
+    }
+
+    if (typeof fileUri === 'string') {
+      fileUri = Uri.file(fileUri);
+    }
+
+    const pageFolder = Folders.getPageFolderByFilePath(fileUri.fsPath);
+    if (!pageFolder || !pageFolder.localeSourcePath) {
+      Notifications.error(l10n.t(LocalizationKey.commandsI18nCreateErrorNoContentFolder));
+      return;
+    }
+
+    const i18nSettings = await i18n.getSettings(fileUri.fsPath);
+    if (!i18nSettings) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoConfig));
+      return;
+    }
+
+    const sourceLocale = await i18n.getLocale(fileUri.fsPath);
+    if (!sourceLocale || !sourceLocale.locale) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateErrorNoLocaleDefinition));
+      return;
+    }
+
+    const translations = (await i18n.getTranslations(fileUri.fsPath)) || {};
+    const targetLocales = i18nSettings.filter((i18nSetting) => {
+      return (
+        i18nSetting.path &&
+        i18nSetting.locale !== sourceLocale.locale &&
+        !translations[i18nSetting.locale]
+      );
+    });
+
+    if (targetLocales.length === 0) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateErrorNoLocales));
+      return;
+    }
+
+    const locale = await window.showQuickPick(
+      targetLocales.map((i18n) => i18n.title || i18n.locale),
+      {
+        title: l10n.t(LocalizationKey.commandsI18nCreateQuickPickTitle),
+        placeHolder: l10n.t(LocalizationKey.commandsI18nCreateQuickPickPlaceHolder),
+        ignoreFocusOut: true
+      }
+    );
+
+    if (!locale) {
+      return;
+    }
+
+    const targetLocale = i18nSettings.find(
+      (i18n) => i18n.title === locale || i18n.locale === locale
+    );
+    if (!targetLocale || !targetLocale.path) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoConfig));
+      return;
+    }
+
+    let article = await ArticleHelper.getFrontMatterByPath(fileUri.fsPath);
+    if (!article) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoFile));
+      return;
+    }
+
+    const contentType = ArticleHelper.getContentType(article);
+    if (!contentType) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoContentType));
+      return;
+    }
+
+    // Get the directory of the file
+    const fileInfo = parse(fileUri.fsPath);
+    let dir = fileInfo.dir;
+    let pageBundleDir = '';
+
+    if (await ArticleHelper.isPageBundle(fileUri.fsPath)) {
+      dir = ArticleHelper.getPageFolderFromBundlePath(fileUri.fsPath);
+      pageBundleDir = fileUri.fsPath.replace(dir, '');
+      pageBundleDir = join(parse(pageBundleDir).dir);
+    }
+
+    const i18nDir = join(pageFolder.localeSourcePath, targetLocale.path, pageBundleDir);
+
+    if (!(await existsAsync(i18nDir))) {
+      await workspace.fs.createDirectory(Uri.file(i18nDir));
+    }
+
+    article = await i18n.updateFrontMatter(
+      article,
+      fileUri.fsPath,
+      contentType,
+      sourceLocale,
+      targetLocale,
+      i18nDir
+    );
+
+    const newFilePath = join(i18nDir, fileInfo.base);
+    if (await existsAsync(newFilePath)) {
+      Notifications.error(l10n.t(LocalizationKey.commandsI18nCreateErrorFileExists));
+      return;
+    }
+
+    if (sourceLocale?.locale) {
+      article = await i18n.translate(article, sourceLocale, targetLocale);
+    }
+
+    const newFileUri = Uri.file(newFilePath);
+    await workspace.fs.writeFile(
+      newFileUri,
+      Buffer.from(ArticleHelper.stringifyFrontMatter(article.content, article.data))
+    );
+
+    await openFileInEditor(newFilePath);
+
+    PagesListener.refresh();
+
+    Notifications.info(
+      l10n.t(
+        LocalizationKey.commandsI18nCreateSuccessCreated,
+        sourceLocale.title || sourceLocale.locale
+      )
+    );
+  }
+
+  /**
+   * Translates the given article from the source locale to the target locale using DeepL translation service.
+   * @param article - The article to be translated.
+   * @param sourceLocale - The source locale configuration.
+   * @param targetLocale - The target locale configuration.
+   * @returns A promise that resolves to the translated article.
+   */
+  private static async translate(
+    article: ParsedFrontMatter,
+    sourceLocale: I18nConfig,
+    targetLocale: I18nConfig
+  ) {
+    return new Promise<ParsedFrontMatter>(async (resolve) => {
+      await window.withProgress(
+        {
+          location: ProgressLocation.Notification,
+          title: l10n.t(LocalizationKey.commandsI18nTranslateProgressTitle),
+          cancellable: false
+        },
+        async () => {
+          try {
+            const title = article.data.title || '';
+            const description = article.data.description || '';
+            const content = article.content || '';
+
+            const text = [title, description, content];
+            const translations = await Translations.translate(
+              text,
+              sourceLocale.locale,
+              targetLocale.locale
+            );
+
+            if (!translations || translations.length < 3) {
+              resolve(article);
+              return;
+            }
+
+            article.data.title = article.data.title ? translations[0] : '';
+            article.data.description = article.data.description ? translations[1] : '';
+            article.content = article.content ? translations[2] : '';
+          } catch (error) {
+            Notifications.error(`${(error as Error).message}`);
+          }
+
+          resolve(article);
+        }
+      );
+    });
+  }
+
+  /**
+   * Retrieves the filename and directory information from the given file path.
+   * If the file is a page bundle, the directory will be adjusted accordingly.
+   * @param filePath - The path of the file.
+   * @returns An object containing the filename and directory.
+   */
+  private static async getFileInfo(filePath: string): Promise<{ filename: string; dir: string }> {
+    if (i18n.processedFiles[filePath]) {
+      return i18n.processedFiles[filePath];
+    }
+
+    const fileInfo = parse(filePath);
+    let filename = fileInfo.base;
+    let dir = fileInfo.dir;
+
+    const isPageBundle = await ArticleHelper.isPageBundle(filePath);
+    if (isPageBundle) {
+      dir = ArticleHelper.getPageFolderFromBundlePath(filePath);
+      filename = join(parseWinPath(filePath).replace(parseWinPath(dir), ''));
+    }
+
+    if (!dir.endsWith('/')) {
+      dir += '/';
+    }
+
+    i18n.processedFiles[filePath] = {
+      isPageBundle,
+      filename,
+      dir
+    };
+
+    return i18n.processedFiles[filePath];
+  }
+
+  /**
+   * Retrieves the page folder for a given file path.
+   *
+   * @param filePath - The path of the file.
+   * @returns A promise that resolves to the ContentFolder object representing the page folder, or undefined if not found.
+   */
+  private static async getPageFolder(filePath: string): Promise<ContentFolder | undefined> {
+    const folders = Folders.get();
+
+    const localeFolders = folders?.filter((folder) => folder.defaultLocale);
+    if (!localeFolders) {
+      return;
+    }
+
+    const fileInfo = await i18n.getFileInfo(filePath);
+
+    for (const folder of localeFolders) {
+      const defaultFile = join(folder.path, fileInfo.filename);
+      if (await existsAsync(defaultFile)) {
+        return folder;
+      }
+    }
+  }
+
+  /**
+   * Updates the front matter of an article with internationalization (i18n) support.
+   *
+   * @param article - The parsed front matter of the article.
+   * @param filePath - The path of the file containing the front matter.
+   * @param contentType - The content type of the article.
+   * @param sourceLocale - The source locale.
+   * @param targetLocale - The target locale.
+   * @param i18nDir - The directory where the i18n files are located.
+   * @returns A Promise that resolves to the updated parsed front matter.
+   */
+  private static async updateFrontMatter(
+    article: ParsedFrontMatter,
+    filePath: string,
+    contentType: IContentType,
+    sourceLocale: I18nConfig,
+    targetLocale: I18nConfig,
+    i18nDir: string
+  ): Promise<ParsedFrontMatter> {
+    const imageFields = ContentType.findFieldsByTypeDeep(contentType.fields, 'image');
+    if (imageFields.length > 0) {
+      article.data = await i18n.processImageFields(article.data, filePath, imageFields, i18nDir);
+    }
+
+    return article;
+  }
+
+  /**
+   * Processes the image fields in the provided data object.
+   * Replaces the image field values with the relative path to the image file.
+   *
+   * @param data - The data object containing the field values.
+   * @param filePath - The absolute file path of the data object.
+   * @param fields - The array of field arrays to process.
+   * @param i18nDir - The directory path for internationalization.
+   * @returns The updated data object with image field values replaced by relative paths.
+   */
+  private static async processImageFields(
+    data: { [key: string]: any },
+    filePath: string,
+    fields: Field[][],
+    i18nDir: string
+  ) {
+    for (const field of fields) {
+      if (!field) {
+        continue;
+      }
+
+      for (const f of field) {
+        if (f.type === 'image') {
+          const value = data[f.name];
+          if (value) {
+            let imgPath = FrameworkDetector.getAbsPathByFile(value, filePath);
+            imgPath = FrameworkDetector.getRelPathByFileDir(imgPath, i18nDir);
+            data[f.name] = imgPath;
+          }
+        }
+      }
+    }
+
+    return data;
+  }
+}

src/components/shadcn/Dropdown.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { cn } from "../../utils/cn"
+import { ChevronRightIcon } from "@heroicons/react/24/outline"
+
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-[var(--vscode-list-hoverBackground)] data-[state=open]:bg-[var(--vscode-list-hoverBackground)]",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded border border-[var(--frontmatter-border)] bg-[var(--vscode-sideBar-background)] p-1 text-[var(--vscode-editor-foreground)] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] rounded border border-[var(--frontmatter-border)] bg-[var(--vscode-sideBar-background)] p-1 text-[var(--vscode-editor-foreground)] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-96 overflow-auto",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[var(--vscode-list-hoverBackground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer disabled:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-[var(--frontmatter-border)]", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+}

src/components/uniforms-frontmatter/ListDelField.tsx

@@ -29,7 +29,7 @@ function ListDel({ disabled, name, readOnly, ...props }: ListDelFieldProps) {
 
   return (
     <span
-      className="autoform__list_del_field"
+      className="autoform__list_del_field mb-1"
       {...filterDOMProps(props)}
       onClick={onAction}
       onKeyDown={onAction}

src/components/uniforms-frontmatter/LongTextField.tsx

@@ -26,6 +26,7 @@ function LongText({
       <LabelField label={label} id={id} required={props.required} />
 
       <textarea
+        className={`block w-full py-2 pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
         disabled={disabled}
         id={id}
         name={name}

src/components/uniforms-frontmatter/TextField.tsx

@@ -28,6 +28,7 @@ function Text({
       <LabelField label={label} id={id} required={props.required} />
 
       <input
+        className='block w-full py-2 pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0'
         autoComplete={autoComplete}
         disabled={disabled}
         id={id}

src/constants/Extension.ts

@@ -67,6 +67,11 @@ export const COMMAND_NAME = {
   addMissingFields: getCommandName('contenttype.addMissingFields'),
   setContentType: getCommandName('contenttype.setContentType'),
 
+  // i18n
+  i18n: {
+    create: getCommandName('i18n.create')
+  },
+
   // Project
   switchProject: getCommandName('project.switch'),
 

src/constants/ExtensionState.ts

@@ -30,5 +30,15 @@ export const ExtensionState = {
     v7_0_0: {
       dateFields: `frontMatter:Updates:v7.0.0:dateFields`
     }
+  },
+
+  Secrets: {
+    Deepl: {
+      ApiKey: `frontMatter:Secrets:DeeplApiKey`
+    },
+    Azure: {
+      TranslatorKey: `frontMatter:Secrets:AzureTranslatorKey`,
+      TranslatorRegion: `frontMatter:Secrets:AzureTranslatorRegion`
+    }
   }
 };

src/constants/GeneralCommands.ts

@@ -1,13 +1,30 @@
 export const GeneralCommands = {
   toWebview: {
     setMode: 'setMode',
-    gitSyncingStart: 'gitSyncingStart',
-    gitSyncingEnd: 'gitSyncingEnd',
+    git: {
+      syncingStart: 'gitSyncingStart',
+      syncingEnd: 'gitSyncingEnd',
+      branchName: 'gitBranchName'
+    },
     setLocalization: 'setLocalization'
   },
   toVSCode: {
     openLink: 'openLink',
-    gitSync: 'gitSync',
+    git: {
+      isRepo: 'gitIsRepo',
+      sync: 'gitSync',
+      fetch: 'getFetch',
+      getBranch: 'getBranch',
+      selectBranch: 'gitSelectBranch'
+    },
+    secrets: {
+      get: 'getSecret',
+      set: 'setSecret'
+    },
+    content: {
+      locales: 'getContentLocales'
+    },
+    runCommand: 'runCommand',
     getLocalization: 'getLocalization',
     openOnWebsite: 'openOnWebsite'
   }

src/constants/Git.ts

@@ -0,0 +1,3 @@
+export const GIT_CONFIG = {
+  defaultCommitMessage: 'Synced by Front Matter'
+};

src/constants/Links.ts

@@ -8,3 +8,18 @@ export const DOCUMENTATION_SETTINGS_LINK = 'https://frontmatter.codes/docs/setti
 
 export const SENTRY_LINK =
   'https://1ac45704bbe74264a7b4674bdc2abf48@o1022172.ingest.sentry.io/5988293';
+
+export const DOCS_SUBMODULES = 'https://frontmatter.codes/docs/git-integration#git-submodules';
+
+export const WEBSITE_LINKS = {
+  root: 'https://frontmatter.codes',
+  api: {
+    metrics: 'https://frontmatter.codes/api/metrics',
+    ai: 'https://frontmatter.codes/api/ai'
+  },
+  docs: {
+    dataDashboard: 'https://frontmatter.codes/docs/dashboard/datafiles-view',
+    snippets: `https://frontmatter.codes/docs/snippets`,
+    snippetsPlaceholders: `https://frontmatter.codes/docs/snippets#placeholders`
+  }
+};

src/constants/SentryIgnore.ts

@@ -1,5 +1,6 @@
 export const SentryIgnore = [
   `ResizeObserver loop limit exceeded`,
   `Cannot read properties of undefined (reading 'unobserve')`,
-  `TypeError: Cannot read properties of undefined (reading 'unobserve')`
+  `TypeError: Cannot read properties of undefined (reading 'unobserve')`,
+  `ResizeObserver loop completed with undelivered notifications.`
 ];

src/constants/TelemetryEvent.ts

@@ -49,5 +49,6 @@ export const TelemetryEvent = {
   webviewTaxonomyDashboard: 'webviewTaxonomyDashboard',
 
   // Git
-  gitSync: 'gitSync'
+  gitSync: 'gitSync',
+  gitFetch: 'gitFetch'
 };

src/constants/context.ts

@@ -8,6 +8,8 @@ export const CONTEXT = {
   isValidFile: 'frontMatter:file:isValid',
   isDevelopment: 'frontMatter:isDevelopment',
 
+  isI18nEnabled: 'frontMatter:i18n:enabled',
+
   hasViewModes: 'frontMatter:has:modes',
 
   isSnippetsDashboardEnabled: 'frontMatter:dashboard:snippets:enabled',

src/constants/index.ts

@@ -7,6 +7,7 @@ export * from './ExtensionState';
 export * from './Features';
 export * from './FrameworkDetectors';
 export * from './GeneralCommands';
+export * from './Git';
 export * from './Links';
 export * from './LocalStore';
 export * from './Navigation';

src/constants/settings.ts

@@ -25,6 +25,7 @@ export const SETTING_TAXONOMY_CONTENT_TYPES = 'taxonomy.contentTypes';
 
 export const SETTING_SLUG_PREFIX = 'taxonomy.slugPrefix';
 export const SETTING_SLUG_SUFFIX = 'taxonomy.slugSuffix';
+export const SETTING_SLUG_TEMPLATE = 'taxonomy.slugTemplate';
 export const SETTING_SLUG_UPDATE_FILE_NAME = 'taxonomy.alignFilename';
 
 export const SETTING_INDENT_ARRAY = 'taxonomy.indentArrays';
@@ -56,10 +57,12 @@ export const SETTING_CUSTOM_SCRIPTS = 'custom.scripts';
 
 export const SETTING_AUTO_UPDATE_DATE = 'content.autoUpdateDate';
 export const SETTING_CONTENT_PAGE_FOLDERS = 'content.pageFolders';
+export const SETTING_CONTENT_I18N = 'content.i18n';
 export const SETTING_CONTENT_STATIC_FOLDER = 'content.publicFolder';
 export const SETTING_CONTENT_FRONTMATTER_HIGHLIGHT = 'content.fmHighlight';
 export const SETTING_CONTENT_DRAFT_FIELD = 'content.draftField';
 export const SETTING_CONTENT_SORTING = 'content.sorting';
+export const SETTING_CONTENT_FILTERS = 'content.filters';
 export const SETTING_CONTENT_WYSIWYG = 'content.wysiwyg';
 export const SETTING_CONTENT_PLACEHOLDERS = 'content.placeholders';
 export const SETTING_CONTENT_SNIPPETS = 'content.snippets';
@@ -74,6 +77,7 @@ export const SETTING_CONTENT_HIDE_FRONTMATTER = 'content.hideFm';
 export const SETTING_CONTENT_HIDE_FRONTMATTER_MESSAGE = 'content.hideFmMessage';
 
 export const SETTING_MEDIA_SUPPORTED_MIMETYPES = 'media.supportedMimeTypes';
+export const SETTING_MEDIA_CONTENTTYPES = 'media.contentTypes';
 
 export const SETTING_DASHBOARD_OPENONSTART = 'dashboard.openOnStart';
 export const SETTING_DASHBOARD_CONTENT_TAGS = 'dashboard.content.cardTags';
@@ -98,6 +102,8 @@ export const SETTING_FRAMEWORK_START = 'framework.startCommand';
 export const SETTING_SITE_BASEURL = 'site.baseURL';
 
 export const SETTING_GIT_ENABLED = 'git.enabled';
+export const SETTING_GIT_DISABLED_BRANCHES = 'git.disableOnBranches';
+export const SETTING_GIT_REQUIRES_COMMIT_MSG = 'git.requiresCommitMessage';
 export const SETTING_GIT_COMMIT_MSG = 'git.commitMessage';
 export const SETTING_GIT_SUBMODULE_PULL = 'git.submodule.pull';
 export const SETTING_GIT_SUBMODULE_PUSH = 'git.submodule.push';
@@ -127,13 +133,3 @@ export const SETTING_CONTENT_FOLDERS = 'content.folders';
  * Use the `isPublishDate` property on the content type datetime field instead
  */
 export const SETTING_DATE_FIELD = 'taxonomy.dateField';
-/**
- * @deprecated
- * Use the `isModifiedDate` property on the content type datetime field instead
- */
-export const SETTING_MODIFIED_FIELD = 'taxonomy.modifiedField';
-/**
- * @deprecated
- * Use the `frontMatter.content.snippets` setting instead
- */
-export const SETTING_DASHBOARD_MEDIA_SNIPPET = 'dashboard.mediaSnippet';

src/dashboardWebView/DashboardCommand.ts

@@ -1,4 +1,5 @@
 export enum DashboardCommand {
+  initializing = 'initializing',
   loading = 'loading',
   pages = 'pages',
   searchPages = 'searchPages',

src/dashboardWebView/DashboardMessage.ts

@@ -54,6 +54,7 @@ export enum DashboardMessage {
   insertSnippet = 'insertSnippet',
   addSnippet = 'addSnippet',
   updateSnippet = 'updateSnippet',
+  updateSnippetPlaceholders = 'updateSnippetPlaceholders',
 
   // Taxonomy dashboard
   getTaxonomyData = 'getTaxonomyData',
@@ -74,6 +75,7 @@ export enum DashboardMessage {
   runCustomScript = 'runCustomScript',
   sendTelemetry = 'sendTelemetry',
   logError = 'logError',
+  showNotification = 'showNotification',
 
   // Settings
   getSettings = 'getSettings',

src/dashboardWebView/components/App.tsx

@@ -30,7 +30,7 @@ export interface IAppProps {
 export const App: React.FunctionComponent<IAppProps> = ({
   showWelcome
 }: React.PropsWithChildren<IAppProps>) => {
-  const { loading, pages, settings, localeReady } = useMessages();
+  const { pages, settings } = useMessages();
   const view = useRecoilValue(DashboardViewSelector);
   const mode = useRecoilValue(ModeAtom);
   const [isDevMode, setIsDevMode] = useState(false);
@@ -70,7 +70,7 @@ export const App: React.FunctionComponent<IAppProps> = ({
     }
   }, []);
 
-  if (!settings || !localeReady) {
+  if (!settings) {
     return <Spinner />;
   }
 
@@ -123,7 +123,7 @@ Stack: ${componentStack}`
           <Route path={routePaths.welcome} element={<WelcomeScreen settings={settings} />} />
           <Route
             path={routePaths.contents}
-            element={<Contents pages={pages} loading={loading} />}
+            element={<Contents pages={pages} />}
           />
           <Route path={routePaths.media} element={<Media />} />
           <Route path={routePaths.snippets} element={<Snippets />} />

src/dashboardWebView/components/Chatbot/Chatbox.tsx

@@ -1,7 +1,6 @@
 import { PaperAirplaneIcon } from '@heroicons/react/24/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';
 
@@ -13,7 +12,6 @@ export interface IChatboxProps {
 export const Chatbox: React.FunctionComponent<IChatboxProps> = ({ isLoading, onTrigger }: React.PropsWithChildren<IChatboxProps>) => {
   const [message, setMessage] = React.useState<string>("");
   const [isFocussed, setIsFocussed] = React.useState<boolean>(false);
-  const { getColors } = useThemeColors();
 
   const callAi = useCallback(() => {
     setTimeout(() => {
@@ -29,11 +27,7 @@ export const Chatbox: React.FunctionComponent<IChatboxProps> = ({ isLoading, onT
         <div className='chatbox px-4'>
           <textarea
             className={`
-          resize-none w-full outline-none border-0 pr-8 
-          ${getColors(
-              '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'
-            )}`}
+          resize-none w-full outline-none border-0 pr-8 border-transparent bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-none focus:border-transparent`}
             placeholder={l10n.t(LocalizationKey.dashboardChatbotChatboxPlaceholder)}
             autoFocus={true}
             value={message}

src/dashboardWebView/components/Common/ChoiceButton.tsx

@@ -1,10 +1,9 @@
-import { Menu } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
-import { MenuItem, MenuItems } from '../Menu';
+import { MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';
 
 export interface IChoiceButtonProps {
   title: string;
@@ -24,62 +23,52 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
   choices,
   title
 }: React.PropsWithChildren<IChoiceButtonProps>) => {
-  const { getColors } = useThemeColors();
 
   return (
     <span className="relative z-50 inline-flex shadow-sm rounded-md">
       <button
         type="button"
         className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium ${choices.length > 0 ? `rounded-l` : `rounded`
-          } ${getColors(
-            `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
-            `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-          )
-          }`}
+          } text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
         onClick={onClick}
         disabled={disabled}
       >
         {title}
       </button>
 
-      {choices.length > 0 && (
-        <Menu as="span" className="-ml-px relative block">
-          <Menu.Button
-            className={`h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none  rounded-r ${getColors(
-              `text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 disabled:bg-gray-500`,
-              `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-            )
-              }`}
-            disabled={disabled}
-          >
-            <span className="sr-only">{l10n.t(LocalizationKey.dashboardCommonChoiceButtonOpen)}</span>
-            <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
-          </Menu.Button>
 
-          <MenuItems widthClass={`w-56`} disablePopper>
-            <div className="py-1">
-              {choices.map((choice, idx) => (
-                <MenuItem
-                  key={idx}
-                  title={
-                    choice.icon ? (
-                      <div className="flex items-center">
-                        {choice.icon}
-                        <span>{choice.title}</span>
-                      </div>
-                    ) : (
-                      choice.title
-                    )
-                  }
-                  value={null}
-                  onClick={choice.onClick}
-                  disabled={choice.disabled}
-                />
-              ))}
-            </div>
-          </MenuItems>
-        </Menu>
-      )}
-    </span>
+      {choices.length > 0 && (
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            className='h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none  rounded-r text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50'
+            disabled={disabled}>
+            <span className="sr-only">{l10n.t(LocalizationKey.dashboardCommonChoiceButtonOpen)}</span>
+            <ChevronDownIcon className={`h-4 w-4`} aria-hidden="true" />
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent align='end'>
+            {choices.map((choice, idx) => (
+              <MenuItem
+                key={idx}
+                title={
+                  choice.icon ? (
+                    <div className="flex items-center">
+                      {choice.icon}
+                      <span>{choice.title}</span>
+                    </div>
+                  ) : (
+                    choice.title
+                  )
+                }
+                value={null}
+                onClick={choice.onClick}
+                disabled={choice.disabled}
+              />
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+      }
+    </span >
   );
 };

src/dashboardWebView/components/Common/DateField.tsx

@@ -1,7 +1,6 @@
 import { format as fnsFormat } from 'date-fns';
 import * as React from 'react';
 import { DateHelper } from '../../../helpers/DateHelper';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IDateFieldProps {
   className?: string;
@@ -15,7 +14,6 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({
   format
 }: React.PropsWithChildren<IDateFieldProps>) => {
   const [dateValue, setDateValue] = React.useState<string>('');
-  const { getColors } = useThemeColors();
 
   React.useEffect(() => {
     try {
@@ -38,7 +36,7 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({
   }
 
   return (
-    <span className={`date__field ${className || ''} text-xs ${getColors(`text-vulcan-100 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)}`}>
+    <span className={`date__field ${className || ''} text-xs text-[var(--frontmatter-text)]`}>
       {dateValue}
     </span>
   );

src/dashboardWebView/components/Common/ItemSelection.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import useSelectedItems from '../../hooks/useSelectedItems';
+import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
+import { useMemo } from 'react';
+
+export interface IItemSelectionProps {
+  filePath: string;
+  isRowItem?: boolean;
+}
+
+export const ItemSelection: React.FunctionComponent<IItemSelectionProps> = ({
+  filePath,
+  isRowItem
+}: React.PropsWithChildren<IItemSelectionProps>) => {
+  const { onMultiSelect, selectedFiles } = useSelectedItems();
+
+  const cssNames = useMemo(() => {
+    if (isRowItem) {
+      return 'block';
+    }
+    return `${selectedFiles.includes(filePath) ? 'block' : 'hidden'} absolute top-2 left-2`;
+  }, [isRowItem, selectedFiles]);
+
+  return (
+    <div className={`${cssNames} group-hover:block`}>
+      <VSCodeCheckbox
+        style={{
+          boxShadow: isRowItem ? "" : "0 0 3px var(--frontmatter-border-preserve)"
+        }}
+        onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+          e.stopPropagation();
+          onMultiSelect(filePath);
+        }}
+        checked={selectedFiles.includes(filePath)} />
+    </div>
+  );
+};

src/dashboardWebView/components/Common/Link.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export interface ILinkProps {
+  title: string;
+  href: string;
+  className?: string;
+}
+
+export const Link: React.FunctionComponent<ILinkProps> = ({ children, title, href, className }: React.PropsWithChildren<ILinkProps>) => {
+  return (
+    <a
+      className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)] ${className || ""}`}
+      title={title}
+      href={href}>
+      {children}
+    </a>
+  );
+};

src/dashboardWebView/components/Common/LinkButton.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface ILinkButtonProps {
   title: string;
@@ -7,17 +6,10 @@ export interface ILinkButtonProps {
 }
 
 export const LinkButton: React.FunctionComponent<ILinkButtonProps> = ({ children, title, onClick }: React.PropsWithChildren<ILinkButtonProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <button
       type="button"
-      className={
-        getColors(
-          `text-gray-500 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600`,
-          `text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`
-        )
-      }
+      className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`}
       title={title}
       onClick={onClick}>
       {children}

src/dashboardWebView/components/Common/Spinner.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
+import { LoadingType } from '../../../models';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
-export interface ISpinnerProps { }
+export interface ISpinnerProps {
+  type?: LoadingType;
+}
 
 export const Spinner: React.FunctionComponent<ISpinnerProps> = (
-  _: React.PropsWithChildren<ISpinnerProps>
+  { type }: React.PropsWithChildren<ISpinnerProps>
 ) => {
   return (
     <div className={`z-50 fixed top-0 left-0 right-0 bottom-0 w-full h-full bg-[var(--vscode-editor-background)] opacity-75`}>
@@ -12,6 +17,15 @@ export const Spinner: React.FunctionComponent<ISpinnerProps> = (
       >
         <div className={`h-full absolute rounded-sm bg-[var(--vscode-activityBarBadge-background)] animate-[vscode-loader_4s_ease-in-out_infinite]`} />
       </div>
+
+      {
+        type === 'initPages' && (
+          <div className='spinner-msg h-full text-2xl flex justify-center items-center text-[var(--vscode-foreground)]'>
+            <span>{l10n.t(LocalizationKey.loadingInitPages)}</span>
+            <span className='dots'></span>
+          </div>
+        )
+      }
     </div>
   );
 };

src/dashboardWebView/components/Common/TextField.tsx

@@ -0,0 +1,78 @@
+import { XCircleIcon } from '@heroicons/react/24/solid';
+import * as React from 'react';
+
+export interface ITextFieldProps {
+  name: string;
+  value?: string;
+  placeholder?: string;
+  icon?: JSX.Element;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  onChange?: (value: string) => void;
+  onReset?: () => void;
+}
+
+export const TextField: React.FunctionComponent<ITextFieldProps> = ({
+  name,
+  value,
+  placeholder,
+  icon,
+  autoFocus,
+  multiline,
+  rows,
+  disabled,
+  onChange,
+  onReset
+}: React.PropsWithChildren<ITextFieldProps>) => {
+  return (
+    <div className="relative flex justify-center">
+      {
+        icon && (
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            {icon}
+          </div>
+        )
+      }
+
+      {
+        multiline ? (
+          <textarea
+            rows={rows || 3}
+            name={name}
+            className={`block w-full py-2 ${icon ? "pl-10" : "pl-2"} pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
+            style={{
+              boxShadow: "none"
+            }}
+            placeholder={placeholder || ""}
+            value={value}
+            autoFocus={!!autoFocus}
+            onChange={(e) => onChange && onChange(e.target.value)}
+            disabled={!!disabled}
+          />
+        ) : (
+          <input
+            type="text"
+            name={name}
+            className={`block w-full py-2 ${icon ? "pl-10" : "pl-2"} pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
+            style={{
+              boxShadow: "none"
+            }}
+            placeholder={placeholder || ""}
+            value={value}
+            autoFocus={!!autoFocus}
+            onChange={(e) => onChange && onChange(e.target.value)}
+            disabled={!!disabled}
+          />
+        )
+      }
+
+      {(value && onReset) && (
+        <button onClick={onReset} className="absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--vscode-input-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]">
+          <XCircleIcon className={`h-5 w-5`} aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  );
+};

src/dashboardWebView/components/Contents/ContentActions.tsx

@@ -1,21 +1,18 @@
 import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
-import { Menu } from '@headlessui/react';
-import { EyeIcon, GlobeEuropeAfricaIcon, CommandLineIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { EyeIcon, GlobeEuropeAfricaIcon, CommandLineIcon, TrashIcon, EllipsisVerticalIcon, LanguageIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import { CustomScript, ScriptType } from '../../../models';
+import { CustomScript, I18nConfig, ScriptType } from '../../../models';
 import { DashboardMessage } from '../../DashboardMessage';
-import { MenuItem, MenuItems, ActionMenuButton, QuickAction } from '../Menu';
+import { QuickAction } from '../Menu';
 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';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { SettingsSelector } from '../../state';
-import { GeneralCommands } from '../../../constants';
+import { COMMAND_NAME, GeneralCommands } from '../../../constants';
 import { PinIcon } from '../Icons/PinIcon';
 import { PinnedItemsAtom } from '../../state/atom/PinnedItems';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';
 
 export interface IContentActionsProps {
   title: string;
@@ -23,6 +20,14 @@ export interface IContentActionsProps {
   relPath: string;
   scripts: CustomScript[] | undefined;
   listView?: boolean;
+  locale?: I18nConfig;
+  isDefaultLocale?: boolean;
+  translations?: {
+    [locale: string]: {
+      locale: I18nConfig;
+      path: string;
+    };
+  };
   onOpen: () => void;
 }
 
@@ -32,26 +37,21 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
   relPath,
   scripts,
   onOpen,
-  listView
+  listView,
+  isDefaultLocale,
+  translations,
+  locale
 }: React.PropsWithChildren<IContentActionsProps>) => {
   const [pinnedItems, setPinnedItems] = useRecoilState(PinnedItemsAtom);
   const [showDeletionAlert, setShowDeletionAlert] = React.useState(false);
-  const { getColors } = useThemeColors();
   const settings = useRecoilValue(SettingsSelector);
 
-  const [referenceElement, setReferenceElement] = useState<any>(null);
-  const [popperElement, setPopperElement] = useState<any>(null);
-  const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {
-    placement: listView ? 'right-start' : 'bottom-end',
-    strategy: 'fixed'
-  });
-
-  const onView = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const onView = (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
     onOpen();
   };
 
-  const onDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const onDelete = (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
     setShowDeletionAlert(true);
   };
@@ -63,7 +63,11 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
     setShowDeletionAlert(false);
   };
 
-  const openOnWebsite = React.useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+  const onOpenFile = (filePath: string) => {
+    messageHandler.send(DashboardMessage.openFile, filePath);
+  }
+
+  const openOnWebsite = React.useCallback((e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
     if (settings?.websiteUrl && path) {
       Messenger.send(GeneralCommands.toVSCode.openOnWebsite, {
@@ -73,14 +77,14 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
     }
   }, [settings?.websiteUrl, path]);
 
-  const pinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+  const pinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
     messageHandler.request<string[]>(DashboardMessage.pinItem, path).then((result) => {
       setPinnedItems(result || []);
     })
   }, [path]);
 
-  const unpinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+  const unpinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
     messageHandler.request<string[]>(DashboardMessage.unpinItem, path).then((result) => {
       setPinnedItems(result || []);
@@ -88,13 +92,20 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
   }, [path]);
 
   const runCustomScript = React.useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>, script: CustomScript) => {
+    (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>, script: CustomScript) => {
       e.stopPropagation();
       Messenger.send(DashboardMessage.runCustomScript, { script, path });
     },
     [path]
   );
 
+  const runCommand = React.useCallback((commandId: string) => {
+    messageHandler.send(GeneralCommands.toVSCode.runCommand, {
+      command: commandId,
+      args: path
+    })
+  }, [path]);
+
   const isPinned = React.useMemo(() => {
     return pinnedItems.includes(relPath);
   }, [pinnedItems, relPath]);
@@ -108,19 +119,56 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
           !script.hidden
       )
       .map((script) => (
-        <MenuItem
-          key={script.title}
-          title={
-            <div className="flex items-center">
-              <CommandLineIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-              <span>{script.title}</span>
-            </div>
-          }
-          onClick={(value, e) => runCustomScript(e, script)}
-        />
+        <DropdownMenuItem key={script.id || script.title} onClick={(e) => runCustomScript(e, script)}>
+          <CommandLineIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+          <span>{script.title}</span>
+        </DropdownMenuItem>
       ));
   }, [scripts]);
 
+  const translationsMenu = React.useMemo(() => {
+    if (!locale || !translations || Object.keys(translations).length === 0) {
+      return null;
+    }
+
+    const crntLocale = translations[locale.locale];
+    const otherLocales = Object.entries(translations).filter(([key]) => key !== locale.locale);
+
+    if (otherLocales.length === 0) {
+      return null;
+    }
+
+    return (
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>
+          <LanguageIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+          <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsTranslationsMenu)}</span>
+        </DropdownMenuSubTrigger>
+
+        <DropdownMenuPortal>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem onClick={() => onOpenFile(crntLocale.path)}>
+              <span>{crntLocale.locale.title || crntLocale.locale.locale}</span>
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+
+            {
+              otherLocales.map(([key, value]) => (
+                <DropdownMenuItem
+                  key={key}
+                  onClick={() => onOpenFile(value.path)}
+                >
+                  <span>{value.locale.title || value.locale.locale}</span>
+                </DropdownMenuItem>
+              ))
+            }
+          </DropdownMenuSubContent>
+        </DropdownMenuPortal>
+      </DropdownMenuSub>
+    );
+  }, [translations, locale, isDefaultLocale]);
+
   return (
     <>
       <div
@@ -129,13 +177,9 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
       >
         <div
           className={`flex items-center border border-transparent rounded-full ${listView ? '' : 'p-2 -mt-4'
-            } ${getColors(
-              'group-hover/card:bg-gray-200 dark:group-hover/card:bg-vulcan-200 group-hover/card:border-gray-100 dark:group-hover/card:border-vulcan-50',
-              'group-hover/card:bg-[var(--vscode-sideBar-background)] group-hover/card:border-[var(--frontmatter-border)]'
-            )
-            }`}
+            } group-hover/card:bg-[var(--vscode-sideBar-background)] group-hover/card:border-[var(--frontmatter-border)]`}
         >
-          <Menu as="div" className={`relative flex text-left`}>
+          <div className={`relative flex text-left`}>
             {!listView && (
               <div className="hidden group-hover/card:flex">
                 <QuickAction title={l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)} onClick={onView}>
@@ -150,74 +194,62 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
                   )
                 }
 
-                <QuickAction title={l10n.t(LocalizationKey.commonDelete)} onClick={onDelete}>
+                <QuickAction
+                  title={l10n.t(LocalizationKey.commonDelete)}
+                  className={`hover:text-[var(--vscode-statusBarItem-errorBackground)]`}
+                  onClick={onDelete}>
                   <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
                 </QuickAction>
               </div>
             )}
 
-            <div ref={setReferenceElement} className={`flex`}>
-              <ActionMenuButton title={l10n.t(LocalizationKey.dashboardContentsContentActionsActionMenuButtonTitle)} />
-            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger className='text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] data-[state=open]:text-[var(--vscode-tab-activeForeground)] focus:outline-none'>
+                <span className="sr-only">{l10n.t(LocalizationKey.dashboardContentsContentActionsActionMenuButtonTitle)}</span>
+                <EllipsisVerticalIcon className="w-4 h-4" aria-hidden="true" />
+              </DropdownMenuTrigger>
 
-            <div
-              className="menu_items__wrapper z-20"
-              ref={setPopperElement}
-              style={styles.popper}
-              {...attributes.popper}
-            >
-              <MenuItems
-                updatePopper={forceUpdate || undefined}
-                widthClass="w-44"
-                marginTopClass={listView ? '' : ''}
-              >
-                <MenuItem
-                  title={
-                    <div className="flex items-center">
-                      <PinIcon className={`mr-2 h-5 w-5 flex-shrink-0 ${isPinned ? "" : "-rotate-90"}`} aria-hidden={true} />{' '}
-                      <span>{isPinned ? l10n.t(LocalizationKey.commonUnpin) : l10n.t(LocalizationKey.commonPin)}</span>
-                    </div>
-                  }
-                  onClick={(_, e) => isPinned ? unpinItem(e) : pinItem(e)}
-                />
-                <MenuItem
-                  title={
-                    <div className="flex items-center">
-                      <EyeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                      <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)}</span>
-                    </div>
-                  }
-                  onClick={(_, e) => onView(e)}
-                />
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={(e) => isPinned ? unpinItem(e) : pinItem(e)}>
+                  <PinIcon className={`mr-2 h-4 w-4 ${isPinned ? "" : "-rotate-90"}`} aria-hidden={true} />
+                  <span>{isPinned ? l10n.t(LocalizationKey.commonUnpin) : l10n.t(LocalizationKey.commonPin)}</span>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem onClick={onView}>
+                  <EyeIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+                  <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)}</span>
+                </DropdownMenuItem>
 
                 {
                   settings?.websiteUrl && (
-                    <MenuItem
-                      title={
-                        <div className="flex items-center">
-                          <GlobeEuropeAfricaIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                          <span>{l10n.t(LocalizationKey.commonOpenOnWebsite)}</span>
-                        </div>
-                      }
-                      onClick={(_, e) => openOnWebsite(e)}
-                    />
+                    <DropdownMenuItem onClick={openOnWebsite}>
+                      <GlobeEuropeAfricaIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+                      <span>{l10n.t(LocalizationKey.commonOpenOnWebsite)}</span>
+                    </DropdownMenuItem>
                   )
                 }
 
+                {
+                  locale && (
+                    <DropdownMenuItem onClick={() => runCommand(COMMAND_NAME.i18n.create)}>
+                      <LanguageIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+                      <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsTranslationsCreate)}</span>
+                    </DropdownMenuItem>
+                  )
+                }
+
+                {translationsMenu}
+
                 {customScriptActions}
 
-                <MenuItem
-                  title={
-                    <div className="flex items-center">
-                      <TrashIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                      <span>{l10n.t(LocalizationKey.commonDelete)}</span>
-                    </div>
-                  }
-                  onClick={(_, e) => onDelete(e)}
-                />
-              </MenuItems>
-            </div>
-          </Menu>
+                <DropdownMenuItem onClick={onDelete} className={`focus:bg-[var(--vscode-statusBarItem-errorBackground)] focus:text-[var(--vscode-statusBarItem-errorForeground)]`}>
+                  <TrashIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+                  <span>{l10n.t(LocalizationKey.commonDelete)}</span>
+                </DropdownMenuItem>
+
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
       </div>
 

src/dashboardWebView/components/Contents/Contents.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { Page } from '../../models';
-import { SettingsSelector } from '../../state';
+import { LoadingAtom, SettingsSelector } from '../../state';
 import { Overview } from './Overview';
 import { Spinner } from '../Common/Spinner';
 import { SponsorMsg } from '../Layout/SponsorMsg';
@@ -11,16 +11,16 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { TelemetryEvent } from '../../../constants';
 import { PageLayout } from '../Layout/PageLayout';
+import { FilesProvider } from '../../providers/FilesProvider';
 
 export interface IContentsProps {
   pages: Page[];
-  loading: boolean;
 }
 
 export const Contents: React.FunctionComponent<IContentsProps> = ({
-  pages,
-  loading
+  pages
 }: React.PropsWithChildren<IContentsProps>) => {
+  const loading = useRecoilValue(LoadingAtom);
   const settings = useRecoilValue(SettingsSelector);
   const { pageItems } = usePages(pages);
 
@@ -33,18 +33,20 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({
   }, []);
 
   return (
-    <PageLayout folders={pageFolders} totalPages={pageItems.length}>
-      <div className="w-full flex-grow max-w-full mx-auto pb-6 px-4">
-        {loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} />}
-      </div>
+    <FilesProvider files={pageItems}>
+      <PageLayout folders={pageFolders} totalPages={pageItems.length}>
+        <div className="w-full flex-grow max-w-full mx-auto pb-6">
+          {loading ? <Spinner type={loading} /> : <Overview pages={pageItems} settings={settings} />}
+        </div>
 
-      <SponsorMsg
-        beta={settings?.beta}
-        version={settings?.versionInfo}
-        isBacker={settings?.isBacker}
-      />
+        <SponsorMsg
+          beta={settings?.beta}
+          version={settings?.versionInfo}
+          isBacker={settings?.isBacker}
+        />
 
-      <img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=content" alt="Content metrics" />
-    </PageLayout>
+        <img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=content" alt="Content metrics" />
+      </PageLayout>
+    </FilesProvider>
   );
 };

src/dashboardWebView/components/Contents/I18nLabel.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Page } from '../../models';
+import { ChevronDownIcon, LanguageIcon } from '@heroicons/react/24/outline';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';
+import { MenuItem } from '../Menu';
+import { DashboardMessage } from '../../DashboardMessage';
+import { messageHandler } from '@estruyf/vscode/dist/client';
+
+export interface II18nLabelProps {
+  page: Page;
+}
+
+export const I18nLabel: React.FunctionComponent<II18nLabelProps> = ({
+  page
+}: React.PropsWithChildren<II18nLabelProps>) => {
+  if (!page.fmLocale) {
+    return null;
+  }
+
+  return (
+    <div className="mb-2 flex items-center">
+      <LanguageIcon className="mr-1 h-4 w-4 inline-block" />
+      <span className="text-xs">{page.fmLocale.title || page.fmLocale.locale}</span>
+    </div>
+  );
+};

src/dashboardWebView/components/Contents/Item.tsx

@@ -16,6 +16,8 @@ import { LocalizationKey } from '../../../localization';
 import { useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
 import useCard from '../../hooks/useCard';
+import { I18nLabel } from './I18nLabel';
+import { ItemSelection } from '../Common/ItemSelection';
 
 export interface IItemProps extends Page { }
 
@@ -69,6 +71,34 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     return [];
   }, [settings, pageData]);
 
+  const statusPlaceholder = useMemo(() => {
+    if (!statusHtml && !cardFields?.state) {
+      return null;
+    }
+
+    return (
+      statusHtml ? (
+        <div dangerouslySetInnerHTML={{ __html: statusHtml }} />
+      ) : (
+        cardFields?.state && draftField && draftField.name && typeof pageData[draftField.name] !== "undefined" ? <Status draft={pageData[draftField.name]} published={pageData.fmPublished} /> : null
+      )
+    )
+  }, [statusHtml, cardFields?.state, draftField, pageData]);
+
+  const datePlaceholder = useMemo(() => {
+    if (!dateHtml && !cardFields?.date) {
+      return null;
+    }
+
+    return (
+      dateHtml ? (
+        <div className='mr-4' dangerouslySetInnerHTML={{ __html: dateHtml }} />
+      ) : (
+        cardFields?.date && pageData.date ? <DateField className={`mr-4`} value={pageData.date} format={pageData.fmDateFormat} /> : null
+      )
+    )
+  }, [dateHtml, cardFields?.date, pageData]);
+
   const hasDraftOrDate = useMemo(() => {
     return cardFields && (cardFields.state || cardFields.date);
   }, [cardFields]);
@@ -80,9 +110,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           className={`group flex flex-col items-start content-start h-full w-full text-left shadow-md dark:shadow-none hover:shadow-xl border rounded bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] border-[var(--frontmatter-border)]`}
         >
           <button
+            title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
             onClick={openFile}
-            className={`relative h-36 w-full overflow-hidden border-b cursor-pointer border-[var(--frontmatter-border)]
-              }`}
+            className={`relative h-36 w-full overflow-hidden border-b cursor-pointer border-[var(--frontmatter-border)]`}
           >
             {
               imageHtml ?
@@ -104,54 +134,62 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             }
           </button>
 
-          <div className="relative p-4 w-full grow">
-            <div className={`flex justify-between items-center ${hasDraftOrDate ? `mb-2` : ``}`}>
-              {
-                statusHtml ? (
-                  <div dangerouslySetInnerHTML={{ __html: statusHtml }} />
-                ) : (
-                  cardFields?.state && draftField && draftField.name && <Status draft={pageData[draftField.name]} published={pageData.fmPublished} />
-                )
-              }
+          <ItemSelection filePath={pageData.fmFilePath} />
 
-              {
-                dateHtml ? (
-                  <div className='mr-4' dangerouslySetInnerHTML={{ __html: dateHtml }} />
-                ) : (
-                  cardFields?.date && <DateField className={`mr-4`} value={pageData.date} format={pageData.fmDateFormat} />
-                )
-              }
-            </div>
+          <div className="relative p-4 w-full grow">
+            {
+              (statusPlaceholder || datePlaceholder) && (
+                <div className={`flex justify-between items-center ${hasDraftOrDate ? `mb-2` : ``}`}>
+                  {statusPlaceholder}
+                  {datePlaceholder}
+                </div>
+              )
+            }
 
             <ContentActions
               title={pageData.title}
               path={pageData.fmFilePath}
               relPath={pageData.fmRelFileWsPath}
+              locale={pageData.fmLocale}
+              isDefaultLocale={pageData.fmDefaultLocale}
+              translations={pageData.fmTranslations}
               scripts={settings?.scripts}
               onOpen={openFile}
             />
 
-            <button onClick={openFile} className={`text-left block`}>
+            <I18nLabel page={pageData} />
+
+            <button
+              title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
+              onClick={openFile}
+              className={`text-left block`}>
               {
                 titleHtml ? (
                   <div dangerouslySetInnerHTML={{ __html: titleHtml }} />
                 ) : (
-                  <h2 className="mb-2 font-bold">
-                    {escapedTitle}
+                  <h2 className="font-bold">
+                    <span>{escapedTitle}</span>
                   </h2>
                 )
               }
             </button>
 
-            <button onClick={openFile} className={`text-left block`}>
-              {
-                descriptionHtml ? (
-                  <div dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
-                ) : (
-                  <p className={`text-xs text-[vara(--vscode-titleBar-activeForeground)]`}>{escapedDescription}</p>
-                )
-              }
-            </button>
+            {
+              (escapedDescription || descriptionHtml) && (
+                <button
+                  title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
+                  onClick={openFile}
+                  className={`mt-2 text-left block`}>
+                  {
+                    descriptionHtml ? (
+                      <div dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
+                    ) : (
+                      <p className={`text-xs text-[vara(--vscode-titleBar-activeForeground)]`}>{escapedDescription}</p>
+                    )
+                  }
+                </button>
+              )
+            }
 
             {
               tagsHtml ? (
@@ -197,7 +235,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           className={`px-5 cursor-pointer w-full text-left grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 border-b hover:bg-opacity-70 border-[var(--frontmatter-border)] hover:bg-[var(--vscode-sideBar-background)]`}
         >
           <div className="col-span-8 font-bold truncate flex items-center space-x-4">
-            <button title={`Open: ${escapedTitle}`} onClick={openFile}>
+            <ItemSelection filePath={pageData.fmFilePath} isRowItem />
+
+            <button
+              title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
+              onClick={openFile}>
               {escapedTitle}
             </button>
 

src/dashboardWebView/components/Contents/List.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
-import useThemeColors from '../../hooks/useThemeColors';
 import { DashboardViewType } from '../../models';
 import { ViewSelector } from '../../state';
 import * as l10n from '@vscode/l10n';
@@ -12,11 +11,10 @@ export const List: React.FunctionComponent<IListProps> = ({
   children
 }: React.PropsWithChildren<IListProps>) => {
   const view = useRecoilValue(ViewSelector);
-  const { getColors } = useThemeColors();
 
   let className = '';
   if (view === DashboardViewType.Grid) {
-    className = `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4`;
+    className = `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4`;
   } else if (view === DashboardViewType.List) {
     className = `-mx-4`;
   }
@@ -24,8 +22,7 @@ export const List: React.FunctionComponent<IListProps> = ({
   return (
     <ul role="list" className={className}>
       {view === DashboardViewType.List && (
-        <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)]')
-          }`}>
+        <li className={`px-5 relative uppercase py-2 border-b 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">{l10n.t(LocalizationKey.dashboardContentsListTitle)}</div>
             <div className="col-span-2">{l10n.t(LocalizationKey.dashboardContentsListDate)}</div>

src/dashboardWebView/components/Contents/Overview.tsx

@@ -6,13 +6,10 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { groupBy } from '../../../helpers/GroupBy';
 import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
 import { GroupOption } from '../../constants/GroupOption';
-import { Page } from '../../models/Page';
-import { Settings } from '../../models/Settings';
 import { GroupingSelector, PageAtom, ViewSelector } from '../../state';
 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';
 import { PinnedItemsAtom } from '../../state/atom/PinnedItems';
@@ -20,7 +17,7 @@ import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { PinIcon } from '../Icons/PinIcon';
 import { PinnedItem } from './PinnedItem';
-import { DashboardViewType } from '../../models';
+import { DashboardViewType, Page, Settings } from '../../models';
 
 export interface IOverviewProps {
   pages: Page[];
@@ -36,7 +33,6 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
   const grouping = useRecoilValue(GroupingSelector);
   const page = useRecoilValue(PageAtom);
   const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination);
-  const { getColors } = useThemeColors();
   const view = useRecoilValue(ViewSelector);
 
   const pagedPages = useMemo(() => {
@@ -123,8 +119,7 @@ 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 text-[var(--vscode-editor-foreground)]`}
           />
           {settings && settings?.contentFolders?.length > 0 ? (
             <p className={`text-xl font-medium`}>{l10n.t(LocalizationKey.dashboardContentsOverviewNoMarkdown)}</p>

src/dashboardWebView/components/Contents/PinnedItem.tsx

@@ -7,6 +7,7 @@ import { messageHandler } from '@estruyf/vscode/dist/client';
 import useCard from '../../hooks/useCard';
 import { SettingsSelector } from '../../state';
 import { useRecoilValue } from 'recoil';
+import { ItemSelection } from '../Common/ItemSelection';
 
 export interface IPinnedItemProps extends Page { }
 
@@ -21,7 +22,7 @@ export const PinnedItem: React.FunctionComponent<IPinnedItemProps> = ({
   }, [pageData.fmFilePath]);
 
   return (
-    <li className='group flex w-full border border-[var(--frontmatter-border)] rounded bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)]'>
+    <li className='group flex w-full border border-[var(--frontmatter-border)] rounded bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] relative'>
       <button onClick={openFile} className='relative h-full w-1/3'>
         {
           pageData["fmPreviewImage"] ? (
@@ -41,6 +42,8 @@ export const PinnedItem: React.FunctionComponent<IPinnedItemProps> = ({
         }
       </button>
 
+      <ItemSelection filePath={pageData.fmFilePath} />
+
       <button onClick={openFile} className='relative w-2/3 p-4 pr-6 text-left flex items-start'>
         <p className='font-bold'>{escapedTitle}</p>
 

src/dashboardWebView/components/DataView/DataView.tsx

@@ -16,26 +16,21 @@ import { EmptyView } from './EmptyView';
 import { Container } from './SortableContainer';
 import { SortableItem } from './SortableItem';
 import { ChevronRightIcon, CircleStackIcon } from '@heroicons/react/24/outline';
-import { ToastContainer, toast, Slide } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
 import { DataType } from '../../../models/DataType';
-import { TelemetryEvent } from '../../../constants';
+import { TelemetryEvent, WEBSITE_LINKS } from '../../../constants';
 import { NavigationItem } from '../Layout';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
-import { NavigationType } from '../../models';
 
 export interface IDataViewProps { }
 
 export const DataView: React.FunctionComponent<IDataViewProps> = (
-  props: React.PropsWithChildren<IDataViewProps>
+  _: React.PropsWithChildren<IDataViewProps>
 ) => {
   const [selectedData, setSelectedData] = useState<DataFile | null>(null);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [dataEntries, setDataEntries] = useState<any | any[] | null>(null);
   const settings = useRecoilValue(SettingsSelector);
-  const { getColors } = useThemeColors();
 
   const setSchema = (dataFile: DataFile) => {
     setSelectedData(dataFile);
@@ -112,15 +107,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         entries: data
       });
 
-      // Show toast message
-      toast.success('Updated your data entries', {
-        position: 'top-right',
-        autoClose: 2000,
-        hideProgressBar: true,
-        closeOnClick: true,
-        pauseOnHover: false,
-        transition: Slide
-      });
+      Messenger.send(DashboardMessage.showNotification, l10n.t(LocalizationKey.dashboardDataViewDataViewUpdateMessage));
     },
     [selectedData]
   );
@@ -178,27 +165,15 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         <div className="relative w-full flex-grow mx-auto overflow-hidden">
           <div className={`flex w-64 flex-col absolute inset-y-0`}>
             <aside
-              className={`flex flex-col flex-grow overflow-y-auto border-r py-6 px-4 overflow-auto ${getColors(
-                'border-gray-200 dark:border-vulcan-300',
-                'border-[var(--frontmatter-border)]'
-              )
-                }`}
+              className={`flex flex-col flex-grow overflow-y-auto border-r py-6 px-4 overflow-auto border-[var(--frontmatter-border)]`}
             >
-              <h2 className={`text-lg ${getColors(
-                `text-gray-500 dark:text-whisper-900`,
-                `text-[var(--frontmatter-text)]`
-              )
-                }`}>
+              <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
                 {l10n.t(LocalizationKey.dashboardDataViewDataViewSelect)}
               </h2>
 
               <nav className={`flex-1 py-4 -mx-4`}>
                 <div
-                  className={`divide-y border-t border-b  ${getColors(
-                    `divide-gray-200 dark:divide-vulcan-300 border-gray-200 dark:border-vulcan-300`,
-                    `divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`
-                  )
-                    }`}
+                  className={`divide-y border-t border-b divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`}
                 >
                   {dataFiles &&
                     dataFiles.length > 0 &&
@@ -222,17 +197,9 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
               <>
                 {!selectedData.singleEntry && (
                   <div
-                    className={`w-1/3 py-6 px-4 flex-1 border-r overflow-auto ${getColors(
-                      `border-gray-200 dark:border-vulcan-300`,
-                      `border-[var(--frontmatter-border)]`
-                    )
-                      }`}
+                    className={`w-1/3 py-6 px-4 flex-1 border-r overflow-auto border-[var(--frontmatter-border)]`}
                   >
-                    <h2 className={`text-lg ${getColors(
-                      `text-gray-500 dark:text-whisper-900`,
-                      `text-[var(--frontmatter-text)]`
-                    )
-                      }`}>
+                    <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
                       {l10n.t(LocalizationKey.dashboardDataViewDataViewTitle, selectedData?.title?.toLowerCase() || '')}
                     </h2>
 
@@ -258,7 +225,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                         </>
                       ) : (
                         <div className={`flex flex-col items-center justify-center`}>
-                          <p className={getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}>
+                          <p className={`text-[var(--frontmatter-text)]`}>
                             {l10n.t(LocalizationKey.dashboardDataViewDataViewEmpty, selectedData.title.toLowerCase())}
                           </p>
                         </div>
@@ -270,7 +237,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                   className={`${selectedData.singleEntry ? 'w-full' : 'w-2/3'
                     } py-6 px-4 overflow-auto`}
                 >
-                  <h2 className={`text-lg ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}`}>
+                  <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
                     {l10n.t(LocalizationKey.dashboardDataViewDataViewCreateOrModify, selectedData.title.toLowerCase())}
                   </h2>
                   {selectedData ? (
@@ -292,17 +259,13 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         </div>
       ) : (
         <div className="w-full h-full flex items-center justify-center">
-          <div className={`flex flex-col items-center ${getColors(
-            'text-gray-500 dark:text-whisper-900',
-            'text-[var(--frontmatter-text)]'
-          )
-            }`}>
+          <div className={`flex flex-col items-center text-[var(--frontmatter-text)]`}>
             <CircleStackIcon className="w-32 h-32" />
             <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`}
+                className={`text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`}
+                href={WEBSITE_LINKS.docs.dataDashboard}
                 title={l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
               >
                 {l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
@@ -319,8 +282,6 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         isBacker={settings?.isBacker}
       />
 
-      <ToastContainer />
-
       <img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=DataView" alt="DataView metrics" />
     </div >
   );

src/dashboardWebView/components/DataView/EmptyView.tsx

@@ -1,6 +1,5 @@
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -9,12 +8,11 @@ export interface IEmptyViewProps { }
 export const EmptyView: React.FunctionComponent<IEmptyViewProps> = (
   props: React.PropsWithChildren<IEmptyViewProps>
 ) => {
-  const { getColors } = useThemeColors();
 
   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)]`)}`}>
+      <ExclamationCircleIcon className={`w-1/12 opacity-90 text-[var(--frontmatter-secondary-text)]`} />
+      <h2 className={`text-xl text-[var(--frontmatter-secondary-text)]`}>
         {l10n.t(LocalizationKey.dashboardDataViewEmptyViewHeading)}
       </h2>
     </div>

src/dashboardWebView/components/DataView/SortableContainer.tsx

@@ -1,17 +1,14 @@
 import * as React from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface ISortableContainerProps { }
 
 export const Container = SortableContainer(
   ({ children }: React.PropsWithChildren<ISortableContainerProps>) => {
-    const { getColors } = useThemeColors();
 
     return (
       <ul
-        className={`-mx-4 divide-y border-t border-b ${getColors(`divide-gray-200 dark:divide-vulcan-300 border-gray-200 dark:border-vulcan-300`, `divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`)
-          }`}
+        className={`-mx-4 divide-y border-t border-b divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`}
       >
         {children}
       </ul>

src/dashboardWebView/components/DataView/SortableItem.tsx

@@ -1,7 +1,6 @@
-import { PencilIcon, ChevronDownIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { PencilIcon, TrashIcon, ChevronUpDownIcon } from '@heroicons/react/24/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';
@@ -16,7 +15,7 @@ export interface ISortableItemProps {
   onDeleteItem: (index: number) => void;
 }
 
-const DragHandle = SortableHandle(() => <ChevronDownIcon className={`w-6 h-6 cursor-move hover:text-[var(--frontmatter-link-hover)]`} />);
+const DragHandle = SortableHandle(() => <ChevronUpDownIcon className={`w-6 h-6 mr-2 cursor-move hover:text-[var(--frontmatter-link-hover)]`} />);
 
 export const SortableItem = SortableElement(
   ({
@@ -27,7 +26,6 @@ export const SortableItem = SortableElement(
     onDeleteItem
   }: ISortableItemProps) => {
     const [showAlert, setShowAlert] = React.useState(false);
-    const { getColors } = useThemeColors();
 
     const deleteItemConfirm = () => {
       setShowAlert(true);
@@ -37,12 +35,8 @@ export const SortableItem = SortableElement(
       <>
         <li
           data-test={`${selectedIndex}-${crntIndex}`}
-          className={`sortable_item py-2 px-2 w-full flex justify-between content-center cursor-pointer ${selectedIndex === crntIndex ? getColors(`bg-gray-300 dark:bg-vulcan-300`, `bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]`) : ``
-            } ${getColors(
-              'hover:bg-gray-200 dark:hover:bg-vulcan-400',
-              'hover:bg-[var(--frontmatter-list-hover-background)]'
-            )
-            }`}
+          className={`sortable_item py-2 px-2 w-full flex justify-between content-center cursor-pointer ${selectedIndex === crntIndex ? `bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]` : ``
+            } hover:bg-[var(--frontmatter-list-hover-background)]`}
         >
           <div
             className="flex items-center w-full"

src/dashboardWebView/components/ErrorView/index.tsx

@@ -1,6 +1,5 @@
 import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -9,11 +8,9 @@ export interface IErrorViewProps { }
 export const ErrorView: React.FunctionComponent<IErrorViewProps> = (
   _: React.PropsWithChildren<IErrorViewProps>
 ) => {
-  const { getColors } = useThemeColors();
-
   return (
     <main className={`h-full w-full flex flex-col justify-center items-center space-y-2`}>
-      <ExclamationTriangleIcon className={`w-24 h-24 ${getColors(`text-red-500`, `text-[var(--vscode-editorError-foreground)]`)}`} />
+      <ExclamationTriangleIcon className={`w-24 h-24 text-[var(--vscode-editorError-foreground)]`} />
       <p className="text-xl">{l10n.t(LocalizationKey.commonErrorMessage)}</p>
       <p className="text-base">{l10n.t(LocalizationKey.dashboardErrorViewDescription)}</p>
     </main>

src/dashboardWebView/components/Filters/LanguageFilter.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuSeparator } from '../../../components/shadcn/Dropdown';
+import { LanguageIcon } from '@heroicons/react/24/outline';
+import { MenuButton, MenuItem } from '../Menu';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { DEFAULT_LOCALE_STATE, LocaleAtom, LocalesAtom } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+
+export interface ILanguageFilterProps { }
+
+export const LanguageFilter: React.FunctionComponent<ILanguageFilterProps> = ({ }: React.PropsWithChildren<ILanguageFilterProps>) => {
+  const locales = useRecoilValue(LocalesAtom);
+  const [crntLocale, setCrntLocale] = useRecoilState(LocaleAtom);
+
+  const crntLocaleName = React.useMemo(() => {
+    if (!crntLocale || !locales || locales.length === 0) {
+      return null;
+    }
+
+    const locale = locales.find(locale => locale.locale === crntLocale);
+
+    return locale?.title || locale?.locale;
+  }, [crntLocale, locales]);
+
+  if (!locales || locales.length <= 1) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <MenuButton
+        label={
+          <>
+            <LanguageIcon className={`inline-block w-4 h-4 mr-2`} />
+            <span>{l10n.t(LocalizationKey.dashboardFiltersLanguageFilterLabel)}</span>
+          </>
+        }
+        title={crntLocaleName || l10n.t(LocalizationKey.dashboardFiltersLanguageFilterAll)}
+      />
+
+      <DropdownMenuContent align='start'>
+        <MenuItem
+          title={l10n.t(LocalizationKey.dashboardFiltersLanguageFilterAll)}
+          value={null}
+          isCurrent={crntLocale === DEFAULT_LOCALE_STATE}
+          onClick={() => setCrntLocale(DEFAULT_LOCALE_STATE)}
+        />
+
+        <DropdownMenuSeparator />
+
+        {
+          locales.map((locale) => (
+            <MenuItem
+              key={locale.locale}
+              title={locale.title || locale.locale}
+              value={locale.locale}
+              isCurrent={locale.locale === crntLocale}
+              onClick={(value) => setCrntLocale(value)}
+            />
+          ))
+        }
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

src/dashboardWebView/components/Header/ActionsBar.tsx

@@ -0,0 +1,255 @@
+import * as React from 'react';
+import { NavigationType, Page } from '../../models';
+import { CommandLineIcon, PencilIcon, TrashIcon, ChevronDownIcon, XMarkIcon, EyeIcon, LanguageIcon } from '@heroicons/react/24/outline';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { MultiSelectedItemsAtom, SelectedItemActionAtom, SelectedMediaFolderSelector, SettingsSelector } from '../../state';
+import { ActionsBarItem } from './ActionsBarItem';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+import { Alert } from '../Modals/Alert';
+import { messageHandler } from '@estruyf/vscode/dist/client';
+import { DashboardMessage } from '../../DashboardMessage';
+import { CustomScript, ScriptType } from '../../../models';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';
+import { useFilesContext } from '../../providers/FilesProvider';
+import { COMMAND_NAME, GeneralCommands } from '../../../constants';
+
+export interface IActionsBarProps {
+  view: NavigationType;
+}
+
+export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
+  view
+}: React.PropsWithChildren<IActionsBarProps>) => {
+  const [selectedFiles, setSelectedFiles] = useRecoilState(MultiSelectedItemsAtom);
+  const [, setSelectedItemAction] = useRecoilState(SelectedItemActionAtom);
+  const [showAlert, setShowAlert] = React.useState(false);
+  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
+  const settings = useRecoilValue(SettingsSelector);
+  const { files } = useFilesContext();
+
+  const viewFile = React.useCallback(() => {
+    if (selectedFiles.length === 1) {
+      if (view === NavigationType.Contents) {
+        messageHandler.send(DashboardMessage.openFile, selectedFiles[0]);
+      } else if (view === NavigationType.Media) {
+        setSelectedItemAction({ path: selectedFiles[0], action: 'view' })
+      }
+    }
+  }, [selectedFiles]);
+
+  const onDeleteConfirm = React.useCallback(() => {
+    for (const file of selectedFiles) {
+      if (file) {
+        if (view === NavigationType.Contents) {
+          messageHandler.send(DashboardMessage.deleteFile, file);
+        } else if (view === NavigationType.Media) {
+          messageHandler.send(DashboardMessage.deleteMedia, {
+            file: file,
+            folder: selectedFolder
+          });
+        }
+      }
+    }
+    setSelectedFiles([]);
+    setShowAlert(false);
+  }, [selectedFiles]);
+
+  const runCustomScript = React.useCallback((script: CustomScript) => {
+    for (const file of selectedFiles) {
+      messageHandler.send(DashboardMessage.runCustomScript, {
+        script,
+        path: file
+      });
+    }
+  }, [selectedFiles]);
+
+  const languageActions = React.useMemo(() => {
+    const actions: React.ReactNode[] = [];
+
+    if (view === NavigationType.Contents && files.length > 0 && selectedFiles.length === 1) {
+      const selectedItem = selectedFiles[0];
+      const page = ((files || []) as Page[]).find((f: Page) => f.fmFilePath === selectedItem);
+
+      if (page?.fmLocale) {
+        const locale = page.fmLocale;
+        const translations = page.fmTranslations;
+
+        actions.push(
+          <ActionsBarItem
+            key="translate"
+            onClick={() => {
+              messageHandler.send(GeneralCommands.toVSCode.runCommand, {
+                command: COMMAND_NAME.i18n.create,
+                args: selectedItem
+              })
+            }}>
+            <LanguageIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+            <span>{l10n.t(LocalizationKey.commonTranslate)}</span>
+          </ActionsBarItem>
+        )
+
+        if (translations && Object.keys(translations).length > 0) {
+          const crntLocale = translations[locale.locale];
+          const otherLocales = Object.entries(translations).filter(([key]) => key !== locale.locale);
+
+          if (otherLocales.length > 0) {
+            actions.push(
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  className='flex items-center text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'
+                >
+                  <LanguageIcon className="mr-2 h-4 w-4" aria-hidden={true} />
+                  <span>{l10n.t(LocalizationKey.commonLanguages)}</span>
+                  <ChevronDownIcon className="ml-2 h-4 w-4" aria-hidden={true} />
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent align='start'>
+
+                  <DropdownMenuItem onClick={() => messageHandler.send(DashboardMessage.openFile, crntLocale.path)}>
+                    <span>{crntLocale.locale.title || crntLocale.locale.locale}</span>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuSeparator />
+
+                  {
+                    otherLocales.map(([key, value]) => (
+                      <DropdownMenuItem
+                        key={key}
+                        onClick={() => messageHandler.send(DashboardMessage.openFile, value.path)}
+                      >
+                        <span>{value.locale.title || value.locale.locale}</span>
+                      </DropdownMenuItem>
+                    ))
+                  }
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )
+          }
+        }
+      }
+    }
+
+    return actions;
+  }, [files, selectedFiles]);
+
+  const customScriptActions = React.useMemo(() => {
+    if (!settings?.scripts) {
+      return null;
+    }
+
+    const { scripts } = settings;
+    let crntScripts: CustomScript[] = [];
+    if (view === NavigationType.Contents) {
+      crntScripts = (scripts || [])
+        .filter((script) => (script.type === undefined || script.type === ScriptType.Content) && !script.bulk && !script.hidden);
+    } else if (view === NavigationType.Media) {
+      crntScripts = (scripts || [])
+        .filter((script) => script.type === ScriptType.MediaFile && !script.hidden);
+    }
+
+    if (crntScripts.length > 0) {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            className='flex items-center text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] disabled:opacity-50 disabled:hover:text-[var(--vscode-tab-inactiveForeground)]'
+            disabled={selectedFiles.length === 0}
+          >
+            <CommandLineIcon className="mr-2 h-4 w-4" aria-hidden={true} />
+            <span>{l10n.t(LocalizationKey.commonScripts)}</span>
+            <ChevronDownIcon className="ml-2 h-4 w-4" aria-hidden={true} />
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent align='start'>
+            {
+              crntScripts.map((script) => (
+                <DropdownMenuItem
+                  key={script.id || script.title}
+                  onClick={() => runCustomScript(script)}
+                >
+                  <CommandLineIcon className="mr-2 h-4 w-4" aria-hidden={true} />
+                  <span>{script.title}</span>
+                </DropdownMenuItem>
+              ))
+            }
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    }
+
+    return null;
+  }, [view, settings?.scripts, selectedFiles]);
+
+  return (
+    <>
+      <div
+        className={`w-full flex items-center justify-between py-2 px-4 border-b bg-[var(--vscode-sideBar-background)] text-[var(--vscode-sideBar-foreground)] border-[var(--frontmatter-border)]`}
+        aria-label="Item actions"
+      >
+        <div className='flex items-center space-x-6'>
+          <ActionsBarItem
+            disabled={selectedFiles.length === 0 || selectedFiles.length > 1}
+            onClick={viewFile}
+          >
+            <EyeIcon className="w-4 h-4 mr-2" aria-hidden="true" />
+            <span>{l10n.t(LocalizationKey.commonView)}</span>
+          </ActionsBarItem>
+
+          {
+            view === NavigationType.Media && (
+              <>
+                <ActionsBarItem
+                  disabled={selectedFiles.length === 0 || selectedFiles.length > 1}
+                  onClick={() => setSelectedItemAction({
+                    path: selectedFiles[0],
+                    action: 'edit'
+                  })}
+                >
+                  <PencilIcon className="w-4 h-4 mr-2" aria-hidden="true" />
+                  <span>{l10n.t(LocalizationKey.commonEdit)}</span>
+                </ActionsBarItem>
+              </>
+            )
+          }
+
+          {languageActions}
+
+          {customScriptActions}
+
+          <ActionsBarItem
+            className='hover:text-[var(--vscode-statusBarItem-errorBackground)]'
+            disabled={selectedFiles.length === 0}
+            onClick={() => setShowAlert(true)}
+          >
+            <TrashIcon className="w-4 h-4 mr-2" aria-hidden="true" />
+            <span>{l10n.t(LocalizationKey.commonDelete)}</span>
+          </ActionsBarItem>
+        </div>
+
+        {
+          selectedFiles.length > 0 && (
+            <button
+              type="button"
+              className='flex items-center hover:text-[var(--vscode-statusBarItem-warningBackground)]'
+              onClick={() => setSelectedFiles([])}
+            >
+              <XMarkIcon className="w-4 h-4 mr-1" aria-hidden="true" />
+              <span>{l10n.t(LocalizationKey.dashboardHeaderActionsBarItemsSelected)}</span>
+            </button>
+          )
+        }
+      </div>
+
+      {showAlert && (
+        <Alert
+          title={`${l10n.t(LocalizationKey.dashboardHeaderActionsBarAlertDeleteTitle)}`}
+          description={l10n.t(LocalizationKey.dashboardHeaderActionsBarAlertDeleteDescription)}
+          okBtnText={l10n.t(LocalizationKey.commonDelete)}
+          cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
+          dismiss={() => setShowAlert(false)}
+          trigger={onDeleteConfirm}
+        />
+      )}
+    </>
+  );
+};

src/dashboardWebView/components/Header/ActionsBarItem.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { cn } from '../../../utils/cn';
+
+export interface IActionsBarItemProps {
+  className?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export const ActionsBarItem: React.FunctionComponent<IActionsBarItemProps> = ({
+  children,
+  className,
+  disabled,
+  onClick
+}: React.PropsWithChildren<IActionsBarItemProps>) => {
+  return (
+    <button
+      type="button"
+      className={cn(`flex items-center text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] disabled:opacity-50 disabled:hover:text-[var(--vscode-tab-inactiveForeground)]`, className)}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+};

src/dashboardWebView/components/Header/Breadcrumb.tsx

@@ -1,29 +1,28 @@
-import { HomeModernIcon } from '@heroicons/react/24/outline';
+import { HomeIcon } from '@heroicons/react/24/outline';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { HOME_PAGE_NAVIGATION_ID, STATIC_FOLDER_PLACEHOLDER } from '../../../constants';
+import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
 import { parseWinPath } from '../../../helpers/parseWinPath';
-import useThemeColors from '../../hooks/useThemeColors';
-import { SearchAtom, SelectedMediaFolderAtom, SettingsAtom } from '../../state';
+import { SearchAtom, SettingsAtom } from '../../state';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import useMediaFolder from '../../hooks/useMediaFolder';
 
 export interface IBreadcrumbProps { }
 
 export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
   _: React.PropsWithChildren<IBreadcrumbProps>
 ) => {
-  const [selectedFolder, setSelectedFolder] = useRecoilState(SelectedMediaFolderAtom);
+  const { selectedFolder, updateFolder } = useMediaFolder();
   const [, setSearchValue] = useRecoilState(SearchAtom);
   const [folders, setFolders] = React.useState<string[]>([]);
   const settings = useRecoilValue(SettingsAtom);
-  const { getColors } = useThemeColors();
 
-  const updateFolder = (folder: string) => {
+  const updateMediaFolder = React.useCallback((folder: string) => {
     setSearchValue('');
-    setSelectedFolder(folder);
-  };
+    updateFolder(folder);
+  }, [updateFolder, setSearchValue]);
 
   React.useEffect(() => {
     if (!settings) {
@@ -81,17 +80,14 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
   }, [selectedFolder, settings]);
 
   return (
-    <ol role="list" className="flex space-x-4 px-5 flex-1">
+    <ol role="list" className="flex space-x-2 px-4 flex-1">
       <li className="flex">
         <div className="flex items-center">
           <button
-            onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)}
-            className={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)]`
-            )}
+            onClick={() => updateMediaFolder(HOME_PAGE_NAVIGATION_ID)}
+            className={`text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`}
           >
-            <HomeModernIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
+            <HomeIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
             <span className="sr-only">{l10n.t(LocalizationKey.dashboardHeaderBreadcrumbHome)}</span>
           </button>
         </div>
@@ -101,11 +97,7 @@ 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 text-[var(--vscode-tab-inactiveForeground)]`}
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
               viewBox="0 0 20 20"
@@ -115,12 +107,8 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
             </svg>
 
             <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)]`
-              )
-                }`}
+              onClick={() => updateMediaFolder(folder)}
+              className={`ml-2 text-sm font-medium text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`}
             >
               {basename(folder)}
             </button>

src/dashboardWebView/components/Header/ClearFilters.tsx

@@ -11,11 +11,13 @@ import {
   TagAtom,
   CategoryAtom,
   DEFAULT_TAG_STATE,
-  DEFAULT_CATEGORY_STATE
+  DEFAULT_CATEGORY_STATE,
+  FiltersAtom,
+  LocaleAtom,
+  DEFAULT_LOCALE_STATE
 } from '../../state';
 import { DefaultValue } from 'recoil';
-import { useEffect } from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
+import { useEffect, useMemo } from 'react';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -30,16 +32,19 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
   _: React.PropsWithChildren<IClearFiltersProps>
 ) => {
   const [show, setShow] = React.useState(false);
-  const { getColors } = useThemeColors();
 
   const folder = useRecoilValue(FolderSelector);
   const tag = useRecoilValue(TagSelector);
   const category = useRecoilValue(CategorySelector);
+  const locale = useRecoilValue(LocaleAtom);
+  const filters = useRecoilValue(FiltersAtom);
 
   const resetSorting = useResetRecoilState(SortingAtom);
   const resetFolder = useResetRecoilState(FolderAtom);
   const resetTag = useResetRecoilState(TagAtom);
   const resetCategory = useResetRecoilState(CategoryAtom);
+  const resetLocale = useResetRecoilState(LocaleAtom);
+  const resetFilters = useResetRecoilState(FiltersAtom);
 
   const reset = () => {
     setShow(false);
@@ -47,29 +52,34 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
     resetFolder();
     resetTag();
     resetCategory();
+    resetLocale();
+    resetFilters();
   };
 
+  const hasCustomFilters = useMemo(() => {
+    const names = Object.keys(filters);
+    return names.some((name) => filters[name]);
+  }, [filters]);
+
   useEffect(() => {
     if (
       folder !== DEFAULT_FOLDER_STATE ||
       tag !== DEFAULT_TAG_STATE ||
-      category !== DEFAULT_CATEGORY_STATE
+      category !== DEFAULT_CATEGORY_STATE ||
+      locale !== DEFAULT_LOCALE_STATE ||
+      hasCustomFilters
     ) {
       setShow(true);
     } else {
       setShow(false);
     }
-  }, [folder, tag, category]);
+  }, [folder, tag, category, locale, hasCustomFilters]);
 
   if (!show) return null;
 
   return (
     <button
-      className={`flex items-center ${getColors(
-        'hover:text-teal-600',
-        'hover:text-[var(--vscode-textLink-activeForeground)]'
-      )
-        }`}
+      className={`flex items-center hover:text-[var(--vscode-statusBarItem-errorBackground)]`}
       onClick={reset}
       title={l10n.t(LocalizationKey.dashboardHeaderClearFiltersTitle)}
     >

src/dashboardWebView/components/Header/Filter.tsx

@@ -1,9 +1,9 @@
-import { Menu } from '@headlessui/react';
-import { FunnelIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
+import { FunnelIcon } from '@heroicons/react/24/solid';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
 
 export interface IFilterProps {
   label: string;
@@ -25,37 +25,35 @@ export const Filter: React.FunctionComponent<IFilterProps> = ({
   }
 
   return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton
-          label={
-            <>
-              <FunnelIcon className={`inline-block w-5 h-5 mr-1`} />
-              <span>{label}</span>
-            </>
-          }
-          title={activeItem || DEFAULT_VALUE}
+    <DropdownMenu>
+      <MenuButton
+        label={
+          <>
+            <FunnelIcon className={`inline-block w-4 h-4 mr-2`} />
+            <span>{label}</span>
+          </>
+        }
+        title={activeItem || DEFAULT_VALUE}
+      />
+
+      <DropdownMenuContent>
+        <MenuItem
+          title={DEFAULT_VALUE}
+          value={null}
+          isCurrent={!activeItem}
+          onClick={() => onClick(null)}
         />
 
-        <MenuItems disablePopper>
+        {items.map((option) => (
           <MenuItem
-            title={DEFAULT_VALUE}
-            value={null}
-            isCurrent={!!activeItem}
-            onClick={() => onClick(null)}
+            key={option}
+            title={option}
+            value={option}
+            isCurrent={option === activeItem}
+            onClick={() => onClick(option)}
           />
-
-          {items.map((option) => (
-            <MenuItem
-              key={option}
-              title={option}
-              value={option}
-              isCurrent={option === activeItem}
-              onClick={() => onClick(option)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };

src/dashboardWebView/components/Header/FilterInput.tsx

@@ -1,8 +1,8 @@
 import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { TextField } from '../Common/TextField';
 
 export interface IFilterInputProps {
   placeholder: string;
@@ -21,7 +21,6 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
   onReset,
   onChange
 }: React.PropsWithChildren<IFilterInputProps>) => {
-  const { getColors } = useThemeColors();
 
   return (
     <div className="flex space-x-4 flex-1">
@@ -29,32 +28,19 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
         <label htmlFor="search" className="sr-only">
           {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">
-            <MagnifyingGlassIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
-          </div>
 
-          <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-input-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)}
-            disabled={!isReady}
-          />
-
-          {value && onReset && (
-            <button onClick={onReset} className="absolute inset-y-0 right-0 pr-3 flex items-center">
-              <XCircleIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
-            </button>
+        <TextField
+          name='search'
+          icon={(
+            <MagnifyingGlassIcon className={`h-4 w-4 text-[var(--vscode-input-foreground)]`} aria-hidden="true" />
           )}
-        </div>
+          value={value}
+          autoFocus={autoFocus}
+          placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
+          disabled={!isReady}
+          onChange={onChange}
+          onReset={onReset}
+        />
       </div>
     </div>
   );

src/dashboardWebView/components/Header/Filters.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { FoldersFilter } from './FoldersFilter';
+import { Filter } from './Filter';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { CategoryAtom, SettingsSelector, TagAtom, FiltersAtom, FilterValuesAtom } from '../../state';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { firstToUpper } from '../../../helpers/StringHelpers';
+import { LanguageFilter } from '../Filters/LanguageFilter';
+
+export interface IFiltersProps { }
+
+export const Filters: React.FunctionComponent<IFiltersProps> = (_: React.PropsWithChildren<IFiltersProps>) => {
+  const [crntFilters, setCrntFilters] = useRecoilState(FiltersAtom);
+  const [crntTag, setCrntTag] = useRecoilState(TagAtom);
+  const [crntCategory, setCrntCategory] = useRecoilState(CategoryAtom);
+  const filterValues = useRecoilValue(FilterValuesAtom);
+  const settings = useRecoilValue(SettingsSelector);
+  const location = useLocation();
+
+  const otherFilters = useMemo(() => settings?.filters?.filter((filter) => filter !== "contentFolders" && filter !== "tags" && filter !== "categories"), [settings?.filters]);
+
+  const otherFilterValues = useMemo(() => {
+    return otherFilters?.map((filter) => {
+      const filterName = typeof filter === "string" ? filter : filter.name;
+      const filterTitle = typeof filter === "string" ? firstToUpper(filter) : filter.title;
+      const values = filterValues?.[filterName];
+      if (!values || values.length === 0) {
+        return null;
+      }
+
+      return (
+        <Filter
+          key={filterName}
+          label={filterTitle}
+          activeItem={crntFilters[filterName]}
+          items={values}
+          onClick={(value) => setCrntFilters((prev) => {
+            let clone = Object.assign({}, prev);
+            if (!clone[filterName] && value) {
+              clone[filterName] = value;
+            } else {
+              clone[filterName] = value || "";
+            }
+            return clone;
+          })}
+        />
+      )
+    })
+  }, [otherFilters, crntFilters, filterValues, setCrntFilters]);
+
+  useEffect(() => {
+    if (location.search) {
+      const searchParams = new URLSearchParams(location.search);
+      const taxonomy = searchParams.get('taxonomy');
+      const value = searchParams.get('value');
+
+      if (taxonomy && value) {
+        if (taxonomy === 'tags') {
+          setCrntTag(value);
+        } else if (taxonomy === 'categories') {
+          setCrntCategory(value);
+        }
+      }
+
+      return;
+    }
+
+    setCrntFilters({});
+
+    setCrntTag('');
+    setCrntCategory('');
+  }, [location.search]);
+
+  return (
+    <>
+      <LanguageFilter />
+
+      {
+        settings?.filters?.includes("contentFolders") && (
+          <FoldersFilter />
+        )
+      }
+
+      {
+        settings?.filters?.includes("tags") && (
+          <Filter
+            label={`Tag`}
+            activeItem={crntTag}
+            items={settings?.tags || []}
+            onClick={(value) => setCrntTag(value)}
+          />
+        )
+      }
+
+      {
+        settings?.filters?.includes("categories") && (
+          <Filter
+            label={`Category`}
+            activeItem={crntCategory}
+            items={settings?.categories || []}
+            onClick={(value) => setCrntCategory(value)}
+          />
+        )
+      }
+
+      {otherFilterValues}
+    </>
+  );
+};

src/dashboardWebView/components/Header/Folders.tsx

@@ -1,49 +0,0 @@
-import { Menu } from '@headlessui/react';
-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 const Folders: React.FunctionComponent<
-  IFoldersProps
-> = ({ }: React.PropsWithChildren<IFoldersProps>) => {
-  const DEFAULT_TYPE = l10n.t(LocalizationKey.dashboardHeaderFoldersDefault);
-  const [crntFolder, setCrntFolder] = useRecoilState(FolderAtom);
-  const settings = useRecoilValue(SettingsSelector);
-  const contentFolders = settings?.contentFolders || [];
-
-  if (contentFolders.length <= 1) {
-    return null;
-  }
-
-  return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderFoldersMenuButtonShowing)} title={crntFolder || DEFAULT_TYPE} />
-
-        <MenuItems disablePopper>
-          <MenuItem
-            title={DEFAULT_TYPE}
-            value={null}
-            isCurrent={!crntFolder}
-            onClick={(value) => setCrntFolder(value)}
-          />
-
-          {contentFolders.map((option) => (
-            <MenuItem
-              key={option.title}
-              title={option.title}
-              value={option.title}
-              isCurrent={option.title === crntFolder}
-              onClick={(value) => setCrntFolder(value)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
-  );
-};

src/dashboardWebView/components/Header/FoldersFilter.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { FolderAtom, SettingsSelector } from '../../state';
+import { MenuButton, MenuItem } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
+
+export interface IFoldersFilterProps { }
+
+export const FoldersFilter: React.FunctionComponent<
+  IFoldersFilterProps
+> = ({ }: React.PropsWithChildren<IFoldersFilterProps>) => {
+  const DEFAULT_TYPE = l10n.t(LocalizationKey.dashboardHeaderFoldersDefault);
+  const [crntFolder, setCrntFolder] = useRecoilState(FolderAtom);
+  const settings = useRecoilValue(SettingsSelector);
+
+  const contentFolders = React.useMemo(() => {
+    return settings?.contentFolders
+      .filter((folder, index, self) => index === self.findIndex((t) => t.originalPath === folder.originalPath)) || [];
+  }, [settings?.contentFolders]);
+
+  if (contentFolders.length <= 1) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderFoldersMenuButtonShowing)} title={crntFolder || DEFAULT_TYPE} />
+
+      <DropdownMenuContent>
+        <MenuItem
+          title={DEFAULT_TYPE}
+          value={null}
+          isCurrent={!crntFolder}
+          onClick={(value) => setCrntFolder(value)}
+        />
+
+        {contentFolders.map((option) => (
+          <MenuItem
+            key={option.title}
+            title={option.title}
+            value={option.title}
+            isCurrent={option.title === crntFolder}
+            onClick={(value) => setCrntFolder(value)}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

src/dashboardWebView/components/Header/Grouping.tsx

@@ -1,11 +1,11 @@
-import { Menu } from '@headlessui/react';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { GroupOption } from '../../constants/GroupOption';
 import { AllPagesAtom, GroupingAtom } from '../../state';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
 
 export interface IGroupingProps { }
 
@@ -42,22 +42,20 @@ export const Grouping: React.FunctionComponent<
   }
 
   return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderGroupingMenuButtonLabel)} title={crntGroup?.name || ''} />
+    <DropdownMenu>
+      <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderGroupingMenuButtonLabel)} title={crntGroup?.name || ''} />
 
-        <MenuItems disablePopper>
-          {GROUP_OPTIONS.map((option) => (
-            <MenuItem
-              key={option.id}
-              title={option.name}
-              value={option.id}
-              isCurrent={option.id === crntGroup?.id}
-              onClick={(value) => setGroup(value)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
+      <DropdownMenuContent>
+        {GROUP_OPTIONS.map((option) => (
+          <MenuItem
+            key={option.id}
+            title={option.name}
+            value={option.id}
+            isCurrent={option.id === crntGroup?.id}
+            onClick={(value) => setGroup(value)}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };

src/dashboardWebView/components/Header/Header.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { Sorting } from './Sorting';
 import { Searchbox } from './Searchbox';
-import { Filter } from './Filter';
-import { Folders } from './Folders';
 import { Settings, NavigationType } from '../../models';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Grouping } from '.';
 import { ViewSwitch } from './ViewSwitch';
-import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
-import { CategoryAtom, GroupingSelector, SortingAtom, TagAtom } from '../../state';
+import { useRecoilValue, useResetRecoilState } from 'recoil';
+import { GroupingSelector, MultiSelectedItemsAtom, SortingAtom } from '../../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { ClearFilters } from './ClearFilters';
 import { MediaHeaderTop } from '../Media/MediaHeaderTop';
@@ -16,11 +14,11 @@ import { ChoiceButton } from '../Common/ChoiceButton';
 import { MediaHeaderBottom } from '../Media/MediaHeaderBottom';
 import { Tabs } from './Tabs';
 import { CustomScript } from '../../../models';
-import { BoltIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { ArrowTopRightOnSquareIcon, BoltIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { HeartIcon } from '@heroicons/react/24/solid';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
-import { useEffect, useMemo } from 'react';
-import { SyncButton } from './SyncButton';
+import { useMemo } from 'react';
 import { Pagination } from './Pagination';
 import { GroupOption } from '../../constants/GroupOption';
 import usePagination from '../../hooks/usePagination';
@@ -30,6 +28,10 @@ import { ProjectSwitcher } from './ProjectSwitcher';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { SettingsLink } from '../SettingsView/SettingsLink';
+import { Link } from '../Common/Link';
+import { SPONSOR_LINK } from '../../../constants';
+import { Filters } from './Filters';
+import { ActionsBar } from './ActionsBar';
 
 export interface IHeaderProps {
   header?: React.ReactNode;
@@ -47,10 +49,9 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
   totalPages,
   settings
 }: React.PropsWithChildren<IHeaderProps>) => {
-  const [crntTag, setCrntTag] = useRecoilState(TagAtom);
-  const [crntCategory, setCrntCategory] = useRecoilState(CategoryAtom);
   const grouping = useRecoilValue(GroupingSelector);
   const resetSorting = useResetRecoilState(SortingAtom);
+  const resetSelectedItems = useResetRecoilState(MultiSelectedItemsAtom);
   const location = useLocation();
   const navigate = useNavigate();
   const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination);
@@ -70,6 +71,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
   const updateView = (view: NavigationType) => {
     navigate(routePaths[view]);
     resetSorting();
+    resetSelectedItems();
   };
 
   const runBulkScript = (script: CustomScript) => {
@@ -120,47 +122,48 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
     return [];
   }, [settings?.dashboardState?.contents?.templatesEnabled]);
 
-  useEffect(() => {
-    if (location.search) {
-      const searchParams = new URLSearchParams(location.search);
-      const taxonomy = searchParams.get('taxonomy');
-      const value = searchParams.get('value');
-
-      if (taxonomy && value) {
-        if (taxonomy === 'tags') {
-          setCrntTag(value);
-        } else if (taxonomy === 'categories') {
-          setCrntCategory(value);
-        }
-      }
-
-      return;
-    }
-
-    setCrntTag('');
-    setCrntCategory('');
-  }, [location.search]);
-
   return (
     <div className={`w-full sticky top-0 z-20 bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`}>
-      <div className={`mb-0 border-b flex justify-between bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}>
+      <div className={`overflow-x-auto mb-0 border-b flex justify-between bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}>
         <Tabs onNavigate={updateView} />
 
-        <div className='flex'>
+        <div className='flex items-center space-x-2 pr-4'>
           <ProjectSwitcher />
 
+          {
+            settings?.websiteUrl && (
+              <Link
+                className='inline-flex items-center'
+                href={settings?.websiteUrl}
+                title={settings?.websiteUrl}>
+                <span>{settings?.websiteUrl}</span>
+
+                <ArrowTopRightOnSquareIcon className='w-4 h-4 ml-1' aria-hidden="true" />
+              </Link>
+            )
+          }
+
+          {
+            !settings?.isBacker && (
+              <Link
+                className='inline-flex items-center text-[var(--vscode-badge-background)]'
+                title={l10n.t(LocalizationKey.commonSupport)}
+                href={SPONSOR_LINK}
+              >
+                <span className='sr-only'>{l10n.t(LocalizationKey.commonSupport)}</span>
+                <HeartIcon className='w-4 h-4' aria-hidden="true" />
+              </Link>
+            )
+          }
+
           <SettingsLink onNavigate={updateView} />
         </div>
       </div>
 
       {location.pathname === routePaths.contents && (
         <>
-          <div className={`px-4 mt-3 mb-2 flex items-center justify-between`}>
-            <Searchbox />
-
-            <div className={`flex items-center justify-end space-x-4 flex-1`}>
-              <SyncButton />
-
+          <div className={`px-4 mt-2 mb-2 flex items-center justify-between`}>
+            <div className={`flex items-center justify-start space-x-4 flex-1`}>
               <ChoiceButton
                 title={l10n.t(LocalizationKey.dashboardHeaderHeaderCreateContent)}
                 choices={choiceOptions}
@@ -168,6 +171,8 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
                 disabled={!settings?.initialized}
               />
             </div>
+
+            <Searchbox />
           </div>
 
           <div className={`px-4 flex flex-row items-center border-b justify-between border-[var(--frontmatter-border)]`}>
@@ -181,25 +186,11 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
           </div>
 
           <div
-            className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end border-b space-x-4 lg:space-x-6 xl:space-x-8 bg-[var(--vscode-panel-background)] border-[var(--frontmatter-border)]`}
+            className={`overflow-x-auto py-2 px-4 w-full flex items-center justify-between lg:justify-end border-b space-x-4 lg:space-x-6 xl:space-x-8 bg-[var(--vscode-panel-background)] border-[var(--frontmatter-border)]`}
           >
             <ClearFilters />
 
-            <Folders />
-
-            <Filter
-              label={`Tag`}
-              activeItem={crntTag}
-              items={settings?.tags || []}
-              onClick={(value) => setCrntTag(value)}
-            />
-
-            <Filter
-              label={`Category`}
-              activeItem={crntCategory}
-              items={settings?.categories || []}
-              onClick={(value) => setCrntCategory(value)}
-            />
+            <Filters />
 
             <Grouping />
 
@@ -217,6 +208,8 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
                 <Pagination totalPages={totalPages || 0} />
               </div>
             )}
+
+          <ActionsBar view={NavigationType.Contents} />
         </>
       )}
 
@@ -225,6 +218,8 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
           <MediaHeaderTop />
 
           <MediaHeaderBottom />
+
+          <ActionsBar view={NavigationType.Media} />
         </>
       )}
 

src/dashboardWebView/components/Header/Pagination.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 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';
@@ -23,7 +22,6 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
     totalPages,
     totalMedia
   );
-  const { getColors } = useThemeColors();
 
   const getButtons = useCallback((): number[] => {
     const maxButtons = 5;
@@ -77,12 +75,8 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
             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)]`
-            )
-            }`}
+            ? `px-2 bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]`
+            : `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}`}
         >
           {button + 1}
         </button>

src/dashboardWebView/components/Header/PaginationButton.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IPaginationButtonProps {
   title: string;
@@ -12,18 +11,11 @@ export const PaginationButton: React.FunctionComponent<IPaginationButtonProps> =
   disabled,
   onClick
 }: React.PropsWithChildren<IPaginationButtonProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <button
       disabled={disabled}
       onClick={onClick}
-      className={`disabled:opacity-50 ${
-        getColors(
-          'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500 disabled:hover:text-gray-500 dark:disabled:hover:text-whisper-900',
-          'text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
-        )
-      }`}
+      className={`disabled:opacity-50 text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}
     >
       {title}
     </button>

src/dashboardWebView/components/Header/PaginationStatus.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useMemo } from 'react';
 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';
@@ -22,8 +21,6 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =
     totalPages || 0,
     totalMedia
   );
-  const { getColors } = useThemeColors();
-
   const totelItemsOnPage = useMemo(() => {
     const items = (page + 1) * pageSetNr;
     if (totalItems < items) {
@@ -34,11 +31,7 @@ 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)]'
-      )
-        }`}>
+      <p className={`text-sm text-[var(--vscode-tab-inactiveForeground)]`}>
         {
           l10n.t(LocalizationKey.dashboardHeaderPaginationStatusText,
             (page * pageSetNr + 1),

src/dashboardWebView/components/Header/ProjectSwitcher.tsx

@@ -1,13 +1,13 @@
 import { messageHandler } from '@estruyf/vscode/dist/client';
-import { Menu } from '@headlessui/react';
 import { ArrowsRightLeftIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
 import { SettingsSelector } from '../../state';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
 
 export interface IProjectSwitcherProps { }
 
@@ -32,8 +32,8 @@ export const ProjectSwitcher: React.FunctionComponent<IProjectSwitcherProps> = (
   }
 
   return (
-    <div className="flex items-center mr-4 z-[51]">
-      <Menu as="div" className="relative z-10 inline-block text-left">
+    <div className="mr-4 z-[51]">
+      <DropdownMenu>
         <MenuButton
           label={(
             <div className="inline-flex items-center">
@@ -43,7 +43,7 @@ export const ProjectSwitcher: React.FunctionComponent<IProjectSwitcherProps> = (
           )}
           title={crntProject} />
 
-        <MenuItems disablePopper>
+        <DropdownMenuContent>
           {projects.map((p) => (
             <MenuItem
               key={p.name}
@@ -53,8 +53,8 @@ export const ProjectSwitcher: React.FunctionComponent<IProjectSwitcherProps> = (
               onClick={(value) => setProject(p.name)}
             />
           ))}
-        </MenuItems>
-      </Menu>
-    </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div >
   );
 };

src/dashboardWebView/components/Header/RefreshDashboardData.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
-import useThemeColors from '../../hooks/useThemeColors';
 import { NavigationType } from '../../models';
 import {
   CategoryAtom,
@@ -37,7 +36,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
 
   const refreshPages = () => {
-    setLoading(true);
+    setLoading("initPages");
     resetSearch();
     resetSorting();
     resetFolder();
@@ -47,7 +46,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
   };
 
   const refreshMedia = () => {
-    setLoading(true);
+    setLoading("initPages");
     resetPage();
     resetSearch();
     Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder });

src/dashboardWebView/components/Header/Searchbox.tsx

@@ -2,11 +2,11 @@ import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 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';
+import { TextField } from '../Common/TextField';
 
 export interface ISearchboxProps {
   placeholder?: string;
@@ -19,10 +19,9 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
   const [debounceSearchValue, setDebounceValue] = useRecoilState(SearchAtom);
   const searchReady = useRecoilValue(SearchReadyAtom);
   const debounceSearch = useDebounce<string>(value, 500);
-  const { getColors } = useThemeColors();
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
+  const handleChange = (newValue: string) => {
+    setValue(newValue);
   };
 
   const reset = React.useCallback(() => {
@@ -41,36 +40,23 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
   }, [debounceSearch]);
 
   return (
-    <div className="flex space-x-4 flex-1">
+    <div className="flex justify-end space-x-4 flex-1">
       <div className="min-w-0">
         <label htmlFor="search" className="sr-only">
           {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">
-            <MagnifyingGlassIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
-          </div>
 
-          <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-input-border, --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}
-          />
-
-          {value && (
-            <button onClick={reset} className="absolute inset-y-0 right-0 pr-3 flex items-center">
-              <XCircleIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
-            </button>
+        <TextField
+          name='search'
+          icon={(
+            <MagnifyingGlassIcon className={`h-4 w-4 text-[var(--vscode-input-foreground)]`} aria-hidden="true" />
           )}
-        </div>
+          value={value}
+          placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
+          disabled={!searchReady}
+          onChange={handleChange}
+          onReset={reset}
+        />
       </div>
 
       <RefreshDashboardData />

src/dashboardWebView/components/Header/Sorting.tsx

@@ -1,5 +1,4 @@
 import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
-import { Menu } from '@headlessui/react';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { ExtensionState } from '../../../constants';
@@ -9,10 +8,11 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { NavigationType } from '../../models';
 import { SortingOption } from '../../models/SortingOption';
 import { SearchSelector, SettingsSelector, SortingAtom } from '../../state';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import { Sorting as SortingHelpers } from '../../../helpers/Sorting';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
 
 export interface ISortingProps {
   disableCustomSorting?: boolean;
@@ -177,26 +177,24 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
   }
 
   return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton
-          label={l10n.t(LocalizationKey.dashboardHeaderSortingLabel)}
-          title={crntSort?.title || crntSort?.name || ''}
-          disabled={!!searchValue}
-        />
+    <DropdownMenu>
+      <MenuButton
+        label={l10n.t(LocalizationKey.dashboardHeaderSortingLabel)}
+        title={crntSort?.title || crntSort?.name || ''}
+        disabled={!!searchValue}
+      />
 
-        <MenuItems widthClass="w-48" disablePopper>
-          {allOptions.map((option) => (
-            <MenuItem
-              key={option.id}
-              title={option.title || option.name}
-              value={option}
-              isCurrent={option.id === crntSort.id}
-              onClick={(value) => updateSorting(value)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
+      <DropdownMenuContent>
+        {allOptions.map((option) => (
+          <MenuItem
+            key={option.id}
+            title={option.title || option.name}
+            value={option}
+            isCurrent={option.id === crntSort.id}
+            onClick={(value) => updateSorting(value)}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };

src/dashboardWebView/components/Header/SyncButton.tsx

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 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';
@@ -17,18 +16,17 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
 ) => {
   const settings = useRecoilValue(SettingsSelector);
   const [isSyncing, setIsSyncing] = useState(false);
-  const { getColors } = useThemeColors();
 
   const pull = () => {
-    Messenger.send(GeneralCommands.toVSCode.gitSync);
+    Messenger.send(GeneralCommands.toVSCode.git.sync);
   };
 
   const messageListener = (message: MessageEvent<EventData<any>>) => {
     const { command } = message.data;
 
-    if (command === GeneralCommands.toWebview.gitSyncingStart) {
+    if (command === GeneralCommands.toWebview.git.syncingStart) {
       setIsSyncing(true);
-    } else if (command === GeneralCommands.toWebview.gitSyncingEnd) {
+    } else if (command === GeneralCommands.toWebview.git.syncingEnd) {
       setIsSyncing(false);
     }
   };
@@ -49,11 +47,7 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
     <div className="git_actions">
       <button
         type="button"
-        className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded ${getColors(
-          `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
-          `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-        )
-          }`}
+        className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
         onClick={pull}
         disabled={isSyncing}
       >

src/dashboardWebView/components/Header/ViewSwitch.tsx

@@ -5,7 +5,6 @@ import { Bars4Icon, Squares2X2Icon } from '@heroicons/react/24/solid';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { DashboardViewType } from '../../models';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -16,7 +15,6 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
 ) => {
   const [view, setView] = useRecoilState(ViewAtom);
   const settings = useRecoilValue(SettingsSelector);
-  const { getColors } = useThemeColors();
 
   const toggleView = () => {
     const newView =
@@ -32,9 +30,9 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
   }, [settings?.pageViewType]);
 
   return (
-    <div className={`flex rounded-sm lg:mb-1 ${getColors('bg-vulcan-50', 'bg-[var(--vscode-button-secondaryBackground)]')}`}>
+    <div className={`flex rounded-sm lg:mb-1 bg-[var(--vscode-button-secondaryBackground)]`}>
       <button
-        className={`flex items-center px-2 py-1 rounded-l-sm ${view === DashboardViewType.Grid ? getColors('bg-teal-500 text-vulcan-500', 'bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]') : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
+        className={`flex items-center px-2 py-1 rounded-l-sm ${view === DashboardViewType.Grid ? `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]` : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
           }`}
         title={l10n.t(LocalizationKey.dashboardHeaderViewSwitchToGrid)}
         type={`button`}
@@ -46,7 +44,7 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
         </span>
       </button>
       <button
-        className={`flex items-center px-2 py-1 rounded-r-sm ${view === DashboardViewType.List ? getColors('bg-teal-500 text-vulcan-500', 'bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]') : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
+        className={`flex items-center px-2 py-1 rounded-r-sm ${view === DashboardViewType.List ? `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]` : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
           }`}
         title={l10n.t(LocalizationKey.dashboardHeaderViewSwitchToList)}
         type={`button`}

src/dashboardWebView/components/Header/index.ts

@@ -1,5 +1,5 @@
 export * from './Filter';
-export * from './Folders';
+export * from './FoldersFilter';
 export * from './Grouping';
 export * from './Header';
 export * from './Searchbox';

src/dashboardWebView/components/Layout/NavigationBar.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface INavigationBarProps {
   title?: string;
@@ -11,28 +10,15 @@ export const NavigationBar: React.FunctionComponent<INavigationBarProps> = ({
   bottom,
   children
 }: React.PropsWithChildren<INavigationBarProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <aside
-      className={`w-2/12 px-4 py-6 h-full flex flex-col flex-grow border-r ${getColors(
-        'border-gray-200 dark:border-vulcan-300',
-        'border-[var(--frontmatter-border)]'
-      )}`}
+      className={`w-2/12 px-4 py-6 h-full flex flex-col flex-grow border-r border-[var(--frontmatter-border)]`}
     >
-      {title && <h2 className={`text-lg ${getColors(
-        'text-gray-500 dark:text-whisper-900',
-        'text-[var(--vscode-tab-inactiveForeground)]'
-      )
-        }`}>{title}</h2>}
+      {title && <h2 className={`text-lg text-[var(--vscode-tab-inactiveForeground)]`}>{title}</h2>}
 
       <nav className={`flex-1 py-4 -mx-4 h-full`}>
         <div
-          className={`divide-y border-t border-b  ${getColors(
-            'divide-gray-200 dark:divide-vulcan-300 border-gray-200 dark:border-vulcan-300',
-            'divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]'
-          )
-            }`}
+          className={`divide-y border-t border-b divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`}
         >
           {children}
         </div>

src/dashboardWebView/components/Layout/NavigationItem.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface INavigationItemProps {
   isSelected?: boolean;
@@ -11,23 +10,11 @@ export const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
   onClick,
   children
 }: React.PropsWithChildren<INavigationItemProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <button
       type="button"
-      className={`navigationitem px-4 py-2 flex items-center text-sm font-medium w-full text-left cursor-pointer ${getColors(
-        'hover:bg-gray-200 dark:hover:bg-vulcan-400 hover:text-vulcan-500 dark:hover:text-whisper-500',
-        'hover:bg-[var(--frontmatter-list-hover-background)] hover:text-[var(--frontmatter-list-selected-text)]'
-      )
-        } ${isSelected
-          ? getColors(
-            'bg-gray-300 dark:bg-vulcan-300 text-vulcan-500 dark:text-whisper-500',
-            'bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]'
-          ) : getColors(
-            'text-gray-500 dark:text-whisper-900',
-            'text-[var(--frontmatter-list-text)]'
-          )
+      className={`navigationitem px-4 py-2 flex items-center text-sm font-medium w-full text-left cursor-pointer hover:bg-[var(--frontmatter-list-hover-background)] hover:text-[var(--frontmatter-list-selected-text)] ${isSelected
+        ? `bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]` : `text-[var(--frontmatter-list-text)]`
         }`}
       onClick={onClick}
     >

src/dashboardWebView/components/Layout/PageLayout.tsx

@@ -20,13 +20,13 @@ export const PageLayout: React.FunctionComponent<IPageLayoutProps> = ({
   const settings = useRecoilValue(SettingsSelector);
 
   return (
-    <div className="flex flex-col h-full overflow-auto">
+    <div className="flex flex-col h-full overflow-y-auto overflow-x-hidden">
       <Header header={header} folders={folders} totalPages={totalPages} settings={settings} />
 
       <div
         className={
           contentClass ||
-          'w-full flex justify-between flex-col flex-grow mx-auto pt-6 px-4 max-w-full xl:max-w-[90%]'
+          'w-full flex justify-between flex-col flex-grow mx-auto pt-6 px-4 max-w-full'
         }
       >
         {children}

src/dashboardWebView/components/Layout/SponsorMsg.tsx

@@ -2,7 +2,6 @@ import { HeartIcon, StarIcon } from '@heroicons/react/24/outline';
 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';
 
@@ -18,15 +17,9 @@ interface ISponsorLinkProps {
 }
 
 const SponsorLink: React.FunctionComponent<ISponsorLinkProps> = ({ title, href, children }: React.PropsWithChildren<ISponsorLinkProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <a
-      className={`group inline-flex justify-center items-center space-x-2 opacity-50 hover:opacity-100 ${getColors(
-        `text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300`,
-        `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-textLink-foreground)]]`
-      )
-        }`}
+      className={`group inline-flex justify-center items-center space-x-2 opacity-50 hover:opacity-100 text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-textLink-foreground)]]`}
       href={href}
       title={title}
     >
@@ -40,16 +33,10 @@ export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = ({
   isBacker,
   version
 }: React.PropsWithChildren<ISponsorMsgProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <footer
       className={`w-full px-4 py-2 text-center space-x-8 flex items-center border-t ${isBacker ? 'justify-center' : 'justify-between'
-        } ${getColors(
-          'bg-gray-100 dark:bg-vulcan-500 text-vulcan-50 dark:text-whisper-900 border-gray-200 dark:border-vulcan-300',
-          'bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]'
-        )
-        }`}
+        } bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}
     >
       {isBacker ? (
         <span>

src/dashboardWebView/components/Media/DetailsForm.tsx

@@ -0,0 +1,227 @@
+import * as React from 'react';
+import * as l10n from '@vscode/l10n';
+import { DetailsInput } from './DetailsInput';
+import { LocalizationKey } from '../../../localization';
+import { DEFAULT_MEDIA_CONTENT_TYPE, MediaInfo, UnmappedMedia } from '../../../models';
+import { useCallback, useEffect, useMemo } from 'react';
+import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
+import { DashboardMessage } from '../../DashboardMessage';
+import { basename } from 'path';
+import { useRecoilValue } from 'recoil';
+import { PageSelector, SelectedMediaFolderSelector, SettingsAtom } from '../../state';
+
+export interface IDetailsFormProps {
+  media: MediaInfo;
+  isImageFile: boolean;
+  isVideoFile: boolean;
+  onDismiss: () => void;
+}
+
+export const DetailsForm: React.FunctionComponent<IDetailsFormProps> = ({
+  media,
+  isImageFile,
+  isVideoFile,
+  onDismiss,
+}: React.PropsWithChildren<IDetailsFormProps>) => {
+  const settings = useRecoilValue(SettingsAtom);
+  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
+  const page = useRecoilValue(PageSelector);
+
+  const [filename, setFilename] = React.useState<string>(media.filename);
+  const [unmapped, setUnmapped] = React.useState<UnmappedMedia[]>([]);
+  const [metadata, setMetadata] = React.useState<{ [fieldName: string]: string }>({});
+
+  const fileInfo = useMemo(() => {
+    const fileInfo = filename ? basename(filename).split('.') : null;
+    const extension = fileInfo?.pop();
+    const name = fileInfo?.join('.');
+
+    return { name, extension };
+  }, [filename]);
+
+  const fields = useMemo(() => {
+    const contentType = settings?.media.contentTypes.find((c) => c.fileTypes?.map(t => t.toLowerCase()).includes(fileInfo.extension as string)) || DEFAULT_MEDIA_CONTENT_TYPE;
+    return contentType.fields;
+  }, [fileInfo, settings?.media.contentTypes]);
+
+  const updateMetadata = useCallback((fieldName: string, value: string) => {
+    setMetadata(prevMetadata => ({
+      ...prevMetadata,
+      [fieldName]: value
+    }));
+  }, [metadata]);
+
+  const remapMetadata = useCallback((item: UnmappedMedia) => {
+    Messenger.send(DashboardMessage.remapMediaMetadata, {
+      file: media.fsPath,
+      unmappedItem: item,
+      folder: selectedFolder,
+      page
+    });
+
+    onDismiss();
+  }, [media, selectedFolder, page]);
+
+  const onSubmitMetadata = useCallback(() => {
+    Messenger.send(DashboardMessage.updateMediaMetadata, {
+      file: media.fsPath,
+      filename,
+      page,
+      folder: selectedFolder,
+      metadata,
+    });
+
+    onDismiss();
+  }, [media, filename, metadata, selectedFolder, page, onDismiss]);
+
+  const formFields = useMemo(() => {
+    return fields.map((field) => {
+      if (field.name === "title") {
+        return (
+          <div key="title">
+            <label className={`block text-sm font-medium text-[var(--vscode-editor-foreground)]`}>
+              {l10n.t(LocalizationKey.dashboardMediaCommonTitle)}
+            </label>
+            <div className="mt-1">
+              <DetailsInput name={`title`} value={metadata?.title || ""} onChange={(e) => updateMetadata("title", e)} />
+            </div>
+          </div>
+        );
+      }
+
+      if (field.name === "caption") {
+        if (isImageFile || isVideoFile) {
+          return (
+            <div key="caption">
+              <label className={`block text-sm font-medium text-[var(--vscode-editor-foreground)]`}>
+                {l10n.t(LocalizationKey.dashboardMediaCommonCaption)}
+              </label>
+              <div className="mt-1">
+                <DetailsInput name={`caption`} value={metadata?.caption || ""} onChange={(e) => updateMetadata("caption", e)} isTextArea />
+              </div>
+            </div>
+          )
+        } else {
+          return null;
+        }
+      }
+
+      if (field.name === "alt") {
+        if (isImageFile) {
+          return (
+            <div key="alt">
+              <label className={`block text-sm font-medium text-[var(--vscode-editor-foreground)]`}>
+                {l10n.t(LocalizationKey.dashboardMediaCommonAlt)}
+              </label>
+              <div className="mt-1">
+                <DetailsInput name={`alt`} value={metadata?.alt || ""} onChange={(e) => updateMetadata("alt", e)} isTextArea />
+              </div>
+            </div>
+          )
+        } else {
+          return null;
+        }
+      }
+
+      return (
+        <div key={field.name}>
+          <label className={`block text-sm font-medium text-[var(--vscode-editor-foreground)]`}>
+            {field.title || field.name}
+          </label>
+          <div className="mt-1">
+            <DetailsInput name={field.name} value={metadata[field.name] || ""} onChange={(e) => updateMetadata(field.name, e)} isTextArea={!field.single} />
+          </div>
+        </div>
+      );
+    });
+  }, [fields, metadata, updateMetadata]);
+
+  useEffect(() => {
+    if (fields && media.metadata && fileInfo?.extension) {
+      const metadataFields: { [fieldName: string]: string } = {};
+
+      fields.forEach((field) => {
+        metadataFields[field.name] = (media.metadata[field.name] || '') as string;
+      });
+
+      setMetadata(metadataFields);
+    }
+  }, [fileInfo, media.metadata, fields]);
+
+  useEffect(() => {
+    messageHandler.request<UnmappedMedia[]>(DashboardMessage.getUnmappedMedia, media.filename).then((result) => {
+      setUnmapped(result);
+    });
+  }, [media.filename]);
+
+  return (
+    <>
+      <h3 className={`text-base text-[var(--vscode-editor-foreground)]`}>
+        {l10n.t(LocalizationKey.dashboardMediaMetadataPanelTitle)}
+      </h3>
+
+      {
+        unmapped && unmapped.length > 0 && (
+          <div className="flex flex-col py-3 space-y-3">
+            <p className={`text-sm my-3 font-medium text-[var(--vscode-editor-foreground)] opacity-90`}>
+              {l10n.t(LocalizationKey.dashboardMediaDetailsSlideOverUnmappedDescription)}
+            </p>
+            <ul className='pl-4'>
+              {
+                unmapped.map((item) => (
+                  <li className='list-disc'>
+                    <button
+                      key={item.file}
+                      className='text-left hover:text-[var(--frontmatter-link-hover)]'
+                      onClick={() => remapMetadata(item)}>
+                      {item.file}{item.metadata.title ? ` (${item.metadata.title})` : ''}
+                    </button>
+                  </li>
+                ))
+              }
+            </ul>
+          </div>
+        )
+      }
+
+      <p className={`text-sm my-3 font-medium text-[var(--vscode-editor-foreground)] opacity-90`}>
+        {l10n.t(LocalizationKey.dashboardMediaMetadataPanelDescription)}
+      </p>
+
+      <div className="flex flex-col py-3 space-y-3">
+        <div>
+          <label className={`block text-sm font-medium text-[var(--vscode-editor-foreground)]`}>
+            {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldFileName)}
+          </label>
+          <div className="relative mt-1">
+            <DetailsInput name={`filename`} value={fileInfo.name || ""} onChange={(e) => setFilename(`${e}.${fileInfo.extension}`)} />
+
+            <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+              <span className={`sm:text-sm placeholder-[var(--vscode-input-placeholderForeground)]`}>.{fileInfo?.extension}</span>
+            </div>
+          </div>
+        </div>
+
+        {formFields}
+      </div>
+
+      <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+        <button
+          type="button"
+          className={`w-full inline-flex justify-center rounded border-transparent shadow-sm px-4 py-2 text-base font-medium sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-30 bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] text-[var(--vscode-button-foreground)] outline-[var(--vscode-focusBorder)] outline-1`}
+          onClick={onSubmitMetadata}
+          disabled={!filename}
+        >
+          {l10n.t(LocalizationKey.commonSave)}
+        </button>
+        <button
+          type="button"
+          className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm bg-[var(--vscode-button-secondaryBackground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)] text-[var(--vscode-button-secondaryForeground)]`}
+          onClick={onDismiss}
+        >
+          {l10n.t(LocalizationKey.commonCancel)}
+        </button>
+      </div>
+    </>
+  );
+};

src/dashboardWebView/components/Media/DetailsInput.tsx

@@ -1,37 +1,28 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
+import { TextField } from '../Common/TextField';
 
 export interface IDetailsInputProps {
+  name: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onChange: (value: string) => void;
   isTextArea?: boolean;
 }
 
-export const DetailsInput: React.FunctionComponent<IDetailsInputProps> = ({ value, isTextArea, onChange }: React.PropsWithChildren<IDetailsInputProps>) => {
-  const { getColors } = useThemeColors();
-
+export const DetailsInput: React.FunctionComponent<IDetailsInputProps> = ({ name, value, isTextArea, onChange }: React.PropsWithChildren<IDetailsInputProps>) => {
   if (isTextArea) {
     return (
-      <textarea
-        rows={3}
-        className={`py-1 px-2 sm:text-sm border w-full ${getColors(
-          'bg-white dark:bg-vulcan-300 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-input-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
-        )
-          }`}
+      <TextField
+        name={name}
         value={value}
         onChange={onChange}
+        multiline
       />
     );
   }
 
   return (
-    <input
-      className={`py-1 px-2 sm:text-sm border w-full ${getColors(
-        'bg-white dark:bg-vulcan-300 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-input-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
-      )
-        }`}
+    <TextField
+      name={name}
       value={value}
       onChange={onChange}
     />

src/dashboardWebView/components/Media/DetailsItem.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IDetailsItemProps {
   title: string;
@@ -7,13 +6,11 @@ export interface IDetailsItemProps {
 }
 
 export const DetailsItem: React.FunctionComponent<IDetailsItemProps> = ({ title, details }: React.PropsWithChildren<IDetailsItemProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <>
       <div className="py-3 flex justify-between text-sm font-medium">
-        <dt className={getColors('text-vulcan-100 dark:text-whisper-900', 'text-[var(--vscode-editor-foreground)]')}>{title}</dt>
-        <dd className={`text-right ${getColors('text-vulcan-300 dark:text-whisper-500', 'text-[var(--vscode-foreground)]')}`}>
+        <dt className={`text-[var(--vscode-editor-foreground)]`}>{title}</dt>
+        <dd className={`text-right text-[var(--vscode-foreground)]`}>
           {details}
         </dd>
       </div>

src/dashboardWebView/components/Media/DetailsSlideOver.tsx

@@ -1,19 +1,17 @@
 import { Dialog, Transition } from '@headlessui/react';
 import { PencilSquareIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { format } from 'date-fns';
-import { basename } from 'path';
 import * as React from 'react';
-import { Fragment, useCallback, useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import { DateHelper } from '../../../helpers/DateHelper';
-import { MediaInfo, UnmappedMedia } from '../../../models';
-import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
-import { DashboardMessage } from '../../DashboardMessage';
-import { useRecoilValue } from 'recoil';
-import { PageSelector, SelectedMediaFolderSelector } from '../../state';
+import { DEFAULT_MEDIA_CONTENT_TYPE, MediaInfo } from '../../../models';
 import { DetailsItem } from './DetailsItem';
-import { DetailsInput } from './DetailsInput';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DetailsForm } from './DetailsForm';
+import { useRecoilValue } from 'recoil';
+import { SettingsAtom } from '../../state';
+import { basename } from 'path';
 
 export interface IDetailsSlideOverProps {
   imgSrc: string;
@@ -42,62 +40,56 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
   isImageFile,
   isVideoFile
 }: React.PropsWithChildren<IDetailsSlideOverProps>) => {
-  const [filename, setFilename] = React.useState<string>(media.filename);
-  const [caption, setCaption] = React.useState<string | undefined>(media.caption);
-  const [title, setTitle] = React.useState<string | undefined>(media.title);
-  const [unmapped, setUnmapped] = React.useState<UnmappedMedia[]>([]);
-  const [alt, setAlt] = React.useState(media.alt);
-  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
-  const page = useRecoilValue(PageSelector);
-
+  const settings = useRecoilValue(SettingsAtom);
   const createdDate = useMemo(() => DateHelper.tryParse(media.ctime), [media]);
   const modifiedDate = useMemo(() => DateHelper.tryParse(media.mtime), [media]);
 
-  const fileInfo = filename ? basename(filename).split('.') : null;
-  const extension = fileInfo?.pop();
-  const name = fileInfo?.join('.');
+  const extension = useMemo(() => {
+    const fileInfo = media.filename ? basename(media.filename).split('.') : null;
+    const extension = fileInfo?.pop();
+    return extension;
+  }, [media.filename]);
 
-  const onSubmitMetadata = useCallback(() => {
-    Messenger.send(DashboardMessage.updateMediaMetadata, {
-      file: media.fsPath,
-      filename,
-      caption,
-      alt,
-      title,
-      folder: selectedFolder,
-      page
-    });
-
-    onEditClose();
-  }, [media, filename, caption, alt, title, selectedFolder, page]);
-
-  const remapMetadata = useCallback((item: UnmappedMedia) => {
-    Messenger.send(DashboardMessage.remapMediaMetadata, {
-      file: media.fsPath,
-      unmappedItem: item,
-      folder: selectedFolder,
-      page
-    });
-
-    onEditClose();
-  }, [media, filename, caption, alt, title, selectedFolder, page]);
-
-  React.useEffect(() => {
-    setTitle(media.title);
-    setAlt(media.alt);
-    setCaption(media.caption);
-    setFilename(media.filename);
-  }, [media]);
-
-  React.useEffect(() => {
-    if (showForm) {
-      messageHandler.request<UnmappedMedia[]>(DashboardMessage.getUnmappedMedia, filename).then((result) => {
-        setUnmapped(result);
-      });
-    } else {
-      setUnmapped([]);
+  const fields = useMemo(() => {
+    if (extension) {
+      const contentType = settings?.media.contentTypes.find((c) => c.fileTypes?.map(t => t.toLowerCase()).includes(extension as string)) || DEFAULT_MEDIA_CONTENT_TYPE;
+      return contentType.fields;
     }
-  }, [showForm, filename]);
+  }, [extension, settings?.media.contentTypes]);
+
+  const detailItems = useMemo(() => {
+    const items = [];
+
+    items.push(
+      <DetailsItem key="filename" title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldFileName)} details={media.filename} />
+    );
+
+    fields?.forEach((field) => {
+      if (field.name === "title") {
+        items.push(
+          <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonTitle)} details={media.metadata.title || ""} />
+        );
+      } else if (field.name === "caption") {
+        if (isImageFile) {
+          items.push(
+            <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonCaption)} details={media.metadata.caption || ""} />
+          );
+        }
+      } else if (field.name === "alt") {
+        if (isImageFile) {
+          items.push(
+            <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonAlt)} details={media.metadata.alt || ""} />
+          );
+        }
+      } else {
+        items.push(
+          <DetailsItem title={field.title || field.name} details={(media.metadata[field.name] || "") as string} />
+        );
+      }
+    });
+
+    return items;
+  }, [fields, media.metadata]);
 
   return (
     <Transition.Root show={true} as={Fragment}>
@@ -136,7 +128,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                   </div>
 
                   <div className="relative mt-6 flex-1 px-4 sm:px-6">
-                    <div className="absolute inset-0 px-4 sm:px-6 space-y-8">
+                    <div className="space-y-8">
                       <div>
                         {(isImageFile || isVideoFile) && (
                           <div className={`block w-full aspect-w-10 aspect-h-7 overflow-hidden border rounded border-[var(--frontmatter-border)] bg-[var(--vscode-editor-background)]`}>
@@ -168,101 +160,11 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                       <div>
                         {/* EDIT METADATA FORM */}
                         {showForm && (
-                          <>
-                            <h3 className={`text-base text-[var(--vscode-editor-foreground)]`}>
-                              {l10n.t(LocalizationKey.dashboardMediaMetadataPanelTitle)}
-                            </h3>
-
-                            {
-                              unmapped && unmapped.length > 0 && (
-                                <div className="flex flex-col py-3 space-y-3">
-                                  <p className={`text-sm my-3 font-medium text-[var(--vscode-editor-foreground)] opacity-90`}>
-                                    {l10n.t(LocalizationKey.dashboardMediaDetailsSlideOverUnmappedDescription)}
-                                  </p>
-                                  <ul className='pl-4'>
-                                    {
-                                      unmapped.map((item) => (
-                                        <li className='list-disc'>
-                                          <button
-                                            key={item.file}
-                                            className='text-left hover:text-[var(--frontmatter-link-hover)]'
-                                            onClick={() => remapMetadata(item)}>
-                                            {item.file}{item.metadata.title ? ` (${item.metadata.title})` : ''}
-                                          </button>
-                                        </li>
-                                      ))
-                                    }
-                                  </ul>
-                                </div>
-                              )
-                            }
-
-                            <p className={`text-sm my-3 font-medium text-[var(--vscode-editor-foreground)] opacity-90`}>
-                              {l10n.t(LocalizationKey.dashboardMediaMetadataPanelDescription)}
-                            </p>
-                            <div className="flex flex-col py-3 space-y-3">
-                              <div>
-                                <label className={`block text-sm font-medium text-[var(--vscode-editor-foreground)]`}>
-                                  {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldFileName)}
-                                </label>
-                                <div className="relative mt-1">
-                                  <DetailsInput value={name || ""} onChange={(e) => setFilename(`${e.target.value}.${extension}`)} />
-
-                                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                                    <span className={`sm:text-sm placeholder-[var(--vscode-input-placeholderForeground)]`}>.{extension}</span>
-                                  </div>
-                                </div>
-                              </div>
-
-                              <div>
-                                <label className={`block text-sm font-medium text-[var(--vscode-editor-foreground)]`}>
-                                  {l10n.t(LocalizationKey.dashboardMediaCommonTitle)}
-                                </label>
-                                <div className="mt-1">
-                                  <DetailsInput value={title || ""} onChange={(e) => setTitle(e.target.value)} />
-                                </div>
-                              </div>
-
-                              {(isImageFile || isVideoFile) && (
-                                <div>
-                                  <label className={`block text-sm font-medium text-[var(--vscode-editor-foreground)]`}>
-                                    {l10n.t(LocalizationKey.dashboardMediaCommonCaption)}
-                                  </label>
-                                  <div className="mt-1">
-                                    <DetailsInput value={caption || ""} onChange={(e) => setCaption(e.target.value)} isTextArea />
-                                  </div>
-                                </div>
-                              )}
-                              {isImageFile && (
-                                <div>
-                                  <label className={`block text-sm font-medium text-[var(--vscode-editor-foreground)]`}>
-                                    {l10n.t(LocalizationKey.dashboardMediaCommonAlt)}
-                                  </label>
-                                  <div className="mt-1">
-                                    <DetailsInput value={alt || ""} onChange={(e) => setAlt(e.target.value)} isTextArea />
-                                  </div>
-                                </div>
-                              )}
-                            </div>
-
-                            <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                              <button
-                                type="button"
-                                className={`w-full inline-flex justify-center rounded border-transparent shadow-sm px-4 py-2 text-base font-medium sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-30 bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] text-[var(--vscode-button-foreground)] outline-[var(--vscode-focusBorder)] outline-1`}
-                                onClick={onSubmitMetadata}
-                                disabled={!filename}
-                              >
-                                {l10n.t(LocalizationKey.commonSave)}
-                              </button>
-                              <button
-                                type="button"
-                                className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm bg-[var(--vscode-button-secondaryBackground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)] text-[var(--vscode-button-secondaryForeground)]`}
-                                onClick={onEditClose}
-                              >
-                                {l10n.t(LocalizationKey.commonCancel)}
-                              </button>
-                            </div>
-                          </>
+                          <DetailsForm
+                            media={media}
+                            isImageFile={isImageFile}
+                            isVideoFile={isVideoFile}
+                            onDismiss={onEditClose} />
                         )}
 
                         {!showForm && (
@@ -275,15 +177,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                               </button>
                             </h3>
                             <dl className={`mt-2 border-t border-b divide-y border-[var(--frontmatter-border)] divide-[var(--frontmatter-border)]`}>
-                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldFileName)} details={media.filename} />
-                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonTitle)} details={media.title || ""} />
-
-                              {isImageFile && (
-                                <>
-                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonCaption)} details={media.caption || ''} />
-                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonAlt)} details={media.alt || ''} />
-                                </>
-                              )}
+                              {detailItems}
                             </dl>
                           </>
                         )}

src/dashboardWebView/components/Media/FolderCreation.tsx

@@ -5,7 +5,6 @@ import { DashboardMessage } from '../../DashboardMessage';
 import {
   AllContentFoldersAtom,
   AllStaticFoldersAtom,
-  SelectedMediaFolderAtom,
   SettingsSelector,
   ViewDataSelector
 } from '../../state';
@@ -16,21 +15,20 @@ import { STATIC_FOLDER_PLACEHOLDER } from '../../../constants';
 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';
+import useMediaFolder from '../../hooks/useMediaFolder';
 
 export interface IFolderCreationProps { }
 
 export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
-  props: React.PropsWithChildren<IFolderCreationProps>
+  _: React.PropsWithChildren<IFolderCreationProps>
 ) => {
-  const selectedFolder = useRecoilValue(SelectedMediaFolderAtom);
+  const { selectedFolder } = useMediaFolder();
   const settings = useRecoilValue(SettingsSelector);
   const allStaticFolders = useRecoilValue(AllStaticFoldersAtom);
   const allContentFolders = useRecoilValue(AllContentFoldersAtom);
   const viewData = useRecoilValue(ViewDataSelector);
-  const { getColors } = useThemeColors();
 
   const hexoAssetFolderPath = useMemo(() => {
     const path = viewData?.data?.filePath?.replace(extname(viewData.data.filePath), '');
@@ -78,11 +76,7 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
     if (isHexoPostAssetsEnabled) {
       return (
         <button
-          className={`mr-2 inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium  focus:outline-none ${getColors(
-            `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
-            `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-          )
-            }`}
+          className={`mr-2 inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium  focus:outline-none text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
           title={l10n.t(LocalizationKey.dashboardMediaFolderCreationHexoCreate)}
           onClick={onAssetFolderCreation}
         >
@@ -96,7 +90,7 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
 
   if (scripts.length > 0) {
     return (
-      <div className="flex flex-1 justify-end">
+      <div className="flex flex-1 justify-start">
         {renderPostAssetsButton}
         <ChoiceButton
           title={l10n.t(LocalizationKey.dashboardMediaFolderCreationFolderCreate)}
@@ -113,14 +107,10 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
   }
 
   return (
-    <div className="flex flex-1 justify-end">
+    <div className="flex flex-1 justify-start">
       {renderPostAssetsButton}
       <button
-        className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none rounded ${getColors(
-          `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
-          `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-        )
-          }`}
+        className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none rounded text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
         title={l10n.t(LocalizationKey.dashboardMediaFolderCreationFolderCreate)}
         onClick={onFolderCreation}
       >

src/dashboardWebView/components/Media/FolderItem.tsx

@@ -1,9 +1,9 @@
 import { FolderIcon } from '@heroicons/react/24/solid';
 import { basename, join } from 'path';
 import * as React from 'react';
-import { useRecoilState } from 'recoil';
-import useThemeColors from '../../hooks/useThemeColors';
-import { SelectedMediaFolderAtom } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+import useMediaFolder from '../../hooks/useMediaFolder';
 
 export interface IFolderItemProps {
   folder: string;
@@ -16,8 +16,7 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
   wsFolder,
   staticFolder
 }: React.PropsWithChildren<IFolderItemProps>) => {
-  const [, setSelectedFolder] = useRecoilState(SelectedMediaFolderAtom);
-  const { getColors } = useThemeColors();
+  const { updateFolder } = useMediaFolder();
 
   const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder;
 
@@ -28,25 +27,17 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
 
   return (
     <li
-      className={`group relative p-4 ${getColors(
-        'hover:bg-gray-200 dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800',
-        'hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
-      )
-        }`}
+      className={`group relative hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}
     >
       <button
-        title={isContentFolder ? 'Content directory folder' : 'Public directory folder'}
-        className={`w-full flex flex-row items-center h-full`}
-        onClick={() => setSelectedFolder(folder)}
+        title={isContentFolder ? l10n.t(LocalizationKey.dashboardMediaFolderItemContentDirectory) : l10n.t(LocalizationKey.dashboardMediaFolderItemPublicDirectory)}
+        className={`p-4 w-full flex flex-row items-center h-full`}
+        onClick={() => updateFolder(folder)}
       >
         <div className="relative mr-4">
           <FolderIcon className={`h-12 w-12`} />
           {isContentFolder && (
-            <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 ${getColors(
-              `text-whisper-800 dark:text-vulcan-500`,
-              `text-[var(--vscode-foreground)]`
-            )
-              }`}>
+            <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 text-[var(--vscode-foreground)]`}>
               C
             </span>
           )}

src/dashboardWebView/components/Media/Item.tsx

@@ -1,80 +1,66 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { Menu } from '@headlessui/react';
 import {
-  ClipboardIcon,
   CodeBracketIcon,
   DocumentIcon,
-  EyeIcon,
   MusicalNoteIcon,
-  PencilIcon,
   PhotoIcon,
   PlusIcon,
-  CommandLineIcon,
-  TrashIcon,
-  VideoCameraIcon
+  VideoCameraIcon,
 } from '@heroicons/react/24/outline';
-import { basename, dirname } from 'path';
+import { basename } from 'path';
 import * as React from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { CustomScript } from '../../../helpers/CustomScript';
 import { parseWinPath } from '../../../helpers/parseWinPath';
 import { SnippetParser } from '../../../helpers/SnippetParser';
-import { ScriptType, Snippet } from '../../../models';
 import { MediaInfo } from '../../../models/MediaPaths';
 import { DashboardMessage } from '../../DashboardMessage';
 import {
   LightboxAtom,
+  SelectedItemActionAtom,
   SelectedMediaFolderSelector,
   SettingsSelector,
   ViewDataSelector
 } from '../../state';
-import { MenuItem, MenuItems } from '../Menu';
-import { ActionMenuButton } from '../Menu/ActionMenuButton';
-import { QuickAction } from '../Menu/QuickAction';
 import { Alert } from '../Modals/Alert';
 import { InfoDialog } from '../Modals/InfoDialog';
-import { DetailsSlideOver } from './DetailsSlideOver';
-import { usePopper } from 'react-popper';
 import { MediaSnippetForm } from './MediaSnippetForm';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { ItemMenu } from './ItemMenu';
+import { getRelPath } from '../../utils';
+import { Snippet } from '../../../models';
+import useMediaInfo from '../../hooks/useMediaInfo';
+import { ItemSelection } from '../Common/ItemSelection';
 
 export interface IItemProps {
   media: MediaInfo;
 }
 
 export const Item: React.FunctionComponent<IItemProps> = ({
-  media
+  media,
 }: React.PropsWithChildren<IItemProps>) => {
   const [, setLightbox] = useRecoilState(LightboxAtom);
+  const [, setSelectedItemAction] = useRecoilState(SelectedItemActionAtom);
   const [showAlert, setShowAlert] = useState(false);
-  const [showForm, setShowForm] = useState(false);
   const [showSnippetSelection, setShowSnippetSelection] = useState(false);
   const [snippet, setSnippet] = useState<Snippet | undefined>(undefined);
-  const [showDetails, setShowDetails] = useState(false);
   const [showSnippetFormDialog, setShowSnippetFormDialog] = useState(false);
   const [mediaData, setMediaData] = useState<any | undefined>(undefined);
-  const [caption, setCaption] = useState(media.caption);
-  const [alt, setAlt] = useState(media.alt);
   const [filename, setFilename] = useState<string | null>(null);
   const settings = useRecoilValue(SettingsSelector);
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
   const viewData = useRecoilValue(ViewDataSelector);
-  const { getColors } = useThemeColors();
+  const { mediaFolder, mediaDetails, isAudio, isImage, isVideo } = useMediaInfo(media);
+
+  const relPath = useMemo(() => {
+    return getRelPath(media.fsPath, settings?.staticFolder, settings?.wsFolder);
+  }, [media.fsPath, settings?.staticFolder, settings?.wsFolder]);
 
   const hasViewData = useMemo(() => {
     return viewData?.data?.filePath !== undefined;
   }, [viewData]);
 
-  const [referenceElement, setReferenceElement] = useState<any>(null);
-  const [popperElement, setPopperElement] = useState<any>(null);
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: 'bottom-end',
-    strategy: 'fixed'
-  });
-
   const mediaSnippets = useMemo(() => {
     if (!settings?.snippets) {
       return [];
@@ -90,57 +76,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     return viewData?.data?.position && mediaSnippets.length > 0;
   }, [viewData, mediaSnippets]);
 
-  const getFolder = () => {
-    if (settings?.wsFolder && media.fsPath) {
-      let relPath = media.fsPath.split(settings.wsFolder).pop();
-
-      if (settings.staticFolder && relPath) {
-        relPath = relPath.split(settings.staticFolder).pop();
-      }
-
-      return dirname(parseWinPath(relPath) || '');
-    }
-    return '';
-  };
-
-  const getRelPath = () => {
-    let relPath: string | undefined = '';
-    if (settings?.wsFolder && media.fsPath) {
-      const wsFolderParsed = parseWinPath(settings.wsFolder);
-      const mediaParsed = parseWinPath(media.fsPath);
-
-      relPath = mediaParsed.split(wsFolderParsed).pop();
-
-      // If the static folder is the root, we can just return the relative path
-      if (settings.staticFolder === "/") {
-        return relPath;
-      } else if (settings.staticFolder && relPath) {
-        const staticFolderParsed = parseWinPath(settings.staticFolder);
-        relPath = relPath.split(staticFolderParsed).pop();
-      }
-    }
-    return relPath;
-  };
-
   const getFileName = () => {
     return basename(parseWinPath(media.fsPath) || '');
   };
 
-  const copyToClipboard = () => {
-    const relPath = getRelPath();
-    Messenger.send(DashboardMessage.copyToClipboard, parseWinPath(relPath) || '');
-  };
-
-  const runCustomScript = (script: CustomScript) => {
-    Messenger.send(DashboardMessage.runCustomScript, {
-      script,
-      path: media.fsPath
-    });
-  };
-
-  const insertToArticle = () => {
-    const relPath = getRelPath();
-
+  const insertIntoArticle = useCallback(() => {
     if (viewData?.data?.type === 'file') {
       Messenger.send(DashboardMessage.insertFile, {
         relPath: parseWinPath(relPath) || '',
@@ -152,7 +92,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
         position: viewData?.data?.position || null,
         blockData:
           typeof viewData?.data?.blockData !== 'undefined' ? viewData?.data?.blockData : undefined,
-        title: media.title
+        title: media.metadata.title
       });
     } else {
       Messenger.send(DashboardMessage.insertMedia, {
@@ -165,12 +105,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({
         position: viewData?.data?.position || null,
         blockData:
           typeof viewData?.data?.blockData !== 'undefined' ? viewData?.data?.blockData : undefined,
-        alt: alt || '',
-        caption: caption || '',
-        title: media.title || ''
+        alt: media.metadata.alt || '',
+        caption: media.metadata.caption || '',
+        title: media.metadata.title || ''
       });
     }
-  };
+  }, [media, settings, viewData, relPath]);
 
   const insertSnippet = useCallback(() => {
     if (mediaSnippets.length === 1) {
@@ -188,16 +128,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     (snippet: Snippet) => {
       setShowSnippetSelection(false);
 
-      const relPath = getRelPath();
-
       const fieldData = {
         mediaUrl: (parseWinPath(relPath) || '').replace(/ /g, '%20'),
-        alt: alt || '',
-        caption: caption || '',
-        title: media.title || '',
         filename: basename(relPath || ''),
         mediaWidth: media?.dimensions?.width?.toString() || '',
-        mediaHeight: media?.dimensions?.height?.toString() || ''
+        mediaHeight: media?.dimensions?.height?.toString() || '',
+        ...media.metadata
       };
 
       if (!snippet.fields || snippet.fields.length === 0) {
@@ -217,7 +153,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
         setMediaData(fieldData);
       }
     },
-    [alt, caption, media, settings, viewData, mediaSnippets]
+    [media, settings, viewData, mediaSnippets, relPath]
   );
 
   /**
@@ -225,8 +161,6 @@ export const Item: React.FunctionComponent<IItemProps> = ({
    */
   const insertMediaSnippetToArticle = useCallback(
     (output: string) => {
-      const relPath = getRelPath();
-
       Messenger.send(DashboardMessage.insertMedia, {
         relPath: parseWinPath(relPath) || '',
         file: viewData?.data?.filePath,
@@ -235,20 +169,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
         snippet: output
       });
     },
-    [viewData]
+    [viewData, relPath]
   );
 
-  const deleteMedia = () => {
-    setShowAlert(true);
-  };
-
-  const revealMedia = () => {
-    Messenger.send(DashboardMessage.revealMedia, {
-      file: media.fsPath,
-      folder: selectedFolder
-    });
-  };
-
   const confirmDeletion = () => {
     Messenger.send(DashboardMessage.deleteMedia, {
       file: media.fsPath,
@@ -256,96 +179,17 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     });
   };
 
-  const getDimensions = () => {
-    if (media.dimensions) {
-      return `${media.dimensions.width} x ${media.dimensions.height}`;
-    }
-    return '';
-  };
-
-  const getSize = () => {
-    if (media?.size) {
-      const size = media.size / (1024 * 1024);
-      if (size > 1) {
-        return `${size.toFixed(2)} MB`;
-      } else {
-        return `${(size * 1024).toFixed(2)} KB`;
-      }
-    }
-
-    return '';
-  };
-
-  const getMediaDetails = () => {
-    let sizeDetails = [];
-
-    const dimensions = getDimensions();
-    if (dimensions) {
-      sizeDetails.push(dimensions);
-    }
-
-    const size = getSize();
-    if (size) {
-      sizeDetails.push(size);
-    }
-
-    return sizeDetails.join(' - ');
-  };
-
-  const viewMediaDetails = () => {
-    setShowDetails(true);
-  };
-
   const openLightbox = useCallback(() => {
-    if (isImageFile) {
+    if (isImage) {
       setLightbox(media.vsPath || '');
     }
   }, [media.vsPath]);
 
-  const updateMetadata = () => {
-    setShowForm(true);
-    setShowDetails(true);
-  };
-
-  const customScriptActions = () => {
-    return (settings?.scripts || [])
-      .filter((script) => script.type === ScriptType.MediaFile && !script.hidden)
-      .map((script) => (
-        <MenuItem
-          key={script.title}
-          title={
-            <div className="flex items-center">
-              <CommandLineIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-              <span>{script.title}</span>
-            </div>
-          }
-          onClick={() => runCustomScript(script)}
-        />
-      ));
-  };
-
-  const isVideoFile = useMemo(() => {
-    if (media.mimeType?.startsWith('video/')) {
-      return true;
-    }
-    return false;
-  }, [media]);
-
-  const isAudioFile = useMemo(() => {
-    if (media.mimeType?.startsWith('audio/')) {
-      return true;
-    }
-    return false;
-  }, [media]);
-
-  const isImageFile = useMemo(() => {
-    if (
-      media.mimeType?.startsWith('image/') &&
-      !media.mimeType?.startsWith('image/vnd.adobe.photoshop')
-    ) {
-      return true;
-    }
-    return false;
+  const updateMetadata = useCallback(() => {
+    setSelectedItemAction({
+      path: media.fsPath,
+      action: 'edit'
+    });
   }, [media]);
 
   const renderMediaIcon = useMemo(() => {
@@ -360,15 +204,15 @@ export const Item: React.FunctionComponent<IItemProps> = ({
       return null;
     }
 
-    if (isImageFile) {
+    if (isImage) {
       return <PhotoIcon className={`h-1/2 ${colors}`} />;
     }
 
-    if (isVideoFile) {
+    if (isVideo) {
       icon = <VideoCameraIcon className={`h-4/6 ${colors}`} />;
     }
 
-    if (isAudioFile) {
+    if (isAudio) {
       icon = <MusicalNoteIcon className={`h-4/6 ${colors}`} />;
     }
 
@@ -380,18 +224,18 @@ export const Item: React.FunctionComponent<IItemProps> = ({
         </span>
       </div>
     );
-  }, [media, isImageFile, isVideoFile, isAudioFile]);
+  }, [media, isImage, isVideo, isAudio]);
 
   const renderMedia = useMemo(() => {
-    if (isAudioFile) {
+    if (isAudio) {
       return null;
     }
 
-    if (isVideoFile) {
+    if (isVideo) {
       return <video src={media.vsPath} className="mx-auto object-cover" controls muted />;
     }
 
-    if (isImageFile) {
+    if (isImage) {
       return (
         <img src={media.vsPath} alt={basename(media.fsPath)} className="mx-auto object-cover" />
       );
@@ -406,18 +250,6 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     setMediaData(undefined);
   };
 
-  useEffect(() => {
-    if (media.alt !== alt) {
-      setAlt(media.alt);
-    }
-  }, [media.alt]);
-
-  useEffect(() => {
-    if (media.caption !== caption) {
-      setCaption(media.caption);
-    }
-  }, [media.caption]);
-
   useEffect(() => {
     const name = basename(parseWinPath(media.fsPath) || '');
     if (name !== filename) {
@@ -435,7 +267,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     <>
       <li className={`group relative shadow-md hover:shadow-xl dark:shadow-none border rounded bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] border-[var(--frontmatter-border)]`}>
         <button
-          className={`group/button relative block w-full aspect-w-10 aspect-h-7 overflow-hidden h-48 ${isImageFile ? 'cursor-pointer' : 'cursor-default'} border-b border-[var(--frontmatter-border)]`}
+          className={`group/button relative block w-full aspect-w-10 aspect-h-7 overflow-hidden h-48 ${isImage ? 'cursor-pointer' : 'cursor-default'} border-b border-[var(--frontmatter-border)]`}
           onClick={hasViewData ? undefined : openLightbox}
         >
           <div
@@ -448,6 +280,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           >
             {renderMedia}
           </div>
+
+          <ItemSelection filePath={media.fsPath} />
+
           {hasViewData && (
             <div
               className={`hidden group-hover/button:flex absolute top-0 right-0 bottom-0 left-0 items-center justify-center bg-black bg-opacity-70`}
@@ -457,9 +292,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                   } flex items-center justify-center`}
               >
                 <button
-                  title="Insert image"
+                  title={l10n.t(LocalizationKey.dashboardMediaItemButtomInsertImage)}
                   className={`h-1/3 text-white hover:text-[var(--vscode-button-background)]`}
-                  onClick={insertToArticle}
+                  onClick={insertIntoArticle}
                 >
                   <PlusIcon className={`w-full h-full hover:drop-shadow-md `} aria-hidden="true" />
                 </button>
@@ -467,7 +302,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
               {viewData?.data?.position && mediaSnippets.length > 0 && (
                 <div className={`h-full w-1/3 flex items-center justify-center`}>
                   <button
-                    title="Insert snippet"
+                    title={l10n.t(LocalizationKey.dashboardMediaItemButtomInsertSnippet)}
                     className={`h-1/3 text-white hover:text-[var(--vscode-button-background)]`}
                     onClick={insertSnippet}
                   >
@@ -478,188 +313,60 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                   </button>
                 </div>
               )}
+
+              <ItemSelection filePath={media.fsPath} />
             </div>
           )}
         </button>
         <div className={`relative py-4 pl-4 pr-12`}>
-          <div className={`group/actions absolute top-4 right-4 flex flex-col space-y-4`}>
-            <div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 ${getColors(
-              `group-hover/actions:bg-gray-200 dark:group-hover/actions:bg-vulcan-200 group-hover/actions:border-gray-100 dark:group-hover/actions:border-vulcan-50`,
-              `group-hover/actions:bg-[var(--vscode-sideBar-background)] group-hover/actions:border-[var(--frontmatter-border)]`
-            )
-              }`}>
-              <Menu as="div" className="relative z-10 flex text-left">
-                <div className="hidden group-hover/actions:flex">
-                  <QuickAction title="View media details" onClick={viewMediaDetails}>
-                    <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
-                  </QuickAction>
+          <ItemMenu
+            media={media}
+            relPath={relPath}
+            selectedFolder={selectedFolder}
+            viewData={viewData?.data}
+            snippets={mediaSnippets}
+            scripts={settings?.scripts}
+            insertIntoArticle={insertIntoArticle}
+            insertSnippet={insertSnippet}
+            showUpdateMedia={updateMetadata}
+            showMediaDetails={() => setSelectedItemAction({ path: media.fsPath, action: 'view' })}
+            processSnippet={processSnippet}
+            onDelete={() => setShowAlert(true)} />
 
-                  <QuickAction title="Edit metadata" onClick={updateMetadata}>
-                    <PencilIcon className={`w-4 h-4`} aria-hidden="true" />
-                  </QuickAction>
-
-                  {viewData?.data?.filePath ? (
-                    <>
-                      <QuickAction
-                        title={
-                          viewData.data.metadataInsert && viewData.data.fieldName
-                            ? l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertField, viewData.data.fieldName)
-                            : l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertMarkdown)
-                        }
-                        onClick={insertToArticle}
-                      >
-                        <PlusIcon className={`w-4 h-4`} aria-hidden="true" />
-                      </QuickAction>
-
-                      {viewData?.data?.position && mediaSnippets.length > 0 && (
-                        <QuickAction title={l10n.t(LocalizationKey.commonInsertSnippet)} onClick={insertSnippet}>
-                          <CodeBracketIcon className={`w-4 h-4`} aria-hidden="true" />
-                        </QuickAction>
-                      )}
-                    </>
-                  ) : (
-                    <>
-                      <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionCopyPath)} onClick={copyToClipboard}>
-                        <ClipboardIcon className={`w-4 h-4`} aria-hidden="true" />
-                      </QuickAction>
-                    </>
-                  )}
-
-                  <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionDelete)} onClick={deleteMedia}>
-                    <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
-                  </QuickAction>
-                </div>
-
-                <div ref={setReferenceElement} className={`flex`}>
-                  <ActionMenuButton title={l10n.t(LocalizationKey.commonMenu)} />
-                </div>
-
-                <div
-                  className="menu_items__wrapper z-20"
-                  ref={setPopperElement}
-                  style={styles.popper}
-                  {...attributes.popper}
-                >
-                  <MenuItems widthClass="w-40">
-                    <MenuItem
-                      title={
-                        <div className="flex items-center">
-                          <PencilIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                          <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)}</span>
-                        </div>
-                      }
-                      onClick={updateMetadata}
-                    />
-
-                    {viewData?.data?.filePath ? (
-                      <>
-                        <MenuItem
-                          title={
-                            <div className="flex items-center">
-                              <PlusIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                              <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemInsertImage)}</span>
-                            </div>
-                          }
-                          onClick={insertToArticle}
-                        />
-
-                        {viewData?.data?.position &&
-                          mediaSnippets.length > 0 &&
-                          mediaSnippets.map((snippet, idx) => (
-                            <MenuItem
-                              key={idx}
-                              title={
-                                <div className="flex items-center">
-                                  <CodeBracketIcon
-                                    className="mr-2 h-5 w-5 flex-shrink-0"
-                                    aria-hidden={true}
-                                  />{' '}
-                                  <span>{snippet.title}</span>
-                                </div>
-                              }
-                              onClick={() => processSnippet(snippet)}
-                            />
-                          ))}
-
-                        {customScriptActions()}
-                      </>
-                    ) : (
-                      <>
-                        <MenuItem
-                          title={
-                            <div className="flex items-center">
-                              <ClipboardIcon
-                                className="mr-2 h-5 w-5 flex-shrink-0"
-                                aria-hidden={true}
-                              />{' '}
-                              <span>{l10n.t(LocalizationKey.dashboardMediaItemQuickActionCopyPath)}</span>
-                            </div>
-                          }
-                          onClick={copyToClipboard}
-                        />
-
-                        {customScriptActions()}
-                      </>
-                    )}
-
-                    <MenuItem
-                      title={
-                        <div className="flex items-center">
-                          <EyeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                          <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemRevealMedia)}</span>
-                        </div>
-                      }
-                      onClick={revealMedia}
-                    />
-
-                    <MenuItem
-                      title={
-                        <div className="flex items-center">
-                          <TrashIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                          <span>{l10n.t(LocalizationKey.commonDelete)}</span>
-                        </div>
-                      }
-                      onClick={deleteMedia}
-                    />
-                  </MenuItems>
-                </div>
-              </Menu>
-            </div>
-          </div>
-          <p className={`text-sm font-bold pointer-events-none flex items-center break-all ${getColors(`dark:text-whisper-900`, `text-[var(--vscode-foreground)]`)}`}>
+          <p className={`text-sm font-bold pointer-events-none flex items-center break-all text-[var(--vscode-foreground)]}`}>
             {basename(parseWinPath(media.fsPath) || '')}
           </p>
-          {!isImageFile && media.title && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
+          {!isImage && media.metadata.title && (
+            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start`}>
               <b className={`mr-2`}>
                 {l10n.t(LocalizationKey.dashboardMediaCommonTitle)}:
               </b>
-              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.title}</span>
+              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>{media.metadata.title}</span>
             </p>
           )}
-          {media.caption && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
+          {media.metadata.caption && (
+            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start`}>
               <b className={`mr-2`}>
                 {l10n.t(LocalizationKey.dashboardMediaCommonCaption)}:
               </b>
-              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.caption}</span>
+              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>{media.metadata.caption}</span>
             </p>
           )}
-          {!media.caption && media.alt && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none  flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
+          {!media.metadata.caption && media.metadata.alt && (
+            <p className={`mt-2 text-xs font-medium pointer-events-none  flex flex-col items-start`}>
               <b className={`mr-2`}>
                 {l10n.t(LocalizationKey.dashboardMediaCommonAlt)}:
               </b>
-              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.alt}</span>
+              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>{media.metadata.alt}</span>
             </p>
           )}
           {(media?.size || media?.dimensions) && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
+            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start`}>
               <b className={`mr-1`}>
                 {l10n.t(LocalizationKey.dashboardMediaCommonSize)}:
               </b>
-              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>
-                {getMediaDetails()}
+              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>
+                {mediaDetails}
               </span>
             </p>
           )}
@@ -677,11 +384,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             {mediaSnippets.map((snippet, idx) => (
               <li key={idx} className="inline-flex items-center pb-2 mr-2">
                 <button
-                  className={`w-full inline-flex justify-center border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:w-auto sm:text-sm disabled:opacity-30 ${getColors(
-                    `bg-teal-600 text-white hover:bg-teal-700 dark:hover:bg-teal-900`,
-                    `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]`
-                  )
-                    }`}
+                  className={`w-full inline-flex justify-center border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:w-auto sm:text-sm disabled:opacity-30 bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]`}
                   onClick={() => processSnippet(snippet)}
                 >
                   {snippet.title}
@@ -692,29 +395,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({
         </InfoDialog>
       )}
 
-      {showDetails && (
-        <DetailsSlideOver
-          imgSrc={media.vsPath || ''}
-          size={getSize()}
-          dimensions={getDimensions()}
-          folder={getFolder()}
-          media={media}
-          showForm={showForm}
-          isImageFile={isImageFile}
-          isVideoFile={isVideoFile}
-          onEdit={() => setShowForm(true)}
-          onEditClose={() => setShowForm(false)}
-          onDismiss={() => {
-            setShowDetails(false);
-            setShowForm(false);
-          }}
-        />
-      )}
-
       {showAlert && (
         <Alert
           title={`${l10n.t(LocalizationKey.commonDelete)}: ${basename(parseWinPath(media.fsPath) || '')}`}
-          description={l10n.t(LocalizationKey.dashboardMediaItemAlertDeleteDescription, getFolder())}
+          description={l10n.t(LocalizationKey.dashboardMediaItemAlertDeleteDescription, mediaFolder)}
           okBtnText={l10n.t(LocalizationKey.commonDelete)}
           cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
           dismiss={() => setShowAlert(false)}