From 5d4bbce324ade8066a499209dcbb3b83e69444b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 28 Jun 2024 23:42:44 +0200
Subject: [PATCH] Remove logo from navbar, hide navbar on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/thumb-navigation-link.tsx      | 16 +-------
 src/components/thumb-navigation.tsx           | 15 +++++++-
 src/components/ui/column/column.tsx           |  2 +-
 .../chats/components/chat-page/chat-page.tsx  |  2 +-
 src/features/compose/components/search.tsx    |  2 +-
 .../components/site-preview.tsx               | 14 +++----
 src/features/ui/components/navbar.tsx         | 38 +++++--------------
 src/utils/features.ts                         |  2 +-
 8 files changed, 35 insertions(+), 56 deletions(-)

diff --git a/src/components/thumb-navigation-link.tsx b/src/components/thumb-navigation-link.tsx
index d5db818ed..91acbd1fb 100644
--- a/src/components/thumb-navigation-link.tsx
+++ b/src/components/thumb-navigation-link.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
 import IconWithCounter from 'soapbox/components/icon-with-counter';
-import { Icon, Text } from 'soapbox/components/ui';
+import { Icon } from 'soapbox/components/ui';
 import { useSettings } from 'soapbox/hooks';
 
 interface IThumbNavigationLink {
@@ -34,7 +34,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
   const icon = (active && activeSrc) || src;
 
   return (
-    <NavLink to={to} exact={exact} className='flex flex-1 flex-col items-center space-y-1 px-2 py-2.5 text-lg text-gray-600'>
+    <NavLink to={to} exact={exact} className='flex flex-1 flex-col items-center space-y-1 px-2 py-4 text-lg text-gray-600'>
       {!demetricator && count !== undefined ? (
         <IconWithCounter
           src={icon}
@@ -56,18 +56,6 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
           })}
         />
       )}
-
-      <Text
-        tag='span'
-        size='xs'
-        weight='medium'
-        className={clsx({
-          'text-gray-600': !active,
-          'text-primary-500': active,
-        })}
-      >
-        {text}
-      </Text>
     </NavLink>
   );
 };
diff --git a/src/components/thumb-navigation.tsx b/src/components/thumb-navigation.tsx
index 44fb625d3..a78963079 100644
--- a/src/components/thumb-navigation.tsx
+++ b/src/components/thumb-navigation.tsx
@@ -1,11 +1,15 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { openSidebar } from 'soapbox/actions/sidebar';
 import ThumbNavigationLink from 'soapbox/components/thumb-navigation-link';
 import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+
