girouette customization feature

Author: kevinbioj

apps/client/messages/en.json

@@ -286,6 +286,63 @@
 	"vehicle_action_unarchive_title": "Unarchive this vehicle",
 	"line_assignments_empty": "No vehicle was observed on this line on this date.",
 	"line_assignments_since": "since",
+	"line_girouettes_breadcrumb": "Destination boards",
+	"line_girouettes_column_actions": "Actions",
+	"line_girouettes_column_destination": "Destination",
+	"line_girouettes_column_direction": "Direction",
+	"line_girouettes_column_preview": "Preview",
+	"line_girouettes_create": "Create destination board",
+	"line_girouettes_create_success": "Destination board created successfully.",
+	"line_girouettes_delete": "Delete",
+	"line_girouettes_delete_confirm": "Are you sure you want to delete this destination board?",
+	"line_girouettes_delete_success": "Destination board deleted successfully.",
+	"line_girouettes_direction_any": "All directions",
+	"line_girouettes_direction_inbound": "Inbound",
+	"line_girouettes_direction_outbound": "Outbound",
+	"line_girouettes_disable": "Disable",
+	"line_girouettes_edit": "Edit",
+	"line_girouettes_enable": "Enable",
+	"line_girouettes_empty": "No custom destination boards for this line.",
+	"line_girouettes_error": "An error occurred.",
+	"line_girouettes_form_bg_color_label": "Background color",
+	"line_girouettes_form_cancel": "Cancel",
+	"line_girouettes_form_create_title": "Create destination board",
+	"line_girouettes_form_destination_label": "Destination",
+	"line_girouettes_form_destination_placeholder": "E.g. Central Station",
+	"line_girouettes_form_destination_any": "Any destination",
+	"line_girouettes_form_direction_any": "All directions",
+	"line_girouettes_form_direction_inbound": "Inbound (1)",
+	"line_girouettes_form_direction_label": "Direction",
+	"line_girouettes_form_direction_outbound": "Outbound (0)",
+	"line_girouettes_form_edit_title": "Edit destination board",
+	"line_girouettes_form_font_family_label": "Font family",
+	"line_girouettes_form_font_variant_label": "Variant",
+	"line_girouettes_form_led_color_label": "LED color",
+	"line_girouettes_form_led_white": "White",
+	"line_girouettes_form_led_yellow": "Yellow",
+	"line_girouettes_form_outline_color_label": "Outline color",
+	"line_girouettes_form_page_add": "Add page",
+	"line_girouettes_form_page_n": "Page {n}",
+	"line_girouettes_form_page_remove": "Remove",
+	"line_girouettes_form_page_text_label": "Text",
+	"line_girouettes_form_pages_title": "Destination pages",
+	"line_girouettes_form_preview_title": "Preview",
+	"line_girouettes_form_route_number_text_label": "Text",
+	"line_girouettes_form_route_number_title": "Route number",
+	"line_girouettes_form_save": "Save",
+	"line_girouettes_form_scroll_label": "Auto-scroll",
+	"line_girouettes_form_half_pattern_label": "Split pattern",
+	"line_girouettes_form_half_pattern_none": "None",
+	"line_girouettes_form_half_pattern_tl": "↖ Top left",
+	"line_girouettes_form_half_pattern_tr": "↗ Top right",
+	"line_girouettes_form_half_pattern_bl": "↙ Bottom left",
+	"line_girouettes_form_half_pattern_br": "↘ Bottom right",
+	"line_girouettes_form_text_color_label": "Text color",
+	"line_girouettes_page_title": "Destination boards – {lineNumber} – {networkName} – Bus Tracker",
+	"line_girouettes_title": "Destination boards for line {lineNumber}",
+	"line_girouettes_update_success": "Destination board updated successfully.",
+	"network_lines_assignments_action": "Vehicle assignments",
+	"network_lines_girouettes_action": "Manage destination boards",
 	"legal_page_title": "Legal notice – Bus Tracker",
 	"legal_title": "Legal notice & Privacy policy",
 	"legal_updated_at": "Last updated: March 2026",

apps/client/messages/fr.json

@@ -286,6 +286,63 @@
 	"vehicle_action_unarchive_title": "Désarchiver ce véhicule",
 	"line_assignments_empty": "Aucun véhicule n'a été observé sur cette ligne à cette date.",
 	"line_assignments_since": "depuis",
