[web] cleanup and better organize code for tooltips

Summary:
Move diff. As I have been working with the tooltip code recenlty I've noted that the tooltip code is all over the place and is not organized well. I wanted to take a moment to "clean up" the neighborhood and put all the tooltip code into a singular place

Depends on D10473

Test Plan: `flow` and confirmed that all the tooltips (message action, reaction, and label) had no regressions

Reviewers: atul, kamil, rohan

Reviewed By: atul

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D10474

web/app.react.js

@@ -40,7 +40,6 @@ import WebEditThreadAvatarProvider from './avatars/web-edit-thread-avatar-provid
 import Calendar from './calendar/calendar.react.js';
 import Chat from './chat/chat.react.js';
 import { EditModalProvider } from './chat/edit-message-provider.js';
-import { TooltipProvider } from './chat/tooltip-provider.js';
 import NavigationArrows from './components/navigation-arrows.react.js';
 import { initOpaque } from './crypto/opaque-utils.js';
 import electron from './electron.js';
@@ -72,6 +71,7 @@ import CommunityPicker from './sidebar/community-picker.react.js';
 import Splash from './splash/splash.react.js';
 import './typography.css';
 import css from './style.css';
+import { TooltipProvider } from './tooltips/tooltip-provider.js';
 import { type NavInfo } from './types/nav-types.js';
 import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils.js';
 

web/chat/chat-constants.js

@@ -5,39 +5,6 @@ import type { MessageInfo } from 'lib/types/message-types.js';
 
 import type { ComposedMessageID } from './composed-message.react.js';
 
