Made unlist utility class generally available.

Repathed item-info-card to info-card.

Implemented Effect Info Card.

Added support for attribute splatting on item table row.

Added uuid to actor effects processing.

Wired up effect cards for all actors and items.

src/applications/info-card/DetachedInfoCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { InfoCardState } from 'src/components/item-info-card/info-card.svelte';
+  import type { InfoCardState } from 'src/components/info-card/info-card.svelte';
   import { warn } from 'src/utils/logging';
 
   interface Props {

src/applications/info-card/DetachedInfoCardApplication.ts

@@ -1,4 +1,4 @@
-import type { InfoCardState } from 'src/components/item-info-card/info-card.svelte';
+import type { InfoCardState } from 'src/components/info-card/info-card.svelte';
 import { CONSTANTS } from 'src/constants';
 import { SvelteApplicationMixin } from 'src/mixins/SvelteApplicationMixin.svelte';
 import type { ApplicationConfiguration } from 'src/types/application.types';

src/components/item-info-card/AttachedInfoCard.svelte → src/components/info-card/AttachedInfoCard.svelte

@@ -12,6 +12,7 @@
   import DefaultItemCard from './Cards/DefaultItemCard.svelte';
   import InventoryItemCard from './Cards/InventoryItemCard.svelte';
   import SpellItemCard from './Cards/SpellItemCard.svelte';
+  import EffectInfoCard from './Cards/EffectInfoCard.svelte';
   import { Inventory } from 'src/features/sections/Inventory';
   import { CONSTANTS } from 'src/constants';
   import type { Component, ComponentProps } from 'svelte';
@@ -33,7 +34,7 @@
   const selector = `[${infoCardAttributeKey}], .tidy-info-card`;
   const uuidAttribute = 'data-info-card-entity-uuid';
   const sheetEl = $derived<HTMLElement>(
-    FoundryAdapter.getElementFromAppV1OrV2(sheet.element)
+    FoundryAdapter.getElementFromAppV1OrV2(sheet.element),
   );
 
   let staticCardPosition = $derived.by<'left' | 'right'>(() => {
@@ -97,6 +98,14 @@
     }
 
     switch (cardType) {
+      case 'effect': {
+        card = {
+          component: EffectInfoCard,
+          props: { effect: entity },
+          title: entity.name,
+        };
+        break;
+      }
       // case 'activity': {
       //   card = {
       //     component: ActivityInfoCard,

src/components/info-card/Cards/EffectInfoCard.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import HorizontalLineSeparator from 'src/components/layout/HorizontalLineSeparator.svelte';
+  import { CONSTANTS } from 'src/constants';
+  import { FoundryAdapter } from 'src/foundry/foundry-adapter';
+  import type { ActiveEffect5e } from 'src/types/types';
+
+  interface Props {
+    effect: ActiveEffect5e;
+  }
+
+  let { effect }: Props = $props();
+
+  let enrichedDescriptionPromise = $derived(
+    FoundryAdapter.enrichHtml(effect.description ?? '', {
+      secrets: effect.isOwner,
+      relativeTo: effect,
+      rollData: {},
+    }),
+  );
+
+  let pills = $derived.by(() => {
+    let result = [];
+
+    if (effect.disabled) {
+      result.push('EFFECT.Disabled');
+    }
+
+    if (effect.transfer) {
+      result.push('EFFECT.Transfer');
+    }
+
+    if (effect.isSuppressed) {
+      result.push('DND5E.Suppressed');
+    }
+
+    Array.from<string>(effect.statuses)
+      .map(
+        (x: string) => CONFIG.statusEffects.find((y) => y.id === x)?.name ?? x,
+      )
+      .forEach((e) => {
+        result.push(e);
+      });
+
+    return result;
+  });
+
+  $inspect(pills);
+
+  function findMode(mode: number) {
+    const entry = Object.entries(CONST.ACTIVE_EFFECT_MODES).find(
+      ([_, value]) => value === mode,
+    );
+
+    if (!entry) {
+      return '—';
+    }
+
+    return localize(`EFFECT.MODE_${entry[0]}`);
+  }
+
+  const localize = FoundryAdapter.localize;
+</script>
+
+<header>
+  {effect.name}
+</header>
+
+<div class="info-card-content">
+  <div class="info-card-states">
+    <span>{effect.parent?.name}</span>
+  </div>
+  <HorizontalLineSeparator borderColor="faint" />
+  <div class="info-card-states">
+    <span>
+      <i class="fa-regular fa-clock"></i>
+      {effect.duration?.seconds ?? '—'}
+    </span>
+    <span>
+      {#if effect.type === 'enchantment'}
+        <i class="fa-solid fa-wand-sparkles"></i>
+        {localize('DND5E.ENCHANTMENT.Label')}
+      {/if}
+    </span>
+  </div>
+  <HorizontalLineSeparator borderColor="faint" />
+  <div class="description-wrap">
+    {#await enrichedDescriptionPromise then description}
+      {@html description}
+    {/await}
+
+    <ul style="margin-block-start: 1rem;" class="unlist flex-column small-gap">
+      {#each effect.changes as change}
+        {@const modeLabel = findMode(change.mode)}
+        <li>
+          <div>
+            <strong>{change.key}</strong>
+          </div>
+          <div>
+            <span>{modeLabel}</span>
+            <span class="text-body-tertiary">|</span>
+            {change.value}
+          </div>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>
+<!-- TODO: Key/Mode/Value entries -->
+{#if pills.length}
+  <HorizontalLineSeparator />
+  <div
+    class="inline-wrapped-elements"
+    data-tidy-sheet-part={CONSTANTS.SHEET_PARTS.ITEM_PROPERTY_LIST}
+  >
+    {#each pills as pill}
+      <span class="tag">{localize(pill)}</span>
+    {/each}
+  </div>
+{/if}

src/components/item-list/v1/ItemTableRow.svelte

@@ -24,6 +24,7 @@
     hidden?: boolean;
     getDragData?: (() => any) | null;
     onMouseDown?: MouseEventHandler<HTMLElement>;
+    attributes?: Record<string, any>;
     children?: Snippet<[any]>;
   }
 
@@ -36,6 +37,7 @@
     hidden = false,
     getDragData = null,
     onMouseDown,
+    attributes,
     children,
   }: Props = $props();
 
@@ -150,6 +152,7 @@
   data-favorite-id={favoriteId ?? null}
   data-info-card={item ? 'item' : null}
   data-info-card-entity-uuid={item?.uuid ?? null}
+  {...attributes}
 >
   <div class="item-table-row {cssClass ?? ''}">
     {@render children?.({ toggleSummary })}

src/features/conditions-and-effects/ConditionsAndEffects.ts

@@ -58,6 +58,7 @@ export class ConditionsAndEffects {
             parentId: effect.target === effect.parent ? null : effect.parent.id,
             durationParts: duration.remaining ? duration.label.split(', ') : [],
             hasTooltip: source instanceof dnd5e.documents.Item5e,
+            uuid: effect.uuid,
           });
           return arr;
         },

src/scss/util.scss

@@ -24,6 +24,18 @@
   .ff-title {
     font-family: var(--t5e-title-font-family) !important;
   }
+
+  /* Lists */
+  .unlist {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    :where(li) {
+      margin: 0;
+      padding: 0;
+    }
+  }
 }
 
 /* Hightouch utilities */
@@ -95,18 +107,6 @@
       color: var(--t5e-color-text-onInverse-disabled);
     }
   }
-
-  /* Lists */
-  .unlist {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    :where(li) {
-      margin: 0;
-      padding: 0;
-    }
-  }
 }
 
 /* Container Queries */

