Merge pull request #10172 from DestinyItemManager/lo-sections

More changes to bring LO in line with Loadout Editor

config/i18n.json

@@ -586,17 +586,17 @@
     "ChooseAlternateTitle": "Choose another item",
     "CompareLoadout": "Compare Loadout",
     "ConfirmOverwrite": "Are you sure you want to replace the armor in the loadout \"{{name}}\" with this new set of armor?",
-    "CreateLoadout": "Save Loadout",
     "DisabledDueToMaintenance": "The Loadout Optimizer is currently disabled due to Bungie API maintenance.",
     "EquipItems": "Equip",
     "ExcludeItem": "Exclude Item",
+    "ExcludedItems": "Excluded Items",
     "Exotic": "Exotic Armor",
     "ExistingLoadout": "Existing Loadout",
     "ExoticSpecialCategory": "Special",
     "Filter": "Filters",
     "Legendary": "Legendary",
-    "LockEquipped": "Pin equipped",
     "LockItem": "Pin item",
+    "PinnedItems": "Pinned Items",
     "MissingClass": "Build is for: {{className}}",
     "MissingClassDescription": "The build you're trying to view is for a character class you don't have.",
     "NoBuildsFoundExplainer": {
@@ -764,6 +764,7 @@
     "RestoreAllItems": "All Items",
     "Save": "Save",
     "SaveLoadout": "Save Loadout",
+    "UpdateLoadout": "Update Loadout",
     "SaveAsDIM": "Save as DIM Loadout",
     "SaveAsNew": "Save as New",
     "SaveAsNewTooltip": "Keep the original loadout and save this as a new loadout",

src/app/loadout-builder/LoadoutBucketDropTarget.m.scss

@@ -1,5 +1,6 @@
 .canDrop {
-  outline: 1px solid #666;
+  outline: 1px solid white;
+  outline-offset: 4px;
   &.over {
     outline: 1px solid var(--theme-accent-primary);
   }

src/app/loadout-builder/LoadoutBuilder.tsx

@@ -361,12 +361,14 @@ export default memo(function LoadoutBuilder({
         pinnedItems={pinnedItems}
         searchFilter={searchFilter}
         lbDispatch={lbDispatch}
+        className={styles.subclassSection}
       />
       <LoadoutOptimizerExcludedItems
         chooseItem={chooseItem}
         excludedItems={excludedItems}
         searchFilter={searchFilter}
         lbDispatch={lbDispatch}
+        className={styles.subclassSection}
       />
       {isPhonePortrait && (
         <div className={styles.guide}>

src/app/loadout-builder/filter/LoadoutOptimizerMenuItems.m.scss

@@ -16,13 +16,3 @@
   composes: flexColumn from '../../dim-ui/common.m.scss';
   gap: 4px;
 }
-
-.buttons {
-  display: flex;
-  flex-direction: row;
-  > * {
-    flex: 1;
-  }
-
-  gap: 4px;
-}

src/app/loadout-builder/filter/LoadoutOptimizerMenuItems.tsx

@@ -2,8 +2,9 @@ import { t } from 'app/i18next-t';
 import { DimItem } from 'app/inventory/item-types';
 import { DimStore } from 'app/inventory/store-types';
 import { isLoadoutBuilderItem } from 'app/loadout/item-utils';
+import { AddItemButton } from 'app/loadout/loadout-edit/LoadoutEditBucket';
+import LoadoutEditSection from 'app/loadout/loadout-edit/LoadoutEditSection';
 import { ItemFilter } from 'app/search/filter-types';
-import { AppIcon, faTimesCircle, pinIcon } from 'app/shell/icons';
 import { objectValues } from 'app/utils/util-types';
 import _ from 'lodash';
 import React, { Dispatch, memo, useCallback } from 'react';
@@ -24,12 +25,14 @@ export const LoadoutOptimizerPinnedItems = memo(function LoadoutOptimizerPinnedI
   pinnedItems,
   searchFilter,
   lbDispatch,
+  className,
 }: {
   chooseItem: ChooseItemFunction;
   selectedStore: DimStore;
   pinnedItems: PinnedItems;
   searchFilter: ItemFilter;
   lbDispatch: Dispatch<LoadoutBuilderAction>;
+  className?: string;
 }) {
   /**
    * Lock currently equipped items on a character
@@ -46,6 +49,11 @@ export const LoadoutOptimizerPinnedItems = memo(function LoadoutOptimizerPinnedI
     [lbDispatch],
   );
   const unpinItem = (item: DimItem) => lbDispatch({ type: 'unpinItem', item });
+  const clear = () =>
+    lbDispatch({
+      type: 'setPinnedItems',
+      items: [],
+    });
 
   const chooseLockItem = chooseItem(
     pinItem,
@@ -58,23 +66,21 @@ export const LoadoutOptimizerPinnedItems = memo(function LoadoutOptimizerPinnedI
   );
 
   return (
-    <LoadoutBucketDropTarget className={styles.area} onItemLocked={pinItem}>
-      {Boolean(allPinnedItems.length) && (
+    <LoadoutEditSection
+      className={className}
+      title={t('LoadoutBuilder.PinnedItems')}
+      onClear={clear}
+      onSyncFromEquipped={lockEquipped}
+    >
+      <LoadoutBucketDropTarget className={styles.area} onItemLocked={pinItem}>
         <div className={styles.itemGrid}>
           {allPinnedItems.map((lockedItem) => (
             <LockedItem key={lockedItem.id} lockedItem={lockedItem} onRemove={unpinItem} />
           ))}
+          <AddItemButton onClick={chooseLockItem} title={t('LoadoutBuilder.LockItem')} />
         </div>
-      )}
-      <div className={styles.buttons}>
-        <button type="button" className="dim-button" onClick={chooseLockItem}>
-          <AppIcon icon={pinIcon} /> {t('LoadoutBuilder.LockItem')}
-        </button>
-        <button type="button" className="dim-button" onClick={lockEquipped}>
-          <AppIcon icon={pinIcon} /> {t('LoadoutBuilder.LockEquipped')}
-        </button>
-      </div>
-    </LoadoutBucketDropTarget>
+      </LoadoutBucketDropTarget>
+    </LoadoutEditSection>
   );
 });
 
@@ -83,11 +89,13 @@ export const LoadoutOptimizerExcludedItems = memo(function LoadoutOptimizerExclu
   excludedItems,
   searchFilter,
   lbDispatch,
+  className,
 }: {
   chooseItem: ChooseItemFunction;
   excludedItems: ExcludedItems;
   searchFilter: ItemFilter;
   lbDispatch: Dispatch<LoadoutBuilderAction>;
+  className?: string;
 }) {
   const excludeItem = useCallback(
     (item: DimItem) => lbDispatch({ type: 'excludeItem', item }),
@@ -100,21 +108,23 @@ export const LoadoutOptimizerExcludedItems = memo(function LoadoutOptimizerExclu
   const allExcludedItems = _.sortBy(_.compact(objectValues(excludedItems)).flat(), (i) =>
     LockableBucketHashes.indexOf(i.bucket.hash),
   );
+
+  const clear = () => lbDispatch({ type: 'clearExcludedItems' });
   return (
-    <LoadoutBucketDropTarget className={styles.area} onItemLocked={excludeItem}>
-      {Boolean(allExcludedItems.length) && (
+    <LoadoutEditSection
+      className={className}
+      title={t('LoadoutBuilder.ExcludedItems')}
+      onClear={clear}
+    >
+      <LoadoutBucketDropTarget className={styles.area} onItemLocked={excludeItem}>
         <div className={styles.itemGrid}>
           {allExcludedItems.map((lockedItem) => (
             <LockedItem key={lockedItem.id} lockedItem={lockedItem} onRemove={unExcludeItem} />
           ))}
+          <AddItemButton onClick={chooseExcludeItem} title={t('LoadoutBuilder.ExcludeItem')} />
         </div>
-      )}
-      <div className={styles.buttons}>
-        <button type="button" className="dim-button" onClick={chooseExcludeItem}>
-          <AppIcon icon={faTimesCircle} /> {t('LoadoutBuilder.ExcludeItem')}
-        </button>
-      </div>
-    </LoadoutBucketDropTarget>
+      </LoadoutBucketDropTarget>
+    </LoadoutEditSection>
   );
 });
 

src/app/loadout-builder/generated-sets/GeneratedSetButtons.tsx

@@ -71,7 +71,7 @@ export default function GeneratedSetButtons({
   return (
     <div className={styles.buttons}>
       <button type="button" className="dim-button" onClick={openLoadout}>
-        {t('LoadoutBuilder.CreateLoadout')}
+        {isEditingExistingLoadout ? t('Loadouts.UpdateLoadout') : t('Loadouts.SaveLoadout')}
       </button>
       {canCompareLoadouts && (
         <button

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

@@ -270,6 +270,7 @@ type LoadoutBuilderConfigAction =
   | { type: 'unpinItem'; item: DimItem }
   | { type: 'excludeItem'; item: DimItem }
   | { type: 'unexcludeItem'; item: DimItem }
+  | { type: 'clearExcludedItems' }
   | { type: 'autoStatModsChanged'; autoStatMods: boolean }
   | { type: 'lockedModsChanged'; lockedMods: number[] }
   | { type: 'removeLockedMod'; mod: ResolvedLoadoutMod }
@@ -465,6 +466,11 @@ function lbConfigReducer(defs: D2ManifestDefinitions) {
           },
         };
       }
+      case 'clearExcludedItems':
+        return {
+          ...state,
+          excludedItems: {},
+        };
       case 'lockedModsChanged':
         return updateLoadout(state, updateMods(action.lockedMods));
       case 'assumeArmorMasterworkChanged': {

src/app/loadout/loadout-edit/LoadoutEditBucket.tsx

@@ -190,15 +190,11 @@ function ItemBucket({
   const showAddUnequipped = equipped.length > 0 && unequipped.length < maxSlots - 1;
 
   const addUnequipped = showAddUnequipped && (
-    <button
-      type="button"
+    <AddItemButton
       key="addbutton"
-      className={styles.addButton}
       onClick={() => handlePlaceholderClick(false)}
       title={t('Loadouts.AddUnequippedItems')}
-    >
-      <AppIcon icon={addIcon} />
-    </button>
+    />
   );
 
   const renderItem = (li: ResolvedLoadoutItem) => (
@@ -297,6 +293,20 @@ function DraggableItem({
   );
 }
 
+export function AddItemButton({
+  onClick,
+  title,
+}: {
+  onClick: React.MouseEventHandler;
+  title: string;
+}) {
+  return (
+    <button type="button" className={styles.addButton} onClick={onClick} title={title}>
+      <AppIcon icon={addIcon} />
+    </button>
+  );
+}
+
 function FashionButton({
   loadout,
   items,

src/locale/en.json

@@ -631,20 +631,19 @@
     "ChooseAlternateTitle": "Choose another item",
     "CompareLoadout": "Compare Loadout",
     "ConfirmOverwrite": "Are you sure you want to replace the armor in the loadout \"{{name}}\" with this new set of armor?",
-    "CreateLoadout": "Save Loadout",
     "DecreaseStatPriority": "Decrease stat priority",
     "DisabledByAutoStatMods": "Stat mods are being chosen automatically by Loadout Optimizer.",
     "DisabledDueToMaintenance": "The Loadout Optimizer is currently disabled due to Bungie API maintenance.",
     "EquipItems": "Equip",
     "ExcludeItem": "Exclude Item",
+    "ExcludedItems": "Excluded Items",
     "ExistingLoadout": "Existing Loadout",
     "Exotic": "Exotic Armor",
     "ExoticSpecialCategory": "Special",
     "Filter": "Filters",
     "IgnoreStat": "If unchecked, Loadout Optimizer will pretend this stat doesn't exist when building sets",
     "IncreaseStatPriority": "Increase stat priority",
     "Legendary": "Legendary",
-    "LockEquipped": "Pin equipped",
     "LockItem": "Pin item",
     "MissingClass": "Build is for: {{className}}",
     "MissingClassDescription": "The build you're trying to view is for a character class you don't have.",
@@ -677,6 +676,7 @@
     "OptimizerExplanationSearch": "Use the search bar to narrow down which armor to consider. If no armor matches the search in a slot, all armor in that slot will be considered.",
     "OptimizerExplanationStats": "Drag the most important stats to the top, and disable stats you don't want to optimize for.",
     "OptimizerSet": "Optimizer Set",
+    "PinnedItems": "Pinned Items",
     "ProcessingSets": "Finding highest tier sets...",
     "SaveAs": "Save as",
     "SpeedReport": "Generated {{combos, number}} combinations in {{time}} seconds",
@@ -857,6 +857,7 @@
     "UnassignedModError": "Mod didn't fit on your current armor",
     "Undo": "Undo",
     "Update": "Save Changes",
+    "UpdateLoadout": "Update Loadout",
     "VendorsCannotEquip": "You don't have these items. Tap to pick a replacement or click the X to remove:"
   },
   "Manifest": {