ECHO-708 Join Slack community option addition (#472)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a "Join the Slack community" header menu item for one-click
access to the community workspace.

* **Chores**
  * Added a configurable Slack invite URL environment setting.
  * Instrumented analytics for the Slack join action.
* Added translations for the new UI strings across German, Spanish,
French, Italian, and Dutch.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: ussaama

echo/frontend/.env.example

@@ -11,6 +11,9 @@ VITE_ENABLE_WEBHOOKS=0
 # Set to "1" to enable the Agentic chat mode in the chat interface
 VITE_ENABLE_AGENTIC_CHAT=0
 
+# Community Slack invite URL (override if the link expires)
+# VITE_COMMUNITY_SLACK_URL=https://join.slack.com/t/dembranecommunity/shared_invite/...
+
 # Other environment variables can be found in src/config.ts
 # Examples:
 # VITE_USE_PARTICIPANT_ROUTER=1

echo/frontend/src/components/layout/Header.tsx

@@ -1,13 +1,22 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { ActionIcon, Group, Menu, Paper, Stack, Text } from "@mantine/core";
+import {
+	ActionIcon,
+	Box,
+	Group,
+	Menu,
+	Paper,
+	Stack,
+	Text,
+} from "@mantine/core";
 import { GearSixIcon } from "@phosphor-icons/react";
 import * as Sentry from "@sentry/react";
 import {
 	IconBug,
 	IconLogout,
 	IconNotes,
 	IconShieldLock,
+	IconUsers,
 	IconWorld,
 } from "@tabler/icons-react";
 import { useEffect } from "react";
@@ -18,9 +27,15 @@ import {
 	useLogoutMutation,
 } from "@/components/auth/hooks";
 import { I18nLink } from "@/components/common/i18nLink";
-import { DIRECTUS_PUBLIC_URL, ENABLE_ANNOUNCEMENTS } from "@/config";
+import {
+	COMMUNITY_SLACK_URL,
+	DIRECTUS_PUBLIC_URL,
+	ENABLE_ANNOUNCEMENTS,
+} from "@/config";
 import { useI18nNavigate } from "@/hooks/useI18nNavigate";
 import { useWhitelabelLogo } from "@/hooks/useWhitelabelLogo";
+import { analytics } from "@/lib/analytics";
+import { AnalyticsEvents as events } from "@/lib/analyticsEvents";
 import { testId } from "@/lib/testUtils";
 import { AnnouncementIcon } from "../announcement/AnnouncementIcon";
 import { Announcements } from "../announcement/Announcements";
@@ -221,6 +236,29 @@ const HeaderView = ({ isAuthenticated, loading }: HeaderViewProps) => {
 											<Trans>Help us translate</Trans>
 										</Menu.Item>
 
+										<Menu.Item
+											rightSection={<IconUsers />}
+											component="a"
+											href={COMMUNITY_SLACK_URL}
+											target="_blank"
+											onClick={() => {
+												try {
+													analytics.trackEvent(events.JOIN_SLACK_COMMUNITY);
+												} catch (error) {
+													console.warn("Analytics tracking failed:", error);
+												}
+											}}
+											{...testId("header-join-community-menu-item")}
+											className="items-start gap-2"
+										>
+											<Box>
+												<Trans>Join the Slack community</Trans>
+												<Text size="xs" c="dimmed">
+													<Trans>10+ members have joined</Trans>
+												</Text>
+											</Box>
+										</Menu.Item>
+
 										<Menu.Item
 											rightSection={<IconLogout />}
 											onClick={handleLogout}

echo/frontend/src/config.ts

@@ -38,6 +38,10 @@ export const PRIVACY_POLICY_URL =
 export const PLAUSIBLE_API_HOST =
 	import.meta.env.VITE_PLAUSIBLE_API_HOST ?? "https://plausible.io";
 
+export const COMMUNITY_SLACK_URL =
+	import.meta.env.VITE_COMMUNITY_SLACK_URL ??
+	"https://join.slack.com/t/dembranecommunity/shared_invite/zt-3qzvryh8l-M6w3u5BvuM8LssOhMbJGgQ";
+
 export const DEBUG_MODE = import.meta.env.VITE_DEBUG_MODE === "1";
 
 export const ENABLE_CHAT_AUTO_SELECT = false;

echo/frontend/src/lib/analyticsEvents.ts

@@ -18,6 +18,9 @@ export const AnalyticsEvents = {
 	// Dynamic Templates
 	DYNAMIC_TEMPLATE_USED: "Dynamic Template Used",
 	EDIT_REPORT: "Edit Report",
+
+	// Community
+	JOIN_SLACK_COMMUNITY: "Join Slack Community",
 	LIBRARY_CONTACT_SALES: "Library Contact Sales Click",
 	MOVE_TO_ANOTHER_PROJECT: "Move to Another Project",
 
@@ -27,13 +30,13 @@ export const AnalyticsEvents = {
 	// Summary & Report
 	REGENERATE_SUMMARY: "Regenerate Summary",
 
+	// Transcription
+	RETRANSCRIBE_CONVERSATION: "Retranscribe Conversation",
+
 	// Select All
 	SELECT_ALL_CLICK: "Select All Click",
 	SELECT_ALL_CONFIRM: "Select All Confirm",
 	SELECT_ALL_ERROR: "Select All Error",
 	SELECT_ALL_SUCCESS: "Select All Success",
-
-	// Transcription
-	RETRANSCRIBE_CONVERSATION: "Retranscribe Conversation",
 	UPDATE_REPORT: "Update Report",
 };