UI overhaul i feel the rush

public/lang/en.json

@@ -46,6 +46,7 @@
 
   "TIDY5E.JournalTabName": "Journal",
   "TIDY5E.StatblockTabName": "Statblock",
+  "TIDY5E.CombatTabName": "Combat",
 
   "TIDY5E.Actions": {
     "TabName": "Actions",
@@ -895,5 +896,15 @@
   "TIDY5E.UseSpecificDefaultValue.Label": "Use Default ({value})",
   "TIDY5E.Notifications.FirstTimeWelcome1": "Welcome to Tidy 5e Sheets! To get started, you'll need to change {sheetLinkStart}a sheet{sheetLinkEnd} (or {allSheetsLinkStart}all your sheets{allSheetsLinkEnd}!) to use the Tidy version. Learn more about this module and what it can do on the {wikiLinkStart}official wiki{wikiLinkEnd}.",
   "TIDY5E.AggregateSkill.HighMeasure": "High",
-  "TIDY5E.AggregateSkill.LowMeasure": "Low"
+  "TIDY5E.AggregateSkill.LowMeasure": "Low",
+  "TIDY5E.Difficulty": "Difficulty",
+  "TIDY5E.Encounter": {
+    "Combat.IncludeInCombat.Tooltip": "Include in combat activities",
+    "Combat.ExcludeFromCombat.Tooltip": "Exclude from combat activities",
+    "AddMember.Label": "Add Member",
+    "AddToCombatTracker.Label": "Add to Active Encounter",
+    "AddPlaceholder.Label": "Add a Placeholder",
+    "AddAllPlaceholders.Label": "Add All as Placeholders",
+    "PrerollInitiative": "Preroll Initiative"
+  }
 }

src/components/table-quadrone/TidyItemTableRow.svelte

@@ -45,15 +45,15 @@
     properties: [],
   };
 
