113 lines
3.5 KiB
TypeScript
113 lines
3.5 KiB
TypeScript
/**
|
|
* Utility Functions
|
|
* Common utility functions for the application
|
|
*/
|
|
import { type ClassValue, clsx } from 'clsx';
|
|
import { extendTailwindMerge } from 'tailwind-merge';
|
|
|
|
/**
|
|
* tailwind-merge instance configured for Makelore's custom design tokens.
|
|
*
|
|
* Why this is necessary:
|
|
* `tailwind-merge` ships with hardcoded knowledge of Tailwind's standard
|
|
* font-size scale (xs / sm / base / lg / xl / 2xl / ...). It does NOT
|
|
* read tailwind.config.js, so any custom font-size key we add — e.g.
|
|
* `text-meta`, `text-tiny`, `text-subtitle`, `text-2xs`, `text-stat` —
|
|
* is classified by twMerge as a *text color* instead of a font-size.
|
|
*
|
|
* When that happens, merging shadcn's button variant
|
|
* `bg-primary text-primary-foreground`
|
|
* with a caller-supplied class string like
|
|
* `text-meta font-medium rounded-full ...`
|
|
* silently *removes* `text-primary-foreground` (twMerge thinks both are
|
|
* colors and keeps only the later one). The button then has no explicit
|
|
* text color and falls back to inheriting `text-foreground`, producing
|
|
* the wrong "brand background + dark text" rendering reported in
|
|
* https://github.com/<repo>/issues — see the Agents page "Add Agent"
|
|
* button for a live example before this fix.
|
|
*
|
|
* Fix: extend twMerge's `font-size` class group with our custom token
|
|
* names so it correctly identifies them as font-sizes and stops eating
|
|
* the text color.
|
|
*
|
|
* IMPORTANT: keep this list in sync with `theme.extend.fontSize` in
|
|
* `tailwind.config.js`.
|
|
*/
|
|
const twMerge = extendTailwindMerge({
|
|
extend: {
|
|
classGroups: {
|
|
'font-size': [
|
|
{ text: ['2xs', 'tiny', 'meta', 'subtitle', 'stat'] },
|
|
],
|
|
},
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Merge class names with Tailwind CSS classes.
|
|
* Uses the Makelore-aware twMerge above so custom font-size tokens
|
|
* (text-2xs / tiny / meta / subtitle / stat) are not mistaken for colors.
|
|
*/
|
|
export function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
/**
|
|
* Format relative time (e.g., "2 minutes ago")
|
|
*/
|
|
export function formatRelativeTime(date: string | Date): string {
|
|
const now = new Date();
|
|
const then = new Date(date);
|
|
const diffMs = now.getTime() - then.getTime();
|
|
const diffSec = Math.floor(diffMs / 1000);
|
|
const diffMin = Math.floor(diffSec / 60);
|
|
const diffHour = Math.floor(diffMin / 60);
|
|
const diffDay = Math.floor(diffHour / 24);
|
|
|
|
if (diffSec < 60) {
|
|
return 'just now';
|
|
} else if (diffMin < 60) {
|
|
return `${diffMin} minute${diffMin > 1 ? 's' : ''} ago`;
|
|
} else if (diffHour < 24) {
|
|
return `${diffHour} hour${diffHour > 1 ? 's' : ''} ago`;
|
|
} else if (diffDay < 7) {
|
|
return `${diffDay} day${diffDay > 1 ? 's' : ''} ago`;
|
|
} else {
|
|
return then.toLocaleDateString();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Format duration in seconds to human-readable string
|
|
*/
|
|
export function formatDuration(seconds: number): string {
|
|
const hours = Math.floor(seconds / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
const secs = seconds % 60;
|
|
|
|
if (hours > 0) {
|
|
return `${hours}h ${minutes}m`;
|
|
} else if (minutes > 0) {
|
|
return `${minutes}m ${secs}s`;
|
|
} else {
|
|
return `${secs}s`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Delay for a specified number of milliseconds
|
|
*/
|
|
export function delay(ms: number): Promise<void> {
|
|
return new Promise((resolve) => setTimeout(resolve, ms));
|
|
}
|
|
|
|
/**
|
|
* Truncate text with ellipsis
|
|
*/
|
|
export function truncate(text: string, maxLength: number): string {
|
|
if (text.length <= maxLength) {
|
|
return text;
|
|
}
|
|
return text.slice(0, maxLength - 3) + '...';
|
|
}
|