commit f4af30c8a33e9941aa48d6da411fd5a5d89adf0a
Author: Fantič <58391275+FantaFantic@users.noreply.github.com>
Date:   Mon Nov 27 18:42:54 2023 +0100

    re #10895: ItemView redesign, refactor

diff --git a/src/components/item/ItemTabBar.tsx b/src/components/item/ItemTabBar.tsx
index e61b73d..354a7df 100644
--- a/src/components/item/ItemTabBar.tsx
+++ b/src/components/item/ItemTabBar.tsx
@@ -1,4 +1,4 @@
-import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box, Container, VStack, Icon, ArrowBackIcon, ChevronLeftIcon, ChevronRightIcon, useToast } from "native-base";
+import { HStack, CircleIcon, View, ScrollView, Button, Center, Heading, Pressable, Text, Box, Container, VStack, Icon, ArrowBackIcon, ChevronLeftIcon, ChevronRightIcon, useToast, Divider } from "native-base";
 import { CertaintyWithColors } from "../../stores/reducers/itemSlice";
 import { Certainty, Concordance } from "../../types/item";
 import LoadingBox from "../loading/LoadingBox";
@@ -7,16 +7,18 @@ import { RootStackParamList } from "../../pages/Navigation";
 import { InfoToast } from "../toast/InfoToast";
 
 // custom render Tab
