Implement right-click context menu for Structure view with create content functionality

Co-authored-by: estruyf <2900833+estruyf@users.noreply.github.com>

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## [10.10.0] - 2025-xx-xx
+
+### 🎨 Enhancements
+
+- [#937](https://github.com/estruyf/vscode-front-matter/issues/937): Dashboard "Structure" view for documentation sites
+- [#965](https://github.com/estruyf/vscode-front-matter/issues/965): Added SEO support for the keyword in the first paragraph
+- [#973](https://github.com/estruyf/vscode-front-matter/issues/973): Support for number fields in the snippets
+
+### 🐞 Fixes
+
+- [#969](https://github.com/estruyf/vscode-front-matter/issues/969): Fix typo on welcome screen
+
 ## [10.9.0] - 2025-07-01 - [Release notes](https://beta.frontmatter.codes/updates/v10.9.0)
 
 ### 🎨 Enhancements

README.beta.md

@@ -117,7 +117,7 @@ In version v2 we released the re-designed sidebar panel with improved SEO suppor
 You can get the extension via:
 
 - The VS Code marketplace: [VS Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter).
-- The extension CLI: `ext install eliostruyf.vscode-front-matter`
+- The extension CLI: `code --install-extension eliostruyf.vscode-front-matter`
 - Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter">open extension in VS Code</a>
 
 > **Info**: The docs can be found on [frontmatter.codes](https://frontmatter.codes).
@@ -129,7 +129,7 @@ If you have the courage to test out the beta features, we made available a beta
 - Uninstall the main Front Matter version
 - Install the beta version
   - VS Code marketplace: [VS Code Marketplace - Front Matter BETA](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter-beta).
-  - The extension CLI: `ext install eliostruyf.vscode-front-matter-beta`
+  - The extension CLI: `code --install-extension eliostruyf.vscode-front-matter-beta`
   - Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter-beta">open extension in VS Code</a>
 
 > **Info**: The BETA docs can be found on [beta.frontmatter.codes](https://beta.frontmatter.codes).

README.md

@@ -4,29 +4,7 @@
   </a>
 </h1>
 
-<h2 align="center">Front Matter - A Headless CMS for Visual Studio Code</h2>
-
-> **📢 2026 Open Source Priorities Update**
-> 
-> I love working with and creating open source products, but after careful
-> evaluation and working with a coach, I've decided to focus my efforts on
-> creating a better revenue stream. As open-source isn't providing me a
-> sustainable income, I need to focus my time and effort more strategically on
-> how to make my work sustainable.
-> 
-> **Front Matter CMS will continue to be maintained** as I use it daily.
-> However, major changes will only happen if there's a personal reason, a
-> company commitment, or significant community support. Feature requests may
-> take longer to be addressed.
-> 
-> I'm shifting focus to open source projects that I can learn from or that have
-> different outcomes, like **Demo Time**, which I use when presenting at
-> conferences. If you or your company would like to sponsor my work on Front
-> Matter CMS or other projects, I'd love to discuss how we can collaborate to
-> make it even better!
-> 
-> This is not about Front Matter CMS going away, but rather about managing
-> expectations around feature development timelines.
+<h2 align="center">Front Matter a CMS running straight in Visual Studio Code</h2>
 
 <p align="center">
   <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter" title="Check it out on the Visual Studio Marketplace">
@@ -50,17 +28,11 @@
 
 ## ❓ What is Front Matter?
 
-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. Jump right into editing
-and creating content with Front Matter and be able to preview it straight in VS
-Code.
+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. Jump right into editing and creating content with Front Matter and be able to preview it straight in VS Code.
 
-The extension supports various static-site generators and frameworks like Hugo,
-Jekyll, Hexo, NextJs, Gatsby, and more.
+The extension supports various static-site generators and frameworks like Hugo, Jekyll, Hexo, NextJs, Gatsby, and more.
 
-A couple of our extension highlights that hopefully get you interested in giving
-Front Matter a try:
+A couple of our extension highlights that hopefully get you interested in giving Front Matter a try:
 
 - Content, data, and media management
   - Search, filter, sort, etc. all your content
@@ -69,40 +41,30 @@ Front Matter a try:
 - Preview your site/content straight in Visual Studio Code
 - SEO checks for title, description, and keywords
 - Extensibility
-  - As we know, we cannot support all use cases. We provide a way to extend the
-    functionality of the extension to your needs
+  - As we know, we cannot support all use cases. We provide a way to extend the functionality of the extension to your needs
 - and many more features ...
 
-> Missing something? Let us know by opening an issue on the
-> [GitHub repository](https://github.com/estruyf/vscode-front-matter/issues/new/choose)
+> Missing something? Let us know by opening an issue on the [GitHub repository](https://github.com/estruyf/vscode-front-matter/issues/new/choose)
 
 <p align="center">
   <img src="https://frontmatter.codes/assets/marketplace/v6.0.0/content-preview.png" alt="Site preview" style="display: inline-block" />
 </p>
 
-> If you see something missing in your article creation flow, please feel free
-> to reach out.
+> 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.
+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).
+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).
 
 **Version 8**
 
-The taxonomy dashboard got introduced on which you can manage your tags,
-categories, and custom taxonomy.
+The taxonomy dashboard got introduced on which you can manage your tags, categories, and custom taxonomy.
 
 ![Taxonomy dashboard](https://frontmatter.codes/assets/marketplace/v8.1.0/taxonomy-dashboard.png)
 
@@ -114,24 +76,17 @@ Snippets support for Front Matter has been added!
 
 **Version 6**
 
-In this version, we introduced the new data files/folders dashboard. You can
-find more information about the release in our
-[v6.0.0 release notes](https://frontmatter.codes/updates/v6.0.0).
+In this version, we introduced the new data files/folders dashboard. You can find more information about the release in our [v6.0.0 release notes](https://frontmatter.codes/updates/v6.0.0).
 
 <p align="center">
   <img src="https://frontmatter.codes/assets/marketplace/v6.0.0/data-dashboard.png" alt="Data dashboard" style="display: inline-block" />
 </p>
 
-> Data files/folders are pieces of content that do not belong to any markdown
-> content, but live on their own. Most of the time, these data files are used to
-> store additional information about your project/blog/website that will be used
-> to render the content.
+> Data files/folders are pieces of content that do not belong to any markdown content, but live on their own. Most of the time, these data files are used to store additional information about your project/blog/website that will be used to render the content.
 
 **Version 5**
 
-The new media dashboard redesign got introduced + support for setting metadata
-on media files
-[v5.0.0 release notes](https://frontmatter.codes/updates/v5.0.0).
+The new media dashboard redesign got introduced + support for setting metadata on media files [v5.0.0 release notes](https://frontmatter.codes/updates/v5.0.0).
 
 <p align="center">
   <img src="https://frontmatter.codes/assets/marketplace/v5.9.0/media-dashboard.png" alt="Data dashboard" style="display: inline-block" />
@@ -139,21 +94,15 @@ on media files
 
 **Version 4**
 
-Support for Team level settings, content-types, and image support. Get to know
-more at: [v4.0.0 release notes](https://frontmatter.codes/updates/v4_0_0).
+Support for Team level settings, content-types, and image support. Get to know more at: [v4.0.0 release notes](https://frontmatter.codes/updates/v4_0_0).
 
 **Version 3**
 
-In version v3 we introduced the welcome and dashboard webview. The welcome view
-allows to get you started using the extension, and the dashboard allows you to
-manage all your markdown pages in one place. This makes it easy to search,
-filter, sort, and more.
+In version v3 we introduced the welcome and dashboard webview. The welcome view allows to get you started using the extension, and the dashboard allows you to manage all your markdown pages in one place. This makes it easy to search, filter, sort, and more.
 
 **Version 2**
 
-In version v2 we released the re-designed sidebar panel with improved SEO
-support. This extension makes it the only extension to manage your Markdown
-pages for your static sites in Visual Studio Code.
+In version v2 we released the re-designed sidebar panel with improved SEO support. This extension makes it the only extension to manage your Markdown pages for your static sites in Visual Studio Code.
 
 <p align="center" style="margin-top: 2rem;">
   <a href="https://www.producthunt.com/posts/front-matter?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-front-matter" target="_blank">
@@ -165,47 +114,33 @@ pages for your static sites in Visual Studio Code.
 
 You can get the extension via:
 
-- The VS Code marketplace:
-  [VS Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter).
-- The extension CLI: `ext install eliostruyf.vscode-front-matter`
-- Or by clicking on the following link: <a href="" title="open extension in VS
-  Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter">open
-  extension in VS Code</a>
+- The VS Code marketplace: [VS Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter).
+- The extension CLI: `code --install-extension eliostruyf.vscode-front-matter`
+- Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter">open extension in VS Code</a>
 
-> **Info**: The docs can be found on
-> [frontmatter.codes](https://frontmatter.codes).
+> **Info**: The docs can be found on [frontmatter.codes](https://frontmatter.codes).
 
 ### 🧪 Beta version
 
-If you have the courage to test out the beta features, we made available a beta
-version as well. You can install this via:
+If you have the courage to test out the beta features, we made available a beta version as well. You can install this via:
 
 - Uninstall the main Front Matter version
 - Install the beta version
-  - VS Code marketplace:
-    [VS Code Marketplace - Front Matter BETA](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter-beta).
-  - The extension CLI: `ext install eliostruyf.vscode-front-matter-beta`
-  - Or by clicking on the following link: <a href="" title="open extension in VS
-    Code"
-    data-vscode="vscode:extension/eliostruyf.vscode-front-matter-beta">open
-    extension in VS Code</a>
+  - VS Code marketplace: [VS Code Marketplace - Front Matter BETA](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter-beta).
+  - The extension CLI: `code --install-extension eliostruyf.vscode-front-matter-beta`
+  - Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter-beta">open extension in VS Code</a>
 
-> **Info**: The BETA docs can be found on
-> [beta.frontmatter.codes](https://beta.frontmatter.codes).
+> **Info**: The BETA docs can be found on [beta.frontmatter.codes](https://beta.frontmatter.codes).
 
 ## 📖 Documentation
 
-All documentation can be found on
-[frontmatter.codes](https://frontmatter.codes).
+All documentation can be found on [frontmatter.codes](https://frontmatter.codes).
 
-Documentation repository:
-[GitHub - Front Matter DOCs](https://github.com/FrontMatter/web-documentation-nextjs)
+Documentation repository: [GitHub - Front Matter DOCs](https://github.com/FrontMatter/web-documentation-nextjs)
 
 ## 💪 Contributing
 
-Pull requests are welcome. Please open an issue first to discuss what you would
-like to change, or which problem you would like to fix. This makes it easier for
-us to follow-up and plan for future releases.
+Pull requests are welcome. Please open an issue first to discuss what you would like to change, or which problem you would like to fix. This makes it easier for us to follow-up and plan for future releases.
 
 You can always help us improve the extension in varous ways like:
 
@@ -218,8 +153,7 @@ You can always help us improve the extension in varous ways like:
 - Tutorials
 - etc.
 
-Eager to start contributing? Great 🤩, you can contribute to the following
-projects:
+Eager to start contributing? Great 🤩, you can contribute to the following projects:
 
 - [Extension](https://github.com/estruyf/vscode-front-matter)
 - [Documentation](https://github.com/FrontMatter/web-documentation-nextjs)
@@ -227,16 +161,13 @@ projects:
 
 ## 👀 Show the work you are using Front Matter
 
-Are you using Front Matter and are you interested in showing for which websites
-you use it? You can show your work by opening a
-[showcase issue](https://github.com/estruyf/vscode-front-matter/issues/new?assignees=&labels=&template=showcase.md&title=Showcase%3A+).
+Are you using Front Matter and are you interested in showing for which websites you use it? You can show your work by opening a [showcase issue](https://github.com/estruyf/vscode-front-matter/issues/new?assignees=&labels=&template=showcase.md&title=Showcase%3A+).
 
 You can open showcase issues for the following things:
 
 - Show the website for which you use Front Matter;
 - Share an article/video/webcast/... that explains how you use Front Matter;
-- Got something else to share? Open an issue and we can see where it fits on our
-  website.
+- Got something else to share? Open an issue and we can see where it fits on our website.
 
 ## 👉 Contributors 🤘
 
@@ -254,23 +185,33 @@ You can open showcase issues for the following things:
 
 <br />
 
+<p align="center" title="Support by run.events">
+  <a href="https://run.events/?utm_source=frontmatter&utm_campaign=oss">
+    <img src="https://frontmatter.codes/assets/sponsors/runevents-purple.webp" alt="run.events - Event Management Platform" height="50px" />
+   </a>
+</p>
+
+<br />
+
 <p align="center" title="Powered by Netlify">
   <a href="https://www.netlify.com?utm_source=vscode-frontmatter&utm_campaign=oss">
     <img src="https://frontmatter.codes/assets/sponsors/netlify-dark.png" alt="Deploys by Netlify" height="51px" />
    </a>
 </p>
 
+<br />
+
+<p align="center">
+  <a href="http://bejs.io/" title="Supported by the BEJS Community">
+    <img src="https://frontmatter.codes/assets/sponsors/bejs-community.png" alt="Supported by the BEJS Community" height="50px"/>
+   </a>
+</p>
+
 ## 📊 Telemetry
 
-The Front Matter CMS extension only uses telemetry on application crashes. 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).
+The Front Matter CMS extension only uses telemetry on application crashes. 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).
 
-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:
+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)
 

l10n/bundle.l10n.de.json

@@ -109,6 +109,7 @@
   "dashboard.header.tabs.taxonomies": "Taxonomien",
   "dashboard.header.viewSwitch.toGrid": "Zur Rasteransicht wechseln",
   "dashboard.header.viewSwitch.toList": "Zur Listenansicht wechseln",
+  "dashboard.header.viewSwitch.toStructure": "Zur Strukturansicht wechseln",
   "dashboard.layout.sponsor.support.msg": "Unterstützen Sie Front Matter",
   "dashboard.layout.sponsor.review.label": "Bewerten",
   "dashboard.layout.sponsor.review.msg": "Bewerten Sie Front Matter",

l10n/bundle.l10n.fr.json

@@ -109,6 +109,7 @@
   "dashboard.header.tabs.taxonomies": "Taxonomies",
   "dashboard.header.viewSwitch.toGrid": "Afficher en grille",
   "dashboard.header.viewSwitch.toList": "Afficher en liste",
+  "dashboard.header.viewSwitch.toStructure": "Afficher en structure",
   "dashboard.layout.sponsor.support.msg": "Soutenir Front Matter",
   "dashboard.layout.sponsor.review.label": "Donnez votre avis",
   "dashboard.layout.sponsor.review.msg": "Donnez votre avis sur Front Matter",

l10n/bundle.l10n.ja.json

@@ -214,6 +214,7 @@
 
   "dashboard.header.viewSwitch.toGrid": "グリッド表示",
   "dashboard.header.viewSwitch.toList": "リスト表示",
+  "dashboard.header.viewSwitch.toStructure": "構造表示",
 
   "dashboard.layout.sponsor.support.msg": "Front Matterをサポートする",
   "dashboard.layout.sponsor.review.label": "評価する",

l10n/bundle.l10n.json

@@ -222,6 +222,7 @@
 
   "dashboard.header.viewSwitch.toGrid": "Change to grid",
   "dashboard.header.viewSwitch.toList": "Change to list",
+  "dashboard.header.viewSwitch.toStructure": "Change to structure",
 
   "dashboard.layout.sponsor.support.msg": "Support Front Matter",
   "dashboard.layout.sponsor.review.label": "Review",
@@ -332,7 +333,7 @@
   "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.git.description": "Enable Git synchronization to easily 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",
@@ -504,6 +505,7 @@
   "panel.seoKeywords.density": "Keyword density",
   "panel.seoKeywordInfo.validInfo.label": "Heading(s)",
   "panel.seoKeywordInfo.validInfo.content": "Content",
+  "panel.seoKeywordInfo.validInfo.firstParagraph": "First paragraph",
   "panel.seoKeywordInfo.density.tooltip": "Recommended frequency: 0.75% - 1.5%",
 
   "panel.seoKeywords.title": "Keywords",

l10n/bundle.l10n.zh-cn.json

@@ -222,6 +222,7 @@
 
   "dashboard.header.viewSwitch.toGrid": "切换到网格视图",
   "dashboard.header.viewSwitch.toList": "切换到列表视图",
+  "dashboard.header.viewSwitch.toStructure": "切换到结构视图",
 
   "dashboard.layout.sponsor.support.msg": "支持 Front Matter",
   "dashboard.layout.sponsor.review.label": "评价",

package.json

@@ -2246,6 +2246,11 @@
         "title": "%command.frontMatter.createContent%",
         "category": "Front Matter"
       },
+      {
+        "command": "frontMatter.structure.createContentInFolder",
+        "title": "Create Content in Folder",
+        "category": "Front Matter"
+      },
       {
         "command": "frontMatter.createTag",
         "title": "%command.frontMatter.createTag%",
@@ -2484,6 +2489,11 @@
         {
           "command": "workbench.action.webview.openDeveloperTools",
           "when": "frontMatter:isDevelopment"
+        },
+        {
+          "command": "frontMatter.structure.createContentInFolder",
+          "when": "webview == frontMatterDashboard && webviewItem == folder",
+          "group": "1_structure@1"
         }
       ],
       "editor/title": [

src/constants/Extension.ts

@@ -23,6 +23,8 @@ export const COMMAND_NAME = {
   createContent: getCommandName('createContent'),
   createByContentType: getCommandName('createByContentType'),
   createByTemplate: getCommandName('createByTemplate'),
+  createContentInFolder: getCommandName('createContentInFolder'),
+  structureCreateContentInFolder: getCommandName('structure.createContentInFolder'),
   createTemplate: getCommandName('createTemplate'),
   initTemplate: getCommandName('initTemplate'),
   collapseSections: getCommandName('collapseSections'),

src/dashboardWebView/DashboardMessage.ts

@@ -23,6 +23,7 @@ export enum DashboardMessage {
   createContent = 'createContent',
   createByContentType = 'createByContentType',
   createByTemplate = 'createByTemplate',
+  createContentInFolder = 'createContentInFolder',
   refreshPages = 'refreshPages',
   searchPages = 'searchPages',
   openFile = 'openFile',

src/dashboardWebView/components/Common/NumberField.tsx

@@ -0,0 +1,68 @@
+import { XCircleIcon } from '@heroicons/react/24/solid';
+import * as React from 'react';
+
+export interface INumberFieldProps {
+  name: string;
+  value?: string;
+  placeholder?: string;
+  description?: string;
+  icon?: JSX.Element;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  onChange?: (value: string) => void;
+  onReset?: () => void;
+}
+
+export const NumberField: React.FunctionComponent<INumberFieldProps> = ({
+  name,
+  value,
+  placeholder,
+  description,
+  icon,
+  autoFocus,
+  disabled,
+  onChange,
+  onReset
+}: React.PropsWithChildren<INumberFieldProps>) => {
+  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>
+          )
+        }
+
+        <input
+          type="number"
+          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>
+
+      {
+        description && (
+          <p className="text-xs text-[var(--vscode--settings-headerForeground)] opacity-75 mt-2 mx-2">
+            {description}
+          </p>
+        )
+      }
+    </>
+  );
+};

src/dashboardWebView/components/Contents/List.tsx

@@ -17,6 +17,8 @@ export const List: React.FunctionComponent<IListProps> = ({
     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`;
+  } else if (view === DashboardViewType.Structure) {
+    className = `structure-view`;
   }
 
   return (

src/dashboardWebView/components/Contents/Overview.tsx

@@ -9,6 +9,7 @@ import { GroupOption } from '../../constants/GroupOption';
 import { GroupingSelector, PageAtom, PagedItems, ViewSelector } from '../../state';
 import { Item } from './Item';
 import { List } from './List';
+import { StructureView } from './StructureView';
 import usePagination from '../../hooks/usePagination';
 import { LocalizationKey, localize } from '../../../localization';
 import { PinnedItemsAtom } from '../../state/atom/PinnedItems';
@@ -145,16 +146,21 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
           />
           {settings && settings?.contentFolders?.length > 0 ? (
             <p className={`text-xl font-medium`}>{localize(LocalizationKey.dashboardContentsOverviewNoMarkdown)}</p>
-            
+
           ) : (
             <p className={`text-lg font-medium`}>{localize(LocalizationKey.dashboardContentsOverviewNoFolders)}</p>
-            
+
           )}
         </div>
       </div>
     );
   }
 
+  // Handle Structure view first - it overrides all other display modes
+  if (view === DashboardViewType.Structure) {
+    return <StructureView pages={pages} />;
+  }
+
   if (grouping !== GroupOption.none) {
     return (
       <>
@@ -196,7 +202,7 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
             <h1 className='text-xl flex space-x-2 items-center mb-4'>
               <PinIcon className={`-rotate-45`} />
               <span>{localize(LocalizationKey.dashboardContentsOverviewPinned)}</span>
-              
+
             </h1>
             <List>
               {pinnedPages.map((page, idx) => (

src/dashboardWebView/components/Contents/StructureItem.tsx

@@ -0,0 +1,79 @@
+import { useRecoilValue } from 'recoil';
+import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
+import { Page } from '../../models/Page';
+import { SettingsSelector } from '../../state';
+import { DateField } from '../Common/DateField';
+import { ContentActions } from './ContentActions';
+import { useMemo } from 'react';
+import { Status } from './Status';
+import * as React from 'react';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+import useCard from '../../hooks/useCard';
+import { ItemSelection } from '../Common/ItemSelection';
+import { openFile } from '../../utils';
+import useSelectedItems from '../../hooks/useSelectedItems';
+import { cn } from '../../../utils/cn';
+
+export interface IStructureItemProps extends Page { }
+
+export const StructureItem: React.FunctionComponent<IStructureItemProps> = ({
+  ...pageData
+}: React.PropsWithChildren<IStructureItemProps>) => {
+  const { selectedFiles } = useSelectedItems();
+  const settings = useRecoilValue(SettingsSelector);
+  const draftField = useMemo(() => settings?.draftField, [settings]);
+  const { escapedTitle } = useCard(pageData, settings?.dashboardState?.contents?.cardFields);
+
+  const isSelected = useMemo(() => selectedFiles.includes(pageData.fmFilePath), [selectedFiles, pageData.fmFilePath]);
+
+  const onOpenFile = React.useCallback(() => {
+    openFile(pageData.fmFilePath);
+  }, [pageData.fmFilePath]);
+
+  return (
+    <div className="relative">
+      <div
+        className={cn(
+          `flex items-center space-x-3 py-1 px-2 rounded cursor-pointer hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)]`,
+          isSelected && `bg-[var(--vscode-list-activeSelectionBackground)]`
+        )}
+      >
+        <ItemSelection filePath={pageData.fmFilePath} show />
+        
+        <MarkdownIcon className="w-4 h-4 text-[var(--vscode-symbolIcon-fileForeground)] flex-shrink-0" />
+        
+        <button
+          title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
+          onClick={onOpenFile}
+          className="flex-1 text-left truncate font-medium"
+        >
+          {escapedTitle}
+        </button>
+
+        <div className="flex items-center space-x-2 flex-shrink-0">
+          {pageData.date && (
+            <DateField 
+              value={pageData.date} 
+              format={pageData.fmDateFormat}
+              className="text-xs text-[var(--vscode-descriptionForeground)]"
+            />
+          )}
+          
+          {draftField && draftField.name && typeof pageData[draftField.name] !== "undefined" && (
+            <Status draft={pageData[draftField.name]} published={pageData.fmPublished} />
+          )}
+
+          <ContentActions
+            path={pageData.fmFilePath}
+            relPath={pageData.fmRelFileWsPath}
+            contentType={pageData.fmContentType}
+            scripts={settings?.scripts}
+            onOpen={onOpenFile}
+            listView
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

src/dashboardWebView/components/Contents/StructureView.tsx

@@ -0,0 +1,330 @@
+import { Disclosure } from '@headlessui/react';
+import { ChevronRightIcon, FolderIcon, PlusIcon } from '@heroicons/react/24/solid';
+import * as React from 'react';
+import { useMemo, useState, useCallback } from 'react';
+import { Page } from '../../models';
+import { StructureItem } from './StructureItem';
+import { parseWinPath } from '../../../helpers/parseWinPath';
+import { messageHandler } from '@estruyf/vscode/dist/client';
+import { DashboardMessage } from '../../DashboardMessage';
+
+export interface IStructureViewProps {
+  pages: Page[];
+}
+
+interface FolderNode {
+  name: string;
+  path: string;
+  children: FolderNode[];
+  pages: Page[];
+}
+
+interface ContextMenuState {
+  visible: boolean;
+  x: number;
+  y: number;
+  folderPath: string;
+}
+
+export const StructureView: React.FunctionComponent<IStructureViewProps> = ({
+  pages
+}: React.PropsWithChildren<IStructureViewProps>) => {
+  const [contextMenu, setContextMenu] = useState<ContextMenuState>({
+    visible: false,
+    x: 0,
+    y: 0,
+    folderPath: ''
+  });
+  
+  const createContentInFolder = React.useCallback((folderPath: string, nodePagesOnly: Page[]) => {
+    // Find a page from this folder to get the base content folder information
+    // First try to find from the specific folder, then from all pages if not found
+    let samplePage = nodePagesOnly.find(page => page.fmPageFolder);
+    
+    if (!samplePage) {
+      // If no pages in this specific folder, find any page that has the same base folder structure
+      samplePage = pages.find(page => {
+        if (!page.fmFolder || !page.fmPageFolder) {
+          return false;
+        }
+        const normalizedFmFolder = page.fmFolder.replace(/\\/g, '/').replace(/^\/+|\/+$/g, '');
+        return folderPath.startsWith(normalizedFmFolder) || normalizedFmFolder.startsWith(folderPath.split('/')[0]);
+      });
+    }
+
+    if (samplePage && samplePage.fmPageFolder) {
+      // Construct the full folder path by combining the base content folder with the structure path
+      const baseFolderPath = samplePage.fmPageFolder.path.replace(/\\/g, '/').replace(/\/+$/, '');
+      const relativePath = folderPath.replace(/^\/+|\/+$/g, '');
+      const fullFolderPath = `${baseFolderPath}/${relativePath}`;
+      
+      messageHandler.send(DashboardMessage.createContentInFolder, { folderPath: fullFolderPath });
+    }
+  }, [pages]);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent, folderPath: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    setContextMenu({
+      visible: true,
+      x: e.clientX,
+      y: e.clientY,
+      folderPath
+    });
+  }, []);
+
+  const hideContextMenu = useCallback(() => {
+    setContextMenu(prev => ({ ...prev, visible: false }));
+  }, []);
+
+  const handleCreateContent = useCallback(() => {
+    if (contextMenu.folderPath) {
+      createContentInFolder(contextMenu.folderPath, []);
+    }
+    hideContextMenu();
+  }, [contextMenu.folderPath, createContentInFolder, hideContextMenu]);
+
+  // Close context menu when clicking outside
+  React.useEffect(() => {
+    const handleClick = () => hideContextMenu();
+    if (contextMenu.visible) {
+      document.addEventListener('click', handleClick);
+      return () => document.removeEventListener('click', handleClick);
+    }
+  }, [contextMenu.visible, hideContextMenu]);
+
+  const folderTree = useMemo(() => {
+    const root: FolderNode = {
+      name: '',
+      path: '',
+      children: [],
+      pages: []
+    };
+
+    const folderMap = new Map<string, FolderNode>();
+    folderMap.set('', root);
+
+    // Helper to compute the normalized folder path for a page.
+    // It ensures the page's folder starts with the `fmFolder` segment and
+    // preserves any subpaths after that segment (so subfolders are created).
+    const computeNormalizedFolderPath = (page: Page): string => {
+      if (!page.fmFolder) {
+        return '';
+      }
+
+      const fmFolder = page.fmFolder.replace(/\\/g, '/').replace(/^\/+|\/+$/g, '');
+
+      // If we have a file path, use its directory (exclude the filename) to compute
+      // the relative path. This avoids treating filenames as folder segments.
+      const filePath = page.fmFilePath ? parseWinPath(page.fmFilePath).replace(/^\/+|\/+$/g, '') : '';
+      const fileDir = filePath && filePath.includes('/') ? filePath.substring(0, filePath.lastIndexOf('/')).replace(/^\/+|\/+$/g, '') : '';
+
+      if (fileDir) {
+        // If the content folder is known, and the file directory starts with it,
+        // replace that root with the fmFolder (preserving subfolders after it).
+        if (page.fmPageFolder?.path) {
+          const contentFolderPath = parseWinPath(page.fmPageFolder.path).replace(/^\/+|\/+$/g, '');
+          if (fileDir.startsWith(contentFolderPath)) {
+            const rel = fileDir.substring(contentFolderPath.length).replace(/^\/+|\/+$/g, '');
+            return rel ? `${fmFolder}/${rel}` : fmFolder;
+          }
+        }
+
+        // Otherwise try to find fmFolder as a directory segment in the fileDir
+        const segments = fileDir.split('/').filter(Boolean);
+        const fmIndex = segments.indexOf(fmFolder);
+        if (fmIndex >= 0) {
+          return segments.slice(fmIndex).join('/');
+        }
+      }
+
+      // Fallback: just use the fmFolder name
+      return fmFolder;
+    };
+
+    // First pass: create all folder nodes (ensure nodes exist even if a page lacks fmFilePath)
+    for (const page of pages) {
+      if (!page.fmFolder) {
+        continue;
+      }
+
+      const normalizedPath = computeNormalizedFolderPath(page).replace(/\\/g, '/').replace(/^\/+|\/+$/g, '');
+      if (!normalizedPath) {
+        continue;
+      }
+
+      const parts = normalizedPath.split('/').filter(part => part.length > 0);
+
+      let currentPath = '';
+      let currentNode = root;
+
+      for (const part of parts) {
+        const fullPath = currentPath ? `${currentPath}/${part}` : part;
+
+        if (!folderMap.has(fullPath)) {
+          const newNode: FolderNode = {
+            name: part,
+            path: fullPath,
+            children: [],
+            pages: []
+          };
+          folderMap.set(fullPath, newNode);
+          currentNode.children.push(newNode);
+        }
+
+        const nextNode = folderMap.get(fullPath);
+        if (nextNode) {
+          currentNode = nextNode;
+        }
+        currentPath = fullPath;
+      }
+    }
+
+    // Second pass: assign pages to their exact folder node (including subfolders)
+    for (const page of pages) {
+      if (!page.fmFolder) {
+        root.pages.push(page);
+        continue;
+      }
+
+      const normalizedPath = computeNormalizedFolderPath(page).replace(/\\/g, '/').replace(/^\/+|\/+$/g, '');
+      const folderNode = normalizedPath ? folderMap.get(normalizedPath) : folderMap.get(page.fmFolder.replace(/\\/g, '/').replace(/^\/+|\/+$/g, ''));
+      if (folderNode) {
+        folderNode.pages.push(page);
+      } else {
+        // If folder not found, add to root as fallback
+        root.pages.push(page);
+      }
+    }
+
+    return root;
+  }, [pages]);
+
+  const renderFolderNode = (node: FolderNode, depth = 0): React.ReactNode => {
+    const hasContent = node.pages.length > 0 || node.children.length > 0;
+
+    if (!hasContent) {
+      return null;
+    }
+
+    const isRoot = depth === 0;
+    const paddingLeft = depth * 20;
+
+    if (isRoot) {
+      // For root node, render children and pages directly
+      return (
+        <div className='space-y-4'>
+          {/* Root level folders */}
+          {node.children.map(child => renderFolderNode(child, depth + 1))}
+
+          {/* Root level pages */}
+          {node.pages.length > 0 && (
+            <div>
+              <h3 className="text-lg font-medium mb-3 text-[var(--vscode-editor-foreground)]">
+                Root Files
+              </h3>
+              <ul className="space-y-2">
+                {node.pages.map((page, idx) => (
+                  <li key={`${page.slug}-${idx}`}>
+                    <StructureItem {...page} />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div key={node.path} className="mb-4">
+        <Disclosure defaultOpen={depth <= 1}>
+          {({ open }) => (
+            <>
+              <div 
+                className="flex items-center justify-between w-full group"
+                onContextMenu={(e) => handleContextMenu(e, node.path)}
+                data-webview-item="folder"
+                data-webview-item-element="name"
+                data-folder-path={node.path}
+              >
+                <Disclosure.Button
+                  className="flex items-center flex-1 text-left"
+                  style={{ paddingLeft: `${paddingLeft}px` }}
+                >
+                  <ChevronRightIcon
+                    className={`w-4 h-4 mr-2 transform transition-transform ${open ? 'rotate-90' : ''
+                      }`}
+                  />
+                  <FolderIcon className="w-4 h-4 mr-2 text-[var(--vscode-symbolIcon-folderForeground)]" />
+                  <span className="font-medium text-[var(--vscode-editor-foreground)]">
+                    {node.name}
+                    {node.pages.length > 0 && (
+                      <span className="ml-2 text-sm text-[var(--vscode-descriptionForeground)]">
+                        ({node.pages.length} {node.pages.length === 1 ? 'file' : 'files'})
+                      </span>
+                    )}
+                  </span>
+                </Disclosure.Button>
+                
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    createContentInFolder(node.path, node.pages);
+                  }}
+                  className="opacity-0 group-hover:opacity-100 p-1 ml-2 mr-2 rounded hover:bg-[var(--vscode-list-hoverBackground)] transition-opacity"
+                  title="Create content in this folder"
+                >
+                  <PlusIcon className="w-4 h-4 text-[var(--vscode-editor-foreground)]" />
+                </button>
+              </div>
+
+              <Disclosure.Panel className="mt-2">
+                {/* Child folders */}
+                {node.children.map(child => renderFolderNode(child, depth + 1))}
+
+                {/* Pages in this folder */}
+                {node.pages.length > 0 && (
+                  <ul className="space-y-1 mb-3">
+                    {node.pages.map((page, idx) => (
+                      <li key={`${page.slug}-${idx}`} style={{ paddingLeft: `${paddingLeft + 20}px` }}>
+                        <StructureItem {...page} />
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </Disclosure.Panel>
+            </>
+          )}
+        </Disclosure>
+      </div>
+    );
+  };
+
+  return (
+    <div className="structure-view">
+      {renderFolderNode(folderTree)}
+      
+      {/* Custom Context Menu */}
+      {contextMenu.visible && (
+        <div
+          className="fixed bg-[var(--vscode-menu-background)] border border-[var(--vscode-menu-border)] rounded shadow-lg py-1 z-50"
+          style={{
+            left: `${contextMenu.x}px`,
+            top: `${contextMenu.y}px`,
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            className="w-full px-3 py-2 text-left text-[var(--vscode-menu-foreground)] hover:bg-[var(--vscode-menu-selectionBackground)] hover:text-[var(--vscode-menu-selectionForeground)] flex items-center space-x-2"
+            onClick={handleCreateContent}
+          >
+            <PlusIcon className="w-4 h-4" />
+            <span>Create Content in Folder</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

src/dashboardWebView/components/Header/Pagination.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import usePagination from '../../hooks/usePagination';
-import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
+import { MediaTotalSelector, PageAtom, SettingsAtom, ViewSelector } from '../../state';
 import { PaginationButton } from './PaginationButton';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DashboardViewType } from '../../models';
 
 export interface IPaginationProps {
   totalPages?: number;
@@ -17,6 +18,7 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
   const [page, setPage] = useRecoilState(PageAtom);
   const totalMedia = useRecoilValue(MediaTotalSelector);
   const settings = useRecoilValue(SettingsAtom);
+  const view = useRecoilValue(ViewSelector);
   const { pageSetNr, totalPagesNr } = usePagination(
     settings?.dashboardState.contents.pagination,
     totalPages,
@@ -33,17 +35,17 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
       if (i >= 0 && i <= totalPagesNr) {
         buttons.push(
           <button
-          key={i}
-          disabled={i === page}
-          onClick={() => {
-            setPage(i);
-          }}
-          className={`max-h-8 rounded ${page === i
-            ? `px-2 bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]`
-            : `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}`}
-        >
-          {i + 1}
-        </button>
+            key={i}
+            disabled={i === page}
+            onClick={() => {
+              setPage(i);
+            }}
+            className={`max-h-8 rounded ${page === i
+              ? `px-2 bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]`
+              : `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}`}
+          >
+            {i + 1}
+          </button>
         );
       }
     }
@@ -58,6 +60,10 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
     setPage(0);
   }, []);
 
+  if (view === DashboardViewType.Structure) {
+    return null;
+  }
+
   return (
     <div className="flex justify-between items-center sm:justify-end space-x-2 text-sm">
       <PaginationButton

src/dashboardWebView/components/Header/ViewSwitch.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { ViewAtom, SettingsSelector } from '../../state';
-import { Bars4Icon, Squares2X2Icon } from '@heroicons/react/24/solid';
+import { Bars4Icon, Squares2X2Icon, FolderIcon } from '@heroicons/react/24/solid';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { DashboardViewType } from '../../models';
@@ -16,9 +16,7 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
   const [view, setView] = useRecoilState(ViewAtom);
   const settings = useRecoilValue(SettingsSelector);
 
-  const toggleView = () => {
-    const newView =
-      view === DashboardViewType.Grid ? DashboardViewType.List : DashboardViewType.Grid;
+  const handleViewChange = (newView: DashboardViewType) => {
     setView(newView);
     Messenger.send(DashboardMessage.setPageViewType, newView);
   };
@@ -36,7 +34,7 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
           }`}
         title={l10n.t(LocalizationKey.dashboardHeaderViewSwitchToGrid)}
         type={`button`}
-        onClick={toggleView}
+        onClick={() => handleViewChange(DashboardViewType.Grid)}
       >
         <Squares2X2Icon className={`w-4 h-4`} />
         <span className={`sr-only`}>
@@ -44,17 +42,29 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
         </span>
       </button>
       <button
-        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)]'
+        className={`flex items-center px-2 py-1 ${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`}
-        onClick={toggleView}
+        onClick={() => handleViewChange(DashboardViewType.List)}
       >
         <Bars4Icon className={`w-4 h-4`} />
         <span className={`sr-only`}>
           {l10n.t(LocalizationKey.dashboardHeaderViewSwitchToList)}
         </span>
       </button>
+      <button
+        className={`flex items-center px-2 py-1 rounded-r-sm ${view === DashboardViewType.Structure ? `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.dashboardHeaderViewSwitchToStructure)}
+        type={`button`}
+        onClick={() => handleViewChange(DashboardViewType.Structure)}
+      >
+        <FolderIcon className={`w-4 h-4`} />
+        <span className={`sr-only`}>
+          {l10n.t(LocalizationKey.dashboardHeaderViewSwitchToStructure)}
+        </span>
+      </button>
     </div>
   );
 };

src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx

@@ -3,6 +3,7 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import { Choice, SnippetField, SnippetInfoField } from '../../../models';
 import { useEffect } from 'react';
 import { TextField } from '../Common/TextField';
+import { NumberField } from '../Common/NumberField';
 
 export interface ISnippetInputFieldProps {
   field: SnippetField;
@@ -78,6 +79,17 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
     );
   }
 
+  if (field.type === 'number') {
+    return (
+      <NumberField
+        name={field.name}
+        value={field.value as string || ''}
+        description={field.description}
+        onChange={(e) => onValueChange(field, e)}
+      />
+    );
+  }
+
   return (
     <TextField
       name={field.name}

src/dashboardWebView/components/SnippetsView/Snippets.tsx

@@ -21,9 +21,7 @@ import { DEFAULT_DASHBOARD_FEATURE_FLAGS } from '../../../constants/DefaultFeatu
 
 export interface ISnippetsProps { }
 
-export const Snippets: React.FunctionComponent<ISnippetsProps> = (
-  _: React.PropsWithChildren<ISnippetsProps>
-) => {
+export const Snippets: React.FunctionComponent<ISnippetsProps> = () => {
   const settings = useRecoilValue(SettingsSelector);
   const viewData = useRecoilValue(ViewDataSelector);
   const mode = useRecoilValue(ModeAtom);

src/dashboardWebView/models/DashboardViewType.ts

@@ -1,4 +1,5 @@
 export enum DashboardViewType {
   Grid = 1,
-  List
+  List,
+  Structure
 }

src/dashboardWebView/models/Page.ts

@@ -1,4 +1,4 @@
-import { I18nConfig } from '../../models';
+import { ContentFolder, I18nConfig } from '../../models';
 
 export interface Page {
   // Properties for caching
@@ -20,15 +20,16 @@ export interface Page {
   fmCategories: string[];
   fmContentType: string;
   fmDateFormat: string | undefined;
+  fmPageFolder: ContentFolder | undefined;
 
   // i18n fields
   fmDefaultLocale?: boolean;
   fmLocale?: I18nConfig;
-  fmTranslations?: { 
+  fmTranslations?: {
     [locale: string]: {
       locale: I18nConfig;
       path: string;
-    }
+    };
   };
 
   title: string;

src/helpers/ArticleHelper.ts

@@ -807,7 +807,8 @@ export class ArticleHelper {
       const elms: Parent[] | Link[] = this.getAllElms(mdTree);
 
       const headings = elms.filter((node) => node.type === 'heading');
-      const paragraphs = elms.filter((node) => node.type === 'paragraph').length;
+      const paragraphNodes = elms.filter((node) => node.type === 'paragraph');
+      const paragraphs = paragraphNodes.length;
       const images = elms.filter((node) => node.type === 'image').length;
       const links: string[] = elms
         .filter((node) => node.type === 'link')
@@ -836,6 +837,21 @@ export class ArticleHelper {
         }
       }
 
+      // Extract first paragraph text for SEO keyword checking
+      let firstParagraph = '';
+      if (paragraphNodes.length > 0) {
+        const firstParagraphNode = paragraphNodes[0];
+        const extractTextFromNode = (node: any): string => {
+          if (node.type === 'text') {
+            return node.value || '';
+          } else if (node.children && Array.isArray(node.children)) {
+            return node.children.map(extractTextFromNode).join('');
+          }
+          return '';
+        };
+        firstParagraph = extractTextFromNode(firstParagraphNode);
+      }
+
       const wordCount = this.wordCount(0, mdTree);
 
       return {
@@ -846,7 +862,8 @@ export class ArticleHelper {
         internalLinks,
         externalLinks: externalLinks.length,
         wordCount,
-        content: article.content
+        content: article.content,
+        firstParagraph
       };
     }
 

src/helpers/ContentType.ts

@@ -55,6 +55,14 @@ export class ContentType {
       commands.registerCommand(COMMAND_NAME.createByContentType, ContentType.createContent)
     );
 
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.createContentInFolder, ContentType.createContentInFolder)
+    );
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.structureCreateContentInFolder, ContentType.structureCreateContentInFolder)
+    );
+
     subscriptions.push(
       commands.registerCommand(COMMAND_NAME.generateContentType, ContentType.generate)
     );
@@ -144,6 +152,67 @@ export class ContentType {
     }
   }
 
+  /**
+   * Create content in a specific folder based on content types
+   * @param folderData - Object containing folder path information
+   * @returns
+   */
+  public static async createContentInFolder(folderData: { folderPath: string }) {
+    if (!folderData || !folderData.folderPath) {
+      return;
+    }
+
+    const contentTypes = ContentType.getAll();
+    let folders = await Folders.get();
+    folders = folders.filter((f) => !f.disableCreation);
+    
+    // Find the folder that matches the provided path
+    const folder = folders.find((f) => {
+      const folderPath = Folders.getFolderPath(Uri.file(f.path));
+      // Check if the folderData.folderPath is within this content folder
+      return folderData.folderPath.includes(folderPath || '');
+    });
+
+    if (!folder) {
+      return;
+    }
+
+    const selectedContentType = await Questions.SelectContentType(folder.contentTypes || []);
+    if (!selectedContentType) {
+      return;
+    }
+
+    if (contentTypes && folder) {
+      const contentType = contentTypes.find((ct) => ct.name === selectedContentType);
+      if (contentType) {
+        // Use the specific folder path provided instead of the base folder path
+        ContentType.create(contentType, folderData.folderPath);
+      }
+    }
+  }
+
+  /**
+   * Create content in a specific folder from Structure view context menu
+   * @param webviewContext - The webview context data containing folder path
+   */
+  public static async structureCreateContentInFolder(webviewContext?: any) {
+    let folderPath: string | undefined;
+    
+    // VS Code webview context menu passes the element's data attributes
+    // The data-folder-path attribute will be available in the context
+    if (webviewContext) {
+      folderPath = webviewContext.folderPath || webviewContext['folder-path'];
+    }
+    
+    if (!folderPath) {
+      Notifications.warning('Unable to determine folder path for content creation.');
+      return;
+    }
+
+    // Reuse the existing createContentInFolder logic
+    await ContentType.createContentInFolder({ folderPath });
+  }
+
   /**
    * Retrieve all content types
    * @returns

src/listeners/dashboard/PagesListener.ts

@@ -45,6 +45,9 @@ export class PagesListener extends BaseListener {
       case DashboardMessage.createByTemplate:
         await commands.executeCommand(COMMAND_NAME.createByTemplate);
         break;
+      case DashboardMessage.createContentInFolder:
+        await commands.executeCommand(COMMAND_NAME.createContentInFolder, msg.payload);
+        break;
       case DashboardMessage.refreshPages:
         this.getPagesData(true);
         break;

src/localization/localization.enum.ts

@@ -727,6 +727,10 @@ export enum LocalizationKey {
    * Change to list
    */
   dashboardHeaderViewSwitchToList = 'dashboard.header.viewSwitch.toList',
+  /**
+   * Change to structure
+   */
+  dashboardHeaderViewSwitchToStructure = 'dashboard.header.viewSwitch.toStructure',
   /**
    * Support Front Matter
    */
@@ -1108,7 +1112,7 @@ export enum LocalizationKey {
    */
   dashboardStepsStepsToGetStartedGitName = 'dashboard.steps.stepsToGetStarted.git.name',
   /**
-   * Enable Git synchronization to eaily sync your changes with your repository.
+   * Enable Git synchronization to easily sync your changes with your repository.
    */
   dashboardStepsStepsToGetStartedGitDescription = 'dashboard.steps.stepsToGetStarted.git.description',
   /**
@@ -1632,6 +1636,10 @@ export enum LocalizationKey {
    * Content
    */
   panelSeoKeywordInfoValidInfoContent = 'panel.seoKeywordInfo.validInfo.content',
+  /**
+   * First paragraph
+   */
+  panelSeoKeywordInfoValidInfoFirstParagraph = 'panel.seoKeywordInfo.validInfo.firstParagraph',
   /**
    * Recommended frequency: 0.75% - 1.5%
    */

src/panelWebView/components/ArticleDetails.tsx

@@ -11,6 +11,7 @@ export interface IArticleDetailsProps {
     internalLinks: number;
     externalLinks: number;
     images: number;
+    firstParagraph?: string;
   };
 }
 

src/panelWebView/components/Fields/DateTimeField.tsx

@@ -40,11 +40,13 @@ export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({
   const onDateChange = React.useCallback((date: Date) => {
     setDateValue(date);
     if (format) {
+      // Always use DateHelper.formatInTimezone when a format is provided
       onChange(DateHelper.formatInTimezone(date, format, timezone) || "");
     } else {
+      // Only fallback to ISO string if no format is provided
       onChange(date.toISOString());
     }
-  }, [format, onChange]);
+  }, [format, timezone, onChange]);
 
   const showRequiredState = useMemo(() => {
     return required && !dateValue;

src/panelWebView/components/SeoKeywordInfo.tsx

@@ -16,6 +16,7 @@ export interface ISeoKeywordInfoProps {
   content: string;
   wordCount?: number;
   headings?: string[];
+  firstParagraph?: string;
 }
 
 const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
@@ -26,7 +27,8 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
   slug,
   content,
   wordCount,
-  headings
+  headings,
+  firstParagraph
 }: React.PropsWithChildren<ISeoKeywordInfoProps>) => {
 
   const density = () => {
@@ -90,9 +92,10 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
         (slug.toLowerCase().includes(keyword.toLowerCase()) ||
           slug.toLowerCase().includes(keyword.replace(/ /g, '-').toLowerCase())),
       content: !!content && content.toLowerCase().includes(keyword.toLowerCase()),
-      heading: checkHeadings()
+      heading: checkHeadings(),
+      firstParagraph: !!firstParagraph && firstParagraph.toLowerCase().includes(keyword.toLowerCase())
     };
-  }, [title, description, slug, content, headings, wordCount]);
+  }, [title, description, slug, content, headings, wordCount, firstParagraph]);
 
   const tooltipContent = React.useMemo(() => {
     return (
@@ -102,7 +105,8 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
         <span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.description} /> {localize(LocalizationKey.commonDescription)}</span><br />
         <span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.slug} /> {localize(LocalizationKey.commonSlug)}</span><br />
         <span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.content} /> {localize(LocalizationKey.panelSeoKeywordInfoValidInfoContent)}</span><br />
-        <span className='inline-flex items-center gap-1'><ValidInfo isValid={!!checks.heading} /> {localize(LocalizationKey.panelSeoKeywordInfoValidInfoLabel)}</span>
+        <span className='inline-flex items-center gap-1'><ValidInfo isValid={!!checks.heading} /> {localize(LocalizationKey.panelSeoKeywordInfoValidInfoLabel)}</span><br />
+        <span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.firstParagraph} /> {localize(LocalizationKey.panelSeoKeywordInfoValidInfoFirstParagraph)}</span>
       </>
     )
   }, [checks]);

src/panelWebView/components/SeoKeywords.tsx

@@ -14,6 +14,7 @@ export interface ISeoKeywordsProps {
   content: string;
   headings?: string[];
   wordCount?: number;
+  firstParagraph?: string;
 }
 
 const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({

src/panelWebView/components/SeoStatus.tsx

@@ -96,6 +96,7 @@ const SeoStatus: React.FunctionComponent<ISeoStatusProps> = ({
             headings={metadata?.articleDetails?.headingsText}
             wordCount={metadata?.articleDetails?.wordCount}
             content={metadata?.articleDetails?.content}
+            firstParagraph={metadata?.articleDetails?.firstParagraph}
           />
 
           <FieldBoundary fieldName={`Keywords`}>

src/services/PagesParser.ts

@@ -219,6 +219,7 @@ export class PagesParser {
       const isDefaultLanguage = await i18n.isDefaultLanguage(filePath);
       const locale = await i18n.getLocale(filePath);
       const translations = await i18n.getTranslations(filePath);
+      const pageFolder = await Folders.getPageFolderByFilePath(filePath);
 
       const page: Page = {
         ...article.data,
@@ -241,6 +242,7 @@ export class PagesParser {
         fmContentType: contentType.name || DEFAULT_CONTENT_TYPE_NAME,
         fmBody: article?.content || '',
         fmDateFormat: dateFormat,
+        fmPageFolder: pageFolder,
         // i18n properties
         fmDefaultLocale: isDefaultLanguage,
         fmLocale: locale,