-export const tooltipStyle = {
-  paddingLeft: 5,
-  paddingRight: 5,
-  rowGap: 3,
-};
-
-export const tooltipLabelStyle = {
-  padding: 6,
-  height: 20,
-};
-export const tooltipButtonStyle = {
-  paddingLeft: 6,
-  paddingRight: 6,
-  width: 30,
-  height: 38,
-};
-
-export const reactionTooltipStyle = {
-  paddingTop: 8,
-  paddingBottom: 8,
-  paddingLeft: 12,
-  paddingRight: 12,
-  rowGap: 4,
-  maxWidth: 136,
-  maxHeight: 162,
-};
-
-export const reactionSeeMoreLabel = 'See more';
-
-export const reactionSeeMoreLabelStyle = {
-  height: 18,
-};
-
 export const typeaheadStyle = {
   tooltipWidth: 296,
   tooltipMaxHeight: 268,

web/chat/chat-message-list.react.js

@@ -40,11 +40,11 @@ import { useEditModalContext } from './edit-message-provider.js';
 import { MessageListContext } from './message-list-types.js';
 import Message from './message.react.js';
 import RelationshipPrompt from './relationship-prompt/relationship-prompt.js';
-import { useTooltipContext } from './tooltip-provider.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import { useTextMessageRulesFunc } from '../markdown/rules.react.js';
 import { useSelector } from '../redux/redux-utils.js';
+import { useTooltipContext } from '../tooltips/tooltip-provider.js';
 
 const browser = detectBrowser();
 const supportsReverseFlex =

web/chat/composed-message.react.js

@@ -22,8 +22,8 @@ import UserAvatar from '../avatars/user-avatar.react.js';
 import CommIcon from '../CommIcon.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import { usePushUserProfileModal } from '../modals/user-profile/user-profile-utils.js';
-import { useMessageTooltip } from '../utils/tooltip-action-utils.js';
-import { tooltipPositions } from '../utils/tooltip-utils.js';
+import { useMessageTooltip } from '../tooltips/tooltip-action-utils.js';
+import { tooltipPositions } from '../tooltips/tooltip-utils.js';
 
 export type ComposedMessageID = string;
 

web/chat/reaction-message-utils.js

@@ -20,7 +20,7 @@ import { useSelector } from '../redux/redux-utils.js';
 import {
   type TooltipSize,
   type TooltipPositionStyle,
-} from '../utils/tooltip-utils.js';
+} from '../tooltips/tooltip-utils.js';
 import { getAppContainerPositionInfo } from '../utils/window-utils.js';
 
 function useSendReaction(

web/chat/reaction-pill.react.js

@@ -8,8 +8,8 @@ import { useNextLocalID } from 'lib/shared/message-utils.js';
 
 import { useSendReaction } from './reaction-message-utils.js';
 import css from './reaction-pill.css';
-import { useReactionTooltip } from '../utils/tooltip-action-utils.js';
-import { tooltipPositions } from '../utils/tooltip-utils.js';
+import { useReactionTooltip } from '../tooltips/tooltip-action-utils.js';
+import { tooltipPositions } from '../tooltips/tooltip-utils.js';
 
 const availableReactionTooltipPositions = [
   tooltipPositions.TOP,

web/chat/robotext-message.react.js

@@ -20,8 +20,8 @@ import { linkRules } from '../markdown/rules.react.js';
 import { usePushUserProfileModal } from '../modals/user-profile/user-profile-utils.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
-import { useMessageTooltip } from '../utils/tooltip-action-utils.js';
-import { tooltipPositions } from '../utils/tooltip-utils.js';
+import { useMessageTooltip } from '../tooltips/tooltip-action-utils.js';
+import { tooltipPositions } from '../tooltips/tooltip-utils.js';
 
 const availableTooltipPositionsForRobotext = [
   tooltipPositions.LEFT,

web/modals/search/message-search-modal.react.js

@@ -9,12 +9,12 @@ import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import css from './message-search-modal.css';
 import { useParseSearchResults } from './message-search-utils.react.js';
-import { useTooltipContext } from '../../chat/tooltip-provider.js';
 import Button from '../../components/button.react.js';
 import MessageResult from '../../components/message-result.react.js';
 import Search from '../../components/search.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useMessageSearchContext } from '../../search/message-search-state-provider.react.js';
+import { useTooltipContext } from '../../tooltips/tooltip-provider.js';
 import Modal from '../modal.react.js';
 
 type ContentProps = {

web/navigation-sidebar/account-settings-button.react.js

@@ -8,8 +8,8 @@ import { useDispatch } from 'lib/utils/redux-utils.js';
 import css from './account-settings-button.css';
 import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-constants.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
-import { useLabelTooltip } from '../utils/tooltip-action-utils.js';
-import { tooltipPositions } from '../utils/tooltip-utils.js';
+import { useLabelTooltip } from '../tooltips/tooltip-action-utils.js';
+import { tooltipPositions } from '../tooltips/tooltip-utils.js';
 
 function AccountSettingsButton(): React.Node {
   const dispatch = useDispatch();

web/navigation-sidebar/community-creation-button.react.js

@@ -8,8 +8,8 @@ import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import css from './community-creation-button.css';
 import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-constants.js';
 import CommunityCreationModal from '../sidebar/community-creation/community-creation-modal.react.js';
-import { useLabelTooltip } from '../utils/tooltip-action-utils.js';
-import { tooltipPositions } from '../utils/tooltip-utils.js';
+import { useLabelTooltip } from '../tooltips/tooltip-action-utils.js';
+import { tooltipPositions } from '../tooltips/tooltip-utils.js';
 
 function CommunityCreationButton(): React.Node {
   const { pushModal } = useModalContext();

web/navigation-sidebar/community-list-item.react.js

@@ -10,8 +10,8 @@ import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-consta
 import ThreadAvatar from '../avatars/thread-avatar.react.js';
 import UnreadBadge from '../components/unread-badge.react.js';
 import { useSelector } from '../redux/redux-utils.js';
-import { useLabelTooltip } from '../utils/tooltip-action-utils.js';
-import { tooltipPositions } from '../utils/tooltip-utils.js';
+import { useLabelTooltip } from '../tooltips/tooltip-action-utils.js';
+import { tooltipPositions } from '../tooltips/tooltip-utils.js';
 
 type Props = {
   +threadInfo: ResolvedThreadInfo,

web/navigation-sidebar/navigation-sidebar-constants.js

@@ -1,11 +1,3 @@
 // @flow
 
 export const navigationSidebarLabelTooltipMargin = 24;
-
-export const labelTooltipStyle = {
-  paddingTop: 8,
-  paddingBottom: 8,
-  paddingLeft: 8,
-  paddingRight: 8,
-  height: 17,
-};

web/navigation-sidebar/navigation-sidebar-home-button.react.js

@@ -9,8 +9,8 @@ import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-consta
 import css from './navigation-sidebar-home-button.css';
 import UnreadBadge from '../components/unread-badge.react.js';
 import { useSelector } from '../redux/redux-utils.js';
-import { useLabelTooltip } from '../utils/tooltip-action-utils.js';
-import { tooltipPositions } from '../utils/tooltip-utils.js';
+import { useLabelTooltip } from '../tooltips/tooltip-action-utils.js';
+import { tooltipPositions } from '../tooltips/tooltip-utils.js';
 
 function NavigationSidebarHomeButton(): React.Node {
   const unreadCountValue = useSelector(unreadCount);

web/navigation-sidebar/label-toolitp.react.js → web/tooltips/label-toolitp.react.js

@@ -4,11 +4,8 @@ import classNames from 'classnames';
 import * as React from 'react';
 
 import css from './label-tooltip.css';
-import { labelTooltipStyle } from './navigation-sidebar-constants.js';
-import {
-  tooltipPositions,
-  type TooltipPosition,
-} from '../utils/tooltip-utils.js';
+import { labelTooltipStyle } from './tooltip-constants.js';
+import { tooltipPositions, type TooltipPosition } from './tooltip-utils.js';
 
 type Props = {
   +tooltipLabel: string,

web/chat/message-tooltip.react.js → web/tooltips/message-tooltip.react.js

@@ -9,22 +9,22 @@ import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { useNextLocalID } from 'lib/shared/message-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
+import css from './message-tooltip.css';
 import {
   tooltipButtonStyle,
   tooltipLabelStyle,
   tooltipStyle,
-} from './chat-constants.js';
-import css from './message-tooltip.css';
-import {
-  useSendReaction,
-  getEmojiKeyboardPosition,
-} from './reaction-message-utils.js';
+} from './tooltip-constants.js';
 import { useTooltipContext } from './tooltip-provider.js';
 import type {
   MessageTooltipAction,
   TooltipSize,
   TooltipPositionStyle,
-} from '../utils/tooltip-utils.js';
+} from './tooltip-utils.js';
+import {
+  useSendReaction,
+  getEmojiKeyboardPosition,
+} from '../chat/reaction-message-utils.js';
 
 type MessageTooltipProps = {
   +actions: $ReadOnlyArray<MessageTooltipAction>,

web/chat/reaction-tooltip.react.js → web/tooltips/reaction-tooltip.react.js

@@ -5,13 +5,13 @@ import * as React from 'react';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ReactionInfo } from 'lib/selectors/chat-selectors';
 
+import css from './reaction-tooltip.css';
 import {
   tooltipLabelStyle,
   reactionTooltipStyle,
   reactionSeeMoreLabel,
   reactionSeeMoreLabelStyle,
-} from './chat-constants.js';
-import css from './reaction-tooltip.css';
+} from './tooltip-constants.js';
 import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js';
 
 type Props = {

web/utils/tooltip-action-utils.js → web/tooltips/tooltip-action-utils.js

@@ -22,6 +22,10 @@ import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { longAbsoluteDate } from 'lib/utils/date-utils.js';
 import { canToggleMessagePin } from 'lib/utils/toggle-pin-utils.js';
 
+import LabelTooltip from './label-toolitp.react.js';
+import MessageTooltip from './message-tooltip.react.js';
+import ReactionTooltip from './reaction-tooltip.react.js';
+import { useTooltipContext } from './tooltip-provider.js';
 import {
   type MessageTooltipAction,
   getTooltipPositionStyle,
@@ -34,14 +38,10 @@ import {
 } from './tooltip-utils.js';
 import { getComposedMessageID } from '../chat/chat-constants.js';
 import { useEditModalContext } from '../chat/edit-message-provider.js';
-import MessageTooltip from '../chat/message-tooltip.react.js';
 import type { PositionInfo } from '../chat/position-types.js';
-import ReactionTooltip from '../chat/reaction-tooltip.react.js';
-import { useTooltipContext } from '../chat/tooltip-provider.js';
 import CommIcon from '../CommIcon.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import TogglePinModal from '../modals/chat/toggle-pin-modal.react.js';
-import LabelTooltip from '../navigation-sidebar/label-toolitp.react.js';
 import {
   useOnClickPendingSidebar,
   useOnClickThread,

web/tooltips/tooltip-constants.js

@@ -0,0 +1,43 @@
+// @flow
+
+export const tooltipStyle = {
+  paddingLeft: 5,
+  paddingRight: 5,
+  rowGap: 3,
+};
+
+export const tooltipLabelStyle = {
+  padding: 6,
+  height: 20,
+};
+
+export const tooltipButtonStyle = {
+  paddingLeft: 6,
+  paddingRight: 6,
+  width: 30,
+  height: 38,
+};
+
+export const reactionTooltipStyle = {
+  paddingTop: 8,
+  paddingBottom: 8,
+  paddingLeft: 12,
+  paddingRight: 12,
+  rowGap: 4,
+  maxWidth: 136,
+  maxHeight: 162,
+};
+
+export const reactionSeeMoreLabel = 'See more';
+
+export const reactionSeeMoreLabelStyle = {
+  height: 18,
+};
+
+export const labelTooltipStyle = {
+  paddingTop: 8,
+  paddingBottom: 8,
+  paddingLeft: 8,
+  paddingRight: 8,
+  height: 17,
+};

web/chat/tooltip-provider.js → web/tooltips/tooltip-provider.js

@@ -6,8 +6,8 @@ import * as React from 'react';
 
 import type { SetState } from 'lib/types/hook-types.js';
 
+import type { TooltipPositionStyle } from './tooltip-utils.js';
 import css from './tooltip.css';
-import type { TooltipPositionStyle } from '../utils/tooltip-utils.js';
 
 const onMouseLeaveSourceDisappearTimeoutMs = 200;
 const onMouseLeaveTooltipDisappearTimeoutMs = 100;

web/utils/tooltip-utils.js → web/tooltips/tooltip-utils.js

@@ -3,17 +3,17 @@
 import invariant from 'invariant';
 import * as React from 'react';
 
-import { getAppContainerPositionInfo } from './window-utils.js';
 import {
+  labelTooltipStyle,
   tooltipButtonStyle,
   tooltipLabelStyle,
   tooltipStyle,
   reactionTooltipStyle,
   reactionSeeMoreLabel,
-} from '../chat/chat-constants.js';
+} from './tooltip-constants.js';
 import type { PositionInfo } from '../chat/position-types.js';
-import { labelTooltipStyle } from '../navigation-sidebar/navigation-sidebar-constants.js';
 import { calculateMaxTextWidth } from '../utils/text-utils.js';
+import { getAppContainerPositionInfo } from '../utils/window-utils.js';
 
 export const tooltipPositions = Object.freeze({
   LEFT: 'left',