-const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: Concordance[], index: number, onIndexChange: any, onBackPressed: any, navigation: DrawerNavigationProp<RootStackParamList, "Item", undefined>, nextItem?: string | boolean, prevItem?:string | boolean }) => {
+const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: Concordance[], index: number, onIndexChange: any, onBackPressed: any, navigation: DrawerNavigationProp<RootStackParamList, "Item", undefined>, nextItem?: string | boolean, prevItem?: string | boolean }) => {
 
     const { concordances, onIndexChange, index, onBackPressed, nextItem, prevItem } = props
 
     const toast = useToast();
 
+    console.log(concordances)
+
     if (concordances && concordances.length > 0) {
         return (
             <VStack>
-                <HStack h="16" >
+                {/* <HStack h="16" >
                     <HStack width="50%">
                         <Button variant="ghost" size="lg" marginLeft={0}
                             onPress={onBackPressed}
@@ -69,43 +71,50 @@ const ItemTabBar = (props: { navigationState: { routes: any[] }, concordances: C
                             </Button>
                         </HStack>
                     </HStack>
-                </HStack>
-                <View h="8">
+                </HStack> */}
+                <View height={16} backgroundColor={"#F5F4F1"}>
                     <ScrollView contentContainerStyle={{ flexGrow: 1 }} flex="1" horizontal={true}>
                         {props.navigationState.routes.length > 1 ? (
                             <HStack borderBottomWidth={1} flex="1" borderColor="light.400">
                                 {props.navigationState.routes.map((route, i) => {
                                     return (
-                                        <Pressable key={i} onPress={() => { onIndexChange(i) }}>
-                                            <HStack alignItems={"center"} width="32" borderColor="light.400" height="100%" borderBottomWidth={i == index ? 2 : 0}>
+                                        <Pressable onPress={() => { onIndexChange(i) }} width="100%">
+                                        <VStack alignItems={"center"} >
+                                            <HStack alignItems={"center"} width={32}>
                                                 <CircleIcon
-                                                    marginLeft="5"
                                                     size="2"
                                                     color={CertaintyWithColors[concordances[i]?.cert ?? Certainty.Unknown].color}
                                                 />
-                                                <Text marginLeft="5%">
-                                                    {i == index ? <Text bold>{concordances[i]?.id}</Text> : concordances[i]?.id}
-
+                                                <Text marginLeft={1}>
+                                                    <Text bold>{concordances[i]?.id}</Text>
                                                 </Text>
                                             </HStack>
-                                        </Pressable>
+                                            {i == index && <Divider color="primary" borderWidth={1} width={30} mt={2} />}
+                                        </VStack>
+        
+                                    </Pressable>
                                     );
                                 })}
                             </HStack>
                         ) : (
                             // One item only
+
+
                             <Pressable onPress={() => { onIndexChange(0) }} width="100%">
-                                            <HStack alignItems={"center"} width="100%" borderColor="light.400" height="100%" borderBottomWidth={2}>
-                                                <CircleIcon
-                                                    marginLeft="42%"
-                                                    size="2"
-                                                    color={CertaintyWithColors[concordances[0]?.cert ?? Certainty.Unknown].color}
-                                                />
-                                                <Text marginLeft="2%">
-                                                    <Text bold>{concordances[0]?.id}</Text>
-                                                </Text>
-                                            </HStack>
-                                        </Pressable>
+                                <VStack alignItems={"center"} >
+                                    <HStack alignItems={"center"} width="100%">
+                                        <CircleIcon
+                                            size="2"
+                                            color={CertaintyWithColors[concordances[0]?.cert ?? Certainty.Unknown].color}
+                                        />
+                                        <Text marginLeft={1}>
+                                            <Text bold>{concordances[0]?.id}</Text>
+                                        </Text>
+                                    </HStack>
+                                    <Divider color="primary" borderWidth={1} width={30} mt={2} />
+                                </VStack>
+
+                            </Pressable>
                         )}
                     </ScrollView>
                 </View>
diff --git a/src/components/item/ItemView.tsx b/src/components/item/ItemView.tsx
index 442d69f..f44b537 100644
--- a/src/components/item/ItemView.tsx
+++ b/src/components/item/ItemView.tsx
@@ -1,4 +1,4 @@
-import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex, ChevronLeftIcon, ChevronRightIcon } from "native-base"
+import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex, ChevronLeftIcon, ChevronRightIcon, Divider, Pressable } from "native-base"
 import React, { useCallback, useEffect, useState } from "react"
 import { Item } from "../../types/item"
 import { Note } from "../../types/note"
@@ -14,6 +14,7 @@ import { getItemNotes } from "../../stores/actions/itemThunks"
 import { Dimensions } from "react-native";
 import { DrawerNavigationProp } from "@react-navigation/drawer"
 import { RootStackParamList } from "../../pages/Navigation"
+import { select } from "d3"
 
 interface ItemDetailProps {
     item: Item,
@@ -23,113 +24,168 @@ interface ItemDetailProps {
     navigation: DrawerNavigationProp<RootStackParamList, "Item", undefined>
 }
 
-const ItemDetail = (props: { item: Item, itemLoading: boolean }) => {
+const ItemDetail = (props: ItemDetailProps) => {
     const item = props.item;
 
     const [selectedImage, setSelectedImage] = useState<number>(0);
 
+    const [images, setImages] = useState<{ imageUrl: string, title: string }[]>([]);
+
+
+    useEffect(() => {
+        if (item.images?.[0]) {
+            setImages([item.images[0], item.images[0], item.images[0], item.images[0], item.images[0], item.images[0], item.images[0]])
+        }
+    }, [item])
+
     return (<>
         {
             item && props.itemLoading ?
                 (<LoadingBox text="Item loading..." />)
                 :
                 (
-                    <ScrollView flex="1">
+                    <ScrollView flex="1" paddingLeft={2.5} paddingRight={2.5}>
                         <VStack>
                             <HStack marginLeft={2.5} alignItems={"center"}>
                                 <VStack flex={1} marginTop={3.5}>
-                                    <Text>
+                                    <Text fontSize={13} color="#4D4D4D">
                                         {item.authorDisplayName ? item.authorDisplayName : item.authorName}
                                     </Text>
-                                    <Heading size="sm">
+                                    <Heading marginTop={1} fontSize={18} color="#4D4D4D">
                                         {item.workName}
                                     </Heading>
+
                                 </VStack>
                                 <Box marginLeft="auto" marginTop={0}> {/* marginLeft: "auto" pushes the Box to the right */}
-                                    <Button variant="outline" size="md">
-                                        {item?.concordances?.[0]?.id}
+                                    <Button variant="outline" backgroundColor={"#F4DFAB"} borderRadius={8} size="sm" padding={1.5} >
+                                        <Text color="#654B07" fontSize={14}>
+                                            {item?.concordances?.[0]?.id}
+                                        </Text>
                                     </Button>
                                 </Box>
                             </HStack>
-                            <Card shadow="1" marginTop={5}>
+
+
+                            <View marginTop={5} backgroundColor="#F5F4F1" borderRadius={10} borderColor="#F5F4F1" padding={2}>
                                 {item.inventoryItem &&
                                     <VStack>
                                         <Text italic>
-                                            <Text color="light.500">Inventory item: </Text>
+                                            <Text color="#654B07" italic fontWeight={"semibold"}>Inventory item: </Text>
                                             {item.inventoryItem}
                                         </Text>
                                         <Text italic marginTop="2.5%">
                                             {item.searchSubjects != undefined && item?.searchSubjects?.map((subject, index) => (
-                                                item.searchSubjects && index < item.searchSubjects.length - 1 ? (subject + ", ") : (subject)
+                                                subject != "" ?
+                                                    item.searchSubjects && index < item.searchSubjects.length - 1 ? (subject + ", ") : (subject)
+                                                    :
+                                                    ""
                                             ))}
                                         </Text>
                                     </VStack>}
-                            </Card>
+                            </View>
                             {item.fullView && item.images && item.images.length > 0 && (
-                                <VStack background="primary.100" marginTop={5} alignItems="center" justifyContent="center">
-                                    <Text marginBottom={2}>Resembling objects {selectedImage + 1 + "/" + item.images.length}</Text>
+                                <VStack marginTop={5} alignItems="center" justifyContent="center" backgroundColor="#F5F4F1" borderRadius={10} borderColor="#F5F4F1" padding={2}>
+
+                                    <Box marginTop={2.5} borderWidth={1} width={Dimensions.get('window').width - 110} alignItems="center" backgroundColor="red" borderTopRadius={10} >
+                                        <Text marginBottom={2}>{"Resembling objects"}
+                                            {selectedImage + 1 + "/" + item.images.length + item.images[selectedImage].cert + item.images[selectedImage].relationship_type}
+                                        </Text>
+                                    </Box>
+
                                     <HStack space={4}>
                                         <Button variant="ghost" size="lg" onPress={() => {
                                             if (item.images && selectedImage - 1 >= 0) {
                                                 setSelectedImage(selectedImage - 1);
                                             }
                                         }} leftIcon={<ChevronLeftIcon size="lg" />} />
-                                        <Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.images[selectedImage].imageUrl }} />
+                                        <Image size={Dimensions.get('window').width - 110} alt="image" source={{ uri: IMAGE_URL + "/" + item.images[selectedImage].imageUrl }} />
                                         <Button variant="ghost" size="lg" onPress={() => {
                                             if (item.images && selectedImage + 1 < item.images.length) {
                                                 setSelectedImage(selectedImage + 1);
                                             }
                                         }} leftIcon={<ChevronRightIcon size="lg" />} />
                                     </HStack>
+                                    <ScrollView horizontal marginBottom={2.5} marginTop={5}>
+
+                                        {item.images.map((image, index) => (
+                                            <Pressable
+                                                onPress={() => { setSelectedImage(index); }}>
+                                                <Image marginLeft={2.5} size={90} alt="image" source={{ uri: IMAGE_URL + "/" + image.imageUrl }}
+                                                    borderColor={selectedImage == index ? "#1782FF" : undefined}
+                                                    borderWidth={3}
+                                                />
+                                            </Pressable>
+
+                                        ))}
+                                    </ScrollView>
                                 </VStack>
                             )}
                             {item.fullView && (
-                                <Card shadow={1} marginTop={5} marginBottom={5}>
+                                <View marginTop={5} backgroundColor="#F5F4F1" borderRadius={10} borderColor="#F5F4F1" padding={2} marginBottom={5}>
                                     {item.authorName &&
                                         <HStack>
-                                            <Text italic marginTop={2.5}>
-                                                <Text color="light.500">Author name: </Text>
+                                            <Text marginTop={2.5}>
+                                                <Text color="#654B07" italic fontWeight={"semibold"}>Author name: </Text>
                                                 {item.authorName}
                                             </Text>
                                         </HStack>}
                                     {item.title &&
                                         <HStack>
-                                            <Text italic marginTop={2.5}>
-                                                <Text color="light.500">Title: </Text>
+                                            <Text marginTop={2.5}>
+                                                <Text color="#654B07" italic fontWeight={"semibold"}>Title: </Text>
                                                 {item.title}
                                             </Text>
                                         </HStack>}
                                     {item.institution &&
                                         <HStack>
-                                            <Text italic marginTop={2.5}>
-                                                <Text color="light.500">Institution: </Text>
+                                            <Text marginTop={2.5}>
+                                                <Text color="#654B07" italic fontWeight={"semibold"}>Institution: </Text>
                                                 {item.institution.name}, Inv. No. {item.institution.inventoryNumber}, {item.institution.city} {"(" + item.institution.country + ")"}
                                             </Text>
                                         </HStack>}
                                     {item.repository &&
                                         <HStack>
-                                            <Text italic marginTop={2.5}>
-                                                <Text color="light.500">Repository: </Text>
+                                            <Text marginTop={2.5}>
+                                                <Text color="#654B07" italic fontWeight={"semibold"}>Repository: </Text>
                                                 {item.repository}
                                             </Text>
                                         </HStack>}
                                     {item.provenance &&
                                         <HStack>
-                                            <Text italic marginTop={2.5}>
-                                                <Text color="light.500">Provenance: </Text>
+                                            <Text marginTop={2.5}>
+                                                <Text color="#654B07" italic fontWeight={"semibold"}>Provenance: </Text>
                                                 {item.provenance}
                                             </Text>
                                         </HStack>}
                                     {item.description &&
                                         <HStack>
-                                            <Text italic marginTop={2.5}>
-                                                <Text color="light.500">Description: </Text>
+                                            <Text marginTop={2.5}>
+                                                <Text color="#654B07" italic fontWeight={"semibold"}>Description: </Text>
                                                 {item.description}
                                             </Text>
                                         </HStack>}
-                                </Card>)}
+                                </View>)}
+
+                            {
+                                item.room && item.room.id &&
+                                <Flex direction="row" alignItems="center" justify="flex-end">
+                                    <Button
+                                        onPress={() => props.navigation.navigate("Plan", { roomId: item?.room?.id, placeId: undefined })}
+                                        variant={"link"}
+                                        backgroundColor={"#F4DFAB"}
+                                        borderRadius={7}
+                                        marginTop={0}
+                                        marginBottom={5}
+                                        width={125}
+                                        rightIcon={<ChevronRightIcon size="xs" />}>
+                                        Show in map
+                                    </Button>
+                                </Flex>
+
+                            }
+
                         </VStack>
-                    </ScrollView>
+                    </ScrollView >
                 )
         }</>
     );
