🎯 Launcher Location & Quick Start

Where Is It?

The launcher is on the LEFT SIDEBAR of the 6d-dashboard, below the discipline pills.

Visual Location

┌────────────────────────────────────────────────────────┐
│                   6D DASHBOARD                          │
├────────────────────────────────────────────────────────┤
│  LEFT SIDEBAR  │  MAIN CONTENT                          │
│  ┌──────────┐ │                                         │
│  │ [All]    │ │                                         │
│  │ [D][S]   │ │   Health Overview                       │
│  │ [A][W]   │ │   3D Ring Display                       │
│  │ [I][B]   │ │   Discipline Panels                     │
│  │ ────────  │ │                                         │
│  │ [⚙️ ▶]    │ │                                         │
│  │APPLICA... │ │ ← Click this to expand                │
│  │ ────────  │ │                                         │
│  │          │ │                                         │
│  └──────────┘ │                                         │
│               │                                         │
│               │                                         │
│               │                                         │
└────────────────────────────────────────────────────────┘

How to Use

Step 1: Locate the Launcher

• Look at the left sidebar
• Find the button with "⚙️" icon
• It says "⚙️ ▶ APPLICATIONS" (when collapsed)

Step 2: Click to Expand

• Click the launcher button
• Menu expands showing items
• Arrow changes from ▶ to ▼

BEFORE (Collapsed):          AFTER (Expanded):
┌──────────────────┐        ┌──────────────────┐
│ [⚙️ ▶ APPLICA... │        │ [⚙️ ▼ APPLICA... │
│                  │        │ ┌────────────────┤
│                  │    →   │ │ [📦 Digital P. │
│                  │        │ │ [📊 Analytics] │
│                  │        │ │ [⚙️ Settings]  │
│                  │        │ └────────────────┤
│                  │        │                  │
└──────────────────┘        └──────────────────┘

Step 3: Click an Item

• Click on the feature you want
• Example: Click "📦 Digital Products"
• Menu closes automatically
• Feature launches

Available Items

📦 Digital Products

• What: Upload and manage digital products
• Icon: 📦
• Where: First item in launcher
• Action: Opens Digital Product Manager

📊 Analytics

• What: View dashboard analytics
• Icon: 📊
• Badge: "3" (notification indicator)
• Status: Placeholder (ready for implementation)

⚙️ Settings

• What: Application settings
• Icon: ⚙️
• Status: Placeholder (ready for implementation)

Button Details

Normal State (Collapsed)

┌─────────────────────┐
│ ⚙️ ▶ APPLICATIONS    │  ← Click to expand
└─────────────────────┘
 ↑
 Cyan border with light glow

Hover State

┌─────────────────────┐
│ ⚙️ ▶ APPLICATIONS    │  ← Glows brighter
└─────────────────────┘
 ↑
 Intense cyan glow

Expanded State

┌─────────────────────┐
│ ⚙️ ▼ APPLICATIONS    │  ← Arrow points down
├─────────────────────┤
│ [📦 Digital...]     │  ← Menu items appear
│ [📊 Analytics] [3]  │  ← Purple text with badge
│ [⚙️ Settings]       │
└─────────────────────┘

Menu Item Details

Item Appearance

┌──────────────────────┐
│ 📦 DIGITAL PRODUCTS  │  ← Icon + Label
└──────────────────────┘
 ↑
 Purple border
 Dark background

On Hover

┌──────────────────────┐
│ 📦 DIGITAL PRODUCTS  │  ← Glows & darkens
└──────────────────────┘
 ↑
 Purple glow effect
 Darker background

With Badge (Analytics)

┌────────────────────────────┐
│ 📊 ANALYTICS      [3]       │  ← Badge shows count
└────────────────────────────┘
 ↑                         ↑
 Icon + Label        Badge (cyan)

Quick Reference

Action	What Happens
Click launcher button	Toggles menu (expands/collapses)
Hover on button	Glows with cyan effect
Hover on menu item	Glows with purple effect + darkens
Click menu item	Launches feature + auto-closes menu
Click outside	Menu stays open (click button to close)

Keyboard Navigation

Key	Action
Tab	Navigate to launcher button
Enter/Space	Expand/collapse menu
Tab	Move through menu items
Enter	Select menu item
Esc	Close menu (future)

Tips & Tricks

💡 Tip 1: The launcher is always visible

• No need to scroll
• Easy one-click access

💡 Tip 2: Menu auto-closes after selection

• Select item → action launches → menu closes
• Just click again to open

💡 Tip 3: Badges show notifications

• "3" in Analytics = 3 notifications
• Check back for updates

💡 Tip 4: Hover shows descriptions

• Hover over item
• Tooltip appears (if description set)

Customization (For Developers)

Adding New Items

Edit src/app/routes/dashboard-6d/index.tsx:

const launcherItems: LauncherItem[] = [
  {
    id: "my-feature",
    label: "My Feature",
    icon: "🎯",
    description: "What this feature does",
    onClick: () => {
      // Your action here
      onNavigate?.("my-feature");
    },
    badge: "5", // Optional
  },
];

Changing Icon

{
    id: 'analytics',
    label: 'Analytics',
    icon: '📉', // Change from 📊 to 📉
    // ...
}

Changing Label

{
    id: 'analytics',
    label: 'Advanced Analytics', // Longer label
    // ...
}

Removing Item

Delete it from the launcherItems array:

const launcherItems: LauncherItem[] = [
  {
    id: "digital-products",
    // ...
  },
  // Remove this one:
  // {
  //     id: 'analytics',
  //     // ...
  // },
];

Styling

Colors

• Button Border: Cyan (#52d1ff)
• Button Glow: Cyan with transparency
• Menu Items: Purple (#b782ff) border
• Menu Glow: Purple with transparency
• Badge: Cyan background (#52d1ff)

Sizes

• Button Height: ~40px
• Button Width: ~160px (approximate)
• Menu Item Height: ~40px
• Font Size: Small (0.75rem)

Animations

• Expand/Collapse: 250ms smooth slide
• Hover: 200ms smooth transition
• Glow: CSS shadow, GPU-accelerated

Troubleshooting

Launcher not showing?

• Refresh the page (Cmd+R or Ctrl+R)
• Check browser console (F12) for errors
• Make sure launcherItems are being passed to LcarsFrame

Items not clickable?

• Make sure onClick function is defined
• Check browser console for JavaScript errors
• Verify LauncherItem interface is correct

Badge not showing?

• Make sure badge property is set: badge: '5'
• Badge only shows if string value provided

Styling wrong?

• Check if Aurora tokens CSS is loaded
• Verify CSS custom properties are set (:root { --aurora-accent-1: ... })
• Check browser DevTools (F12) → Elements → Styles

Next Steps

1. ✅ Found the launcher - It's on the left sidebar
2. ✅ Understand how to use it - Click to expand, select items
3. ⏳ Try clicking items - Launch features
4. ⏳ Customize - Add your own items (if developer)
5. ⏳ Deploy - Use in production

---

Reference

• Full Guide: LAUNCHER_GUIDE.md
• Component Code: /src/components/lcars/LcarsLauncher.tsx
• Integration: /src/app/routes/dashboard-6d/index.tsx
• Styles: Aurora tokens in /src/theme/

---

Version: 1.0.0
Status: ✅ Ready to Use
Date: October 21, 2025
Location: Left sidebar below discipline pills 📍