systeme de themes qui fonctionnouille

frontend/src/composables/useMessageItem.ts

@@ -0,0 +1,62 @@
+import { type GeoInfo } from '@/composables/useMessages';
+import { getIpColorWithPerks, getIpGlowWithPerks, getIpGlow } from '@/composables/ipColor';
+import { usePerks } from '@/composables/usePerks';
+import { useCustomStyles } from '@/composables/useCustomStyles';
+import { useMyPerks } from '@/composables/useMessages';
+
+export function useMessageItem() {
+  const { perksFor } = usePerks();
+  const { myPerks } = useMyPerks();
+  const { prefs } = useCustomStyles();
+
+  function perksOf(m: { authorIp: string; authorPerks?: any }) {
+    return m.authorPerks ?? perksFor(m.authorIp);
+  }
+
+  function ipStyle(m: { authorIp: string; authorPerks?: any }) {
+    const ip = m.authorIp;
+    const override = prefs.ipColors[ip];
+    if (override && override !== 'auto') {
+      return { color: override, textShadow: getIpGlow(override) };
+    }
+    const p = perksOf(m);
+    return { color: getIpColorWithPerks(ip, p), textShadow: getIpGlowWithPerks(ip, p) };
+  }
+
+  function petsLeft(m: { authorIp: string; authorPerks?: any }) {
+    const ip = m.authorIp;
+    if (ip in prefs.ipPets) return prefs.ipPets[ip];
+    return (perksOf(m)?.pets ?? [])
+      .filter((x: any) => x.position === 'left' || x.position === 'both')
+      .map((x: any) => x.char).join('');
+  }
+
+  function petsRight(m: { authorIp: string; authorPerks?: any }) {
+    const ip = m.authorIp;
+    if (ip in prefs.ipPets) return '';
+    return (perksOf(m)?.pets ?? [])
+      .filter((x: any) => x.position === 'right' || x.position === 'both')
+      .map((x: any) => x.char).join('');
+  }
+
+  function fmt(date: string) {
+    return new Date(date).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+  }
+
+  function geoLabel(geo?: GeoInfo | null): string {
+    if (!geo) return '';
+    if (!geo.countryCode) return 'Local';
+    const place = geo.city || geo.country;
+    if (geo.lat != null && geo.lon != null) {
+      return `${place} · ${geo.lat.toFixed(4)}, ${geo.lon.toFixed(4)}`;
+    }
+    return place;
+  }
+
+  function geoLink(geo?: GeoInfo | null): string {
+    if (!geo || geo.lat == null || geo.lon == null) return 'https://maps.google.com';
+    return `https://www.google.com/maps/search/?api=1&query=${geo.lat},${geo.lon}`;
+  }
+
+  return { perksOf, ipStyle, petsLeft, petsRight, fmt, geoLabel, geoLink, myPerks, prefs };
+}

frontend/src/composables/useTheme.ts

@@ -0,0 +1,39 @@
+import { ref, provide, inject, type InjectionKey, type Ref } from 'vue';
+
+export type Theme = 'default' | 'bubble' | 'compact';
+
+export interface ThemeContext {
+  theme: Ref<Theme>;
+  setTheme: (t: Theme) => void;
+}
+
+export const THEME_KEY: InjectionKey<ThemeContext> = Symbol('xip-theme');
+
+const THEMES: Record<Theme, { label: string; emoji: string }> = {
+  default: { label: 'Classique', emoji: '📋' },
+  bubble:  { label: 'Bulles',    emoji: '💬' },
+  compact: { label: 'Compact',   emoji: '📐' },
+};
+
+export function provideTheme() {
+  const saved = (localStorage.getItem('xip-theme') ?? 'default') as Theme;
+  const theme = ref<Theme>(THEMES[saved] ? saved : 'default');
+
+  function setTheme(t: Theme) {
+    theme.value = t;
+    localStorage.setItem('xip-theme', t);
+  }
+
+  const ctx: ThemeContext = { theme, setTheme };
+  provide(THEME_KEY, ctx);
+  return ctx;
+}
+
+export function useTheme(): ThemeContext {
+  return inject(THEME_KEY, {
+    theme: ref<Theme>('default'),
+    setTheme: () => {},
+  });
+}
+
+export { THEMES };