Move ExtraWeapons to ExtraWeaponsGrid

And put it in ExtraContainer

components/extra/ExtraWeaponsGrid/index.scss

@@ -0,0 +1,47 @@
+.ExtraWeapons {
+  #ExtraWeaponGrid {
+    display: grid;
+    gap: $unit-3x;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+
+    @include breakpoint(tablet) {
+      gap: $unit-2x;
+    }
+
+    @include breakpoint(phone) {
+      gap: $unit;
+    }
+
+    .WeaponUnit {
+      .WeaponImage {
+        background: var(--extra-purple-card-bg);
+
+        .icon svg {
+          fill: var(--extra-purple-secondary);
+        }
+      }
+    }
+  }
+
+  .ExtraGrid.Weapons {
+    background: var(--extra-purple-bg);
+    border-radius: $card-corner;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 1.42fr 3fr;
+    justify-content: center;
+
+    @include breakpoint(tablet) {
+      left: auto;
+      max-width: auto;
+      width: 100%;
+    }
+
+    @include breakpoint(phone) {
+      display: flex;
+      gap: $unit-2x;
+      padding: $unit-2x;
+      flex-direction: column;
+    }
+  }
+}

components/extra/ExtraWeaponsGrid/index.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'next-i18next'
+import Switch from '~components/common/Switch'
+import WeaponUnit from '~components/weapon/WeaponUnit'
+
+import type { SearchableObject } from '~types'
+
+import './index.scss'
+import classNames from 'classnames'
+
+// Props
+interface Props {
+  grid: GridArray<GridWeapon>
+  enabled: boolean
+  editable: boolean
+  found?: boolean
+  offset: number
+  removeWeapon: (id: string) => void
+  updateExtra: (enabled: boolean) => void
+  updateObject: (object: SearchableObject, position: number) => void
+  updateUncap: (id: string, position: number, uncap: number) => void
+}
+
+// Constants
+const EXTRA_WEAPONS_COUNT = 3
+
+const ExtraWeaponsGrid = ({
+  grid,
+  enabled,
+  editable,
+  found,
+  offset,
+  removeWeapon,
+  updateExtra,
+  updateObject,
+  updateUncap,
+}: Props) => {
+  const { t } = useTranslation('common')
+
+  const classes = classNames({
+    ExtraWeapons: true,
+    ContainerItem: true,
+    Disabled: !enabled,
+  })
+
+  function onCheckedChange(checked: boolean) {
+    updateExtra(checked)
+  }
+
+  const disabledElement = <></>
+
+  const enabledElement = (
+    <ul id="ExtraWeaponGrid">
+      {Array.from(Array(EXTRA_WEAPONS_COUNT)).map((x, i) => {
+        const itemClasses = classNames({
+          Empty: grid[offset + i] === undefined,
+        })
+
+        return (
+          <li className={itemClasses} key={`grid_unit_${i}`}>
+            <WeaponUnit
+              editable={editable}
+              position={offset + i}
+              unitType={1}
+              gridWeapon={grid[offset + i]}
+              removeWeapon={removeWeapon}
+              updateObject={updateObject}
+              updateUncap={updateUncap}
+            />
+          </li>
+        )
+      })}
+    </ul>
+  )
+
+  return (
+    <div className={classes}>
+      <div className="Header">
+        <h3>{t('extra_weapons')}</h3>
+        {editable ? (
+          <Switch
+            name="ExtraWeapons"
+            checked={enabled}
+            onCheckedChange={onCheckedChange}
+          />
+        ) : (
+          ''
+        )}
+      </div>
+      {enabled ? enabledElement : ''}
+    </div>
+  )
+}
+
+export default ExtraWeaponsGrid

components/weapon/ExtraWeapons/index.scss

@@ -1,59 +0,0 @@
-.ExtraGrid.Weapons {
-  background: var(--extra-purple-bg);
-  border-radius: $card-corner;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: 1.42fr 3fr;
-  justify-content: center;
-  margin: 20px auto;
-  max-width: calc($grid-width + 20px);
-  padding: $unit-2x $unit-2x $unit-2x 0;
-  position: relative;
-  left: $unit;
-
-  @include breakpoint(tablet) {
-    left: auto;
-    max-width: auto;
-    width: 100%;
-  }
-
-  @include breakpoint(phone) {
-    display: flex;
-    gap: $unit-2x;
-    padding: $unit-2x;
-    flex-direction: column;
-  }
-
-  & > span {
-    color: var(--extra-purple-text);
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    justify-content: center;
-    line-height: 1.2;
-    font-weight: 500;
-    text-align: center;
-  }
-
-  #ExtraWeapons {
-    display: grid;
-    gap: $unit-3x;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-
-    @include breakpoint(tablet) {
-      gap: $unit-2x;
-    }
-
-    @include breakpoint(phone) {
-      gap: $unit;
-    }
-  }
-
-  .WeaponUnit .WeaponImage {
-    background: var(--extra-purple-card-bg);
-  }
-
-  .WeaponUnit .WeaponImage .icon svg {
-    fill: var(--extra-purple-secondary);
-  }
-}

components/weapon/ExtraWeapons/index.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'next-i18next'
-import WeaponUnit from '~components/weapon/WeaponUnit'
-
-import type { SearchableObject } from '~types'
-
-import './index.scss'
-
-// Props
-interface Props {
-  grid: GridArray<GridWeapon>
-  editable: boolean
-  found?: boolean
-  offset: number
-  removeWeapon: (id: string) => void
-  updateObject: (object: SearchableObject, position: number) => void
-  updateUncap: (id: string, position: number, uncap: number) => void
-}
-
-const ExtraWeapons = (props: Props) => {
-  const numWeapons: number = 3
-  const { t } = useTranslation('common')
-
-  return (
-    <div className="ExtraGrid Weapons">
-      <span>{t('extra_weapons')}</span>
-      <ul id="ExtraWeapons">
-        {Array.from(Array(numWeapons)).map((x, i) => {
-          return (
-            <li key={`grid_unit_${i}`}>
-              <WeaponUnit
-                editable={props.editable}
-                position={props.offset + i}
-                unitType={1}
-                gridWeapon={props.grid[props.offset + i]}
-                removeWeapon={props.removeWeapon}
-                updateObject={props.updateObject}
-                updateUncap={props.updateUncap}
-              />
-            </li>
-          )
-        })}
-      </ul>
-    </div>
-  )
-}
-
-export default ExtraWeapons

components/weapon/WeaponGrid/index.tsx

@@ -9,7 +9,7 @@ import debounce from 'lodash.debounce'
 
 import Alert from '~components/common/Alert'
 import WeaponUnit from '~components/weapon/WeaponUnit'
-import ExtraWeapons from '~components/weapon/ExtraWeapons'
+import ExtraWeaponsGrid from '~components/extra/ExtraWeaponsGrid'
 import WeaponConflictModal from '~components/weapon/WeaponConflictModal'
 
 import api from '~utils/api'
@@ -348,15 +348,19 @@ const WeaponGrid = (props: Props) => {
     )
   })
 
-  const extraGridElement = (
+  const extraElement = (
-    <ExtraWeapons
+    <ExtraContainer>
+      <ExtraWeaponsGrid
         grid={appState.grid.weapons.allWeapons}
+        enabled={appState.party.extra}
         editable={props.editable}
         offset={numWeapons}
         removeWeapon={removeWeapon}
+        updateExtra={props.updateExtra}
         updateObject={receiveWeaponFromSearch}
         updateUncap={initiateUncapUpdate}
       />
+    </ExtraContainer>
   )
 
   const conflictModal = () => {