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 ( {classTypeOrder.map((classType) => ( - +
{sortItems(itemsByClass.get(classType)!).map((item) => ( ))} - +
))}
); diff --git a/src/app/inventory-page/StoreBuckets.tsx b/src/app/inventory-page/StoreBuckets.tsx index b7dbf93b0a..0e46e379ce 100644 --- a/src/app/inventory-page/StoreBuckets.tsx +++ b/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({
{labels && ( diff --git a/src/app/settings/SettingsPage.tsx b/src/app/settings/SettingsPage.tsx index 43fd45b6b3..4adebb5118 100644 --- a/src/app/settings/SettingsPage.tsx +++ b/src/app/settings/SettingsPage.tsx @@ -368,6 +368,17 @@ export default function SettingsPage() { } /> )} + + setSetting( + setting, + checked ? VaultWeaponGroupingStyle.Lines : VaultWeaponGroupingStyle.Inline, + ) + } + />
diff --git a/src/app/settings/initial-settings.ts b/src/app/settings/initial-settings.ts index 2904fd6cfe..97e76f4c0b 100644 --- a/src/app/settings/initial-settings.ts +++ b/src/app/settings/initial-settings.ts @@ -1,4 +1,8 @@ -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'; /** @@ -6,11 +10,13 @@ import { defaultLanguage, DimLanguage } from 'app/i18n'; */ export interface Settings extends DimApiSettings { language: DimLanguage; + vaultArmorGroupingStyle: VaultWeaponGroupingStyle; } export const initialSettingsState: Settings = { ...defaultSettings, language: defaultLanguage(), + vaultArmorGroupingStyle: VaultWeaponGroupingStyle.Inline, organizerColumnsWeapons: [ 'icon', 'name', diff --git a/src/app/settings/vault-grouping.ts b/src/app/settings/vault-grouping.ts index 9da91fa749..ca1512c4a0 100644 --- a/src/app/settings/vault-grouping.ts +++ b/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. */ diff --git a/src/app/shell/item-comparators.ts b/src/app/shell/item-comparators.ts index 9ffbd62e3a..1a9290f1f3 100644 --- a/src/app/shell/item-comparators.ts +++ b/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] }]; }