popilot 0.6.0 → 0.8.0

package/scaffold/spec-site/package.json

@@ -9,7 +9,21 @@
   },
   "dependencies": {
     "vue": "^3.5.27",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "dompurify": "^3.2.0",
+    "marked": "^15.0.0",
+    "lucide-vue-next": "^0.470.0",
+    "@tiptap/vue-3": "^2.11.0",
+    "@tiptap/starter-kit": "^2.11.0",
+    "@tiptap/extension-link": "^2.11.0",
+    "@tiptap/extension-image": "^2.11.0",
+    "@tiptap/extension-table": "^2.11.0",
+    "@tiptap/extension-table-row": "^2.11.0",
+    "@tiptap/extension-table-cell": "^2.11.0",
+    "@tiptap/extension-table-header": "^2.11.0",
+    "@tiptap/extension-placeholder": "^2.11.0",
+    "@tiptap/core": "^2.11.0",
+    "@tiptap/suggestion": "^2.11.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",

package/scaffold/spec-site/src/api/types.ts

@@ -122,6 +122,10 @@ export interface PmStoryRow {
   priority: string
   area: string
   story_points: number | null
+  start_date: string | null
+  due_date: string | null
+  figma_url: string | null
+  related_prs: string | null
   sort_order: number
   created_at: string
   updated_at: string
@@ -134,6 +138,8 @@ export interface PmTaskRow {
   assignee: string | null
   status: string
   description: string | null
+  story_points: number | null
+  due_date: string | null
   sort_order: number
   created_at: string
   updated_at: string

package/scaffold/spec-site/src/components/AppHeader.vue

@@ -1,13 +1,28 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { sprints, getActiveSprint, type SprintConfig } from '../composables/useNavStore'
-import { featurePages } from '../data/navigation'
+import { getNavItems, isFeatureEnabled } from '@/features'
+import { useAuth } from '@/composables/useAuth'
+import { useTheme } from '@/composables/useTheme'
+import { useMediaQuery } from '@/composables/useMediaQuery'
+import { useNotification, type NotificationItem, shouldOpenMemoSidebar, pendingNotificationPageId } from '@/composables/useNotification'
+import NotificationDropdown from './NotificationDropdown.vue'
+import SearchModal from './SearchModal.vue'
 
 const route = useRoute()
 const router = useRouter()
+const { isAuthenticated, authUser, logout } = useAuth()
+const { theme, toggle: toggleTheme } = useTheme()
+const isMobile = useMediaQuery('(max-width: 767px)')
 
-const currentPageId = computed(() => (route.params.pageId as string) || '')
+const {
+  notifications, unreadCount,
+  markAsRead, markAllAsRead,
+  startPolling, stopPolling,
+} = useNotification()
+
+const navItems = computed(() => getNavItems())
 const currentSprint = computed(() => (route.params.sprint as string) || getActiveSprint().id)
 
 const activeSprintLabel = computed(() => {
@@ -15,11 +30,20 @@ const activeSprintLabel = computed(() => {
   return s?.label ?? currentSprint.value.toUpperCase()
 })
 
-const isPolicyPage = computed(() => route.path.startsWith('/policy'))
+// Sprint-level page detection
+const isBoardPage = computed(() => route.path.startsWith('/board') && route.path !== '/board/backlog')
+const isBacklogPage = computed(() => route.path === '/board/backlog')
+const isStandupPage = computed(() => route.path.startsWith('/standup'))
 const isRetroPage = computed(() => route.path.startsWith('/retro'))
+const isMyTasksPage = computed(() => route.path.startsWith('/my-tasks'))
 
 // Dropdown state
 const sprintOpen = ref(false)
+const sprintMenuOpen = ref(false)
+const mobileMenuOpen = ref(false)
+const userMenuOpen = ref(false)
+const notifOpen = ref(false)
+const searchVisible = ref(false)
 
 function toggleSprint() {
   sprintOpen.value = !sprintOpen.value
@@ -27,57 +51,208 @@ function toggleSprint() {
 
 function selectSprint(s: SprintConfig) {
   sprintOpen.value = false
-  if (isPolicyPage.value) {
-    router.push(`/policy/${s.id}`)
+  if (isBoardPage.value) {
+    router.push(`/board/${s.id}`)
+  } else if (isStandupPage.value) {
+    router.push(`/standup/${s.id}`)
   } else if (isRetroPage.value) {
     router.push(`/retro/${s.id}`)
+  } else if (isMyTasksPage.value) {
+    router.push(`/my-tasks/${s.id}`)
   } else {
-    router.push(`/${currentPageId.value}/${s.id}`)
+    const basePath = route.path.replace(/\/[^/]+$/, '')
+    router.push(`${basePath}/${s.id}`)
   }
 }
 
 function goHome() {
   router.push('/')
+  mobileMenuOpen.value = false
+}
+
+function toggleMobileMenu() {
+  mobileMenuOpen.value = !mobileMenuOpen.value
+}
+
+function toggleUserMenu() {
+  userMenuOpen.value = !userMenuOpen.value
+}
+
+function openSearch() {
+  searchVisible.value = true
+}
+
+function handleLogout() {
+  userMenuOpen.value = false
+  logout()
+  router.push('/')
+}
+
+function navigateTo(path: string) {
+  mobileMenuOpen.value = false
+  sprintMenuOpen.value = false
+  router.push(path)
+}
+
+function handleNotifToggle() {
+  notifOpen.value = !notifOpen.value
+}
+
+function handleNotifClick(n: NotificationItem) {
+  markAsRead(n.id)
+  notifOpen.value = false
+  if (n.sourceType === 'memo' && n.pageId) {
+    pendingNotificationPageId.value = n.pageId
+    shouldOpenMemoSidebar.value = true
+    router.push(`/${n.pageId}`)
+  } else {
+    router.push('/inbox')
+  }
 }
 
-// Close dropdown on outside click
+function handleMarkAllRead() {
+  markAllAsRead()
+}
+
+const themeIcon = computed(() => {
+  if (theme.value === 'dark') return 'Dark'
+  if (theme.value === 'system') return 'Auto'
+  return 'Light'
+})
+
+// Ctrl+K shortcut
+function onGlobalKeydown(e: KeyboardEvent) {
+  if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+    e.preventDefault()
+    searchVisible.value = !searchVisible.value
+  }
+}
+
+// Close dropdowns on outside click
 function onDocClick(e: MouseEvent) {
   const target = e.target as HTMLElement
-  if (!target.closest('.dropdown')) {
-    sprintOpen.value = false
-  }
+  if (!target.closest('.dropdown')) sprintOpen.value = false
+  if (!target.closest('.user-menu')) userMenuOpen.value = false
+  if (!target.closest('.notification-bell')) notifOpen.value = false
+  if (!target.closest('.sprint-dropdown')) sprintMenuOpen.value = false
 }
 
-onMounted(() => document.addEventListener('click', onDocClick))
-onUnmounted(() => document.removeEventListener('click', onDocClick))
+onMounted(() => {
+  document.addEventListener('click', onDocClick)
+  document.addEventListener('keydown', onGlobalKeydown)
+  startPolling()
+})
+onUnmounted(() => {
+  document.removeEventListener('click', onDocClick)
+  document.removeEventListener('keydown', onGlobalKeydown)
+  stopPolling()
+})
 </script>
 
 <template>
   <header class="app-header">
     <div class="header-left">
+      <!-- Mobile hamburger -->
+      <button v-if="isMobile" class="hamburger-btn" @click="toggleMobileMenu">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <template v-if="!mobileMenuOpen">
+            <line x1="3" y1="6" x2="21" y2="6" />
+            <line x1="3" y1="12" x2="21" y2="12" />
+            <line x1="3" y1="18" x2="21" y2="18" />
+          </template>
+          <template v-else>
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </template>
+        </svg>
+      </button>
+
       <!-- Logo -->
       <div class="header-logo" @click="goHome">
-        <!-- TODO: Change logo text to your project name -->
         <span class="logo-mark">SPEC</span>
         <span class="logo-sub">SITE</span>
       </div>
 
-      <!-- Feature page tabs -->
-      <nav class="page-tabs">
+      <!-- Desktop navigation -->
+      <nav v-if="!isMobile" class="page-tabs">
+        <!-- Sprint dropdown -->
+        <div v-if="isFeatureEnabled('board')" class="sprint-dropdown">
+          <button
+            class="page-tab"
+            :class="{ active: route.path === '/' || isBoardPage || isBacklogPage || isStandupPage || isRetroPage || isMyTasksPage }"
+            @click.stop="sprintMenuOpen = !sprintMenuOpen"
+          >
+            Sprint &#9662;
+          </button>
+          <div v-if="sprintMenuOpen" class="sprint-dropdown-menu">
+            <div class="dropdown-item" @click="navigateTo('/')">Dashboard</div>
+            <div class="dropdown-item" @click="navigateTo(`/board/${currentSprint}`)">Board</div>
+            <div class="dropdown-item" @click="navigateTo(`/standup/${currentSprint}`)">Standup</div>
+            <div class="dropdown-item" @click="navigateTo(`/retro/${currentSprint}`)">Retro</div>
+            <div class="menu-divider" />
+            <div class="dropdown-item" @click="navigateTo(`/board/${currentSprint}?view=timeline`)">Timeline</div>
+            <div class="dropdown-item" @click="navigateTo(`/board/${currentSprint}?view=roadmap`)">Roadmap</div>
+            <div class="dropdown-item" @click="navigateTo('/board/backlog')">Backlog</div>
+            <div class="dropdown-item" @click="navigateTo(`/my-tasks/${currentSprint}`)">My Tasks</div>
+            <div class="menu-divider" />
+            <div class="dropdown-item" @click="navigateTo('/kickoff/new')">New Sprint Kickoff</div>
+            <div class="dropdown-item" @click="navigateTo(`/close/${currentSprint}`)">Close Sprint</div>
+            <div class="dropdown-item" @click="navigateTo('/admin/board')">Board Admin</div>
+          </div>
+        </div>
+
+        <!-- Other nav items (excluding board/standup/retro which are in sprint dropdown) -->
         <router-link
-          v-for="fp in featurePages"
-          :key="fp.id"
-          :to="`/${fp.id}/${currentSprint}`"
+          v-for="item in navItems.filter(n => !['board', 'standup', 'retro', 'dashboard'].includes(n.id))"
+          :key="item.id"
+          :to="item.path"
           class="page-tab"
-          :class="{ active: !isPolicyPage && !isRetroPage && currentPageId === fp.id }"
+          :class="{ active: route.path === item.path || route.path.startsWith(item.path + '/') }"
         >
-          {{ fp.label }}
+          {{ item.label }}
         </router-link>
       </nav>
     </div>
 
     <div class="header-right">
-      <!-- Sprint version selector -->
+      <!-- Search trigger -->
+      <button class="icon-btn" @click="openSearch" title="Search (Ctrl+K)">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.35-4.35" />
+        </svg>
+        <kbd v-if="!isMobile" class="kbd-hint">Ctrl+K</kbd>
+      </button>
+
+      <!-- Theme toggle -->
+      <button class="icon-btn" @click="toggleTheme" :title="`Theme: ${themeIcon}`">
+        <svg v-if="theme === 'light'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+        <svg v-else-if="theme === 'dark'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+        <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="2" y="3" width="20" height="14" rx="2" ry="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" />
+        </svg>
+      </button>
+
+      <!-- Notifications -->
+      <div class="notif-wrapper" :class="{ open: notifOpen }">
+        <NotificationDropdown
+          :notifications="notifications"
+          :unread-count="unreadCount"
+          @toggle="handleNotifToggle"
+          @click="handleNotifClick"
+          @mark-all-read="handleMarkAllRead"
+        />
+      </div>
+
+      <!-- Sprint selector -->
       <div class="dropdown" :class="{ open: sprintOpen }">
         <button class="dropdown-trigger" @click.stop="toggleSprint">
           {{ activeSprintLabel }}
@@ -98,33 +273,67 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
         </div>
       </div>
 
-      <!-- Sprint-level links -->
-      <div class="sprint-links">
-        <router-link
-          :to="`/policy/${currentSprint}`"
-          class="sprint-link"
-          :class="{ active: isPolicyPage }"
-        >
-          Policy
-        </router-link>
-        <span class="sprint-link-sep">|</span>
+      <!-- User menu -->
+      <div v-if="isAuthenticated" class="user-menu" :class="{ open: userMenuOpen }">
+        <button class="user-btn" @click.stop="toggleUserMenu">
+          <span class="user-avatar">{{ (authUser || '?').charAt(0).toUpperCase() }}</span>
+          <span v-if="!isMobile" class="user-name">{{ authUser }}</span>
+        </button>
+        <div v-if="userMenuOpen" class="dropdown-menu user-dropdown">
+          <div class="dropdown-item" @click="navigateTo('/my')">My Page</div>
+          <div class="dropdown-item" @click="handleLogout">Log out</div>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- Mobile navigation drawer -->
+  <Teleport to="body">
+    <div v-if="isMobile && mobileMenuOpen" class="mobile-overlay" @click="mobileMenuOpen = false">
+      <nav class="mobile-drawer" @click.stop>
+        <!-- Sprint section -->
+        <div class="mobile-section-label">Sprint</div>
+        <div class="mobile-nav-item" @click="navigateTo('/')">Dashboard</div>
+        <div class="mobile-nav-item" @click="navigateTo(`/board/${currentSprint}`)">Board</div>
+        <div class="mobile-nav-item" @click="navigateTo(`/standup/${currentSprint}`)">Standup</div>
+        <div class="mobile-nav-item" @click="navigateTo(`/retro/${currentSprint}`)">Retro</div>
+        <div class="mobile-nav-item" @click="navigateTo(`/my-tasks/${currentSprint}`)">My Tasks</div>
+        <div class="mobile-nav-item" @click="navigateTo('/board/backlog')">Backlog</div>
+        <div class="mobile-nav-item" @click="navigateTo('/kickoff/new')">Sprint Kickoff</div>
+
+        <div class="mobile-divider" />
+
+        <!-- Other nav items -->
         <router-link
-          :to="`/retro/${currentSprint}`"
-          class="sprint-link"
-          :class="{ active: isRetroPage }"
+          v-for="item in navItems.filter(n => !['board', 'standup', 'retro', 'dashboard'].includes(n.id))"
+          :key="item.id"
+          :to="item.path"
+          class="mobile-nav-item"
+          :class="{ active: route.path === item.path || route.path.startsWith(item.path + '/') }"
+          @click="mobileMenuOpen = false"
         >
-          Retro
+          {{ item.label }}
         </router-link>
-      </div>
+
+        <template v-if="isAuthenticated">
+          <div class="mobile-divider" />
+          <div class="mobile-nav-item" @click="navigateTo('/my')">My Page</div>
+        </template>
+      </nav>
     </div>
-  </header>
+  </Teleport>
+
+  <!-- Search modal -->
+  <SearchModal :visible="searchVisible" @close="searchVisible = false" />
 </template>
 
 <style scoped>
 .app-header {
   height: var(--header-height);
-  background: #fff;
-  border-bottom: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.60);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -132,6 +341,8 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
   flex-shrink: 0;
   gap: 8px;
   z-index: 500;
+  position: sticky;
+  top: 0;
 }
 
 /* ---- Left section ---- */
@@ -141,6 +352,20 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
   gap: 4px;
 }
 
+.hamburger-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: none;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+.hamburger-btn:hover { background: var(--bg); }
+
 .header-logo {
   display: flex;
   align-items: baseline;
@@ -180,11 +405,14 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
   font-size: 13px;
   font-weight: 500;
   color: var(--text-secondary);
+  border: none;
   border-radius: 6px;
+  background: none;
   cursor: pointer;
   transition: all 0.15s;
   text-decoration: none;
   white-space: nowrap;
+  font-family: inherit;
 }
 .page-tab:hover { background: var(--bg); color: var(--text-primary); }
 .page-tab.active {
@@ -193,6 +421,42 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
   font-weight: 600;
 }
 
+/* ---- Sprint dropdown ---- */
+.sprint-dropdown { position: relative; }
+.sprint-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  background: rgba(255,255,255,0.75);
+  backdrop-filter: blur(40px) saturate(1.8);
+  -webkit-backdrop-filter: blur(40px) saturate(1.8);
+  border: 1px solid rgba(255,255,255,0.45);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  min-width: 180px;
+  padding: 4px;
+  margin-top: 4px;
+}
+.sprint-dropdown-menu .dropdown-item {
+  display: block;
+  padding: 6px 12px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.sprint-dropdown-menu .dropdown-item:hover {
+  background: var(--bg);
+  color: var(--text-primary);
+}
+.menu-divider {
+  height: 1px;
+  background: rgba(0,0,0,0.06);
+  margin: 4px 8px;
+}
+
 /* ---- Right section ---- */
 .header-right {
   display: flex;
@@ -200,6 +464,37 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
   gap: 4px;
 }
 
+/* ---- Icon buttons ---- */
+.icon-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  transition: all 0.15s;
+}
+.icon-btn:hover { background: var(--bg); color: var(--text-primary); }
+
+.kbd-hint {
+  font-size: 10px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-family: var(--font-sans);
+}
+
+/* ---- Notification wrapper ---- */
+.notif-wrapper { position: relative; }
+.notif-wrapper :deep(.notif-dropdown) { display: none; }
+.notif-wrapper.open :deep(.notif-dropdown) { display: flex; }
+
 /* ---- Dropdown ---- */
 .dropdown { position: relative; }
 
@@ -235,9 +530,11 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
   position: absolute;
   top: calc(100% + 4px);
   right: 0;
-  min-width: 240px;
-  background: #fff;
-  border: 1px solid var(--border);
+  min-width: 200px;
+  background: rgba(255,255,255,0.75);
+  backdrop-filter: blur(40px) saturate(1.8);
+  -webkit-backdrop-filter: blur(40px) saturate(1.8);
+  border: 1px solid rgba(255,255,255,0.45);
   border-radius: 8px;
   box-shadow: var(--shadow-md);
   padding: 4px;
@@ -274,32 +571,109 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
   flex-shrink: 0;
 }
 
-/* ---- Sprint-level links ---- */
-.sprint-links {
+/* ---- User menu ---- */
+.user-menu {
+  position: relative;
+}
+
+.user-btn {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 6px;
+  padding: 4px 8px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s;
+  font-family: var(--font-sans);
 }
+.user-btn:hover { background: var(--bg); }
 
-.sprint-link {
-  padding: 6px 10px;
+.user-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--primary-light, #e0e7ff);
+  color: var(--primary);
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.user-name {
   font-size: 13px;
   font-weight: 500;
+  color: var(--text-primary);
+  max-width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-dropdown {
+  min-width: 140px;
+}
+
+/* ---- Mobile drawer ---- */
+.mobile-overlay {
+  position: fixed;
+  inset: 0;
+  top: var(--header-height);
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+}
+
+.mobile-drawer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 260px;
+  height: 100%;
+  background: rgba(255,255,255,0.85);
+  backdrop-filter: blur(40px) saturate(1.8);
+  -webkit-backdrop-filter: blur(40px) saturate(1.8);
+  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mobile-nav-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  font-size: 14px;
+  font-weight: 500;
   color: var(--text-secondary);
-  border-radius: 6px;
+  border-radius: 8px;
   text-decoration: none;
   transition: all 0.15s;
+  cursor: pointer;
 }
-.sprint-link:hover { background: var(--bg); color: var(--text-primary); }
-.sprint-link.active {
+.mobile-nav-item:hover { background: var(--bg); color: var(--text-primary); }
+.mobile-nav-item.active {
   background: var(--primary-light);
   color: var(--primary);
   font-weight: 600;
 }
 
-.sprint-link-sep {
-  color: var(--border);
-  font-size: 12px;
-  user-select: none;
+.mobile-section-label {
+  padding: 8px 16px 4px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.mobile-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 12px;
 }
 </style>