Merge branch 'copilot/fix-937' into beta

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",

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": "评价",

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,217 @@
+import { Disclosure } from '@headlessui/react';
+import { ChevronRightIcon, FolderIcon } from '@heroicons/react/24/solid';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { Page } from '../../models';
+import { StructureItem } from './StructureItem';
+import { parseWinPath } from '../../../helpers/parseWinPath';
+
+export interface IStructureViewProps {
+  pages: Page[];
+}
+
+interface FolderNode {
+  name: string;
+  path: string;
+  children: FolderNode[];
+  pages: Page[];
+}
+
+export const StructureView: React.FunctionComponent<IStructureViewProps> = ({
+  pages
+}: React.PropsWithChildren<IStructureViewProps>) => {
+  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 }) => (
+            <>
+              <Disclosure.Button
+                className="flex items-center w-full 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>
+
+              <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)}
+    </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/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/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
    */

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,