From 132045bb68148d33e8ae430330f8e92f2e2daed3 Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Tue, 17 Feb 2026 19:03:48 +0100
Subject: [PATCH] feat(players): stack Challonge card below StartGG and add
 logo icon

---
 src/dashboard/scoreko-dev/views/Players.vue | 433 ++++++++++----------
 1 file changed, 225 insertions(+), 208 deletions(-)

diff --git a/src/dashboard/scoreko-dev/views/Players.vue b/src/dashboard/scoreko-dev/views/Players.vue
index e34f784..1d95933 100644
--- a/src/dashboard/scoreko-dev/views/Players.vue
+++ b/src/dashboard/scoreko-dev/views/Players.vue
@@ -886,227 +886,232 @@ onBeforeUnmount(() => {
       </div>
 
       <div class="col-12 col-lg-4 players-startgg-column">
-        <QCard
-          flat
-          bordered
-          class="q-pa-md"
-        >
-          <div class="text-h6 q-mb-sm startgg-heading">
-            <svg
-              class="startgg-heading__icon"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <path d="M6 0A5.999 5.999 0 00.002 6v5.252a.75.75 0 00.75.748H5.25a.748.748 0 00.75-.747V6.749C6 6.334 6.336 6 6.748 6h16.497a.748.748 0 00.749-.748V.749A.743.743 0 0023.247 0zm12.75 12a.748.748 0 00-.75.75v4.5a.748.748 0 01-.747.748H.753a.754.754 0 00-.75.751v4.5a.75.75 0 00.75.751H18a5.999 5.999 0 005.999-6v-5.25a.75.75 0 00-.75-.75z" />
-            </svg>
-            <span>StartGG</span>
-          </div>
-          <div class="text-caption q-mb-md">
-            Connect via OAuth (recommended) or paste your personal token to load tournaments you created or administrate. If you see "Client authentication failed", verify your config uses the Client ID/Secret from a start.gg OAuth App.
-          </div>
-          <div class="row q-col-gutter-sm items-center">
-            <div class="col-auto">
-              <QBtn
-                v-if="!hasStartGGTokenConfigured"
-                color="primary"
-                icon="login"
-                label="Connect with start.gg"
-                :loading="oauthLoading"
-                @click="connectWithStartGGOAuth"
-              />
-              <QBtn
-                v-else
-                outline
-                color="positive"
-                icon="check_circle"
-                label="Connected"
-                class="startgg-connected-btn"
-                @click="openManualTokenDialog"
-              />
-            </div>
-            <div class="col-auto">
-              <QBtn
-                outline
-                color="white"
-                icon="vpn_key"
-                label="Use personal API"
-                @click="openManualTokenDialog"
-              />
-            </div>
-          </div>
-          <div
-            v-if="tournamentsError"
-            class="text-negative q-mt-sm"
+        <div class="players-integrations-stack">
+          <QCard
+            flat
+            bordered
+            class="q-pa-md"
           >
-            {{ tournamentsError }}
-          </div>
-          <div class="row items-center q-mt-md startgg-tournament-row">
-            <QBtn
-              flat
-              round
-              dense
-              text-color="white"
-              icon="sync"
-              class="startgg-refresh-btn"
-              :loading="loadingTournaments"
-              @click="loadRecentTournaments"
-            />
-            <div class="col">
-              <QSelect
-                v-model="selectedTournamentSlug"
-                v-model:input-value="tournamentInput"
-                :options="filteredTournamentOptions"
-                option-value="value"
-                option-label="label"
-                emit-value
-                map-options
-                use-input
-                hide-selected
-                fill-input
-                input-debounce="0"
-                clearable
-                dense
-                label="Tournament"
-                class="players-underlined-field"
-                @filter="filterTournaments"
+            <div class="text-h6 q-mb-sm startgg-heading">
+              <svg
+                class="startgg-heading__icon"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
               >
-                <template #option="scope">
-                  <QItem v-bind="scope.itemProps">
-                    <QItemSection>
-                      <QItemLabel>{{ scope.opt.label }}</QItemLabel>
-                      <QItemLabel caption>
-                        {{ scope.opt.caption }}
-                      </QItemLabel>
-                    </QItemSection>
-                  </QItem>
-                </template>
-              </QSelect>
+                <path d="M6 0A5.999 5.999 0 00.002 6v5.252a.75.75 0 00.75.748H5.25a.748.748 0 00.75-.747V6.749C6 6.334 6.336 6 6.748 6h16.497a.748.748 0 00.749-.748V.749A.743.743 0 0023.247 0zm12.75 12a.748.748 0 00-.75.75v4.5a.748.748 0 01-.747.748H.753a.754.754 0 00-.75.751v4.5a.75.75 0 00.75.751H18a5.999 5.999 0 005.999-6v-5.25a.75.75 0 00-.75-.75z" />
+              </svg>
+              <span>StartGG</span>
+            </div>
+            <div class="text-caption q-mb-md">
+              Connect via OAuth (recommended) or paste your personal token to load tournaments you created or administrate. If you see "Client authentication failed", verify your config uses the Client ID/Secret from a start.gg OAuth App.
+            </div>
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-auto">
+                <QBtn
+                  v-if="!hasStartGGTokenConfigured"
+                  color="primary"
+                  icon="login"
+                  label="Connect with start.gg"
+                  :loading="oauthLoading"
+                  @click="connectWithStartGGOAuth"
+                />
+                <QBtn
+                  v-else
+                  outline
+                  color="positive"
+                  icon="check_circle"
+                  label="Connected"
+                  class="startgg-connected-btn"
+                  @click="openManualTokenDialog"
+                />
+              </div>
+              <div class="col-auto">
+                <QBtn
+                  outline
+                  color="white"
+                  icon="vpn_key"
+                  label="Use personal API"
+                  @click="openManualTokenDialog"
+                />
+              </div>
             </div>
             <div
-              v-if="canImportSelectedTournament"
-              class="col-auto"
+              v-if="tournamentsError"
+              class="text-negative q-mt-sm"
             >
-              <QBtn
-                color="primary"
-                unelevated
-                round
-                icon="person_add"
-                aria-label="Import players"
-                @click="openSelectedTournamentImportDialog"
-              >
-                <QTooltip>Import players</QTooltip>
-              </QBtn>
+              {{ tournamentsError }}
             </div>
-          </div>
-        </QCard>
-      </div>
+            <div class="row items-center q-mt-md startgg-tournament-row">
+              <QBtn
+                flat
+                round
+                dense
+                text-color="white"
+                icon="sync"
+                class="startgg-refresh-btn"
+                :loading="loadingTournaments"
+                @click="loadRecentTournaments"
+              />
+              <div class="col">
+                <QSelect
+                  v-model="selectedTournamentSlug"
+                  v-model:input-value="tournamentInput"
+                  :options="filteredTournamentOptions"
+                  option-value="value"
+                  option-label="label"
+                  emit-value
+                  map-options
+                  use-input
+                  hide-selected
+                  fill-input
+                  input-debounce="0"
+                  clearable
+                  dense
+                  label="Tournament"
+                  class="players-underlined-field"
+                  @filter="filterTournaments"
+                >
+                  <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                      <QItemSection>
+                        <QItemLabel>{{ scope.opt.label }}</QItemLabel>
+                        <QItemLabel caption>
+                          {{ scope.opt.caption }}
+                        </QItemLabel>
+                      </QItemSection>
+                    </QItem>
+                  </template>
+                </QSelect>
+              </div>
+              <div
+                v-if="canImportSelectedTournament"
+                class="col-auto"
+              >
+                <QBtn
+                  color="primary"
+                  unelevated
+                  round
+                  icon="person_add"
+                  aria-label="Import players"
+                  @click="openSelectedTournamentImportDialog"
+                >
+                  <QTooltip>Import players</QTooltip>
+                </QBtn>
+              </div>
+            </div>
+          </QCard>
 
-      <div class="col-12 col-lg-4 players-startgg-column">
-        <QCard
-          flat
-          bordered
-          class="q-pa-md"
-        >
-          <div class="text-h6 q-mb-sm startgg-heading">
-            <span>Challonge</span>
-          </div>
-          <div class="text-caption q-mb-md">
-            Connect with OAuth or paste your personal token to load your Challonge tournaments and import participants.
-          </div>
-          <div class="row q-col-gutter-sm items-center">
-            <div class="col-auto">
-              <QBtn
-                v-if="!hasChallongeTokenConfigured"
-                color="primary"
-                icon="login"
-                label="Connect with Challonge"
-                :loading="challongeOauthLoading"
-                @click="connectWithChallongeOAuth"
-              />
-              <QBtn
-                v-else
-                outline
-                :color="hasValidatedChallongeToken ? 'positive' : 'warning'"
-                icon="check_circle"
-                :label="challongeConnectionLabel"
-                @click="openChallongeManualTokenDialog"
-              />
-            </div>
-            <div class="col-auto">
-              <QBtn
-                outline
-                color="white"
-                icon="vpn_key"
-                label="Use personal API"
-                @click="openChallongeManualTokenDialog"
-              />
-            </div>
-          </div>
-          <div
-            v-if="challongeTournamentsError"
-            class="text-negative q-mt-sm"
+          <QCard
+            flat
+            bordered
+            class="q-pa-md"
           >
-            {{ challongeTournamentsError }}
-          </div>
-          <div class="row items-center q-mt-md startgg-tournament-row">
-            <QBtn
-              flat
-              round
-              dense
-              text-color="white"
-              icon="sync"
-              class="startgg-refresh-btn"
-              :loading="challongeLoadingTournaments"
-              @click="loadChallongeRecentTournaments"
-            />
-            <div class="col">
-              <QSelect
-                v-model="selectedChallongeTournamentSlug"
-                v-model:input-value="challongeTournamentInput"
-                :options="filteredChallongeTournamentOptions"
-                option-value="value"
-                option-label="label"
-                emit-value
-                map-options
-                use-input
-                hide-selected
-                fill-input
-                input-debounce="0"
-                clearable
-                dense
-                label="Tournament"
-                class="players-underlined-field"
-                @filter="filterChallongeTournaments"
+            <div class="text-h6 q-mb-sm startgg-heading">
+              <img
+                class="challonge-heading__icon"
+                src="https://challonge.com/favicon.ico"
+                alt="Challonge"
               >
-                <template #option="scope">
-                  <QItem v-bind="scope.itemProps">
-                    <QItemSection>
-                      <QItemLabel>{{ scope.opt.label }}</QItemLabel>
-                      <QItemLabel caption>
-                        {{ scope.opt.caption }}
-                      </QItemLabel>
-                    </QItemSection>
-                  </QItem>
-                </template>
-              </QSelect>
+              <span>Challonge</span>
+            </div>
+            <div class="text-caption q-mb-md">
+              Connect with OAuth or paste your personal token to load your Challonge tournaments and import participants.
+            </div>
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-auto">
+                <QBtn
+                  v-if="!hasChallongeTokenConfigured"
+                  color="primary"
+                  icon="login"
+                  label="Connect with Challonge"
+                  :loading="challongeOauthLoading"
+                  @click="connectWithChallongeOAuth"
+                />
+                <QBtn
+                  v-else
+                  outline
+                  :color="hasValidatedChallongeToken ? 'positive' : 'warning'"
+                  icon="check_circle"
+                  :label="challongeConnectionLabel"
+                  @click="openChallongeManualTokenDialog"
+                />
+              </div>
+              <div class="col-auto">
+                <QBtn
+                  outline
+                  color="white"
+                  icon="vpn_key"
+                  label="Use personal API"
+                  @click="openChallongeManualTokenDialog"
+                />
+              </div>
             </div>
             <div
-              v-if="canImportSelectedChallongeTournament"
-              class="col-auto"
+              v-if="challongeTournamentsError"
+              class="text-negative q-mt-sm"
             >
-              <QBtn
-                color="primary"
-                unelevated
-                round
-                icon="person_add"
-                aria-label="Import players"
-                @click="openSelectedChallongeTournamentImportDialog"
-              >
-                <QTooltip>Import players</QTooltip>
-              </QBtn>
+              {{ challongeTournamentsError }}
             </div>
-          </div>
-        </QCard>
+            <div class="row items-center q-mt-md startgg-tournament-row">
+              <QBtn
+                flat
+                round
+                dense
+                text-color="white"
+                icon="sync"
+                class="startgg-refresh-btn"
+                :loading="challongeLoadingTournaments"
+                @click="loadChallongeRecentTournaments"
+              />
+              <div class="col">
+                <QSelect
+                  v-model="selectedChallongeTournamentSlug"
+                  v-model:input-value="challongeTournamentInput"
+                  :options="filteredChallongeTournamentOptions"
+                  option-value="value"
+                  option-label="label"
+                  emit-value
+                  map-options
+                  use-input
+                  hide-selected
+                  fill-input
+                  input-debounce="0"
+                  clearable
+                  dense
+                  label="Tournament"
+                  class="players-underlined-field"
+                  @filter="filterChallongeTournaments"
+                >
+                  <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                      <QItemSection>
+                        <QItemLabel>{{ scope.opt.label }}</QItemLabel>
+                        <QItemLabel caption>
+                          {{ scope.opt.caption }}
+                        </QItemLabel>
+                      </QItemSection>
+                    </QItem>
+                  </template>
+                </QSelect>
+              </div>
+              <div
+                v-if="canImportSelectedChallongeTournament"
+                class="col-auto"
+              >
+                <QBtn
+                  color="primary"
+                  unelevated
+                  round
+                  icon="person_add"
+                  aria-label="Import players"
+                  @click="openSelectedChallongeTournamentImportDialog"
+                >
+                  <QTooltip>Import players</QTooltip>
+                </QBtn>
+              </div>
+            </div>
+          </QCard>
+        </div>
       </div>
     </div>
 
@@ -1404,6 +1409,12 @@ onBeforeUnmount(() => {
   min-width: 320px;
 }
 
+.players-integrations-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
 
 .players-dialog {
   min-width: 320px;
@@ -1423,6 +1434,12 @@ onBeforeUnmount(() => {
   fill: #2e75ba;
 }
 
+.challonge-heading__icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
 .startgg-tournament-row {
   gap: 4px;
 }