front

front/src/components/AppTopBar.vue

@@ -6,7 +6,7 @@ const auth = useAuthStore()
 </script>
 
 <template>
-  <nav class="navbar navbar-expand-md navbar-dark bg-dark border-bottom border-secondary">
+  <nav class="navbar navbar-expand-md navbar-dark bg-dark border-bottom border-secondary sticky-top">
     <div class="container">
       <RouterLink class="navbar-brand" to="/">AIPS</RouterLink>
 

front/src/components/RecentWhiteboardsItem.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { Whiteboard } from '@/types'
+
+const props = defineProps<{ whiteboard: Whiteboard }>()
+const emit = defineEmits<{ click: [whiteboard: Whiteboard] }>()
+
+const formatDate = (date: string | Date) =>
+  new Date(date).toLocaleDateString(
+    (navigator.languages && navigator.languages[0]) || '',
+    { day: '2-digit', month: '2-digit', year: 'numeric' }
+  )
+
+const handleClick = () => emit('click', props.whiteboard)
+</script>
+
+<template>
+  <div
+    class="card border rounded-3 p-3 cursor-pointer hover-card"
+    @click="handleClick"
+  >
+    <div class="d-flex justify-content-between align-items-start mb-2">
+      <h5 class="mb-0 text-dark">{{ whiteboard.title }}</h5>
+      <small class="text-muted">{{ formatDate(whiteboard.createdAt) }}</small>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.hover-card {
+  transition: all 0.2s ease;
+}
+
+.hover-card:hover {
+  border-color: #007bff !important;
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
+  transform: translateY(-2px);
+}
+
+</style>

front/src/components/RecentWhiteboardsList.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+
+import { onMounted, computed } from 'vue'
+import { useWhiteboardStore } from '@/stores/whiteboards'
+import RecentWhiteboardsItem from './RecentWhiteboardsItem.vue'
+
+const store = useWhiteboardStore()
+
+onMounted(() => {
+  if (store.recentWhiteboards.length === 0) store.getRecentWhiteboards()
+})
+
+const sortedWhiteboards = computed(() =>
+  [...store.recentWhiteboards].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  )
+)
+
+const handleClick = (whiteboard: any) => {
+  console.log('Clicked:', whiteboard)
+}
+
+</script>
+
+<template>
+
+  <div class="d-flex flex-column gap-3 overflow-auto h-100 w-100 p-3" v-if="sortedWhiteboards.length > 0">
+    <RecentWhiteboardsItem
+      v-for="wb in sortedWhiteboards"
+      :key="wb.id"
+      :whiteboard="wb"
+      @click="handleClick"
+    />
+  </div>
+  <div class="d-flex flex-column gap-3 overflow-auto h-100 w-100 p-3" v-else>
+    <p class="text-muted">No recent whiteboards</p>
+  </div>
+
+</template>

front/src/components/RecentWhiteboardsPanel.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+
+import RecentWhiteboardsList from './RecentWhiteboardsList.vue'
+
+</script>
+
+<template>
+
+  <div class="whiteboards-panel card border-secondary shadow-sm h-100">
+    <div class="card-header bg-light text-dark">
+      Recent Whiteboards
+    </div>
+    <div class="card-body p-0 overflow-auto">
+      <RecentWhiteboardsList />
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+
+.whiteboards-panel {
+  max-height: 500px;
+  width: 100%;
+}
+
+</style>

front/src/components/WhiteboardHistoryItem.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { Whiteboard } from '@/types'
+
+const props = defineProps<{ whiteboard: Whiteboard }>()
+const emit = defineEmits<{ click: [whiteboard: Whiteboard] }>()
+
+const formatDate = (date: string | Date) =>
+  new Date(date).toLocaleDateString(
+    (navigator.languages && navigator.languages[0]) || '',
+    { day: '2-digit', month: '2-digit', year: 'numeric' }
+  )
+
+const handleClick = () => emit('click', props.whiteboard)
+</script>
+
+<template>
+  <div
+    class="card border rounded-3 p-3 cursor-pointer hover-card"
+    @click="handleClick"
+  >
+    <div class="d-flex justify-content-between align-items-start mb-2">
+      <h5 class="mb-0 text-dark">{{ whiteboard.title }}</h5>
+      <small class="text-muted">{{ formatDate(whiteboard.createdAt) }}</small>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.hover-card {
+  transition: all 0.2s ease;
+}
+
+.hover-card:hover {
+  border-color: #007bff !important;
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
+  transform: translateY(-2px);
+}
+
+</style>

front/src/components/WhiteboardHistoryList.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted, computed } from 'vue'
+import { useWhiteboardStore } from '@/stores/whiteboards'
+import WhiteboardHistoryItem from './WhiteboardHistoryItem.vue'
+
+const store = useWhiteboardStore()
+
+onMounted(() => {
+  if (store.ownedWhiteboards.length === 0) store.getWhiteboardHistory()
+})
+
+const sortedWhiteboards = computed(() =>
+  [...store.ownedWhiteboards].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  )
+)
+
+const handleClick = (whiteboard: any) => {
+  console.log('Clicked:', whiteboard)
+}
+</script>
+
+<template>
+  <div class="d-flex flex-column gap-3 overflow-auto h-100 w-100 p-3" v-if="sortedWhiteboards.length > 0">
+    <WhiteboardHistoryItem
+      v-for="wb in sortedWhiteboards"
+      :key="wb.id"
+      :whiteboard="wb"
+      @click="handleClick"
+    />
+  </div>
+  <div class="d-flex flex-column gap-3 overflow-auto h-100 w-100 p-3" v-else>
+    <p class="text-muted">You have not created a whiteboard yet</p>
+  </div>
+</template>

front/src/components/WhiteboardHistorySidebar.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+
+import WhiteboardHistoryList from './WhiteboardHistoryList.vue'
+
+</script>
+
+<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"
+    tabindex="-1"
+    aria-labelledby="whiteboardSidebarLabel"
+  >
+    <div class="offcanvas-header border-bottom border-secondary">
+      <h5 id="whiteboardSidebarLabel" class="offcanvas-title">
+        My Whiteboards
+      </h5>
+      <button
+        type="button"
+        class="btn-close btn-close-white"
+        data-bs-dismiss="offcanvas"
+        aria-label="Close"
+      />
+    </div>
+    <div class="offcanvas-body p-0">
+      <WhiteboardHistoryList />
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+
+#whiteboardSidebar.offcanvas-start {
+  top: 56px;
+  height: calc(100vh - 56px);
+}
+
+@media (max-width: 768px) {
+  #whiteboardSidebar.offcanvas-start {
+    top: 56px;
+    height: calc(100vh - 56px);
+  }
+}
+
+</style>