fix: vertial pinned host and better thumb navigation

BDX-town · Oct 30, 2024 · 732967f · 732967f
1 parent ac9f66f
commit 732967f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/app/soapbox/components/thumb_navigation-link.tsx b/app/soapbox/components/thumb_navigation-link.tsx
@@ -14,9 +14,10 @@ interface IThumbNavigationLink {
   paths?: Array<string>,
   onClick?: React.MouseEventHandler,
   active?: boolean,
+  className?: string,
 }
 
-const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, src, text, to, exact, paths, onClick, active }): JSX.Element => {
+const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, src, text, to, exact, paths, onClick, active, className }): JSX.Element => {
   const { pathname } = useLocation();
 
   const isActive = (): boolean => {
@@ -30,7 +31,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, src, text,
 
   const internalActive = isActive();
 
-  const Wrapper = React.useMemo(() => ({ children }) => to ? <NavLink to={to} exact={exact} className='thumb-navigation__link'>{ children }</NavLink> : <button className='thumb-navigation__link' onClick={onClick}>{ children }</button>, [to, onClick, exact]);
+  const Wrapper = React.useMemo(() => ({ children }) => to ? <NavLink to={to} exact={exact} className={`${className} thumb-navigation__link`}>{ children }</NavLink> : <button className={`${className} thumb-navigation__link`} onClick={onClick}>{ children }</button>, [to, onClick, exact]);
 
   return (
     <Wrapper>

diff --git a/app/soapbox/components/thumb_navigation.tsx b/app/soapbox/components/thumb_navigation.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { FormattedMessage } from 'react-intl';
 import { usePopper } from 'react-popper';
@@ -10,21 +10,39 @@ import { openSidebar } from 'soapbox/actions/sidebar';
 import ThumbNavigationLink from 'soapbox/components/thumb_navigation-link';
 import { Text } from 'soapbox/components/ui';
 import { useAppSelector, useLogo, useOwnAccount } from 'soapbox/hooks';
+import instance from 'soapbox/reducers/instance';
 import { getFeatures } from 'soapbox/utils/features';
 
 import { Avatar } from './ui';
 
+function calculateBottom(node: HTMLElement) {
+  if (!node) return 0;
+  const { bottom } = node.getBoundingClientRect();
+  const height = window.innerHeight;
+  return height - bottom;
+}
+
 const PinnedHosts = () => {
+  const node = useRef<HTMLDivElement>(null);
+  const [bottom, setBottom] = useState(0);
   const pinnedHosts = useAppSelector((s) => getPinnedHosts(s));
+
+  useEffect(() => {
+    setBottom(calculateBottom(node.current));
+    node.current.scrollBy(0, 100000000);
+  }, [pinnedHosts]);
+
   if (pinnedHosts.isEmpty()) return null;
+
+
   return (
-    <div className='max-w-[100vw] overflow-x-auto'>
-      <div className='bg-white dark:bg-slate-900 px-4 py-1 rounded-full shadow-md w-max flex gap-3 mx-auto'>
+    <div ref={node} className='overflow-y-auto overscroll-contain' style={{ maxHeight: `calc(100vh - ${bottom}px)` }}>
+      <div className='w-max flex flex-col gap-3 pl-4 justify-start items-start'>
         {
-          pinnedHosts.map((instance) => (
-            <Link className='flex flex-col items-center gap-1' to={`/timeline/${instance.get('host')}`}>
+          pinnedHosts.sort((a, b) => b.get('host').length - a.get('host').length).map((instance) => (
+            <Link className='border-[1px] border-solid border-slate-500 shadow-md bg-white rounded-full dark:bg-slate-900 px-4 py-3  flex items-center gap-2' to={`/timeline/${instance.get('host')}`}>
               <img alt={instance.get('host')} src={instance.get('favicon')} width={16} height={16} />
-              <Text size='xs'>{ instance.get('host') }</Text>
+              <Text size='sm'>{ instance.get('host') }</Text>
             </Link>
           ))
         }
@@ -41,17 +59,19 @@ const Communities = () => {
 
 
   return (
-    <div className='bg-white dark:bg-slate-900 px-3 py-2 rounded-full shadow-md w-max flex gap-2'>
+    <div className='border-[1px] border-solid border-slate-500 bg-white dark:bg-slate-900 px-3 py-2 rounded-full shadow-md w-max flex gap-2 border-grey-700'>
       {
         features.federating ? (
           <ThumbNavigationLink
+            className='py-0'
             src={logo}
             text={instance.get('title')}
             to='/timeline/local'
             exact
           />
         ) : (
           <ThumbNavigationLink
+            className='py-0'
             src={require('@tabler/icons/world.svg')}
             text={<FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
             to='/timeline/local'
@@ -63,6 +83,7 @@ const Communities = () => {
       {
         features.federating && features.bubbleTimeline && (
           <ThumbNavigationLink
+            className='py-0'
             src={require('@tabler/icons/hexagon.svg')}
             text={<FormattedMessage id='tabs_bar.bubble' defaultMessage='Featured' />}
             to='/timeline/bubble'
@@ -74,6 +95,7 @@ const Communities = () => {
       {
         features.federating && (
           <ThumbNavigationLink
+            className='py-0'
             src={require('icons/fediverse.svg')}
             text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Explore' />}
             to='/timeline/fediverse'
@@ -117,7 +139,7 @@ const CommunityTimelineMenu = ({ referenceElement, onClose }: { referenceElement
     <div
       ref={setPopperElement}
       onClick={onClose}
-      className='z-50 flex flex-col gap-1'
+      className='z-50 flex flex-col gap-3'
       style={styles.popper}
       {...attributes.popper}
     >