pl-fe: pick some changes from the deck branch

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/columns/notifications.tsx

@@ -144,7 +144,11 @@ const getNotifications = createSelector([
   };
 });
 
-const NotificationsColumn = () => {
+interface INotificationsColumn {
+  multiColumn?: boolean;
+}
+
+const NotificationsColumn: React.FC<INotificationsColumn> = ({ multiColumn }) => {
   const dispatch = useAppDispatch();
   const features = useFeatures();
   const settings = useSettings();
@@ -259,6 +263,7 @@ const NotificationsColumn = () => {
       listClassName={clsx('divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800', {
         'animate-pulse': displayedNotifications.length === 0,
       })}
+      useWindowScroll={!multiColumn}
     >
       {scrollableContent!}
     </ScrollableList>

packages/pl-fe/src/components/sidebar-navigation-link.tsx

@@ -62,6 +62,6 @@ const SidebarNavigationLink = React.memo(React.forwardRef((props: ISidebarNaviga
       <p>{text}</p>
     </NavLink>
   );
-}), (prevProps, nextProps) => prevProps.count === nextProps.count);
+}), (prevProps, nextProps) => prevProps.count === nextProps.count && prevProps.shrink === nextProps.shrink);
 
 export { SidebarNavigationLink as default };

packages/pl-fe/src/components/ui/popover.tsx

@@ -4,6 +4,7 @@ import {
   autoUpdate,
   FloatingArrow,
   offset,
+  Placement,
   shift,
   useClick,
   useDismiss,
@@ -29,6 +30,7 @@ interface IPopover {
   /** Add a class to the reference (trigger) element */
   referenceElementClassName?: string;
   offsetOptions?: OffsetOptions;
+  placements?: Placement;
 }
 
 /**
@@ -37,7 +39,7 @@ interface IPopover {
  * Similar to tooltip, but requires a click and is used for larger blocks
  * of information.
  */
-const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassName, interaction = 'hover', isFlush = false, offsetOptions = 10 }) => {
+const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassName, interaction = 'hover', isFlush = false, offsetOptions = 10, placements = ['top', 'bottom'] }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const arrowRef = useRef<SVGSVGElement>(null);
@@ -48,7 +50,7 @@ const Popover: React.FC<IPopover> = ({ children, content, referenceElementClassN
     placement: 'top',
     middleware: [
       autoPlacement({
-        allowedPlacements: ['top', 'bottom'],
+        allowedPlacements: placements,
       }),
       offset(offsetOptions),
       shift({

packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx

@@ -35,7 +35,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
     const fullHeight = document.body.offsetHeight;
 
     // On mobile, account for bottom navigation.
-    const offset = document.body.clientWidth < 976 ? -61 : 0;
+    const offset = document.body.clientWidth < 976 ? -53 : 0;
 
     setHeight(fullHeight - top + offset);
   };

packages/pl-fe/src/features/ui/components/panels/my-groups-panel.tsx

@@ -15,9 +15,7 @@ const MyGroupsPanel = () => {
   }
 
   return (
-    <Widget
-      title={<FormattedMessage id='my_groups_panel.title' defaultMessage='My groups' />}
-    >
+    <Widget title={<FormattedMessage id='my_groups_panel.title' defaultMessage='My groups' />}>
       {isFetching ? (
         new Array(3).fill(0).map((_, idx) => (
           <PlaceholderGroupSearch key={idx} withJoinAction={false} />

packages/pl-fe/src/features/ui/index.tsx

@@ -489,8 +489,7 @@ const UI: React.FC<IUI> = React.memo(({ children }) => {
     pointerEvents: isDropdownMenuOpen ? 'none' : undefined,
   };
 
-  // to be used with the deck
-  const fullWidth = false;
+  const fullWidth = history.location.pathname.startsWith('/deck');
 
   return (
     <GlobalHotkeys node={node}>

packages/pl-fe/src/styles/new/layout.scss

@@ -305,7 +305,7 @@ body {
     @apply hidden lg:block;
 
     &--shrink {
-      @apply w-fit;
+      @apply w-10;
     }
 
     &:not(&--shrink) {