🎨 Update TournamentGrid component styling and layout

code/websites/pokedex.online/src/components/challonge/TournamentGrid.vue

@@ -0,0 +1,401 @@
+<!--
+  TournamentGrid Component
+  
+  Displays a grid of tournaments with search, filtering, and pagination.
+  
+  Features:
+  - Tournament card display with state badges
+  - Client-side search filtering
+  - Pagination support (v2.1 only)
+  - Click-to-expand details
+  - Empty state messaging
+  
+  Props:
+  - tournaments: Array of tournament objects
+  - loading: Boolean for loading state
+  - loadingMore: Boolean for pagination loading
+  - searchQuery: String for search input (v-model)
+  - filteredTournaments: Computed array of filtered results
+  - expandedTournamentId: ID of currently expanded tournament
+  - hasNextPage: Boolean for pagination availability (v2.1)
+  - apiVersion: String ('v1' or 'v2.1')
+  
+  Events:
+  - update:searchQuery: Emitted when search input changes
+  - load-more: Emitted when "Load More" button clicked
+  - toggle-details: Emitted when tournament details button clicked
+-->
+<template>
+  <div class="tournament-grid">
+    <!-- Loading State -->
+    <div v-if="loading" class="status loading">⏳ Loading tournaments...</div>
+
+    <!-- Error State -->
+    <div v-else-if="error" class="status error">
+      ❌ Error: {{ error }}
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="!tournaments || tournaments.length === 0" class="status empty">
+      No tournaments found. Create one at
+      <a href="https://challonge.com" target="_blank">Challonge.com</a>
+    </div>
+
+    <!-- Tournament List -->
+    <div v-else>
+      <!-- Search Filter -->
+      <div class="search-box">
+        <input
+          :value="searchQuery"
+          @input="$emit('update:searchQuery', $event.target.value)"
+          type="text"
+          placeholder="🔍 Search tournaments by name (client-side)..."
+          class="search-input"
+        />
+        <span v-if="searchQuery" class="search-info">
+          Showing {{ filteredTournaments.length }} of
+          {{ tournaments.length }} tournaments
+        </span>
+      </div>
+
+      <!-- Tournament Cards -->
+      <div class="tournament-list">
+        <div
+          v-for="tournament in filteredTournaments"
+          :key="getTournamentId(tournament)"
+          class="tournament-card"
+        >
+          <div class="tournament-header">
+            <h4>{{ getTournamentName(tournament) }}</h4>
+            <span
+              class="tournament-state"
+              :class="getTournamentProp(tournament, 'state')"
+            >
+              {{ getTournamentProp(tournament, 'state') }}
+            </span>
+          </div>
+          <div class="tournament-details">
+            <p>
+              <strong>URL:</strong>
+              {{ getTournamentProp(tournament, 'url') }}
+            </p>
+            <p>
+              <strong>Type:</strong>
+              {{ getTournamentProp(tournament, 'tournament_type') }}
+            </p>
+            <p>
+              <strong>Participants:</strong>
+              {{ getTournamentProp(tournament, 'participants_count') }}
+            </p>
+            <p v-if="getTournamentProp(tournament, 'started_at')">
+              <strong>Started:</strong>
+              {{ formatDate(getTournamentProp(tournament, 'started_at')) }}
+            </p>
+          </div>
+          <button
+            @click="$emit('toggle-details', getTournamentId(tournament))"
+            class="btn btn-small"
+            :class="{
+              'btn-active': expandedTournamentId === getTournamentId(tournament)
+            }"
+          >
+            {{
+              expandedTournamentId === getTournamentId(tournament)
+                ? 'Hide Details'
+                : 'Load Details'
+            }}
+          </button>
+
+          <!-- Details Slot for expanded content -->
+          <slot
+            name="tournament-details"
+            :tournament="tournament"
+            :is-expanded="expandedTournamentId === getTournamentId(tournament)"
+          ></slot>
+        </div>
+      </div>
+
+      <!-- Load More Button (v2.1 only) -->
+      <div
+        v-if="apiVersion === 'v2.1' && hasNextPage"
+        class="load-more-section"
+      >
+        <button
+          @click="$emit('load-more')"
+          :disabled="loadingMore"
+          class="btn btn-secondary"
+        >
+          {{ loadingMore ? 'Loading...' : 'Load More Tournaments' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+/**
+ * Props for TournamentGrid component
+ */
+const props = defineProps({
+  tournaments: {
+    type: Array,
+    default: null
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  loadingMore: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: String,
+    default: null
+  },
+  searchQuery: {
+    type: String,
+    default: ''
+  },
+  filteredTournaments: {
+    type: Array,
+    default: () => []
+  },
+  expandedTournamentId: {
+    type: [String, Number],
+    default: null
+  },
+  hasNextPage: {
+    type: Boolean,
+    default: false
+  },
+  apiVersion: {
+    type: String,
+    default: 'v2.1'
+  }
+});
+
+/**
+ * Events emitted by TournamentGrid
+ */
+defineEmits(['update:searchQuery', 'load-more', 'toggle-details']);
+
+/**
+ * Helper to get tournament name (handles both v1 and v2.1 response structures)
+ */
+function getTournamentName(tournament) {
+  return tournament.tournament?.name || tournament.name || '';
+}
+
+/**
+ * Helper to get tournament ID
+ */
+function getTournamentId(tournament) {
+  return tournament.tournament?.id || tournament.id;
+}
+
+/**
+ * Helper to get tournament property
+ */
+function getTournamentProp(tournament, prop) {
+  return tournament.tournament?.[prop] || tournament[prop];
+}
+
+/**
+ * Format date string
+ */
+function formatDate(dateString) {
+  if (!dateString) return '';
+  return new Date(dateString).toLocaleString();
+}
+</script>
+
+<style scoped>
+.tournament-grid {
+  margin-top: 1.5rem;
+}
+
+.status {
+  padding: 1.5rem;
+  border-radius: 8px;
+  text-align: center;
+  margin: 1rem 0;
+}
+
+.status.loading {
+  background: #e3f2fd;
+  color: #1976d2;
+  font-weight: 500;
+}
+
+.status.error {
+  background: #ffebee;
+  color: #c62828;
+  font-weight: 500;
+}
+
+.status.empty {
+  background: #f5f5f5;
+  color: #616161;
+  font-weight: 500;
+}
+
+.status a {
+  color: #667eea;
+  text-decoration: underline;
+}
+
+.search-box {
+  margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: all 0.2s;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.search-info {
+  font-size: 0.875rem;
+  color: #666;
+  font-style: italic;
+}
+
+.tournament-list {
+  display: grid;
+  gap: 1rem;
+}
+
+.tournament-card {
+  background: white;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 1.5rem;
+  transition: all 0.2s;
+}
+
+.tournament-card:hover {
+  border-color: #667eea;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+}
+
+.tournament-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  gap: 1rem;
+}
+
+.tournament-header h4 {
+  margin: 0;
+  color: #333;
+  font-size: 1.25rem;
+  flex: 1;
+}
+
+.tournament-state {
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.tournament-state.pending {
+  background: #fff3cd;
+  color: #856404;
+}
+
+.tournament-state.underway,
+.tournament-state.in_progress {
+  background: #d1ecf1;
+  color: #0c5460;
+}
+
+.tournament-state.complete,
+.tournament-state.ended {
+  background: #d4edda;
+  color: #155724;
+}
+
+.tournament-details {
+  margin-bottom: 1rem;
+}
+
+.tournament-details p {
+  margin: 0.5rem 0;
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.tournament-details strong {
+  color: #333;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-small {
+  background: #667eea;
+  color: white;
+}
+
+.btn-small:hover {
+  background: #5568d3;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
+}
+
+.btn-small.btn-active {
+  background: #764ba2;
+}
+
+.btn-small.btn-active:hover {
+  background: #653c8a;
+}
+
+.load-more-section {
+  margin-top: 1.5rem;
+  text-align: center;
+}
+
+.btn-secondary {
+  background: #6c757d;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #5a6268;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
+}
+
+.btn-secondary:disabled {
+  background: #adb5bd;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>