Add an easy to access/obvious button to hide history panel

Author: ahmedhamidawan

client/src/components/History/CurrentHistory/HistoryNavigation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faExchangeAlt, faPlus, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { faChevronRight, faExchangeAlt, faPlus, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
@@ -10,6 +10,7 @@ import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 
+import GButton from "@/components/BaseComponents/GButton.vue";
 import HistoryOptions from "@/components/History/HistoryOptions.vue";
 import SelectorModal from "@/components/History/Modals/SelectorModal.vue";
 
@@ -22,6 +23,10 @@ const props = withDefaults(defineProps<Props>(), {
     minimal: false,
 });
 
+const emit = defineEmits<{
+    (e: "show", showPanel: boolean): void;
+}>();
+
 const historyStore = useHistoryStore();
 const { histories, changingCurrentHistory } = storeToRefs(historyStore);
 
@@ -45,7 +50,10 @@ function userTitle(title: string) {
         <nav
             :class="{ 'd-flex justify-content-between mx-3 my-2': !props.minimal }"
             aria-label="current history management">
-            <h2 v-if="!props.minimal" class="m-1 h-sm">History</h2>
+            <GButton v-if="!props.minimal" size="small" transparent @click="emit('show', false)">
+                <FontAwesomeIcon fixed-width :icon="faChevronRight" />
+                <span>History</span>
+            </GButton>
 
             <BButtonGroup>
                 <BButton

client/src/components/History/Index.vue

@@ -10,6 +10,10 @@ import CurrentCollection from "@/components/History/CurrentCollection/Collection
 import HistoryNavigation from "@/components/History/CurrentHistory/HistoryNavigation.vue";
 import HistoryPanel from "@/components/History/CurrentHistory/HistoryPanel.vue";
 
+const emit = defineEmits<{
+    (e: "show", showPanel: boolean): void;
+}>();
+
 const userStore = useUserStore();
 const historyStore = useHistoryStore();
 
@@ -37,7 +41,7 @@ function onViewCollection(collection: CollectionEntry, currentOffset?: number) {
             :filterable="true"
             @view-collection="onViewCollection">
             <template v-slot:navigation>
-                <HistoryNavigation :history="currentHistory" />
+                <HistoryNavigation :history="currentHistory" @show="(val) => emit('show', val)" />
             </template>
         </HistoryPanel>
 

client/src/components/Panels/FlexPanel.vue

@@ -83,6 +83,10 @@ const sideClasses = computed(() => ({
     left: props.side === "left",
     right: props.side === "right",
 }));
+
+defineExpose({
+    show,
+});
 </script>
 
 <template>

client/src/entry/analysis/modules/Analysis.vue

@@ -16,13 +16,21 @@ const router = useRouter();
 const showCenter = ref(false);
 const { showPanels } = usePanels();
 
+const historyPanel = ref(null);
+
 const { historyPanelWidth } = storeToRefs(useUserStore());
 
 // methods
 function hideCenter() {
     showCenter.value = false;
 }
 
+function onShow(showPanel) {
+    if (historyPanel.value) {
+        historyPanel.value.show = showPanel;
+    }
+}
+
 function onLoad() {
     showCenter.value = true;
 }
@@ -48,8 +56,8 @@ onUnmounted(() => {
                 <router-view :key="$route.fullPath" class="h-100" />
             </div>
         </div>
-        <FlexPanel v-if="showPanels" side="right" :reactive-width.sync="historyPanelWidth">
-            <HistoryIndex />
+        <FlexPanel v-if="showPanels" ref="historyPanel" side="right" :reactive-width.sync="historyPanelWidth">
+            <HistoryIndex @show="onShow" />
         </FlexPanel>
         <DragAndDropModal />
     </div>