Add frontend/src/views/WorkspacesView.vue

frontend/src/views/WorkspacesView.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="workspaces">
+    <h2>Workspaces</h2>
+    <button @click="showCreateForm = true" class="btn btn-primary">Create Workspace</button>
+    
+    <div v-if="showCreateForm" class="modal">
+      <div class="modal-content">
+        <h3>New Workspace</h3>
+        <form @submit.prevent="createWorkspace">
+          <div class="form-group">
+            <label>Name</label>
+            <input v-model="newWorkspace.name" type="text" required />
+          </div>
+          <div class="form-group">
+            <label>Description</label>
+            <textarea v-model="newWorkspace.description"></textarea>
+          </div>
+          <button type="submit" class="btn btn-primary">Create</button>
+          <button @click="showCreateForm = false" type="button" class="btn">Cancel</button>
+        </form>
+      </div>
+    </div>
+
+    <div class="workspace-list">
+      <div v-for="ws in workspaces" :key="ws.id" class="workspace-card">
+        <h3>{{ ws.name }}</h3>
+        <p>{{ ws.description }}</p>
+        <router-link :to="'/workspace/' + ws.id" class="btn">Open</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useWorkspaceStore } from '../stores/workspace'
+
+const workspaceStore = useWorkspaceStore()
+const workspaces = ref([])
+const showCreateForm = ref(false)
+const newWorkspace = ref({ name: '', description: '' })
+
+onMounted(async () => {
+  await workspaceStore.fetchWorkspaces()
+  workspaces.value = workspaceStore.workspaces
+})
+
+const createWorkspace = async () => {
+  await workspaceStore.createWorkspace(newWorkspace.value.name, newWorkspace.value.description)
+  workspaces.value = workspaceStore.workspaces
+  showCreateForm.value = false
+  newWorkspace.value = { name: '', description: '' }
+}
+</script>