diff --git a/config/i18n.json b/config/i18n.json
index e7fa0b2707..f4b3bbce5c 100644
--- a/config/i18n.json
+++ b/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",
diff --git a/src/app/inventory-page/StoreBucket.tsx b/src/app/inventory-page/StoreBucket.tsx
index d65da104cc..9e0ea515f6 100644
--- a/src/app/inventory-page/StoreBucket.tsx
+++ b/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 (