feat(ui) : add site colors, dark mode toggle and card styling improvements

- Site color field with color picker in create/edit modals
- Dark mode theme (mytheme-dark) with toggle in navbar
- Stronger site color visibility on cards (gradient, top border, badges)
- Bigger action buttons (btn-sm) on machine cards
- White card backgrounds with proper dark mode support

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-03-09 15:51:29 +01:00
parent 7e67b124f3
commit b0124c11ba
24 changed files with 697 additions and 270 deletions

View File

@@ -10,6 +10,7 @@ import { canPreviewDocument } from '~/utils/documentPreview'
type SiteForm = {
name: string
color: string
contactName: string
contactPhone: string
contactAddress: string
@@ -31,6 +32,7 @@ type SiteDocument = {
type SiteWithDocuments = {
id: string
name?: string
color?: string
contactName?: string
contactPhone?: string
contactAddress?: string
@@ -54,6 +56,7 @@ export function useSiteManagement() {
const newSite = reactive<SiteForm>({
name: '',
color: '',
contactName: '',
contactPhone: '',
contactAddress: '',
@@ -63,6 +66,7 @@ export function useSiteManagement() {
const editSiteForm = reactive<SiteForm>({
name: '',
color: '',
contactName: '',
contactPhone: '',
contactAddress: '',
@@ -81,6 +85,7 @@ export function useSiteManagement() {
const resetNewSite = () => {
newSite.name = ''
newSite.color = ''
newSite.contactName = ''
newSite.contactPhone = ''
newSite.contactAddress = ''
@@ -101,6 +106,7 @@ export function useSiteManagement() {
const handleCreateSite = async () => {
const result = await createSite({
name: newSite.name,
color: newSite.color,
contactName: newSite.contactName,
contactPhone: newSite.contactPhone,
contactAddress: newSite.contactAddress,
@@ -116,6 +122,7 @@ export function useSiteManagement() {
const editSite = (site: SiteWithDocuments) => {
siteBeingEdited.value = site
editSiteForm.name = site.name || ''
editSiteForm.color = site.color || ''
editSiteForm.contactName = site.contactName || ''
editSiteForm.contactPhone = site.contactPhone || ''
editSiteForm.contactAddress = site.contactAddress || ''
@@ -148,6 +155,7 @@ export function useSiteManagement() {
const baseUpdate = {
name: editSiteForm.name,
color: editSiteForm.color,
contactName: editSiteForm.contactName,
contactPhone: editSiteForm.contactPhone,
contactAddress: editSiteForm.contactAddress,