feat: close button hides full UI shell

Author: b

src/App.vue

@@ -1,29 +1,39 @@
 <!-- src/App.vue -->
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import CookieBanner from '@/components/CookieBanner.vue';
 import CircuitBackground from '@/components/CircuitBackground.vue';
 import PromptExecutionLogo from '@/components/PromptExecutionLogo.vue';
 import Win95TabContainer from '@/components/Win95TabContainer.vue';
 import { useMainStore } from '@/store/mainStore';
 
 const mainStore = useMainStore();
+const showUiShell = ref(true);
+
+const handleHideUiShell = () => {
+  showUiShell.value = false;
+};
 
 // Example of how you might control the visibility of the banner
 // This is just a placeholder logic, adjust according to your needs
 onMounted(() => {
   // Logic to determine if the banner should be shown
   // For example, check if the user has already accepted cookies
   // showBanner.value = ...;
+  window.addEventListener('pe-hide-ui-shell', handleHideUiShell);
 });
 import TheFooter from './components/TheFooter.vue';
 
+onUnmounted(() => {
+  window.removeEventListener('pe-hide-ui-shell', handleHideUiShell);
+});
+
 </script>
 
 <template>
   <div class="app-shell">
     <CircuitBackground />
-    <div class="app-content">
+    <div v-if="showUiShell" class="app-content">
       <div>
         <PromptExecutionLogo />
       </div>

src/components/Win95TabContainer.vue

@@ -30,6 +30,11 @@ const disableComicEngine = () => {
   localStorage.setItem(COMIC_FLAG_KEY, 'false');
 };
 
+const closeMenu = () => {
+  disableComicEngine();
+  window.dispatchEvent(new CustomEvent('pe-hide-ui-shell'));
+};
+
 onMounted(() => {
   showComicEngine.value = localStorage.getItem(COMIC_FLAG_KEY) === 'true';
   activeTab.value = showComicEngine.value ? 'comic' : 'archive';
@@ -61,7 +66,7 @@ onUnmounted(() => {
       <div class="title-bar-controls">
         <button aria-label="Minimize"></button>
         <button aria-label="Maximize"></button>
-        <button aria-label="Close" @click="disableComicEngine"></button>
+        <button aria-label="Close" @click="closeMenu"></button>
       </div>
     </div>