#599: Add a placeholder when the base panel view is empty

CHANGELOG.md

@@ -16,6 +16,7 @@
 - [#588](https://github.com/estruyf/vscode-front-matter/issues/588): Added extensibility support to override card fields
 - [#591](https://github.com/estruyf/vscode-front-matter/issues/591): Support for date format in the `datetime` field
 - [#593](https://github.com/estruyf/vscode-front-matter/issues/593): Add support for date formatting in the preview path
+- [#599](https://github.com/estruyf/vscode-front-matter/issues/599): Add a placeholder when the base panel view is empty
 
 ### ⚡️ Optimizations
 

src/panelWebView/components/BaseView.tsx

@@ -55,6 +55,21 @@ const BaseView: React.FunctionComponent<IBaseViewProps> = ({
     return Object.values(FEATURE_FLAG.panel).filter(v => v !== FEATURE_FLAG.panel.globalSettings)
   }, [FEATURE_FLAG.panel]);
 
+  const isSomethingShown = useMemo(() => {
+    const panelModeValues = (mode?.features || []).filter(v => v.startsWith('panel.'));
+
+    if (panelModeValues.length === 0) {
+      return true;
+    }
+
+    if (panelModeValues.includes(FEATURE_FLAG.panel.globalSettings) ||
+      panelModeValues.includes(FEATURE_FLAG.panel.actions) ||
+      panelModeValues.includes(FEATURE_FLAG.panel.recentlyModified) ||
+      panelModeValues.includes(FEATURE_FLAG.panel.otherActions)) {
+      return true;
+    }
+  }, [mode?.features]);
+
   return (
     <div className="frontmatter">
       <div className={`ext_actions`}>
@@ -103,6 +118,14 @@ const BaseView: React.FunctionComponent<IBaseViewProps> = ({
         </FeatureFlag>
       </div>
 
+      {
+        !isSomethingShown && (
+          <div className={`base__empty`}>
+            Open a file to see more actions
+          </div>
+        )
+      }
+
       <SponsorMsg isBacker={settings?.isBacker} />
     </div>
   );

src/panelWebView/styles.css

@@ -1098,3 +1098,17 @@ vscode-divider {
     }
   }
 }
+
+/* Empty base view */
+.base__empty {
+  display: flex;
+  color: var(--vscode-foreground);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 2em;
+  opacity: 0.8;
+  text-align: center;
+  padding: 1rem 1.25rem;
+}