- Add mobile card view for packages (replaces table on small screens) - Implement design tokens system for consistent styling - Add dark/light theme toggle with system preference support - Create reusable StatusBadge and EmptyState components - Add accessible form labels to package filters - Add compact mobile stats display in navigation - Add safe area insets for notched devices - Add reduced motion support for accessibility - Improve touch targets for WCAG compliance - Add unit tests for composables - Update Vuetify configuration and styling
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
/**
|
|
* Converts a Unix timestamp to a localized date string
|
|
* @param timestamp - Unix timestamp in seconds
|
|
* @returns Localized date string
|
|
*/
|
|
export function unixTimestampToLocalizedDate(timestamp: number): string {
|
|
const date = new Date(timestamp * 1000)
|
|
return date.toLocaleString(navigator.language)
|
|
}
|
|
|
|
/**
|
|
* Creates a relative time formatter
|
|
* @returns Functions for formatting relative time
|
|
*/
|
|
export function useRelativeTime() {
|
|
const rtf = new Intl.RelativeTimeFormat('en', {
|
|
localeMatcher: 'best fit',
|
|
numeric: 'always',
|
|
style: 'long',
|
|
})
|
|
|
|
/**
|
|
* Formats seconds ago into a human-readable relative time string
|
|
* @param seconds - Number of seconds ago (positive = past)
|
|
* @returns Formatted relative time string
|
|
*/
|
|
const formatTimeAgo = (seconds: number): string => {
|
|
if (seconds >= 3600) {
|
|
return rtf.format(-Math.floor(seconds / 3600), 'hours')
|
|
} else if (seconds >= 60) {
|
|
return rtf.format(-Math.floor(seconds / 60), 'minutes')
|
|
} else {
|
|
return rtf.format(-seconds, 'seconds')
|
|
}
|
|
}
|
|
|
|
return {
|
|
formatTimeAgo,
|
|
}
|
|
}
|