DO NOT MERGE : used for comments only

app.vue

@@ -3,6 +3,9 @@ import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 import MatchmakingConfirm from "~/components/matchmaking/MatchmakingConfirm.vue";
 import PlayerNameRegistration from "~/components/PlayerNameRegistration.vue";
 import StreamGlobal from "~/components/StreamGlobal.vue";
+import { useBranding } from "~/composables/useBranding";
+
+useBranding();
 </script>
 
 <template>

assets/css/tailwind.css

@@ -91,9 +91,12 @@
 
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-
+
+    --warning: 36 100% 30%;
+    --warning-foreground: 0 0% 100%;
+
     --ring: 240 4.9% 83.9%;
- 
+
     --sidebar-background: 240 5.9% 10%;
 
     --sidebar-foreground: 240 4.8% 95.9%;

components/BreadCrumbs.vue

@@ -5,7 +5,7 @@
     <BreadcrumbList>
       <BreadcrumbItem>
         <BreadcrumbLink as-child>
-          <NuxtLink :to="{ name: 'play' }"> dashboard </NuxtLink>
+          <NuxtLink :to="{ name: 'play' }" class="breadcrumb-link"> dashboard </NuxtLink>
         </BreadcrumbLink>
       </BreadcrumbItem>
 
@@ -14,7 +14,7 @@
 
         <BreadcrumbItem>
           <BreadcrumbLink as-child>
-            <NuxtLink :to="crumb.to">
+            <NuxtLink :to="crumb.to" class="breadcrumb-link">
               {{ crumb.text.replace("-", " ") }}
             </NuxtLink>
           </BreadcrumbLink>
@@ -26,6 +26,8 @@
 
 <script lang="ts">
 import { e_player_roles_enum } from "~/generated/zeus";
+import { useTournamentContext } from "~/composables/useTournamentContext";
+import { useMatchContext } from "~/composables/useMatchContext";
 
 export default {
   computed: {
@@ -37,12 +39,36 @@ export default {
         return segment.trim() !== "";
       });
 
+      const tc = useTournamentContext();
+      const mc = useMatchContext();
       const breadcrumbs: Array<{
         text: string;
         to: string;
       }> = [];
+
+      // Tournament match: Dashboard > Tournaments > {name} > {match display}
+      if (
+        segments[0] === "matches" &&
+        segments[1] &&
+        mc.value?.tournament
+      ) {
+        breadcrumbs.push({
+          text: "tournaments",
+          to: "/tournaments",
+        });
+        breadcrumbs.push({
+          text: mc.value.tournament.name,
+          to: `/tournaments/${mc.value.tournament.id}`,
+        });
+        breadcrumbs.push({
+          text: mc.value.displayText,
+          to: `/matches/${segments[1]}`,
+        });
+        return breadcrumbs;
+      }
+
       let path = "";
-      segments.forEach((segment: string) => {
+      segments.forEach((segment: string, index: number) => {
         path += `/${segment}`;
 
         if (path === `/players/${this.me?.steam_id}`) {
@@ -59,8 +85,25 @@ export default {
           path = path.replace("/manage-matches", "/matches");
         }
 
+        // Replace tournament UUID with name when available
+        let displayText =
+          segments[0] === "tournaments" &&
+          index === 1 &&
+          tc.value?.id === segment
+            ? tc.value.name
+            : segment;
+
+        // Replace match UUID with human-readable display text
+        if (
+          segments[0] === "matches" &&
+          index === 1 &&
+          mc.value?.id === segment
+        ) {
+          displayText = mc.value.displayText;
+        }
+
         breadcrumbs.push({
-          text: segment,
+          text: displayText,
           to: path,
         });
       });
@@ -75,4 +118,8 @@ export default {
 .router-link-exact-active {
   background-color: transparent;
 }
+
+:deep(.breadcrumb-link) {
+  @apply rounded-md px-2 py-1 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors;
+}
 </style>

components/CustomMatch.vue

@@ -1,34 +1,30 @@
 <script setup lang="ts">
 import { Swords } from "lucide-vue-next";
 import { useApplicationSettingsStore } from "~/stores/ApplicationSettings";
+import AnimatedCard from "~/components/ui/animated-card/AnimatedCard.vue";
 </script>
 
 <template>
-  <NuxtLink
-    :to="{ name: 'matches-create' }"
-    class="flex-1 p-6 border rounded-lg hover:bg-accent/10 cursor-pointer transition-all duration-200 group relative overflow-hidden"
-  >
-    <div class="flex items-start gap-4">
-      <div
-        class="p-2 rounded-full bg-primary/10 group-hover:bg-primary/20 transition-colors"
-      >
-        <Swords class="size-10 text-primary" />
+  <AnimatedCard variant="gradient">
+    <NuxtLink
+      :to="{ name: 'matches-create' }"
+      class="block p-6 cursor-pointer"
+    >
+      <div class="flex items-start gap-4">
+        <div class="p-2 rounded-full bg-muted">
+          <Swords class="size-10 text-foreground" />
+        </div>
+        <div class="space-y-2">
+          <h3 class="text-xl font-semibold">
+            {{ $t("custom_match.title") }}
+          </h3>
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            {{ $t("custom_match.description") }}
+          </p>
+        </div>
       </div>
-      <div class="space-y-2">
-        <h3
-          class="text-xl font-semibold group-hover:text-primary transition-colors"
-        >
-          {{ $t("custom_match.title") }}
-        </h3>
-        <p class="text-sm text-muted-foreground leading-relaxed">
-          {{ $t("custom_match.description") }}
-        </p>
-      </div>
-    </div>
-    <div
-      class="absolute bottom-0 right-0 w-32 h-32 bg-primary/5 rounded-full -mr-16 -mb-16 group-hover:bg-primary/10 transition-colors"
-    ></div>
-  </NuxtLink>
+    </NuxtLink>
+  </AnimatedCard>
 </template>
 
 <script lang="ts">