From 92a70032b9b3c413bce03c0961a03ca2e3c60106 Mon Sep 17 00:00:00 2001
From: Aditya Agarwal <adityaa803@gmail.com>
Date: Sun, 20 Feb 2022 21:33:51 +0530
Subject: [PATCH] show active parent title in footer

---
 src/lib/Panel/Footer/Footer.module.css | 16 +++++++-
 src/lib/Panel/Footer/Footer.tsx        | 55 ++++++++++++++++++--------
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/src/lib/Panel/Footer/Footer.module.css b/src/lib/Panel/Footer/Footer.module.css
index 524a9c5..97b4369 100644
--- a/src/lib/Panel/Footer/Footer.module.css
+++ b/src/lib/Panel/Footer/Footer.module.css
@@ -1,6 +1,7 @@
 .footer {
   display: flex;
-  gap: 15px;
+  justify-content: space-between;
+  gap: 10px;
   color: #64748b;
   font-size: 0.85rem;
   border-block-start: 0.5px solid #e2e8f0;
@@ -8,6 +9,11 @@
   padding-inline: var(--scp-gutter-space-inline);
 }
 
+.kbdInfo {
+  display: flex;
+  gap: 15px;
+}
+
 .group {
   display: inline-flex;
   align-items: center;
@@ -40,3 +46,11 @@
 .iconReturn {
   transform: rotateX(180deg);
 }
+
+.parentActionTitle {
+  display: block;
+  border: 1px solid #cbd5e1;
+  border-radius: 5px;
+  font-size: 0.7rem;
+  padding: 4px 8px;
+}
diff --git a/src/lib/Panel/Footer/Footer.tsx b/src/lib/Panel/Footer/Footer.tsx
index 9293b88..383c99d 100644
--- a/src/lib/Panel/Footer/Footer.tsx
+++ b/src/lib/Panel/Footer/Footer.tsx
@@ -1,4 +1,6 @@
-import { Component } from 'solid-js';
+import { Component, Show } from 'solid-js';
+import { getActiveParentAction } from '../../actionUtils/actionUtils';
+import { useStore } from '../../StoreContext';
 import styles from './Footer.module.css';
 
 export interface IconArrowProps {
@@ -43,23 +45,44 @@ const IconReturn: Component = () => {
 };
 
 export const PanelFooter: Component = () => {
+  const [state] = useStore();
+
+  function getParentActionTitle() {
+    const { isRoot, activeId } = getActiveParentAction(state.activeParentActionIdList);
+
+    if (isRoot) {
+      return null;
+    }
+
+    const parentAction = state.actions[activeId];
+
+    return parentAction.title;
+  }
+
   return (
-    <div class={styles.footer}>
-      <div class={styles.group}>
-        Navigate with{' '}
-        <kbd class={styles.shortcut}>
-          <IconArrow />
-        </kbd>
-        <kbd class={styles.shortcut}>
-          <IconArrow direction="down" />
-        </kbd>
+    <footer class={styles.footer}>
+      <div class={styles.kbdInfo}>
+        <div class={styles.group}>
+          Navigate with{' '}
+          <kbd class={styles.shortcut}>
+            <IconArrow />
+          </kbd>
+          <kbd class={styles.shortcut}>
+            <IconArrow direction="down" />
+          </kbd>
+        </div>
+        <div class={styles.group}>
+          Select using{' '}
+          <kbd class={`${styles.shortcut} ${styles.runShortcut}`}>
+            <IconReturn />
+          </kbd>
+        </div>
       </div>
-      <div class={styles.group}>
-        Select using{' '}
-        <kbd class={`${styles.shortcut} ${styles.runShortcut}`}>
-          <IconReturn />
-        </kbd>
+      <div>
+        <Show when={getParentActionTitle()}>
+          {(title) => <span class={styles.parentActionTitle}>{title}</span>}
+        </Show>
       </div>
-    </div>
+    </footer>
   );
 };