[Feature] CountdownsType Split (#1990)

* Toggle pills

* Finished animation framework

* .

* Fixed localization

* Fixed iconOnly

* Updated SRD Action Countdown types

* feat: add shimmer animation when change countdown value

* Fixed so that hidden countdowns don't take up space

* Fixed countdowns.hbs part using wrong context for iconOnly

* Restored glow animation for category chip

* Changed back to a single sheen effect

* [Review] Move visible countdown types to getter (#1999)

* Move visible countdown types to getter

* Punchier shimmer animation

* Restored encounter/narrative

* Lang cleanup

* .

---------

Co-authored-by: Murilo Brito <dev.murilobrito@gmail.com>
Co-authored-by: Carlos Fernandez <CarlosFdez@users.noreply.github.com>

templates/ui/countdowns/countdown-edit.hbs

@@ -78,9 +78,9 @@
                         </div>
                         <div class="countdown-edit-subrow">
                             <div class="countdown-edit-input tiny type-input">
-                                <label>{{localize "DAGGERHEART.APPLICATIONS.CountdownEdit.category"}}</label>
+                                <label>{{localize "DAGGERHEART.GENERAL.type"}}</label>
                                 <select name="{{concat "countdowns." id ".type"}}">
-                                    {{selectOptions ../countdownBaseTypes selected=countdown.type localize=true}}
+                                    {{selectOptions ../countdownTypes selected=countdown.type localize=true}}
                                 </select>
                             </div>
                             <div class="countdown-edit-input">

templates/ui/countdowns/countdowns-view.hbs

@@ -0,0 +1,24 @@
+<div>
+    <header class="countdowns-header">
+        <i class="fa-solid fa-clock-rotate-left" inert></i>
+        {{#unless iconOnly}}
+            <span class="window-title">{{localize "DAGGERHEART.UI.Countdowns.title"}}</span>
+        {{/unless}}
+        <div class="header-type-toggles">
+            {{#each typeToggles as |type|}}
+                <a class="header-type {{#unless type.active}}inactive{{/unless}}" data-action="toggleCountdownTypes" data-type="{{type.type}}">{{localize type.label}}</a>
+            {{/each}}
+        </div>
+        {{#if isGM}}
+            <a class="header-control" data-tooltip aria-label="DAGGERHEART.APPLICATIONS.CountdownEdit.editTitle" data-action="editCountdowns">
+                <i class="fa-solid fa-wrench" inert></i>
+            </a>
+        {{/if}}
+        <a class="header-control" data-tooltip aria-label="DAGGERHEART.UI.Countdowns.toggleIconMode" data-action="toggleViewMode">
+            <i class="fa-solid fa-down-left-and-up-right-to-center" inert></i>
+        </a>
+    </header>
+    <div class="countdowns-container">
+        {{> "systems/daggerheart/templates/ui/countdowns/parts/countdowns.hbs" }}
+    </div>
+</div>

templates/ui/countdowns/parts/countdowns.hbs

@@ -1,23 +1,11 @@
-<div>
-    <header class="countdowns-header">
-        <i class="fa-solid fa-clock-rotate-left" inert></i>
-        <span class="window-title">{{localize "DAGGERHEART.UI.Countdowns.title"}}</span>
-        {{#if isGM}}
-            <a class="header-control" data-tooltip aria-label="DAGGERHEART.APPLICATIONS.CountdownEdit.editTitle" data-action="editCountdowns">
-                <i class="fa-solid fa-wrench" inert></i>
-            </a>
-        {{/if}}
-        <a class="header-control" data-tooltip aria-label="DAGGERHEART.UI.Countdowns.toggleIconMode" data-action="toggleViewMode">
-            <i class="fa-solid fa-down-left-and-up-right-to-center" inert></i>
-        </a>
-    </header>
-    <div class="countdowns-container">
-        {{#each countdowns as | countdown id |}}
-            <div class="countdown-container {{#if ../iconOnly}}icon-only{{/if}}" data-countdown="{{id}}">
+{{#each countdowns as | category key |}}
+    <div class="countdown-category-container {{#unless (includes @root.countdownTypesWithVisibleEntries key)}}hidden{{/unless}}">
+        {{#each category as |countdown id|}}
+            <div class="countdown-container {{#if @root.iconOnly}}icon-only{{/if}}" data-countdown="{{id}}">
                 <div class="countdown-main-container">
-                    <img src="{{countdown.img}}" {{#if ../iconOnly}}data-tooltip="{{countdown.name}}"{{/if}}/>
+                    <img src="{{countdown.img}}" {{#if @root.iconOnly}}data-tooltip="{{countdown.name}}"{{/if}}/>
                     <div class="countdown-content">
-                        {{#unless ../iconOnly}}
+                        {{#unless @root.iconOnly}}
                             <header>{{countdown.name}}</header>
                         {{/unless}}
                         <div class="countdown-tools">
@@ -29,7 +17,7 @@
                                 {{#if countdown.editable}}<a data-action="increaseCountdown"><i class="fa-solid fa-plus"></i></a>{{/if}}
                             </div>
                             <div class="countdown-tool-icons">
-                                {{#if (not ../iconOnly)}}
+                                {{#if (not @root.iconOnly)}}
                                     {{#if (and countdown.noPlayerAccess @root.isGM)}}
                                         <i class="fa-solid fa-eye-slash" data-tooltip="{{localize "DAGGERHEART.UI.Countdowns.noPlayerAccess"}}"></i>
                                     {{/if}}
@@ -53,4 +41,4 @@
             </div>
         {{/each}}
     </div>
-</div>
+{{/each}}