feat: add CommunityModal and CommunityChannelList components for community engagement. Integrate community channels into the sidebar and landing page, enhancing user interaction with WhatsApp and Discord links. Implement CommunityCard in account settings for quick access to community resources.

apps/web/src/components/CommunityChannelList.tsx

@@ -0,0 +1,90 @@
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import {
+  COMMUNITY_PLATFORM_META,
+  getCommunitySections,
+  type CommunityChannel,
+  type CommunityPlatform,
+} from "@/lib/community-links";
+
+function ChannelRow({
+  channel,
+  platform,
+  variant,
+}: {
+  channel: CommunityChannel;
+  platform: CommunityPlatform;
+  variant: "modal" | "card";
+}) {
+  const meta = COMMUNITY_PLATFORM_META[platform];
+  const baseClass =
+    variant === "modal"
+      ? `w-full flex items-start gap-3 py-3.5 px-4 rounded-[var(--radius-lg)] font-semibold transition-all text-[var(--clay-black)] border-2 clay-hover ${meta?.linkClass ?? ""}`
+      : `flex items-start gap-3 rounded-[var(--radius-lg)] border px-4 py-3 transition-colors ${meta?.linkClass ?? "border-[var(--oat-border)] bg-[var(--warm-cream)]/60"}`;
+
+  const iconClass = meta?.iconClass ?? "text-[var(--matcha-700)]";
+
+  if (!channel.href) {
+    return (
+      <div
+        className={`${baseClass} opacity-70 cursor-not-allowed border-dashed`}
+        aria-disabled="true"
+      >
+        <MaterialIcon name={channel.icon} className={`text-2xl shrink-0 mt-0.5 ${iconClass}`} />
+        <span className="text-left flex-1">
+          <span className="flex items-center gap-2 flex-wrap">
+            <span className="block font-bold">{channel.name}</span>
+            <span className="text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)]">
+              Segera hadir
+            </span>
+          </span>
+          <span className="block text-sm font-normal text-[var(--warm-charcoal)] mt-0.5">
+            {channel.description}
+          </span>
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <a
+      href={channel.href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={baseClass}
+    >
+      <MaterialIcon name={channel.icon} className={`text-2xl shrink-0 mt-0.5 ${iconClass}`} />
+      <span className="text-left">
+        <span className={`block font-bold ${variant === "card" ? "text-sm" : ""}`}>
+          {channel.name}
+        </span>
+        <span
+          className={`block font-normal text-[var(--warm-charcoal)] mt-0.5 ${variant === "card" ? "text-xs" : "text-sm"}`}
+        >
+          {channel.description}
+        </span>
+      </span>
+    </a>
+  );
+}
+
+export function CommunityChannelList({ variant }: { variant: "modal" | "card" }) {
+  const sections = getCommunitySections();
+
+  return (
+    <div className={variant === "modal" ? "flex flex-col gap-5" : "space-y-5"}>
+      {sections.map(({ platform, meta, channels }) => (
+        <section key={platform} className="space-y-2">
+          <h3 className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-[var(--warm-charcoal)]">
+            <MaterialIcon name={meta.icon} className={`text-base ${meta.iconClass}`} />
+            {meta.label}
+          </h3>
+          <div className={variant === "modal" ? "flex flex-col gap-2" : "space-y-2"}>
+            {channels.map((channel) => (
+              <ChannelRow key={channel.id} channel={channel} platform={platform} variant={variant} />
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

apps/web/src/components/CommunityModal.tsx

@@ -0,0 +1,39 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@labas/ui/components/dialog";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { CommunityChannelList } from "@/components/CommunityChannelList";
+
+export function CommunityModal({
+  isOpen,
+  onOpenChange,
+}: {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[440px] p-6 rounded-[var(--radius-xl)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)]">
+        <DialogHeader>
+          <div className="mx-auto w-16 h-16 bg-[var(--matcha-300)]/30 rounded-full flex items-center justify-center mb-2">
+            <MaterialIcon name="forum" className="text-4xl text-[var(--matcha-800)]" />
+          </div>
+          <DialogTitle className="text-center text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+            Gabung Komunitas Labas
+          </DialogTitle>
+          <DialogDescription className="text-center text-base text-[var(--warm-charcoal)] pt-2 leading-relaxed">
+            Belajar bahasa, lapor bug, atau ikut ngembangin Labas — pilih channel yang paling pas.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="mt-6">
+          <CommunityChannelList variant="modal" />
+          <button
+            type="button"
+            onClick={() => onOpenChange(false)}
+            className="mt-5 w-full text-sm text-[var(--warm-silver)] hover:text-[var(--clay-black)] font-semibold transition-colors"
+          >
+            Nanti Saja
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/routes/LandingPage.tsx

@@ -3,6 +3,7 @@ import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { useState } from "react";
+import { CommunityModal } from "@/components/CommunityModal";
 
 function FaqItem({ question, answer, isDark }: { question: string; answer: string; isDark?: boolean }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -37,8 +38,11 @@ function FaqItem({ question, answer, isDark }: { question: string; answer: strin
 }
 
 export function LandingPage() {
+  const [communityModalOpen, setCommunityModalOpen] = useState(false);
+
   return (
     <div className="min-h-screen bg-[var(--warm-cream)] flex flex-col font-sans selection:bg-[var(--matcha-300)] selection:text-[var(--clay-black)]">
+      <CommunityModal isOpen={communityModalOpen} onOpenChange={setCommunityModalOpen} />
       {/* Navbar */}
       <nav className="w-full px-6 py-4 md:px-12 lg:px-16 flex items-center justify-between max-w-7xl mx-auto z-50 sticky top-0 bg-[var(--warm-cream)] border-b-2 border-[var(--oat-border)]">
         <div className="flex items-center gap-3">
@@ -46,6 +50,15 @@ export function LandingPage() {
           <span className="font-headline font-semibold text-2xl tracking-[-0.64px] text-[var(--clay-black)] hidden sm:block">Labas</span>
         </div>
         <div className="flex items-center gap-2 sm:gap-4">
+          <button
+            type="button"
+            onClick={() => setCommunityModalOpen(true)}
+            className="text-[var(--warm-charcoal)] hover:text-[var(--matcha-700)] transition-colors p-2 hidden md:flex items-center gap-2"
+            aria-label="Komunitas WhatsApp"
+          >
+            <MaterialIcon name="forum" className="text-xl" />
+            <span className="font-semibold text-base">Komunitas</span>
+          </button>
           <a href="https://saweria.co/rogasper" target="_blank" rel="noopener noreferrer" className="text-[var(--warm-charcoal)] hover:text-[var(--pomegranate-400)] transition-colors p-2 hidden md:flex items-center gap-2" aria-label="Support via Saweria">
             <MaterialIcon name="favorite" className="text-xl" />
             <span className="font-semibold text-base">Support</span>
@@ -495,6 +508,14 @@ export function LandingPage() {
               <MaterialIcon name="local_cafe" />
               <span className="font-semibold">Ko-fi</span>
             </a>
+            <button
+              type="button"
+              onClick={() => setCommunityModalOpen(true)}
+              className="flex items-center gap-2 hover:text-[#128C7E] transition-colors"
+            >
+              <MaterialIcon name="forum" />
+              <span className="font-semibold">Komunitas WhatsApp</span>
+            </button>
             <a href="https://rogasper.com" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:text-[var(--matcha-700)] transition-colors">
               <MaterialIcon name="language" />
               <span className="font-semibold">rogasper.com</span>

apps/web/src/components/settings/AccountSettings.tsx

@@ -6,6 +6,7 @@ import { Button } from "@labas/ui/components/button";
 import { toast } from "sonner";
 import { getErrorMessage } from "@/lib/error-utils";
 import { authClient } from "@/lib/auth-client";
+import { CommunityCard } from "@/components/settings/CommunityCard";
 
 export function AccountSettings() {
   const { data: session } = authClient.useSession();
@@ -158,6 +159,8 @@ export function AccountSettings() {
           </form>
         </CardContent>
       </Card>
+
+      <CommunityCard />
     </div>
   );
 }

apps/web/src/components/settings/CommunityCard.tsx

@@ -0,0 +1,18 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@labas/ui/components/card";
+import { CommunityChannelList } from "@/components/CommunityChannelList";
+
+export function CommunityCard() {
+  return (
+    <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+      <CardHeader>
+        <CardTitle className="font-headline text-[var(--clay-black)]">Komunitas</CardTitle>
+        <CardDescription className="text-[var(--warm-charcoal)]">
+          WhatsApp untuk chat cepat; Discord untuk diskusi terstruktur (segera hadir).
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <CommunityChannelList variant="card" />
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/sidebar.tsx

@@ -5,6 +5,7 @@ import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { useSidebar } from "@/hooks/use-sidebar";
 import { triggerGlobalTour } from "@/components/TourGuide";
+import { CommunityModal } from "@/components/CommunityModal";
 
 interface NavItem {
   to: string;
@@ -91,6 +92,7 @@ export function Sidebar() {
   const { collapsed, toggle } = useSidebar();
   const { data: session } = authClient.useSession();
   const isLoggedIn = !!session;
+  const [communityModalOpen, setCommunityModalOpen] = useState(false);
 
   const { data: adminData } = useQuery(
     trpc.admin.isAdmin.queryOptions(undefined, { enabled: isLoggedIn }),
@@ -104,6 +106,7 @@ export function Sidebar() {
 
   return (
     <>
+      <CommunityModal isOpen={communityModalOpen} onOpenChange={setCommunityModalOpen} />
       {/* Desktop Sidebar */}
       <aside
         className={`fixed left-0 top-0 h-full flex flex-col z-40 bg-[var(--warm-cream)] border-r border-[var(--oat-border)] hidden md:flex transition-all duration-300 overflow-y-auto ${
@@ -182,6 +185,19 @@ export function Sidebar() {
             );
           })}
 
+          <button
+            type="button"
+            onClick={() => setCommunityModalOpen(true)}
+            aria-label="Komunitas WhatsApp"
+            className={`flex items-center gap-3 rounded-[var(--radius-lg)] transition-all clay-hover cursor-pointer text-[var(--warm-charcoal)] hover:bg-[var(--oat-light)] hover:text-[var(--clay-black)] w-full ${
+              collapsed ? "justify-center py-3 px-2" : "py-3 px-3 text-left"
+            }`}
+            title={collapsed ? "Komunitas" : undefined}
+          >
+            <NavIcon name="forum" />
+            {!collapsed && <span className="text-sm font-medium">Komunitas</span>}
+          </button>
+
           {/* Help Tour Button */}
           <button
             onClick={triggerGlobalTour}

apps/web/src/lib/community-links.ts

@@ -0,0 +1,72 @@
+export type CommunityPlatform = "whatsapp" | "discord";
+
+export type CommunityChannel = {
+  id: string;
+  platform: CommunityPlatform;
+  name: string;
+  description: string;
+  /** null = belum live (tampil sebagai "Segera hadir") */
+  href: string | null;
+  icon: string;
+};
+
+export const COMMUNITY_PLATFORM_META: Record<
+  CommunityPlatform,
+  { label: string; icon: string; linkClass: string; iconClass: string }
+> = {
+  whatsapp: {
+    label: "WhatsApp",
+    icon: "chat",
+    linkClass:
+      "bg-[#25D366]/10 border-[#25D366]/30 hover:bg-[#25D366]/20",
+    iconClass: "text-[#128C7E]",
+  },
+  discord: {
+    label: "Discord",
+    icon: "forum",
+    linkClass:
+      "bg-[#5865F2]/10 border-[#5865F2]/30 hover:bg-[#5865F2]/20",
+    iconClass: "text-[#5865F2]",
+  },
+};
+
+/** Satu sumber data — tambah Discord cukup isi `href` di entri bawah. */
+export const COMMUNITY_CHANNELS: CommunityChannel[] = [
+  {
+    id: "labas-whatsapp",
+    platform: "whatsapp",
+    name: "Labas — Open Source",
+    description: "Laporkan bug, usulkan fitur, atau diskusi pengembangan Labas.",
+    href: "https://chat.whatsapp.com/JT6bDIXMQ5x6SUQCA1aDWB",
+    icon: "groups",
+  },
+  {
+    id: "learning-whatsapp",
+    platform: "whatsapp",
+    name: "Rogasper Learning",
+    description: "Berbagi tips, trik, dan berita terbaru dari Rogasper Learning.",
+    href: "https://chat.whatsapp.com/IrQOUGB3jhR7WnOoilCill",
+    icon: "school",
+  },
+  // Aktifkan saat server Discord siap — cukup isi href:
+  {
+    id: "labas-discord",
+    platform: "discord",
+    name: "Labas Discord",
+    description: "Diskusi async, bug report terstruktur, dan pengumuman fitur baru.",
+    href: null,
+    icon: "chat",
+  },
+];
+
+export const COMMUNITY_PROMPT_STORAGE_KEY = "labas_community_prompt_seen";
+
+const PLATFORM_ORDER: CommunityPlatform[] = ["whatsapp", "discord"];
+
+export function getCommunitySections() {
+  return PLATFORM_ORDER.map((platform) => ({
+    platform,
+    meta: COMMUNITY_PLATFORM_META[platform],
+    channels: COMMUNITY_CHANNELS.filter((c) => c.platform === platform),
+  })).filter((section) => section.channels.length > 0);
+}

apps/web/src/routes/dashboard.tsx

@@ -9,6 +9,8 @@ import { Card, CardContent } from "@labas/ui/components/card";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { TourGuide } from "@/components/TourGuide";
 import { DonationModal } from "@/components/DonationModal";
+import { CommunityModal } from "@/components/CommunityModal";
+import { COMMUNITY_PROMPT_STORAGE_KEY } from "@/lib/community-links";
 
 export const Route = createFileRoute("/dashboard")({
   staticData: routeShell.app,
@@ -38,25 +40,36 @@ function HomeComponent() {
   const { session } = Route.useRouteContext();
   const [donationModalOpen, setDonationModalOpen] = useState(false);
   const [donationTrigger, setDonationTrigger] = useState<"exam" | "generate" | null>(null);
+  const [communityModalOpen, setCommunityModalOpen] = useState(false);
+
+  const handleCommunityModalChange = (open: boolean) => {
+    setCommunityModalOpen(open);
+    if (!open) {
+      localStorage.setItem(COMMUNITY_PROMPT_STORAGE_KEY, "1");
+    }
+  };
 
   useEffect(() => {
     const prompt = localStorage.getItem("pendingDonationPrompt") as "exam" | "generate" | null;
     const lastPromptStr = localStorage.getItem("lastDonationPromptTime");
     const lastPromptTime = lastPromptStr ? parseInt(lastPromptStr, 10) : 0;
-    
-    // 24 hours cooldown
     const COOLDOWN = 24 * 60 * 60 * 1000;
     const now = Date.now();
 
+    let showedDonation = false;
     if (prompt) {
       localStorage.removeItem("pendingDonationPrompt");
-      
       if (now - lastPromptTime > COOLDOWN) {
         setDonationTrigger(prompt);
         setDonationModalOpen(true);
         localStorage.setItem("lastDonationPromptTime", now.toString());
+        showedDonation = true;
       }
     }
+
+    if (!showedDonation && !localStorage.getItem(COMMUNITY_PROMPT_STORAGE_KEY)) {
+      setCommunityModalOpen(true);
+    }
   }, []);
 
   const overview = useQuery(trpc.stats.overview.queryOptions());
@@ -82,6 +95,7 @@ function HomeComponent() {
         onOpenChange={setDonationModalOpen}
         triggerAction={donationTrigger}
       />
+      <CommunityModal isOpen={communityModalOpen} onOpenChange={handleCommunityModalChange} />
       {/* Header */}
       <section className="mb-8">
         <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">