feat(03-05): create QuotaBar.vue; embed in AppSidebar between topics nav and footer

- QuotaBar.vue: new sidebar quota widget — onMounted calls authStore.fetchQuota(); computed pct/barColor/labelColor/label from authStore.quota; color thresholds <80% indigo-500, 80-95% amber-500, >=95% red-500; skeleton loading state (animate-pulse); hides on loadFailed (v-if); role=progressbar with aria-valuenow/aria-valuemin/aria-valuemax/aria-label
- AppSidebar.vue: import QuotaBar; insert <QuotaBar /> between </nav> and settings footer div
- Frontend build exits 0 (verified)
This commit is contained in:
curo1305
2026-05-23 20:49:07 +02:00
parent eb18428d07
commit 23c568ae89
2 changed files with 99 additions and 0 deletions
@@ -54,6 +54,9 @@
</div>
</nav>
<!-- Quota bar (between topics nav and settings footer, UI-SPEC Phase 3) -->
<QuotaBar />
<!-- Settings + Admin link -->
<div class="px-3 py-4 border-t border-gray-100">
<!-- Admin link (admin users only) -->
@@ -108,6 +111,7 @@
import { useRouter } from 'vue-router'
import { useTopicsStore } from '../../stores/topics.js'
import { useAuthStore } from '../../stores/auth.js'
import QuotaBar from './QuotaBar.vue'
const topicsStore = useTopicsStore()
const authStore = useAuthStore()