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/suspend/js/src/forum/components/SuspendUserModal.js

@@ -6,6 +6,8 @@ import withAttr from 'flarum/common/utils/withAttr';
 import ItemList from 'flarum/common/utils/ItemList';
 
 import { getPermanentSuspensionDate } from '../helpers/suspensionHelper';
+import Form from '@flarum/core/src/common/components/Form';
+import FieldSet from '@flarum/core/src/common/components/FieldSet';
 
 export default class SuspendUserModal extends Modal {
   oninit(vnode) {
@@ -40,18 +42,15 @@ export default class SuspendUserModal extends Modal {
   content() {
     return (
       <div className="Modal-body">
-        <div className="Form">
-          <div className="Form-group">
-            <label>{app.translator.trans('flarum-suspend.forum.suspend_user.status_heading')}</label>
-            <div>{this.formItems().toArray()}</div>
-          </div>
+        <Form>
+          {this.formItems().toArray()}
 
-          <div className="Form-group">
+          <div className="Form-group Form-controls">
             <Button className="Button Button--primary" loading={this.loading} type="submit">
               {app.translator.trans('flarum-suspend.forum.suspend_user.submit_button')}
             </Button>
           </div>
-        </div>
+        </Form>
       </div>
     );
   }
@@ -109,20 +108,22 @@ export default class SuspendUserModal extends Modal {
   formItems() {
     const items = new ItemList();
 
-    items.add('radioItems', <div className="Form-group">{this.radioItems().toArray()}</div>, 100);
+    items.add(
+      'radioItems',
+      <FieldSet label={app.translator.trans('flarum-suspend.forum.suspend_user.status_heading')}>{this.radioItems().toArray()}</FieldSet>,
+      100
+    );
 
     items.add(
       'reason',
       <div className="Form-group">
-        <label>
-          {app.translator.trans('flarum-suspend.forum.suspend_user.reason')}
-          <textarea
-            className="FormControl"
-            bidi={this.reason}
-            placeholder={app.translator.trans('flarum-suspend.forum.suspend_user.placeholder_optional')}
-            rows="2"
-          />
-        </label>
+        <label>{app.translator.trans('flarum-suspend.forum.suspend_user.reason')}</label>
+        <textarea
+          className="FormControl"
+          bidi={this.reason}
+          placeholder={app.translator.trans('flarum-suspend.forum.suspend_user.placeholder_optional')}
+          rows="4"
+        />
       </div>,
       90
     );
@@ -130,15 +131,13 @@ export default class SuspendUserModal extends Modal {
     items.add(
       'message',
       <div className="Form-group">
-        <label>
-          {app.translator.trans('flarum-suspend.forum.suspend_user.display_message')}
-          <textarea
-            className="FormControl"
-            bidi={this.message}
-            placeholder={app.translator.trans('flarum-suspend.forum.suspend_user.placeholder_optional')}
-            rows="2"
-          />
-        </label>
+        <label>{app.translator.trans('flarum-suspend.forum.suspend_user.display_message')}</label>
+        <textarea
+          className="FormControl"
+          bidi={this.message}
+          placeholder={app.translator.trans('flarum-suspend.forum.suspend_user.placeholder_optional')}
+          rows="4"
+        />
       </div>,
       80
     );

extensions/suspend/js/src/forum/components/SuspensionInfoModal.js

@@ -3,6 +3,7 @@ import Modal from 'flarum/common/components/Modal';
 import Button from 'flarum/common/components/Button';
 import fullTime from 'flarum/common/helpers/fullTime';
 import { isPermanentSuspensionDate, localStorageKey } from '../helpers/suspensionHelper';
+import Form from '@flarum/core/src/common/components/Form';
 
 export default class SuspensionInfoModal extends Modal {
   oninit(vnode) {
@@ -27,16 +28,16 @@ export default class SuspensionInfoModal extends Modal {
 
     return (
       <div className="Modal-body">
-        <div className="Form Form--centered">
+        <Form className="Form--centered">
           <p className="helpText">{this.message}</p>
           <p className="helpText">{timespan}</p>
 
-          <div className="Form-group">
+          <div className="Form-group Form-controls">
             <Button className="Button Button--primary Button--block" onclick={this.hide.bind(this)}>
               {app.translator.trans('flarum-suspend.forum.suspension_info.dismiss_button')}
             </Button>
           </div>
-        </div>
+        </Form>
       </div>
     );
   }

extensions/suspend/js/src/forum/components/UserSuspendedNotification.js

@@ -23,4 +23,8 @@ export default class UserSuspendedNotification extends Notification {
           timeReadable,
         });
   }
+
+  excerpt() {
+    return null;
+  }
 }

extensions/suspend/js/src/forum/components/UserUnsuspendedNotification.js

@@ -15,4 +15,8 @@ export default class UserUnsuspendedNotification extends Notification {
 
     return app.translator.trans('flarum-suspend.forum.notifications.user_unsuspended_text');
   }
+
+  excerpt() {
+    return null;
+  }
 }