Edit in-game identifiers for DIM loadouts

config/i18n.json

@@ -240,7 +240,7 @@
     "HasShader": "Shows items that have a shader applied.",
     "HasOrnament": "Shows items that have an ornament applied.",
     "InLoadout": "is:inloadout shows items that are included in any loadout. Searching with inloadout: shows items that are included in loadouts with matching titles. When used with a hashtag, inloadout: shows items whose loadouts have the hashtag in the title or notes.",
     "InInGameLoadout": "is:iningameloadout shows items that are included in any in-game loadout.",
     "Infusable": "Shows items that can be infused.",
     "IsAdept": "Shows weapons compatible with Adept mods.",
     "IsCrafted": "Shows weapons that have been crafted.",
@@ -430,6 +430,7 @@
     "DeletedBody": "Cleared the in-game loadout at slot {{index}}",
     "DeleteFailed": "Failed to delete loadout",
     "Save": "Update Loadout",
+    "SaveIdentifiers": "Update Identifiers",
     "SaveToDimLoadout": "Save as DIM Loadout",
     "Replace": "Replace Loadout {{index}}",
     "SnapshotFailed": "Failed to snapshot equipped loadout"

src/app/dim-ui/Sheet.tsx

@@ -42,7 +42,7 @@ const SheetDisabledContext = createContext<(shown: boolean) => void>(() => {
  * takes an "onClose" function that can be used to close the sheet. Using onClose to close
  * the sheet ensures that it will animate away rather than simply disappearing.
  */
-type SheetContent = React.ReactNode | ((args: { onClose: () => void }) => React.ReactNode);
+export type SheetContent = React.ReactNode | ((args: { onClose: () => void }) => React.ReactNode);
 
 interface Props {
   /** A static, non-scrollable header shown in line with the close button. */

src/app/loadout-drawer/LoadoutDrawer.m.scss

@@ -29,3 +29,22 @@
   align-items: center;
   gap: 4px;
 }
+
+.header {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  grid-template-areas:
+    'identifiers title'
+    'identifiers notes';
+  gap: 0 12px;
+
+  > *:nth-child(1) {
+    grid-area: identifiers;
+  }
+  > *:nth-child(2) {
+    grid-area: title;
+  }
+  > *:nth-child(3) {
+    grid-area: notes;
+  }
+}

src/app/loadout-drawer/LoadoutDrawer.tsx

@@ -7,6 +7,7 @@ import { WithSymbolsPicker } from 'app/dim-ui/destiny-symbols/SymbolsPicker';
 import { useAutocomplete } from 'app/dim-ui/text-complete/text-complete';
 import { t } from 'app/i18next-t';
 import { getStore } from 'app/inventory/stores-helpers';
+import InGameLoadoutIdentifiersSelectButton from 'app/loadout/ingame/InGameLoadoutIdentifiersSelectButton';
 import { useDefinitions } from 'app/manifest/selectors';
 import { searchFilterSelector } from 'app/search/search-filter';
 import { AppIcon, addIcon, faRandom } from 'app/shell/icons';
@@ -93,7 +94,7 @@ export default function LoadoutDrawer({
     return (...args: T) => setLoadout(fn(...args));
   }
 
-  const store = getStore(stores, storeId)!;
+  const store = getStore(stores, storeId);
 
   const onAddItem = useCallback(
     (item: DimItem, equip?: boolean) => setLoadout(addItem(defs, item, equip)),
@@ -181,7 +182,8 @@ export default function LoadoutDrawer({
     setLoadout(setClassType(checked ? DestinyClass.Unknown : store.classType));
 
   const header = (
-    <div>
+    <div className={styles.header}>
+      <InGameLoadoutIdentifiersSelectButton loadout={loadout} setLoadout={setLoadout} />
       <LoadoutDrawerHeader loadout={loadout} onNameChanged={handleNameChanged} />
       <details className={styles.notes} open={Boolean(loadout.notes?.length)}>
         <summary>{t('MovePopup.Notes')}</summary>

src/app/loadout-drawer/LoadoutDrawerHeader.tsx

@@ -1,4 +1,3 @@
-import ClassIcon from 'app/dim-ui/ClassIcon';
 import { WithSymbolsPicker } from 'app/dim-ui/destiny-symbols/SymbolsPicker';
 import { useAutocomplete } from 'app/dim-ui/text-complete/text-complete';
 import { t } from 'app/i18next-t';
@@ -21,9 +20,11 @@ export default function LoadoutDrawerHeader({
   const tags = useSelector(loadoutsHashtagsSelector);
   useAutocomplete(inputRef, tags);
 
+  // TODO: Only show the ingame loadout icon when the loadout has some ingame-loadout-compatible items in it?
+  // TODO: preview/warn that an incomplete loadout will inherit the current items for any missing slots
+
   return (
     <div className={styles.loadoutName}>
-      <ClassIcon classType={loadout.classType} />
       <WithSymbolsPicker className={styles.dimInput} input={inputRef} setValue={onNameChanged}>
         <input
           name="name"

src/app/loadout-drawer/loadout-drawer-reducer.ts

@@ -1,4 +1,4 @@
-import { LoadoutParameters } from '@destinyitemmanager/dim-api-types';
+import { InGameLoadoutIdentifiers, LoadoutParameters } from '@destinyitemmanager/dim-api-types';
 import { D1Categories } from 'app/destiny1/d1-bucket-categories';
 import { D1ManifestDefinitions } from 'app/destiny1/d1-definitions';
 import { D2Categories } from 'app/destiny2/d2-bucket-categories';
@@ -865,3 +865,10 @@ export function randomizeLoadoutMods(
     })(loadout);
   });
 }
+
+/**
+ * Set the name/icon/color of this loadout.
+ */
+export function setInGameLoadoutIdentifiers(identifiers: InGameLoadoutIdentifiers | undefined) {
+  return setLoadoutParameters({ inGameIdentifiers: identifiers });
+}

src/app/loadout-drawer/loadout-type-converters.ts

@@ -1,4 +1,9 @@
-import { Loadout, LoadoutItem, LoadoutParameters } from '@destinyitemmanager/dim-api-types';
+import {
+  InGameLoadoutIdentifiers,
+  Loadout,
+  LoadoutItem,
+  LoadoutParameters,
+} from '@destinyitemmanager/dim-api-types';
 import { D2ManifestDefinitions } from 'app/destiny2/d2-definitions';
 import { DimItem } from 'app/inventory/item-types';
 import { SocketOverrides } from 'app/inventory/store/override-sockets';
@@ -136,9 +141,7 @@ function convertDestinyLoadoutComponentToInGameLoadout(
   characterId: string,
   defs: D2ManifestDefinitions
 ): InGameLoadout | undefined {
-  const name = defs.LoadoutName.get(loadoutComponent.nameHash)?.name ?? 'Unknown';
-  const colorIcon = defs.LoadoutColor.get(loadoutComponent.colorHash)?.colorImagePath ?? '';
-  const icon = defs.LoadoutIcon.get(loadoutComponent.iconHash)?.iconImagePath ?? '';
+  const resolvedIdentifiers = resolveInGameLoadoutIdentifiers(defs, loadoutComponent);
 
   if (
     loadoutComponent.items === undefined ||
@@ -150,15 +153,23 @@ function convertDestinyLoadoutComponentToInGameLoadout(
 
   return {
     ...loadoutComponent,
+    ...resolvedIdentifiers,
     characterId,
     index,
-    name,
-    colorIcon,
-    icon,
     id: `ingame-${characterId}-${index}`,
   };
 }
 
+export function resolveInGameLoadoutIdentifiers(
+  defs: D2ManifestDefinitions,
+  { nameHash, colorHash, iconHash }: InGameLoadoutIdentifiers
+) {
+  const name = defs.LoadoutName.get(nameHash)?.name ?? 'Unknown';
+  const colorIcon = defs.LoadoutColor.get(colorHash)?.colorImagePath ?? '';
+  const icon = defs.LoadoutIcon.get(iconHash)?.iconImagePath ?? '';
+  return { name, colorIcon, icon };
+}
+
 export function convertInGameLoadoutToDimLoadout(
   inGameLoadout: InGameLoadout,
   classType: DestinyClass,

src/app/loadout/LoadoutView.m.scss

@@ -13,7 +13,9 @@
   gap: 1em;
 
   h2 {
-    display: block;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
     margin: 0 !important;
     font-size: 16px;
   }

src/app/loadout/LoadoutView.tsx

@@ -19,6 +19,7 @@ import _ from 'lodash';
 import { ReactNode, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import styles from './LoadoutView.m.scss';
+import { InGameLoadoutIconFromIdentifiers } from './ingame/InGameLoadoutIcon';
 import LoadoutItemCategorySection from './loadout-ui/LoadoutItemCategorySection';
 import { LoadoutArtifactUnlocks, LoadoutMods } from './loadout-ui/LoadoutMods';
 import LoadoutSubclassSection from './loadout-ui/LoadoutSubclassSection';
@@ -110,6 +111,12 @@ export default function LoadoutView({
     <div className={styles.loadout} id={loadout.id}>
       <div className={styles.title}>
         <h2>
+          {loadout.parameters?.inGameIdentifiers && (
+            <InGameLoadoutIconFromIdentifiers
+              size={24}
+              identifiers={loadout.parameters.inGameIdentifiers}
+            />
+          )}
           {loadout.classType === DestinyClass.Unknown && (
             <ClassIcon className={styles.classIcon} classType={loadout.classType} />
           )}

src/app/loadout/Loadouts.tsx

@@ -181,7 +181,6 @@ function Loadouts({ account }: { account: DestinyAccount }) {
             <AlertIcon /> {t('Storage.DimSyncNotEnabled')}
           </p>
         )}
-        <h2>{t('Loadouts.InGameLoadouts')}</h2>
         <InGameLoadoutStrip
           store={selectedStore}
           onEdit={setEditingInGameLoadout}

src/app/loadout/ingame/EditInGameLoadout.m.scss

@@ -11,59 +11,11 @@
   margin: 0;
 }
 
-.preview {
-  display: flex;
-  flex-direction: row;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  font-size: 16px;
-  gap: 8px;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.button {
-  composes: dim-button from global;
-  position: relative;
-  > img {
-    margin: 0 !important;
-    height: 48px;
-    width: 48px;
-  }
-  &:hover,
-  &:active,
-  &.checked {
-    background-color: var(--theme-accent-primary);
-    color: var(--theme-text-invert);
-    > img {
-      filter: none !important;
-    }
-  }
-  &.imageButton {
-    padding: 2px;
-  }
-  &.hasLoadout {
-    &:hover,
-    &:active,
-    &.checked {
-      color: var(--theme-text) !important;
-    }
-  }
-}
-
-.row {
+.slots {
   display: flex;
   flex-flow: row wrap;
   gap: 4px;
-}
-
-.slots {
-  composes: row;
   margin-bottom: 8px;
-
-  > .button {
-    padding: 2px;
-  }
 }
 
 .emptySlot {