Command Palette & Context Cycling System

import { useCommandPalette } from '@/components/command-palette'
 
function MyComponent() {
  const { openCommandPalette, setLeagueContext } = useCommandPalette()
 
  return (
    <Button onClick={openCommandPalette}>
      Open Command Palette
    </Button>
  )
}

// Set league context
useCommandPalette().setLeagueContext('league-123', 'Pro Curling League')
 
// Set chat context (sport archetypes)
useCommandPalette().setChatContext()
 
// Set market context
useCommandPalette().setMarketContext()

useEffect(() => {
  const handleContextSwitch = (event: CustomEvent) => {
    console.log('Context switched:', event.detail)
  }
 
  window.addEventListener('switch-context', handleContextSwitch)
  return () => window.removeEventListener('switch-context', handleContextSwitch)
}, [])
 
// Listen for sport archetype search
window.addEventListener('search-sport-archetype', (event: CustomEvent) => {
  const archetype = event.detail.archetype
  // Filter leagues by archetype
})
 
// Listen for platform search
window.addEventListener('search-platform', (event: CustomEvent) => {
  const platform = event.detail.platform
  // Filter leagues by platform compatibility
})

// In CommandPalette.tsx, add to the appropriate command group
 
const customCommands: CommandGroup = {
  heading: 'Custom Actions',
  actions: [
    {
      id: 'custom-action',
      label: 'My Custom Action',
      description: 'Does something awesome',
      icon: Sparkles,
      shortcut: ['Cmd', 'Shift', 'X'],
      onSelect: () => {
        // Your custom logic
      },
    },
  ],
}

// Add your custom context type
export type ContextType = 'league' | 'sport-archetype' | 'betting-market' | 'your-custom-type' | 'recent'
 
// Define your custom items
const yourCustomItems: ContextItem[] = [
  {
    id: 'item-1',
    label: 'Custom Item 1',
    sublabel: 'Description',
    icon: YourIcon,
    color: 'from-blue-500 to-purple-500',
    onSelect: () => {
      // Your logic
    },
  },
]

'use client'
 
import { useEffect, useState } from 'react'
 
export function ChatPage() {
  const [sportArchetype, setSportArchetype] = useState('team_sports')
 
  useEffect(() => {
    const handleSwitch = (event: CustomEvent) => {
      if (event.detail.type === 'sport-archetype') {
        setSportArchetype(event.detail.value)
      }
    }
 
    window.addEventListener('switch-context', handleSwitch)
    return () => window.removeEventListener('switch-context', handleSwitch)
  }, [])
 
  return (
    <div>
      <h1>Chat - {sportArchetype}</h1>
      {/* Chat interface filtered by current archetype */}
    </div>
  )
}

'use client'
 
import { useEffect, useState } from 'react'
 
export function MarketsPage() {
  const [marketType, setMarketType] = useState('player-props')
 
  useEffect(() => {
    const handleSwitch = (event: CustomEvent) => {
      if (event.detail.type === 'betting-market') {
        setMarketType(event.detail.value)
      }
    }
 
    window.addEventListener('switch-context', handleSwitch)
    return () => window.removeEventListener('switch-context', handleSwitch)
  }, [])
 
  return (
    <div>
      <h1>Markets - {marketType}</h1>
      {/* Markets filtered by current type */}
    </div>
  )
}

// Change timeout duration in ContextCycler.tsx
const timer = setTimeout(() => {
  setOpen(false)
}, 3000) // Change this value

{
  id: 'action',
  label: 'My Action',
  badge: 'New', // Shows badge
  shortcut: ['Cmd', 'X'], // Shows keyboard shortcut
  onSelect: () => {},
}

{
  id: 'combat',
  label: 'Combat Sports',
  keywords: ['mma', 'boxing', 'martial', 'fighting', 'ufc'],
  onSelect: () => {},
}

CommandPaletteProvider (Root)
├── CommandPalette (Cmd+K)
│   ├── Context Detection
│   ├── Command Groups
│   └── Search & Filter
└── ContextCycler (Shift+Tab)
    ├── Context Detection
    ├── Item Lists
    └── Auto-Close Timer