@@ -152,7 +208,7 @@ const ItemNotes = (props: { item: Item, notes: Note[], notesLoading: boolean, na
             dispatch(getItemNotes({ item: props.item, relatedComments: showRelatedComments }));
         }
     }, [triggerRefresh])
-    
+
     const toggleRelatedComments = useCallback(() => {
         if (!props.notesLoading) {
 
@@ -161,7 +217,7 @@ const ItemNotes = (props: { item: Item, notes: Note[], notesLoading: boolean, na
             setShowRelatedComments(value);
             dispatch(getItemNotes({ item: props.item, relatedComments: value }));
         }
-      }, [showRelatedComments]);
+    }, [showRelatedComments]);
 
 
     const handleCreateItemComment = useCallback(
@@ -183,7 +239,7 @@ const ItemNotes = (props: { item: Item, notes: Note[], notesLoading: boolean, na
         props.notesLoading ?
             (<LoadingBox text="Notes loading..." />)
             :
-            (<VStack>
+            (<VStack paddingLeft={2.5} paddingRight={2.5}>
                 <Flex direction="row" alignItems="center" justify="flex-end">
                     <Text fontSize={"12"}>Show related comments</Text>
                     <Switch value={showRelatedComments} onChange={toggleRelatedComments} size="md" />
@@ -213,11 +269,11 @@ const ItemView = (props: ItemDetailProps) => {
     }
 
     return (
-        <Box marginLeft={2.5} marginRight={2.5}>
+        <Box>
 
             <Box height={Dimensions.get('window').height - 210}>
                 {itemShown ? (
-                    <ItemDetail itemLoading={itemLoading} item={props.item} />
+                    <ItemDetail itemLoading={props.itemLoading} item={props.item} notesLoading={props.notesLoading} notes={props.notes} navigation={props.navigation} />
                 ) : (
                     <ItemNotes item={props.item} notesLoading={props.notesLoading} notes={props.notes} navigation={props.navigation} />
                 )}
@@ -226,18 +282,28 @@ const ItemView = (props: ItemDetailProps) => {
             {/* item notes switch tab */}
             <HStack alignItems="center">
                 <Button
-                    variant={itemShown ? "subtle" : "outline"}
+                    variant={"unstyled"}
                     w="50%"
                     onPress={handleItemClick}
                 >
-                    Item
+                    <VStack alignItems={"center"}>
+                        <Text color="primary" bold={itemShown} mb={itemShown ? undefined : 2}>
+                            Item
+                        </Text>
+                        {itemShown && <Divider borderWidth={1} width={60} mt={2} color="primary" />}
+                    </VStack>
                 </Button>
                 <Button
-                    variant={itemShown ? "outline" : "subtle"}
+                    variant={"unstyled"}
                     w="50%"
                     onPress={handleNotesClick}
                 >
-                    Notes
+                    <VStack alignItems={"center"}>
+                        <Text color="primary" bold={!itemShown} mb={!itemShown ? undefined : 2}>
+                            Notes
+                        </Text>
+                        {!itemShown && <Divider borderWidth={1} width={60} mt={2} color="primary" />}
+                    </VStack>
                 </Button>
             </HStack>
         </Box>
diff --git a/src/components/listView/ListViewInventoryGroup.tsx b/src/components/listView/ListViewInventoryGroup.tsx
index 3d5090f..46c96e7 100644
--- a/src/components/listView/ListViewInventoryGroup.tsx
+++ b/src/components/listView/ListViewInventoryGroup.tsx
@@ -92,12 +92,12 @@ const ListViewInventoryGroup = (props: ListViewInventoryGroupProps) => {
         }
     }, [isExpanded])
 
-    // Po načtení prvních data zůstal inventory results zavřený...  -> zakomentováno
-    useEffect(() => {
-        if (loading) {
-            setIsExpanded(false)
-        }
-    }, [loading])
+    // Proč by se mělo zavírat když loading? stejně nic uvnitř není, pak akorát musí znovu kliknout pro otevření aneví že už je načteno... double click nucený
+    // useEffect(() => {
+    //     if (loading) {
+    //         setIsExpanded(false)
+    //     }
+    // }, [loading])
 
     useEffect(() => {
         setIsInventoryDataLoading(inventoriesDataLoading[props.inventoryName] ? inventoriesDataLoading[props.inventoryName] : false)
diff --git a/src/components/plan/CastlePlanView.tsx b/src/components/plan/CastlePlanView.tsx
index 4307c95..a6f0b3d 100644
--- a/src/components/plan/CastlePlanView.tsx
+++ b/src/components/plan/CastlePlanView.tsx
@@ -292,12 +292,12 @@ const CastlePlanView = (props: { mapImage: PlanImage, roomList: Room[], selected
         >
             {/* control panel */}
             <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
-                <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={selectedRoom ? 1 : -2} onPress={handleFullScreenPressed}>
+                <Pressable padding={1.5} backgroundColor={"primary"} borderRadius={5} marginRight={selectedRoom ? 1 : -2} onPress={handleFullScreenPressed}>
                     <FullscreenIcon color="white" />
                 </Pressable>
                 {
                     selectedRoom &&
-                    <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => { zoomToRoom(selectedRoom) }}>
+                    <Pressable padding={1.5} backgroundColor={"primary"} borderRadius={5} marginRight={-2} onPress={() => { zoomToRoom(selectedRoom) }}>
                         <ExitfullscreenIcon color="white" />
                     </Pressable>
                 }
diff --git a/src/pages/PlanViewPage.tsx b/src/pages/PlanViewPage.tsx
index 5b26230..b81b326 100644
--- a/src/pages/PlanViewPage.tsx
+++ b/src/pages/PlanViewPage.tsx
@@ -13,6 +13,7 @@ import ListView from "../components/listView/ListView"
 import CastlePlanView from "../components/plan/CastlePlanView"
 
 import { Dimensions } from 'react-native';
+import { login } from "../stores/actions/userThunks"
 
 const PlanViewPage = ({ route, navigation }: DrawerScreenProps<RootStackParamList, 'Plan'>) => {
 
@@ -277,7 +278,7 @@ const PlanViewPage = ({ route, navigation }: DrawerScreenProps<RootStackParamLis
                         }
 
                       }}
-                      backgroundColor={"#654B07"}
+                      backgroundColor={"primary"}
                       variant="subtle"
                       borderRadius={10}
                       size={"sm"}
@@ -350,10 +351,10 @@ const PlanViewPage = ({ route, navigation }: DrawerScreenProps<RootStackParamLis
             onPress={() => { setCastlePlanShown(true) }}
           >
             <VStack alignItems={"center"}>
-              <Text bold={castlePlanShown} mb={castlePlanShown ? undefined : 2}>
+              <Text color="primary" bold={castlePlanShown} mb={castlePlanShown ? undefined : 2}>
                 Castle
               </Text>
-              {castlePlanShown && <Divider borderWidth={1} width={60} mt={2} />}
+              {castlePlanShown && <Divider color="primary" borderWidth={1} width={60} mt={2} />}
             </VStack>
           </Button>
           <Button
@@ -362,10 +363,10 @@ const PlanViewPage = ({ route, navigation }: DrawerScreenProps<RootStackParamLis
             onPress={() => { setCastlePlanShown(false) }}
           >
             <VStack alignItems={"center"}>
-              <Text bold={!castlePlanShown} mb={!castlePlanShown ? undefined : 2}>
+              <Text color="primary" bold={!castlePlanShown} mb={!castlePlanShown ? undefined : 2}>
                 Results
               </Text>
-              {!castlePlanShown && <Divider borderWidth={1} width={60} mt={2} />}
+              {!castlePlanShown && <Divider color="primary" borderWidth={1} width={60} mt={2} />}
             </VStack>
           </Button>
         </HStack>
diff --git a/src/stores/actions/itemThunks.ts b/src/stores/actions/itemThunks.ts
index 6361577..17e97b1 100644
--- a/src/stores/actions/itemThunks.ts
+++ b/src/stores/actions/itemThunks.ts
@@ -16,9 +16,9 @@ export const getItem = createAsyncThunk(
             if (response.status === 200 && response.data.object.length > 1) {
                 // TODO IMAGES to array :-)
                 const authorName = response.data?.object[1]?.name?.[0]?.getty_data?.display_name ?? undefined;
-                const images : {imageUrl: string, title: string}[] = []
+                const images : {imageUrl: string, title: string, relationship_type: string, cert: Certainty}[] = []
                 for(let i = 1; i < response.data.object.length; i++){
-                    images.push({imageUrl: response.data.object[i]?.images?.[0]?.file, title:  response.data.object[i]?.images?.[0]?.text})
+                    images.push({imageUrl: response.data.object[i]?.images?.[0]?.file ?? "", title:  response.data.object[i]?.images?.[0]?.text ?? "", relationship_type: response.data.object[i].relationship_type ?? "", cert: response.data.object[i].cert ?? Certainty.Unknown })
                 }
                 
                 const institution = {
@@ -44,6 +44,7 @@ export const getItem = createAsyncThunk(
                     searchSubjects: response.data.search_subject ?? undefined,
                     prevItem: response.data.prevItem ?? undefined,
                     nextItem: response.data.nextItem ?? undefined,
+                    room: response.data.room ?? undefined,
                     authorName,
                     images,
                     institution,
@@ -67,6 +68,7 @@ export const getItem = createAsyncThunk(
                     nextItem: response.data.nextItem ?? undefined,
                     inventoryItem: response.data.text ?? undefined,
                     searchSubjects: response.data.search_subject ?? undefined,
+                    room: response.data.room ?? undefined,
                 }
             }
             else {
diff --git a/src/stores/reducers/itemSlice.ts b/src/stores/reducers/itemSlice.ts
index a3500fb..8ac398f 100644
--- a/src/stores/reducers/itemSlice.ts
+++ b/src/stores/reducers/itemSlice.ts
@@ -42,6 +42,7 @@ export const itemSlice = createSlice({
                 prevItem: action.payload.prevItem,
                 nextItem: action.payload.nextItem,
                 fullView : action.payload.fullView,
+                room: action.payload.room
             }
 
             if (action.payload.fullView) {
diff --git a/src/types/item.ts b/src/types/item.ts
index 8cc2a0c..cb02a22 100644
--- a/src/types/item.ts
+++ b/src/types/item.ts
@@ -14,7 +14,7 @@ export type  Item = {
     fullView : boolean
 
     authorName?: string
-    images?: {imageUrl : string, title : string}[]
+    images?: {imageUrl : string, title : string, relationship_type: string, cert: Certainty}[]
     title?: string
     institution?: { 
         name :string,
@@ -26,6 +26,8 @@ export type  Item = {
     provenance?: string
     description?: string
 
+    room?: {id: number, original_description: string}
+
     prevItem?: string | boolean
     nextItem?: string | boolean
 }
