nicolium: Start improving 'Not found' messages

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

packages/nicolium/src/columns/trends.tsx

@@ -68,17 +68,19 @@ const TrendsColumn: React.FC<ITrendsColumn> = ({ type, multiColumn }) => {
         children = [
           <EmptyMessage
             key='key-is-required'
+            icon={false}
+            heading={
+              <FormattedMessage
+                id='trends.no_accounts.heading'
+                defaultMessage='No suggested accounts'
+              />
+            }
             text={
               <div className='flex flex-col items-center gap-4'>
-                <FormattedMessage
-                  id='trends.no_accounts.first_line'
-                  defaultMessage='No suggested accounts found.'
-                />
-                <br />
                 {features.profileDirectory ? (
                   <>
                     <FormattedMessage
-                      id='trends.no_accounts.second_line'
+                      id='trends.no_accounts'
                       defaultMessage='Try entering a search query or browsing the profile directory to find accounts to follow.'
                     />
                     <Button to='/directory' theme='muted'>
@@ -87,7 +89,7 @@ const TrendsColumn: React.FC<ITrendsColumn> = ({ type, multiColumn }) => {
                   </>
                 ) : (
                   <FormattedMessage
-                    id='trends.no_accounts.second_line.no_directory'
+                    id='trends.no_accounts.no_directory'
                     defaultMessage='Try entering a search query to find accounts to follow.'
                   />
                 )}

packages/nicolium/src/components/empty-message.tsx

@@ -3,17 +3,20 @@ import React from 'react';
 import Icon from './ui/icon';
 
 interface IEmptyMessage {
+  heading?: React.ReactNode;
   text: React.ReactNode;
-  icon?: string;
+  icon?: string | false;
 }
 
 const EmptyMessage: React.FC<IEmptyMessage> = ({
+  heading,
   text,
   icon = require('@phosphor-icons/core/regular/empty.svg'),
 }) => (
   <div className='⁂-empty-message'>
-    <Icon src={icon} aria-hidden />
+    {icon !== false && <Icon src={icon} aria-hidden />}
 
+    {heading && <h2>{heading}</h2>}
     <p>{text}</p>
   </div>
 );

packages/nicolium/src/locales/en.json

@@ -1364,6 +1364,9 @@
   "lightbox.zoom_out": "Zoom to fit",
   "link_preview.more_from_author": "From {name}",
   "list.click_to_add": "Click here to add people",
+  "list.not_found": "It might have been deleted or you don't have permission to view it. Make sure you're viewing it from the correct account.",
+  "list.not_found.button": "Back to lists",
+  "list.not_found_heading": "List not found",
   "list_adder.header_title": "Add or remove from lists",
   "lists.account.add": "Add to list",
   "lists.account.remove": "Remove from list",
@@ -2015,9 +2018,9 @@
   "timeline.gap.load_recent": "Load recent posts",
   "toast.view": "View",
   "trends.count_by_accounts": "{count} {rawCount, plural, one {person} other {people}} talking",
-  "trends.no_accounts.first_line": "No suggested accounts found.",
-  "trends.no_accounts.second_line": "Try entering a search query or browsing the profile directory to find accounts to follow.",
-  "trends.no_accounts.second_line.no_directory": "Try entering a search query to find accounts to follow.",
+  "trends.no_accounts": "Try entering a search query or browsing the profile directory to find accounts to follow.",
+  "trends.no_accounts.heading": "No suggested accounts",
+  "trends.no_accounts.no_directory": "Try entering a search query to find accounts to follow.",
   "trends.title": "Trends",
   "trends_panel.view_all": "View all",
   "unauthorized_modal.text": "You need to be logged in to do that.",

packages/nicolium/src/pages/timelines/list-timeline.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { ListTimelineColumn } from '@/columns/timeline';
 import DropdownMenu from '@/components/dropdown-menu';
-import MissingIndicator from '@/components/missing-indicator';
+import { EmptyMessage } from '@/components/empty-message';
 import Button from '@/components/ui/button';
 import Column from '@/components/ui/column';
 import Spinner from '@/components/ui/spinner';
@@ -21,6 +21,7 @@ const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' },
   editList: { id: 'lists.edit', defaultMessage: 'Edit list' },
   deleteList: { id: 'lists.delete', defaultMessage: 'Delete list' },
+  notFound: { id: 'list.not_found', defaultMessage: 'List not found' },
 });
 
 const ListTimelinePage: React.FC = () => {
@@ -65,7 +66,24 @@ const ListTimelinePage: React.FC = () => {
       </Column>
     );
   } else if (!list) {
-    return <MissingIndicator />;
+    return (
+      <Column label={intl.formatMessage(messages.notFound)}>
+        <EmptyMessage
+          heading={<FormattedMessage id='list.not_found_heading' defaultMessage='List not found' />}
+          text={
+            <div className='flex flex-col items-center gap-4'>
+              <FormattedMessage
+                id='list.not_found'
+                defaultMessage="It might have been deleted or you don't have permission to view it. Make sure you're viewing it from the correct account."
+              />
+              <Button to='/lists' theme='muted'>
+                <FormattedMessage id='list.not_found.button' defaultMessage='Back to lists' />
+              </Button>
+            </div>
+          }
+        />
+      </Column>
+    );
   }
 
   const items = [
@@ -100,7 +118,6 @@ const ListTimelinePage: React.FC = () => {
               defaultMessage='There is nothing in this list yet. When members of this list create new posts, they will appear here.'
             />
             <br />
-            <br />
             <Button onClick={handleEditClick}>
               <FormattedMessage id='list.click_to_add' defaultMessage='Click here to add people' />
             </Button>

packages/nicolium/src/styles/new/components.scss

@@ -858,6 +858,8 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
   align-items: center;
   justify-content: center;
 
+  max-width: 32rem;
+  margin: 0 auto;
   padding: 1.5rem 0;
 
   > div {
@@ -876,6 +878,12 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
     }
   }
 
+  h2 {
+    @include mixins.text($size: lg, $weight: bold, $align: center);
+
+    margin-bottom: -0.5rem;
+  }
+
   p {
     @include mixins.text($align: center, $theme: muted);
   }