fix: Minor bugs with title icon positioning, share more logic

app/components/Icon.tsx

@@ -1,6 +1,8 @@
 import { observer } from "mobx-react";
 import { getLuminance } from "polished";
 import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { randomElement } from "@shared/random";
 import { IconType } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
@@ -9,6 +11,7 @@ import { determineIconType } from "@shared/utils/icon";
 import EmojiIcon from "~/components/Icons/EmojiIcon";
 import useStores from "~/hooks/useStores";
 import Logger from "~/utils/Logger";
+import Flex from "./Flex";
 
 export type Props = {
   /** The icon to render */
@@ -104,4 +107,24 @@ const SVGIcon = observer(
   }
 );
 
+export const IconTitleWrapper = styled(Flex)<{ dir?: string }>`
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 3px;
+  height: 40px;
+  width: 40px;
+
+  // Always move above TOC
+  z-index: 1;
+
+  ${(props: { dir?: string }) =>
+    props.dir === "rtl" ? "right: -40px" : "left: -40px"};
+
+  ${breakpoint("desktop")`
+    ${(props: { dir?: string }) =>
+      props.dir === "rtl" ? "right: -44px" : "left: -44px"};
+  `}
+`;
+
 export default Icon;

app/scenes/Collection/index.tsx

@@ -21,6 +21,7 @@ import Badge from "~/components/Badge";
 import CenteredContent from "~/components/CenteredContent";
 import CollectionDescription from "~/components/CollectionDescription";
 import Heading from "~/components/Heading";
+import Icon, { IconTitleWrapper } from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import InputSearchPage from "~/components/InputSearchPage";
 import PlaceholderList from "~/components/List/Placeholder";
@@ -130,7 +131,11 @@ function CollectionScene() {
   }
 
   const fallbackIcon = collection ? (
-    <Icon as={CollectionIcon} collection={collection} size={40} expanded />
+    <Icon
+      value={collection.icon ?? "collection"}
+      color={collection.color || undefined}
+      size={40}
+    />
   ) : null;
 
   return collection ? (
@@ -177,22 +182,24 @@ function CollectionScene() {
             <Empty collection={collection} />
           ) : (
             <>
-              <HeadingWithIcon>
-                {can.update ? (
-                  <React.Suspense fallback={fallbackIcon}>
-                    <Icon
-                      icon={collection.icon ?? "collection"}
-                      color={collection.color ?? colorPalette[0]}
-                      initial={collection.name[0]}
-                      size={40}
-                      popoverPosition="bottom-start"
-                      onChange={handleIconChange}
-                      borderOnHover
-                    />
-                  </React.Suspense>
-                ) : (
-                  fallbackIcon
-                )}
+              <CollectionHeading>
+                <IconTitleWrapper>
+                  {can.update ? (
+                    <React.Suspense fallback={fallbackIcon}>
+                      <IconPicker
+                        icon={collection.icon ?? "collection"}
+                        color={collection.color ?? colorPalette[0]}
+                        initial={collection.name[0]}
+                        size={40}
+                        popoverPosition="bottom-start"
+                        onChange={handleIconChange}
+                        borderOnHover
+                      />
+                    </React.Suspense>
+                  ) : (
+                    fallbackIcon
+                  )}
+                </IconTitleWrapper>
                 {collection.name}
                 {collection.isPrivate &&
                   !FeatureFlags.isEnabled(Feature.newCollectionSharing) && (
@@ -205,7 +212,7 @@ function CollectionScene() {
                       <Badge>{t("Private")}</Badge>
                     </Tooltip>
                   )}
-              </HeadingWithIcon>
+              </CollectionHeading>
 
               <PinnedDocuments
                 pins={pins.inCollection(collection.id)}
@@ -324,19 +331,15 @@ const Documents = styled.div`
   background: ${s("background")};
 `;
 
-const HeadingWithIcon = styled(Heading)`
+const CollectionHeading = styled(Heading)`
   display: flex;
   align-items: center;
+  position: relative;
+  margin-left: 40px;
 
   ${breakpoint("tablet")`
-    margin-left: -40px;
-  `};
-`;
-
-const Icon = styled(IconPicker)`
-  flex-shrink: 0;
-  margin-left: -8px;
-  margin-right: 8px;
+    margin-left: 0;
+  `}
 `;
 
 export default observer(CollectionScene);

app/scenes/Document/components/DocumentTitle.tsx

@@ -18,8 +18,7 @@ import {
 import { DocumentValidation } from "@shared/validations";
 import ContentEditable, { RefHandle } from "~/components/ContentEditable";
 import { useDocumentContext } from "~/components/DocumentContext";
-import Flex from "~/components/Flex";
-import Icon from "~/components/Icon";
+import Icon, { IconTitleWrapper } from "~/components/Icon";
 import { PopoverButton } from "~/components/IconPicker/components/PopoverButton";
 import useBoolean from "~/hooks/useBoolean";
 import usePolicy from "~/hooks/usePolicy";
@@ -254,7 +253,7 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
       ref={mergeRefs([ref, externalRef])}
     >
       {can.update && !readOnly ? (
-        <IconWrapper align="center" justify="center" dir={dir}>
+        <IconTitleWrapper dir={dir}>
           <React.Suspense fallback={fallbackIcon}>
             <StyledIconPicker
               icon={icon ?? null}
@@ -268,11 +267,9 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
               borderOnHover
             />
           </React.Suspense>
-        </IconWrapper>
+        </IconTitleWrapper>
       ) : icon ? (
-        <IconWrapper align="center" justify="center" dir={dir}>
-          {fallbackIcon}
-        </IconWrapper>
+        <IconTitleWrapper dir={dir}>{fallbackIcon}</IconTitleWrapper>
       ) : null}
     </Title>
   );
@@ -355,17 +352,4 @@ const Title = styled(ContentEditable)<TitleProps>`
   }
 `;
 
-const IconWrapper = styled(Flex)<{ dir?: string }>`
-  position: absolute;
-  top: 3px;
-  height: 40px;
-  width: 40px;
-
-  // Always move above TOC
-  z-index: 1;
-
-  ${(props: { dir?: string }) =>
-    props.dir === "rtl" ? "right: -48px" : "left: -48px"};
-`;
-
 export default observer(DocumentTitle);