feat: add font size toggle functionality

- Implemented a FontSizeToggle component in HomePageClient for adjusting task font sizes in kanban views.
- Updated TaskCard to apply dynamic font size classes based on user preferences.
- Enhanced user preferences to include font size settings, defaulting to 'medium'.
- Modified TODO.md to mark the font size toggle task as complete.
This commit is contained in:
Julien Froidefond
2025-09-18 09:51:40 +02:00
parent 4a4eb9c8ad
commit 7394b16999
7 changed files with 91 additions and 7 deletions

View File

@@ -25,6 +25,32 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) {
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const { tags: availableTags, refreshTasks } = useTasksContext();
const { preferences } = useUserPreferences();
// Classes CSS pour les différentes tailles de police
const getFontSizeClasses = () => {
switch (preferences.viewPreferences.fontSize) {
case 'small':
return {
title: 'text-xs',
description: 'text-xs',
meta: 'text-xs'
};
case 'large':
return {
title: 'text-base',
description: 'text-sm',
meta: 'text-sm'
};
default: // medium
return {
title: 'text-sm',
description: 'text-xs',
meta: 'text-xs'
};
}
};
const fontClasses = getFontSizeClasses();
// Helper pour construire l'URL Jira
const getJiraTicketUrl = (jiraKey: string): string => {
@@ -159,7 +185,7 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) {
const TitleWithTooltip = () => (
<div className="relative flex-1">
<h4
className="font-mono text-sm font-medium text-[var(--foreground)] leading-tight line-clamp-2 cursor-pointer hover:text-[var(--primary)] transition-colors"
className={`font-mono ${fontClasses.title} font-medium text-[var(--foreground)] leading-tight line-clamp-2 cursor-pointer hover:text-[var(--primary)] transition-colors`}
onClick={handleTitleClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
@@ -243,7 +269,7 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) {
onKeyDown={handleTitleKeyPress}
onBlur={handleTitleSave}
autoFocus
className="flex-1 bg-transparent border-none outline-none text-[var(--foreground)] font-mono text-sm font-medium leading-tight"
className={`flex-1 bg-transparent border-none outline-none text-[var(--foreground)] font-mono ${fontClasses.title} font-medium leading-tight`}
/>
) : (
<TitleWithTooltip />
@@ -372,7 +398,7 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) {
{/* Description tech */}
{task.description && (
<p className="text-xs text-[var(--muted-foreground)] mb-3 line-clamp-1 font-mono">
<p className={`${fontClasses.description} text-[var(--muted-foreground)] mb-3 line-clamp-1 font-mono`}>
{task.description}
</p>
)}
@@ -397,7 +423,7 @@ export function TaskCard({ task, onEdit, compactView = false }: TaskCardProps) {
{/* Footer tech avec séparateur néon - seulement si des données à afficher */}
{(task.dueDate || (task.source && task.source !== 'manual') || task.completedAt) && (
<div className="pt-2 border-t border-[var(--border)]/50">
<div className="flex items-center justify-between text-xs">
<div className={`flex items-center justify-between ${fontClasses.meta}`}>
{task.dueDate ? (
<span className="flex items-center gap-1 text-[var(--muted-foreground)] font-mono">
<span className="text-[var(--primary)]"></span>