feat: search UI/UX revamp (#3941)

* feat: first iteration

* chore: tweak

* feat: second iteration

* chore: incorrect code organization

* feat: gambit input suggestions

* feat: gambit keyboard navigation

* chore: bugs

* feat: negative gambits

* feat: improve gambit highlighting

* refactor: localize gambits

* feat: negative and positive gambit buttons

* fix: permissions

* chore: wat

* per: lazy load search modal

* fix: extensibility and bug fixes

* fix: bugs

* feat: reusable autocomplete dropdown

* chore: format

* fix: tag filter

extensions/suspend/extend.php

@@ -8,6 +8,7 @@
  */
 
 use Flarum\Api\Serializer\BasicUserSerializer;
+use Flarum\Api\Serializer\ForumSerializer;
 use Flarum\Api\Serializer\UserSerializer;
 use Flarum\Extend;
 use Flarum\Search\Database\DatabaseSearchDriver;
@@ -41,6 +42,11 @@ return [
     (new Extend\ApiSerializer(UserSerializer::class))
         ->attributes(AddUserSuspendAttributes::class),
 
+    (new Extend\ApiSerializer(ForumSerializer::class))
+        ->attribute('canSuspendUsers', function (ForumSerializer $serializer) {
+            return $serializer->getActor()->hasPermission('user.suspend');
+        }),
+
     new Extend\Locales(__DIR__.'/locale'),
 
     (new Extend\Notification())

extensions/suspend/js/src/@types/shims.d.ts

@@ -0,0 +1,7 @@
+import 'flarum/common/models/User';
+
+declare module 'flarum/common/models/User' {
+  export default interface User {
+    canSuspend: () => boolean;
+  }
+}

extensions/suspend/js/src/common/extend.ts

@@ -1,7 +1,12 @@
 import Extend from 'flarum/common/extenders';
 import SuspendedGambit from './query/users/SuspendedGambit';
+import User from 'flarum/common/models/User';
 
+// prettier-ignore
 export default [
-  new Extend.Search() //
+  new Extend.Search()
     .gambit('users', SuspendedGambit),
+
+  new Extend.Model(User)
+    .attribute<boolean>('canSuspend'),
 ];

extensions/suspend/js/src/common/query/users/SuspendedGambit.ts

@@ -1,23 +1,16 @@
-import IGambit from 'flarum/common/query/IGambit';
+import app from 'flarum/common/app';
+import { BooleanGambit } from 'flarum/common/query/IGambit';
 
-export default class SuspendedGambit implements IGambit {
-  pattern(): string {
-    return 'is:suspended';
-  }
-
-  toFilter(_matches: string[], negate: boolean): Record<string, any> {
-    const key = (negate ? '-' : '') + 'suspended';
-
-    return {
-      [key]: true,
-    };
+export default class SuspendedGambit extends BooleanGambit {
+  key(): string {
+    return app.translator.trans('flarum-suspend.lib.gambits.users.suspended.key', {}, true);
   }
 
   filterKey(): string {
     return 'suspended';
   }
 
-  fromFilter(value: string, negate: boolean): string {
-    return `${negate ? '-' : ''}is:suspended`;
+  enabled(): boolean {
+    return !!app.session.user && app.forum.attribute<boolean>('canSuspendUsers');
   }
 }

extensions/suspend/js/src/forum/extend.ts

@@ -8,7 +8,6 @@ export default [
   ...commonExtend,
 
   new Extend.Model(User)
-    .attribute<boolean>('canSuspend')
     .attribute<Date | null | undefined, string | null | undefined>('suspendedUntil', Model.transformDate)
     .attribute<string | null | undefined>('suspendReason')
     .attribute<string | null | undefined>('suspendMessage'),

extensions/suspend/locale/en.yml

@@ -71,3 +71,12 @@ flarum-suspend:
           {forum_url}
       html:
         body: "You have been unsuspended. You can head back to [{forumTitle}]({forum_url}) when you are ready."
+
+  # Translations in this namespace are used by the forum and admin interfaces.
+  lib:
+
+    # These translations are used by gambits. Gambit keys must be in snake_case, no spaces.
+    gambits:
+      users:
+        suspended:
+          key: suspended