src/sheets/classic/actor/ActorEffectsTab.svelte

@@ -116,6 +116,10 @@
                     uuid: effect.uuid,
                   }}
                   activeEffect={effect}
+                  attributes={{
+                    'data-info-card': 'effect',
+                    'data-info-card-entity-uuid': effect.uuid,
+                  }}
                 >
                   <ItemTableCell
                     primary={true}

src/sheets/classic/character/CharacterSheetFull.svelte

@@ -20,7 +20,7 @@
   import ActorOriginSummaryConfigFormApplication from 'src/applications/actor-origin-summary/ActorOriginSummaryConfigFormApplication.svelte';
   import ActorName from '../actor/ActorName.svelte';
   import { TidyFlags } from 'src/foundry/TidyFlags';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { getCharacterSheetContext } from 'src/sheets/sheet-context.svelte';
 
   let selectedTabId: string = $state('');

src/sheets/classic/character/tabs/CharacterEffectsTab.svelte

@@ -145,6 +145,10 @@
                       parentId: effectContext.parentId,
                     })?.toDragData()}
                   activeEffect={effectContext}
+                  attributes={{
+                    'data-info-card': 'effect',
+                    'data-info-card-entity-uuid': effectContext.uuid
+                  }}
                 >
                   <ItemTableCell
                     primary={true}

src/sheets/classic/group/GroupSheet.svelte

@@ -11,7 +11,7 @@
   import HorizontalLineSeparator from 'src/components/layout/HorizontalLineSeparator.svelte';
   import TextInput from 'src/components/inputs/TextInput.svelte';
   import GroupHitPoints from './parts/GroupHitPoints.svelte';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { getGroupSheetClassicContext } from 'src/sheets/sheet-context.svelte';
   import { onMount } from 'svelte';
 

src/sheets/classic/item/ConsumableSheet.svelte

@@ -9,7 +9,7 @@
   import { CONSTANTS } from 'src/constants';
   import ItemIdentifiableName from './parts/ItemIdentifiableName.svelte';
   import ItemHeaderToggles from './parts/ItemHeaderToggles.svelte';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { settings } from 'src/settings/settings.svelte';
   import { getItemSheetContext } from 'src/sheets/sheet-context.svelte';
 

src/sheets/classic/item/ContainerSheet.svelte

