create-snapify-app 0.0.0-stage → 1.1.1

package/template/apps/community/src/App.tsx

@@ -0,0 +1,592 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useEffect, useState } from 'react';
+import { Link, Navigate, Route, Routes, useNavigate, useParams } from 'react-router-dom';
+import {
+  Bell,
+  Heart,
+  Lock,
+  MessageCircle,
+  Pin,
+  Plus,
+  Search,
+  Shield,
+} from 'lucide-react';
+import { api, ApiError, type PlatformUser } from '../../shared/api';
+import { useAuth } from '../../shared/AuthContext';
+import { Brand, SnapifyMark } from '../../shared/Logo';
+import { Button, Card, Input, TextArea } from '../../shared/ui';
+
+type Category = { id: string; name: string; slug: string; description: string; topicCount: number; icon: string };
+type Topic = {
+  id: string;
+  title: string;
+  slug: string;
+  pinned: boolean;
+  locked: boolean;
+  views: number;
+  lastPostAt: string;
+  replyCount: number;
+  author: PlatformUser | null;
+  category: Category | null;
+  subscribed?: boolean;
+};
+type Post = {
+  id: string;
+  body: string;
+  createdAt: string;
+  editedAt: string | null;
+  author: PlatformUser | null;
+  likeCount: number;
+  liked: boolean;
+};
+
+function Shell({ children }: { children: React.ReactNode }) {
+  const { user, logout } = useAuth();
+  const [unread, setUnread] = useState(0);
+  useEffect(() => {
+    if (!user) return;
+    api<{ unread: number }>('/api/community/notifications')
+      .then((d) => setUnread(d.unread))
+      .catch(() => undefined);
+  }, [user]);
+
+  return (
+    <div className="flex min-h-screen">
+      <aside className="hidden w-64 shrink-0 flex-col bg-navy-950 text-white lg:flex">
+        <div className="flex h-16 items-center gap-3 border-b border-white/10 px-5">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-brand-600">
+            <SnapifyMark className="h-5 w-5" accent="#fff" frame="#fff" />
+          </div>
+          <div>
+            <div className="text-sm font-semibold">Snapify</div>
+            <div className="text-xs text-white/50">Community</div>
+          </div>
+        </div>
+        <nav className="flex-1 space-y-1 p-3 text-sm">
+          <Link className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-white/10" to="/">
+            <MessageCircle className="h-4 w-4 text-brand-500" /> Accueil
+          </Link>
+          <Link className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-white/10" to="/topics">
+            Discussions
+          </Link>
+          <Link className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-white/10" to="/search">
+            <Search className="h-4 w-4" /> Recherche
+          </Link>
+          <div className="my-3 border-t border-white/10 pt-3">
+            <p className="mb-1 px-3 text-[10px] font-semibold uppercase tracking-wider text-white/35">Snapify</p>
+            <a className="flex items-center gap-2 rounded-lg px-3 py-2 text-white/80 hover:bg-white/10" href="https://snapify.tn">
+              Site Tunisie
+            </a>
+            <a className="flex items-center gap-2 rounded-lg px-3 py-2 text-white/80 hover:bg-white/10" href="https://snapify.fr">
+              Site France
+            </a>
+            <a className="flex items-center gap-2 rounded-lg px-3 py-2 text-white/80 hover:bg-white/10" href="https://marketplace.snapify.tn">
+              Marketplace
+            </a>
+            <a className="flex items-center gap-2 rounded-lg px-3 py-2 text-white/80 hover:bg-white/10" href="https://novalabs.tn" rel="noopener noreferrer">
+              NOVALABS
+            </a>
+          </div>
+          {user && (
+            <Link className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-white/10" to="/notifications">
+              <Bell className="h-4 w-4" /> Notifications
+              {unread > 0 && <span className="ml-auto rounded-full bg-brand-500 px-2 text-xs">{unread}</span>}
+            </Link>
+          )}
+          {(user?.role === 'mod' || user?.role === 'admin') && (
+            <Link className="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-white/10" to="/mod">
+              <Shield className="h-4 w-4" /> Modération
+            </Link>
+          )}
+        </nav>
+        <div className="border-t border-white/10 p-4 text-xs text-white/40">Forum Snapify</div>
+      </aside>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-slate-200/80 bg-white/85 px-4 backdrop-blur sm:px-6">
+          <div className="lg:hidden">
+            <Brand subtitle="Community" />
+          </div>
+          <div className="hidden text-sm font-medium text-slate-500 lg:block">Forum des passionnés Snapify</div>
+          <div className="flex items-center gap-2">
+            {user ? (
+              <>
+                <Link to="/new" className="inline-flex items-center gap-1 rounded-lg bg-navy-900 px-3 py-2 text-sm font-semibold text-white">
+                  <Plus className="h-4 w-4" /> Nouveau
+                </Link>
+                <span className="hidden text-sm sm:inline">{user.displayName}</span>
+                <Button variant="secondary" onClick={() => void logout()}>
+                  Sortir
+                </Button>
+              </>
+            ) : (
+              <Link to="/login" className="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white">
+                Connexion
+              </Link>
+            )}
+          </div>
+        </header>
+        <main className="flex-1 bg-slate-50 p-4 sm:p-6">{children}</main>
+      </div>
+    </div>
+  );
+}
+
+function Home() {
+  const [cats, setCats] = useState<Category[]>([]);
+  const [stats, setStats] = useState({ topics: 0, posts: 0, members: 0 });
+  const [recent, setRecent] = useState<Topic[]>([]);
+  useEffect(() => {
+    api<{ items: Category[] }>('/api/community/categories').then((d) => setCats(d.items));
+    api<typeof stats>('/api/community/stats').then(setStats);
+    api<{ items: Topic[] }>('/api/community/topics?pageSize=10').then((d) => setRecent(d.items));
+  }, []);
+
+  return (
+    <div className="mx-auto max-w-5xl space-y-8">
+      <div className="grid gap-4 sm:grid-cols-3">
+        {[
+          ['Sujets', stats.topics],
+          ['Messages', stats.posts],
+          ['Membres', stats.members],
+        ].map(([l, v]) => (
+          <Card key={String(l)} className="p-5">
+            <div className="text-xs font-semibold uppercase tracking-wide text-slate-500">{l}</div>
+            <div className="mt-1 text-3xl font-bold text-navy-900">{v}</div>
+          </Card>
+        ))}
+      </div>
+      <section>
+        <h2 className="text-lg font-semibold text-navy-900">Catégories</h2>
+        <div className="mt-4 grid gap-3 sm:grid-cols-2">
+          {cats.map((c) => (
+            <Link key={c.id} to={`/c/${c.slug}`} className="rounded-xl border border-slate-200 bg-white p-5 hover:border-brand-500/40">
+              <div className="font-semibold text-navy-900">{c.name}</div>
+              <p className="mt-1 text-sm text-slate-500">{c.description}</p>
+              <p className="mt-2 text-xs text-brand-600">{c.topicCount} sujets</p>
+            </Link>
+          ))}
+        </div>
+      </section>
+      <section>
+        <h2 className="text-lg font-semibold">Discussions récentes</h2>
+        <div className="mt-4 space-y-2">
+          {recent.map((t) => (
+            <TopicRow key={t.id} t={t} />
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function TopicRow({ t }: { t: Topic }) {
+  return (
+    <Link to={`/t/${t.slug}`} className="flex items-start gap-3 rounded-xl border border-slate-200 bg-white p-4 hover:border-brand-500/30">
+      <div className="mt-0.5 flex gap-1 text-brand-600">
+        {t.pinned && <Pin className="h-4 w-4" />}
+        {t.locked && <Lock className="h-4 w-4" />}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="font-semibold text-navy-900">{t.title}</div>
+        <div className="mt-1 text-xs text-slate-500">
+          {t.category?.name} · {t.author?.displayName} · {t.replyCount} réponses · {t.views} vues
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+function CategoryPage() {
+  const { slug } = useParams();
+  return <TopicsListWrapper category={slug || ''} />;
+}
+
+function TopicsListWrapper({ category }: { category: string }) {
+  const [items, setItems] = useState<Topic[]>([]);
+  useEffect(() => {
+    const qs = category ? `?category=${category}&pageSize=30` : '?pageSize=30';
+    api<{ items: Topic[] }>(`/api/community/topics${qs}`).then((d) => setItems(d.items));
+  }, [category]);
+  return (
+    <div className="mx-auto max-w-4xl">
+      <h1 className="text-2xl font-bold capitalize">{category || 'Discussions'}</h1>
+      <div className="mt-4 space-y-2">
+        {items.map((t) => (
+          <TopicRow key={t.id} t={t} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TopicPage() {
+  const { slug } = useParams();
+  const { user } = useAuth();
+  const nav = useNavigate();
+  const [topic, setTopic] = useState<Topic | null>(null);
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [reply, setReply] = useState('');
+
+  const load = () =>
+    api<{ topic: Topic; posts: Post[] }>(`/api/community/topics/${slug}`).then((d) => {
+      setTopic(d.topic);
+      setPosts(d.posts);
+    });
+
+  useEffect(() => {
+    void load();
+  }, [slug]);
+
+  if (!topic) return <div className="text-slate-500">Chargement…</div>;
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-4">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-bold text-navy-900">{topic.title}</h1>
+          <p className="mt-1 text-sm text-slate-500">
+            {topic.category?.name} · {topic.views} vues
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {user && (
+            <Button
+              variant="secondary"
+              onClick={async () => {
+                await api(`/api/community/topics/${slug}/subscribe`, { method: 'POST', body: '{}' });
+                void load();
+              }}
+            >
+              {topic.subscribed ? 'Ne plus suivre' : 'Suivre'}
+            </Button>
+          )}
+          {(user?.role === 'mod' || user?.role === 'admin') && (
+            <>
+              <Button
+                variant="ghost"
+                onClick={async () => {
+                  await api(`/api/community/topics/${slug}/moderate`, { method: 'POST', body: JSON.stringify({ action: 'pin' }) });
+                  void load();
+                }}
+              >
+                Épingler
+              </Button>
+              <Button
+                variant="ghost"
+                onClick={async () => {
+                  await api(`/api/community/topics/${slug}/moderate`, { method: 'POST', body: JSON.stringify({ action: 'lock' }) });
+                  void load();
+                }}
+              >
+                Verrouiller
+              </Button>
+              <Button
+                variant="danger"
+                onClick={async () => {
+                  await api(`/api/community/topics/${slug}/moderate`, { method: 'POST', body: JSON.stringify({ action: 'delete' }) });
+                  nav('/');
+                }}
+              >
+                Supprimer
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {posts.map((p) => (
+        <Card key={p.id} className="p-5">
+          <div className="flex items-center justify-between text-sm">
+            <Link to={`/u/${p.author?.id}`} className="font-semibold text-navy-900">
+              {p.author?.displayName || 'Anonyme'}
+            </Link>
+            <span className="text-slate-400">{new Date(p.createdAt).toLocaleString('fr-TN')}</span>
+          </div>
+          <div className="prose-forum mt-3 text-sm" dangerouslySetInnerHTML={{ __html: p.body }} />
+          <div className="mt-4 flex gap-3">
+            <button
+              className={`inline-flex items-center gap-1 text-sm ${p.liked ? 'text-brand-600' : 'text-slate-500'}`}
+              onClick={async () => {
+                if (!user) return nav('/login');
+                await api(`/api/community/posts/${p.id}/like`, { method: 'POST', body: '{}' });
+                void load();
+              }}
+            >
+              <Heart className={`h-4 w-4 ${p.liked ? 'fill-brand-500' : ''}`} /> {p.likeCount}
+            </button>
+            {user && (
+              <button
+                className="text-sm text-slate-500"
+                onClick={async () => {
+                  const reason = prompt('Raison du signalement ?');
+                  if (!reason) return;
+                  await api('/api/community/report', {
+                    method: 'POST',
+                    body: JSON.stringify({ targetType: 'post', targetId: p.id, reason }),
+                  });
+                  alert('Signalement envoyé');
+                }}
+              >
+                Signaler
+              </button>
+            )}
+          </div>
+        </Card>
+      ))}
+
+      {!topic.locked && user && (
+        <Card className="p-5">
+          <h3 className="font-semibold">Répondre</h3>
+          <TextArea className="mt-3" rows={4} value={reply} onChange={(e) => setReply(e.target.value)} placeholder="Votre message (HTML simple autorisé)" />
+          <Button
+            className="mt-3"
+            onClick={async () => {
+              await api(`/api/community/topics/${slug}/posts`, {
+                method: 'POST',
+                body: JSON.stringify({ body: `<p>${reply.replace(/</g, '&lt;')}</p>` }),
+              });
+              setReply('');
+              void load();
+            }}
+          >
+            Publier
+          </Button>
+        </Card>
+      )}
+      {!user && <p className="text-sm text-slate-500">Connectez-vous pour répondre.</p>}
+    </div>
+  );
+}
+
+function NewTopic() {
+  const { user } = useAuth();
+  const nav = useNavigate();
+  const [cats, setCats] = useState<Category[]>([]);
+  const [title, setTitle] = useState('');
+  const [body, setBody] = useState('');
+  const [category, setCategory] = useState('general');
+  const [err, setErr] = useState('');
+
+  useEffect(() => {
+    api<{ items: Category[] }>('/api/community/categories').then((d) => setCats(d.items));
+  }, []);
+
+  if (!user) return <Navigate to="/login" replace />;
+
+  return (
+    <div className="mx-auto max-w-2xl">
+      <h1 className="text-2xl font-bold">Nouveau sujet</h1>
+      <Card className="mt-4 space-y-3 p-6">
+        <select className="w-full rounded-xl border px-3 py-2" value={category} onChange={(e) => setCategory(e.target.value)}>
+          {cats.map((c) => (
+            <option key={c.id} value={c.slug}>
+              {c.name}
+            </option>
+          ))}
+        </select>
+        <Input placeholder="Titre" value={title} onChange={(e) => setTitle(e.target.value)} />
+        <TextArea rows={8} placeholder="Message" value={body} onChange={(e) => setBody(e.target.value)} />
+        {err && <p className="text-sm text-red-600">{err}</p>}
+        <Button
+          onClick={async () => {
+            try {
+              const res = await api<{ slug: string }>('/api/community/topics', {
+                method: 'POST',
+                body: JSON.stringify({ title, category, body: `<p>${body.replace(/</g, '&lt;')}</p>` }),
+              });
+              nav(`/t/${res.slug}`);
+            } catch (e) {
+              setErr(e instanceof ApiError ? e.message : 'Erreur');
+            }
+          }}
+        >
+          Créer
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+function AuthPage({ mode }: { mode: 'login' | 'register' }) {
+  const { login, register, user } = useAuth();
+  const nav = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [err, setErr] = useState('');
+  if (user) return <Navigate to="/" replace />;
+  return (
+    <div className="mx-auto max-w-md">
+      <Card className="p-8">
+        <h1 className="text-2xl font-bold">{mode === 'login' ? 'Connexion' : 'Inscription'}</h1>
+        <form
+          className="mt-6 space-y-3"
+          onSubmit={async (e) => {
+            e.preventDefault();
+            try {
+              if (mode === 'login') await login(email, password);
+              else await register(email, password, displayName);
+              nav('/');
+            } catch (ex) {
+              setErr(ex instanceof ApiError ? ex.message : 'Erreur');
+            }
+          }}
+        >
+          {mode === 'register' && <Input placeholder="Nom" value={displayName} onChange={(e) => setDisplayName(e.target.value)} required />}
+          <Input type="email" placeholder="E-mail" value={email} onChange={(e) => setEmail(e.target.value)} required />
+          <Input type="password" placeholder="Mot de passe" value={password} onChange={(e) => setPassword(e.target.value)} required />
+          {err && <p className="text-sm text-red-600">{err}</p>}
+          <Button type="submit" className="w-full">
+            {mode === 'login' ? 'Entrer' : 'Créer le compte'}
+          </Button>
+        </form>
+        <p className="mt-4 text-center text-sm">
+          {mode === 'login' ? <Link to="/register">Créer un compte</Link> : <Link to="/login">Déjà inscrit ?</Link>}
+        </p>
+      </Card>
+    </div>
+  );
+}
+
+function SearchPage() {
+  const [q, setQ] = useState('');
+  const [res, setRes] = useState<{ topics: Topic[]; posts: { id: string; body: string; topicId: string }[] }>({ topics: [], posts: [] });
+  return (
+    <div className="mx-auto max-w-3xl">
+      <h1 className="text-2xl font-bold">Recherche</h1>
+      <div className="mt-4 flex gap-2">
+        <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Mots-clés…" />
+        <Button
+          onClick={async () => {
+            const d = await api<typeof res>(`/api/community/search?q=${encodeURIComponent(q)}`);
+            setRes(d);
+          }}
+        >
+          Chercher
+        </Button>
+      </div>
+      <div className="mt-6 space-y-2">
+        {res.topics.map((t) => (
+          <TopicRow key={t.id} t={t} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function NotificationsPage() {
+  const { user } = useAuth();
+  const [items, setItems] = useState<{ id: string; type: string; payload: Record<string, unknown>; readAt: string | null }[]>([]);
+  useEffect(() => {
+    if (!user) return;
+    api<{ items: typeof items }>('/api/community/notifications').then((d) => setItems(d.items));
+    void api('/api/community/notifications/read', { method: 'POST', body: '{}' });
+  }, [user]);
+  if (!user) return <Navigate to="/login" replace />;
+  return (
+    <div className="mx-auto max-w-2xl">
+      <h1 className="text-2xl font-bold">Notifications</h1>
+      <div className="mt-4 space-y-2">
+        {items.map((n) => (
+          <Card key={n.id} className="p-4 text-sm">
+            <div className="font-semibold">{n.type}</div>
+            <pre className="mt-1 overflow-auto text-xs text-slate-500">{JSON.stringify(n.payload)}</pre>
+            {typeof n.payload.slug === 'string' && (
+              <Link className="text-brand-600" to={`/t/${n.payload.slug}`}>
+                Ouvrir
+              </Link>
+            )}
+          </Card>
+        ))}
+        {!items.length && <p className="text-slate-500">Aucune notification.</p>}
+      </div>
+    </div>
+  );
+}
+
+function ModPage() {
+  const { user } = useAuth();
+  const [reports, setReports] = useState<{ id: string; reason: string; targetType: string; targetId: string }[]>([]);
+  useEffect(() => {
+    if (user?.role === 'mod' || user?.role === 'admin') {
+      api<{ items: typeof reports }>('/api/community/reports').then((d) => setReports(d.items));
+    }
+  }, [user]);
+  if (!user || (user.role !== 'mod' && user.role !== 'admin')) return <Navigate to="/" replace />;
+  return (
+    <div className="mx-auto max-w-3xl">
+      <h1 className="text-2xl font-bold">Modération</h1>
+      <div className="mt-4 space-y-2">
+        {reports.map((r) => (
+          <Card key={r.id} className="flex items-center justify-between p-4">
+            <div className="text-sm">
+              <div className="font-semibold">
+                {r.targetType} {r.targetId.slice(0, 8)}
+              </div>
+              <div className="text-slate-500">{r.reason}</div>
+            </div>
+            <Button
+              onClick={async () => {
+                await api(`/api/community/reports/${r.id}`, { method: 'POST', body: JSON.stringify({ status: 'resolved' }) });
+                setReports((x) => x.filter((i) => i.id !== r.id));
+              }}
+            >
+              Traiter
+            </Button>
+          </Card>
+        ))}
+        {!reports.length && <p className="text-slate-500">Aucun signalement.</p>}
+      </div>
+    </div>
+  );
+}
+
+function ProfilePage() {
+  const { id } = useParams();
+  const [data, setData] = useState<{ user: PlatformUser; recentTopics: Topic[] } | null>(null);
+  useEffect(() => {
+    api<typeof data>(`/api/community/users/${id}`).then(setData);
+  }, [id]);
+  if (!data) return null;
+  return (
+    <div className="mx-auto max-w-3xl">
+      <Card className="p-6">
+        <h1 className="text-2xl font-bold">{data.user.displayName}</h1>
+        <p className="text-sm text-slate-500">{data.user.role}</p>
+        <p className="mt-3 text-sm">{data.user.bio || 'Pas de bio.'}</p>
+      </Card>
+      <h2 className="mt-8 font-semibold">Sujets</h2>
+      <div className="mt-3 space-y-2">
+        {data.recentTopics.map((t) => (
+          <TopicRow key={t.id} t={{ ...t, replyCount: 0, author: data.user, category: null }} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function App() {
+  return (
+    <Shell>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/topics" element={<TopicsListWrapper category="" />} />
+        <Route path="/c/:slug" element={<CategoryPage />} />
+        <Route path="/t/:slug" element={<TopicPage />} />
+        <Route path="/new" element={<NewTopic />} />
+        <Route path="/login" element={<AuthPage mode="login" />} />
+        <Route path="/register" element={<AuthPage mode="register" />} />
+        <Route path="/search" element={<SearchPage />} />
+        <Route path="/notifications" element={<NotificationsPage />} />
+        <Route path="/mod" element={<ModPage />} />
+        <Route path="/u/:id" element={<ProfilePage />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </Shell>
+  );
+}

package/template/apps/community/src/main.tsx

@@ -0,0 +1,20 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from '../../shared/AuthContext';
+import { App } from './App';
+import './styles.css';
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/template/apps/community/src/styles.css

@@ -0,0 +1,24 @@
+@import "tailwindcss";
+
+@theme inline {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --color-brand-50: #e6faf8;
+  --color-brand-100: #c2f2ee;
+  --color-brand-500: #00c6ba;
+  --color-brand-600: #00a89d;
+  --color-navy-800: #111d33;
+  --color-navy-900: #0b1528;
+  --color-navy-950: #070e1c;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-feature-settings: "cv11", "ss01";
+}
+
+.prose-forum p {
+  margin: 0.5em 0;
+}
+.prose-forum a {
+  color: var(--color-brand-600);
+}