Titlebar fixes

ts/components/About.tsx

@@ -14,8 +14,7 @@ export type PropsType = {
   environment: string;
   i18n: LocalizerType;
   version: string;
-  platform: string;
-  isWindows11: boolean;
+  hasCustomTitleBar: boolean;
   executeMenuRole: ExecuteMenuRoleType;
 };
 
@@ -24,8 +23,7 @@ export const About = ({
   i18n,
   environment,
   version,
-  platform,
-  isWindows11,
+  hasCustomTitleBar,
   executeMenuRole,
 }: PropsType): JSX.Element => {
   useEscapeHandling(closeAbout);
@@ -34,8 +32,7 @@ export const About = ({
 
   return (
     <TitleBarContainer
-      platform={platform}
-      isWindows11={isWindows11}
+      hasCustomTitleBar={hasCustomTitleBar}
       theme={theme}
       executeMenuRole={executeMenuRole}
     >

ts/components/App.tsx

@@ -36,8 +36,7 @@ type PropsType = {
   isMaximized: boolean;
   isFullScreen: boolean;
   menuOptions: MenuOptionsType;
-  platform: string;
-  isWindows11: boolean;
+  hasCustomTitleBar: boolean;
   hideMenuBar: boolean;
 
   executeMenuRole: ExecuteMenuRoleType;
@@ -59,11 +58,10 @@ export const App = ({
   isFullScreen,
   isMaximized,
   isShowingStoriesView,
-  isWindows11,
+  hasCustomTitleBar,
   localeMessages,
   menuOptions,
   openInbox,
-  platform,
   registerSingleDevice,
   renderCallManager,
   renderCustomizingPreferredReactionsModal,
@@ -152,8 +150,7 @@ export const App = ({
       theme={theme}
       isMaximized={isMaximized}
       isFullScreen={isFullScreen}
-      platform={platform}
-      isWindows11={isWindows11}
+      hasCustomTitleBar={hasCustomTitleBar}
       executeMenuRole={executeMenuRole}
       titleBarDoubleClick={titleBarDoubleClick}
       hasMenu

ts/components/DebugLogWindow.stories.tsx

@@ -26,8 +26,7 @@ const createProps = (): PropsType => ({
     return 'https://picsum.photos/1800/900';
   },
   executeMenuRole: action('executeMenuRole'),
-  platform: 'win32',
-  isWindows11: false,
+  hasCustomTitleBar: true,
 });
 
 export default {

ts/components/DebugLogWindow.tsx

@@ -31,8 +31,7 @@ export type PropsType = {
   i18n: LocalizerType;
   fetchLogs: () => Promise<string>;
   uploadLogs: (logs: string) => Promise<string>;
-  platform: string;
-  isWindows11: boolean;
+  hasCustomTitleBar: boolean;
   executeMenuRole: ExecuteMenuRoleType;
 };
 
@@ -48,8 +47,7 @@ export const DebugLogWindow = ({
   i18n,
   fetchLogs,
   uploadLogs,
-  platform,
-  isWindows11,
+  hasCustomTitleBar,
   executeMenuRole,
 }: PropsType): JSX.Element => {
   const [loadState, setLoadState] = useState<LoadState>(LoadState.NotStarted);
@@ -147,8 +145,7 @@ export const DebugLogWindow = ({
 
     return (
       <TitleBarContainer
-        platform={platform}
-        isWindows11={isWindows11}
+        hasCustomTitleBar={hasCustomTitleBar}
         theme={theme}
         executeMenuRole={executeMenuRole}
       >
@@ -191,8 +188,7 @@ export const DebugLogWindow = ({
 
   return (
     <TitleBarContainer
-      platform={platform}
-      isWindows11={isWindows11}
+      hasCustomTitleBar={hasCustomTitleBar}
       theme={theme}
       executeMenuRole={executeMenuRole}
     >

ts/components/Preferences.stories.tsx

@@ -158,8 +158,7 @@ const createProps = (): PropsType => ({
   i18n,
 
   executeMenuRole: action('executeMenuRole'),
-  platform: 'win32',
-  isWindows11: false,
+  hasCustomTitleBar: true,
 });
 
 export default {

ts/components/Preferences.tsx

@@ -102,8 +102,7 @@ export type PropsType = {
       value: CustomColorType;
     }
   ) => unknown;
-  platform: string;
-  isWindows11: boolean;
+  hasCustomTitleBar: boolean;
   executeMenuRole: ExecuteMenuRoleType;
 
   // Limited support features
@@ -230,7 +229,7 @@ export const Preferences = ({
   isNotificationAttentionSupported,
   isSyncSupported,
   isSystemTraySupported,
-  isWindows11,
+  hasCustomTitleBar,
   lastSyncTime,
   makeSyncRequest,
   notificationContent,
@@ -258,7 +257,6 @@ export const Preferences = ({
   onThemeChange,
   onUniversalExpireTimerChange,
   onZoomFactorChange,
-  platform,
   removeCustomColor,
   removeCustomColorOnConversations,
   resetAllChatColors,
@@ -1028,8 +1026,7 @@ export const Preferences = ({
 
   return (
     <TitleBarContainer
-      platform={platform}
-      isWindows11={isWindows11}
+      hasCustomTitleBar={hasCustomTitleBar}
       theme={theme}
       executeMenuRole={executeMenuRole}
     >

ts/components/TitleBarContainer.tsx

@@ -12,6 +12,7 @@ import { createTemplate } from '../../app/menu';
 import { ThemeType } from '../types/Util';
 import type { LocaleMessagesType } from '../types/I18N';
 import type { MenuOptionsType, MenuActionType } from '../types/menu';
+import { useIsWindowActive } from '../hooks/useIsWindowActive';
 
 export type MenuPropsType = Readonly<{
   hasMenu: true;
@@ -28,9 +29,8 @@ export type PropsType = Readonly<{
   theme: ThemeType;
   isMaximized?: boolean;
   isFullScreen?: boolean;
-  isWindows11: boolean;
+  hasCustomTitleBar: boolean;
   hideMenuBar?: boolean;
-  platform: string;
   executeMenuRole: ExecuteMenuRoleType;
   titleBarDoubleClick?: () => void;
   children: ReactNode;
@@ -116,16 +116,17 @@ export const TitleBarContainer = (props: PropsType): JSX.Element => {
     theme,
     isMaximized,
     isFullScreen,
-    isWindows11,
+    hasCustomTitleBar,
     hideMenuBar,
     executeMenuRole,
     titleBarDoubleClick,
     children,
     hasMenu,
-    platform,
     iconSrc = 'images/icon_32.png',
   } = props;
 
+  const isWindowActive = useIsWindowActive();
+
   const titleBarTheme = useMemo(
     () => ({
       bar: {
@@ -201,7 +202,7 @@ export const TitleBarContainer = (props: PropsType): JSX.Element => {
     [theme, hideMenuBar]
   );
 
-  if (platform !== 'win32' || isFullScreen) {
+  if (!hasCustomTitleBar || isFullScreen) {
     return <>{children}</>;
   }
 
@@ -236,17 +237,18 @@ export const TitleBarContainer = (props: PropsType): JSX.Element => {
   }
 
   return (
-    <div className="TitleBarContainer">
-      <TitleBar
-        className={classNames(
-          'TitleBarContainer__title',
+    <div
+      className={classNames(
+        'TitleBarContainer',
+        isWindowActive ? 'TitleBarContainer--active' : null
+      )}
+    >
+      <div className="TitleBarContainer__padding" />
+      <div className="TitleBarContainer__content">{children}</div>
 
-          // Add a pixel of padding on non-maximized Windows 11 titlebar.
-          isWindows11 && !isMaximized
-            ? 'TitleBarContainer__title--extra-padding'
-            : null
-        )}
-        platform={platform}
+      <TitleBar
+        className="TitleBarContainer__title"
+        platform="win32"
         iconSrc={iconSrc}
         theme={titleBarTheme}
         maximized={isMaximized}
@@ -254,8 +256,6 @@ export const TitleBarContainer = (props: PropsType): JSX.Element => {
         onDoubleClick={titleBarDoubleClick}
         hideControls
       />
-
-      <div className="TitleBarContainer__content">{children}</div>
     </div>
   );
 };

ts/components/conversation/Timeline.stories.tsx

@@ -36,11 +36,6 @@ export default {
 // eslint-disable-next-line
 const noop = () => {};
 
-Object.assign(window, {
-  registerForActive: noop,
-  unregisterForActive: noop,
-});
-
 const items: Record<string, TimelineItemType> = {
   'id-1': {
     type: 'message',

ts/components/conversation/Timeline.tsx

@@ -573,7 +573,9 @@ export class Timeline extends React.Component<
 
     this.updateIntersectionObserver();
 
-    window.registerForActive(this.markNewestBottomVisibleMessageRead);
+    window.SignalContext.activeWindowService.registerForActive(
+      this.markNewestBottomVisibleMessageRead
+    );
 
     this.delayedPeekTimeout = setTimeout(() => {
       const { id, peekGroupCallForTheFirstTime } = this.props;
@@ -590,7 +592,9 @@ export class Timeline extends React.Component<
   public override componentWillUnmount(): void {
     const { delayedPeekTimeout, peekInterval } = this;
 
-    window.unregisterForActive(this.markNewestBottomVisibleMessageRead);
+    window.SignalContext.activeWindowService.unregisterForActive(
+      this.markNewestBottomVisibleMessageRead
+    );
 
     this.intersectionObserver?.disconnect();