feat: theming and extensibility improvements

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();
+      });
+  }
+}