RT state managment and rectangle support

front/src/App.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
+import { computed } from 'vue'
 import AppTopBar from './components/AppTopBar.vue'
+
+const route = useRoute()
+const hideTopBar = computed(() => route.meta.hideTopBar === true)
 </script>
 
 <template>
-  <AppTopBar />
-  <main class="container py-4">
+  <template v-if="hideTopBar">
     <RouterView />
-  </main>
+  </template>
+  <template v-else>
+    <AppTopBar />
+    <main class="container py-4">
+      <RouterView />
+    </main>
+  </template>
 </template>

front/src/router/index.ts

@@ -35,6 +35,12 @@ const router = createRouter({
       component: () => import('../views/SignupView.vue'),
       meta: { guestOnly: true },
     },
+    {
+      path: '/whiteboard/:id',
+      name: 'whiteboard',
+      component: () => import('../views/WhiteboardView.vue'),
+      meta: { requiresAuth: true, hideTopBar: true },
+    },
   ],
 })
 

front/src/services/signalr.ts

@@ -3,6 +3,7 @@ import {
   HubConnectionBuilder,
   HubConnectionState,
 } from "@microsoft/signalr";
+import {useAuthStore} from "@/stores/auth.ts";
 
 export class SignalRService {
   private connection: HubConnection;
@@ -10,8 +11,12 @@ export class SignalRService {
   constructor(
     hubUrl: string,
   ) {
+    const authStore = useAuthStore();
+
     this.connection = new HubConnectionBuilder()
-      .withUrl(hubUrl)
+      .withUrl(hubUrl, {
+        accessTokenFactory: () => authStore.accessToken!
+      })
       .withAutomaticReconnect()
       .build();
   }

front/src/views/TestView.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
 import {onMounted, ref} from "vue";
+import {useRouter} from "vue-router";
 import {testHubService} from "@/services/testHubService.ts";
 
+const router = useRouter();
 const displayText = ref("");
+const whiteboardId = ref("");
 
 function addText(textToAdd: string): void {
   displayText.value = displayText.value + textToAdd;
 }
 
+function joinWhiteboard() {
+  const id = whiteboardId.value.trim();
+  if (!id) return;
+  router.push(`/whiteboard/${id}`);
+}
+
 onMounted(async () => {
   await testHubService.connect();
 
@@ -19,4 +28,19 @@ onMounted(async () => {
 
 <template>
 <h1>{{ displayText }}</h1>
+
+<div class="mt-4" style="max-width: 500px">
+  <div class="input-group">
+    <input
+      v-model="whiteboardId"
+      type="text"
+      class="form-control"
+      placeholder="Whiteboard ID (GUID)"
+      @keyup.enter="joinWhiteboard"
+    />
+    <button class="btn btn-primary" @click="joinWhiteboard">
+      Join Whiteboard
+    </button>
+  </div>
+</div>
 </template>