Extract GettingStartedCard component from Session.vue

[Copilot]

Session.vue exceeded 17,000 lines. This PR extracts the "Getting Started" section (82 lines) into a dedicated component as the first step in decomposing the file.

Changes

• New component: src/components/ui/GettingStartedCard.vue

  • Accepts show prop for visibility control
  • Emits show-sample-selection event for sample data dialog
  • Preserves all existing Vuetify styling

• Session.vue updates:

  • Added showGettingStarted computed property to encapsulate display logic
  • Replaced inline template with component usage:

    <GettingStartedCard
      :show="showGettingStarted"
      @show-sample-selection="showSampleSelectionDialog = true"
    />

Result

Session.vue: 17,061 → 16,989 lines (-72)

Getting Started component in left sidebar:

Sample selection dialog triggered by button click:

Original prompt

Problem

The Session.vue file is extremely large (over 2000 lines) and difficult to maintain. This PR starts a refactoring effort by extracting the "Getting Started" section into its own component.

Tasks

1. Create a new component src/components/ui/GettingStartedCard.vue that contains the getting started section currently in Session.vue
2. The component should:
   • Display when no files are loaded (animations.length === 0 && smplSequences.length === 0 && !converting && Object.keys(markersDatasets).length === 0)
   • Show the sample data button, workflow steps, and tips
   • Emit an event show-sample-selection when the "Try Sample Data" button is clicked
   • Accept a prop to control when it should be displayed
3. Update Session.vue to:
   • Import and use the new GettingStartedCard component
   • Pass the appropriate props
   • Listen to the show-sample-selection event and set showSampleSelectionDialog = true
4. Ensure all styling is preserved (use Vuetify classes and scoped styles as needed)
5. Test that the component displays correctly and the "Try Sample Data" button still works

Source Code Reference

The section to extract starts at approximately line 155 in Session.vue:

<!-- Getting Started Section (shown when no files are loaded) -->
<div v-if="animations.length === 0 && smplSequences.length === 0 && !converting && Object.keys(markersDatasets).length === 0" class="getting-started-section mb-4">
  <v-card dark class="pa-4" style="background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1);">
    <!-- ... full content ... -->
  </v-card>
</div>

Expected Result

• A new, reusable GettingStartedCard.vue component
• Cleaner, more maintainable Session.vue (first step in a larger refactoring)
• No functional changes - everything should work exactly as before
• This sets the pattern for extracting additional components in future PRs

Notes

• This is Vue 2 with Vuetify 2
• Keep the component self-contained and well-documented
• Use clear prop names and event naming conventions

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.