Fix vue v for keys

src/components/Extra.vue

@@ -36,8 +36,8 @@
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Message Display -->
     <div id="MessageDiv">
-        <div v-for="mes in useState().successMessages" class='alert alert-success' role='alert'> {{ mes }}</div>
-        <div v-for="error in useState().errorMessages" class='alert alert-danger' role='alert'> {{ error }}</div>
+        <div v-for="(mes, idx) in useState().successMessages" :key="`success-${idx}`" class='alert alert-success' role='alert'> {{ mes }}</div>
+        <div v-for="(error, idx) in useState().errorMessages" :key="`error-${idx}`" class='alert alert-danger' role='alert'> {{ error }}</div>
     </div>
     <!-- --------------------------------------------------------------------------------------------- -->
 
@@ -85,7 +85,9 @@
     <div id="simulation" class="simulation">
         <!-- <div id="restrictedDiv" class="alert alert-danger display--none"></div> -->
         <div id="canvasArea" class="canvasArea">
-            <canvas id="backgroundArea" style="
+            <canvas
+                    id="backgroundArea"
+                    style="
                     position: absolute;
                     left: 0;
                     top: 0;
@@ -133,7 +135,9 @@
             </div>
 
             <div id="Help"></div>
-            <div class="sk-folding-cube loadingIcon" style="
+            <div
+                    class="sk-folding-cube loadingIcon"
+                    style="
                     display: none;
                     position: absolute;
                     right: 50%;
@@ -179,16 +183,18 @@
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
       class="cir-ele-btn"
-      @mousedown="simulatorMobileStore.showElementsPanel = !simulatorMobileStore.showElementsPanel"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem'}"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
+      @mousedown="simulatorMobileStore.showElementsPanel = !simulatorMobileStore.showElementsPanel"
     >
         <i class="fas fa-bezier-curve"></i>
     </v-btn>
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
       class="cir-btn"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem', backgroundColor: selectMultiple ? 'var(--primary)' : 'var(--bg-toggle-btn-primary)'}"
       @mousedown="(e: React.MouseEvent) => {
         if(simulationArea.shiftDown == false) {
             simulationArea.shiftDown = true;
@@ -200,43 +206,41 @@
             e.preventDefault();
         }
       }"
-      :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem', backgroundColor: selectMultiple ? 'var(--primary)' : 'var(--bg-toggle-btn-primary)'}"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
     >
         <i class="fa-solid fa-vector-square"></i>
     </v-btn>
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.isVerilog && simulatorMobileStore.showMobileView"
       class="cir-verilog-btn"
       @mousedown="simulatorMobileStore.showVerilogPanel = !simulatorMobileStore.showVerilogPanel"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.isVerilog && simulatorMobileStore.showMobileView"
     >
         <i class="fa-solid fa-gears"></i>
     </v-btn>
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
       class="cir-btn"
-      @mousedown="copyBtnClick()"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
+      @mousedown="copyBtnClick()"
     >
         <i class="fa-solid fa-copy"></i>
     </v-btn>
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
       class="cir-btn"
-      @mousedown="pasteBtnClick()"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
+      @mousedown="pasteBtnClick()"
     >
         <i class="fa-solid fa-paste"></i>
     </v-btn>
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView"
       class="cir-btn"
-      @mousedown="propertiesBtnClick()"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? `${propertiesPanelPos.up}rem` : `${propertiesPanelPos.down}rem`}"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView"
+      @mousedown="propertiesBtnClick()"
     >
         <i class="fa-solid fa-sliders"></i>
     </v-btn>

src/components/Navbar/NavbarLinks/NavbarLink/NavbarLink2.vue

@@ -50,8 +50,9 @@
 </template>
 
 <script lang="ts" setup>
+// import DropDown from '@/Dropdown/DropDown.vue'
 import logixFunction from '#/simulator/src/data'
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref } from 'vue'
 interface AttrType {
   name: string
   value: string
@@ -60,15 +61,6 @@ defineProps({
   navbarItem: { type: Object, default: () => {} },
 })
 const menuButtonIsActive = ref(false)
-const closeMenu = () => {
-  menuButtonIsActive.value = false
-}
-onMounted(() => {
-  document.addEventListener('ui:close-menus', closeMenu)
-})
-onUnmounted(() => {
-  document.removeEventListener('ui:close-menus', closeMenu)
-})
 </script>
 
 <style scoped>

src/components/Navbar/User/UserMenu.vue

@@ -312,13 +312,11 @@ async function handleAuthSubmit() {
       } catch (e) {
         errorData = { message: 'An error occurred' }
       }
-      console.error('Authentication failed:', response.status, errorData)
       handleLoginError(response.status, errorData)
       return
     }
 
     const data = await response.json()
