🐛(frontend) add unique key to 'popover' items

Close issue #91. Each <li> element in a list should have a unique key
to avoid React warnings.

Added unique keys to 'popover' items. Although the 'lang' keys are generated
by i18n dependencies and are expected to be unique, this implementation
ensures keys are unique and not based on indexes.

src/frontend/src/i18n/useLanguageLabels.ts

@@ -13,6 +13,7 @@ export const useLanguageLabels = () => {
     (lang) => lang !== 'cimode'
   )
   const languagesList = supportedLanguages.map((lang) => ({
+    key: lang,
     value: lang,
     label: languageLabels[lang],
   }))

src/frontend/src/layout/Header.tsx

@@ -74,7 +74,7 @@ export const Header = () => {
                   {user.email}
                 </Button>
                 <PopoverList
-                  items={[{ value: 'logout', label: t('logout') }]}
+                  items={[{ key: 'logout', value: 'logout', label: t('logout') }]}
                   onAction={(value) => {
                     if (value === 'logout') {
                       window.location.href = logoutUrl()

src/frontend/src/primitives/PopoverList.tsx

@@ -42,7 +42,7 @@ export const PopoverList = <T extends string | number = string>({
 }: {
   closeOnAction?: boolean
   onAction: (key: T) => void
-  items: Array<string | { value: T; label: ReactNode }>
+  items: Array<string | { key: string, value: T; label: ReactNode }>
 } & ButtonProps) => {
   const popoverState = useContext(OverlayTriggerStateContext)!
   return (
@@ -50,8 +50,9 @@ export const PopoverList = <T extends string | number = string>({
       {items.map((item) => {
         const value = typeof item === 'string' ? item : item.value
         const label = typeof item === 'string' ? item : item.label
+        const key = typeof item === 'string' ? item : item.key
         return (
-          <li>
+          <li key={key}>
             <ListItem
               key={value}
               onPress={() => {