+import { Icon } from './ui';
 
 const ThumbNavigation: React.FC = (): JSX.Element => {
+  const dispatch = useAppDispatch();
   const { account } = useOwnAccount();
   const features = useFeatures();
 
@@ -14,6 +18,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   const notificationCount = useAppSelector((state) => state.notifications.unread);
   const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
 
+  const onOpenSidebar = () => dispatch(openSidebar());
+
   /** Conditionally render the supported messages link */
   const renderMessagesLink = (): React.ReactNode => {
     if (features.chats) {
@@ -46,6 +52,13 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
   return (
     <div className='fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 lg:hidden dark:border-gray-800 dark:bg-primary-900/90'>
+      <button className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600' onClick={onOpenSidebar}>
+        <Icon
+          src={require('@tabler/icons/outline/menu-2.svg')}
+          className='h-5 w-5 text-gray-600 black:text-white'
+        />
+      </button>
+
       <ThumbNavigationLink
         src={require('@tabler/icons/outline/home.svg')}
         activeSrc={require('@tabler/icons/filled/home.svg')}
diff --git a/src/components/ui/column/column.tsx b/src/components/ui/column/column.tsx
index 9f0b85484..efc6cba5e 100644
--- a/src/components/ui/column/column.tsx
+++ b/src/components/ui/column/column.tsx
@@ -102,7 +102,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
             backHref={backHref}
             className={clsx({
               'rounded-t-3xl': !isScrolled && !transparent,
-              'sticky top-12 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/80 backdrop-blur lg:top-16': !transparent,
+              'sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/80 backdrop-blur lg:top-16': !transparent,
               'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
               '-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
               '-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
diff --git a/src/features/chats/components/chat-page/chat-page.tsx b/src/features/chats/components/chat-page/chat-page.tsx
index ab6bc2de2..54b71cf29 100644
--- a/src/features/chats/components/chat-page/chat-page.tsx
+++ b/src/features/chats/components/chat-page/chat-page.tsx
@@ -58,7 +58,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
       className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg black:bg-transparent sm:rounded-t-xl dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'
     >
       <div
-        className='grid h-full grid-cols-9 overflow-hidden black:divide-x dark:divide-x-2 dark:divide-solid dark:divide-gray-800'
+        className='grid h-full grid-cols-9 overflow-hidden sm:black:divide-x dark:divide-solid dark:divide-gray-800 sm:dark:divide-x-2'
         data-testid='chat-page'
       >
         <Stack
diff --git a/src/features/compose/components/search.tsx b/src/features/compose/components/search.tsx
index 23f1b4804..fbbc00047 100644
--- a/src/features/compose/components/search.tsx
+++ b/src/features/compose/components/search.tsx
@@ -148,7 +148,7 @@ const Search = (props: ISearch) => {
   return (
     <div
       className={clsx('w-full', {
-        'sticky top-[124px] z-10 bg-white/90 backdrop-blur black:bg-black/80 dark:bg-primary-900/90': !openInRoute,
+        'sticky top-[76px] z-10 bg-white/90 backdrop-blur black:bg-black/80 dark:bg-primary-900/90': !openInRoute,
       })}
     >
       <label htmlFor='search' className='sr-only'>{intl.formatMessage(messages.placeholder)}</label>
diff --git a/src/features/soapbox-config/components/site-preview.tsx b/src/features/soapbox-config/components/site-preview.tsx
index e1ca0198d..346a88330 100644
--- a/src/features/soapbox-config/components/site-preview.tsx
+++ b/src/features/soapbox-config/components/site-preview.tsx
@@ -3,7 +3,6 @@ import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { defaultSettings } from 'soapbox/actions/settings';
-import SiteLogo from 'soapbox/components/site-logo';
 import BackgroundShapes from 'soapbox/features/ui/components/background-shapes';
 import { useSystemTheme } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
@@ -43,13 +42,12 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
         <FormattedMessage id='site_preview.preview' defaultMessage='Preview' />
       </div>
 
-      <div className={clsx('absolute inset-0 z-[1] flex h-12 shadow lg:h-16', {
-        'bg-white': !dark,
-        'bg-gray-800': dark,
-      })}
-      >
-        <SiteLogo alt='Logo' className='h-5 w-auto self-center px-2 lg:h-6' theme={dark ? 'dark' : 'light'} />
-      </div>
+      <div
+        className={clsx('absolute inset-0 z-[1] flex h-12 shadow lg:h-16', {
+          'bg-white': !dark,
+          'bg-gray-800': dark,
+        })}
+      />
     </div>
   );
 
diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index 7a208e39b..b7b7f9701 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -5,12 +5,9 @@ import { Link, Redirect } from 'react-router-dom';
 
 import { logIn, verifyCredentials } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
-import { openSidebar } from 'soapbox/actions/sidebar';
-import SiteLogo from 'soapbox/components/site-logo';
 import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
 import { useAppDispatch, useFeatures, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 import ProfileDropdown from './profile-dropdown';
 
@@ -31,15 +28,12 @@ const Navbar = () => {
   const { isOpen } = useRegistrationStatus();
   const { account } = useOwnAccount();
   const node = useRef(null);
-  const isMobile = useIsMobile();
 
   const [isLoading, setLoading] = useState<boolean>(false);
   const [username, setUsername] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [mfaToken, setMfaToken] = useState<boolean>(false);
 
-  const onOpenSidebar = () => dispatch(openSidebar());
-
   const handleSubmit: React.FormEventHandler = (event) => {
     event.preventDefault();
     setLoading(true);
@@ -69,47 +63,33 @@ const Navbar = () => {
   return (
     <nav
       className={clsx(
-        'sticky top-0 z-50 border-gray-200 bg-white shadow black:border-b black:border-b-gray-800 black:bg-black dark:border-gray-800 dark:bg-primary-900',
-        { 'border-b': isMobile },
+        'sticky top-0 z-50 hidden border-gray-200 bg-white shadow black:border-b black:border-b-gray-800 black:bg-black lg:block dark:border-gray-800 dark:bg-primary-900',
       )}
       ref={node}
       data-testid='navbar'
     >
-      <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
-        <div className='relative flex h-12 justify-between lg:h-16'>
-          {account && (
-            <div className='absolute inset-y-0 left-0 flex items-center lg:hidden rtl:left-auto rtl:right-0'>
-              <button onClick={onOpenSidebar}>
-                <Avatar src={account.avatar} size={34} />
-              </button>
-            </div>
-          )}
-
+      <div className='mx-auto max-w-7xl px-8'>
+        <div className='relative flex h-16 justify-between'>
           <HStack
             space={4}
             alignItems='center'
-            className={clsx('enter flex-1 lg:items-stretch', {
-              'justify-center lg:justify-start': account,
+            className={clsx('enter flex-1 items-stretch', {
+              'justify-center justify-start': account,
               'justify-start': !account,
             })}
           >
-            <Link key='logo' to='/' data-preview-title-id='column.home' className='ml-4 flex shrink-0 items-center'>
-              <SiteLogo alt='Logo' className='h-5 w-auto cursor-pointer' />
-              <span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
-            </Link>
-
             {account && (
-              <div className='hidden flex-1 items-center justify-center px-2 lg:ml-6 lg:flex lg:justify-start'>
-                <div className='hidden w-full max-w-xl lg:block lg:max-w-xs'>
+              <div className='flex flex-1 items-center justify-start pl-0'>
+                <div className='block w-full max-w-xs'>
                   <Search openInRoute autosuggest />
                 </div>
               </div>
             )}
           </HStack>
 
-          <HStack space={3} alignItems='center' className='absolute inset-y-0 right-0 pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0'>
+          <HStack space={3} alignItems='center'>
             {account ? (
-              <div className='relative hidden items-center lg:flex'>
+              <div className='relative flex items-center'>
                 <ProfileDropdown account={account}>
                   <Avatar src={account.avatar} size={34} />
                 </ProfileDropdown>
diff --git a/src/utils/features.ts b/src/utils/features.ts
index 98578767d..ab1e7c739 100644
--- a/src/utils/features.ts
+++ b/src/utils/features.ts
@@ -533,7 +533,7 @@ const getInstanceFeatures = (instance: Instance) => {
      * @see POST /api/v1/admin/groups/:group_id/unsuspend
      * @see DELETE /api/v1/admin/groups/:group_id
      */
-    groups: false,
+    groups: features.includes('pleroma:groups'),
 
     /**
      * Can hide follows/followers lists and counts.