From d7bfc083e77ca331e5568efc5ac28b5d67464809 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Mon, 13 Apr 2026 12:34:23 -0700
Subject: [PATCH] fix: Hall of Chaos quality fixes -- timer cleanup, aria-live,
 reduced-motion

- onUnmounted clears blooperHoldTimer to prevent stale callback after
  component teardown
- HallOfChaosView loading state gains aria-live="polite" so state
  transitions are announced to screen readers
- CommunityFeedPanel reduced-motion block resets toast translateY offset
  to avoid flash-of-offset-position on slow paint cycles
---
 frontend/src/components/CommunityFeedPanel.vue | 14 +++++++++++++-
 frontend/src/components/HallOfChaosView.vue    |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/CommunityFeedPanel.vue b/frontend/src/components/CommunityFeedPanel.vue
index e3c53b1..e4f070f 100644
--- a/frontend/src/components/CommunityFeedPanel.vue
+++ b/frontend/src/components/CommunityFeedPanel.vue
@@ -116,7 +116,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useCommunityStore } from '../stores/community'
 import CommunityPostCard from './CommunityPostCard.vue'
 import PublishPlanModal from './PublishPlanModal.vue'
@@ -217,6 +217,13 @@ onMounted(async () => {
     await store.fetchPosts()
   }
 })
+
+onUnmounted(() => {
+  if (blooperHoldTimer !== null) {
+    clearTimeout(blooperHoldTimer)
+    blooperHoldTimer = null
+  }
+})
 </script>
 
 <style scoped>
@@ -320,5 +327,10 @@ onMounted(async () => {
   .toast-fade-leave-active {
     transition: none;
   }
+
+  .toast-fade-enter-from,
+  .toast-fade-leave-to {
+    transform: translateX(-50%);
+  }
 }
 </style>
diff --git a/frontend/src/components/HallOfChaosView.vue b/frontend/src/components/HallOfChaosView.vue
index 087d417..cce3bd5 100644
--- a/frontend/src/components/HallOfChaosView.vue
+++ b/frontend/src/components/HallOfChaosView.vue
@@ -17,7 +17,7 @@
     </div>
 
     <!-- Loading -->
-    <div v-if="loading" class="chaos-loading text-center text-secondary" aria-busy="true">
+    <div v-if="loading" class="chaos-loading text-center text-secondary" aria-live="polite" aria-busy="true">
       Assembling the chaos...
     </div>