Vault under

Author: bhollis

src/app/inventory-page/DesktopStores.m.scss

@@ -14,7 +14,7 @@
   display: grid;
   grid-template-rows: 46px 1fr;
   padding: 16px var(--inventory-column-padding) 6px 0;
-  align-items: center;
+  place-items: center;
 }
 
 .singleCharacter {
@@ -34,11 +34,21 @@
   align-items: center;
 
   @include interactive($hover: true) {
-    transform: scale(1.5);
+    transform: scale(1.25);
     color: var(--theme-accent-primary);
   }
 }
 
+.vaultUnderButton {
+  composes: singleCharacterButton;
+
+  font-size: 20px;
+
+  &.under > span {
+    transform: rotate(90deg);
+  }
+}
+
 .inventoryContainer {
   :global(.issue-banner-shown) & {
     @include desktop {

src/app/inventory-page/DesktopStores.m.scss.d.ts

@@ -6,8 +6,8 @@ import { DimStore } from 'app/inventory/store-types';
 import { findItemsByBucket, getCurrentStore, getVault } from 'app/inventory/stores-helpers';
 import IssueAwarenessBanner from 'app/issue-awareness-banner/IssueAwarenessBanner';
 import ItemFeedSidebar from 'app/item-feed/ItemFeedSidebar';
-import { useSetSetting } from 'app/settings/hooks';
-import { AppIcon, maximizeIcon, minimizeIcon } from 'app/shell/icons';
+import { useSetSetting, useSetting } from 'app/settings/hooks';
+import { AppIcon, levelDownIcon, levellingIcon, maximizeIcon, minimizeIcon } from 'app/shell/icons';
 import StoreStats from 'app/store-stats/StoreStats';
 import { useEventBusListener } from 'app/utils/hooks';
 import { isClassCompatible } from 'app/utils/item-utils';
@@ -36,6 +36,7 @@ export default function DesktopStores({ stores, buckets, singleCharacter }: Prop
   const currentStore = getCurrentStore(stores);
   const setSetting = useSetSetting();
   useEventBusListener(locateItem$, itemPop);
+  const [vaultUnder, setVaultUnder] = useSetting('vaultUnder');
 
   // Hide the single character toggle for players with only one character
   // unless they own items that cannot be used by their only character.
@@ -59,6 +60,7 @@ export default function DesktopStores({ stores, buckets, singleCharacter }: Prop
   }
 
   const toggleSingleCharacter = () => setSetting('singleCharacter', !singleCharacter);
+  const toggleVaultUnder = () => setSetting('vaultUnder', !vaultUnder);
 
   return (
     <div className={styles.inventoryContainer}>
@@ -93,6 +95,18 @@ export default function DesktopStores({ stores, buckets, singleCharacter }: Prop
                 <AppIcon icon={singleCharacter ? minimizeIcon : maximizeIcon} />
               </button>
             )}
+            <button
+              type="button"
+              className={clsx(styles.vaultUnderButton, { [styles.under]: !vaultUnder })}
+              onClick={toggleVaultUnder}
+              title={
+                singleCharacter
+                  ? t('Settings.ExpandSingleCharacter')
+                  : `${t('Settings.SingleCharacter')}: ${t('Settings.SingleCharacterExplanation')}`
+              }
+            >
+              <AppIcon icon={vaultUnder ? levellingIcon : levelDownIcon} />
+            </button>
           </div>
           {$featureFlags.issueBanner && <IssueAwarenessBanner />}
         </HeaderShadowDiv>
@@ -103,6 +117,7 @@ export default function DesktopStores({ stores, buckets, singleCharacter }: Prop
           currentStore={currentStore}
           buckets={buckets}
           singleCharacter={singleCharacter}
+          vaultUnder={vaultUnder}
         />
       </div>
       {$featureFlags.itemFeed && <ItemFeedSidebar />}
@@ -136,6 +151,7 @@ interface InventoryContainerProps {
   currentStore: DimStore;
   vault: DimStore;
   singleCharacter: boolean;
+  vaultUnder: boolean;
 }
 
 function CollapsibleContainer({
@@ -146,6 +162,7 @@ function CollapsibleContainer({
   inventoryBucket,
   vault,
   singleCharacter,
+  vaultUnder,
 }: {
   category: string;
   inventoryBucket: InventoryBucket[];
@@ -168,6 +185,7 @@ function CollapsibleContainer({
           vault={vault}
           currentStore={currentStore}
           singleCharacter={singleCharacter}
+          vaultUnder={vaultUnder}
         />
       ))}
     </InventoryCollapsibleTitle>
@@ -180,6 +198,7 @@ function StoresInventory({
   currentStore,
   vault,
   singleCharacter,
+  vaultUnder,
 }: InventoryContainerProps) {
   return (
     <>
@@ -193,6 +212,7 @@ function StoresInventory({
           singleCharacter={singleCharacter}
           category={category}
           inventoryBucket={inventoryBucket}
+          vaultUnder={vaultUnder}
         />
       ))}
       {stores[0].destinyVersion === 1 && <D1ReputationSection stores={stores} />}

src/app/inventory-page/DesktopStores.tsx

@@ -1,3 +1,5 @@
+@use '../variables.scss' as *;
+
 /* The bucket label shown on mobile only */
 .bucketLabel {
   display: flex;
@@ -34,3 +36,11 @@
 .singleCharacterAccountWideRow {
   grid-template-columns: 1fr 1fr;
 }
+
+.vaultUnder {
+  > *:last-child {
+    grid-column: 1 / -1;
+    margin-top: 4px;
+    margin-bottom: 16px;
+  }
+}

src/app/inventory-page/StoreBuckets.m.scss

@@ -21,13 +21,15 @@ export function StoreBuckets({
   currentStore,
   labels,
   singleCharacter,
+  vaultUnder = false,
 }: {
   bucket: InventoryBucket;
   stores: DimStore[];
   vault: DimStore;
   currentStore: DimStore;
   labels?: boolean;
   singleCharacter: boolean;
+  vaultUnder?: boolean;
 }) {
   let content: React.ReactNode;
 
@@ -88,6 +90,7 @@ export function StoreBuckets({
     <div
       className={clsx('store-row', {
         [styles.singleCharacterAccountWideRow]: bucket.accountWide && singleCharacter,
+        [styles.vaultUnder]: vaultUnder,
       })}
     >
       {labels && (

src/app/inventory-page/StoreBuckets.m.scss.d.ts

@@ -2,11 +2,17 @@ import { defaultSettings, Settings as DimApiSettings } from '@destinyitemmanager
 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
+ * We extend the settings interface so we can try out new settings before
+ * committing them to dim-api-types.
+ *
+ * Note: Nowadays, you *do* have to update dim-api-types and migrate the DIM
+ * backend before using new settings in production - otherwise, the setting will
+ * not be saved..
  */
 export interface Settings extends DimApiSettings {
   language: DimLanguage;
   armorCompare: 'current' | 'base' | 'baseMasterwork';
+  vaultUnder: boolean;
 }
 
 export const initialSettingsState: Settings = {
@@ -40,4 +46,5 @@ export const initialSettingsState: Settings = {
   ],
   organizerColumnsGhost: ['icon', 'name', 'tag', 'perks', 'notes'],
   armorCompare: 'baseMasterwork',
+  vaultUnder: false,
 };

src/app/inventory-page/StoreBuckets.tsx

@@ -21,6 +21,7 @@ export const copyIcon = 'fas fa-copy';
 export const downloadIcon = 'fas fa-file-export';
 export const sendIcon = 'fas fa-envelope';
 export const clearIcon = 'fas fa-eraser';
+export const levelDownIcon = 'fas fa-level-down-alt';
 export const levellingIcon = 'fas fa-level-up-alt';
 export const lockIcon = 'fas fa-lock';
 export const unlockedIcon = 'fas fa-unlock';

src/app/settings/initial-settings.ts

@@ -171,6 +171,9 @@
 .fa-less-than-equal:before {
   content: fa-content($fa-var-less-than-equal);
 }
+.fa-level-down-alt:before {
+  content: fa-content($fa-var-level-down-alt);
+}
 .fa-level-up-alt:before {
   content: fa-content($fa-var-level-up-alt);
 }