From 30ee708a6f5082df6952ed242221ca505ebdb71d Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 19 Mar 2026 11:15:09 +0100
Subject: [PATCH] feat(branding): add Context and Mukke app branding

- Add Context app icon (sky blue document/knowledge SVG)
- Add Context to MANA_APPS registry with descriptions (DE/EN)
- Add Context app URL mapping (dev: 5192, prod: context.manacore.app)
- Add ContextLogo Svelte component
- Add 'context' and 'mukke' to AppId type

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/shared-branding/src/app-icons.ts       |  4 ++++
 .../src/logos/ContextLogo.svelte                | 13 +++++++++++++
 packages/shared-branding/src/mana-apps.ts       | 17 +++++++++++++++++
 packages/shared-branding/src/types.ts           |  4 +++-
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 packages/shared-branding/src/logos/ContextLogo.svelte

diff --git a/packages/shared-branding/src/app-icons.ts b/packages/shared-branding/src/app-icons.ts
index 5a6e704a9..aaeca1770 100644
--- a/packages/shared-branding/src/app-icons.ts
+++ b/packages/shared-branding/src/app-icons.ts
@@ -72,6 +72,9 @@ const matrixSvg = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill=
 // Playground icon (code/terminal with cyan gradient)
 const playgroundSvg = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="130" y="130" width="764" height="764" rx="382" fill="url(#playgroundGrad)"/><path d="M380 340L260 512L380 684" stroke="white" stroke-width="48" stroke-linecap="round" stroke-linejoin="round"/><path d="M644 340L764 512L644 684" stroke="white" stroke-width="48" stroke-linecap="round" stroke-linejoin="round"/><path d="M560 280L464 744" stroke="white" stroke-width="40" stroke-linecap="round"/><defs><linearGradient id="playgroundGrad" x1="130" y1="130" x2="894" y2="894" gradientUnits="userSpaceOnUse"><stop stop-color="#06b6d4"/><stop offset="1" stop-color="#0891b2"/></linearGradient></defs></svg>`;
 
+// Context icon (document/knowledge with sky blue gradient)
+const contextSvg = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="130" y="130" width="764" height="764" rx="382" fill="url(#contextGrad)"/><rect x="300" y="240" width="424" height="544" rx="24" fill="white"/><path d="M400 400H624" stroke="#0ea5e9" stroke-width="24" stroke-linecap="round"/><path d="M400 480H580" stroke="#0ea5e9" stroke-width="24" stroke-linecap="round" stroke-opacity="0.6"/><path d="M400 560H540" stroke="#0ea5e9" stroke-width="24" stroke-linecap="round" stroke-opacity="0.4"/><path d="M400 640H600" stroke="#0ea5e9" stroke-width="24" stroke-linecap="round" stroke-opacity="0.3"/><path d="M620 240V380H760" stroke="white" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/><path d="M620 240L760 380" stroke="#0ea5e9" stroke-width="16" stroke-linecap="round" stroke-opacity="0.3"/><circle cx="680" cy="620" r="100" fill="#0ea5e9" fill-opacity="0.2" stroke="white" stroke-width="16"/><path d="M660 620L680 640L720 600" stroke="white" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="contextGrad" x1="130" y1="130" x2="894" y2="894" gradientUnits="userSpaceOnUse"><stop stop-color="#0ea5e9"/><stop offset="1" stop-color="#0284c7"/></linearGradient></defs></svg>`;
+
 /**
  * App icons as data URLs
  * Use these directly in <img src={APP_ICONS.memoro}> or CSS background-image
@@ -98,6 +101,7 @@ export const APP_ICONS = {
 	questions: svgToDataUrl(questionsSvg),
 	matrix: svgToDataUrl(matrixSvg),
 	playground: svgToDataUrl(playgroundSvg),
+	context: svgToDataUrl(contextSvg),
 } as const;
 
 export type AppIconId = keyof typeof APP_ICONS;
diff --git a/packages/shared-branding/src/logos/ContextLogo.svelte b/packages/shared-branding/src/logos/ContextLogo.svelte
new file mode 100644
index 000000000..cdaad812a
--- /dev/null
+++ b/packages/shared-branding/src/logos/ContextLogo.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import AppLogo from '../AppLogo.svelte';
+
+	interface Props {
+		size?: number;
+		color?: string;
+		class?: string;
+	}
+
+	let { size = 55, color, class: className = '' }: Props = $props();
+</script>
+
+<AppLogo app="context" {size} {color} class={className} />
diff --git a/packages/shared-branding/src/mana-apps.ts b/packages/shared-branding/src/mana-apps.ts
index cdd74b0da..72dbfefa9 100644
--- a/packages/shared-branding/src/mana-apps.ts
+++ b/packages/shared-branding/src/mana-apps.ts
@@ -324,6 +324,22 @@ export const MANA_APPS: ManaApp[] = [
 		comingSoon: false,
 		status: 'development',
 	},
+	{
+		id: 'context',
+		name: 'Context',
+		description: {
+			de: 'Wissensmanagement',
+			en: 'Knowledge Management',
+		},
+		longDescription: {
+			de: 'AI-gestütztes Dokumenten- und Wissensmanagement mit Spaces, Kontextreferenzen und KI-Generierung.',
+			en: 'AI-powered document and knowledge management with spaces, context references, and AI generation.',
+		},
+		icon: APP_ICONS.context,
+		color: '#0ea5e9',
+		comingSoon: false,
+		status: 'development',
+	},
 ];
 
 /**
@@ -413,6 +429,7 @@ export const APP_URLS: Record<AppIconId, { dev: string; prod: string }> = {
 	questions: { dev: 'http://localhost:5111', prod: 'https://questions.manacore.app' },
 	matrix: { dev: 'http://localhost:5180', prod: 'https://matrix.mana.how' },
 	playground: { dev: 'http://localhost:5190', prod: 'https://playground.mana.how' },
+	context: { dev: 'http://localhost:5192', prod: 'https://context.manacore.app' },
 };
 
 /**
diff --git a/packages/shared-branding/src/types.ts b/packages/shared-branding/src/types.ts
index 987a14d56..cca41e1b5 100644
--- a/packages/shared-branding/src/types.ts
+++ b/packages/shared-branding/src/types.ts
@@ -23,7 +23,9 @@ export type AppId =
 	| 'skilltree'
 	| 'planta'
 	| 'playground'
-	| 'lightwrite';
+	| 'lightwrite'
+	| 'context'
+	| 'mukke';
 
 /**
  * App branding configuration