better .gitignore

Author: brianhorakh

.gitignore

@@ -18,3 +18,4 @@ dist/*
 **/*.pyc
 
 bun.lockb
+*.mjs

src/components/CommandLineInterface.vue

@@ -1,7 +1,29 @@
-<!-- src/components/CommandLineInterface.vue -->
+<script setup lang="ts">
+import VueCommand, { createStdout } from "vue-command";
+import "vue-command/dist/vue-command.css";
+import { useMainStore } from '../store';
+import LoginPanel from './LoginPanel.vue';
+import DebugPanel from './DebugPanel.vue';
+
+const mainStore = useMainStore();
+
+const commands = {
+  "help": () => createStdout("Available commands: hello, login, debug"),
+  "login": () => {
+    mainStore.toggleLogin();
+    return createStdout("Login interface activated.");
+  },
+  "hello": () => createStdout("Hello world! #wip"),
+  "debug": () => {
+    mainStore.toggleDebugPanel();
+    return createStdout("Debug panel activated.");
+  },
+};
+</script>
+
 <template>
   <div class="cli-container">
-  <vue-command :commands="commands" :hide-buttons="true" :show-help="true" :cursor-position="0" :is-fullscreen="true">
+    <vue-command :commands="commands" :hide-buttons="true" :show-help="true" :cursor-position="0" :is-fullscreen="true">
     <template #title>Command Line Interface v0.1 -- type "help" for instructions</template>
     <template #prompt>
       <span class="prompt">
@@ -14,31 +36,12 @@
     <template #help-text>asdfasdf</template>
     <template #invert>true</template>
     <template #font></template>
-
   </vue-command>
+    <LoginPanel v-if="mainStore.showLogin" />
+    <DebugPanel v-if="mainStore.showDebugPanel" />
   </div>
 </template>
 
-<script lang="ts">
-// https://github.com/ndabAP/vue-command
-import VueCommand, { createStdout } from "vue-command";
-import "vue-command/dist/vue-command.css";
-
-export default {
-  components: {
-    VueCommand,
-  },
-
-  data: () => ({
-    commands: {
-      "help": () => createStdout("Available commands: hello, login"),
-      "login": () => createStdout("Login not available (coming soon!)"),
-      "hello": () => createStdout("Hello world! #wip"),
-    },
-  }),
-};
-</script>
-
 <style scoped>
 .cli-container {
   /* Adjust the border-radius as needed */

src/components/CookieBanner.vue

@@ -14,7 +14,6 @@ import useCookies from '../useCookies';
 import { defineComponent, getCurrentInstance } from 'vue';
 import { useMainStore } from '../store';
 
-
 export default defineComponent({
   setup() {
     const instance = getCurrentInstance();

src/components/DebugPanel.vue

@@ -0,0 +1,25 @@
+<!-- src/components/DebugPanel.vue -->
+<template>
+  <div class="debug-panel">
+    <pre>{{ state }}</pre>
+    <button @click="resetCookieConsent">Reset Cookie Consent</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMainStore } from '../store';
+
+const mainStore = useMainStore();
+const state = mainStore.$state;
+
+const resetCookieConsent = () => {
+  mainStore.resetCookieConsent();
+};
+</script>
+
+<style scoped>
+.debug-panel {
+  /* Add your styles for the debug panel here */
+}
+</style>
+

src/components/LoginPanel.vue

@@ -0,0 +1,19 @@
+<!-- src/components/LoginPanel.vue -->
+<template>
+  <div class="login-buttons">
+    <button>Sign in with Google</button>
+    <button>Sign in with Facebook</button>
+    <!-- More buttons as needed -->
+  </div>
+</template>
+
+<script setup lang="ts">
+// Add any script logic if needed
+</script>
+
+<style scoped>
+.login-buttons {
+  /* Add your styles for the login buttons here */
+}
+</style>
+

src/main.ts

@@ -26,3 +26,4 @@ app
   })
 .provide('gtag', app.config.globalProperties.$gtag)
 .mount('#app')
+  

src/store.js src/store.tssrc/store.js renamed to src/store.ts

@@ -5,7 +5,9 @@ export const useMainStore = defineStore('main', {
   state: () => ({
     count: 0,
     // cookieConsent: null // null, 'accepted', or 'rejected'
-    cookieConsent: localStorage.getItem('cookieConsent')
+    cookieConsent: localStorage.getItem('cookieConsent'), 
+    showLogin: false,
+    showDebugPanel: false,
   }),
   actions: {
     increment() {
@@ -14,6 +16,16 @@ export const useMainStore = defineStore('main', {
     setCookieConsent(value) {
       this.cookieConsent = value
       localStorage.setItem('cookieConsent', value)
+    },
+    resetCookieConsent() {
+      this.cookieConsent = null;
+      localStorage.removeItem('cookieConsent');
+    },
+    toggleLogin(show) {
+      this.showLogin = !this.showLogin;
+      },
+    toggleDebugPanel(show) {
+      this.showDebugPanel = !this.showDebugPanel;
     }
   },
   getters: {