Restructuring

src/commands/Dashboard.ts

@@ -177,7 +177,7 @@ export class Dashboard {
                 const page: Page = {
                   ...article.data,
                   // FrontMatter properties
-                  fmGroup: folder.title,
+                  fmFolder: folder.title,
                   fmModified: file.mtime,
                   fmFilePath: file.filePath,
                   fmFileName: file.fileName,

src/models/index.ts

@@ -1,3 +1,4 @@
 export * from './ContentFolder';
 export * from './PanelSettings';
 export * from './TaxonomyType';
+export * from './VersionInfo';

src/pagesView/components/Dashboard.tsx

@@ -18,14 +18,15 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome
   const { loading, pages, settings } = useMessages();
   const [ tab, setTab ] = React.useState(Tab.All);
   const [ sorting, setSorting ] = React.useState(SortOption.LastModified);
-  const [ group, setGroup ] = React.useState<string | null>(null);
+  const [ folder, setFolder ] = React.useState<string | null>(null);
   const [ search, setSearch ] = React.useState<string | null>(null);
   const [ tag, setTag ] = React.useState<string | null>(null);
   const [ category, setCategory ] = React.useState<string | null>(null);
-  const { pageItems } = usePages(pages, tab, sorting, group, search, tag, category);
+  const [ group, setGroup ] = React.useState<string | null>(null);
+  const { pageItems } = usePages(pages, tab, sorting, folder, search, tag, category);
   useDarkMode();
 
-  const pageGroups = [...new Set(pages.map(page => page.fmGroup))];
+  const pageFolders = [...new Set(pages.map(page => page.fmFolder))];
 
   if (!settings) {
     return <Spinner />;
@@ -44,16 +45,18 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome
       <div className="flex flex-col h-full overflow-auto">
         <Header currentTab={tab}
                 currentSorting={sorting}
-                groups={pageGroups}
-                crntGroup={group}
+                folders={pageFolders}
+                crntFolder={folder}
                 totalPages={pageItems.length}
                 crntTag={tag}
                 crntCategory={category}
+                crntGroup={group}
                 switchTab={(tabId: Tab) => setTab(tabId)}
                 switchSorting={(sortId: SortOption) => setSorting(sortId)}
-                switchGroup={(groupId: string | null) => setGroup(groupId)}
+                switchFolder={(folderName: string | null) => setFolder(folderName)}
                 switchTag={(tagId: string | null) => setTag(tagId)}
                 switchCategory={(categoryId: string | null) => setCategory(categoryId)}
+                switchGroup={(groupName: string | null) => setGroup(groupName)}
                 onSearch={(value: string | null) => setSearch(value)}
                 settings={settings}
                  />

src/pagesView/components/Grouping.tsx

@@ -1,46 +0,0 @@
-import { Menu, Transition } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/solid';
-import * as React from 'react';
-import { Fragment } from 'react';
-import { MenuButton } from './MenuButton';
-import { MenuItem } from './MenuItem';
-import { MenuItems } from './MenuItems';
-
-export interface IGroupingProps {
-  groups: string[];
-  crntGroup: string | null;
-  switchGroup: (group: string | null) => void;
-}
-
-const DEFAULT_TYPE = "All types";
-
-export const Grouping: React.FunctionComponent<IGroupingProps> = ({groups, crntGroup, switchGroup}: React.PropsWithChildren<IGroupingProps>) => {
-  if (groups.length <= 1) {
-    return null;
-  }
-  
-  return (
-    <div className="flex items-center ml-6">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={`Showing`} title={crntGroup || DEFAULT_TYPE} />
-
-        <MenuItems>
-          <MenuItem 
-            title={DEFAULT_TYPE}
-            value={null}
-            isCurrent={!crntGroup}
-            onClick={switchGroup} />
-
-          {groups.map((option) => (
-            <MenuItem 
-              key={option}
-              title={option}
-              value={option}
-              isCurrent={option === crntGroup}
-              onClick={switchGroup} />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
-  );
-};

src/pagesView/components/Header/Filter.tsx

@@ -1,8 +1,6 @@
 import { Menu } from '@headlessui/react';
 import * as React from 'react';
-import { MenuButton } from './MenuButton';
-import { MenuItem } from './MenuItem';
-import { MenuItems } from './MenuItems';
+import { MenuButton, MenuItem, MenuItems } from '../Menu';
 
 export interface IFilterProps {
   label: string;

src/pagesView/components/Header/Folders.tsx

@@ -0,0 +1,42 @@
+import { Menu, Transition } from '@headlessui/react';
+import * as React from 'react';
+import { MenuButton, MenuItem, MenuItems } from '../Menu';
+
+export interface IFoldersProps {
+  folders: string[];
+  crntFolder: string | null;
+  switchFolder: (group: string | null) => void;
+}
+
+const DEFAULT_TYPE = "All types";
+
+export const Folders: React.FunctionComponent<IFoldersProps> = ({folders, crntFolder, switchFolder}: React.PropsWithChildren<IFoldersProps>) => {
+  if (folders.length <= 1) {
+    return null;
+  }
+  
+  return (
+    <div className="flex items-center ml-6">
+      <Menu as="div" className="relative z-10 inline-block text-left">
+        <MenuButton label={`Showing`} title={crntFolder || DEFAULT_TYPE} />
+
+        <MenuItems>
+          <MenuItem 
+            title={DEFAULT_TYPE}
+            value={null}
+            isCurrent={!crntFolder}
+            onClick={switchFolder} />
+
+          {folders.map((option) => (
+            <MenuItem 
+              key={option}
+              title={option}
+              value={option}
+              isCurrent={option === crntFolder}
+              onClick={switchFolder} />
+          ))}
+        </MenuItems>
+      </Menu>
+    </div>
+  );
+};

src/pagesView/components/Header/Grouping.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export interface IGroupingProps {
+  crntGroup: string | null;
+  switchGroup: (group: string | null) => void;
+}
+
+export const Grouping: React.FunctionComponent<IGroupingProps> = (props: React.PropsWithChildren<IGroupingProps>) => {
+  return (
+    <>
+
+    </>
+  );
+};

src/pagesView/components/Header/Header.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import { Tab } from '../constants/Tab';
-import { SortOption } from '../constants/SortOption';
-import { Navigation } from './Navigation';
 import { Sorting } from './Sorting';
-import { Grouping } from './Grouping';
-import { MessageHelper } from '../../helpers/MessageHelper';
-import { DashboardMessage } from '../DashboardMessage';
 import { Searchbox } from './Searchbox';
-import { Settings } from '../models/Settings';
-import { Startup } from './Startup';
-import { Button } from './Button';
 import { Filter } from './Filter';
+import { Folders } from './Folders';
+import { Settings } from '../../models';
+import { Tab } from '../../constants/Tab';
+import { SortOption } from '../../constants/SortOption';
+import { MessageHelper } from '../../../helpers/MessageHelper';
+import { DashboardMessage } from '../../DashboardMessage';
+import { Startup } from '../Startup';
+import { Button } from '../Button';
+import { Navigation } from '../Navigation';
+import { Grouping } from '.';
 
 export interface IHeaderProps {
   settings: Settings;
@@ -25,9 +26,9 @@ export interface IHeaderProps {
   switchSorting: (sortId: SortOption) => void;
 
   // Grouping
-  groups: string[];
-  crntGroup: string | null;
-  switchGroup: (group: string | null) => void;
+  folders: string[];
+  crntFolder: string | null;
+  switchFolder: (folderName: string | null) => void;
 
   // Searching
   onSearch: (value: string | null) => void;
@@ -39,9 +40,13 @@ export interface IHeaderProps {
   // Categories
   crntCategory: string | null;
   switchCategory: (category: string | null) => void;
+
+  // Grouping
+  crntGroup: string | null;
+  switchGroup: (groupId: string | null) => void;
 }
 
-export const Header: React.FunctionComponent<IHeaderProps> = ({currentTab, currentSorting, switchSorting, switchTab, totalPages, crntGroup, groups, switchGroup, onSearch, settings, switchTag, crntTag, switchCategory, crntCategory}: React.PropsWithChildren<IHeaderProps>) => {
+export const Header: React.FunctionComponent<IHeaderProps> = ({currentTab, currentSorting, switchSorting, switchTab, totalPages, crntFolder, folders, switchFolder, onSearch, settings, switchTag, crntTag, switchCategory, crntCategory, crntGroup, switchGroup}: React.PropsWithChildren<IHeaderProps>) => {
 
   const createContent = () => {
     MessageHelper.sendMessage(DashboardMessage.createContent);
@@ -62,12 +67,14 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({currentTab, curre
       <div className="px-4 flex items-center border-b border-gray-200 dark:border-whisper-600">
         <Navigation currentTab={currentTab} totalPages={totalPages} switchTab={switchTab} />
 
-        <Grouping crntGroup={crntGroup} groups={groups} switchGroup={switchGroup} />
+        <Folders crntFolder={crntFolder} folders={folders} switchFolder={switchFolder} />
 
         <Filter label={`Tag filter`} activeItem={crntTag} items={settings.tags} onClick={switchTag} />
 
         <Filter label={`Category filter`} activeItem={crntCategory} items={settings.categories} onClick={switchCategory} />
 
+        <Grouping crntGroup={crntGroup} switchGroup={switchGroup} />
+
         <Sorting currentSorting={currentSorting} switchSorting={switchSorting} />
       </div>
     </div>

src/pagesView/components/Header/Searchbox.tsx

@@ -1,6 +1,6 @@
 import { FilterIcon, SearchIcon } from '@heroicons/react/solid';
 import * as React from 'react';
-import { useDebounce } from '../../hooks/useDebounce';
+import { useDebounce } from '../../../hooks/useDebounce';
 
 export interface ISearchboxProps {
   onSearch: (searchText: string) => void;

src/pagesView/components/Header/Sorting.tsx

@@ -1,11 +1,7 @@
-import { Menu, Transition } from '@headlessui/react';
+import { Menu } from '@headlessui/react';
 import * as React from 'react';
-import { SortOption } from '../constants/SortOption';
-import { ChevronDownIcon } from '@heroicons/react/solid';
-import { Fragment } from 'react';
-import { MenuItem } from './MenuItem';
-import { MenuItems } from './MenuItems';
-import { MenuButton } from './MenuButton';
+import { SortOption } from '../../constants/SortOption';
+import { MenuButton, MenuItem, MenuItems } from '../Menu';
 
 export interface ISortingProps {
   currentSorting: SortOption;

src/pagesView/components/Header/index.ts

@@ -0,0 +1,6 @@
+export * from './Filter';
+export * from './Folders';
+export * from './Grouping';
+export * from './Header';
+export * from './Searchbox';
+export * from './Sorting';

src/pagesView/components/Menu/index.ts

@@ -0,0 +1,3 @@
+export * from './MenuButton';
+export * from './MenuItem';
+export * from './MenuItems';

src/pagesView/hooks/usePages.tsx

@@ -13,7 +13,7 @@ const fuseOptions: Fuse.IFuseOptions<Page> = {
   ]
 };
 
-export default function usePages(pages: Page[], tab: Tab, sorting: SortOption, group: string | null, search: string | null, tag: string | null, category: string | null) {
+export default function usePages(pages: Page[], tab: Tab, sorting: SortOption, folder: string | null, search: string | null, tag: string | null, category: string | null) {
   const [ pageItems, setPageItems ] = useState<Page[]>([]);
 
   useEffect(() => {
@@ -45,8 +45,8 @@ export default function usePages(pages: Page[], tab: Tab, sorting: SortOption, g
       pagesSorted = pagesToShow.sort((a, b) => b.fmModified - a.fmModified);
     }
 
-    if (group) {
-      pagesSorted = pagesSorted.filter(page => page.fmGroup === group);
+    if (folder) {
+      pagesSorted = pagesSorted.filter(page => page.fmFolder === folder);
     }
 
     // Filter by tag
@@ -60,7 +60,7 @@ export default function usePages(pages: Page[], tab: Tab, sorting: SortOption, g
     }
 
     setPageItems(pagesSorted);
-  }, [ pages, tab, sorting, group, search, tag, category ]);
+  }, [ pages, tab, sorting, folder, search, tag, category ]);
 
   return {
     pageItems

src/pagesView/models/Page.ts

@@ -1,7 +1,7 @@
 import { Uri } from "vscode";
 
 export interface Page {
-  fmGroup: string;
+  fmFolder: string;
   fmFilePath: string;
   fmFileName: string;
   fmModified: number;

src/pagesView/models/index.ts

@@ -0,0 +1,3 @@
+export * from './Page';
+export * from './Settings';
+export * from './Status';