-    console.log('Auth successful:', data)
 
     if (!data.token) {
       throw new Error('No token received from server')
@@ -331,7 +329,6 @@ async function handleAuthSubmit() {
     )
     authModal.value = false
   } catch (error) {
-    console.error('Authentication error:', error)
     showSnackbar(`Authentication failed: ${error.message}`, 'error')
   } finally {
     isLoading.value = false

src/simulator/src/ux.js

@@ -44,8 +44,6 @@ var ctxPos = {
     y: 0,
     visible: false,
 }
-let isFullViewActive = false
-let prevMobileState = null
 // FUNCTION TO SHOW AND HIDE CONTEXT MENU
 function hideContextMenu() {
     var el = document.getElementById('contextMenu')
@@ -405,48 +403,28 @@ function setupPanelListeners(panelSelector) {
 }
 
 export function exitFullView() {
-    // Remove ALL exit buttons (handles edge cases)
-    const exitViewBtns = document.querySelectorAll('#exitViewBtn')
-    exitViewBtns.forEach(btn => btn.remove())
+    const exitViewBtn = document.querySelector('#exitViewBtn')
+    if (exitViewBtn) exitViewBtn.remove()
 
     const elements = document.querySelectorAll(
         '.navbar, .modules, .report-sidebar, #tabsBar, #moduleProperty, .timing-diagram-panel, .testbench-manual-panel, .quick-btn'
     )
-
     elements.forEach((element) => {
         if (element instanceof HTMLElement) {
             element.style.display = ''
         }
     })
 
-    // Mobile Components - Restore previous state
-    const simulatorMobileStore = toRefs(useSimulatorMobileStore())
-
-    // ✅ RESTORE PREVIOUS STATE
-    if (prevMobileState) {
-        simulatorMobileStore.showElementsPanel.value = prevMobileState.showElementsPanel
-        simulatorMobileStore.showPropertiesPanel.value = prevMobileState.showPropertiesPanel
-        simulatorMobileStore.showTimingDiagram.value = prevMobileState.showTimingDiagram
-        simulatorMobileStore.showQuickButtons.value = prevMobileState.showQuickButtons
-        simulatorMobileStore.showMobileButtons.value = prevMobileState.showMobileButtons
-        prevMobileState = null // Clear saved state
-    }
+    // Mobile Components
 
-    // Reset state flag
-    isFullViewActive = false
+    const simulatorMobileStore = toRefs(useSimulatorMobileStore());
+
+    simulatorMobileStore.showQuickButtons.value = true
+    simulatorMobileStore.showMobileButtons.value = true
 }
 
 export function fullView() {
-    // Prevent multiple calls
-    if (isFullViewActive) return
-
     const app = document.querySelector('#app')
-    if (!app) return
-
-    // Close all menus using custom event (Vue-safe approach)
-    document.dispatchEvent(new Event('ui:close-menus'))
-
-    isFullViewActive = true
 
     const exitViewEl = document.createElement('button')
     exitViewEl.id = 'exitViewBtn'
@@ -455,24 +433,15 @@ export function fullView() {
     const elements = document.querySelectorAll(
         '.navbar, .modules, .report-sidebar, #tabsBar, #moduleProperty, .timing-diagram-panel, .testbench-manual-panel, .quick-btn'
     )
-
     elements.forEach((element) => {
         if (element instanceof HTMLElement) {
             element.style.display = 'none'
         }
     })
 
-    // Mobile Components - Save previous state before hiding
-    const simulatorMobileStore = toRefs(useSimulatorMobileStore())
-
-    // ✅ SAVE PREVIOUS STATE
-    prevMobileState = {
-        showElementsPanel: simulatorMobileStore.showElementsPanel.value,
-        showPropertiesPanel: simulatorMobileStore.showPropertiesPanel.value,
-        showTimingDiagram: simulatorMobileStore.showTimingDiagram.value,
-        showQuickButtons: simulatorMobileStore.showQuickButtons.value,
-        showMobileButtons: simulatorMobileStore.showMobileButtons.value
-    }
+    // Mobile Components
+
+    const simulatorMobileStore = toRefs(useSimulatorMobileStore());
 
     simulatorMobileStore.showElementsPanel.value = false
     simulatorMobileStore.showPropertiesPanel.value = false

v1/src/components/Extra.vue

@@ -36,8 +36,8 @@
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Message Display -->
     <div id="MessageDiv">
-        <div v-for="mes in useState().successMessages" class='alert alert-success' role='alert'> {{ mes }}</div>
-        <div v-for="error in useState().errorMessages" class='alert alert-danger' role='alert'> {{ error }}</div>
+        <div v-for="(mes, idx) in useState().successMessages" :key="`success-${idx}`" class='alert alert-success' role='alert'> {{ mes }}</div>
+        <div v-for="(error, idx) in useState().errorMessages" :key="`error-${idx}`" class='alert alert-danger' role='alert'> {{ error }}</div>
     </div>
     <!-- --------------------------------------------------------------------------------------------- -->
 

v1/src/components/Navbar/NavbarLinks/NavbarLink/NavbarLink2.vue

@@ -52,7 +52,7 @@
 <script lang="ts" setup>
 // import DropDown from '@/Dropdown/DropDown.vue'
 import logixFunction from '#/simulator/src/data'
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref } from 'vue'
 interface AttrType {
   name: string
   value: string
@@ -61,15 +61,6 @@ defineProps({
   navbarItem: { type: Object, default: () => {} },
 })
 const menuButtonIsActive = ref(false)
-const closeMenu = () => {
-  menuButtonIsActive.value = false
-}
-onMounted(() => {
-  document.addEventListener('ui:close-menus', closeMenu)
-})
-onUnmounted(() => {
-  document.removeEventListener('ui:close-menus', closeMenu)
-})
 </script>
 
 <style scoped>

v1/src/components/Navbar/User/UserMenu.vue

@@ -312,13 +312,11 @@ async function handleAuthSubmit() {
       } catch (e) {
         errorData = { message: 'An error occurred' }
       }
-      console.error('Authentication failed:', response.status, errorData)
       handleLoginError(response.status, errorData)
       return
     }
 
     const data = await response.json()
-    console.log('Auth successful:', data)
 
     if (!data.token) {
       throw new Error('No token received from server')
@@ -331,7 +329,6 @@ async function handleAuthSubmit() {
     )
     authModal.value = false
   } catch (error) {
-    console.error('Authentication error:', error)
     showSnackbar(`Authentication failed: ${error.message}`, 'error')
   } finally {
     isLoading.value = false

v1/src/simulator/src/ux.js

@@ -44,8 +44,6 @@ var ctxPos = {
     y: 0,
     visible: false,
 }
-let isFullViewActive = false
-let prevMobileState = null 
 // FUNCTION TO SHOW AND HIDE CONTEXT MENU
 function hideContextMenu() {
     var el = document.getElementById('contextMenu')
@@ -405,48 +403,28 @@ function setupPanelListeners(panelSelector) {
 }
 
 export function exitFullView() {
-    // Remove ALL exit buttons (handles edge cases)
-    const exitViewBtns = document.querySelectorAll('#exitViewBtn')
-    exitViewBtns.forEach(btn => btn.remove())
+    const exitViewBtn = document.querySelector('#exitViewBtn')
+    if (exitViewBtn) exitViewBtn.remove()
 
     const elements = document.querySelectorAll(
         '.navbar, .modules, .report-sidebar, #tabsBar, #moduleProperty, .timing-diagram-panel, .testbench-manual-panel, .quick-btn'
     )
-
     elements.forEach((element) => {
         if (element instanceof HTMLElement) {
             element.style.display = ''
         }
     })
 
-    // Mobile Components - Restore previous state
-    const simulatorMobileStore = toRefs(useSimulatorMobileStore())
-
-    // ✅ RESTORE PREVIOUS STATE
-    if (prevMobileState) {
-        simulatorMobileStore.showElementsPanel.value = prevMobileState.showElementsPanel
-        simulatorMobileStore.showPropertiesPanel.value = prevMobileState.showPropertiesPanel
-        simulatorMobileStore.showTimingDiagram.value = prevMobileState.showTimingDiagram
-        simulatorMobileStore.showQuickButtons.value = prevMobileState.showQuickButtons
-        simulatorMobileStore.showMobileButtons.value = prevMobileState.showMobileButtons
-        prevMobileState = null // Clear saved state
-    }
+    // Mobile Components
 
-    // Reset state flag
-    isFullViewActive = false
+    const simulatorMobileStore = toRefs(useSimulatorMobileStore());
+
+    simulatorMobileStore.showQuickButtons.value = true
+    simulatorMobileStore.showMobileButtons.value = true
 }
 
 export function fullView() {
-    // Prevent multiple calls
-    if (isFullViewActive) return
-
     const app = document.querySelector('#app')
-    if (!app) return
-
-    // Close all menus using custom event (Vue-safe approach)
-    document.dispatchEvent(new Event('ui:close-menus'))
-
-    isFullViewActive = true
 
     const exitViewEl = document.createElement('button')
     exitViewEl.id = 'exitViewBtn'
@@ -455,24 +433,15 @@ export function fullView() {
     const elements = document.querySelectorAll(
         '.navbar, .modules, .report-sidebar, #tabsBar, #moduleProperty, .timing-diagram-panel, .testbench-manual-panel, .quick-btn'
     )
-
     elements.forEach((element) => {
         if (element instanceof HTMLElement) {
             element.style.display = 'none'
         }
     })
 
-    // Mobile Components - Save previous state before hiding
-    const simulatorMobileStore = toRefs(useSimulatorMobileStore())
-
-    // ✅ SAVE PREVIOUS STATE
-    prevMobileState = {
-        showElementsPanel: simulatorMobileStore.showElementsPanel.value,
-        showPropertiesPanel: simulatorMobileStore.showPropertiesPanel.value,
-        showTimingDiagram: simulatorMobileStore.showTimingDiagram.value,
-        showQuickButtons: simulatorMobileStore.showQuickButtons.value,
-        showMobileButtons: simulatorMobileStore.showMobileButtons.value
-    }
+    // Mobile Components
+
+    const simulatorMobileStore = toRefs(useSimulatorMobileStore());
 
     simulatorMobileStore.showElementsPanel.value = false
     simulatorMobileStore.showPropertiesPanel.value = false