diff --git a/ui/src/components/ui/accordion/Accordion.vue b/ui/src/components/ui/accordion/Accordion.vue
new file mode 100644
index 0000000..21502b8
--- /dev/null
+++ b/ui/src/components/ui/accordion/Accordion.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
diff --git a/ui/src/components/ui/accordion/AccordionContent.vue b/ui/src/components/ui/accordion/AccordionContent.vue
new file mode 100644
index 0000000..7d03d33
--- /dev/null
+++ b/ui/src/components/ui/accordion/AccordionContent.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
diff --git a/ui/src/components/ui/accordion/AccordionItem.vue b/ui/src/components/ui/accordion/AccordionItem.vue
new file mode 100644
index 0000000..1ee1be8
--- /dev/null
+++ b/ui/src/components/ui/accordion/AccordionItem.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/ui/src/components/ui/accordion/AccordionTrigger.vue b/ui/src/components/ui/accordion/AccordionTrigger.vue
new file mode 100644
index 0000000..83aa74f
--- /dev/null
+++ b/ui/src/components/ui/accordion/AccordionTrigger.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ui/src/components/ui/accordion/index.ts b/ui/src/components/ui/accordion/index.ts
new file mode 100644
index 0000000..9340ac0
--- /dev/null
+++ b/ui/src/components/ui/accordion/index.ts
@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index f859622..8e15805 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -4,7 +4,7 @@ const typography = require('@tailwindcss/typography')
/** @type {import('tailwindcss').Config} */
module.exports = {
- darkMode: ['media'],
+ darkMode: ['media', 'class'],
safelist: ['dark', 'size-5', 'size-12'],
prefix: '',
@@ -16,90 +16,106 @@ module.exports = {
],
theme: {
- container: {
- center: true,
- padding: '2rem',
- screens: {
- '2xl': '1400px'
- }
- },
- extend: {
- colors: {
- border: 'hsl(var(--border))',
- input: 'hsl(var(--input))',
- ring: 'hsl(var(--ring))',
- background: 'hsl(var(--background))',
- foreground: 'hsl(var(--foreground))',
- primary: {
- DEFAULT: 'hsl(var(--primary))',
- foreground: 'hsl(var(--primary-foreground))'
- },
- secondary: {
- DEFAULT: 'hsl(var(--secondary))',
- foreground: 'hsl(var(--secondary-foreground))'
- },
- destructive: {
- DEFAULT: 'hsl(var(--destructive))',
- foreground: 'hsl(var(--destructive-foreground))'
- },
- muted: {
- DEFAULT: 'hsl(var(--muted))',
- foreground: 'hsl(var(--muted-foreground))'
- },
- accent: {
- DEFAULT: 'hsl(var(--accent))',
- foreground: 'hsl(var(--accent-foreground))'
- },
- popover: {
- DEFAULT: 'hsl(var(--popover))',
- foreground: 'hsl(var(--popover-foreground))'
- },
- card: {
- DEFAULT: 'hsl(var(--card))',
- foreground: 'hsl(var(--card-foreground))'
- },
- sidebar: {
- DEFAULT: 'hsl(var(--sidebar-background))',
- foreground: 'hsl(var(--sidebar-foreground))',
- primary: 'hsl(var(--sidebar-primary))',
- 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
- accent: 'hsl(var(--sidebar-accent))',
- 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
- border: 'hsl(var(--sidebar-border))',
- ring: 'hsl(var(--sidebar-ring))'
- }
- },
- borderRadius: {
- xl: 'calc(var(--radius) + 4px)',
- lg: 'var(--radius)',
- md: 'calc(var(--radius) - 2px)',
- sm: 'calc(var(--radius) - 4px)'
- },
- keyframes: {
- 'accordion-down': {
- from: { height: 0 },
- to: { height: 'var(--radix-accordion-content-height)' }
- },
- 'accordion-up': {
- from: { height: 'var(--radix-accordion-content-height)' },
- to: { height: 0 }
- },
- 'collapsible-down': {
- from: { height: 0 },
- to: { height: 'var(--radix-collapsible-content-height)' }
- },
- 'collapsible-up': {
- from: { height: 'var(--radix-collapsible-content-height)' },
- to: { height: 0 }
- }
- },
- animation: {
- 'accordion-down': 'accordion-down 0.2s ease-out',
- 'accordion-up': 'accordion-up 0.2s ease-out',
- 'collapsible-down': 'collapsible-down 0.2s ease-in-out',
- 'collapsible-up': 'collapsible-up 0.2s ease-in-out'
- }
- }
+ container: {
+ center: true,
+ padding: '2rem',
+ screens: {
+ '2xl': '1400px'
+ }
+ },
+ extend: {
+ colors: {
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))'
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))'
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))'
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))'
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))'
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))'
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))'
+ },
+ sidebar: {
+ DEFAULT: 'hsl(var(--sidebar-background))',
+ foreground: 'hsl(var(--sidebar-foreground))',
+ primary: 'hsl(var(--sidebar-primary))',
+ 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+ accent: 'hsl(var(--sidebar-accent))',
+ 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+ border: 'hsl(var(--sidebar-border))',
+ ring: 'hsl(var(--sidebar-ring))'
+ }
+ },
+ borderRadius: {
+ xl: 'calc(var(--radius) + 4px)',
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)'
+ },
+ keyframes: {
+ 'accordion-down': {
+ from: {
+ height: '0'
+ },
+ to: {
+ height: 'var(--reka-accordion-content-height)'
+ }
+ },
+ 'accordion-up': {
+ from: {
+ height: 'var(--reka-accordion-content-height)'
+ },
+ to: {
+ height: '0'
+ }
+ },
+ 'collapsible-down': {
+ from: {
+ height: 0
+ },
+ to: {
+ height: 'var(--radix-collapsible-content-height)'
+ }
+ },
+ 'collapsible-up': {
+ from: {
+ height: 'var(--radix-collapsible-content-height)'
+ },
+ to: {
+ height: 0
+ }
+ }
+ },
+ animation: {
+ 'accordion-down': 'accordion-down 0.2s ease-out',
+ 'accordion-up': 'accordion-up 0.2s ease-out',
+ 'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+ 'collapsible-up': 'collapsible-up 0.2s ease-in-out'
+ }
+ }
},
plugins: [animate, typography]
}
diff --git a/ui/tests/e2e/comments.spec.ts b/ui/tests/e2e/comments.spec.ts
index 12aad49..a325ea7 100644
--- a/ui/tests/e2e/comments.spec.ts
+++ b/ui/tests/e2e/comments.spec.ts
@@ -15,10 +15,9 @@ test.describe('update a comment', () => {
{
field: 'message',
update: async (page) => {
- await page.getByRole('tab', { name: 'Comments' }).click()
await page.getByRole('button', { name: 'More' }).click()
await page.getByRole('menuitem', { name: 'Edit' }).click()
- await page.locator('textarea').nth(1).fill('Updated Comment')
+ await page.locator('.CodeMirror textarea').first().fill('Updated Comment')
await page.getByRole('button', { name: 'Save' }).click()
},
assert: async (page) => {
@@ -46,7 +45,6 @@ test('can delete a comment', async ({ page }) => {
await createTicket(page, ticketName)
const message = `comment-${randomUUID()}`
await createComment(page, message)
- await page.getByRole('tab', { name: 'Comments' }).click()
await page.getByRole('button', { name: 'More' }).click()
await page.getByRole('menuitem', { name: 'Delete' }).click()
await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click()
diff --git a/ui/tests/e2e/tasks.spec.ts b/ui/tests/e2e/tasks.spec.ts
index 92c2391..616a6df 100644
--- a/ui/tests/e2e/tasks.spec.ts
+++ b/ui/tests/e2e/tasks.spec.ts
@@ -17,9 +17,8 @@ test.describe('update a task', () => {
update: async (page, taskName: string) => {
await page.getByText("Toggle Sidebar").click()
- await page.getByRole('tab', { name: 'Tasks' }).click()
await page.getByText(taskName).click()
- await page.getByRole('tabpanel', { name: 'Tasks' }).getByRole('textbox').fill('Updated Task')
+ await page.locator('input[autofocus]').fill('Updated Task')
await page.keyboard.press('Enter')
},
assert: async (page) => {
@@ -29,7 +28,6 @@ test.describe('update a task', () => {
{
field: 'status',
update: async (page) => {
- await page.getByRole('tab', { name: 'Tasks' }).click()
const cb = page.getByRole('checkbox').first()
await cb.click()
},
@@ -59,7 +57,6 @@ test('can delete a task', async ({ page }) => {
await createTicket(page, ticketName)
const taskName = `task-${randomUUID()}`
await createTask(page, taskName, false)
- await page.getByRole('tab', { name: 'Tasks' }).click()
await page.locator('button', { hasText: 'Delete Task' }).click()
await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click()
await expect(page.getByText(taskName)).toHaveCount(0)
diff --git a/ui/tests/e2e/timeline.spec.ts b/ui/tests/e2e/timeline.spec.ts
index 166684a..b5b8717 100644
--- a/ui/tests/e2e/timeline.spec.ts
+++ b/ui/tests/e2e/timeline.spec.ts
@@ -17,10 +17,9 @@ test.describe('update a timeline item', () => {
await createTicket(page, ticketName)
const msg = `timeline-${randomUUID()}`
await createTimeline(page, msg)
- await page.getByRole('tab', { name: 'Timeline' }).click()
await page.getByRole('button', { name: 'More' }).click()
await page.getByRole('menuitem', { name: 'Edit' }).click()
- await page.locator('textarea').nth(1).fill('Updated Timeline')
+ await page.locator('.CodeMirror textarea').first().fill('Updated Timeline')
await page.getByRole('button', { name: 'Save' }).click()
await expect(page.getByText('Updated Timeline')).toBeVisible()
})
@@ -32,7 +31,6 @@ test('can delete a timeline item', async ({ page }) => {
await createTicket(page, ticketName)
const msg = `timeline-${randomUUID()}`
await createTimeline(page, msg)
- await page.getByRole('tab', { name: 'Timeline' }).click()
await page.getByRole('button', { name: 'More' }).click()
await page.getByRole('menuitem', { name: 'Delete' }).click()
await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click()
diff --git a/ui/tests/e2e/util.ts b/ui/tests/e2e/util.ts
index 4047968..136d9d4 100644
--- a/ui/tests/e2e/util.ts
+++ b/ui/tests/e2e/util.ts
@@ -39,23 +39,26 @@ export const createTicket = async (page, name: string) => {
}
export const createTimeline = async (page, message: string) => {
- await page.getByRole('tab', { name: 'Timeline' }).click()
await page.getByRole('button', { name: 'Add Timeline Item' }).click()
- await page.getByRole('tabpanel', { name: 'Timeline' }).getByRole('textbox').fill(message)
+ const editor = page.locator('.EasyMDEContainer .CodeMirror').last()
+ await expect(editor).toBeVisible()
+ await editor.click()
+ await page.keyboard.type(message)
await page.getByRole('button', { name: 'Save' }).click()
await expect(page.getByText(message)).toBeVisible()
}
export const createComment = async (page, message: string) => {
- await page.getByRole('tab', { name: 'Comments' }).click()
await page.getByRole('button', { name: 'Add Comment' }).click()
- await page.getByRole('tabpanel', { name: 'Comments' }).getByRole('textbox').fill(message)
+ const editor = page.locator('.EasyMDEContainer .CodeMirror').last()
+ await expect(editor).toBeVisible()
+ await editor.click()
+ await page.keyboard.type(message)
await page.getByRole('button', { name: 'Save' }).click()
await expect(page.getByText(message)).toBeVisible()
}
export const createTask = async (page, name: string, done: boolean) => {
- await page.getByRole('tab', { name: 'Tasks' }).click()
await page.getByRole('button', { name: 'Add Task' }).click()
await page.getByPlaceholder('Add a task...').fill(name)
await page.getByRole('button', { name: 'Save' }).click()