+	"line_girouettes_breadcrumb": "Girouettes",
+	"line_girouettes_column_actions": "Actions",
+	"line_girouettes_column_destination": "Destination",
+	"line_girouettes_column_direction": "Direction",
+	"line_girouettes_column_preview": "Prévisualisation",
+	"line_girouettes_create": "Créer une girouette",
+	"line_girouettes_create_success": "Girouette créée avec succès.",
+	"line_girouettes_delete": "Supprimer",
+	"line_girouettes_delete_confirm": "Êtes-vous sûr de vouloir supprimer cette girouette ?",
+	"line_girouettes_delete_success": "Girouette supprimée avec succès.",
+	"line_girouettes_direction_any": "Toutes directions",
+	"line_girouettes_direction_inbound": "Retour",
+	"line_girouettes_direction_outbound": "Aller",
+	"line_girouettes_disable": "Désactiver",
+	"line_girouettes_edit": "Modifier",
+	"line_girouettes_enable": "Activer",
+	"line_girouettes_empty": "Aucune girouette personnalisée pour cette ligne.",
+	"line_girouettes_error": "Une erreur est survenue.",
+	"line_girouettes_form_bg_color_label": "Couleur de fond",
+	"line_girouettes_form_cancel": "Annuler",
+	"line_girouettes_form_create_title": "Créer une girouette",
+	"line_girouettes_form_destination_label": "Destination",
+	"line_girouettes_form_destination_placeholder": "Ex : Gare SNCF",
+	"line_girouettes_form_destination_any": "Toutes destinations",
+	"line_girouettes_form_direction_any": "Toutes directions",
+	"line_girouettes_form_direction_inbound": "Retour (1)",
+	"line_girouettes_form_direction_label": "Direction",
+	"line_girouettes_form_direction_outbound": "Aller (0)",
+	"line_girouettes_form_edit_title": "Modifier la girouette",
+	"line_girouettes_form_font_family_label": "Famille de police",
+	"line_girouettes_form_font_variant_label": "Variante",
+	"line_girouettes_form_led_color_label": "Couleur LED",
+	"line_girouettes_form_led_white": "Blanc",
+	"line_girouettes_form_led_yellow": "Jaune",
+	"line_girouettes_form_outline_color_label": "Couleur de contour",
+	"line_girouettes_form_page_add": "Ajouter une page",
+	"line_girouettes_form_page_n": "Page {n}",
+	"line_girouettes_form_page_remove": "Supprimer",
+	"line_girouettes_form_page_text_label": "Texte",
+	"line_girouettes_form_pages_title": "Pages de destination",
+	"line_girouettes_form_preview_title": "Prévisualisation",
+	"line_girouettes_form_route_number_text_label": "Texte",
+	"line_girouettes_form_route_number_title": "Numéro de ligne",
+	"line_girouettes_form_save": "Sauvegarder",
+	"line_girouettes_form_scroll_label": "Défilement automatique",
+	"line_girouettes_form_half_pattern_label": "Motif split",
+	"line_girouettes_form_half_pattern_none": "Aucun",
+	"line_girouettes_form_half_pattern_tl": "↖ Haut gauche",
+	"line_girouettes_form_half_pattern_tr": "↗ Haut droite",
+	"line_girouettes_form_half_pattern_bl": "↙ Bas gauche",
+	"line_girouettes_form_half_pattern_br": "↘ Bas droite",
+	"line_girouettes_form_text_color_label": "Couleur du texte",
+	"line_girouettes_page_title": "Girouettes – {lineNumber} – {networkName} – Bus Tracker",
+	"line_girouettes_title": "Girouettes de la ligne {lineNumber}",
+	"line_girouettes_update_success": "Girouette mise à jour avec succès.",
+	"network_lines_assignments_action": "Affectations de véhicules",
+	"network_lines_girouettes_action": "Gérer les girouettes",
 	"legal_page_title": "Mentions légales – Bus Tracker",
 	"legal_title": "Mentions légales & Politique de confidentialité",
 	"legal_updated_at": "Dernière mise à jour : Mars 2026",

apps/client/src/api/girouettes.ts

