vikingowl
5fac66a38c
- 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
90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import { components } from '@/api'
|
|
|
|
export function usePackageDisplay() {
|
|
const repoName = (repo: string) => repo.split('-')[0]
|
|
const repoVersion = (repo: string) => repo.split('-')[repo.split('-').length - 1]
|
|
|
|
const getVersionColor = (version: string) => {
|
|
switch (version) {
|
|
case 'v2':
|
|
return 'var(--color-version-v2)'
|
|
case 'v3':
|
|
return 'var(--color-version-v3)'
|
|
case 'v4':
|
|
return 'var(--color-version-v4)'
|
|
default:
|
|
return 'var(--color-text-muted)'
|
|
}
|
|
}
|
|
|
|
const getStatusColor = (status: components['schemas']['Package']['status']) => {
|
|
// Return empty string - we now use StatusBadge component instead of row colors
|
|
return ''
|
|
}
|
|
|
|
const getLto = (lto: components['schemas']['Package']['lto']) => {
|
|
switch (lto) {
|
|
case 'enabled':
|
|
return {
|
|
title: 'Built with LTO',
|
|
icon: 'mdi-check-circle',
|
|
color: 'var(--color-status-success)',
|
|
}
|
|
case 'unknown':
|
|
return {
|
|
title: 'Not built with LTO yet',
|
|
icon: 'mdi-timer-sand',
|
|
color: 'var(--color-text-muted)',
|
|
}
|
|
case 'disabled':
|
|
return {
|
|
title: 'LTO explicitly disabled',
|
|
icon: 'mdi-close-circle',
|
|
color: 'var(--color-status-error)',
|
|
}
|
|
case 'auto_disabled':
|
|
return {
|
|
title: 'LTO automatically disabled',
|
|
icon: 'mdi-alert-circle',
|
|
color: 'var(--color-status-warning)',
|
|
}
|
|
default:
|
|
return { title: '', icon: '', color: '' }
|
|
}
|
|
}
|
|
|
|
const getDs = (ds: components['schemas']['Package']['debug_symbols']) => {
|
|
switch (ds) {
|
|
case 'available':
|
|
return {
|
|
title: 'Debug symbols available',
|
|
icon: 'mdi-check-circle',
|
|
color: 'var(--color-status-success)',
|
|
}
|
|
case 'unknown':
|
|
return {
|
|
title: 'Not built yet',
|
|
icon: 'mdi-timer-sand',
|
|
color: 'var(--color-text-muted)',
|
|
}
|
|
case 'not_available':
|
|
return {
|
|
title: 'Not built with debug symbols',
|
|
icon: 'mdi-close-circle',
|
|
color: 'var(--color-status-error)',
|
|
}
|
|
default:
|
|
return { title: '', icon: '', color: '' }
|
|
}
|
|
}
|
|
|
|
return {
|
|
repoName,
|
|
repoVersion,
|
|
getVersionColor,
|
|
getStatusColor,
|
|
getLto,
|
|
getDs,
|
|
}
|
|
}
|