Add setting to show each class's armor on separate lines in vault

config/i18n.json

@@ -1193,7 +1193,8 @@
     "ReverseSort": "Toggle forward/reverse sort",
     "SetSort": "Sort items by:",
     "SetVaultWeaponGrouping": "Group vault weapons by:",
-    "VaultWeaponGroupingStyle": "Separate groups on different lines",
+    "VaultArmorGroupingStyle": "Separate armor on different lines by class",
+    "VaultWeaponGroupingStyle": "Separate weapon groups on different lines",
     "Settings": "Settings",
     "ShowNewItems": "Show a red dot on new items",
     "ExpandSingleCharacter": "Show all characters",

src/app/inventory-page/StoreBucket.tsx

@@ -1,4 +1,4 @@
-import { DestinyVersion } from '@destinyitemmanager/dim-api-types';
+import { DestinyVersion, VaultWeaponGroupingStyle } from '@destinyitemmanager/dim-api-types';
 import ClassIcon from 'app/dim-ui/ClassIcon';
 import WeaponGroupingIcon from 'app/dim-ui/WeaponGroupingIcon';
 import { t } from 'app/i18next-t';
@@ -16,8 +16,10 @@ import { useItemPicker } from 'app/item-picker/item-picker';
 import { characterOrderSelector } from 'app/settings/character-sort';
 import { itemSorterSelector } from 'app/settings/item-sort';
 import {
+  vaultArmorGroupingStyleSelector,
   vaultWeaponGroupingEnabledSelector,
   vaultWeaponGroupingSelector,
+  vaultWeaponGroupingStyleSelector,
 } from 'app/settings/vault-grouping';
 import { AppIcon, addIcon } from 'app/shell/icons';
 import { vaultGroupingValueWithType } from 'app/shell/item-comparators';
@@ -28,7 +30,7 @@ import { BucketHashes } from 'data/d2/generated-enums';
 import emptyEngram from 'destiny-icons/general/empty-engram.svg';
 import { shallowEqual } from 'fast-equals';
 import _ from 'lodash';