@@ -0,0 +1,64 @@
+import { mutationOptions, queryOptions } from "@tanstack/react-query";
+
+import { client } from "~/api/client";
+import { getLegacyEditorToken } from "~/api/editors";
+import type { GirouetteData } from "~/components/vehicles-map/vehicles-markers/popup/girouette";
+
+function getLegacyEditorHeaders() {
+	const token = getLegacyEditorToken();
+	return token === null ? undefined : { "X-Editor-Token": token };
+}
+
+export type Girouette = {
+	id: number;
+	networkId: number;
+	lineId: number | null;
+	directionId: number | null;
+	destinations: string[];
+	data: GirouetteData;
+	enabled: boolean;
+};
+
+export type GirouetteInput = {
+	directionId: number | null;
+	destinations: string[];
+	data: GirouetteData;
+	enabled: boolean;
+};
+
+export const GetLineGirouettesQuery = (lineId: number) =>
+	queryOptions({
+		staleTime: 30_000,
+		queryKey: ["lines", lineId, "girouettes"],
+		queryFn: () => client.get(`/lines/${lineId}/girouettes`, { headers: getLegacyEditorHeaders() }).json<Girouette[]>(),
+	});
+
+export const CreateGirouetteMutation = (lineId: number) =>
+	mutationOptions({
+		mutationFn: async (json: GirouetteInput) => {
+			return client.post(`/lines/${lineId}/girouettes`, { headers: getLegacyEditorHeaders(), json }).json<Girouette>();
+		},
+	});
+
+export const UpdateGirouetteMutation = (girouetteId: number) =>
+	mutationOptions({
+		mutationFn: async (json: GirouetteInput) => {
+			return client.put(`/girouettes/${girouetteId}`, { headers: getLegacyEditorHeaders(), json }).json<Girouette>();
+		},
+	});
+
+export const ToggleGirouetteEnabledMutation = (girouetteId: number) =>
+	mutationOptions({
+		mutationFn: async (enabled: boolean) => {
+			return client
+				.patch(`/girouettes/${girouetteId}/enabled`, { headers: getLegacyEditorHeaders(), json: { enabled } })
+				.json<Girouette>();
+		},
+	});
+
+export const DeleteGirouetteMutation = (girouetteId: number) =>
+	mutationOptions({
+		mutationFn: async () => {
+			await client.delete(`/girouettes/${girouetteId}`, { headers: getLegacyEditorHeaders() });
+		},
+	});

apps/client/src/components/ui/color-picker.tsx

@@ -0,0 +1,70 @@
+import { XIcon } from "lucide-react";
+import { useRef } from "react";
+
+import { cn } from "~/utils/cn";
+
+type ColorPickerProps = {
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+	className?: string;
+};
+
+export function ColorPicker({ value, onChange, placeholder = "#RRGGBB", className }: Readonly<ColorPickerProps>) {
+	const colorInputRef = useRef<HTMLInputElement>(null);
+	const isValidHex = /^#[0-9A-Fa-f]{6}$/.test(value);
+
+	const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const raw = e.target.value;
+		onChange(raw.startsWith("#") ? raw : raw ? `#${raw}` : "");
+	};
+
+	const handleColorInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		onChange(e.target.value);
+	};
+
+	return (
+		<div className={cn("flex items-center gap-1.5", className)}>
+			<button
+				type="button"
+				title="Choisir une couleur"
+				onClick={() => colorInputRef.current?.click()}
+				className="size-8 shrink-0 rounded-lg border border-input transition-colors hover:border-ring focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
+				style={{ backgroundColor: isValidHex ? value : "transparent" }}
+			>
+				{!isValidHex && (
+					<span className="block w-full h-full rounded-lg bg-[repeating-conic-gradient(#ddd_0%_25%,#fff_0%_50%)] bg-[length:8px_8px]" />
+				)}
+			</button>
+
+			<input
+				ref={colorInputRef}
+				type="color"
+				className="sr-only"
+				value={isValidHex ? value : "#000000"}
+				onChange={handleColorInputChange}
+				tabIndex={-1}
+			/>
+
+			<input
+				type="text"
+				value={value}
+				onChange={handleTextChange}
+				placeholder={placeholder}
+				maxLength={7}
+				spellCheck={false}
+				className="h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 font-mono text-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive"
+			/>
+
+			<button
+				aria-disabled={!value}
+				type="button"
+				onClick={() => onChange("")}
+				title="Réinitialiser"
+				className={cn("shrink-0 text-muted-foreground hover:text-foreground transition-colors", !value && "invisible")}
+			>
+				<XIcon className="size-4" />
+			</button>
+		</div>
+	);
+}

apps/client/src/components/ui/switch.tsx

@@ -14,7 +14,7 @@ export function Switch({
 			data-slot="switch"
 			data-size={size}
 			className={cn(
-				"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:inset-x-0 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-8 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-branding data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+				"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:inset-x-0 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-branding data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
 				className,
 			)}
 			{...props}