From 25defe06916ba60c7527e7c4bc3fbb47c73a9073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 12 Sep 2024 19:30:35 +0200
Subject: [PATCH] Display logo if set
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 packages/pl-fe/src/components/sidebar-navigation.tsx       | 7 ++++++-
 packages/pl-fe/src/components/site-error-boundary.tsx      | 2 +-
 packages/pl-fe/src/components/site-logo.tsx                | 7 +++++++
 .../pl-fe/src/features/developers/developers-challenge.tsx | 4 ++--
 packages/pl-fe/src/locales/en.json                         | 1 +
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx
index 34e9143d1..eb5306b71 100644
--- a/packages/pl-fe/src/components/sidebar-navigation.tsx
+++ b/packages/pl-fe/src/components/sidebar-navigation.tsx
@@ -6,11 +6,12 @@ import { useStatContext } from 'pl-fe/contexts/stat-context';
 import Search from 'pl-fe/features/search/components/search';
 import ComposeButton from 'pl-fe/features/ui/components/compose-button';
 import ProfileDropdown from 'pl-fe/features/ui/components/profile-dropdown';
-import { useAppSelector, useFeatures, useOwnAccount, useSettings, useInstance, useRegistrationStatus } from 'pl-fe/hooks';
+import { useAppSelector, useFeatures, useOwnAccount, useSettings, useInstance, useRegistrationStatus, useLogo } from 'pl-fe/hooks';
 
 import Account from './account';
 import DropdownMenu, { Menu } from './dropdown-menu';
 import SidebarNavigationLink from './sidebar-navigation-link';
+import SiteLogo from './site-logo';
 
 const messages = defineMessages({
   followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
@@ -35,6 +36,7 @@ const SidebarNavigation = () => {
   const { isDeveloper } = useSettings();
   const { account } = useOwnAccount();
   const { isOpen } = useRegistrationStatus();
+  const logoSrc = useLogo();
 
   const notificationCount = useAppSelector((state) => state.notifications.unread);
   const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
@@ -139,6 +141,9 @@ const SidebarNavigation = () => {
 
   return (
     <Stack space={4}>
+      {logoSrc && (
+        <SiteLogo className='h-12 w-auto cursor-pointer' />
+      )}
 
       {account && (
         <Stack space={4}>
diff --git a/packages/pl-fe/src/components/site-error-boundary.tsx b/packages/pl-fe/src/components/site-error-boundary.tsx
index 4ddff6be0..37fe20d3a 100644
--- a/packages/pl-fe/src/components/site-error-boundary.tsx
+++ b/packages/pl-fe/src/components/site-error-boundary.tsx
@@ -80,7 +80,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
         {logoSrc && (
           <div className='flex shrink-0 justify-center'>
             <a href='/' className='inline-flex'>
-              <SiteLogo alt='Logo' className='h-12 w-auto cursor-pointer' />
+              <SiteLogo className='h-12 w-auto cursor-pointer' />
             </a>
           </div>
         )}
diff --git a/packages/pl-fe/src/components/site-logo.tsx b/packages/pl-fe/src/components/site-logo.tsx
index fc4ce4485..14109eb03 100644
--- a/packages/pl-fe/src/components/site-logo.tsx
+++ b/packages/pl-fe/src/components/site-logo.tsx
@@ -1,8 +1,13 @@
 import clsx from 'clsx';
 import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { useLogo } from 'pl-fe/hooks';
 
+const messages = defineMessages({
+  logo: { id: 'generic.logo', defaultMessage: 'Logo' },
+});
+
 interface ISiteLogo extends React.ComponentProps<'img'> {
   /** Extra class names for the <img> element. */
   className?: string;
@@ -12,6 +17,7 @@ interface ISiteLogo extends React.ComponentProps<'img'> {
 
 /** Display the most appropriate site logo based on the theme and configuration. */
 const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
+  const intl = useIntl();
   const logoSrc = useLogo();
 
   if (!logoSrc) return null;
@@ -19,6 +25,7 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   return (
     // eslint-disable-next-line jsx-a11y/alt-text
     <img
+      alt={intl.formatMessage(messages.logo)}
       className={clsx('object-contain', className)}
       src={logoSrc}
       {...rest}
diff --git a/packages/pl-fe/src/features/developers/developers-challenge.tsx b/packages/pl-fe/src/features/developers/developers-challenge.tsx
index 6ab1b1011..8c1f53eb6 100644
--- a/packages/pl-fe/src/features/developers/developers-challenge.tsx
+++ b/packages/pl-fe/src/features/developers/developers-challenge.tsx
@@ -25,7 +25,7 @@ const DevelopersChallenge = () => {
   };
 
   const handleSubmit = () => {
-    if (answer === 'boxsoap') {
+    if (answer === 'fe-pl') {
       dispatch(changeSettingImmediate(['isDeveloper'], true));
       toast.success(intl.formatMessage(messages.success));
     } else {
@@ -34,7 +34,7 @@ const DevelopersChallenge = () => {
   };
 
   const challenge = `function plFe() {
-  return 'soap|box'.split('|').reverse().join('');
+  return 'pl-fe'.split('-').reverse().join('-');
 }`;
 
   return (
diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json
index 8eaa31210..1b00fb81f 100644
--- a/packages/pl-fe/src/locales/en.json
+++ b/packages/pl-fe/src/locales/en.json
@@ -816,6 +816,7 @@
   "gdpr.learn_more": "Learn more",
   "gdpr.message": "{siteTitle} uses session cookies, which are essential to the website's functioning.",
   "gdpr.title": "{siteTitle} uses cookies",
+  "generic.logo": "Logo",
   "generic.saved": "Saved",
   "getting_started.open_source_notice": "{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).",
   "group.cancel_request": "Cancel request",