Merge branch 'navbar-standalone' into 'main'

Navbar: hide login form in standalone mode

See merge request soapbox-pub/soapbox!3019

src/features/ui/components/navbar.tsx

@@ -10,7 +10,8 @@ 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 { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks';
+import { isStandalone } from 'soapbox/utils/state';
 
 import ProfileDropdown from './profile-dropdown';
 
@@ -28,6 +29,7 @@ const Navbar = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const features = useFeatures();
+  const standalone = useAppSelector(isStandalone);
   const { isOpen } = useRegistrationStatus();
   const { account } = useOwnAccount();
   const node = useRef(null);
@@ -103,83 +105,85 @@ const Navbar = () => {
             )}
           </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'>
-            {account ? (
-              <div className='relative hidden items-center lg:flex'>
-                <ProfileDropdown account={account}>
-                  <Avatar src={account.avatar} size={34} />
-                </ProfileDropdown>
-              </div>
-            ) : (
-              <>
-                {features.nostrSignup ? (
-                  <div className='hidden items-center xl:flex'>
-                    <Button
-                      theme='primary'
-                      onClick={handleNostrLogin}
-                      disabled={isLoading}
-                    >
-                      {intl.formatMessage(messages.login)}
-                    </Button>
-                  </div>
-                ) : (
-                  <Form className='hidden items-center space-x-2 xl:flex rtl:space-x-reverse' onSubmit={handleSubmit}>
-                    <Input
-                      required
-                      value={username}
-                      onChange={(event) => setUsername(event.target.value)}
-                      type='text'
-                      placeholder={intl.formatMessage(features.logInWithUsername ? messages.username : messages.email)}
-                      className='max-w-[200px]'
-                    />
-
-                    <Input
-                      required
-                      value={password}
-                      onChange={(event) => setPassword(event.target.value)}
-                      type='password'
-                      placeholder={intl.formatMessage(messages.password)}
-                      className='max-w-[200px]'
-                    />
-
-                    <Link to='/reset-password'>
-                      <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
-                        <IconButton
-                          src={require('@tabler/icons/outline/help.svg')}
-                          className='cursor-pointer bg-transparent text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200'
-                          iconClassName='h-5 w-5'
-                        />
-                      </Tooltip>
-                    </Link>
+          {!standalone && (
+            <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'>
+              {account ? (
+                <div className='relative hidden items-center lg:flex'>
+                  <ProfileDropdown account={account}>
+                    <Avatar src={account.avatar} size={34} />
+                  </ProfileDropdown>
+                </div>
+              ) : (
+                <>
+                  {features.nostrSignup ? (
+                    <div className='hidden items-center xl:flex'>
+                      <Button
+                        theme='primary'
+                        onClick={handleNostrLogin}
+                        disabled={isLoading}
+                      >
+                        {intl.formatMessage(messages.login)}
+                      </Button>
+                    </div>
+                  ) : (
+                    <Form className='hidden items-center space-x-2 xl:flex rtl:space-x-reverse' onSubmit={handleSubmit}>
+                      <Input
+                        required
+                        value={username}
+                        onChange={(event) => setUsername(event.target.value)}
+                        type='text'
+                        placeholder={intl.formatMessage(features.logInWithUsername ? messages.username : messages.email)}
+                        className='max-w-[200px]'
+                      />
+
+                      <Input
+                        required
+                        value={password}
+                        onChange={(event) => setPassword(event.target.value)}
+                        type='password'
+                        placeholder={intl.formatMessage(messages.password)}
+                        className='max-w-[200px]'
+                      />
+
+                      <Link to='/reset-password'>
+                        <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
+                          <IconButton
+                            src={require('@tabler/icons/outline/help.svg')}
+                            className='cursor-pointer bg-transparent text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200'
+                            iconClassName='h-5 w-5'
+                          />
+                        </Tooltip>
+                      </Link>
+
+                      <Button
+                        theme='primary'
+                        type='submit'
+                        disabled={isLoading}
+                      >
+                        {intl.formatMessage(messages.login)}
+                      </Button>
+                    </Form>
+                  )}
 
+                  <div className='space-x-1.5 xl:hidden'>
                     <Button
-                      theme='primary'
-                      type='submit'
-                      disabled={isLoading}
+                      theme='tertiary'
+                      size='sm'
+                      {...(features.nostrSignup ? { onClick: handleNostrLogin } : { to: '/login' })}
                     >
-                      {intl.formatMessage(messages.login)}
-                    </Button>
-                  </Form>
-                )}
-
-                <div className='space-x-1.5 xl:hidden'>
-                  <Button
-                    theme='tertiary'
-                    size='sm'
-                    {...(features.nostrSignup ? { onClick: handleNostrLogin } : { to: '/login' })}
-                  >
-                    <FormattedMessage id='account.login' defaultMessage='Log in' />
-                  </Button>
-
-                  {(isOpen) && (
-                    <Button theme='primary' to='/signup' size='sm'>
-                      <FormattedMessage id='account.register' defaultMessage='Sign up' />
+                      <FormattedMessage id='account.login' defaultMessage='Log in' />
                     </Button>
-                  )}
-                </div>
-              </>
-            )}
-          </HStack>
+
+                    {(isOpen) && (
+                      <Button theme='primary' to='/signup' size='sm'>
+                        <FormattedMessage id='account.register' defaultMessage='Sign up' />
+                      </Button>
+                    )}
+                  </div>
+                </>
+              )}
+            </HStack>
+          )}
         </div>
       </div>
     </nav>