queen-mq 0.1.1 → 0.1.2

package/dashboard/src/components/layout/AppHeader.vue

@@ -1,208 +0,0 @@
-<template>
-  <header class="app-header">
-    <div class="header-content">
-      <div class="header-left">
-        <Button 
-          icon="pi pi-bars" 
-          class="p-button-text p-button-plain menu-toggle"
-          @click="toggleSidebar"
-        />
-        <div class="logo">
-          <i class="pi pi-crown logo-icon"></i>
-          <span class="logo-text">Queen Dashboard</span>
-        </div>
-      </div>
-      
-      <div class="header-center">
-        <h1 class="page-title">{{ pageTitle }}</h1>
-      </div>
-      
-      <div class="header-right">
-        <div class="connection-status" :class="connectionClass">
-          <span class="indicator"></span>
-          <span>{{ connectionText }}</span>
-        </div>
-        
-        <Button 
-          icon="pi pi-refresh" 
-          class="p-button-text p-button-plain header-btn"
-          v-tooltip="'Refresh'"
-          @click="handleRefresh"
-        />
-        
-        <Button 
-          icon="pi pi-cog" 
-          class="p-button-text p-button-plain header-btn"
-          v-tooltip="'Settings'"
-        />
-      </div>
-    </div>
-  </header>
-</template>
-
-<script setup>
-import { ref, computed, watch, inject } from 'vue'
-import { useRoute } from 'vue-router'
-import Button from 'primevue/button'
-import websocket from '../../services/websocket.js'
-
-const route = useRoute()
-const toggleSidebar = inject('toggleSidebar')
-
-// Connection status
-const isConnected = ref(websocket.getConnectionStatus())
-
-// Watch for connection changes
-websocket.on('connected', () => {
-  isConnected.value = true
-})
-
-websocket.on('disconnected', () => {
-  isConnected.value = false
-})
-
-const connectionClass = computed(() => ({
-  connected: isConnected.value,
-  disconnected: !isConnected.value
-}))
-
-const connectionText = computed(() => 
-  isConnected.value ? 'Connected' : 'Disconnected'
-)
-
-// Page title from route
-const pageTitle = computed(() => route.meta.title || 'Dashboard')
-
-// Refresh handler
-const handleRefresh = () => {
-  window.location.reload()
-}
-</script>
-
-<style scoped>
-.app-header {
-  height: 64px;
-  background: rgba(28, 25, 23, 0.95);  /* stone-900 with opacity */
-  backdrop-filter: blur(12px);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.header-content {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 1.5rem;
-}
-
-.header-left,
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.menu-toggle {
-  display: flex !important;
-  margin-right: 1rem;
-  color: var(--surface-600) !important;
-}
-
-.menu-toggle:hover {
-  color: var(--primary-500) !important;
-  background: rgba(236, 72, 153, 0.1) !important;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 1rem;
-  font-weight: 600;
-  background: var(--gradient-primary);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.logo-icon {
-  font-size: 1.25rem;
-  color: var(--primary-500);
-}
-
-.page-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--surface-700);
-  margin: 0;
-}
-
-.connection-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem 0.75rem;
-  border-radius: 9999px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.3s ease;
-}
-
-.connection-status.connected {
-  background: rgba(16, 185, 129, 0.15);
-  color: var(--success-color);
-}
-
-.connection-status.disconnected {
-  background: rgba(239, 68, 68, 0.15);
-  color: var(--danger-color);
-}
-
-.connection-status .indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: currentColor;
-}
-
-.connection-status.connected .indicator {
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-.header-btn {
-  color: var(--surface-500) !important;
-}
-
-.header-btn:hover {
-  color: var(--primary-500) !important;
-  background: rgba(236, 72, 153, 0.1) !important;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .menu-toggle {
-    display: flex;
-  }
-  
-  .header-center {
-    display: none;
-  }
-  
-  .logo-text {
-    display: none;
-  }
-}
-</style>

package/dashboard/src/components/layout/AppLayout.vue

@@ -1,88 +0,0 @@
-<template>
-  <div class="app-layout">
-    <div class="layout-main">
-      <AppSidebar v-model:visible="sidebarVisible" />
-      <div class="layout-content">
-        <router-view />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, provide } from 'vue'
-import AppSidebar from './AppSidebar.vue'
-
-const sidebarVisible = ref(false)
-
-// Provide sidebar visibility to header
-provide('toggleSidebar', () => {
-  sidebarVisible.value = !sidebarVisible.value
-})
-</script>
-
-<style scoped>
-.app-layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: var(--surface-0);
-}
-
-.layout-main {
-  flex: 1;
-  display: flex;
-  position: relative;
-}
-
-.layout-content {
-  flex: 1;
-  padding: 2rem;
-  margin-left: 80px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  background: #0c0a09;
-  min-height: 100vh;
-  position: relative;
-}
-
-.layout-main:has(.sidebar-wrapper.collapsed) .layout-content {
-  margin-left: 80px;
-}
-
-.layout-main:has(.sidebar-wrapper.expanded) .layout-content {
-  margin-left: 250px;
-}
-
-/* Fade transition */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* Loading container */
-.loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 400px;
-  color: #ec4899;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .layout-content {
-    margin-left: 0 !important;
-    padding: 0.75rem;
-    background: var(--surface-0);
-  }
-  
-  .layout-main:has(.sidebar-wrapper:not(.collapsed)) .layout-content {
-    margin-left: 0 !important;
-  }
-}
-</style>

