From 8d874438fbcfb0e7fc86164e15db57bd4d8a3833 Mon Sep 17 00:00:00 2001
From: ilestis <jay.payne.ch@gmail.com>
Date: Fri, 24 May 2024 12:29:19 -0600
Subject: [PATCH] New abilities subpage

---
 .../Entity/Abilities/ApiController.php        |   2 +-
 app/Services/Abilities/AbilityService.php     | 112 ++++++----
 lang/en/entities/abilities.php                |   9 +
 .../js/components/abilities/Abilities.vue     |  79 ++-----
 resources/js/components/abilities/Ability.vue | 202 ++++++++++++------
 resources/js/components/abilities/Parent.vue  |  54 +++--
 resources/sass/abilities.scss                 |  61 ------
 resources/sass/colour.scss                    |   4 +
 resources/sass/theming.scss                   |   4 +
 .../views/campaigns/modules/box.blade.php     |   4 +-
 10 files changed, 285 insertions(+), 246 deletions(-)

diff --git a/app/Http/Controllers/Entity/Abilities/ApiController.php b/app/Http/Controllers/Entity/Abilities/ApiController.php
index 42785341f7..660a06bf37 100644
--- a/app/Http/Controllers/Entity/Abilities/ApiController.php
+++ b/app/Http/Controllers/Entity/Abilities/ApiController.php
@@ -22,7 +22,7 @@ public function index(Campaign $campaign, Entity $entity)
             'data' => $this->service
                 ->campaign($campaign)
                 ->entity($entity)
-                ->abilities()
+                ->get()
         ]);
     }
 }
diff --git a/app/Services/Abilities/AbilityService.php b/app/Services/Abilities/AbilityService.php
index 82180fd3c3..32b9acb392 100644
--- a/app/Services/Abilities/AbilityService.php
+++ b/app/Services/Abilities/AbilityService.php
@@ -7,8 +7,11 @@
 use App\Models\Attribute;
 use App\Models\Entity;
 use App\Models\EntityAbility;
