zugzbot 1.0.21 → 1.0.23

package/.opencode/oh-my-design/web/src/components/survey/result-card.tsx

@@ -1,242 +0,0 @@
-"use client";
-
-import { useMemo, useState, useEffect } from "react";
-import { motion } from "framer-motion";
-import { ArrowRight } from "lucide-react";
-import { useTheme } from "next-themes";
-import { getDesignType, matchReferences, AXES, buildTypeAvatarUrl, type TypeCode } from "@/lib/survey/types";
-import { getLogoUrl, isGitHubLogo } from "@/lib/logos";
-import { event } from "@/lib/gtag";
-import { ShareButtons } from "./share-buttons";
-import { InstallCta } from "./install-cta";
-import type { QuizScore } from "@/lib/survey/scoring";
-
-/* ── Type Avatar (DiceBear Thumbs with custom palette) ──── */
-
-function TypeAvatar({ code, className }: { code: TypeCode; className?: string }) {
-  return <img src={buildTypeAvatarUrl(code)} alt={code} className={className} />;
-}
-
-/* ── Axis Badge ─────────────────────────────────────────── */
-
-function AxisBadge({ axis, value }: { axis: string; value: string }) {
-  const axisData = AXES[axis as keyof typeof AXES];
-  if (!axisData) return null;
-  const isB = value === axisData.B;
-  const label = isB ? axisData.labelB : axisData.labelA;
-  return (
-    <span className="inline-flex items-center gap-1 rounded-full border border-border/60 dark:border-white/10 bg-card dark:bg-white/[0.04] px-2.5 py-0.5 text-xs text-muted-foreground">
-      <span className="font-mono font-bold text-foreground">{value}</span>
-      {label}
-    </span>
-  );
-}
-
-/* ── Main Result Card ───────────────────────────────────── */
-
-export function ResultCard({
-  score,
-  onGenerateDesign,
-}: {
-  score: QuizScore;
-  onGenerateDesign?: (refId: string) => void;
-}) {
-  const { resolvedTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-  const logoColor = mounted && resolvedTheme === "dark" ? "white" : "black";
-
-  const type = getDesignType(score.typeCode);
-  const matches = useMemo(
-    () =>
-      matchReferences(score.typeCode, {
-        saturation: score.saturation,
-        typography: score.typography,
-        darkMode: score.darkMode,
-      }),
-    [score],
-  );
-
-  if (!type) return <div>Unknown type: {score.typeCode}</div>;
-
-  const axes = [
-    { axis: "temperature", value: score.typeCode[0] },
-    { axis: "density", value: score.typeCode[1] },
-    { axis: "elevation", value: score.typeCode[2] },
-    { axis: "shape", value: score.typeCode[3] },
-  ];
-
-  return (
-    <div className="px-4 py-10 sm:py-16 max-w-xl mx-auto">
-      {/* ══════════ SECTION 1 · IDENTITY ══════════════════════
-         Hero reveal. Breathes on page bg, no card. Large type. */}
-      <motion.section
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 0.5 }}
-        className="flex flex-col items-center text-center"
-      >
-        <motion.div
-          initial={{ scale: 0 }}
-          animate={{ scale: 1 }}
-          transition={{ type: "spring", damping: 12, stiffness: 200 }}
-          className="mb-7 flex h-28 w-28 items-center justify-center rounded-3xl overflow-hidden"
-        >
-          <TypeAvatar code={score.typeCode} className="h-28 w-28" />
-        </motion.div>
-
-        <div className="text-[11px] font-semibold uppercase tracking-[0.1em] text-muted-foreground mb-2">
-          Your design type
-        </div>
-        <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">{type.name}</h1>
-        <div className="text-xs text-muted-foreground mt-2 font-mono tracking-wider">{score.typeCode}</div>
-
-        <p className="mt-5 text-base text-muted-foreground italic max-w-md">
-          "{type.tagline}"
-        </p>
-
-        <div className="mt-5 flex flex-wrap justify-center gap-1.5">
-          {axes.map((a) => (
-            <AxisBadge key={a.axis} axis={a.axis} value={a.value} />
-          ))}
-        </div>
-
-        <p className="mt-6 text-sm leading-relaxed text-muted-foreground max-w-md">
-          {type.description}
-        </p>
-      </motion.section>
-
-      {/* ══════════ Visual separator ═══════════════════════════ */}
-      <div className="my-10 flex items-center gap-3">
-        <div className="h-px flex-1 bg-border/40 dark:bg-white/[0.06]" />
-        <span className="text-[10px] font-semibold uppercase tracking-[0.15em] text-muted-foreground">
-          Recommended
-        </span>
-        <div className="h-px flex-1 bg-border/40 dark:bg-white/[0.06]" />
-      </div>
-
-      {/* ══════════ SECTION 2 · MATCHES ═══════════════════════
-         Grouped card. Primary matches are the product. */}
-      <motion.section
-        initial={{ opacity: 0, y: 8 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.25, duration: 0.4 }}
-      >
-        {/* Primary — 2 hero cards */}
-        <div className="grid gap-2.5 sm:grid-cols-2 mb-5">
-          {matches.primary.map((ref) => {
-            const logo = getLogoUrl(ref.id, logoColor);
-            const isGh = isGitHubLogo(ref.id);
-            return (
-              <button
-                key={ref.id}
-                onClick={() => {
-                  event("curation_match_pick", { ref_id: ref.id, score: ref.score, type_code: score.typeCode });
-                  onGenerateDesign?.(ref.id);
-                }}
-                className="group flex items-center gap-3 rounded-2xl bg-card ring-1 ring-border/60 dark:bg-white/[0.04] dark:ring-white/10 p-4 text-left transition-all hover:ring-foreground/30 hover:-translate-y-0.5 hover:shadow-lg active:scale-[0.99]"
-              >
-                {logo && (
-                  <img
-                    src={logo}
-                    alt={ref.id}
-                    className={`h-9 w-9 flex-shrink-0 object-contain ${isGh ? "rounded-lg" : ""}`}
-                  />
-                )}
-                <div className="flex-1 min-w-0">
-                  <div className="text-base font-semibold capitalize">{ref.id.replace(".app", "")}</div>
-                  <div className="text-xs text-muted-foreground">{ref.category}</div>
-                </div>
-                <div className="flex flex-col items-end gap-0.5">
-                  <span className="text-lg font-bold text-primary leading-none">{ref.score}%</span>
-                  <span className="text-[9px] text-muted-foreground flex items-center gap-0.5 mt-1">
-                    Customize
-                    <ArrowRight className="h-2.5 w-2.5 transition-transform group-hover:translate-x-0.5" />
-                  </span>
-                </div>
-              </button>
-            );
-          })}
-        </div>
-
-        {/* Adjacent — compact chip row */}
-        {matches.adjacent.length > 0 && (
-          <div className="flex flex-wrap items-center justify-center gap-2">
-            <span className="text-[10px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
-              Also:
-            </span>
-            {matches.adjacent.map((ref) => {
-              const logo = getLogoUrl(ref.id, logoColor);
-              const isGh = isGitHubLogo(ref.id);
-              return (
-                <span
-                  key={ref.id}
-                  className="inline-flex items-center gap-1.5 rounded-full bg-foreground/5 ring-1 ring-inset ring-foreground/10 dark:bg-white/[0.06] dark:ring-white/10 px-2.5 py-1 text-xs capitalize"
-                >
-                  {logo && <img src={logo} alt={ref.id} className={`h-3.5 w-3.5 object-contain ${isGh ? "rounded" : ""}`} />}
-                  {ref.id.replace(".app", "")}
-                </span>
-              );
-            })}
-          </div>
-        )}
-      </motion.section>
-
-      {/* ══════════ Share at peak emotion ══════════════════════ */}
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.4, duration: 0.4 }}
-        className="mt-8 flex items-center justify-center"
-      >
-        <ShareButtons typeCode={score.typeCode} typeName={type.name} tagline={type.tagline} />
-      </motion.div>
-
-      {/* ══════════ SECTION 3 · PRIMARY ACTION ═════════════════
-         Clear next step. Browse demoted to text link. */}
-      <motion.section
-        initial={{ opacity: 0, y: 8 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.55, duration: 0.4 }}
-        className="mt-10 flex flex-col items-center gap-3"
-      >
-        {onGenerateDesign && matches.primary[0] && (
-          <button
-            onClick={() => {
-              event("curation_cta_primary", { ref_id: matches.primary[0].id, type_code: score.typeCode });
-              onGenerateDesign(matches.primary[0].id);
-            }}
-            className="group flex items-center justify-center gap-2 w-full rounded-full bg-primary px-6 py-3.5 text-sm font-medium text-primary-foreground transition-all hover:opacity-90 hover:scale-[1.005] active:scale-[0.995] shadow-lg shadow-primary/25"
-          >
-            Customize {matches.primary[0].id.replace(".app", "")} and generate DESIGN.md
-            <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-          </button>
-        )}
-        <a
-          href="/builder"
-          onClick={() => event("curation_browse_all", { type_code: score.typeCode })}
-          className="group text-xs text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
-        >
-          or browse all references
-          <ArrowRight className="h-3 w-3 transition-transform group-hover:translate-x-0.5" />
-        </a>
-      </motion.section>
-
-      {/* ══════════ SECTION 4 · INSTALL (the persistent-memory product) ═════
-         Peak intent — they just learned their match. Convert attention into a
-         DESIGN.md their agent keeps, not just a web session. */}
-      <motion.section
-        initial={{ opacity: 0, y: 8 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.7, duration: 0.4 }}
-        className="mt-8"
-      >
-        <InstallCta
-          refId={matches.primary[0]?.id}
-          typeCode={score.typeCode}
-          location="curation_result"
-        />
-      </motion.section>
-    </div>
-  );
-}

