ui overwhaul

front/src/components/RecentWhiteboardsList.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 
 import { onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { useWhiteboardStore } from '@/stores/whiteboards'
 import RecentWhiteboardsItem from './RecentWhiteboardsItem.vue'
 
+const router = useRouter()
 const store = useWhiteboardStore()
 
 onMounted(() => {
@@ -17,7 +19,7 @@ const sortedWhiteboards = computed(() =>
 )
 
 const handleClick = (whiteboard: any) => {
-  console.log('Clicked:', whiteboard)
+  router.push({ name: 'whiteboard', params: { id: whiteboard.id } })
 }
 
 </script>

front/src/components/RecentWhiteboardsPanel.vue

@@ -6,11 +6,24 @@ import RecentWhiteboardsList from './RecentWhiteboardsList.vue'
 
 <template>
 
-  <div class="whiteboards-panel card border-secondary shadow-sm h-100">
+  <div
-    <div class="card-header bg-light text-dark">
+    id="recentWhiteboardsSidebar"
+    class="offcanvas offcanvas-start bg-dark text-light"
+    tabindex="-1"
+    aria-labelledby="recentWhiteboardsSidebarLabel"
+  >
+    <div class="offcanvas-header border-bottom border-secondary">
+      <h5 id="recentWhiteboardsSidebarLabel" class="offcanvas-title">
         Recent Whiteboards
+      </h5>
+      <button
+        type="button"
+        class="btn-close btn-close-white"
+        data-bs-dismiss="offcanvas"
+        aria-label="Close"
+      />
     </div>
-    <div class="card-body p-0 overflow-auto">
+    <div class="offcanvas-body p-0">
       <RecentWhiteboardsList />
     </div>
   </div>
@@ -19,9 +32,9 @@ import RecentWhiteboardsList from './RecentWhiteboardsList.vue'
 
 <style scoped>
 
-.whiteboards-panel {
+#recentWhiteboardsSidebar.offcanvas-start {
-  max-height: 500px;
+  top: 56px;
-  width: 100%;
+  height: calc(100vh - 56px);
 }
 
 </style>

front/src/components/WhiteboardHistoryList.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { useWhiteboardStore } from '@/stores/whiteboards'
 import WhiteboardHistoryItem from './WhiteboardHistoryItem.vue'
 
+const router = useRouter()
 const store = useWhiteboardStore()
 
 onMounted(() => {
@@ -16,7 +18,7 @@ const sortedWhiteboards = computed(() =>
 )
 
 const handleClick = (whiteboard: any) => {
-  console.log('Clicked:', whiteboard)
+  router.push({ name: 'whiteboard', params: { id: whiteboard.id } })
 }
 </script>
 

front/src/components/WhiteboardHistorySidebar.vue

@@ -6,17 +6,6 @@ import WhiteboardHistoryList from './WhiteboardHistoryList.vue'
 
 <template>
 
-  <button
-    class="btn btn-dark position-fixed top-50 start-0 translate-middle-y rounded-0 rounded-end py-3 px-2"
-    type="button"
-    data-bs-toggle="offcanvas"
-    data-bs-target="#whiteboardSidebar"
-    aria-controls="whiteboardSidebar"
-    style="z-index: 1040; writing-mode: vertical-rl;"
-  >
-    My Whiteboards
-  </button>
-
   <div
     id="whiteboardSidebar"
     class="offcanvas offcanvas-start bg-dark text-light"

front/src/views/HomeView.vue

@@ -1,24 +1,94 @@
 <script setup lang="ts">
-
+import { ref } from 'vue'
 import WhiteboardHistorySidebar from '@/components/WhiteboardHistorySidebar.vue'
 import RecentWhiteboardsPanel from '@/components/RecentWhiteboardsPanel.vue'
 import { useAuthStore } from '@/stores/auth'
 
 const auth = useAuthStore()
-
+const joinCode = ref('')
+const whiteboardTitle = ref('')
+const showCreateModal = ref(false)
 </script>
 
 <template>
-  <WhiteboardHistorySidebar v-if="auth.isAuthenticated" />
-
-  <div class="container py-4">
   <div
     v-if="auth.isAuthenticated"
-      class="d-flex justify-content-center position-absolute bottom-0 start-50 translate-middle-x mb-3 w-50"
+    class="position-fixed start-0 top-50 translate-middle-y d-flex flex-column"
+    style="z-index: 1040;"
   >
-      <RecentWhiteboardsPanel />
+    <button
+      class="btn btn-dark rounded-0 rounded-end py-3 px-2"
+      type="button"
+      data-bs-toggle="offcanvas"
+      data-bs-target="#whiteboardSidebar"
+      aria-controls="whiteboardSidebar"
+      style="writing-mode: vertical-rl;"
+    >
+      My Whiteboards
+    </button>
+    <button
+      class="btn btn-dark rounded-0 rounded-end py-3 px-2"
+      type="button"
+      data-bs-toggle="offcanvas"
+      data-bs-target="#recentWhiteboardsSidebar"
+      aria-controls="recentWhiteboardsSidebar"
+      style="writing-mode: vertical-rl;"
+    >
+      Recent Whiteboards
+    </button>
+  </div>
+
+  <div
+    v-if="auth.isAuthenticated"
+    class="d-flex align-items-center justify-content-center"
+    style="min-height: calc(100vh - 56px);"
+  >
+    <div style="width: 320px;">
+      <input
+        v-model="joinCode"
+        type="text"
+        class="form-control text-center bg-dark text-light border-secondary"
+        style="font-size: 1.5rem; padding: 0.75rem;"
+        placeholder="Enter 8-digit code"
+        maxlength="8"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        @input="joinCode = joinCode.replace(/\D/g, '')"
+      />
+      <button class="btn btn-primary w-75 mt-2 d-block mx-auto">Join with code</button>
+      <div class="text-center">
+        <small class="text-muted my-4 d-inline-block">or</small>
+      </div>
+      <button class="btn btn-outline-light w-75 d-block mx-auto" @click="showCreateModal = true">Create new whiteboard</button>
     </div>
   </div>
+
+  <div v-if="showCreateModal" class="modal d-block" tabindex="-1" @click.self="showCreateModal = false">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content bg-dark text-light">
+        <div class="modal-header border-secondary">
+          <h5 class="modal-title">Create new whiteboard</h5>
+          <button type="button" class="btn-close btn-close-white" @click="showCreateModal = false"></button>
+        </div>
+        <div class="modal-body">
+          <input
+            v-model="whiteboardTitle"
+            type="text"
+            class="form-control bg-dark text-light border-secondary"
+            placeholder="Whiteboard title"
+          />
+        </div>
+        <div class="modal-footer border-secondary">
+          <button type="button" class="btn btn-secondary" @click="showCreateModal = false">Cancel</button>
+          <button type="button" class="btn btn-primary">Create</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-if="showCreateModal" class="modal-backdrop fade show"></div>
+
+  <WhiteboardHistorySidebar v-if="auth.isAuthenticated" />
+  <RecentWhiteboardsPanel v-if="auth.isAuthenticated" />
 </template>
 
 <style scoped>