+use App\Models\Tag;
 use App\Traits\CampaignAware;
 use App\Traits\EntityAware;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Str;
 
 class AbilityService extends BaseAbilityService
 {
@@ -17,25 +20,27 @@ class AbilityService extends BaseAbilityService
 
     /** @var array All the abilities of this entity, nicely prepared */
     protected array $abilities = [
-        'parents' => [],
-        'abilities' => [],
-        'meta' => []
+        'groups' => [],
+        'meta' => [],
     ];
 
     /** @var array A list of abilities that have already been loaded */
     protected array $abilityIds = [];
 
+    protected array $groups = [];
+
     /**
+     * Build a list of entities grouped by their parent
      */
-    public function abilities(): array
+    public function get(): array
     {
         $abilities = $this->entity->abilities()
             ->select('entity_abilities.*')
             ->with(['ability',
                 // entity
-                'ability.entity', 'ability.entity.image', 'ability.entity.attributes',
+                'ability.entity', 'ability.entity.image', 'ability.entity.attributes', 'ability.entity.attributes.entity',
                 // parent
-                'ability.ability', 'ability.ability.entity', 'ability.ability.entity.tags', 'ability.ability.entity.image'
+                'ability.ability', 'ability.ability.entity', 'ability.ability.entity.tags', 'ability.ability.entity.image',
             ])
             ->join('abilities as a', 'a.id', 'entity_abilities.ability_id')
             ->defaultOrder()
@@ -51,7 +56,8 @@ public function abilities(): array
         }
 
         // Reorder parents
-        usort($this->abilities['parents'], function ($a, $b) {
+        $this->abilities['groups'] = $this->groups;
+        usort($this->abilities['groups'], function ($a, $b) {
             return strcmp(mb_strtoupper($a['name']), mb_strtoupper($b['name']));
         });
 
@@ -73,41 +79,42 @@ protected function add(EntityAbility $entityAbility): void
         $ability = $entityAbility->ability;
         $parent = $ability->ability;
 
-        if (empty($parent)) {
-            if (in_array($ability->id, $this->abilityIds)) {
-                return;
+        $groupKey = $parent->id ?? 'unorganised';
+
+        if (empty($this->groups[$groupKey])) {
+            if (empty($parent)) {
+                $this->groups[$groupKey] = [
+                    'id' => 0,
+                    'name' => __('entities/abilities.groups.unorganised'),
+                    'type' => __('entities/abilities.types.unorganised'),
+                    'abilities' => [],
+                ];
+            } else {
+                $type = empty($parent->type) ? Str::limit(strip_tags($parent->entry), 200) : $parent->type;
+                $this->groups[$groupKey] = [
+                    'id' => $parent->id,
+                    'name' => $parent->name,
+                    'type' => $type,
+                    'image' => Avatar::entity($parent->entity)->size(192)->thumbnail(),
+                    'has_image' => $parent->entity->hasImage(),
+                    'entry' => $parent->parsedEntry(),
+                    'url' => $parent->getLink(),
+                    'abilities' => [],
+                ];
             }
-            // Abilities need to be added to the array in the order they get loaded, but we also want to avoid abilities
-            // appearing multiple times somehow.
-            $this->abilities['abilities'][] = $this->format($entityAbility);
-            $this->abilityIds[] = $ability->id;
-            return;
-        }
-
-        if (!isset($this->abilities['parents'][$parent->id])) {
-            $this->abilities['parents'][$parent->id] = [
-                'id' => $parent->id,
-                'name' => $parent->name,
-                'type' => $parent->type,
-                'image' => Avatar::entity($parent->entity)->size(192)->thumbnail(),
-                'has_image' => !empty($parent->entity->image_path) || !empty($parent->entity->image),
-                'entry' => $parent->parsedEntry(),
-                'parent' => true,
-                'abilities' => [],
-                'url' => $parent->getLink(),
-            ];
         }
-
         // Add to their parent's abilities
-        $this->abilities['parents'][$parent->id]['abilities'][] = $this->format($entityAbility);
+        $this->groups[$groupKey]['abilities'][] = $this->formatAbility($entityAbility);
     }
 
     /**
+     * Prepare the entity ability into a json object that can be used on the frontend
      */
-    protected function format(EntityAbility $entityAbility): array
+    protected function formatAbility(EntityAbility $entityAbility): array
     {
         $classes = [];
-        foreach ($entityAbility->ability->entity->tagsWithEntity() as $tag) {
+        $tags = $entityAbility->ability->entity->tagsWithEntity();
+        foreach ($tags as $tag) {
             $classes[] = ' kanka-tag-' . $tag->id;
             $classes[] = ' kanka-tag-' . $tag->slug;
 
@@ -117,7 +124,16 @@ protected function format(EntityAbility $entityAbility): array
         }
         //implode(' ', $classes);
 
+        $note = nl2br((string) $this->mapAttributes(
+            Mentions::mapAny($entityAbility, 'note'),
+            false
+        ));
+        if (!empty($note)) {
+            $note = '<strong>' . __('entities/abilities.fields.note') . ':</strong> ' . $note;
+        }
+
         $data = [
+            'id' => $entityAbility->id,
             'ability_id' => $entityAbility->ability_id,
             'name' => $entityAbility->ability->name,
             'entry' => $this->parseEntry($entityAbility->ability),
@@ -125,11 +141,10 @@ protected function format(EntityAbility $entityAbility): array
             'charges' => $this->parseCharges($entityAbility->ability),
             'used_charges' => $entityAbility->charges,
             'class' => $classes,
-            'note' => nl2br((string) $this->mapAttributes(
-                Mentions::mapAny($entityAbility, 'note'),
-                false
-            )),
+            'note' => $note,
+            'tags' => $this->formatTags($tags),
             'visibility_id' => $entityAbility->visibility_id,
+            'visibility' => $entityAbility->visibilityName(),
             'created_by' => $entityAbility->created_by,
             'attributes' => $this->attributes($entityAbility->ability->entity),
             'images' => [
@@ -143,10 +158,14 @@ protected function format(EntityAbility $entityAbility): array
                 'delete' => route('entities.entity_abilities.destroy', [$this->campaign, $this->entity, $entityAbility]),
                 'view' => route('entities.show', [$this->campaign, $entityAbility->ability->entity]),
             ],
+            'i18n' => [
+                'edit' => __('crud.update'),
+                'left' => __('entities/abilities.charges.left')
+            ],
             'entity' => [
                 'id' => $entityAbility->ability->entity->id,
-                'tooltip' => route('entities.tooltip', [$this->campaign, $entityAbility->ability->entity->id])
-            ]
+                'tooltip' => route('entities.tooltip', [$this->campaign, $entityAbility->ability->entity->id]),
+            ],
         ];
 
         if (!empty($entityAbility->ability->charges)) {
@@ -172,4 +191,19 @@ protected function attributes(Entity $entity): array
         }
         return $attributes;
     }
+
+    protected function formatTags(Collection $tags): array
+    {
+        $formatted = [];
+        /** @var Tag $tag */
+        foreach ($tags as $tag) {
+            $formatted[] = [
+                'id' => $tag->id,
+                'name' => $tag->name,
+                'url' => $tag->getLink(),
+            ];
+        }
+
+        return $formatted;
+    }
 }
diff --git a/lang/en/entities/abilities.php b/lang/en/entities/abilities.php
index 26ce338d59..dd6fffa13a 100644
--- a/lang/en/entities/abilities.php
+++ b/lang/en/entities/abilities.php
@@ -15,6 +15,12 @@
         'note'      => 'Note',
         'position'  => 'Position',
     ],
+    'charges' => [
+        'left' => ':amount left',
+    ],
+    'groups' => [
+        'unorganised' => 'Unorganised',
+    ],
     'helpers'   => [
         'note'      => 'You can reference entities using advanced mentions (ex :code) and attributes of the entity (ex :attr) in this field.',
         'recharge'  => 'Reset all charges for abilities that have been used.',
@@ -39,6 +45,9 @@
         'reorder'   => 'Reorder',
         'title'     => ':name Abilities',
     ],
+    'types' => [
+        'unorganised' => 'Abilities are grouped by their parent field, and fallback to being here.',
+    ],
     'update'    => [
         'success'   => 'Entity ability :ability updated.',
         'title'     => 'Entity Ability for :name',
diff --git a/resources/js/components/abilities/Abilities.vue b/resources/js/components/abilities/Abilities.vue
index a2e0715a92..20d307d5aa 100644
--- a/resources/js/components/abilities/Abilities.vue
+++ b/resources/js/components/abilities/Abilities.vue
@@ -1,52 +1,18 @@
 <template>
     <div class="viewport box-abilities relative flex flex-col gap-5">
         <div v-if="loading" class="load more text-center">
-            <i class="fa-solid fa-spin fa-spinner"></i>
+            <i class="fa-solid fa-spin fa-spinner" aria-hidden="true"></i>
         </div>
 
         <div class="flex gap-5 flex-wrap">
-            <parent v-for="parent in parents"
-                :key="parent.id"
-                :ability="parent">
+            <parent v-for="group in groups"
+                :key="group.id"
+                :group="group"
+                 :permission="permission"
+                 :meta="meta"
+                 :trans="trans">
             </parent>
         </div>
-
-        <div v-if="show_parent" class="flex flex-col gap-5">
-            <div v-if="parent.entry" class="parent-box p-3 rounded bg-box shadow-xs">
-                <div class="parent-header mb-2">
-                    <a class="text-lg" v-bind:href="parent.url">
-                        {{ parent.name }}
-                    </a>
-                </div>
-                <div class="entity-content parent-body" v-html="parent.entry">
-
-                </div>
-            </div>
-            <ability v-for="ability in parent.abilities"
-                :key="ability.id"
-                :ability="ability"
-                :permission="permission"
-                :meta="meta"
-                :trans="json_trans">
-            </ability>
-        </div>
-
-        <div class="flex flex-col gap-5">
-            <ability v-if="!show_parent" v-for="ability in abilities"
-                     :key="ability.id"
-                     :ability="ability"
-                     :permission="permission"
-                     :meta="meta"
-                     :trans="json_trans">
-            </ability>
-        </div>
-
-        <AbilityForm :trans="json_trans">
-        </AbilityForm>
-
-        <div v-if="waiting" class="box-waiting absolute top-0 w-full h-full bg-black/20 text-center">
-            <i class="fa-solid fa-spin fa-spinner fa-4x mt-5"></i>
-        </div>
     </div>
 </template>
 
@@ -71,12 +37,9 @@
 
         data() {
             return {
-                abilities: [],
-                parents: [],
+                groups: [],
                 meta: [],
                 loading: true,
-                show_parent: false,
-                parent: null,
                 waiting: false,
                 modal: false,
                 json_trans: [],
@@ -88,24 +51,12 @@
               fetch(this.api)
                   .then(response => response.json())
                   .then(response => {
-                    this.abilities = response.data.abilities;
-                    this.parents = response.data.parents;
+                    this.groups = response.data.groups;
                     this.meta = response.data.meta;
                     this.loading = false;
                     this.waiting = false;
-
-
-                    if (this.parent) {
-                        // We need to find our parent again to "reload" it properly
-                        this.parent = this.parents[this.parent.id];
-                        this.showParent(this.parent);
-                    }
                 });
             },
-            //
-            showParent: function (parent) {
-                this.show_parent = !!parent;
-            },
 
             /**
              * Add an ability
@@ -138,11 +89,11 @@
 
         mounted() {
             this.getAbilities();
-
-            this.emitter.on('click_parent', (parent) => {
-                this.parent = parent;
-                this.showParent(parent);
-            });
+            //
+            // this.emitter.on('click_parent', (parent) => {
+            //     this.parent = parent;
+            //     this.showParent(parent);
+            // });
 
             this.emitter.on('delete_ability', (ability) => {
                 this.deleteAbility(ability);
@@ -157,3 +108,5 @@
         }
     }
 </script>
+<script setup>
+</script>
diff --git a/resources/js/components/abilities/Ability.vue b/resources/js/components/abilities/Ability.vue
index c4c5556f5f..b724bd6306 100644
--- a/resources/js/components/abilities/Ability.vue
+++ b/resources/js/components/abilities/Ability.vue
@@ -2,85 +2,147 @@
 
 <template>
     <div class="ability" v-bind:data-tags="ability.class">
-        <div class="ability-box p-3 rounded bg-box shadow-xs">
-            <div class="ability-header border-b flex items-center gap-2 pb-2 mb-2">
-                <div v-bind:class="dropdownClass()" v-click-outside="onClickOutside" v-if="permission">
-                    <a v-on:click="openDropdown()" role="button"  v-if="!this.openedDropdown">
-                        <i class="fa-solid fa-lock" v-if="ability.visibility_id === 2" v-bind:title="translate('admin')"></i>
-                        <i class="fa-solid fa-user-lock" v-if="ability.visibility_id === 3" v-bind:title="translate('admin-self')"></i>
-                        <i class="fa-solid fa-users" v-if="ability.visibility_id === 5" v-bind:title="translate('members')"></i>
-                        <i class="fa-solid fa-user-secret" v-if="ability.visibility_id === 4" v-bind:title="translate('self')"></i>
-                        <i class="fa-solid fa-eye" v-if="ability.visibility_id === 1" v-bind:title="translate('all')"></i>
-                    </a>
-                    <div class="flex gap-2 flex-wrap" v-else>
-                          <a role="button" class="btn2 btn-sm" v-on:click="setVisibility(1)">{{ translate('all') }}</a>
-                          <a role="button" class="btn2 btn-sm" v-on:click="setVisibility(2)" v-if="meta.is_admin">{{ translate('admin') }}</a>
-                          <a role="button" class="btn2 btn-sm" v-on:click="setVisibility(4)" v-if="this.isSelf">{{ translate('self') }}</a>
-                          <a role="button" class="btn2 btn-sm" v-on:click="setVisibility(5)" v-if="this.isSelf">{{ translate('members') }}</a>
-                          <a role="button" class="btn2 btn-sm" v-on:click="setVisibility(3)" v-if="this.isSelf">{{ translate('admin-self') }}</a>
-                    </div>
-                </div>
-                <div class="grow" v-if="!this.openedDropdown">
-                    <a role="button" v-on:click="showAbility(ability)" data-toggle="tooltip-ajax" class="grow text-lg"
-                       v-bind:data-id="ability.entity.id" v-bind:data-url="ability.entity.tooltip">
-                      {{ ability.name }}
-                    </a>
-                </div>
-                <a role="button"
-                    v-on:click="updateAbility(ability)"
-                    v-if="this.canDelete && !this.openedDropdown"
-                    class="btn2 btn-ghost btn-xs"
-                    v-bind:title="translate('update')">
-                    <i class="fa-solid fa-pencil" aria-hidden="true"></i>
-                    <span class="sr-only">{{ translate('update') }}</span>
+        <div class="ability-box p-4 rounded bg-box shadow-xs flex flex-col md:flex-row items-center md:items-start gap-2 md:gap-4">
+            <div class="" v-if="ability.images.has">
+                <a class="ability-image rounded-xl block w-40 h-40 cover-background"
+                   v-bind:href="ability.images.url"
+                   v-bind:style="backgroundImage">
                 </a>
             </div>
-            <div class="ability-body entity-content">
-                <div class="flex">
-                    <div class="flex-1">
-                        <span class="help-block">{{ ability.type }}</span>
-                        <div v-html="ability.entry"></div>
-                        <div v-html="ability.note" class="help-block"></div>
+            <div class="flex flex-col gap-4 w-full">
+                <div class="flex gap-2 md:gap-4 items-center w-full">
+                    <div class="flex gap-2 items-center text-xl grow">
+                        <a v-bind:href="ability.actions.view" class="ability-name text-2xl" v-html="ability.name"></a>
+                        <i class="fa-solid fa-lock" v-if="ability.visibility_id === 2" v-bind:title="ability.visibility"></i>
+                        <i class="fa-solid fa-user-lock" v-if="ability.visibility_id === 3" v-bind:title="ability.visibility"></i>
+                        <i class="fa-solid fa-users" v-if="ability.visibility_id === 5" v-bind:title="ability.visibility"></i>
+                        <i class="fa-solid fa-user-secret" v-if="ability.visibility_id === 4" v-bind:title="ability.visibility"></i>
+                        <i class="fa-solid fa-eye" v-if="ability.visibility_id === 1" v-bind:title="ability.visibility"></i>
                     </div>
-                    <div class="flex-none text-right ml-2 mb-2" v-if="ability.images.has" >
-                        <a class="ability-image block w-32 h-32 cover-background" target="_blank" v-bind:href="ability.images.url"
-                           v-bind:style="backgroundImage">
+                    <div v-if="ability.type" class="hidden md:inline bg-base-200 p-2 rounded-xl flex-none" v-html="ability.type"></div>
+
+                    <div v-if="permission" class="">
+                        <a role="button"
+                            v-on:click="updateAbility(ability)"
+                            v-if="this.canDelete && !this.openedDropdown"
+                            class="btn2 btn-ghost btn-sm"
+                            v-bind:title="ability.i18n.edit">
+                            <i class="fa-solid fa-pencil text-xl" aria-hidden="true"></i>
+                            <span class="sr-only" v-html="ability.i18n.edit"></span>
                         </a>
                     </div>
                 </div>
 
-
-                <div v-if="ability.charges && permission">
-                    <div class="charges relative">
-                        <div class="charge inline-block mr-2 h-5 w-5 cursor-pointer bg-white shadow-xs" v-for="n in ability.charges" v-on:click="useCharge(ability, n)"
-                             v-bind:class="{ used: ability.used_charges >= n }">
-                        </div>
-                    </div>
+                <div v-if="ability.type" class="visible md:hidden">
+                    <div class="inline-block bg-base-200 p-2 rounded-xl" v-html="ability.type"></div>
                 </div>
-
-                <div class="text-center cursor-pointer" v-if="hasAttribute"
-                     v-on:click="click(ability)">
-                    <i class="fa-solid fa-chevron-down" v-if="!details"></i>
+                <p class="text-sm" v-if="ability.entry" v-html="ability.entry"></p>
+                <div class="flex gap-2 items-center" v-if="ability.tags">
+                    <a v-for="tag in ability.tags"
+                       class="rounded-lg bg-base-200 text-xs py-1 px-2 text-base-content"
+                       v-bind:href="tag.url"
+                       v-html="tag.name">
+                    </a>
                 </div>
-                <div v-if="details && hasAttribute">
-                    <dl class="dl-horizontal">
-                        <div v-for="att in ability.attributes">
-                            <h4 v-if="att.type == 'section'" class="font-bold text-center" v-html="att.name"></h4>
-                            <div v-else>
-                                <dt>{{ att.name}}</dt>
-                                <dd v-if="att.type == 'checkbox'">
-                                    <i v-if="att.value == 1" class="fa-solid fa-check" aria-hidden="true"></i>
-                                </dd>
-                                <dd v-else v-html="att.value"></dd>
-                            </div>
-                        </div>
-                    </dl>
+                <div class="entity-content" v-if="ability.note" v-html="ability.note">
                 </div>
-                <div class="text-center cursor-pointer" v-if="hasAttribute"
-                     v-on:click="click(ability)">
-                    <i class="fa-solid fa-chevron-up" v-if="details"></i>
+
+                <div v-if="ability.charges && permission" class="flex gap-2 md:gap-4 ability-charges border-b pb-3 w-full items-end">
+                    <div class="flex gap-1 flex-wrap grow">
+                        <div class="charge cursor-pointer rounded-full p-2 hover:bg-accent hover:text-accent-content w-8 h-8 flex items-center justify-center" v-for="n in ability.charges" v-on:click="useCharge(ability, n)"
+                            v-bind:class="{ 'bg-base-200 charge-used': ability.used_charges >= n }">
+                            <span v-html="n"></span>
+                        </div>
+                    </div>
+                    <div class="flex-none">
+                        <span class="text-2xl" v-html="remainingNumber()"></span>
+                        <span v-html="remainingText()"></span>
+                    </div>
                 </div>
             </div>
+
+
+
+
+                            <!--            -->
+<!--            <div class="ability-header border-b flex items-center gap-2 pb-2 mb-2">-->
+<!--                <div v-bind:class="dropdownClass()" v-click-outside="onClickOutside" v-if="permission">-->
+<!--                    <a v-on:click="openDropdown()" role="button"  v-if="!this.openedDropdown">-->
+<!--                        <i class="fa-solid fa-lock" v-if="ability.visibility_id === 2" v-bind:title="translate('admin')"></i>-->
+<!--                        <i class="fa-solid fa-user-lock" v-if="ability.visibility_id === 3" v-bind:title="translate('admin-self')"></i>-->
+<!--                        <i class="fa-solid fa-users" v-if="ability.visibility_id === 5" v-bind:title="translate('members')"></i>-->
+<!--                        <i class="fa-solid fa-user-secret" v-if="ability.visibility_id === 4" v-bind:title="translate('self')"></i>-->
+<!--                        <i class="fa-solid fa-eye" v-if="ability.visibility_id === 1" v-bind:title="translate('all')"></i>-->
+<!--                    </a>-->
+<!--                    <div class="flex gap-2 flex-wrap" v-else>-->
+<!--                          <a role="button" class="btn2 btn-sm" v-on:click="setVisibility(1)">{{ translate('all') }}</a>-->
+<!--                          <a role="button" class="btn2 btn-sm" v-on:click="setVisibility(2)" v-if="meta.is_admin">{{ translate('admin') }}</a>-->
+<!--                          <a role="button" class="btn2 btn-sm" v-on:click="setVisibility(4)" v-if="this.isSelf">{{ translate('self') }}</a>-->
+<!--                          <a role="button" class="btn2 btn-sm" v-on:click="setVisibility(5)" v-if="this.isSelf">{{ translate('members') }}</a>-->
+<!--                          <a role="button" class="btn2 btn-sm" v-on:click="setVisibility(3)" v-if="this.isSelf">{{ translate('admin-self') }}</a>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--                <div class="grow" v-if="!this.openedDropdown">-->
+<!--                    <a role="button" v-on:click="showAbility(ability)" data-toggle="tooltip-ajax" class="grow text-lg"-->
+<!--                       v-bind:data-id="ability.entity.id" v-bind:data-url="ability.entity.tooltip">-->
+<!--                      {{ ability.name }}-->
+<!--                    </a>-->
+<!--                </div>-->
+<!--                <a role="button"-->
+<!--                    v-on:click="updateAbility(ability)"-->
+<!--                    v-if="this.canDelete && !this.openedDropdown"-->
+<!--                    class="btn2 btn-ghost btn-xs"-->
+<!--                    v-bind:title="translate('update')">-->
+<!--                    <i class="fa-solid fa-pencil" aria-hidden="true"></i>-->
+<!--                    <span class="sr-only">{{ translate('update') }}</span>-->
+<!--                </a>-->
+<!--            </div>-->
+<!--            <div class="ability-body entity-content">-->
+<!--                <div class="flex">-->
+<!--                    <div class="flex-1">-->
+<!--                        <span class="help-block">{{ ability.type }}</span>-->
+<!--                        <div v-html="ability.entry"></div>-->
+<!--                        <div v-html="ability.note" class="help-block"></div>-->
+<!--                    </div>-->
+<!--                    <div class="flex-none text-right ml-2 mb-2" v-if="ability.images.has" >-->
+<!--                        <a class="ability-image block w-32 h-32 cover-background" target="_blank" v-bind:href="ability.images.url"-->
+<!--                           v-bind:style="backgroundImage">-->
+<!--                        </a>-->
+<!--                    </div>-->
+<!--                </div>-->
+
+
+<!--                <div v-if="ability.charges && permission">-->
+<!--                    <div class="charges relative">-->
+<!--                        <div class="charge inline-block mr-2 h-5 w-5 cursor-pointer bg-white shadow-xs" v-for="n in ability.charges" v-on:click="useCharge(ability, n)"-->
+<!--                             v-bind:class="{ used: ability.used_charges >= n }">-->
+<!--                        </div>-->
+<!--                    </div>-->
+<!--                </div>-->
+
+<!--                <div class="text-center cursor-pointer" v-if="hasAttribute"-->
+<!--                     v-on:click="click(ability)">-->
+<!--                    <i class="fa-solid fa-chevron-down" v-if="!details"></i>-->
+<!--                </div>-->
+<!--                <div v-if="details && hasAttribute">-->
+<!--                    <dl class="dl-horizontal">-->
+<!--                        <div v-for="att in ability.attributes">-->
+<!--                            <h4 v-if="att.type == 'section'" class="font-bold text-center" v-html="att.name"></h4>-->
+<!--                            <div v-else>-->
+<!--                                <dt>{{ att.name}}</dt>-->
+<!--                                <dd v-if="att.type == 'checkbox'">-->
+<!--                                    <i v-if="att.value == 1" class="fa-solid fa-check" aria-hidden="true"></i>-->
+<!--                                </dd>-->
+<!--                                <dd v-else v-html="att.value"></dd>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                    </dl>-->
+<!--                </div>-->
+<!--                <div class="text-center cursor-pointer" v-if="hasAttribute"-->
+<!--                     v-on:click="click(ability)">-->
+<!--                    <i class="fa-solid fa-chevron-up" v-if="details"></i>-->
+<!--                </div>-->
+<!--            </div>-->
         </div>
     </div>
 </template>
@@ -139,6 +201,12 @@
             showAbility: function(ability) {
                 window.open(ability.actions.view, "_blank");
             },
+            remainingNumber: function() {
+                return this.ability.charges - this.ability.used_charges;
+            },
+            remainingText: function() {
+                return this.ability.i18n.left.replace(/:amount/, '');
+            },
             setVisibility: function(visibility_id) {
                 let data = {
                     visibility_id: visibility_id,
diff --git a/resources/js/components/abilities/Parent.vue b/resources/js/components/abilities/Parent.vue
index e3283e566c..82de10d631 100644
--- a/resources/js/components/abilities/Parent.vue
+++ b/resources/js/components/abilities/Parent.vue
@@ -1,36 +1,63 @@
 
 
 <template>
-    <div class="ability-parent cover-background rounded overflow-hidden w-48 h-20"
-         v-bind:style="backgroundImage"
-         v-on:click="click(ability)"
-         v-bind:class="{ active: active, without: !ability.has_image }"
+    <div class="ability-parent flex flex-col gap-5 w-full"
     >
-        <div class="ability-name flex justify-center h-full w-full items-center cursor-pointer bg-white/70 hover:bg-black/10 transition-all duration-500 ">
-            <div class="name text-2xl">
-                {{ ability.name }}
+        <div class="parent-head flex gap-2 md:gap-5 items-center">
+            <div
+                class="parent-image rounded-full w-12 h-12 md:w-16 md:h-16 cover-background flex-none"
+                v-if="group.has_image"
+                v-bind:style="backgroundImage">
             </div>
+            <div class="flex flex-col gap-1 grow overflow-hidden">
+                <div v-if="group.url">
+                    <a v-bind:href="group.url" v-html="group.name" class="parent-name text-xl md:text-2xl"></a>
+                </div>
+                <span v-else class="parent-name text-xl md:text-2xl" v-html="group.name"></span>
+                <p class="md:text-lg truncate" v-html="group.type"></p>
+            </div>
+            <div class="flex-none self-end">
+                <span role="button" v-on:click="click(group)" class="cursor-pointer inline-block">
+                    <i v-if="!this.collapsed" aria-hidden="true" class="fa-thin fa-chevron-circle-up fa-2x"></i>
+                    <i v-else aria-hidden="true" class="fa-thin fa-chevron-circle-down fa-2x"></i>
+                </span>
+            </div>
+        </div>
+        <div class="parent-abilities flex flex-col gap-5" v-if="!this.collapsed">
+            <ability v-for="ability in group.abilities"
+                    :key="ability.id"
+                    :ability="ability"
+                     :permission="permission"
+                     :meta="meta"
+                     :trans="trans">
+            </ability>
         </div>
     </div>
 </template>
 
 <script>
+    import Ability from "./Ability.vue";
     export default {
+        components: {Ability},
         props: [
-            'ability'
+            'group',
+            'permission',
+            'meta',
+            'trans'
         ],
 
         data() {
             return {
                 active: false,
+                collapsed: false
             };
         },
 
         computed: {
             backgroundImage: function() {
-                if (this.ability.has_image) {
+                if (this.group.has_image) {
                     return {
-                        backgroundImage: 'url(' + this.ability.image + ')'
+                        backgroundImage: 'url(' + this.group.image + ')'
                     }
                 }
                 return {}
@@ -38,14 +65,15 @@
         },
 
         methods: {
-            click: function(ability) {
-                this.emitter.emit('click_parent', this.active ? null : ability);
+            click: function(group) {
+                this.collapsed = !this.collapsed;
+                this.emitter.emit('click_parent', this.active ? null : group);
             },
         },
 
         mounted() {
             this.emitter.on('click_parent', (ab) => {
-                this.active = ab && ab.id === this.ability.id;
+                this.active = ab && ab.id === this.group.id;
             });
         }
     }
diff --git a/resources/sass/abilities.scss b/resources/sass/abilities.scss
index e02a4f850f..e69de29bb2 100644
--- a/resources/sass/abilities.scss
+++ b/resources/sass/abilities.scss
@@ -1,61 +0,0 @@
-.ability-parent {
-    .ability-name {
-        .name {
-            color: white;
-            text-shadow: rgba(0, 0, 0, 0.8) 0 1px 4px;
-        }
-    }
-}
-.ability-parent.without {
-    .ability-name {
-        background-image: none;
-
-        &:hover {
-            background-color: rgba(0, 0, 0, 0.7);
-        }
-    }
-}
-.ability-parent.active {
-    .ability-name {
-        background-color: rgba(0, 0, 0, 0.1);
-    }
-}
-.ability-parent.active.without {
-    .ability-name {
-        background-color: rgba(0, 0, 0, 0.7);
-    }
-}
-
-.ability {
-    .ability-image {
-        transition: filter 0.5s ease-in-out;
-        &:hover {
-            -webkit-filter: saturate(3);
-            filter: saturate(3);
-        }
-    }
-    a:hover {
-        background-color: unset !important;
-    }
-}
-
-.charges{
-    .charge {
-        --tw-border-opacity: 1;
-        border: 1px solid hsl(var(--bc)/var(--tw-border-opacity));
-        --tw-bg-opacity: 1;
-        background-color: hsl(var(--b1)/var(--tw-bg-opacity));
-    }
-    .used {
-        &:before {
-            content: "";
-            display: block;
-            height: 10px;
-            width: 10px;
-            margin-top: 4px;
-            margin-left: 4px;
-            --tw-bg-opacity: 1;
-            background-color: hsl(var(--a)/var(--tw-bg-opacity));
-        }
-    }
-}
diff --git a/resources/sass/colour.scss b/resources/sass/colour.scss
index 87a21b1a88..8dfeeb2f87 100644
--- a/resources/sass/colour.scss
+++ b/resources/sass/colour.scss
@@ -148,4 +148,8 @@
   --tw-text-opacity: 1;
   color:hsl(var(--a)/var(--tw-text-opacity));
 }
+.hover\:text-accent-content:hover {
+  --tw-text-opacity: 1;
+  color:hsl(var(--ac)/var(--tw-text-opacity));
+}
 
diff --git a/resources/sass/theming.scss b/resources/sass/theming.scss
index b418e8ef9e..5521381116 100644
--- a/resources/sass/theming.scss
+++ b/resources/sass/theming.scss
@@ -270,6 +270,10 @@ blockquote {
     --tw-bg-opacity: 1;
     background-color:hsl(var(--b3)/var(--tw-bg-opacity))
 }
+.hover\:bg-accent:hover {
+    --tw-bg-opacity: 1;
+    background-color:hsl(var(--a)/var(--tw-bg-opacity))
+}
 
 .hover\:shadow-md:hover {
     --tw-shadow-color: hsl(var(--n)/1);
diff --git a/resources/views/campaigns/modules/box.blade.php b/resources/views/campaigns/modules/box.blade.php
index cbf2e95575..649b7d800e 100644
--- a/resources/views/campaigns/modules/box.blade.php
+++ b/resources/views/campaigns/modules/box.blade.php
@@ -30,9 +30,9 @@
     <x-box css="box-module overflow-hidden flex flex-wrap flex-col select-none {{ $enabled ? 'module-enabled' : null }} {{ isset($deprecated) ? 'box-deprecated' : null }} " id="{{ $module }}" :padding="false">
         <div class="header p-2 bg-neutral text-neutral-content flex items-center gap-2 ">
             <i class="flex-0 text-lg {{ $icon }}" aria-hidden="true"></i>
-            <spanf class="text-lg grow break-all">
+            <span class="text-lg grow break-all">
                 {!! $moduleName !!}
-            </spanf>
+            </span>
             @can('update', $campaign)
             @if (isset($id) && !isset($deprecated))
                 <button