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/embed/less/forum.less

@@ -50,7 +50,7 @@
       padding: 15px 15px;
 
       .scrolled & {
-        .box-shadow(0 2px 6px @shadow-color);
+        .box-shadow(0 2px 6px var(--shadow-color));
       }
     }
 
@@ -69,7 +69,7 @@
         margin: 0;
 
         &, a {
-          color: @muted-color;
+          color: var(--muted-color);
         }
       }
     }

extensions/emoji/less/forum.less

@@ -12,7 +12,7 @@ img.emoji {
   margin: 5px 0 !important;
 
   > li > button {
-    color: @text-color;
+    color: var(--text-color);
     font-weight: bold;
     padding-top: 6px;
     padding-bottom: 6px;
@@ -25,7 +25,7 @@ img.emoji {
   }
 
   .Dropdown-header {
-    color: @muted-more-color;
+    color: var(--muted-more-color);
     text-transform: none;
     font-weight: normal;
     padding-bottom: 5px;

extensions/flags/js/src/forum/addFlagsToPosts.js

@@ -1,4 +1,4 @@
-import { extend } from 'flarum/common/extend';
+import { extend, override } from 'flarum/common/extend';
 import app from 'flarum/forum/app';
 import Post from 'flarum/forum/components/Post';
 import Button from 'flarum/common/components/Button';
@@ -75,15 +75,15 @@ export default function () {
     return items;
   };
 
-  extend(Post.prototype, 'content', function (vdom) {
+  override(Post.prototype, 'header', function (vdom) {
     const post = this.attrs.post;
     const flags = post.flags();
 
     if (!flags.length) return;
 
     if (post.isHidden()) this.revealContent = true;
 
-    vdom.unshift(
+    return (
       <div className="Post-flagged">
         <div className="Post-flagged-flags">
           {flags.map((flag) => (

extensions/flags/js/src/forum/components/FlagList.tsx

@@ -0,0 +1,64 @@
+import app from 'flarum/forum/app';
+import Component from 'flarum/common/Component';
+import type { ComponentAttrs } from 'flarum/common/Component';
+import Avatar from 'flarum/common/components/Avatar';
+import username from 'flarum/common/helpers/username';
+import HeaderList from 'flarum/forum/components/HeaderList';
+import HeaderListItem from 'flarum/forum/components/HeaderListItem';
+import type Mithril from 'mithril';
+import type Post from 'flarum/common/models/Post';
+import type FlagListState from '../states/FlagListState';
+
+export interface IFlagListAttrs extends ComponentAttrs {
+  state: FlagListState;
+}
+
+export default class FlagList<CustomAttrs extends IFlagListAttrs = IFlagListAttrs> extends Component<CustomAttrs, FlagListState> {
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
+    super.oninit(vnode);
+    this.state = this.attrs.state;
+  }
+
+  view() {
+    const flags = this.state.cache || [];
+
+    return (
+      <HeaderList
+        className="FlagList"
+        title={app.translator.trans('flarum-flags.forum.flagged_posts.title')}
+        hasItems={flags.length}
+        loading={this.state.loading}
+        emptyText={app.translator.trans('flarum-flags.forum.flagged_posts.empty_text')}
+      >
+        <ul className="HeaderListGroup-content">
+          {!this.state.loading &&
+            flags.map((flag) => {
+              const post = flag.post() as Post;
+
+              return (
+                <li>
+                  <HeaderListItem
+                    className="Flag"
+                    avatar={<Avatar user={post.user() || null} />}
+                    icon="fas fa-flag"
+                    content={app.translator.trans('flarum-flags.forum.flagged_posts.item_text', {
+                      username: username(post.user()),
+                      em: <em />,
+                      discussion: post.discussion().title(),
+                    })}
+                    excerpt={post.contentPlain()}
+                    datetime={flag.createdAt()}
+                    href={app.route.post(post)}
+                    onclick={(e: MouseEvent) => {
+                      app.flags.index = post;
+                      e.redraw = false;
+                    }}
+                  />
+                </li>
+              );
+            })}
+        </ul>
+      </HeaderList>
+    );
+  }
+}

extensions/flags/js/src/forum/components/FlagPostModal.js

@@ -1,5 +1,6 @@
 import app from 'flarum/forum/app';
 import Modal from 'flarum/common/components/Modal';
+import Form from 'flarum/common/components/Form';
 import Button from 'flarum/common/components/Button';
 
 import Stream from 'flarum/common/utils/Stream';
@@ -28,31 +29,31 @@ export default class FlagPostModal extends Modal {
     if (this.success) {
       return (
         <div className="Modal-body">
-          <div className="Form Form--centered">
+          <Form className="Form--centered">
             <p className="helpText">{app.translator.trans('flarum-flags.forum.flag_post.confirmation_message')}</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-flags.forum.flag_post.dismiss_button')}
               </Button>
             </div>
-          </div>
+          </Form>
         </div>
       );
     }
 
     return (
       <div className="Modal-body">
-        <div className="Form Form--centered">
+        <Form className="Form--centered">
           <div className="Form-group">
             <div>{this.flagReasons().toArray()}</div>
           </div>
 
-          <div className="Form-group">
+          <div className="Form-group Form-controls">
             <Button className="Button Button--primary Button--block" type="submit" loading={this.loading} disabled={!this.reason()}>
               {app.translator.trans('flarum-flags.forum.flag_post.submit_button')}
             </Button>
           </div>
-        </div>
+        </Form>
       </div>
     );
   }

extensions/flags/js/src/forum/components/FlagsDropdown.tsx

@@ -0,0 +1,34 @@
+import app from 'flarum/forum/app';
+import HeaderDropdown from 'flarum/forum/components/HeaderDropdown';
+import type { IHeaderDropdownAttrs } from 'flarum/forum/components/HeaderDropdown';
+import classList from 'flarum/common/utils/classList';
+
+import FlagList from './FlagList';
+
+export interface IFlagsDropdownAttrs extends IHeaderDropdownAttrs {}
+
+export default class FlagsDropdown<CustomAttrs extends IFlagsDropdownAttrs = IFlagsDropdownAttrs> extends HeaderDropdown<CustomAttrs> {
+  static initAttrs(attrs: IFlagsDropdownAttrs) {
+    attrs.className = classList('FlagsDropdown', attrs.className);
+    attrs.label = attrs.label || app.translator.trans('flarum-flags.forum.flagged_posts.tooltip');
+    attrs.icon = attrs.icon || 'fas fa-flag';
+
+    super.initAttrs(attrs);
+  }
+
+  getContent() {
+    return <FlagList state={this.attrs.state} />;
+  }
+
+  goToRoute() {
+    m.route.set(app.route('flags'));
+  }
+
+  getUnreadCount() {
+    return app.flags.cache ? app.flags.cache.length : app.forum.attribute<number>('flagCount');
+  }
+
+  getNewCount() {
+    return app.session.user!.attribute<number>('newFlagCount');
+  }
+}

extensions/flags/js/src/forum/states/FlagListState.tsx

@@ -0,0 +1,39 @@
+import type ForumApplication from 'flarum/forum/ForumApplication';
+import type Flag from '../models/Flag';
+import type Post from 'flarum/common/models/Post';
+
+export default class FlagListState {
+  public app: ForumApplication;
+  public loading = false;
+  public cache: Flag[] | null = null;
+  public index: Post | false | null = null;
+
+  constructor(app: ForumApplication) {
+    this.app = app;
+  }
+
+  /**
+   * Load flags into the application's cache if they haven't already
+   * been loaded.
+   */
+  load() {
+    if (this.cache && !this.app.session.user!.attribute<number>('newFlagCount')) {
+      return;
+    }
+
+    this.loading = true;
+    m.redraw();
+
+    this.app.store
+      .find<Flag[]>('flags')
+      .then((flags) => {
+        this.app.session.user!.pushAttributes({ newFlagCount: 0 });
+        this.cache = flags.sort((a, b) => b.createdAt()!.getTime() - a.createdAt()!.getTime());
+      })
+      .catch(() => {})
+      .then(() => {
+        this.loading = false;
+        m.redraw();
+      });
+  }
+}