package/.opencode/oh-my-design/web/src/components/survey/share-buttons.tsx

@@ -1,320 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { Check, Link2, MoreHorizontal } from "lucide-react";
-import { event } from "@/lib/gtag";
-
-/**
- * Region-aware share button row.
- *
- * - KR: KakaoTalk, X, Copy, Download (img)
- * - Global: X, WhatsApp, LinkedIn, Copy, Download
- * - Mobile: 3 primary + native share as "More"
- */
-
-interface ShareButtonsProps {
-  typeCode: string;
-  typeName: string;
-  tagline: string;
-}
-
-function detectLocale(): "kr" | "global" {
-  if (typeof window === "undefined") return "global";
-  const host = window.location.hostname;
-  if (host.endsWith(".kr") || host.includes("korea")) return "kr";
-  const lang = navigator.language || "";
-  if (lang.startsWith("ko")) return "kr";
-  return "global";
-}
-
-export function ShareButtons({ typeCode, typeName, tagline }: ShareButtonsProps) {
-  const [copied, setCopied] = useState(false);
-  const [locale, setLocale] = useState<"kr" | "global">("global");
-  const [canNativeShare, setCanNativeShare] = useState(false);
-
-  useEffect(() => {
-    setLocale(detectLocale());
-    setCanNativeShare(typeof navigator !== "undefined" && !!navigator.share);
-  }, []);
-
-  const shareUrl =
-    typeof window !== "undefined"
-      ? `${window.location.origin}/result/${typeCode}`
-      : `https://oh-my-design.kr/result/${typeCode}`;
-
-  const shareText =
-    locale === "kr"
-      ? `내 디자인 타입: ${typeName} — "${tagline}"\n당신의 타입은?`
-      : `My design type: ${typeName} — "${tagline}"\nWhat's yours?`;
-
-  const encodedUrl = encodeURIComponent(shareUrl);
-  const encodedText = encodeURIComponent(shareText);
-  const encodedTextWithUrl = encodeURIComponent(`${shareText}\n${shareUrl}`);
-
-  /* ─── Share handlers ─────────────────────────────────── */
-
-  const track = (method: string) => event("curation_share", { method, type_code: typeCode });
-
-  const handleCopy = async () => {
-    track("copy_link");
-    try {
-      await navigator.clipboard.writeText(shareUrl);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      /* ignore */
-    }
-  };
-
-  const openX = () => {
-    track("twitter");
-    window.open(
-      `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedUrl}&hashtags=OhMyDesign,DesignType`,
-      "_blank",
-      "noopener,noreferrer",
-    );
-  };
-
-  const openWhatsApp = () => {
-    track("whatsapp");
-    window.open(`https://wa.me/?text=${encodedTextWithUrl}`, "_blank", "noopener,noreferrer");
-  };
-
-  const openLinkedIn = () => {
-    track("linkedin");
-    window.open(
-      `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
-      "_blank",
-      "noopener,noreferrer",
-    );
-  };
-
-  const openThreads = () => {
-    track("threads");
-    window.open(`https://www.threads.net/intent/post?text=${encodedTextWithUrl}`, "_blank", "noopener,noreferrer");
-  };
-
-  const openTelegram = () => {
-    track("telegram");
-    window.open(
-      `https://t.me/share/url?url=${encodedUrl}&text=${encodedText}`,
-      "_blank",
-      "noopener,noreferrer",
-    );
-  };
-
-  const openKakao = () => {
-    track("kakao");
-    // Kakao requires SDK; fallback to copy + alert for now
-    // TODO: integrate Kakao JavaScript SDK with NEXT_PUBLIC_KAKAO_JS_KEY
-    handleCopy();
-  };
-
-  const openNativeShare = async () => {
-    track("web_share_native");
-    if (navigator.share) {
-      try {
-        await navigator.share({ title: `My Design Type: ${typeName}`, text: shareText, url: shareUrl });
-      } catch {
-        /* user cancelled */
-      }
-    }
-  };
-
-  /* ─── Channel definitions ────────────────────────────── */
-
-  type Channel = {
-    id: string;
-    label: string;
-    color: string;
-    onClick: () => void;
-    icon: React.ReactNode;
-  };
-
-  const channels: Record<string, Channel> = {
-    kakao: {
-      id: "kakao",
-      label: "KakaoTalk",
-      color: "#FEE500",
-      onClick: openKakao,
-      icon: (
-        <svg viewBox="0 0 24 24" fill="#191919" className="h-5 w-5">
-          <path d="M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.8 6.7-.2.7-.7 2.7-.8 3.1-.1.5.2.5.4.4.2-.1 2.7-1.8 3.8-2.5.6.1 1.2.1 1.8.1 5.5 0 10-3.6 10-8S17.5 3 12 3z" />
-        </svg>
-      ),
-    },
-    x: {
-      id: "x",
-      label: "X",
-      color: "#000000",
-      onClick: openX,
-      icon: (
-        <svg viewBox="0 0 24 24" fill="#ffffff" className="h-4 w-4">
-          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-        </svg>
-      ),
-    },
-    whatsapp: {
-      id: "whatsapp",
-      label: "WhatsApp",
-      color: "#25D366",
-      onClick: openWhatsApp,
-      icon: (
-        <svg viewBox="0 0 24 24" fill="#ffffff" className="h-5 w-5">
-          <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.1-.2.3-.7.9-.9 1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.6-1.4-.8-2-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.5s1 2.8 1.1 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.3 1.2 4.7L2 22l5.4-1.4c1.4.8 3 1.2 4.6 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z" />
-        </svg>
-      ),
-    },
-    linkedin: {
-      id: "linkedin",
-      label: "LinkedIn",
-      color: "#0A66C2",
-      onClick: openLinkedIn,
-      icon: (
-        <svg viewBox="0 0 24 24" fill="#ffffff" className="h-4 w-4">
-          <path d="M19 3a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14zM8 17v-7H5.5v7H8zm-1.25-8.27a1.45 1.45 0 100-2.9 1.45 1.45 0 000 2.9zM18.5 17v-3.8c0-2.3-1.22-3.36-2.87-3.36-1.33 0-1.92.73-2.25 1.25v-1.09H11v7h2.38v-3.92c0-1.04.4-1.7 1.33-1.7.87 0 1.3.6 1.3 1.7V17h2.5z" />
-        </svg>
-      ),
-    },
-    threads: {
-      id: "threads",
-      label: "Threads",
-      color: "#000000",
-      onClick: openThreads,
-      icon: (
-        <svg viewBox="0 0 24 24" fill="#ffffff" className="h-4 w-4">
-          <path d="M17.8 11.2c-.1 0-.2 0-.2-.1-.1-1-.4-1.7-.9-2.2-.7-.7-1.8-1.1-3.2-1.1h-.1c-1.7 0-3.1.7-3.8 1.9l1.4.9c.5-.8 1.4-1.1 2.5-1 .8 0 1.4.2 1.8.7.3.3.5.7.6 1.3-.7-.1-1.4-.2-2.2-.2-2.2.1-3.6 1.4-3.5 3.1.1.9.5 1.6 1.3 2 .7.4 1.5.6 2.4.5 1.3-.1 2.2-.6 2.9-1.5.5-.7.8-1.5.9-2.6.5.3.9.7 1.1 1.2.4.8.4 2.2-.7 3.3-.9.9-2 1.4-3.6 1.4-1.8 0-3.2-.6-4.1-1.8C8.9 16 8.5 14.4 8.5 12c0-2.4.4-4 1.3-5.2 1-1.2 2.3-1.8 4.2-1.8 1.7 0 3 .5 3.9 1.5.7.8 1.1 1.8 1.2 3l1.5-.1c-.1-1.5-.6-2.9-1.6-4-1.2-1.3-2.9-2-5-2h-.1C11 3.5 9.4 4.2 8.2 5.5c-1.3 1.5-1.9 3.6-1.9 6.5s.7 5 2 6.5c1.3 1.5 3.1 2.2 5.4 2.2 1.9 0 3.4-.5 4.6-1.8 1.5-1.5 1.5-3.5.9-4.8-.4-1-1.3-1.8-2.4-2.3l-1 .4z" />
-        </svg>
-      ),
-    },
-    telegram: {
-      id: "telegram",
-      label: "Telegram",
-      color: "#26A5E4",
-      onClick: openTelegram,
-      icon: (
-        <svg viewBox="0 0 24 24" fill="#ffffff" className="h-4 w-4">
-          <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.6 7L14.7 17c-.1.6-.5.7-1 .4l-2.8-2-1.3 1.3c-.1.1-.3.3-.5.3l.2-2.6 4.9-4.4c.2-.2-.1-.3-.3-.1l-6 3.8-2.6-.8c-.6-.2-.6-.6.1-.8l10.2-3.9c.5-.2.9.1.7.8z" />
-        </svg>
-      ),
-    },
-    copy: {
-      id: "copy",
-      label: copied ? "Copied" : "Copy link",
-      color: "transparent",
-      onClick: handleCopy,
-      icon: copied ? <Check className="h-4 w-4" /> : <Link2 className="h-4 w-4" />,
-    },
-  };
-
-  // Primary channels by locale
-  const primaryIds = locale === "kr"
-    ? ["kakao", "x", "copy"]
-    : ["x", "whatsapp", "copy"];
-
-  // Secondary channels shown in "More" popover
-  const secondaryIds = locale === "kr"
-    ? ["whatsapp", "linkedin", "threads", "telegram"]
-    : ["linkedin", "threads", "telegram", "kakao"];
-
-  return (
-    <div className="flex items-center gap-2">
-      {primaryIds.map((id) => {
-        const c = channels[id];
-        const isCopy = c.id === "copy";
-        return (
-          <button
-            key={c.id}
-            onClick={c.onClick}
-            aria-label={c.label}
-            className={`group flex items-center justify-center rounded-full transition-all active:scale-[0.92] ${
-              isCopy
-                ? "h-10 w-10 sm:h-10 sm:w-auto sm:px-4 sm:gap-1.5 text-xs font-medium bg-foreground/5 ring-1 ring-inset ring-foreground/10 hover:bg-foreground/10 hover:ring-foreground/20 dark:bg-white/[0.06] dark:ring-white/10 dark:hover:bg-white/[0.10] dark:hover:ring-white/20"
-                : "h-10 w-10 hover:scale-105"
-            } ${copied && isCopy ? "bg-primary text-primary-foreground ring-0" : ""}`}
-            style={!isCopy ? { backgroundColor: c.color } : undefined}
-          >
-            {c.icon}
-            {isCopy && <span className="hidden sm:inline">{c.label}</span>}
-          </button>
-        );
-      })}
-
-      {/* More menu — opens popover or native share */}
-      <MorePopover
-        channels={secondaryIds.map((id) => channels[id]).filter(Boolean)}
-        canNativeShare={canNativeShare}
-        onNativeShare={openNativeShare}
-      />
-    </div>
-  );
-}
-
-/* ─── More popover ──────────────────────────────────────── */
-
-function MorePopover({
-  channels,
-  canNativeShare,
-  onNativeShare,
-}: {
-  channels: { id: string; label: string; color: string; onClick: () => void; icon: React.ReactNode }[];
-  canNativeShare: boolean;
-  onNativeShare: () => void;
-}) {
-  const [open, setOpen] = useState(false);
-
-  // On mobile with native share, just trigger native share on tap
-  useEffect(() => {
-    if (open) {
-      const close = () => setOpen(false);
-      document.addEventListener("click", close);
-      return () => document.removeEventListener("click", close);
-    }
-  }, [open]);
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (canNativeShare) {
-      onNativeShare();
-    } else {
-      setOpen((o) => !o);
-    }
-  };
-
-  return (
-    <div className="relative">
-      <button
-        onClick={handleClick}
-        aria-label="More sharing options"
-        className="flex h-10 w-10 items-center justify-center rounded-full bg-foreground/5 ring-1 ring-inset ring-foreground/10 transition-all hover:bg-foreground/10 hover:ring-foreground/20 active:scale-[0.92] dark:bg-white/[0.06] dark:ring-white/10 dark:hover:bg-white/[0.10] dark:hover:ring-white/20"
-      >
-        <MoreHorizontal className="h-4 w-4" />
-      </button>
-      {open && !canNativeShare && (
-        <div
-          onClick={(e) => e.stopPropagation()}
-          className="absolute right-0 top-full mt-2 w-44 rounded-xl border border-border bg-popover shadow-lg z-10 overflow-hidden"
-        >
-          {channels.map((c) => (
-            <button
-              key={c.id}
-              onClick={() => {
-                c.onClick();
-                setOpen(false);
-              }}
-              className="flex w-full items-center gap-3 px-3 py-2 text-sm transition-colors hover:bg-muted"
-            >
-              <span
-                className="flex h-6 w-6 items-center justify-center rounded-full flex-shrink-0"
-                style={{ backgroundColor: c.color }}
-              >
-                {c.icon}
-              </span>
-              {c.label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}