feat(04-01): implement MarketplaceCard component and marketplace i18n namespace

- Add marketplace namespace to de.json and en.json with all copywriting contract strings
- Add sidebar.search and sidebar.noResults i18n keys
- Create MarketplaceCard with icon, name, localized description, category badge,
  status badge (role="status"), and activate/deactivate button
- All 5 unit tests pass (GREEN phase)

apps/web/src/app/(portal)/marketplace/components/MarketplaceCard.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+
+/**
+ * Props for the MarketplaceCard component.
+ */
+export interface MarketplaceCardProps {
+  id: string;
+  name: string;
+  slug: string;
+  description: Record<string, string>;
+  icon?: string;
+  category: string;
+  isActive: boolean;
+  isToggling: boolean;
+  onToggle: (id: string, currentlyActive: boolean) => void;
+}
+
+/**
+ * Default icon mapping for known module icons.
+ * Renders inline SVG to avoid external icon library dependency.
+ */
+function ModuleIcon({ icon }: { icon?: string }) {
+  if (icon === 'Globe') {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-primary"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+        <path d="M2 12h20" />
+      </svg>
+    );
+  }
+
+  // Default puzzle-piece icon for generic modules
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-primary"
+    >
+      <path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.315 8.685a.98.98 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.61-1.61a2.404 2.404 0 0 1 1.705-.707c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z" />
+    </svg>
+  );
+}
+
+/**
+ * Marketplace card showing a module with activation controls.
+ *
+ * Displays module name, localized description, category badge,
+ * status badge, and an activate/deactivate button. Following the
+ * ModuleCard pattern from Phase 3 with marketplace-specific extensions.
+ */
+export function MarketplaceCard({
+  id,
+  name,
+  slug,
+  description,
+  icon,
+  category,
+  isActive,
+  isToggling,
+  onToggle,
+}: MarketplaceCardProps) {
+  const t = useTranslations('marketplace');
+  const locale = (typeof window !== 'undefined' && document.documentElement.lang) || 'de';
+  const localizedDescription = description[locale] || description.en || description.de || '';
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-5 shadow-sm transition-all hover:shadow-md hover:border-primary/30" style={{ minHeight: '180px' }}>
+      {/* Header: icon + name + badges */}
+      <div className="flex items-start gap-3 mb-3">
+        <div className="rounded-md bg-muted p-2.5 shrink-0">
+          <ModuleIcon icon={icon} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h3 className="font-semibold text-base leading-tight truncate">{name}</h3>
+          <div className="flex items-center gap-2 mt-1">
+            <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+              {category}
+            </span>
+            <span
+              role="status"
+              className={`rounded-full px-2 py-0.5 text-xs ${
+                isActive
+                  ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                  : 'bg-muted text-muted-foreground'
+              }`}
+            >
+              {isActive ? t('statusActive') : t('statusAvailable')}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Description */}
+      <p className="text-sm text-muted-foreground line-clamp-2 mb-4">
+        {localizedDescription}
+      </p>
+
+      {/* Footer: action button */}
+      <div className="flex items-center justify-end">
+        <button
+          onClick={() => onToggle(id, isActive)}
+          disabled={isToggling}
+          className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-wait disabled:opacity-50 ${
+            isActive
+              ? 'border border-border text-foreground hover:bg-muted'
+              : 'bg-primary text-primary-foreground'
+          }`}
+        >
+          {isToggling ? (
+            <span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+          ) : isActive ? (
+            t('deactivate')
+          ) : (
+            t('activate')
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

apps/web/src/messages/de.json

@@ -81,6 +81,8 @@
     "collapse": "Einklappen",
     "expand": "Ausklappen",
     "userPlaceholder": "Benutzer",
+    "search": "Module suchen...",
+    "noResults": "Keine Module gefunden",
     "categories": {
       "label": "Kategorien",
       "empty": "Keine Module"
@@ -171,5 +173,34 @@
     "noResults": "Gib einen Domain-Namen ein um die Verfuegbarkeit zu pruefen",
     "checking": "Pruefe...",
     "error": "Fehler bei der Pruefung"
+  },
+  "marketplace": {
+    "title": "Marktplatz",
+    "subtitle": "Entdecken und aktivieren Sie Module fuer Ihren Mandanten",
+    "activate": "Modul aktivieren",
+    "deactivate": "Deaktivieren",
+    "searchPlaceholder": "Module suchen...",
+    "statusAll": "Alle",
+    "statusActive": "Aktiviert",
+    "statusAvailable": "Verfuegbar",
+    "categoryAll": "Alle",
+    "emptyTitle": "Noch keine Module verfuegbar",
+    "emptyBody": "Module werden vom Systemadministrator bereitgestellt. Schauen Sie spaeter noch einmal vorbei.",
+    "filteredEmptyTitle": "Keine Ergebnisse",
+    "filteredEmptyBody": "Versuchen Sie einen anderen Suchbegriff oder aendern Sie die Filter.",
+    "errorLoad": "Module konnten nicht geladen werden. Bitte laden Sie die Seite neu.",
+    "toastActivated": "Modul erfolgreich aktiviert",
+    "toastDeactivated": "Modul erfolgreich deaktiviert",
+    "toastActivateError": "Aktivierung fehlgeschlagen. Bitte versuchen Sie es erneut.",
+    "toastDeactivateError": "Deaktivierung fehlgeschlagen. Bitte versuchen Sie es erneut.",
+    "deactivateDialogTitle": "Modul deaktivieren",
+    "deactivateDialogBody": "Moechten Sie {moduleName} fuer diesen Mandanten deaktivieren? Das Modul wird aus der Seitenleiste entfernt.",
+    "deactivateDialogConfirm": "Deaktivieren",
+    "deactivateDialogCancel": "Abbrechen",
+    "tenantContextLabel": "Mandanten-Kontext",
+    "backToMarketplace": "Zurueck zum Marktplatz",
+    "detailVersion": "Version {version}",
+    "detailStatusActive": "Aktiviert fuer diesen Mandanten",
+    "detailStatusInactive": "Nicht aktiviert"
   }
 }

apps/web/src/messages/en.json

@@ -81,6 +81,8 @@
     "collapse": "Collapse",
     "expand": "Expand",
     "userPlaceholder": "User",
+    "search": "Search modules...",
+    "noResults": "No modules found",
     "categories": {
       "label": "Categories",
       "empty": "No modules"
@@ -171,5 +173,34 @@
     "noResults": "Enter a domain name to check availability",
     "checking": "Checking...",
     "error": "Error checking domain"
+  },
+  "marketplace": {
+    "title": "Marketplace",
+    "subtitle": "Discover and activate modules for your tenant",
+    "activate": "Activate Module",
+    "deactivate": "Deactivate",
+    "searchPlaceholder": "Search modules...",
+    "statusAll": "All",
+    "statusActive": "Activated",
+    "statusAvailable": "Available",
+    "categoryAll": "All",
+    "emptyTitle": "No modules available yet",
+    "emptyBody": "Modules are provided by the system administrator. Check back later.",
+    "filteredEmptyTitle": "No results",
+    "filteredEmptyBody": "Try a different search term or adjust your filters.",
+    "errorLoad": "Could not load modules. Please reload the page.",
+    "toastActivated": "Module activated successfully",
+    "toastDeactivated": "Module deactivated successfully",
+    "toastActivateError": "Activation failed. Please try again.",
+    "toastDeactivateError": "Deactivation failed. Please try again.",
+    "deactivateDialogTitle": "Deactivate Module",
+    "deactivateDialogBody": "Do you want to deactivate {moduleName} for this tenant? The module will be removed from the sidebar.",
+    "deactivateDialogConfirm": "Deactivate",
+    "deactivateDialogCancel": "Cancel",
+    "tenantContextLabel": "Tenant Context",
+    "backToMarketplace": "Back to Marketplace",
+    "detailVersion": "Version {version}",
+    "detailStatusActive": "Activated for this tenant",
+    "detailStatusInactive": "Not activated"
   }
 }