feat: add Twitch Chat overlay widget (#340)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: tariknz <tarik.nzl@gmail.com>

Author: 3 people

package-lock.json

@@ -87,6 +87,7 @@
   "license": "MIT",
   "dependencies": {
     "@phosphor-icons/react": "^2.1.10",
+    "@tmi.js/chat": "^0.7.4",
     "d3": "^7.9.0",
     "electron-squirrel-startup": "^1.0.1",
     "flag-icons": "^7.5.0",

package.json

@@ -838,6 +838,24 @@ export const defaultDashboard: DashboardLayout = {
         background: { opacity: 80 },
       },
     },
+    {
+      id: 'twitchchat',
+      alwaysEnabled: true,
+      enabled: false,
+      layout: {
+        x: 378,
+        y: 102,
+        width: 400,
+        height: 500,
+      },
+      config: {
+        fontSize: 16,
+        channel: '',
+        background: {
+          opacity: 30,
+        },
+      },
+    },
   ],
   generalSettings: {
     fontSize: 'sm',

src/app/storage/defaultDashboard.ts

@@ -11,11 +11,16 @@ import { GarageCover } from './components/GarageCover/GarageCover';
 import { RejoinIndicator } from './components/RejoinIndicator/RejoinIndicator';
 import { TelemetryInspector } from './components/TelemetryInspector/TelemetryInspector';
 import { PitlaneHelper } from './components/PitlaneHelper/PitlaneHelper';
-import { Flag } from './components/Flag';  
+import { Flag } from './components/Flag';
+import { TwitchChat } from './components/TwitchChat/TwitchChat';
 
 // TODO: type this better, right now the config comes from settings
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const WIDGET_MAP: Record<string, (config?: any) => React.JSX.Element | null> = {
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const WIDGET_MAP: Record<
+  string,
+  (config?: any) => React.JSX.Element | null
+> = {
+  /* eslint-enable @typescript-eslint/no-explicit-any */
   standings: Standings,
   input: Input,
   relative: Relative,
@@ -30,6 +35,7 @@ export const WIDGET_MAP: Record<string, (config?: any) => React.JSX.Element | nu
   telemetryinspector: TelemetryInspector,
   pitlanehelper: PitlaneHelper,
   flag: Flag,
+  twitchchat: TwitchChat,
 };
 
 export type WidgetId = keyof typeof WIDGET_MAP;

src/frontend/WidgetIndex.tsx

@@ -96,7 +96,9 @@ export const OverlayContainer = memo(() => {
             zIndex={index + 1}
             onLayoutChange={handleLayoutChange}
           >
-            {running ? <WidgetComponent {...widget.config} /> : null}
+            {running || widget.alwaysEnabled ? (
+              <WidgetComponent {...widget.config} />
+            ) : null}
           </WidgetContainer>
         );
       })}

src/frontend/components/OverlayContainer/OverlayContainer.tsx

@@ -17,6 +17,7 @@ import { GarageCoverSettings } from './sections/GarageCoverSettings';
 import { ProfileSettings } from './sections/ProfileSettings';
 import { FlagSettings } from './sections/FlagSettings';
 import { CarSetupSettings } from './sections/CarSetupSettings';
+import { TwitchChatSettings } from './sections/TwitchChatSettings';
 import { useDashboard } from '@irdashies/context';
 
 export const SettingsLoader = () => {
@@ -61,6 +62,8 @@ export const SettingsLoader = () => {
       return <GarageCoverSettings />;
     case 'flag':
       return <FlagSettings />;
+    case 'twitchchat':
+      return <TwitchChatSettings />;
     default:
       return widget ? (
         <div className="text-red-400">No settings available for {type}</div>

src/frontend/components/Settings/SettingsLoader.tsx

@@ -108,6 +108,14 @@ export const SettingsMenu = () => {
             Track Map
           </Link>
         </li>
+        <li>
+          <Link
+            to="/settings/twitchchat"
+            className={menuItemClass('/twitchchat')}
+          >
+            Twitch Chat
+          </Link>
+        </li>
         <li>
           <Link to="/settings/weather" className={menuItemClass('/weather')}>
             Weather

src/frontend/components/Settings/SettingsMenu.tsx

@@ -13,8 +13,7 @@ type Story = StoryObj<typeof TabButton>;
 
 export const Interactive: Story = {
   render: () => {
-    const [activeTab, setActiveTab] =
-      useState<SettingsTabType>('layout');
+    const [activeTab, setActiveTab] = useState<SettingsTabType>('layout');
 
     return (
       <div className="bg-slate-900 p-6 flex gap-4">
@@ -44,4 +43,4 @@ export const Interactive: Story = {
       </div>
     );
   },
-};
+};