From d74611e04fac86bdd4708a106e054de7f7abed4e Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Wed, 13 Sep 2023 11:26:50 +0200
Subject: [PATCH] #662 - Always show the `all articles` tab

---
 CHANGELOG.md                                  |  1 +
 .../components/Contents/Item.tsx              | 10 +----
 .../components/Contents/Status.tsx            | 22 +++++++----
 .../components/Header/Navigation.tsx          | 24 ++++++------
 src/dashboardWebView/hooks/usePages.tsx       | 38 ++++++++++---------
 5 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91aa69a4..11c2d188 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 ### 🎨 Enhancements
 
 - [#659](https://github.com/estruyf/vscode-front-matter/issues/659): Implement a filter for the taxonomy dashboard
+- [#662](https://github.com/estruyf/vscode-front-matter/issues/662): Always show the `all articles` tab with the page counter
 
 ### ⚡️ Optimizations
 
diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx
index 599e9a18..d154347e 100644
--- a/src/dashboardWebView/components/Contents/Item.tsx
+++ b/src/dashboardWebView/components/Contents/Item.tsx
@@ -119,18 +119,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     return (
       <li className="relative">
         <div
-          className={`group flex flex-col items-start content-start h-full w-full text-left shadow-md dark:shadow-none hover:shadow-xl border rounded ${getColors(
-            'bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 dark:hover:bg-vulcan-100 border-gray-200 dark:border-vulcan-50',
-            'bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] border-[var(--frontmatter-border)]'
-          )
+          className={`group flex flex-col items-start content-start h-full w-full text-left shadow-md dark:shadow-none hover:shadow-xl border rounded bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] border-[var(--frontmatter-border)]
             }`}
         >
           <button
             onClick={openFile}
-            className={`relative h-36 w-full overflow-hidden border-b cursor-pointer ${getColors(
-              'border-gray-100 dark:border-vulcan-100 dark:group-hover:border-vulcan-200',
-              'border-[var(--frontmatter-border)]'
-            )
+            className={`relative h-36 w-full overflow-hidden border-b cursor-pointer border-[var(--frontmatter-border)]
               }`}
           >
             {
diff --git a/src/dashboardWebView/components/Contents/Status.tsx b/src/dashboardWebView/components/Contents/Status.tsx
index 8214921a..659c8c31 100644
--- a/src/dashboardWebView/components/Contents/Status.tsx
+++ b/src/dashboardWebView/components/Contents/Status.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
-import useThemeColors from '../../hooks/useThemeColors';
-import { SettingsAtom } from '../../state';
+import { SettingsAtom, TabInfoAtom } from '../../state';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -13,8 +12,8 @@ export interface IStatusProps {
 export const Status: React.FunctionComponent<IStatusProps> = ({
   draft
 }: React.PropsWithChildren<IStatusProps>) => {
-  const { getColors } = useThemeColors();
   const settings = useRecoilValue(SettingsAtom);
+  const tabInfo = useRecoilValue(TabInfoAtom);
 
   const draftField = useMemo(() => settings?.draftField, [settings]);
 
@@ -32,7 +31,7 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
     if (draftValue) {
       return (
         <span
-          className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs ${getColors(`text-whisper-200 dark:text-vulcan-500 bg-teal-500`, `text-[var(--vscode-badge-foreground)] bg-[var(--vscode-badge-background)]`)}`}
+          className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs text-[var(--vscode-badge-foreground)] bg-[var(--vscode-badge-background)]`}
         >
           {draftValue}
         </span>
@@ -42,17 +41,24 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
     }
   }
 
+  if (tabInfo && Object.keys(tabInfo).length <= 1) {
+    return null;
+  }
+
   return (
     <span
       className={`draft__status
         inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs 
-        ${getColors(`text-whisper-200 dark:text-vulcan-500`, ``)} 
         ${draftValue ?
-          getColors(`bg-red-500`, 'bg-[var(--vscode-statusBarItem-errorBackground)] text-[var(--vscode-statusBarItem-errorForeground)]') :
-          getColors(`bg-teal-500`, 'bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)]')
+          'bg-[var(--vscode-statusBarItem-errorBackground)] text-[var(--vscode-statusBarItem-errorForeground)]' :
+          'bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)]'
         }`}
     >
-      {draftValue ? l10n.t(LocalizationKey.dashboardContentsStatusDraft) : l10n.t(LocalizationKey.dashboardContentsStatusPublished)}
+      {
+        draftValue ?
+          l10n.t(LocalizationKey.dashboardContentsStatusDraft) :
+          l10n.t(LocalizationKey.dashboardContentsStatusPublished)
+      }
     </span>
   );
 };
diff --git a/src/dashboardWebView/components/Header/Navigation.tsx b/src/dashboardWebView/components/Header/Navigation.tsx
index 7d7360d6..2452b122 100644
--- a/src/dashboardWebView/components/Header/Navigation.tsx
+++ b/src/dashboardWebView/components/Header/Navigation.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Tab } from '../../constants/Tab';
-import { AllPagesAtom, SettingsAtom, TabAtom, TabInfoAtom } from '../../state';
+import { SettingsAtom, TabAtom, TabInfoAtom } from '../../state';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -40,24 +40,22 @@ const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
 export const Navigation: React.FunctionComponent<INavigationProps> = ({
 
 }: React.PropsWithChildren<INavigationProps>) => {
-  const pages = useRecoilValue(AllPagesAtom);
   const [crntTab, setCrntTab] = useRecoilState(TabAtom);
   const tabInfo = useRecoilValue(TabInfoAtom);
   const settings = useRecoilValue(SettingsAtom);
 
-  const tabs = [
-    { name: l10n.t(LocalizationKey.dashboardHeaderNavigationAllArticles), id: Tab.All },
-    { name: l10n.t(LocalizationKey.dashboardHeaderNavigationPublished), id: Tab.Published },
-    { name: l10n.t(LocalizationKey.dashboardHeaderNavigationDraft), id: Tab.Draft }
-  ];
+  const tabs = React.useMemo(() => {
+    const crntTabs = [
+      { name: l10n.t(LocalizationKey.dashboardHeaderNavigationAllArticles), id: Tab.All }
+    ];
 
-  const usesDraft = React.useMemo(() => {
-    return pages.some((x) => x.fmDraft);
-  }, [pages]);
+    if (settings?.draftField?.type === 'boolean' && tabInfo && Object.keys(tabInfo).length > 1) {
+      crntTabs.push({ name: l10n.t(LocalizationKey.dashboardHeaderNavigationPublished), id: Tab.Published });
+      crntTabs.push({ name: l10n.t(LocalizationKey.dashboardHeaderNavigationDraft), id: Tab.Draft });
+    }
 
-  if (!usesDraft) {
-    return null;
-  }
+    return crntTabs;
+  }, [settings?.draftField?.type, tabInfo]);
 
   return (
     <nav className="flex-1 -mb-px flex space-x-6 xl:space-x-8" aria-label="Tabs">
diff --git a/src/dashboardWebView/hooks/usePages.tsx b/src/dashboardWebView/hooks/usePages.tsx
index 863038d0..1de7d672 100644
--- a/src/dashboardWebView/hooks/usePages.tsx
+++ b/src/dashboardWebView/hooks/usePages.tsx
@@ -20,7 +20,6 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../DashboardMessage';
 import { EventData } from '@estruyf/vscode/dist/models';
 import { parseWinPath } from '../../helpers/parseWinPath';
-import { format } from 'date-fns';
 
 export default function usePages(pages: Page[]) {
   const [pageItems, setPageItems] = useRecoilState(AllPagesAtom);
@@ -146,25 +145,28 @@ export default function usePages(pages: Page[]) {
         // Draft field is a boolean field
         const draftFieldName = draftField?.name || 'draft';
 
-        const drafts = crntPages.filter(
-          (page) => page[draftFieldName] == true || page[draftFieldName] === 'true'
-        );
-        const published = crntPages.filter(
-          (page) =>
-            page[draftFieldName] == false ||
-            page[draftFieldName] === 'false' ||
-            typeof page[draftFieldName] === 'undefined'
-        );
+        const usesDraft = crntPages.some(x => typeof x[draftFieldName] !== 'undefined');
+        if (usesDraft) {
+          const drafts = crntPages.filter(
+            (page) => page[draftFieldName] == true || page[draftFieldName] === 'true'
+          );
+          const published = crntPages.filter(
+            (page) =>
+              page[draftFieldName] == false ||
+              page[draftFieldName] === 'false' ||
+              typeof page[draftFieldName] === 'undefined'
+          );
 
-        draftTypes[Tab.Draft] = draftField?.invert ? published.length : drafts.length;
-        draftTypes[Tab.Published] = draftField?.invert ? drafts.length : published.length;
+          draftTypes[Tab.Draft] = draftField?.invert ? published.length : drafts.length;
+          draftTypes[Tab.Published] = draftField?.invert ? drafts.length : published.length;
 
-        if (tab === Tab.Published) {
-          crntPages = draftField?.invert ? drafts : published;
-        } else if (tab === Tab.Draft) {
-          crntPages = draftField?.invert ? published : drafts;
-        } else {
-          crntPages = crntPages;
+          if (tab === Tab.Published) {
+            crntPages = draftField?.invert ? drafts : published;
+          } else if (tab === Tab.Draft) {
+            crntPages = draftField?.invert ? published : drafts;
+          } else {
+            crntPages = crntPages;
+          }
         }
       }