feature: new UI design (#266)

Author: lukepolo

.claude/settings.local.json

@@ -16,7 +16,9 @@
       "Read(//Users/luke/code/5stack/web/i18n/locales/**)",
       "Bash(done)",
       "Bash(for f in ko_KR ru_RU tr_TR uk_UA zh_Hans)",
-      "Bash(for f in ar_SA ko_KR ru_RU tr_TR uk_UA zh_Hans it_IT ja_JP da_DK pt_BR de_DE pl_PL es_ES zh_Hant sv_SE fr_FR)"
+      "Bash(for f in ar_SA ko_KR ru_RU tr_TR uk_UA zh_Hans it_IT ja_JP da_DK pt_BR de_DE pl_PL es_ES zh_Hant sv_SE fr_FR)",
+      "Bash(tail *)",
+      "Bash(node *)"
     ]
   }
 }

app.vue

@@ -1,38 +1,43 @@
 <script setup lang="ts">
+import { computed, defineAsyncComponent } from "vue";
 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";
+import { useApplicationSettingsStore } from "~/stores/ApplicationSettings";
+import { useAuthStore } from "~/stores/AuthStore";
+
+const MatchmakingConfirm = defineAsyncComponent(
+  () => import("~/components/matchmaking/MatchmakingConfirm.vue"),
+);
+const PlayerNameRegistration = defineAsyncComponent(
+  () => import("~/components/PlayerNameRegistration.vue"),
+);
+const StreamGlobal = defineAsyncComponent(
+  () => import("~/components/StreamGlobal.vue"),
+);
+
+polyfillCountryFlagEmojis();
 
 useBranding();
+
+const authStore = useAuthStore();
+const applicationSettingsStore = useApplicationSettingsStore();
+
+const me = computed(() => authStore.me);
+const hasGlobalStream = computed(() => !!applicationSettingsStore.globalStream);
 </script>
 
 <template>
   <NuxtPwaManifest />
 
-  <StreamGlobal />
+  <StreamGlobal v-if="hasGlobalStream" />
 
   <template v-if="me">
     <PlayerNameRegistration />
     <MatchmakingConfirm />
   </template>
 
   <NuxtLayout>
-    <NuxtPage></NuxtPage>
+    <NuxtPage :page-key="(route) => route.fullPath" />
   </NuxtLayout>
   <Toaster />
 </template>
-
-<script lang="ts">
-export default {
-  beforeCreate() {
-    polyfillCountryFlagEmojis();
-  },
-  computed: {
-    me() {
-      return useAuthStore().me;
-    },
-  },
-};
-</script>

assets/css/tailwind.css

@@ -74,6 +74,9 @@
     --topnav-accent-foreground: 0 0% 98%;
     --topnav-border: 220 13% 91%;
     --topnav-ring: 217.2 91.2% 59.8%;
+
+    --tac-amber: 33 94% 58%;
+    --tac-amber-foreground: 0 0% 10%;
   }
 
   .dark {
@@ -136,6 +139,9 @@
     --topnav-accent-foreground: 0 0% 98%;
     --topnav-border: 240 3% 23%;
     --topnav-ring: 217.2 91.2% 59.8%;
+
+    --tac-amber: 33 94% 58%;
+    --tac-amber-foreground: 0 0% 10%;
   }
 }
 
@@ -240,7 +246,6 @@ div[role="menuitem"] {
 }
 
 
-
 @layer base {
   * {
     @apply border-border;
@@ -253,4 +258,35 @@ div[role="menuitem"] {
 
 mark {
   @apply bg-white/80;
+}
+
+.tac-amber-cta {
+  color: hsl(0 0% 8%);
+  border-color: hsl(var(--tac-amber));
+  background: linear-gradient(
+    135deg,
+    hsl(36 100% 65%) 0%,
+    hsl(var(--tac-amber)) 50%,
+    hsl(28 90% 52%) 100%
+  );
+  box-shadow:
+    0 0 0 1px hsl(var(--tac-amber) / 0.35),
+    0 4px 14px -4px hsl(var(--tac-amber) / 0.5);
+  transition:
+    transform 200ms,
+    box-shadow 200ms;
+}
+.tac-amber-cta:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    0 0 0 1px hsl(var(--tac-amber) / 0.55),
+    0 8px 22px -4px hsl(var(--tac-amber) / 0.7),
+    0 0 18px hsl(var(--tac-amber) / 0.3);
+}
+.tac-amber-cta:active {
+  transform: translateY(0);
+}
+.tac-amber-cta:disabled {
+  pointer-events: none;
+  opacity: 0.6;
 }

components/AppSidebar.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { defineAsyncComponent } from "vue";
 import type { SidebarProps } from "~/components/ui/sidebar";
-import LeftNav from "@/layouts/components/LeftNav.vue";
-import RightHub from "@/layouts/components/RightHub.vue";
 import { useSidebar } from "~/components/ui/sidebar/utils";
 import { useAuthStore } from "~/stores/AuthStore";
 
+const LeftNav = defineAsyncComponent(
+  () => import("@/layouts/components/LeftNav.vue"),
+);
+const RightHub = defineAsyncComponent(
+  () => import("@/layouts/components/RightHub.vue"),
+);
+
 const props = withDefaults(defineProps<SidebarProps>(), {
   side: "left",
 });