Add web GUI: FastAPI API + Vue 3 frontend with dark theme
API (web/api.py):
GET /api/projects, /api/projects/{id}, /api/tasks/{id}
GET /api/decisions?project=X, /api/cost?days=7, /api/support/tickets
POST /api/projects, /api/tasks, /api/decisions, /api/bootstrap
CORS for localhost:5173, all queries via models.py
Frontend (web/frontend/):
Vue 3 + TypeScript + Vite + Tailwind CSS v3
Dashboard: project cards with task counters, cost, status badges
ProjectView: tabs for Tasks/Decisions/Modules with filters
Modals: Add Project, Add Task, Add Decision, Bootstrap
Dark theme, monospace font, minimal clean design
Startup:
API: cd web && uvicorn api:app --reload --port 8420
Web: cd web/frontend && npm install && npm run dev
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
johnfrum1234
parent
b95db7c7d6
commit
86e5b8febf
21 changed files with 3386 additions and 1 deletions
167
web/frontend/src/views/Dashboard.vue
Normal file
167
web/frontend/src/views/Dashboard.vue
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { api, type Project, type CostEntry } from '../api'
|
||||
import Badge from '../components/Badge.vue'
|
||||
import Modal from '../components/Modal.vue'
|
||||
|
||||
const projects = ref<Project[]>([])
|
||||
const costs = ref<CostEntry[]>([])
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
|
||||
// Add project modal
|
||||
const showAdd = ref(false)
|
||||
const form = ref({ id: '', name: '', path: '', tech_stack: '', priority: 5 })
|
||||
const formError = ref('')
|
||||
|
||||
// Bootstrap modal
|
||||
const showBootstrap = ref(false)
|
||||
const bsForm = ref({ id: '', name: '', path: '' })
|
||||
const bsError = ref('')
|
||||
const bsResult = ref('')
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
loading.value = true
|
||||
;[projects.value, costs.value] = await Promise.all([api.projects(), api.cost(7)])
|
||||
} catch (e: any) {
|
||||
error.value = e.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
|
||||
const costMap = computed(() => {
|
||||
const m: Record<string, number> = {}
|
||||
for (const c of costs.value) m[c.project_id] = c.total_cost_usd
|
||||
return m
|
||||
})
|
||||
|
||||
const totalCost = computed(() => costs.value.reduce((s, c) => s + c.total_cost_usd, 0))
|
||||
|
||||
function statusColor(s: string) {
|
||||
if (s === 'active') return 'green'
|
||||
if (s === 'paused') return 'yellow'
|
||||
if (s === 'maintenance') return 'orange'
|
||||
return 'gray'
|
||||
}
|
||||
|
||||
async function addProject() {
|
||||
formError.value = ''
|
||||
try {
|
||||
const ts = form.value.tech_stack ? form.value.tech_stack.split(',').map(s => s.trim()).filter(Boolean) : undefined
|
||||
await api.createProject({ ...form.value, tech_stack: ts, priority: form.value.priority })
|
||||
showAdd.value = false
|
||||
form.value = { id: '', name: '', path: '', tech_stack: '', priority: 5 }
|
||||
await load()
|
||||
} catch (e: any) {
|
||||
formError.value = e.message
|
||||
}
|
||||
}
|
||||
|
||||
async function runBootstrap() {
|
||||
bsError.value = ''
|
||||
bsResult.value = ''
|
||||
try {
|
||||
const res = await api.bootstrap(bsForm.value)
|
||||
bsResult.value = `Created: ${res.project.id} (${res.project.name})`
|
||||
await load()
|
||||
} catch (e: any) {
|
||||
bsError.value = e.message
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-gray-100">Dashboard</h1>
|
||||
<p class="text-sm text-gray-500" v-if="totalCost > 0">Cost this week: ${{ totalCost.toFixed(2) }}</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button @click="showBootstrap = true"
|
||||
class="px-3 py-1.5 text-xs bg-purple-900/50 text-purple-400 border border-purple-800 rounded hover:bg-purple-900">
|
||||
Bootstrap
|
||||
</button>
|
||||
<button @click="showAdd = true"
|
||||
class="px-3 py-1.5 text-xs bg-gray-800 text-gray-300 border border-gray-700 rounded hover:bg-gray-700">
|
||||
+ Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="loading" class="text-gray-500 text-sm">Loading...</p>
|
||||
<p v-else-if="error" class="text-red-400 text-sm">{{ error }}</p>
|
||||
|
||||
<div v-else class="grid gap-3">
|
||||
<router-link
|
||||
v-for="p in projects" :key="p.id"
|
||||
:to="`/project/${p.id}`"
|
||||
class="block border border-gray-800 rounded-lg p-4 hover:border-gray-600 transition-colors no-underline"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-semibold text-gray-200">{{ p.id }}</span>
|
||||
<Badge :text="p.status" :color="statusColor(p.status)" />
|
||||
<span class="text-sm text-gray-400">{{ p.name }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-xs text-gray-500">
|
||||
<span v-if="costMap[p.id]">${{ costMap[p.id]?.toFixed(2) }}/wk</span>
|
||||
<span>pri {{ p.priority }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4 text-xs">
|
||||
<span class="text-gray-500">{{ p.total_tasks }} tasks</span>
|
||||
<span v-if="p.active_tasks" class="text-blue-400">{{ p.active_tasks }} active</span>
|
||||
<span v-if="p.blocked_tasks" class="text-red-400">{{ p.blocked_tasks }} blocked</span>
|
||||
<span v-if="p.done_tasks" class="text-green-500">{{ p.done_tasks }} done</span>
|
||||
<span v-if="p.total_tasks - p.done_tasks - p.active_tasks - p.blocked_tasks > 0" class="text-gray-500">
|
||||
{{ p.total_tasks - p.done_tasks - p.active_tasks - p.blocked_tasks }} pending
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- Add Project Modal -->
|
||||
<Modal v-if="showAdd" title="Add Project" @close="showAdd = false">
|
||||
<form @submit.prevent="addProject" class="space-y-3">
|
||||
<input v-model="form.id" placeholder="ID (e.g. vdol)" required
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<input v-model="form.name" placeholder="Name" required
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<input v-model="form.path" placeholder="Path (e.g. ~/projects/myproj)" required
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<input v-model="form.tech_stack" placeholder="Tech stack (comma-separated)"
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<input v-model.number="form.priority" type="number" min="1" max="10" placeholder="Priority (1-10)"
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<p v-if="formError" class="text-red-400 text-xs">{{ formError }}</p>
|
||||
<button type="submit"
|
||||
class="w-full py-2 bg-blue-900/50 text-blue-400 border border-blue-800 rounded text-sm hover:bg-blue-900">
|
||||
Create
|
||||
</button>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<!-- Bootstrap Modal -->
|
||||
<Modal v-if="showBootstrap" title="Bootstrap Project" @close="showBootstrap = false">
|
||||
<form @submit.prevent="runBootstrap" class="space-y-3">
|
||||
<input v-model="bsForm.path" placeholder="Project path (e.g. ~/projects/vdolipoperek)" required
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<input v-model="bsForm.id" placeholder="ID (e.g. vdol)" required
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<input v-model="bsForm.name" placeholder="Name" required
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<p v-if="bsError" class="text-red-400 text-xs">{{ bsError }}</p>
|
||||
<p v-if="bsResult" class="text-green-400 text-xs">{{ bsResult }}</p>
|
||||
<button type="submit"
|
||||
class="w-full py-2 bg-purple-900/50 text-purple-400 border border-purple-800 rounded text-sm hover:bg-purple-900">
|
||||
Bootstrap
|
||||
</button>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
312
web/frontend/src/views/ProjectView.vue
Normal file
312
web/frontend/src/views/ProjectView.vue
Normal file
|
|
@ -0,0 +1,312 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { api, type ProjectDetail } from '../api'
|
||||
import Badge from '../components/Badge.vue'
|
||||
import Modal from '../components/Modal.vue'
|
||||
|
||||
const props = defineProps<{ id: string }>()
|
||||
|
||||
const project = ref<ProjectDetail | null>(null)
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
const activeTab = ref<'tasks' | 'decisions' | 'modules'>('tasks')
|
||||
|
||||
// Filters
|
||||
const taskStatusFilter = ref('')
|
||||
const decisionTypeFilter = ref('')
|
||||
const decisionSearch = ref('')
|
||||
|
||||
// Add task modal
|
||||
const showAddTask = ref(false)
|
||||
const taskForm = ref({ title: '', priority: 5, route_type: '' })
|
||||
const taskFormError = ref('')
|
||||
|
||||
// Add decision modal
|
||||
const showAddDecision = ref(false)
|
||||
const decForm = ref({ type: 'decision', title: '', description: '', category: '', tags: '' })
|
||||
const decFormError = ref('')
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
loading.value = true
|
||||
project.value = await api.project(props.id)
|
||||
} catch (e: any) {
|
||||
error.value = e.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
|
||||
const filteredTasks = computed(() => {
|
||||
if (!project.value) return []
|
||||
let tasks = project.value.tasks
|
||||
if (taskStatusFilter.value) tasks = tasks.filter(t => t.status === taskStatusFilter.value)
|
||||
return tasks
|
||||
})
|
||||
|
||||
const filteredDecisions = computed(() => {
|
||||
if (!project.value) return []
|
||||
let decs = project.value.decisions
|
||||
if (decisionTypeFilter.value) decs = decs.filter(d => d.type === decisionTypeFilter.value)
|
||||
if (decisionSearch.value) {
|
||||
const q = decisionSearch.value.toLowerCase()
|
||||
decs = decs.filter(d => d.title.toLowerCase().includes(q) || d.description.toLowerCase().includes(q))
|
||||
}
|
||||
return decs
|
||||
})
|
||||
|
||||
function taskStatusColor(s: string) {
|
||||
const m: Record<string, string> = {
|
||||
pending: 'gray', in_progress: 'blue', review: 'purple',
|
||||
done: 'green', blocked: 'red', decomposed: 'yellow',
|
||||
}
|
||||
return m[s] || 'gray'
|
||||
}
|
||||
|
||||
function decTypeColor(t: string) {
|
||||
const m: Record<string, string> = {
|
||||
decision: 'blue', gotcha: 'red', workaround: 'yellow',
|
||||
rejected_approach: 'gray', convention: 'purple',
|
||||
}
|
||||
return m[t] || 'gray'
|
||||
}
|
||||
|
||||
function modTypeColor(t: string) {
|
||||
const m: Record<string, string> = {
|
||||
frontend: 'blue', backend: 'green', shared: 'purple', infra: 'orange',
|
||||
}
|
||||
return m[t] || 'gray'
|
||||
}
|
||||
|
||||
const taskStatuses = computed(() => {
|
||||
if (!project.value) return []
|
||||
const s = new Set(project.value.tasks.map(t => t.status))
|
||||
return Array.from(s).sort()
|
||||
})
|
||||
|
||||
const decTypes = computed(() => {
|
||||
if (!project.value) return []
|
||||
const s = new Set(project.value.decisions.map(d => d.type))
|
||||
return Array.from(s).sort()
|
||||
})
|
||||
|
||||
async function addTask() {
|
||||
taskFormError.value = ''
|
||||
try {
|
||||
await api.createTask({
|
||||
project_id: props.id,
|
||||
title: taskForm.value.title,
|
||||
priority: taskForm.value.priority,
|
||||
route_type: taskForm.value.route_type || undefined,
|
||||
})
|
||||
showAddTask.value = false
|
||||
taskForm.value = { title: '', priority: 5, route_type: '' }
|
||||
await load()
|
||||
} catch (e: any) {
|
||||
taskFormError.value = e.message
|
||||
}
|
||||
}
|
||||
|
||||
async function addDecision() {
|
||||
decFormError.value = ''
|
||||
try {
|
||||
const tags = decForm.value.tags ? decForm.value.tags.split(',').map(s => s.trim()).filter(Boolean) : undefined
|
||||
const body = {
|
||||
project_id: props.id,
|
||||
type: decForm.value.type,
|
||||
title: decForm.value.title,
|
||||
description: decForm.value.description,
|
||||
category: decForm.value.category || undefined,
|
||||
tags,
|
||||
}
|
||||
const res = await fetch('http://localhost:8420/api/decisions', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
if (!res.ok) throw new Error('Failed')
|
||||
showAddDecision.value = false
|
||||
decForm.value = { type: 'decision', title: '', description: '', category: '', tags: '' }
|
||||
await load()
|
||||
} catch (e: any) {
|
||||
decFormError.value = e.message
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="loading" class="text-gray-500 text-sm">Loading...</div>
|
||||
<div v-else-if="error" class="text-red-400 text-sm">{{ error }}</div>
|
||||
<div v-else-if="project">
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<router-link to="/" class="text-gray-600 hover:text-gray-400 text-sm no-underline">← back</router-link>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<h1 class="text-xl font-bold text-gray-100">{{ project.id }}</h1>
|
||||
<span class="text-gray-400">{{ project.name }}</span>
|
||||
<Badge :text="project.status" :color="project.status === 'active' ? 'green' : 'gray'" />
|
||||
</div>
|
||||
<div class="flex gap-2 flex-wrap mb-2" v-if="project.tech_stack?.length">
|
||||
<Badge v-for="t in project.tech_stack" :key="t" :text="t" color="purple" />
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">{{ project.path }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="flex gap-1 mb-4 border-b border-gray-800">
|
||||
<button v-for="tab in (['tasks', 'decisions', 'modules'] as const)" :key="tab"
|
||||
@click="activeTab = tab"
|
||||
class="px-4 py-2 text-sm border-b-2 transition-colors"
|
||||
:class="activeTab === tab
|
||||
? 'text-gray-200 border-blue-500'
|
||||
: 'text-gray-500 border-transparent hover:text-gray-300'">
|
||||
{{ tab.charAt(0).toUpperCase() + tab.slice(1) }}
|
||||
<span class="text-xs text-gray-600 ml-1">
|
||||
{{ tab === 'tasks' ? project.tasks.length
|
||||
: tab === 'decisions' ? project.decisions.length
|
||||
: project.modules.length }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tasks Tab -->
|
||||
<div v-if="activeTab === 'tasks'">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex gap-2">
|
||||
<select v-model="taskStatusFilter"
|
||||
class="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300">
|
||||
<option value="">All statuses</option>
|
||||
<option v-for="s in taskStatuses" :key="s" :value="s">{{ s }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<button @click="showAddTask = true"
|
||||
class="px-3 py-1 text-xs bg-gray-800 text-gray-300 border border-gray-700 rounded hover:bg-gray-700">
|
||||
+ Task
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="filteredTasks.length === 0" class="text-gray-600 text-sm">No tasks.</div>
|
||||
<div v-else class="space-y-1">
|
||||
<div v-for="t in filteredTasks" :key="t.id"
|
||||
class="flex items-center justify-between px-3 py-2 border border-gray-800 rounded text-sm hover:border-gray-700">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span class="text-gray-500 shrink-0 w-24">{{ t.id }}</span>
|
||||
<Badge :text="t.status" :color="taskStatusColor(t.status)" />
|
||||
<span class="text-gray-300 truncate">{{ t.title }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 shrink-0">
|
||||
<span v-if="t.assigned_role">{{ t.assigned_role }}</span>
|
||||
<span>pri {{ t.priority }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Decisions Tab -->
|
||||
<div v-if="activeTab === 'decisions'">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex gap-2">
|
||||
<select v-model="decisionTypeFilter"
|
||||
class="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300">
|
||||
<option value="">All types</option>
|
||||
<option v-for="t in decTypes" :key="t" :value="t">{{ t }}</option>
|
||||
</select>
|
||||
<input v-model="decisionSearch" placeholder="Search..."
|
||||
class="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300 placeholder-gray-600 w-48" />
|
||||
</div>
|
||||
<button @click="showAddDecision = true"
|
||||
class="px-3 py-1 text-xs bg-gray-800 text-gray-300 border border-gray-700 rounded hover:bg-gray-700">
|
||||
+ Decision
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="filteredDecisions.length === 0" class="text-gray-600 text-sm">No decisions.</div>
|
||||
<div v-else class="space-y-2">
|
||||
<div v-for="d in filteredDecisions" :key="d.id"
|
||||
class="px-3 py-2 border border-gray-800 rounded hover:border-gray-700">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-gray-600 text-xs">#{{ d.id }}</span>
|
||||
<Badge :text="d.type" :color="decTypeColor(d.type)" />
|
||||
<Badge v-if="d.category" :text="d.category" color="gray" />
|
||||
</div>
|
||||
<div class="text-sm text-gray-300">{{ d.title }}</div>
|
||||
<div v-if="d.description !== d.title" class="text-xs text-gray-500 mt-1">{{ d.description }}</div>
|
||||
<div v-if="d.tags?.length" class="flex gap-1 mt-1">
|
||||
<Badge v-for="tag in d.tags" :key="tag" :text="tag" color="purple" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modules Tab -->
|
||||
<div v-if="activeTab === 'modules'">
|
||||
<div v-if="project.modules.length === 0" class="text-gray-600 text-sm">No modules.</div>
|
||||
<div v-else class="space-y-1">
|
||||
<div v-for="m in project.modules" :key="m.id"
|
||||
class="flex items-center justify-between px-3 py-2 border border-gray-800 rounded text-sm hover:border-gray-700">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-300 font-medium">{{ m.name }}</span>
|
||||
<Badge :text="m.type" :color="modTypeColor(m.type)" />
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-xs text-gray-600">
|
||||
<span>{{ m.path }}</span>
|
||||
<span v-if="m.owner_role">{{ m.owner_role }}</span>
|
||||
<span v-if="m.description">{{ m.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Task Modal -->
|
||||
<Modal v-if="showAddTask" title="Add Task" @close="showAddTask = false">
|
||||
<form @submit.prevent="addTask" class="space-y-3">
|
||||
<input v-model="taskForm.title" placeholder="Task title" required
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<select v-model="taskForm.route_type"
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-300">
|
||||
<option value="">No type</option>
|
||||
<option value="debug">debug</option>
|
||||
<option value="feature">feature</option>
|
||||
<option value="refactor">refactor</option>
|
||||
<option value="hotfix">hotfix</option>
|
||||
</select>
|
||||
<input v-model.number="taskForm.priority" type="number" min="1" max="10" placeholder="Priority"
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<p v-if="taskFormError" class="text-red-400 text-xs">{{ taskFormError }}</p>
|
||||
<button type="submit"
|
||||
class="w-full py-2 bg-blue-900/50 text-blue-400 border border-blue-800 rounded text-sm hover:bg-blue-900">
|
||||
Create
|
||||
</button>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<!-- Add Decision Modal -->
|
||||
<Modal v-if="showAddDecision" title="Add Decision" @close="showAddDecision = false">
|
||||
<form @submit.prevent="addDecision" class="space-y-3">
|
||||
<select v-model="decForm.type" required
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-300">
|
||||
<option value="decision">decision</option>
|
||||
<option value="gotcha">gotcha</option>
|
||||
<option value="workaround">workaround</option>
|
||||
<option value="convention">convention</option>
|
||||
<option value="rejected_approach">rejected_approach</option>
|
||||
</select>
|
||||
<input v-model="decForm.title" placeholder="Title" required
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<textarea v-model="decForm.description" placeholder="Description" rows="3" required
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600 resize-y"></textarea>
|
||||
<input v-model="decForm.category" placeholder="Category (e.g. ui, api, security)"
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<input v-model="decForm.tags" placeholder="Tags (comma-separated)"
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
|
||||
<p v-if="decFormError" class="text-red-400 text-xs">{{ decFormError }}</p>
|
||||
<button type="submit"
|
||||
class="w-full py-2 bg-blue-900/50 text-blue-400 border border-blue-800 rounded text-sm hover:bg-blue-900">
|
||||
Create
|
||||
</button>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue