fix new items in inventory

client/src/components/inventory.tsx

@@ -128,9 +128,8 @@ export function Documentation({name, type, handleClose}) {
 }
 
 /** The panel (on the welcome page) showing the user's inventory with tactics, definitions, and lemmas */
-export function InventoryPanel({visible = true}) {
+export function InventoryPanel({levelInfo, visible = true}) {
   const gameId = React.useContext(GameIdContext)
-  const inventory = useLoadInventoryOverviewQuery({game: gameId})
 
   // The inventory is overlayed by the doc entry of a clicked item
   const [inventoryDoc, setInventoryDoc] = useState<{name: string, type: string}>(null)
@@ -141,7 +140,7 @@ export function InventoryPanel({visible = true}) {
     {inventoryDoc ?
       <Documentation name={inventoryDoc.name} type={inventoryDoc.type} handleClose={closeInventoryDoc}/>
       :
-      <Inventory levelInfo={inventory.data} openDoc={setInventoryDoc} enableAll={true}/>
+      <Inventory levelInfo={levelInfo} openDoc={setInventoryDoc} enableAll={true}/>
     }
   </div>
 }

client/src/components/level.tsx

@@ -360,7 +360,7 @@ function PlayableLevel() {
                         closeImpressum={closeImpressum}
                         codeviewRef={codeviewRef}
                         visible={pageNumber == 0} />
-                      <InventoryPanel visible={pageNumber == 1} />
+                      <InventoryPanel levelInfo={level?.data} visible={pageNumber == 1} />
                     </div>
                   </>
                 :
@@ -370,7 +370,7 @@ function PlayableLevel() {
                       impressum={impressum}
                       closeImpressum={closeImpressum}
                       codeviewRef={codeviewRef} />
-                    <InventoryPanel />
+                    <InventoryPanel levelInfo={level?.data} />
                   </Split>
                 }
               </MonacoEditorContext.Provider>

client/src/components/welcome.tsx

@@ -9,7 +9,7 @@ import { faGlobe, faBook, faArrowRight, faArrowLeft } from '@fortawesome/free-so
 import { GameIdContext } from '../app'
 import { useAppDispatch } from '../hooks'
 import { changedOpenedIntro, selectOpenedIntro } from '../state/progress'
-import { useGetGameInfoQuery } from '../state/api'
+import { useGetGameInfoQuery, useLoadInventoryOverviewQuery } from '../state/api'
 import { Button } from './button'
 import { MobileContext } from './infoview/context'
 import { InventoryPanel } from './inventory'
@@ -83,6 +83,7 @@ function Welcome() {
   const openedIntro = useSelector(selectOpenedIntro(gameId))
   // On mobile, there are multiple pages to switch between
   const [pageNumber, setPageNumber] = useState(openedIntro ? 1 : 0)
+  const inventory = useLoadInventoryOverviewQuery({game: gameId})
 
   // set the window title
   useEffect(() => {
@@ -104,14 +105,14 @@ function Welcome() {
         : pageNumber == 1 ?
           <WorldTreePanel worlds={gameInfo.data?.worlds} worldSize={gameInfo.data?.worldSize} />
         :
-          <InventoryPanel />
+          <InventoryPanel levelInfo={inventory?.data} />
         )}
       </>
     :
       <Split className="welcome" minSize={0} snapOffset={200}  sizes={[40, 35, 25]}>
         <IntroductionPanel introduction={gameInfo.data?.introduction} />
         <WorldTreePanel worlds={gameInfo.data?.worlds} worldSize={gameInfo.data?.worldSize} />
-        <InventoryPanel />
+        <InventoryPanel levelInfo={inventory?.data} />
       </Split>
   }
   <PrivacyPolicy />