Merge branch 'main' into feature-whiteboards-recent-and-history

# Conflicts:
#	front/src/App.vue

front/src/components/whiteboard/WhiteboardCanvas.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useWhiteboardStore } from '@/stores/whiteboard.ts'
+import type { Rectangle } from '@/types/whiteboard.ts'
+import SvgRectangle from '@/components/whiteboard/shapes/SvgRectangle.vue'
+import SvgDraftRect from '@/components/whiteboard/shapes/SvgDraftRect.vue'
+
+const store = useWhiteboardStore()
+
+const isDragging = ref(false)
+const dragStart = ref({ x: 0, y: 0 })
+const dragEnd = ref({ x: 0, y: 0 })
+
+const draftRect = computed(() => {
+  if (!isDragging.value) return null
+  const x = Math.min(dragStart.value.x, dragEnd.value.x)
+  const y = Math.min(dragStart.value.y, dragEnd.value.y)
+  const width = Math.abs(dragEnd.value.x - dragStart.value.x)
+  const height = Math.abs(dragEnd.value.y - dragStart.value.y)
+  return { x, y, width, height }
+})
+
+function onMouseDown(e: MouseEvent) {
+  if (store.selectedTool !== 'rectangle') return
+  const svg = (e.currentTarget as SVGSVGElement)
+  const rect = svg.getBoundingClientRect()
+  const x = e.clientX - rect.left
+  const y = e.clientY - rect.top
+  dragStart.value = { x, y }
+  dragEnd.value = { x, y }
+  isDragging.value = true
+}
+
+function onMouseMove(e: MouseEvent) {
+  if (!isDragging.value) return
+  const svg = (e.currentTarget as SVGSVGElement)
+  const rect = svg.getBoundingClientRect()
+  dragEnd.value = {
+    x: e.clientX - rect.left,
+    y: e.clientY - rect.top,
+  }
+}
+
+function onMouseUp() {
+  if (!isDragging.value) return
+  isDragging.value = false
+
+  const x1 = Math.min(dragStart.value.x, dragEnd.value.x)
+  const y1 = Math.min(dragStart.value.y, dragEnd.value.y)
+  const x2 = Math.max(dragStart.value.x, dragEnd.value.x)
+  const y2 = Math.max(dragStart.value.y, dragEnd.value.y)
+
+  if (x2 - x1 < 5 && y2 - y1 < 5) return
+
+  const rectangle: Rectangle = {
+    id: crypto.randomUUID(),
+    ownerId: '00000000-0000-0000-0000-000000000000',
+    position: { x: Math.round(x1), y: Math.round(y1) },
+    endPosition: { x: Math.round(x2), y: Math.round(y2) },
+    color: '#4f9dff',
+    borderThickness: 2,
+  }
+
+  store.addRectangle(rectangle)
+}
+</script>
+
+<template>
+  <svg
+    class="whiteboard-canvas"
+    @mousedown="onMouseDown"
+    @mousemove="onMouseMove"
+    @mouseup="onMouseUp"
+    @mouseleave="onMouseUp"
+  >
+    <SvgRectangle
+      v-for="rect in store.whiteboard?.rectangles"
+      :key="rect.id"
+      :rectangle="rect"
+    />
+    <SvgDraftRect
+      v-if="draftRect"
+      :x="draftRect.x"
+      :y="draftRect.y"
+      :width="draftRect.width"
+      :height="draftRect.height"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.whiteboard-canvas {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background-color: #1a1a2e;
+  cursor: crosshair;
+  display: block;
+}
+</style>

front/src/components/whiteboard/WhiteboardToolbar.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useWhiteboardStore } from '@/stores/whiteboard.ts'
+import type { ShapeTool } from '@/types/whiteboard.ts'
+
+const store = useWhiteboardStore()
+const emit = defineEmits<{ leave: [] }>()
+
+const tools: { name: ShapeTool; label: string; icon: string; enabled: boolean }[] = [
+  { name: 'rectangle', label: 'Rectangle', icon: '▭', enabled: true },
+  { name: 'arrow', label: 'Arrow', icon: '→', enabled: false },
+  { name: 'line', label: 'Line', icon: '╱', enabled: false },
+  { name: 'text', label: 'Text', icon: 'T', enabled: false },
+]
+</script>
+
+<template>
+  <div class="toolbar d-flex flex-column align-items-center py-2 gap-2">
+    <button
+      v-for="tool in tools"
+      :key="tool.name"
+      class="btn btn-sm"
+      :class="[
+        store.selectedTool === tool.name ? 'btn-primary' : 'btn-outline-secondary',
+        { disabled: !tool.enabled },
+      ]"
+      :disabled="!tool.enabled"
+      :title="tool.enabled ? tool.label : `${tool.label} (coming soon)`"
+      style="width: 40px; height: 40px; font-size: 1.1rem"
+      @click="tool.enabled && store.selectTool(tool.name)"
+    >
+      {{ tool.icon }}
+    </button>
+
+    <div class="mt-auto mb-2">
+      <button
+        class="btn btn-sm btn-outline-danger"
+        title="Leave whiteboard"
+        style="width: 40px; height: 40px"
+        @click="emit('leave')"
+      >
+        ✕
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.toolbar {
+  width: 56px;
+  background-color: #0d0d1a;
+  border-right: 1px solid #2a2a3e;
+  height: 100%;
+}
+</style>

front/src/components/whiteboard/shapes/SvgDraftRect.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = defineProps<{
+  x: number
+  y: number
+  width: number
+  height: number
+}>()
+</script>
+
+<template>
+  <rect
+    :x="props.x"
+    :y="props.y"
+    :width="props.width"
+    :height="props.height"
+    stroke="#4f9dff"
+    :stroke-width="2"
+    stroke-dasharray="6 3"
+    fill="none"
+    opacity="0.7"
+  />
+</template>

front/src/components/whiteboard/shapes/SvgRectangle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { Rectangle } from '@/types/whiteboard.ts'
+
+const props = defineProps<{ rectangle: Rectangle }>()
+</script>
+
+<template>
+  <rect
+    :x="Math.min(props.rectangle.position.x, props.rectangle.endPosition.x)"
+    :y="Math.min(props.rectangle.position.y, props.rectangle.endPosition.y)"
+    :width="Math.abs(props.rectangle.endPosition.x - props.rectangle.position.x)"
+    :height="Math.abs(props.rectangle.endPosition.y - props.rectangle.position.y)"
+    :stroke="props.rectangle.color"
+    :stroke-width="props.rectangle.borderThickness"
+    fill="none"
+  />
+</template>