feat: theming and extensibility improvements (#3876)

* feat: make page structure customizable across different pages (#3867)

* feat: create `PageStructure` component
* feat: apply to `DiscussionPage`
* feat: apply to `UserPage`
* feat: apply to `TagsPage`
* fix: adapt subscriptions ext
* chore: cleanup

* chore: use grid & flexbox for the discussion list item (#3868)

* chore: rename `DiscussionPage-list` to `DiscussionListPane`
* chore: itemlistify `DiscussionListItem`
* chore: use flex and grid for `DiscussionListItem`

* chore: use flexbox for `App-header` (#3869)

* chore: use flex and grid for `App-header`
* chore: drop search floats
* fix: adapt admin styles

* chore: use flexbox in dropdowns and SplitDropdown for subscriptions (#3874)

* chore: flexbox dropdown menu items
* chore: normalize subscriptions menu (use slit dropdown)
* chore: cleanup

* chore: misc flexbox/grid changes (#3875)

* chore: `TagsPage` to tsx
* chore: `TagsPage` flexbox/grid
* chore: `IndexPage-toolbar` flexbox
* chore: `UserCard` flexbox & itemlists
* fix: `Post` improve spacing logic
* chore: `Post` grid and proper spacing
* fix: avatar editor hover layer layout
* chore: `Button` flex

* chore: normalize form semantics (#3877)

* chore: normalize fieldsets
* fix: `LinkButton` spacing
* chore: consistent form semantics

* fix: styling regressions (#3878)

* fix: post spacing goes off in other pages
* fix: regression

* feat: extract reusable components from `NotificationsDropdown` (#3879)

* feat: extensible global notices (#3880)

* fix: js error on null item list
* feat: extensible global notices

* chore: housekeeping (#3881)

* chore: use CSS variables where still not using
* chore: cleanup suspension modal
* chore: cleanup post flag
* fix: badge vertical align
* chore: use CSS variables for custom coloring
* chore: `icon` helper to `Icon` component
* chore: `avatar` helper to `Avatar` component
* fix: chunk loading fails on admin frontend
* chore: format

* feat: reusable `UploadImageButton` component (#3882)

* chore: convert `UploadImageButton` to tsx
* feat: reusable `UploadImageButton` component
* feat: add `image-upload` setting type

* feat: extensible default footer component (#3883)

* chore: yarn format

extensions/mentions/js/src/forum/addMentionedByList.js

@@ -5,7 +5,7 @@ import Link from 'flarum/common/components/Link';
 import PostPreview from 'flarum/forum/components/PostPreview';
 import punctuateSeries from 'flarum/common/helpers/punctuateSeries';
 import username from 'flarum/common/helpers/username';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 import Button from 'flarum/common/components/Button';
 import MentionedByModal from './components/MentionedByModal';
 
@@ -54,7 +54,9 @@ export default function addMentionedByList() {
                   }}
                 >
                   <span className="PostPreview-content">
-                    <span className="PostPreview-badge Avatar">{icon('fas fa-reply-all')}</span>
+                    <span className="PostPreview-badge Avatar">
+                      <Icon name={'fas fa-reply-all'} />
+                    </span>
                     <span>
                       {app.translator.trans('flarum-mentions.forum.post.mentioned_by_more_text', { count: post.mentionedByCount() - replies.length })}
                     </span>
@@ -145,7 +147,7 @@ export default function addMentionedByList() {
         'replies',
         <div className="Post-mentionedBy">
           <span className="Post-mentionedBy-summary">
-            {icon('fas fa-reply')}
+            <Icon name={'fas fa-reply'} />
             {app.translator.trans(`flarum-mentions.forum.post.mentioned_by${repliers[0].user() === app.session.user ? '_self' : ''}_text`, {
               count: names.length,
               users: punctuateSeries(names),

extensions/mentions/js/src/forum/components/MentionedByModal.tsx

@@ -6,6 +6,7 @@ import type Post from 'flarum/common/models/Post';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import Button from 'flarum/common/components/Button';
 import MentionedByModalState from '../state/MentionedByModalState';
+import Form from 'flarum/common/components/Form';
 
 export interface IMentionedByModalAttrs extends IInternalModalAttrs {
   post: Post;
@@ -58,13 +59,13 @@ export default class MentionedByModal<CustomAttrs extends IMentionedByModalAttrs
         </div>
         {this.state.hasNext() && (
           <div className="Modal-footer">
-            <div className="Form Form--centered">
+            <Form className="Form--centered">
               <div className="Form-group">
                 <Button className="Button Button--block" onclick={() => this.state.loadNext()} loading={this.state.isLoadingNext()}>
                   {app.translator.trans('flarum-mentions.forum.mentioned_by.load_more_button')}
                 </Button>
               </div>
-            </div>
+            </Form>
           </div>
         )}
       </>

extensions/mentions/js/src/forum/fragments/PostQuoteButton.js

@@ -1,6 +1,6 @@
 import app from 'flarum/forum/app';
 import Fragment from 'flarum/common/Fragment';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 
 import reply from '../utils/reply';
 
@@ -19,7 +19,7 @@ export default class PostQuoteButton extends Fragment {
           reply(this.post, this.content);
         }}
       >
-        {icon('fas fa-quote-left', { className: 'Button-icon' })}
+        <Icon name="fas fa-quote-left" className="Button-icon" />
         {app.translator.trans('flarum-mentions.forum.post.quote_button')}
       </button>
     );

extensions/mentions/js/src/forum/mentionables/PostMention.tsx

@@ -3,7 +3,7 @@ import MentionableModel from './MentionableModel';
 import type Post from 'flarum/common/models/Post';
 import type Mithril from 'mithril';
 import usernameHelper from 'flarum/common/helpers/username';
-import avatar from 'flarum/common/helpers/avatar';
+import Avatar from 'flarum/common/components/Avatar';
 import highlight from 'flarum/common/helpers/highlight';
 import { truncate } from 'flarum/common/utils/string';
 import getCleanDisplayName from '../utils/getCleanDisplayName';
@@ -63,7 +63,7 @@ export default class PostMention extends MentionableModel<Post, AtMentionFormat>
 
     return (
       <>
-        {avatar(user)}
+        <Avatar user={user} />
         {username}
         {[
           app.translator.trans('flarum-mentions.forum.composer.reply_to_post_text', { number: model.number() }),

extensions/mentions/js/src/forum/mentionables/UserMention.tsx

@@ -2,7 +2,7 @@ import app from 'flarum/forum/app';
 import type Mithril from 'mithril';
 import type User from 'flarum/common/models/User';
 import usernameHelper from 'flarum/common/helpers/username';
-import avatar from 'flarum/common/helpers/avatar';
+import Avatar from 'flarum/common/components/Avatar';
 import highlight from 'flarum/common/helpers/highlight';
 import MentionableModel from './MentionableModel';
 import getCleanDisplayName, { shouldUseOldFormat } from '../utils/getCleanDisplayName';
@@ -46,7 +46,7 @@ export default class UserMention extends MentionableModel<User, AtMentionFormat>
 
     return (
       <>
-        {avatar(model)}
+        <Avatar user={model} />
         {username}
       </>
     );