package/dashboard/src/components/layout/AppSidebar.vue

@@ -1,261 +0,0 @@
-<template>
-  <div class="sidebar-wrapper" :class="{ collapsed: !visible, expanded: visible }">
-    <div class="sidebar-content">
-      <!-- Logo -->
-      <div class="sidebar-logo">
-        <div class="logo-icon">
-          <i class="pi pi-bolt"></i>
-        </div>
-      </div>
-      
-      <!-- Navigation -->
-      <nav class="sidebar-nav">
-        <router-link 
-          v-for="item in menuItems" 
-          :key="item.path"
-          :to="item.path"
-          class="nav-item"
-          :class="{ active: isActive(item.path) }"
-          v-tooltip.right="!visible ? item.label : ''"
-        >
-          <div class="nav-icon">
-            <i :class="item.icon"></i>
-          </div>
-        </router-link>
-      </nav>
-      
-      <!-- Footer -->
-      <div class="sidebar-footer">
-        <div class="nav-item settings-item">
-          <div class="nav-icon">
-            <i class="pi pi-cog"></i>
-          </div>
-        </div>
-        <div class="user-item">
-          <div class="user-avatar">
-            <i class="pi pi-user"></i>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useRoute } from 'vue-router'
-
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const emit = defineEmits(['update:visible'])
-const route = useRoute()
-
-const visible = computed({
-  get: () => props.visible,
-  set: (val) => emit('update:visible', val)
-})
-
-// Menu items - icon only sidebar
-const menuItems = ref([
-  {
-    path: '/',
-    label: 'Dashboard',
-    icon: 'pi pi-home'
-  },
-  {
-    path: '/queues',
-    label: 'Queues',
-    icon: 'pi pi-inbox'
-  },
-  {
-    path: '/analytics',
-    label: 'Analytics',
-    icon: 'pi pi-chart-line'
-  },
-  {
-    path: '/messages',
-    label: 'Messages',
-    icon: 'pi pi-envelope'
-  },
-])
-
-// Check if route is active
-const isActive = (path) => {
-  if (path === '/') {
-    return route.path === '/'
-  }
-  return route.path.startsWith(path)
-}
-</script>
-
-<style scoped>
-.sidebar-wrapper {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 80px;
-  height: 100vh;
-  background: #0c0a09;
-  border-right: 1px solid rgba(255, 255, 255, 0.05);
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-}
-
-.sidebar-wrapper.expanded {
-  width: 250px;
-}
-
-.sidebar-content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 1rem 0;
-}
-
-/* Logo */
-.sidebar-logo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem 0 2rem 0;
-  margin-bottom: 1rem;
-}
-
-.logo-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 1.5rem;
-  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
-}
-
-/* Navigation */
-.sidebar-nav {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0 1rem;
-}
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  margin: 0 auto;
-  color: #78716c;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  position: relative;
-  border-radius: 12px;
-  cursor: pointer;
-}
-
-.nav-item:hover {
-  color: #d6d3d1;
-  background: rgba(236, 72, 153, 0.1);
-}
-
-.nav-item.active {
-  color: #ec4899;
-  background: rgba(236, 72, 153, 0.15);
-}
-
-.nav-item.active::before {
-  content: '';
-  position: absolute;
-  left: -1rem;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 24px;
-  background: #ec4899;
-  border-radius: 0 2px 2px 0;
-}
-
-.nav-icon {
-  font-size: 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Footer */
-.sidebar-footer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem 0;
-  margin-top: auto;
-}
-
-.settings-item {
-  margin: 0;
-}
-
-.user-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.user-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  background: #1c1917;
-  border: 2px solid #292524;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #78716c;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.user-avatar:hover {
-  border-color: #ec4899;
-  color: #ec4899;
-}
-
-/* Expanded state styles */
-.sidebar-wrapper.expanded .nav-item {
-  justify-content: flex-start;
-  width: auto;
-  padding: 0 1rem;
-  gap: 1rem;
-}
-
-.sidebar-wrapper.expanded .nav-item::after {
-  content: attr(data-label);
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-/* Mobile responsive */
-@media (max-width: 768px) {
-  .sidebar-wrapper {
-    transform: translateX(-100%);
-  }
-  
-  .sidebar-wrapper.expanded {
-    transform: translateX(0);
-  }
-}
-</style>

package/dashboard/src/main.js

@@ -1,44 +0,0 @@
-import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
-import PrimeVue from 'primevue/config'
-import Aura from '@primevue/themes/aura'
-import ToastService from 'primevue/toastservice'
-import ConfirmationService from 'primevue/confirmationservice'
-import Tooltip from 'primevue/tooltip'
-
-// Import global styles
-import 'primeicons/primeicons.css'
-import './assets/styles/main.css'
-
-import App from './App.vue'
-import router from './router.js'
-
-const app = createApp(App)
-
-// Configure PrimeVue with Aura Dark Theme
-app.use(PrimeVue, {
-  theme: {
-    preset: Aura,
-    options: {
-      primary: 'rose',
-      darkModeSelector: '.dark',
-      cssLayer: {
-        name: 'primevue',
-        order: 'primevue'
-      }
-    }
-  },
-  ripple: true
-})
-
-// Set dark mode by default
-document.documentElement.classList.add('dark')
-
-app.use(ToastService)
-app.use(ConfirmationService)
-app.use(router)
-
-// Register directives
-app.directive('tooltip', Tooltip)
-
-app.mount('#app')

package/dashboard/src/router.js

@@ -1,54 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-
-// Lazy load views for better performance
-const Dashboard = () => import('./views/Dashboard.vue')
-const Queues = () => import('./views/Queues.vue')
-const QueueDetail = () => import('./views/QueueDetail.vue')
-const Analytics = () => import('./views/Analytics.vue')
-const Messages = () => import('./views/Messages.vue')
-
-const routes = [
-  {
-    path: '/',
-    name: 'dashboard',
-    component: Dashboard,
-    meta: { title: 'Dashboard' }
-  },
-  {
-    path: '/queues',
-    name: 'queues',
-    component: Queues,
-    meta: { title: 'Queues' }
-  },
-  {
-    path: '/queues/:name',
-    name: 'queue-detail',
-    component: QueueDetail,
-    meta: { title: 'Queue Detail' }
-  },
-  {
-    path: '/analytics',
-    name: 'analytics',
-    component: Analytics,
-    meta: { title: 'Analytics' }
-  },
-  {
-    path: '/messages',
-    name: 'messages',
-    component: Messages,
-    meta: { title: 'Messages' }
-  },
-]
-
-const router = createRouter({
-  history: createWebHistory('/dashboard/'),
-  routes
-})
-
-// Update page title on route change
-router.beforeEach((to, from, next) => {
-  document.title = `${to.meta.title || 'Queen'} - Queen Dashboard`
-  next()
-})
-
-export default router