More comments.

client/src/App.tsx

@@ -9,6 +9,8 @@ import { useElectronIPCStore } from './stores/ElectronIPCStore';
 function App() {
   const { isTransparent } = useAppStore(['isTransparent']);
   const { isWindowActive } = useElectronIPCStore(['isWindowActive']);
+
+  // Set root height to 100% when transparent
   useEffect(() => {
     const root = document.getElementById('root');
     const radixThemes = document.getElementsByClassName(
@@ -22,10 +24,12 @@ function App() {
       radixThemes && (radixThemes.style.height = '100%');
     }
   }, [isTransparent]);
+
   return (
     <div
       style={{
         backgroundColor: 'transparent',
+        // Add border when transparent
         ...(isTransparent && {
           height: '100%',
           boxShadow: `0px 0px 0px 2px rgba(129, 140, 248, ${

client/src/components/lib/CustomizabilityToolbar.tsx

@@ -30,7 +30,7 @@ const opacitySet = new Set([
   'line',
   'image',
 ]);
-const colorSet = new Set(['rectangle', 'circle', 'line']);
+const colorSet = new Set(['rectangle', 'circle', 'line', 'text']);
 const strokeThicknessSet = new Set(['freehand', 'rectangle', 'circle', 'line']);
 const strokeColorSet = new Set(['freehand', 'rectangle', 'circle', 'line']);
 const strokeRoughnessSet = new Set(['rectangle', 'circle', 'line']);
@@ -49,7 +49,8 @@ const CustomToolbar = () => {
     <Toolbar.Root className="p-[0.3rem] gap-[0.3rem] min-w-max rounded-lg bg-white shadow-[0_3px_10px_rgb(0,0,0,0.2)] mt-40 absolute ml-3">
       {/* Background Color */}
       {colorSet.has(types[selectedElementIds[0]]) &&
-        fillStyles[selectedElementIds[0]] != 'none' && (
+        (fillStyles[selectedElementIds[0]] !== 'none' ||
+          types[selectedElementIds[0]] === 'text') && (
           <>
             <h2 className="text-sm font-semibold mb-2">Color</h2>{' '}
             <Toolbar.Separator className="w-[1px] bg-neutral-200 mx-[0.2rem]" />

client/src/components/lib/ScreenSelectDialog.tsx

@@ -12,6 +12,13 @@ import {
 } from '@/components/ui/alert-dialog';
 import * as AspectRatio from '@radix-ui/react-aspect-ratio';
 
+/**
+ * An alert dialog that is controlled by the `open` prop. It displays a list of
+ * screen sources and allows the user to select one. When the user clicks
+ * continue, the `onContinue` callback is called with the selected source ID.
+ * @author Yousef Yassin
+ */
+
 const ScreenSelectDialog = ({
   open,
   setOpen,
@@ -40,8 +47,8 @@ const ScreenSelectDialog = ({
                   <div
                     className={`w-[10rem] overflow-hidden rounded-md ${
                       source.id === selectedSourceId
-                        ? 'ring-4 ring-offset-2 ring-blue-500'
-                        : 'hover:ring-2 hover:ring-offset-2 hover:ring-blue-500'
+                        ? 'ring-4 ring-offset-2 ring-[#818cf8]'
+                        : 'hover:ring-2 hover:ring-offset-2 hover:ring-[#818cf8]'
                     }`}
                     onClick={() => setSelectedSourceId(source.id)}
                   >
@@ -60,10 +67,14 @@ const ScreenSelectDialog = ({
           </div>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel onClick={() => setSelectedSourceId(null)}>
+          <AlertDialogCancel
+            className="text-[#818cf8] border-[#818cf8] hover:text-[#6c75c1] hover:border-[#6c75c1]"
+            onClick={() => setSelectedSourceId(null)}
+          >
             Cancel
           </AlertDialogCancel>
           <AlertDialogAction
+            className="bg-[#818cf8] hover:bg-[#6c75c1]"
             disabled={selectedSourceId === null}
             onClick={() => selectedSourceId && onContinue(selectedSourceId)}
           >

client/src/components/lib/Titlebar/TitlebarLegacy.tsx

@@ -2,6 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { ipcAPI, ipcRenderer } from '@/data/ipc/ipcMessages';
 import './TitlebarLegacy.css';
 
+/**
+ * Defines the titlebar for the MacOS platform.
+ * @author Yousef Yassin
+ */
+
 const TitlebarLeg = ({ title }: { title: string }) => {
   const [isActive, setIsActive] = useState(true);
   const [isMaximized, setIsMaximized] = useState(true);

client/src/components/lib/Titlebar/TitlebarWindows.tsx

@@ -6,6 +6,11 @@ import { useAuthStore } from '@/stores/AuthStore';
 import { useAppStore } from '@/stores/AppStore';
 import { useElectronIPCStore } from '@/stores/ElectronIPCStore';
 
+/**
+ * Defines the titlebar for the Windows platform.
+ * @author Yousef Yassin
+ */
+
 const TitlebarWin = ({ title, fg }: { title: string; fg: string }) => {
   const { isTransparent } = useAppStore(['isTransparent']);
   const { socket, roomID } = useWebSocketStore(['socket', 'roomID']);

client/src/components/lib/TransparencyButton.tsx

@@ -3,11 +3,11 @@ import { CanvasButton } from './CanvasButton';
 import { useAppStore } from '@/stores/AppStore';
 
 /**
- * Defines a button component for starting/stopping screen sharing.
+ * Defines a button component for starting/stopping transparency mode.
  * @author Yousef Yassin
  */
 
-const SetTransparencyIcon = ({ className }: { className: string }) => {
+const TransparencyIcon = ({ className }: { className: string }) => {
   return (
     <svg
       className={className}
@@ -28,7 +28,7 @@ const SetTransparencyIcon = ({ className }: { className: string }) => {
 };
 
 /**
- * Button component for starting/stopping screen sharing.
+ * Button component for starting/stopping transparency mode.
  */
 const defaultClassName = 'disabled:opacity-40 disabled:cursor-not-allowed';
 const TransparencyButton = () => {
@@ -58,7 +58,7 @@ const TransparencyButton = () => {
         sideOffset: 5,
       }}
     >
-      <SetTransparencyIcon className="fill-current text-black" />
+      <TransparencyIcon className="fill-current text-black" />
     </CanvasButton>
   );
 };

client/src/constants.ts

@@ -70,5 +70,6 @@ export const PERIPHERAL_CODES = {
  * Misc
  */
 export const EPSILON = 1e-8;
-
+// True if running in electron, false otherwise (ipcAPI is injected by
+// electron's main process).
 export const IS_ELECTRON_INSTANCE = ipcAPI !== undefined;

client/src/hooks/useDrawElements.tsx

@@ -17,7 +17,6 @@ import { useElectronIPCStore } from '@/stores/ElectronIPCStore';
  * @authors Yousef Yassin, Dana El Sherif
  */
 const useDrawElements = () => {
-  const { windowBounds } = useElectronIPCStore(['windowBounds']);
   const { appHeight, appWidth, zoom, panOffset, action } = useAppStore([
     'appHeight',
     'appWidth',
@@ -78,16 +77,13 @@ const useDrawElements = () => {
     // Retrieve the scaling offset to apply for centered zoom
     // (TODO: We can change this to zoom towards mouse position)
     const scaleOffset = getScaleOffset(appHeight, appWidth, zoom);
-    const { x: boundsTx, y: boundsTy } = windowBounds;
-
-    console.log(boundsTx, boundsTy);
 
     // Temporarily apply scaling
     // Panning & zooming
     ctx.save();
     ctx.translate(
-      boundsTx + panOffset.x * zoom - scaleOffset.x,
-      boundsTy + panOffset.y * zoom - scaleOffset.y,
+      panOffset.x * zoom - scaleOffset.x,
+      panOffset.y * zoom - scaleOffset.y,
     );
     ctx.scale(zoom, zoom);
 

client/src/hooks/useIPCListener.tsx

@@ -2,34 +2,41 @@ import { ipcRenderer } from '@/data/ipc/ipcMessages';
 import { useElectronIPCStore } from '@/stores/ElectronIPCStore';
 import { useEffect } from 'react';
 
+/**
+ * @file React hook for listening to Electron IPC events and updating corresponding state in the store.
+ * @author Yousef Yassin
+ */
+
 const useIPCListener = () => {
   const {
     setIsWindowActive,
     setIsWindowMaximized,
     setIsWindowClickThrough,
-    setWindowBounds,
+    // setWindowBounds,
   } = useElectronIPCStore([
     'setIsWindowActive',
     'setIsWindowMaximized',
     'setIsWindowClickThrough',
-    'setWindowBounds',
+    // 'setWindowBounds',
   ]);
   useEffect(() => {
     const listeners = {
       focused: () => setIsWindowActive(true),
       blurred: () => setIsWindowActive(false),
       maximized: () => setIsWindowMaximized(true),
       unmaximized: () => setIsWindowMaximized(false),
-      ['bounds-changed']: (
-        _event: unknown,
-        { x, y, height, width }: Electron.Rectangle,
-      ) => setWindowBounds(x, y, width, height),
+      // Unused for now
+      // ['bounds-changed']: (
+      //   _event: unknown,
+      //   { x, y, height, width }: Electron.Rectangle,
+      // ) => setWindowBounds(x, y, width, height),
       ['click-through']: (_event: unknown, clickThrough: boolean) =>
         setIsWindowClickThrough(clickThrough),
     };
     Object.entries(listeners).forEach(([handle, callback]) =>
       ipcRenderer.on(handle, callback),
     );
+    // Cleanup
     return () => {
       Object.keys(listeners).forEach((handle) =>
         ipcRenderer.removeAllListeners(handle),

client/src/hooks/useShortcut.tsx

@@ -107,6 +107,7 @@ export const useShortcuts = () => {
           }
           break;
         }
+        // Test notification
         case 'KeyR': {
           if (e.ctrlKey) {
             ipcAPI.notification({ title: 'Test', body: 'Test Body' });

client/src/hooks/webrtc/useRTCConsumer.tsx

@@ -95,7 +95,6 @@ const useRTCConsumer = (
     peerRef.current = peer;
     // On incoming stream, set the video element's srcObject to the stream.
     peer.ontrack = (e) => {
-      console.log(e);
       setScreenStream(e.streams[0]);
     };
     // Only listen for video tracks

client/src/hooks/webrtc/useRTCProducer.tsx

@@ -145,6 +145,12 @@ const useRTCProducer = (
     }
   };
 
+  /**
+   * In Electron, the streamId will be set by the alert dialog.
+   * On set, we can fetch the media stream from the desktop capture API
+   * using getDisplayMedia and start the stream this way.
+   * @param streamId The Id of the stream to fetch.
+   */
   const setStreamFromId = async (streamId: string) => {
     // Overriden by electron in renderer.js
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment

client/src/lib/screenshare.ts

@@ -54,6 +54,13 @@ const startScreenShareBrowser = async (
   }
 };
 
+/**
+ * Function to initiate screen sharing for electron. This consists of two phases. Here, we fetch
+ * all the available input sources and prompt the user with a dialog with onScreenSelect. Selection
+ * in this dialog will trigger the second phase by setting the sourceId in the RTCProducer hook.
+ * @param onScreenSelect Callback function to open a dialog with the available input sources.
+ * Note that the first two parameters are unused, they are defined to maintain signature.
+ */
 const startScreenShareElectron = async (
   _setScreenStream: (stream: MediaStream) => void,
   _onRecoderStop: () => void,

client/src/types.ts

@@ -152,6 +152,7 @@ export type BinaryFileData = {
   lastRetrieved?: number;
 };
 
+// Electron Media stream source.
 export interface StreamSource {
   name: string;
   id: string;