* Fix project name overflow and add validation
This commit addresses issue #971 by implementing both UI fixes and
validation to prevent excessively long project names.
Changes:
1. Add word-break and line-clamp to ProjectBanner.tsx to handle
overflow gracefully with line-clamp-3 for names
2. Add frontend validation in ProjectModal.tsx limiting names to
6 words maximum
3. Add backend validation in project.js model with custom wordCount
validator
4. Show user-friendly error messages when validation fails
This ensures project names remain concise and UI-friendly while
preventing the extreme overflow cases that were possible before.
Fixes#971
* Add overflow-hidden to make line-clamp work properly
The line-clamp utility requires explicit overflow-hidden to function
correctly. Without it, the text continues to display in full rather
than being truncated with ellipsis.
* Fix line-clamp using inline CSS styles
Tailwind's line-clamp utilities weren't working, so switched to using
inline styles with the standard CSS approach:
- display: -webkit-box
- -webkit-line-clamp: 3
- -webkit-box-orient: vertical
This ensures the text truncation works reliably across browsers.
* Use Tailwind line-clamp utilities (already defined in CSS)
The project already has line-clamp-1/2/3 utilities properly defined
in tailwind.css with all the necessary webkit properties. Simplified
the component to use these existing utilities instead of inline styles.
* Add dedicated CSS classes with !important for line-clamp
Created custom project-name-clamp and project-desc-clamp classes
with !important flags to ensure they override any conflicting styles.
This should finally fix the text truncation issue.
* Use component-scoped styles for line-clamp
Adding inline style tag in the component to ensure the line-clamp
CSS is definitely loaded and applied. This bypasses any potential
issues with external CSS compilation or loading order.
* Change project name line-clamp from 3 to 2 lines
Limiting project name display to 2 lines with ellipsis for better
visual density and cleaner appearance.
* Increase line-height for project name in banner
Added line-height: 1.3 to project name for better readability
and visual spacing between lines.
* Fix Today page task completion issues
- Fix completed task border color staying as priority color
- Add isInCompletedSection prop to TaskItem for explicit completed state
- Tasks in completed section now always show green border regardless of priority
- Fixes race condition where status wasn't updated during optimistic UI update
- Fix completed task reappearing after unmarking and page refresh
- Add defensive check in backend to force clear completed_at when status is not DONE
- Add development logging in tasksService for debugging completion toggle
- Ensures database state is consistent even if handleCompletionStatus doesn't clear it
- Update TaskList and TasksToday components to pass isInCompletedSection prop
- Explicitly marks tasks rendered in the completed section
- Prevents border color flickering during state transitions
* Add comprehensive logging to debug completion issues
* Fix duplicate API requests causing completion state issues
- Separate state update logic from API call in handleTaskUpdate
- Create new updateTaskInState function for state-only updates
- Pass onTaskCompletionToggle to completed section to avoid duplicate calls
- This fixes the persistence issue where unmarked tasks came back after refresh
- Completion toggles now only make ONE API call instead of two
* Add debug logging to updateTaskInState
* Fix visual overlap between subtasks icon and status dropdown
Increased right padding from pr-44 to pr-48 in TaskHeader desktop view
to prevent the subtasks toggle button from overlapping with the expanded
status dropdown icon.
Fixes#957
* Improve fix for subtasks icon and status dropdown overlap
- Removed flex-1 from task name container to prevent unnecessary expansion
- Wrapped SubtasksToggleButton in flex-shrink-0 div to maintain its width
- Increased right padding from pr-48 to pr-56 for better spacing
- This prevents the subtasks icon from overlapping with the status dropdown
Fixes#957
* Fix subtasks icon placement to be adjacent to task name
Moved SubtasksToggleButton to be directly after the task name within
the same flex container, instead of in a separate container. This positions
the icon immediately next to the task name on the left, rather than being
pushed to the right where it overlaps with the status dropdown.
Fixes#957
* Fix date format inconsistency in Task detail screen (#938)
Replace browser-dependent toLocaleDateString() with explicit country-based
date formatting to ensure consistent date formats based on user's timezone.
Problem:
- User with English language + Greek timezone saw MM/DD/YYYY format
- Expected DD/MM/YYYY format based on timezone/country
- Browser's Intl.DateTimeFormat had incomplete locale support for
combined locales like "en-GR"
Solution:
- Add country-to-format mapping in dateUtils.ts (60+ countries)
- New formatDateByCountry() for dates (DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD)
- New formatDateTimeByCountry() for datetimes with 24h time
- Update TaskDueDateCard and TaskDeferUntilCard to use new functions
- Uses date-fns for consistent cross-browser formatting
Testing:
- Added 40 comprehensive test cases covering all format types
- Verified with Greece (DD/MM), US (MM/DD), Japan (YYYY/MM/DD)
- All tests passing
Fixes#938
* chore: remove unused import in dateUtils.ts
Both Navbar.tsx and Login.tsx hardcode absolute paths for the logo
images ('/wide-logo-light.png', '/wide-logo-dark.png'). This breaks
when tududi is served behind a reverse proxy with a subpath, such as
Home Assistant ingress.
The getAssetPath() helper from config/paths already handles base path
detection (including HA ingress auto-detection), and Login.tsx already
uses it for the login graphic. This commit applies the same pattern to
the logo images.
Changes:
- Navbar.tsx: add getAssetPath to import, use it for logo src
- Login.tsx: use getAssetPath for logo src (was already imported)
Fixes#938
The Defer Until field was using i18n.language directly instead of
resolveUserLocale(), causing it to display dates in MM/DD/YYYY format
(US default) regardless of timezone setting.
Now uses the same locale resolution pattern as the Due Date field,
which combines language with timezone-derived country code (e.g.,
"en" + Greek timezone → "en-GR" → DD/MM/YYYY format).
Changes:
- Import useMemo and resolveUserLocale
- Add displayLocale memo to resolve timezone-aware locale
- Use displayLocale instead of i18n.language in toLocaleString()
Remove isSidebarOpen from the useEffect dependency array and from the
API request parameters in Tasks.tsx. The sidebar visibility state has no
bearing on which tasks should be fetched, so toggling it should not
trigger a data re-fetch.
The toggle handler required onSubtaskUpdate callback to make the API
call, but TaskSubtasksCard never provided it. Extract a shared handler
that calls toggleTaskCompletion for persisted subtasks regardless of
whether onSubtaskUpdate is provided, falling back to updating local
state via onSubtasksChange.
When toggling subtask completion in TaskSubtasksSection, the toggle handler
required onSubtaskUpdate callback to make the API call. Components like
TaskSubtasksCard don't pass this callback, so toggling fell through to the
local-only state update path, never sending a network request.
Add an intermediate code path: when the subtask is persisted but
onSubtaskUpdate is not provided, call toggleTaskCompletion() directly
to persist the change, then update local state.
Fixes#920
The SubtasksToggleButton was placed inside the same flex container as
the task name with truncate, causing it to be squeezed to zero width.
Wrap the task name in an inner flex container (matching the upcoming
view layout) so the button stays visible.
* Add projects with due dates to upcoming view
Fetch and include projects with due_date_at in the upcoming range
when type=upcoming is requested. Projects are filtered by ownership
or permissions and exclude completed/archived projects.
Part of #925
* Display upcoming projects in Upcoming view
Add UI to show projects with due dates in the Upcoming view.
Projects are displayed in a separate section below tasks with
links to project details and formatted due dates.
Fixes#925
* Fix prettier formatting errors
Date fields in the task edit page used i18n.language (e.g. "en") to
determine date format, giving MM/DD for English even when the user's
timezone indicates a DD/MM region (e.g. Europe/Athens).
Enhance resolveUserLocale to derive the country from the user's
timezone and combine it with the language (e.g. "en" + "GR" = "en-GR")
so date formatting follows regional conventions.
