- Fix column expand/contract glitch: replace `transition: all` with specific
properties and remove scale(1.02) transform on dragover columns
- Fix wrong drop position when dragging upward: collapse dragged card's
layout space after browser captures drag image, removing the phantom
element that distorted sibling getBoundingClientRect values
- Replace thin 3px accent line with animated gap/slot pattern where sibling
cards shift apart via translateY to show the drop position
- Lock source column min-height during drag so collapsing the dragged card
doesn't shrink the priority bucket
- Clip overflow on cards container during drag so translateY shifts don't
cause scrollbars
- Suppress hover background-color, transform, and box-shadow on all task
cards during active drag via body-level .tn-drag-active class
- Add rAF throttling to dragover handlers (preventDefault stays synchronous)
- Support cross-column drag: detect container change, clean old, set up new
- Respect prefers-reduced-motion: reduce for shift animations
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Extract sort_order computation from KanbanView into sortOrderUtils.ts
as free functions (computeSortOrder, getGroupTasks, renumberAndInsert,
isSortOrderInSortConfig, stripPropertyPrefix) so both views share the
same midpoint insertion algorithm without code duplication.
Add drag-to-reorder to TaskListView:
- Container-level drag event delegation (dragenter/dragover/drop) with
unconditional e.preventDefault() as required by the HTML5 DnD spec
- Within-group reordering: cards get draggable="true" when sort_order
is in the view's sort config
- Cross-group dragging: detects group changes via a taskGroupKeys map
(populated at render time) and updates the group property via
TaskService.updateProperty alongside the sort_order write
- Deferred re-render during drag to prevent DOM destruction mid-drop
- Works in both flat and grouped modes; gracefully skipped in virtual
scrolling paths
Simplify .task-card--dragging CSS: remove rotate/scale transforms and
pointer-events:none that caused adjacent cards to steal hit-test events
during drag. Add drop indicator pseudo-elements (::before/::after) for
visual feedback in task-list-view.css.
Based on feedback from kepano to reduce custom styling and use
Obsidian's native styles where possible:
- Replace all `cursor: pointer` with `cursor: var(--cursor)` across
all CSS files (100+ instances). Following Obsidian's convention where
`cursor: pointer` is only for links.
- Remove forced `border: none; box-shadow: none` rules that were
fighting against Obsidian's native button styling.
- Scope custom `.tn-btn` button system to `.mod-settings` only,
allowing Obsidian's native button styles to work elsewhere.
- Add `background: transparent` to mini-calendar buttons to match
Obsidian's native `.text-icon-button` styling.
This makes the plugin more cohesive with Obsidian's UI and reduces
unnecessary style overrides.
- Introduce HierarchicalGroupingService for two-level grouping
- FilterService: add getHierarchicalGroupedTasks() returning { groups, hierarchicalGroups }
- TaskListView: render hierarchical groups when subgroupKey is active; expand/collapse all subgroups per primary; show per‑group counts using agenda-view__item-count; fallback to flat groups when no subgroup
- Keep ViewPerformanceService flow; maintain taskElements tracking and selective updates
- FilterBar: harden button rebuilding (guard empty() with fallback, use classList/add), minor cleanup of unused locals
- Styles and GroupingUtils updated to support subgroup sections
Notes:
Excludes AgendaView.ts and tests (Agenda subgroups not working yet; will follow in a separate commit)
Backward compatible when subgroupKey is not set (flat groups unchanged)
Group counter styling improvements:
- Remove background, border, and padding for clean plain appearance
- Position counters to far right of group headers using margin-left: auto
- Use muted text color for subtle, unobtrusive display
- Maintain left-aligned headings while right-aligning counters
- Apply consistent styling across TaskListView, AgendaView, and subtask widget
Sort/Group button functionality fixes:
- Fix updateDisplaySection() method trying to update non-existent DOM elements
- Remove obsolete updateSortDirectionButton() method and calls
- Ensure Sort context menu works reliably without old dropdown dependencies
- Preserve identical functionality to original display section controls
- Implement completed/total count format for TaskList view group headers
- Add GroupCountUtils integration for consistent count calculation
- Support completion counts for both regular and clickable project headers
- Add proper CSS styling with 10px spacing and agenda-view__item-count class
- Maintain visual consistency with subtask widget implementation
- Add comprehensive button utility classes in utilities.css with transparent backgrounds, no borders
- Preserve accent backgrounds for primary action buttons (save, start, add task)
- Remove all borders and box-shadows from buttons across all views
- Update button styles in modal, task, pomodoro, calendar, agenda, kanban, notes, and settings views
- Implement consistent hover effects (color changes only, no movement)
- Create scalable button system with size variants (sm, lg) and style variants (primary, secondary, ghost, danger, success)
- Add icon button support, pill buttons, and button groups
- Ensure accessibility with proper focus states
Add hover preview functionality to clickable project group headers in
Task List View, allowing users to preview project notes with ctrl+hover
just like other wikilinks in the application.
Changes:
- Add addHoverPreview() method to TaskListView for hover preview support
- Integrate with Obsidian's native hover-link workspace trigger
- Resolve wikilink project names to actual file paths before adding preview
- Use consistent hover preview pattern from TaskCard and NoteCard components
- Maintain consistency with existing hover preview functionality
The hover previews work for wikilink-format projects ([[Project Name]])
and follow the same interaction pattern as task cards and note cards.
• Remove obsolete agenda view overrides:
- Deleted the left border and padding styling for flat agenda view task and note cards.
- Removed extra margin-bottom reset for agenda view cards that was redundant.
• Eliminate kanban view task card customizations:
- Removed all margin, transition, dragging state, and updated animation styles for kanban task cards.
- These rules are no longer needed with updated design requirements.
• Update task-card BEM styling:
- Changed margin-bottom from a fixed zero to use the spacing variable, ensuring consistent spacing.
- Removed bottom border, extra transition properties (transform, border-color, box-shadow, opacity), and reduced will-change properties to only background-color.
- Adjusted hover state by simplifying the transition behavior and removing any transform and shadow effects.
- Ensured the last task card in a list has zero bottom margin to maintain visual consistency.
• Clean up task list view styling:
- Removed redundant margin-bottom overrides for task cards in the task list view as spacing is now managed by the task-card BEM rules.
These adjustments remove redundant and outdated styles, promote consistency across the plugin views, and simplify future maintenance of the styling rules.
• In TaskCreationModal.ts:
- Replaced the labeled “Quick input” form group with a minimalist input field.
- Updated the textarea’s placeholder text and reduced its row count to 3.
- Styled the button container inline for a more compact layout.
- Changed button labels: “Quick create” is now “Create”, “Parse & fill form” becomes “Fill form”, and the detailed toggle now uses “+”/“−” symbols with tooltips to indicate its state.
- Added event listeners for input, click, and keyboard shortcuts to update natural language preview, quick create tasks, and fill the form. The keyboard handler still supports Ctrl/Cmd + Enter for quick create and Shift + Enter for parsing.
- Updated the detailed view toggle to set both text content and title attribute based on current state.
• In CSS files:
- calendar-view.css: Removed unnecessary box-shadow from the “selected and today” calendar day.
- filter-bar-bem.css: Replaced the accent variable from var(--tn-interactive-accent) to var(--interactive-accent) and removed box-shadow styling on focused inputs and selects.
- kanban-view.css: Removed a custom box-shadow on the drag-over column, keeping only the standard shadow and scale transform.
- modal-bem.css: Added a new section for “Natural Language Input – Minimalist Styles” to style the new input, button container, and preview components. Removed duplicate focus style rules to avoid conflicts.
- notes-view.css: Removed the box-shadow from focused note items.
- settings-view.css: Updated focus styles to use var(--interactive-accent) and removed box-shadow and extra outlines for cleaner style.
- task-list-view.css: Removed box-shadow on focused task items.
These consolidated changes both streamline the TaskCreationModal’s UI experience and provide a consistent, minimal visual style across calendar, filter, kanban, notes, settings, and task-list views.
• Updated multiple CSS files (filter-bar-bem.css, kanban-view.css, modal-bem.css, pomodoro-view.css, task-card-bem.css, task-list-view.css) to adjust the font sizes across various UI components. This effort standardizes the sizing by replacing small/medium font variables with larger ones where appropriate.
• In filter-bar-bem.css:
– Increased button font sizes from var(--tn-font-size-md) to var(--tn-font-size-lg) and from var(--tn-font-size-sm) to var(--tn-font-size-md), ensuring filter buttons are easier to read.
• In kanban-view.css:
– Upgraded several font size values (e.g., replacing var(--tn-font-size-sm) with var(--tn-font-size-md) and var(--tn-font-size-md) with var(--tn-font-size-lg)) for column titles and button texts, resulting in improved legibility in the kanban interface.
• In modal-bem.css:
– Enhanced form labels and buttons by switching from var(--tn-font-size-md) to var(--tn-font-size-lg), contributing to a clearer modal dialog experience.
• In pomodoro-view.css:
– Changed multiple font size values from small to medium or large (e.g., var(--tn-font-size-sm) → var(--tn-font-size-md) and var(--tn-font-size-md) → var(--tn-font-size-lg)) across task labels, selectors, section labels, and stats. Also, increased a button’s font size from var(--tn-font-size-xs) to var(--tn-font-size-sm).
• In task-card-bem.css:
– Increased the task title font size from var(--tn-font-size-md) to var(--tn-font-size-lg) for better emphasis.
– For inline preview text, increased max-width from 120px to 300px to accommodate longer task names.
• In task-list-view.css:
– Updated button and empty description font sizes from var(--tn-font-size-sm/--tn-font-size-md) to var(--tn-font-size-md/--tn-font-size-lg) to maintain consistency with other UI elements.
Overall, these updates help align the design with improved accessibility guidelines and ensure consistency across the app’s various views.
• Introduced new CSS rules for the .task-list container within the tasknotes plugin:
– Set the container to display as flex with a column direction.
– Added a gap using a predefined spacing variable (var(--tn-spacing-xs)) for consistent internal spacing.
– Ensured the container flexibly fills available space and maintains min-height of 0.
• Applied specific spacing adjustments for task cards:
– Added a bottom margin to each .task-card for visual separation.
– Removed the bottom margin for the last task card to avoid extra space at the end.
• Removed outdated TaskCard override styles previously applied to .task-list-view:
– Eliminated unnecessary border, border-radius, box-shadow, and margin reset rules.
– Disabled hover transformations and shadow effects to simplify and streamline the styling.
• Retained Responsive Design adjustments and other existing styles.
This update refines the task list styling by leveraging flexbox layout for improved spacing control and cleans up redundant overrides, contributing to a more maintainable and efficient CSS structure.
• Introduce a new set of CSS files (filter-bar-bem.css, agenda-view.css, calendar-view.css, kanban-view.css, modal-bem.css, note-card-bem.css, notes-view.css, task-card-bem.css, task-list-view.css, utilities.css) that implement a modern BEM naming convention and are entirely scoped under .tasknotes-plugin. This ensures styles no longer conflict with Obsidian’s or other plugins’ styles.
• Update index.css to list and order the new files properly, noting that “components.css” remains while legacy files (such as filters.css, calendar.css, tasks.css, and kanban.css) are either deprecated or now referenced via legacy files (e.g. tasks-legacy.css).
• Refactor variables.css to add plugin‐specific variables (using --tn- prefix) for spacing, typography, borders, shadows, transitions, z‐indices, and more. This integration uses Obsidian’s theme variables as fallbacks so that TaskNotes derives its colors and sizes directly from the host environment.
• Separate and modularize layout and component styling:
– New “task-card-bem.css” and “note-card-bem.css” provide updated implementations for TaskCard and NoteCard components with proper BEM elements and modifiers (e.g. modifiers for completed, archived, recurring, and priority states).
– “filter-bar-bem.css” redefines the filter bar styling (including advanced filtering panels) with scoped, clear element classes.
– “modal-bem.css” refactors modal dialogs (for task creation, editing, due date, etc.) into BEM components that include form groups, input styling, character counters, autocomplete suggestions, and well-defined button styles.
– “agenda-view.css”, “calendar-view.css”, “kanban-view.css”, “notes-view.css”, and “task-list-view.css” implement view-specific styles for each view with a modern layout, responsive behavior, and improved interaction states.
• Maintain legacy styles for backwards compatibility:
– “tasks-legacy.css” continues to support old task styles while new BEM styles are preferred.
– In “tasks.css”, legacy styles have been replaced or redirected to the new structure (and an import is added for backwards–compatible CSS).
– Similarly, “kanban.css” now contains only legacy styles (with a note indicating deprecation) since the new BEM structure is in “kanban-view.css”.
• Add a comprehensive utilities.css file that documents and implements a full suite of scoped utility classes:
– Layout (flex, grid, positioning)
– Spacing (margins, padding, gap)
– Typography (text alignment, font sizes, line heights, text transform)
– Display (block, inline, table, etc.)
– Background, borders, shadows, opacity, transitions, transforms, cursors, and state modifiers
– Responsive variants for small (sm), medium (md), and large (lg) breakpoints
– Reduced motion and high-contrast support via media queries
• Update index.css to clearly document the new file ordering and describe the purpose of each new file compared to legacy components.
Overall, this commit overhauls the styling system by:
– Unifying the design under a scoped .tasknotes-plugin namespace
– Implementing a modern, modular BEM structure across components and views
– Ensuring consistency through CSS custom properties (using the --tn- prefix)
– Preparing for gradual deprecation of legacy CSS styles, while maintaining backward compatibility
These changes lay a strong foundation for consistent and maintainable UI improvements in the TaskNotes plugin.
