The Kanban task detail opens as a native <dialog> via showModal(), which
paints in the browser top-layer. Floating UI appended to document.body
(or teleported to <body>) then renders behind the dialog regardless of
z-index, matching the bug class of #2940 / #1746 / #1899 / #1929.
- Emoji autocomplete popup: append to getPopupContainer(editor) (the open
dialog ancestor, else body), the same helper the slash menu and mentions
already use. Also switch its unmount to popupElement.remove() so it works
no matter which container it was appended to.
- Attachment dropzone overlay: teleport into the topmost open
dialog.modal-dialog instead of always <body>, mirroring Notification.vue,
so the drag-and-drop hint is visible while a task detail dialog is open.
Each rendered comment gets a "Reply" action (shown whenever the
viewer has write access, regardless of authorship). Clicking it
prefills the comment editor with a <blockquote data-comment-id="X">
wrapping the parent body so the canonical reply marker is the
blockquote itself.
A Vue NodeView on the blockquote extension renders an author
header + chevron when an injected commentReplyContext can resolve
the parent. The chevron scrolls to and briefly highlights the
original. Quotes whose parent isn't in the in-memory list (deleted,
on another page) render a degraded header with the chevron hidden.
Route the create flow through taskStore.createNewTask so titles typed
into the related-task input get parsed for labels, priority, assignees,
due dates and cross-project targets - matching the main add-task input.
Also surface the quick-add-magic hint next to the field.
The pseudo-element that extends the checkbox hit target also covered
label text content, which broke Playwright actionability checks for
clicks on text inside wider FancyCheckbox labels (e.g. the "Show
Archived" toggle on the projects list page).
Move the rule out of BaseCheckbox and into SingleTaskInProject's deep
override, where the label slot is already hidden via display: none, so
no neighboring content can be intercepted.
The flatpickr time inputs hardcoded `time_24hr: true`, so users who
selected the 12-hour format in their settings still got a 24-hour
picker — even though the displayed dates respected the preference.
Bind `time_24hr` to the existing `useTimeFormat` composable in:
- DatepickerInline (start/end/due dates and absolute reminders)
- DeferTask (defer due date)
- ApiTokenForm (API token expiry)
Reported at https://community.vikunja.io/t/4492.
Mouse event emulation from taps on touch devices caused the glance
tooltip to appear unexpectedly with no reliable way to dismiss it.
Gate the tooltip behind a `(hover: hover) and (pointer: fine)` media
query so it only activates on devices with a real pointer.
Adds aria-label='Mark {task} as done' to task checkboxes so
screen readers can distinguish between them. Passes ariaLabel
prop through FancyCheckbox → BaseCheckbox → input.
Fixes WCAG 2.4.6 (Headings and Labels).
The .media / .media-left / .media-content classes are only used in
Comments.vue. Ports the relevant rules into its scoped <style> block
and drops the partial import.
Replaces 33 for...in loops across 18 files with for...of + Object.keys/entries
or indexed for loops. for...in iterates enumerable string keys including
inherited ones, which is especially risky on reactive arrays (tasks, labels,
assignees, etc.) where polyfilled properties may appear.
Loops that mutate via splice during iteration now iterate backwards to avoid
index-shift bugs. Adds a no-restricted-syntax ESLint rule forbidding
ForInStatement to prevent regressions.
Closes#513
The --modal-content-spacing-tablet CSS variable is provided by Bulma's
components/modal partial. Inlining Bulma's default (40px) lets us drop that
partial.
Reminders.vue only read three task fields (dueDate/startDate/endDate)
and wrote one back (reminders). The ITask coupling was accidental.
Flip the prop to ITaskReminder[] and pass defaultRelativeTo / allowAbsolute
as plain props. TaskDetailView now owns the due/start/end priority
computation and binds v-model="task.reminders" directly. This also lets
the settings page reuse Reminders.vue for configuring default reminders.
Adds an allowAbsolute prop to ReminderDetail that hides the 'Date and
time' option when set to false, and a lockRelativeTo prop on
ReminderPeriod that hides the relativeTo select and forces the chosen
value. ReminderDetail threads them together so that when absolute
reminders are disallowed, the Custom form can only produce reminders
that anchor to defaultRelativeTo.
The tooltip span wrapping the checkbox used the inherited line-height
(~24px), so the 18px inline-block checkbox sat on the baseline and
appeared misaligned with the task text. Making the span an inline-flex
container collapses it to the checkbox size and centers it properly.
The Overview's ShowTasks component was not passing the canMarkAsDone prop
to SingleTaskInProject, which defaults to true. This caused read-only tasks
to show an interactive checkbox even though the user doesn't have write
permission.
Use the project's maxPermission from the project store to determine if the
user can mark the task as done. Also fix the disabled condition to use OR
logic so the checkbox is disabled when ANY condition applies: archived,
disabled, or when the user lacks write permission.
Fixes#2399
Replace the custom div-based Modal with the native HTML <dialog> element
using showModal()/close() API. Uses CSS opacity transitions with a
data-closing attribute for Firefox-compatible close animations, Teleport
to body, and focus save/restore. Updates E2E test selectors and fixes
QuickAddOverlay selectors for the new dialog structure.
Rename the frontend parsing module from `parseTaskText` to `quickAddMagic`
for clarity. The module handles much more than text parsing — it's the
core of the quick add magic feature. This rename makes its purpose
immediately obvious and aligns with how the feature is referenced
throughout the UI and documentation.
No logic changes — only directory/file renames and import updates.
The Attachments component now reads attachments from its task prop
and emits update:attachments events instead of using the global
attachment store singleton.
Change all shortcut strings from character-based format to event.code
format:
- Single letters: 't' -> 'KeyT', 's' -> 'KeyS', etc.
- Sequences: 'g o' -> 'KeyG KeyO', etc.
- Modifiers: 'Mod+e' -> 'Mod+KeyE', 'Shift+?' -> 'Shift+Slash'
- edit-shortcut prop: 'e' -> 'KeyE'
Shortcuts like 'Escape' and 'Shift+Delete' remain unchanged as their
event.code values are identical.
- Replace tailwindcss v3 with tailwindcss v4 + @tailwindcss/vite plugin
- Create dedicated tailwind.css entry with granular imports (skip preflight)
- Use CSS-first config with prefix(tw) instead of JS config
- Switch from PostCSS plugin to Vite plugin for better performance
- Update class prefix from tw- (dash) to tw: (colon) in all Vue files
- Remove @tailwind directives from global.scss
- Delete tailwind.config.js (replaced by CSS directives)
- Update stylelint at-rules for v4 directives
Prevent reminders from being saved to the API until the user clicks
Confirm, matching the behavior of the due/start/end date pickers.
- Remove @update:modelValue handler on DatepickerInline so date/time
changes only update local state
- Change Confirm button condition from showFormSwitch to activeForm so
it renders even when defaultRelativeTo is null
- Add confirmAndClose function that handles both absolute and relative
reminder forms
- Remove debounce (useDebounceFn) since saves are now user-initiated
Refs #2208
Allow users to switch between oldest-first and newest-first comment
ordering via a toggle button in the comments heading. The preference is
persisted as a frontend setting (commentSortOrder) and passed to the API
as the order_by query parameter so pagination works correctly.
When all comments fit on a single page, toggling reverses them
client-side to avoid an extra API call. New comments are inserted at the
correct position based on the active sort order, and in newest-first
mode the view scrolls to the top after adding a comment.
Link-share users fall back to a local (non-persisted) sort order since
they cannot save user settings.
Clicking the sidebar "Attachments" button (or pressing `f`) now opens
the browser file picker directly, eliminating the redundant two-step
flow of first revealing the section and then clicking upload.