feat: conformite enonce - explorer, favoris, stats perso, tests, slots
Some checks failed
Deploy XIP / deploy (push) Failing after 37s
Some checks failed
Deploy XIP / deploy (push) Failing after 37s
Fonctionnel
- Backend messages : GET /api/messages/:id (detail) + recherche (q),
pagination par curseur (before/limit) avec enveloppe { items, nextCursor,
hasMore } ; le flux temps reel garde l'ancien format quand aucun parametre.
- Explorer (/explorer) : catalogue distant, recherche debouncee + annulable
(AbortController), filtre, defilement infini, etat garde (keep-alive).
- Details par id : /message/:id et /shop/p/:id (consomment route.params).
- Favoris (/favoris) : liste perso persistee en localStorage, notation
(note/rating/statut) via modale, refletee partout (bouton favori).
- Mes stats (/mes-stats) : agregats derives des favoris (note moyenne, top
pays/auteurs, statuts), auto-mis a jour, route gardee si liste vide.
- Routeur : pages secondaires en lazy-load + repli, garde beforeEnter.
Technique
- Slots : PrefSection (slot defaut + slot nomme) enveloppe les 5 sections
"Mes Persos" ; Modal (Teleport + slots).
- v-model custom : SearchBox (defineModel + debounce).
- Directive custom : v-click-outside.
- Tests Vitest : 25 tests (etat, fonctions, composants), ~86% du code metier.
- Retrait d'Ionic (inutilise). Script typecheck backend ; tsconfig @types/bun.
- Correctif type : garde stockLimit nullable dans l'achat (catalog.ts).
- README complet (URL, stack, run, tests, secrets, deploiement, mention IA).
This commit is contained in:
@@ -1,212 +1,212 @@
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRealtime } from './useRealtime';
|
||||
import { useWallet, applyWalletFrame } from './useWallet';
|
||||
import { setPerks, applyPerksFrame, type Perks } from './usePerks';
|
||||
import { bumpAdsRevision } from './useAds';
|
||||
import { handleAlertFrame } from './useAlert';
|
||||
|
||||
// Module-level singleton so any component can read the viewer's own perks
|
||||
// without prop-drilling (e.g. SendButton, AdBand).
|
||||
export const myPerks = ref<Perks>({});
|
||||
|
||||
export function useMyPerks() {
|
||||
return { myPerks };
|
||||
}
|
||||
|
||||
export interface GeoInfo {
|
||||
country: string;
|
||||
countryCode: string;
|
||||
city: string;
|
||||
lat?: number;
|
||||
lon?: number;
|
||||
}
|
||||
|
||||
export interface Reply {
|
||||
id: string;
|
||||
content: string;
|
||||
authorIp: string;
|
||||
createdAt: string;
|
||||
parentId?: string | null;
|
||||
authorPerks?: Perks;
|
||||
authorGeo?: GeoInfo | null;
|
||||
richMode?: 'none' | 'htmlcss' | 'js';
|
||||
richContent?: string | null;
|
||||
attachments?: Attachment[];
|
||||
}
|
||||
|
||||
export interface Attachment {
|
||||
id: string;
|
||||
filename: string;
|
||||
mimeType: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export interface Message extends Reply {
|
||||
parentId: string | null;
|
||||
replies: Reply[];
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
/**
|
||||
* Refresh the viewer's own perks from the server (callable from anywhere).
|
||||
* The backend computes the perks (entitlement.kind → Perks) and returns them
|
||||
* precomputed as `myPerks`, so we just adopt them — no client-side re-derivation.
|
||||
*/
|
||||
export async function refreshMyPerks(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/shop/me`);
|
||||
if (!res.ok) return;
|
||||
const { myPerks: p } = (await res.json()) as { myPerks?: Perks };
|
||||
myPerks.value = p ?? {};
|
||||
const { ip } = useWallet();
|
||||
if (ip.value) setPerks(ip.value, myPerks.value);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
export function useMessages() {
|
||||
const messages = ref<Message[]>([]);
|
||||
const loading = ref(false);
|
||||
const sending = ref(false);
|
||||
|
||||
/** Seed the perks store from a message + its replies. */
|
||||
function harvestPerks(m: Message): void {
|
||||
setPerks(m.authorIp, m.authorPerks);
|
||||
for (const r of m.replies ?? []) setPerks(r.authorIp, r.authorPerks);
|
||||
}
|
||||
|
||||
async function fetchMessages(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/messages`);
|
||||
if (res.ok) {
|
||||
// API returns newest→oldest; reverse for chronological display.
|
||||
const list = ((await res.json()) as Message[]).reverse();
|
||||
list.forEach(harvestPerks);
|
||||
messages.value = list;
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Add a message pushed over the WebSocket (new thread or reply), with dedup. */
|
||||
function addIncoming(raw: Message & { parentId: string | null }): void {
|
||||
if (!raw || !raw.id) return;
|
||||
|
||||
// Always record the author's perks, even for replies.
|
||||
setPerks(raw.authorIp, raw.authorPerks);
|
||||
|
||||
if (raw.parentId == null) {
|
||||
// New top-level thread.
|
||||
if (messages.value.some((m) => m.id === raw.id)) return;
|
||||
messages.value.push({ ...raw, replies: raw.replies ?? [] });
|
||||
return;
|
||||
}
|
||||
|
||||
// Reply: attach to its parent thread if we have it.
|
||||
const parent = messages.value.find((m) => m.id === raw.parentId);
|
||||
if (!parent) return; // thread not loaded; reconnect-resync will reconcile
|
||||
if (parent.replies.some((r) => r.id === raw.id)) return;
|
||||
parent.replies.push({
|
||||
id: raw.id,
|
||||
content: raw.content,
|
||||
authorIp: raw.authorIp,
|
||||
createdAt: raw.createdAt,
|
||||
parentId: raw.parentId,
|
||||
authorPerks: raw.authorPerks,
|
||||
authorGeo: raw.authorGeo,
|
||||
richMode: raw.richMode,
|
||||
richContent: raw.richContent,
|
||||
attachments: raw.attachments,
|
||||
});
|
||||
}
|
||||
|
||||
const { fetchWallet, ip: myIp } = useWallet();
|
||||
|
||||
// The viewer's own perks (drives NoAds gating, rich-composer unlocks, etc.).
|
||||
// myPerks is module-level; this ref is the same reference.
|
||||
|
||||
async function fetchMyPerks(): Promise<void> {
|
||||
return refreshMyPerks();
|
||||
}
|
||||
|
||||
const { stats, connected, sendTyping } = useRealtime({
|
||||
onMessage: addIncoming,
|
||||
onReconnect: () => {
|
||||
fetchMessages();
|
||||
fetchWallet();
|
||||
fetchMyPerks();
|
||||
},
|
||||
onWallet: applyWalletFrame,
|
||||
onPerks: (data: { ip: string; perks: Perks }) => {
|
||||
applyPerksFrame(data);
|
||||
// If it's about us, update myPerks too (viewer-scoped perks like NoAds).
|
||||
if (myIp.value && data.ip === myIp.value) myPerks.value = data.perks ?? {};
|
||||
},
|
||||
onAds: () => bumpAdsRevision(), // a user ad entered rotation → refetch
|
||||
onAlert: (data) => handleAlertFrame(data), // paid global audio alert
|
||||
});
|
||||
|
||||
interface PostExtras {
|
||||
parentId?: string;
|
||||
richMode?: 'htmlcss' | 'js';
|
||||
richContent?: string;
|
||||
attachmentIds?: string[];
|
||||
}
|
||||
|
||||
async function postMessage(content: string, extras: PostExtras = {}): Promise<boolean> {
|
||||
const hasRich = !!extras.richContent && !!extras.richMode;
|
||||
const hasFiles = !!extras.attachmentIds?.length;
|
||||
// Allow empty text only when there's rich content or an attachment.
|
||||
if (!content.trim() && !hasRich && !hasFiles) return false;
|
||||
sending.value = true;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/messages`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
content: content.trim(),
|
||||
parentId: extras.parentId,
|
||||
richMode: extras.richMode,
|
||||
richContent: extras.richContent,
|
||||
attachmentIds: extras.attachmentIds,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) return false;
|
||||
// The created message comes back via the WebSocket broadcast, so no
|
||||
// re-fetch here. Fallback: if the socket is down, add it locally.
|
||||
if (!connected.value) {
|
||||
const created = (await res.json()) as Message;
|
||||
addIncoming(
|
||||
created.parentId == null ? { ...created, replies: [] } : created
|
||||
);
|
||||
}
|
||||
return true;
|
||||
} finally {
|
||||
sending.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchMessages();
|
||||
fetchWallet();
|
||||
fetchMyPerks();
|
||||
});
|
||||
|
||||
// Note: viewer-own perks live in the module-level `myPerks` singleton; read
|
||||
// them via `useMyPerks()` rather than off this return (consistency rule).
|
||||
return {
|
||||
messages,
|
||||
loading,
|
||||
sending,
|
||||
postMessage,
|
||||
stats,
|
||||
connected,
|
||||
sendTyping,
|
||||
myIp,
|
||||
fetchMyPerks,
|
||||
};
|
||||
}
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRealtime } from './useRealtime';
|
||||
import { useWallet, applyWalletFrame } from './useWallet';
|
||||
import { setPerks, applyPerksFrame, type Perks } from './usePerks';
|
||||
import { bumpAdsRevision } from './useAds';
|
||||
import { handleAlertFrame } from './useAlert';
|
||||
|
||||
// Module-level singleton so any component can read the viewer's own perks
|
||||
// without prop-drilling (e.g. SendButton, AdBand).
|
||||
export const myPerks = ref<Perks>({});
|
||||
|
||||
export function useMyPerks() {
|
||||
return { myPerks };
|
||||
}
|
||||
|
||||
export interface GeoInfo {
|
||||
country: string;
|
||||
countryCode: string;
|
||||
city: string;
|
||||
lat?: number;
|
||||
lon?: number;
|
||||
}
|
||||
|
||||
export interface Reply {
|
||||
id: string;
|
||||
content: string;
|
||||
authorIp: string;
|
||||
createdAt: string;
|
||||
parentId?: string | null;
|
||||
authorPerks?: Perks;
|
||||
authorGeo?: GeoInfo | null;
|
||||
richMode?: 'none' | 'htmlcss' | 'js';
|
||||
richContent?: string | null;
|
||||
attachments?: Attachment[];
|
||||
}
|
||||
|
||||
export interface Attachment {
|
||||
id: string;
|
||||
filename: string;
|
||||
mimeType: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export interface Message extends Reply {
|
||||
parentId: string | null;
|
||||
replies: Reply[];
|
||||
}
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
/**
|
||||
* Refresh the viewer's own perks from the server (callable from anywhere).
|
||||
* The backend computes the perks (entitlement.kind → Perks) and returns them
|
||||
* precomputed as `myPerks`, so we just adopt them — no client-side re-derivation.
|
||||
*/
|
||||
export async function refreshMyPerks(): Promise<void> {
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/shop/me`);
|
||||
if (!res.ok) return;
|
||||
const { myPerks: p } = (await res.json()) as { myPerks?: Perks };
|
||||
myPerks.value = p ?? {};
|
||||
const { ip } = useWallet();
|
||||
if (ip.value) setPerks(ip.value, myPerks.value);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
export function useMessages() {
|
||||
const messages = ref<Message[]>([]);
|
||||
const loading = ref(false);
|
||||
const sending = ref(false);
|
||||
|
||||
/** Seed the perks store from a message + its replies. */
|
||||
function harvestPerks(m: Message): void {
|
||||
setPerks(m.authorIp, m.authorPerks);
|
||||
for (const r of m.replies ?? []) setPerks(r.authorIp, r.authorPerks);
|
||||
}
|
||||
|
||||
async function fetchMessages(): Promise<void> {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/messages`);
|
||||
if (res.ok) {
|
||||
// API returns newest→oldest; reverse for chronological display.
|
||||
const list = ((await res.json()) as Message[]).reverse();
|
||||
list.forEach(harvestPerks);
|
||||
messages.value = list;
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Add a message pushed over the WebSocket (new thread or reply), with dedup. */
|
||||
function addIncoming(raw: Message & { parentId: string | null }): void {
|
||||
if (!raw || !raw.id) return;
|
||||
|
||||
// Always record the author's perks, even for replies.
|
||||
setPerks(raw.authorIp, raw.authorPerks);
|
||||
|
||||
if (raw.parentId == null) {
|
||||
// New top-level thread.
|
||||
if (messages.value.some((m) => m.id === raw.id)) return;
|
||||
messages.value.push({ ...raw, replies: raw.replies ?? [] });
|
||||
return;
|
||||
}
|
||||
|
||||
// Reply: attach to its parent thread if we have it.
|
||||
const parent = messages.value.find((m) => m.id === raw.parentId);
|
||||
if (!parent) return; // thread not loaded; reconnect-resync will reconcile
|
||||
if (parent.replies.some((r) => r.id === raw.id)) return;
|
||||
parent.replies.push({
|
||||
id: raw.id,
|
||||
content: raw.content,
|
||||
authorIp: raw.authorIp,
|
||||
createdAt: raw.createdAt,
|
||||
parentId: raw.parentId,
|
||||
authorPerks: raw.authorPerks,
|
||||
authorGeo: raw.authorGeo,
|
||||
richMode: raw.richMode,
|
||||
richContent: raw.richContent,
|
||||
attachments: raw.attachments,
|
||||
});
|
||||
}
|
||||
|
||||
const { fetchWallet, ip: myIp } = useWallet();
|
||||
|
||||
// The viewer's own perks (drives NoAds gating, rich-composer unlocks, etc.).
|
||||
// myPerks is module-level; this ref is the same reference.
|
||||
|
||||
async function fetchMyPerks(): Promise<void> {
|
||||
return refreshMyPerks();
|
||||
}
|
||||
|
||||
const { stats, connected, sendTyping } = useRealtime({
|
||||
onMessage: addIncoming,
|
||||
onReconnect: () => {
|
||||
fetchMessages();
|
||||
fetchWallet();
|
||||
fetchMyPerks();
|
||||
},
|
||||
onWallet: applyWalletFrame,
|
||||
onPerks: (data: { ip: string; perks: Perks }) => {
|
||||
applyPerksFrame(data);
|
||||
// If it's about us, update myPerks too (viewer-scoped perks like NoAds).
|
||||
if (myIp.value && data.ip === myIp.value) myPerks.value = data.perks ?? {};
|
||||
},
|
||||
onAds: () => bumpAdsRevision(), // a user ad entered rotation → refetch
|
||||
onAlert: (data) => handleAlertFrame(data), // paid global audio alert
|
||||
});
|
||||
|
||||
interface PostExtras {
|
||||
parentId?: string;
|
||||
richMode?: 'htmlcss' | 'js';
|
||||
richContent?: string;
|
||||
attachmentIds?: string[];
|
||||
}
|
||||
|
||||
async function postMessage(content: string, extras: PostExtras = {}): Promise<boolean> {
|
||||
const hasRich = !!extras.richContent && !!extras.richMode;
|
||||
const hasFiles = !!extras.attachmentIds?.length;
|
||||
// Allow empty text only when there's rich content or an attachment.
|
||||
if (!content.trim() && !hasRich && !hasFiles) return false;
|
||||
sending.value = true;
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/messages`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
content: content.trim(),
|
||||
parentId: extras.parentId,
|
||||
richMode: extras.richMode,
|
||||
richContent: extras.richContent,
|
||||
attachmentIds: extras.attachmentIds,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) return false;
|
||||
// The created message comes back via the WebSocket broadcast, so no
|
||||
// re-fetch here. Fallback: if the socket is down, add it locally.
|
||||
if (!connected.value) {
|
||||
const created = (await res.json()) as Message;
|
||||
addIncoming(
|
||||
created.parentId == null ? { ...created, replies: [] } : created
|
||||
);
|
||||
}
|
||||
return true;
|
||||
} finally {
|
||||
sending.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchMessages();
|
||||
fetchWallet();
|
||||
fetchMyPerks();
|
||||
});
|
||||
|
||||
// Note: viewer-own perks live in the module-level `myPerks` singleton; read
|
||||
// them via `useMyPerks()` rather than off this return (consistency rule).
|
||||
return {
|
||||
messages,
|
||||
loading,
|
||||
sending,
|
||||
postMessage,
|
||||
stats,
|
||||
connected,
|
||||
sendTyping,
|
||||
myIp,
|
||||
fetchMyPerks,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user