@@ -9,7 +9,7 @@
   import Tabs from 'src/components/tabs/Tabs.svelte';
   import TabContents from 'src/components/tabs/TabContents.svelte';
   import ItemHeaderToggles from './parts/ItemHeaderToggles.svelte';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { settings } from 'src/settings/settings.svelte';
   import { getContainerSheetClassicContext } from 'src/sheets/sheet-context.svelte';
 

src/sheets/classic/item/EquipmentSheet.svelte

@@ -9,7 +9,7 @@
   import { CONSTANTS } from 'src/constants';
   import ItemIdentifiableName from './parts/ItemIdentifiableName.svelte';
   import ItemHeaderToggles from './parts/ItemHeaderToggles.svelte';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { settings } from 'src/settings/settings.svelte';
   import { getItemSheetContext } from 'src/sheets/sheet-context.svelte';
 

src/sheets/classic/item/FacilitySheet.svelte

@@ -6,7 +6,7 @@
   import ItemProfilePicture from './parts/ItemProfilePicture.svelte';
   import Source from '../shared/Source.svelte';
   import { CONSTANTS } from 'src/constants';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { settings } from 'src/settings/settings.svelte';
   import { getItemSheetContext } from 'src/sheets/sheet-context.svelte';
 

src/sheets/classic/item/FeatSheet.svelte

@@ -6,7 +6,7 @@
   import TextInput from 'src/components/inputs/TextInput.svelte';
   import Source from '../shared/Source.svelte';
   import { CONSTANTS } from 'src/constants';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { settings } from 'src/settings/settings.svelte';
   import { getItemSheetContext } from 'src/sheets/sheet-context.svelte';
 

src/sheets/classic/item/SpellSheet.svelte

@@ -6,7 +6,7 @@
   import TextInput from 'src/components/inputs/TextInput.svelte';
   import Source from '../shared/Source.svelte';
   import { CONSTANTS } from 'src/constants';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { settings } from 'src/settings/settings.svelte';
   import { getItemSheetContext } from 'src/sheets/sheet-context.svelte';
 

src/sheets/classic/item/ToolSheet.svelte

@@ -9,7 +9,7 @@
   import { CONSTANTS } from 'src/constants';
   import ItemIdentifiableName from './parts/ItemIdentifiableName.svelte';
   import ItemHeaderToggles from './parts/ItemHeaderToggles.svelte';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { settings } from 'src/settings/settings.svelte';
     import { getItemSheetContext } from 'src/sheets/sheet-context.svelte';
 

src/sheets/classic/item/WeaponSheet.svelte

@@ -9,7 +9,7 @@
   import { CONSTANTS } from 'src/constants';
   import ItemIdentifiableName from './parts/ItemIdentifiableName.svelte';
   import ItemHeaderToggles from './parts/ItemHeaderToggles.svelte';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { settings } from 'src/settings/settings.svelte';
   import { getItemSheetContext } from 'src/sheets/sheet-context.svelte';
 

src/sheets/classic/item/tabs/ItemActiveEffectsTab.svelte

@@ -89,6 +89,8 @@
               ondragstart={(ev) => handleDragStart(ev, effect)}
               draggable={context.editable}
               data-context-menu={CONSTANTS.CONTEXT_MENU_TYPE_EFFECTS}
+              data-info-card="effect"
+              data-info-card-entity-uuid={effect.uuid}
             >
               <div class="item-name effect-name flexrow">
                 <img

src/sheets/classic/npc/NpcSheetFull.svelte

@@ -23,7 +23,7 @@
   import NumberInput from 'src/components/inputs/NumberInput.svelte';
   import { isNil } from 'src/utils/data';
   import ActorLinkIndicator from 'src/components/actor-link-indicator/ActorLinkIndicator.svelte';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { getNpcSheetContext } from 'src/sheets/sheet-context.svelte';
 
   let selectedTabId: string = $state('');

src/sheets/classic/npc/tabs/NpcEffectsTab.svelte

@@ -135,6 +135,10 @@
                       parentId: effectContext.parentId,
                     })?.toDragData()}
                   activeEffect={effectContext}
+                  attributes={{
+                    'data-info-card': 'effect',
+                    'data-info-card-entity-uuid': effectContext.uuid,
+                  }}
                 >
                   <ItemTableCell
                     primary={true}

src/sheets/classic/vehicle/VehicleSheetFull.svelte

@@ -20,7 +20,7 @@
   import InlineSource from '../shared/InlineSource.svelte';
   import ActorOriginSummaryConfigFormApplication from 'src/applications/actor-origin-summary/ActorOriginSummaryConfigFormApplication.svelte';
   import ActorName from '../actor/ActorName.svelte';
-  import AttachedInfoCard from 'src/components/item-info-card/AttachedInfoCard.svelte';
+  import AttachedInfoCard from 'src/components/info-card/AttachedInfoCard.svelte';
   import { getVehicleSheetContext } from 'src/sheets/sheet-context.svelte';
 
   let selectedTabId: string = $state('');