-import React, { memo, useCallback, useRef } from 'react';
+import { memo, useCallback, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import './StoreBucket.scss';
@@ -80,6 +82,7 @@ const StoreBucketInner = memo(function StoreBucketInner({
   const sortItems = useSelector(itemSorterSelector);
   const groupWeapons = useSelector(vaultWeaponGroupingSelector);
   const vaultWeaponGroupingEnabled = useSelector(vaultWeaponGroupingEnabledSelector);
+  const weaponGroupingStyle = useSelector(vaultWeaponGroupingStyleSelector);
 
   const showItemPicker = useItemPicker();
   const pickEquipItem = useCallback(() => {
@@ -131,7 +134,10 @@ const StoreBucketInner = memo(function StoreBucketInner({
         storeId={storeId}
         storeClassType={storeClassType}
         // class representing a *character* bucket area that's not equippable
-        className={clsx({ 'not-equippable': !isVault && !isEquippable })}
+        className={clsx({
+          'not-equippable': !isVault && !isEquippable,
+          inlineGroups: weaponGroupingStyle === VaultWeaponGroupingStyle.Inline,
+        })}
       >
         {unequippedItems.map((groupOrItem) =>
           'id' in groupOrItem ? (
@@ -195,6 +201,7 @@ const VaultBucketDividedByClass = memo(function SingleCharacterVaultBucket({
   const storeClassList = useSelector(storeClassListSelector);
   const characterOrder = useSelector(characterOrderSelector);
   const sortItems = useSelector(itemSorterSelector);
+  const armorGroupingStyle = useSelector(vaultArmorGroupingStyleSelector);
 
   // The vault divides armor by class
   const itemsByClass = Map.groupBy(items, (item) => item.classType);
@@ -205,19 +212,22 @@ const VaultBucketDividedByClass = memo(function SingleCharacterVaultBucket({
 
   return (
     <StoreBucketDropTarget
-      grouped={false}
+      grouped={true}
       equip={false}
       bucket={bucket}
       storeId={storeId}
       storeClassType={storeClassType}
+      className={clsx({
+        inlineGroups: armorGroupingStyle === VaultWeaponGroupingStyle.Inline,
+      })}
     >
       {classTypeOrder.map((classType) => (
-        <React.Fragment key={classType}>
+        <div className="vault-group" key={classType}>
           <ClassIcon classType={classType} className="armor-class-icon" />
           {sortItems(itemsByClass.get(classType)!).map((item) => (
             <StoreInventoryItem key={item.index} item={item} />
           ))}
-        </React.Fragment>
+        </div>
       ))}
     </StoreBucketDropTarget>
   );

src/app/inventory-page/StoreBuckets.tsx

@@ -1,5 +1,3 @@
-import { VaultWeaponGroupingStyle } from '@destinyitemmanager/dim-api-types';
-import { settingSelector } from 'app/dim-api/selectors';
 import { PullFromPostmaster } from 'app/inventory/PullFromPostmaster';
 import { InventoryBucket } from 'app/inventory/inventory-buckets';
 import { DimStore } from 'app/inventory/store-types';
@@ -12,7 +10,6 @@ import {
 import clsx from 'clsx';
 import { BucketHashes } from 'data/d2/generated-enums';
 import React from 'react';
-import { useSelector } from 'react-redux';
 import StoreBucket from '../inventory-page/StoreBucket';
 import styles from './StoreBuckets.m.scss';
 
@@ -32,7 +29,6 @@ export function StoreBuckets({
   labels?: boolean;
   singleCharacter: boolean;
 }) {
-  const vaultWeaponGroupingStyle = useSelector(settingSelector('vaultWeaponGroupingStyle'));
   let content: React.ReactNode;
 
   // Don't show buckets with no items
@@ -87,7 +83,6 @@ export function StoreBuckets({
     <div
       className={clsx('store-row', `bucket-${bucket.hash}`, {
         'account-wide': bucket.accountWide,
-        inlineGroups: vaultWeaponGroupingStyle === VaultWeaponGroupingStyle.Inline,
       })}
     >
       {labels && (

src/app/settings/SettingsPage.tsx

@@ -368,6 +368,17 @@ export default function SettingsPage() {
                   }
                 />
               )}
+              <Checkbox
+                label={t('Settings.VaultArmorGroupingStyle')}
+                name="vaultArmorGroupingStyle"
+                value={settings.vaultArmorGroupingStyle !== VaultWeaponGroupingStyle.Inline}
+                onChange={(checked, setting) =>
+                  setSetting(
+                    setting,
+                    checked ? VaultWeaponGroupingStyle.Lines : VaultWeaponGroupingStyle.Inline,
+                  )
+                }
+              />
             </div>
 
             <div className={styles.setting}>

src/app/settings/initial-settings.ts

@@ -1,16 +1,22 @@
-import { defaultSettings, Settings as DimApiSettings } from '@destinyitemmanager/dim-api-types';
+import {
+  defaultSettings,
+  Settings as DimApiSettings,
+  VaultWeaponGroupingStyle,
+} from '@destinyitemmanager/dim-api-types';
 import { defaultLanguage, DimLanguage } from 'app/i18n';
 
 /**
  * We extend the settings interface so we can try out new settings before committing them to dim-api-types
  */
 export interface Settings extends DimApiSettings {
   language: DimLanguage;
+  vaultArmorGroupingStyle: VaultWeaponGroupingStyle;
 }
 
 export const initialSettingsState: Settings = {
   ...defaultSettings,
   language: defaultLanguage(),
+  vaultArmorGroupingStyle: VaultWeaponGroupingStyle.Inline,
   organizerColumnsWeapons: [
     'icon',
     'name',

src/app/settings/vault-grouping.ts

@@ -13,6 +13,12 @@ export const vaultWeaponGroupingEnabledSelector = createSelector(
   (state) => Boolean(state),
 );
 
+export const vaultWeaponGroupingStyleSelector = (state: RootState) =>
+  settingsSelector(state).vaultWeaponGroupingStyle;
+
+export const vaultArmorGroupingStyleSelector = (state: RootState) =>
+  settingsSelector(state).vaultArmorGroupingStyle;
+
 /**
  * Get a function that will group items according to the user's preferences.
  */

src/app/shell/item-comparators.ts

@@ -372,7 +372,7 @@ export function groupItems(
 ): readonly VaultGroup[] {
   const comparatorsAndGetters = GROUP_BY_GETTERS_AND_COMPARATORS[vaultGrouping];
 
-  // If there are no items, or the grouping is not suppored, return all items in a single group
+  // If there are no items, or the grouping is not supported, return all items in a single group
   if (!items.length || !comparatorsAndGetters) {
     return [{ groupingValue: undefined, icon: { type: 'none' }, items: [...items] }];
   }