-  const expandedItemData = getContext<ExpandedItemData>(
+  const expandedItemData = getContext<ExpandedItemData | undefined>(
     CONSTANTS.SVELTE_CONTEXT.EXPANDED_ITEM_DATA,
   );
 
-  const expandedItems = getContext<ExpandedItemIdToLocationsMap>(
+  const expandedItems = getContext<ExpandedItemIdToLocationsMap | undefined>(
     CONSTANTS.SVELTE_CONTEXT.EXPANDED_ITEMS,
   );
 
-  const onItemToggled = getContext<OnItemToggledFn>(
+  const onItemToggled = getContext<OnItemToggledFn | undefined>(
     CONSTANTS.SVELTE_CONTEXT.ON_ITEM_TOGGLED,
   );
 
@@ -114,7 +114,7 @@
 
   $effect(() => {
     const isExpandedAtThisLocation = expandedItems?.get(item.id)?.has(location);
-    const data = expandedItemData.get(item.id);
+    const data = expandedItemData?.get(item.id);
 
     if (isExpandedAtThisLocation && data) {
       untrack(() => {

src/components/table-quadrone/table-buttons/EncounterAddCombatPlaceholder.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { TidyFlags } from 'src/api';
+  import { FoundryAdapter } from 'src/foundry/foundry-adapter';
+
+  interface Props {
+    doc: any;
+    disabled?: boolean;
+    addPlaceholderFn?: Function;
+    tooltip?: string;
+  }
+
+  let { 
+    doc, 
+    disabled,
+    addPlaceholderFn = () => alert('TODO: Add a placeholder to the combat tracker.'),
+    tooltip = FoundryAdapter.localize('TIDY5E.Encounter.AddPlaceholder.Label'),
+  }: Props = $props();
+</script>
+
+<a
+  class="tidy-table-button {disabled ?? 'disabled'}"
+  aria-label={tooltip}
+  data-tooltip
+  onclick={() => !disabled && addPlaceholderFn()}
+>
+  <i class="fa-solid fa-circle-dashed"></i>
+</a>

src/components/table-quadrone/table-buttons/EncounterCombatMemberToggle.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { TidyFlags } from 'src/api';
+  import { FoundryAdapter } from 'src/foundry/foundry-adapter';
+
+  interface Props {
+    doc: any;
+  }
+
+  let { doc }: Props = $props();
+
+  const localize = FoundryAdapter.localize;
+
+  let include = true; // undefined defaults to true
+</script>
+
+<a
+  class="tidy-table-button tidy-table-toggle"
+  aria-label={FoundryAdapter.localize(
+    include
+      ? 'TIDY5E.Encounter.Combat.IncludeInCombat.Tooltip'
+      : 'TIDY5E.Encounter.Combat.ExcludeFromCombat.Tooltip',
+  )}
+  data-tooltip
+  onclick={() => alert('TODO: Adjust included/excluded members as a flag on the encounter sheet.')}
+>
+  {#if include}
+    <i class="fa-solid fa-toggle-large-on enabled"></i>
+  {:else}
+    <i class="fa-solid fa-toggle-off"></i>
+  {/if}
+</a>

src/components/trackers/InlineItemQuantityTracker.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { Item5e } from 'src/types/item.types';
-  import TextInput from '../inputs/TextInput.svelte';
   import { FoundryAdapter } from 'src/foundry/foundry-adapter';
-  import { isNil } from 'src/utils/data';
+  import InlineQuantityTracker from './InlineQuantityTracker.svelte';
+  import { processInputChangeDeltaFromValues } from 'src/utils/form';
 
   interface Props {
     item: Item5e;
@@ -12,43 +12,27 @@
 
   let { item, field = 'system.quantity', disabled = false }: Props = $props();
 
-  let quantity = $derived(FoundryAdapter.getProperty<number>(item, field));
+  let quantity = $derived(
+    FoundryAdapter.getProperty<number>(item, field)?.toString() ?? '',
+  );
 
-  async function increment() {
-    if (!isNil(quantity)) {
-      await item.update({
-        [field]: quantity + 1,
-      });
-    }
-  }
-
-  async function decrement() {
-    if (!isNil(quantity)) {
-      await item.update({
-        [field]: quantity - 1,
-      });
-    }
-  }
+  let localize = FoundryAdapter.localize;
 </script>
 
-<article class="tidy-inline-item-quantity-tracker" class:disabled>
-  <a class="command decrementer" onclick={() => !disabled && decrement()}>
-    <i class="fa-solid fa-minus"></i>
-  </a>
-  <span class="item-quantity-tracker-input-wrapper uninput">
-    <TextInput
-      class="item-quantity-tracker-input"
-      document={item}
-      {field}
-      value={quantity}
-      {disabled}
-      allowDeltaChanges={true}
-      selectOnFocus={true}
-    ></TextInput>
-  </span>
-  <a class="command incrementer" onclick={() => !disabled && increment()}>
-    <i class="fa-solid fa-plus"></i>
-  </a>
-</article>
-
-<!-- TODO: Make a generic counter that can be injected onto the sheet for things like `So Inspired!` 🔥 -->
+<InlineQuantityTracker
+  aria-label={localize('DND5E.Quantity')}
+  data-tooltip="DND5E.Quantity"
+  min="0"
+  {disabled}
+  onchange={async (ev) => {
+    const input = ev.currentTarget;
+    await item.update({
+      [field]: processInputChangeDeltaFromValues(
+        ev.currentTarget.value,
+        quantity,
+      ),
+    });
+    input.value = quantity;
+  }}
+  value={quantity}
+/>

src/components/trackers/InlineQuantityTracker.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { processInputChangeDeltaFromValues } from 'src/utils/form';
+  import { InputAttachments } from 'src/attachments/input-attachments.svelte';
+
+  let attributes: HTMLInputAttributes = $props();
+
+  let input: HTMLInputElement;
+
+  let min = $derived(attributes.min ? +attributes.min : -Infinity);
+
+  function adjust(delta: string) {
+    const newValue = processInputChangeDeltaFromValues(delta, input.value);
+
+    if (newValue !== undefined) {
+      input.value = newValue.toString();
+      const changeEvent = new Event('change', { bubbles: true });
+      input.dispatchEvent(changeEvent);
+    }
+  }
+</script>
+
+<article
+  class={['tidy-inline-quantity-tracker', { disabled: attributes.disabled }]}
+>
+  <a
+    class="command decrementer"
+    onclick={() =>
+      attributes.value - 1 >= min && !attributes.disabled && adjust('-1')}
+  >
+    <i class="fa-solid fa-minus"></i>
+  </a>
+  <span class="quantity-tracker-input-wrapper">
+    <input
+      bind:this={input}
+      type="text"
+      class="quantity-tracker-input"
+      {@attach InputAttachments.selectOnFocus}
+      {...attributes}
+    />
+  </span>
+  <a
+    class="command incrementer"
+    onclick={() => !attributes.disabled && adjust('+1')}
+  >
+    <i class="fa-solid fa-plus"></i>
+  </a>
+</article>

src/constants.ts

@@ -138,6 +138,7 @@ export const CONSTANTS = {
   TAB_OPTION_CLASS: 'tab-option',
   TAB_ACTOR_ACTIONS: 'actions',
   TAB_ACTOR_BIOGRAPHY: 'biography',
+  TAB_ACTOR_COMBAT: 'combat',
   TAB_ACTOR_INVENTORY: 'inventory',
   TAB_ACTOR_SPECIAL_TRAITS: 'special-traits',
   TAB_ACTOR_SPELLBOOK: 'spellbook',

src/context-menu/tidy5e-encounter-context-menu-quadrone.ts

@@ -0,0 +1,47 @@
+import type { Actor5e } from 'src/types/types';
+import type { ContextMenuEntry } from 'src/foundry/foundry.types';
+import { FoundryAdapter } from 'src/foundry/foundry-adapter';
+import { Tidy5eNpcSheetQuadrone } from 'src/sheets/quadrone/Tidy5eNpcSheetQuadrone.svelte';
+
+/**
+ * Prepare an array of context menu options which are available for a member of a encounter.
+ * @param encounter    The encounter for which the context menu is activated.
+ * @param actor    The actor for whom the context menu is activate.
+ * @returns        Context menu options.
+ */
+export function getEncounterMemberContextOptionsQuadrone(
+  encounter: Actor5e,
+  memberPromise: Promise<Actor5e>
+): ContextMenuEntry[] {
+  let options: ContextMenuEntry[] = [
+    {
+      name: 'DND5E.Group.Action.View',
+      icon: `<i class="fas fa-eye fa-fw"></i>`,
+      callback: async () => (await memberPromise)?.sheet.render(true),
+      condition: () =>
+        encounter.isOwner && !FoundryAdapter.isLockedInCompendium(encounter),
+    },
+    {
+      name: 'DND5E.HPFormulaRollMessage',
+      icon: `<i class="fas fa-dice-d6 fa-fw"></i>`,
+      callback: async () => {
+        await new Tidy5eNpcSheetQuadrone({
+          document: await memberPromise,
+        }).rollFormula();
+        encounter.sheet.render();
+      },
+      condition: () =>
+        encounter.isOwner && !FoundryAdapter.isLockedInCompendium(encounter),
+    },
+    {
+      name: 'DND5E.Group.Action.Remove',
+      icon: `<i class="fas fa-trash fa-fw"></i>`,
+      callback: async () =>
+        await encounter.system.removeMember(await memberPromise),
+      condition: () =>
+        encounter.isOwner && !FoundryAdapter.isLockedInCompendium(encounter),
+    },
+  ];
+
+  return options;
+}

src/context-menu/tidy5e-encounter-context.menu.ts

@@ -3,6 +3,7 @@ import type { ContextMenuEntry } from 'src/foundry/foundry.types';
 import type { Encounter5eMember } from 'src/types/group.types';
 import { TidyHooks } from 'src/foundry/TidyHooks';
 import { FoundryAdapter } from 'src/foundry/foundry-adapter';
+import { getEncounterMemberContextOptionsQuadrone } from './tidy5e-encounter-context-menu-quadrone';
 
 export function configureEncounterContextMenu(element: HTMLElement, app: any) {
   const memberId = element.getAttribute('data-member-uuid');
@@ -14,10 +15,12 @@ export function configureEncounterContextMenu(element: HTMLElement, app: any) {
 
   if (!memberPromise) return;
 
-  ui.context.menuItems = getEncounterMemberContextOptions(
-    app.document,
-    memberPromise
-  );
+  const isQuadroneSheet = element.closest('.quadrone');
+
+  ui.context.menuItems = isQuadroneSheet
+    ? getEncounterMemberContextOptionsQuadrone(app.document, memberPromise)
+    : getEncounterMemberContextOptions(app.document, memberPromise);
+
   TidyHooks.tidy5eSheetsGetEncounterMemberContextOptions(
     app.document,
     memberPromise,