Merge pull request #8318 from systeminit/wendy/fix-window-size-listeners

fix(web) - newhotness emitters cleanup

Author: wendybujalski

app/web/src/newhotness/Map.vue

@@ -239,7 +239,7 @@ import { IncomingConnections, ComponentInList, EntityKind } from "@/workers/type
 import { bifrostList, useMakeArgs, useMakeKey } from "@/store/realtime/heimdall";
 import ExploreMapSkeleton from "@/newhotness/skeletons/ExploreMapSkeleton.vue";
 import { SelectionsInQueryString } from "./Workspace.vue";
-import { KeyDetails } from "./logic_composables/emitters";
+import { KeyDetails, windowResizeEmitter } from "./logic_composables/emitters";
 import { assertIsDefined, Context, ExploreContext } from "./types";
 import ExploreGridTile from "./explore_grid/ExploreGridTile.vue";
 import ConnectionsPanel from "./ConnectionsPanel.vue";
@@ -1007,11 +1007,11 @@ onMounted(() => {
   applyZoom();
 
   // Set up window resize listener for reactive dimensions
-  window.addEventListener("resize", updateWindowDimensions);
+  windowResizeEmitter.on("resize", updateWindowDimensions);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("resize", updateWindowDimensions);
+  windowResizeEmitter.off("resize", updateWindowDimensions);
 });
 
 const mousemove = (event: MouseEvent) => {

app/web/src/newhotness/Workspace.vue

@@ -8,7 +8,7 @@
           'navbar relative shadow-[0_4px_4px_0_rgba(0,0,0,0.15)] border-b',
           'z-[1001] h-[60px] overflow-hidden shrink-0 flex flex-row justify-between select-none',
           'bg-neutral-800 border-neutral-600 text-white',
-          windowWidth > 740 && 'gap-sm',
+          gapInNav && 'gap-sm',
         )
       "
     >
@@ -170,7 +170,7 @@ import {
   startMouseEmitters,
   startKeyEmitter,
   startWindowResizeEmitter,
-  windowResizeEmitter,
+  windowWidthReactive
 } from "./logic_composables/emitters";
 import { getUserPkFromToken, tokensByWorkspacePk } from "./logic_composables/tokens";
 import ComponentPage from "./ComponentDetails.vue";
@@ -426,6 +426,8 @@ startKeyEmitter(document);
 startMouseEmitters(window);
 startWindowResizeEmitter(window);
 
+const gapInNav = computed(() => windowWidthReactive.value > 800);
+
 provide("CONTEXT", ctx.value);
 
 // LOBBY AND ONBOARDING FLAGS
@@ -891,12 +893,6 @@ const connectionShouldBeEnabled = computed(() => {
   }
 });
 
-const windowWidth = ref(window.innerWidth);
-
-const windowResizeHandler = () => {
-  windowWidth.value = window.innerWidth;
-};
-
 const openChangesetModal = () => {
   navbarPanelLeftRef.value?.openCreateModal();
 };
@@ -921,11 +917,6 @@ const invalidatePaginatedFuncRuns = _.debounce(() => {
   queryClient.invalidateQueries({ queryKey });
 }, 250);
 
-onMounted(() => {
-  windowResizeHandler();
-  windowResizeEmitter.on("resize", windowResizeHandler);
-});
-
 const invalidateOneFuncRun = _.debounce((funcRunId: string) => {
   const queryKey = [ctx.value.changeSetId, "funcRunLogs", funcRunId];
   if (queryClient.isFetching({ queryKey }) > 0) {
@@ -985,11 +976,6 @@ watch(
   },
   { immediate: true },
 );
-
-onBeforeUnmount(() => {
-  windowResizeEmitter.off("resize", windowResizeHandler);
-  realtimeStore.unsubscribe(funcRunKey);
-});
 </script>
 
 <style lang="less">

app/web/src/newhotness/nav/Collaborators.vue

@@ -81,6 +81,7 @@ import UserIcon from "./UserIcon.vue";
 import UserCard from "./UserCard.vue";
 import { useContext } from "../logic_composables/context";
 import { useChangeSets } from "../logic_composables/change_set";
+import { windowWidthReactive } from "../logic_composables/emitters";
 
 const presenceStore = usePresenceStore();
 const router = useRouter();
@@ -214,21 +215,7 @@ const openMoreUsersPopover = () => {
   moreUsersPopoverRef.value.open();
 };
 
-const windowWidth = ref(window.innerWidth);
-
-const windowResizeHandler = () => {
-  windowWidth.value = window.innerWidth;
-};
-
-onMounted(() => {
-  windowResizeHandler();
-  window.addEventListener("resize", windowResizeHandler);
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("resize", windowResizeHandler);
-});
-
-const showOneIcon = computed(() => windowWidth.value < 850);
+const showOneIcon = computed(() => windowWidthReactive.value < 850);
 
 const filterString = ref("");
 const filterStringCleaned = computed(() => {

app/web/src/newhotness/nav/Notifications.vue

@@ -48,6 +48,7 @@ import ApprovalPendingModal from "./ApprovalPendingModal.vue";
 import { useContext } from "../logic_composables/context";
 import { approverForChangeSet } from "../logic_composables/change_set";
 import { useApi, routes, apiContextForChangeSet } from "../api_composables";
+import { windowWidthReactive } from "../logic_composables/emitters";
 
 const props = defineProps<{
   changeSetsNeedingApproval: ChangeSet[];
@@ -118,21 +119,7 @@ const tooltipText = computed(() => {
   }
 });
 
-const windowWidth = ref(window.innerWidth);
-
-const windowResizeHandler = () => {
-  windowWidth.value = window.innerWidth;
-};
-
-onMounted(() => {
-  windowResizeHandler();
-  window.addEventListener("resize", windowResizeHandler);
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("resize", windowResizeHandler);
-});
-
-const compact = computed(() => windowWidth.value < 850);
+const compact = computed(() => windowWidthReactive.value < 850);
 
 const openPendingApprovalsModal = () => {
   if (numberICanApprove.value > 0 || currentChangeSetNeedsApproval.value) {