#develop add GitHub widget window to web app

Author: bennobuilder

apps/web/src/app/components/WindowCanvas.tsx

@@ -4,6 +4,7 @@ import { TrashDropZone, type WindowCx } from '@/features/window';
 import { ActivityWindow } from '../windows/activity';
 import { CatWindow } from '../windows/cat';
 import { DiscordWindow } from '../windows/discord';
+import { GithubWindow } from '../windows/github';
 import { MacosWindow } from '../windows/macos';
 import { MainWindow } from '../windows/main';
 import { SettingsWindow } from '../windows/settings';
@@ -88,10 +89,20 @@ export const WindowCanvas: React.FC<TWindowCanvasProps> = (props) => {
 					>
 						<MacosWindow />
 					</DraggableWindow>
+					<DraggableWindow
+						windowId="github"
+						windowCx={windowCx}
+						transparent
+						dragThreshold={8}
+						excludeFromDrag=""
+						className="active:cursor-grabbing"
+					>
+						<GithubWindow />
+					</DraggableWindow>
 				</>
 			)}
 
-			<TrashDropZone windowCx={windowCx} trashableIds={['spotify', 'discord', 'macos']} />
+			<TrashDropZone windowCx={windowCx} trashableIds={['spotify', 'discord', 'macos', 'github']} />
 		</>
 	);
 };

apps/web/src/app/windows/discord/DiscordWindow.tsx

@@ -10,7 +10,7 @@ export const DiscordWindow: React.FC = () => {
 				target="_blank"
 				rel="noopener noreferrer"
 				draggable={false}
-				className="flex min-w-0 flex-1 items-center justify-center rounded-xl bg-[#E0E3FF] p-3 transition hover:opacity-90"
+				className="flex min-w-0 flex-1 items-center justify-center rounded-xl bg-[#E0E3FF] transition hover:opacity-90"
 			>
 				<DiscordWordmarkLogo className="h-5 w-auto text-[#5865F2]" aria-hidden />
 			</a>

apps/web/src/app/windows/github/GithubWindow.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { GithubIcon } from '@/components/display/icons';
+import { appConfig } from '@/environment';
+
+export const GithubWindow: React.FC = () => {
+	return (
+		<div data-drag-region className="group flex h-full w-full overflow-hidden rounded-xl shadow-lg">
+			<a
+				href={appConfig.distribution.github}
+				target="_blank"
+				rel="noopener noreferrer"
+				draggable={false}
+				className="bg-base-0 text-base-900 flex min-w-0 flex-1 items-center justify-center rounded-xl transition hover:opacity-90"
+			>
+				<GithubIcon className="h-7 w-auto" aria-hidden />
+			</a>
+		</div>
+	);
+};

apps/web/src/app/windows/github/index.ts

@@ -0,0 +1 @@
+export * from './GithubWindow';

apps/web/src/app/windows/macos/MacosWindow.tsx

@@ -10,7 +10,7 @@ export const MacosWindow: React.FC = () => {
 				target="_blank"
 				rel="noopener noreferrer"
 				draggable={false}
-				className="bg-base-0 flex min-w-0 flex-1 items-center justify-center rounded-xl p-3 transition hover:opacity-90"
+				className="bg-base-0 flex min-w-0 flex-1 items-center justify-center rounded-xl transition hover:opacity-90"
 			>
 				<AppleIcon className="text-base-900 h-6 w-auto" aria-hidden />
 			</a>

apps/web/src/features/window/WindowCx.tsx

@@ -76,6 +76,18 @@ export class WindowCx {
 			boundsBeforeMaximize: null,
 			canMaximize: false
 		},
+		github: {
+			id: 'github',
+			trafficLights: { close: false, minimize: false, maximize: false },
+			bounds: {
+				size: { width: 48, height: 48 },
+				position: { x: 'start', y: 'end', offset: { x: 8 + 172 + 8 + 48 + 8, y: 8 + 152 + 8 } }
+			},
+			visibility: 'visible',
+			zIndex: 10,
+			boundsBeforeMaximize: null,
+			canMaximize: false
+		},
 		spotify: {
 			id: 'spotify',
 			trafficLights: { close: false, minimize: false, maximize: false },
@@ -339,7 +351,15 @@ export interface TWindowConfig extends TWindow {
 	canMaximize: boolean;
 }
 
-export type TWindowId = 'main' | 'settings' | 'activity' | 'cat' | 'discord' | 'macos' | 'spotify';
+export type TWindowId =
+	| 'main'
+	| 'settings'
+	| 'activity'
+	| 'cat'
+	| 'discord'
+	| 'macos'
+	| 'spotify'
+	| 'github';
 export type TWindowVisibility = 'visible' | 'minimized' | 'closed';
 
 export interface TBounds {