feat: add image gallery functionality

- Implemented image gallery dialog to view images in a gallery format.
- Added `useImageGallery` hook for managing gallery state and opening the dialog.
- Integrated image gallery button in `ContentInfo` and context menu for image content.
- Enhanced image loading and error handling in the `ImageView` component.
- Created `ImageThumbnail` component for displaying image thumbnails.
- Updated localization for image gallery features in both default and Hungarian languages.
- Added utility functions for checking image content and fetching image URLs.
- Adjusted styles for image gallery dialog and grid components.

Author: marosvolgyiz

apps/sensenet/src/components/Icon.tsx

@@ -60,7 +60,9 @@ import travisCi from '@iconify-icons/logos/travis-ci'
 import vercelIcon from '@iconify-icons/logos/vercel-icon'
 import React, { CSSProperties, FunctionComponent } from 'react'
 import { EventLogEntry } from '../services/EventService'
+import { isImageContent } from '../services/image-content-service'
 import { IconFromPath } from './IconFromPath'
+import { ImageThumbnail } from './image-thumbnail'
 import { UserAvatar } from './UserAvatar'
 
 export interface IconOptions {
@@ -186,6 +188,10 @@ const getIconByName = (name: string | undefined, options: IconOptions) => {
 
 /* eslint-disable react/display-name */
 export const defaultContentResolvers: Array<IconResolver<GenericContent>> = [
+  {
+    get: (item, options) =>
+      isImageContent(item) ? <ImageThumbnail content={item} repository={options.repo} style={options.style} /> : null,
+  },
   {
     get: (item, options) => {
       let icon = item.Icon

apps/sensenet/src/components/content-list/content-list.tsx

@@ -29,10 +29,12 @@ import { TableCellProps } from 'react-virtualized'
 import { ResponsiveContext, ResponsivePersonalSettings } from '../../context'
 import { globals, useGlobalStyles } from '../../globalStyles'
 import { useLocalization, usePersonalSettings, useSelectionService } from '../../hooks'
+import { isImageContent } from '../../services'
 import { ContentBreadcrumbs } from '../ContentBreadcrumbs'
 import { ContentContextMenu } from '../context-menu/content-context-menu'
 import { useDialog } from '../dialogs'
 import { DropFileArea } from '../DropFileArea'
+import { useImageGallery } from '../image-gallery'
 import { SelectionControl } from '../SelectionControl'
 import { isFolderLikeTreeItem, SETTINGS_FOLDER_FILTER } from '../tree/tree-helpers'
 import { ContextMenuWrapper } from './context-menu-wrapper'
@@ -180,6 +182,7 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
   }, [currentChildren, currentDirection, currentOrder, userPersonalSettings.sortFoldersFirst])
   const [selected, setSelected] = useState<T[]>([])
   const [activeContent, setActiveContent] = useState<T>(children[0])
+  const { openImageGallery } = useImageGallery()
 
   const [columnSettings, setColumnSettings] = useState<Array<ColumnSetting<GenericContent>>>(
     personalSettings.content.fields,
@@ -331,9 +334,13 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
 
   const handleActivateItem = useCallback(
     (item: T) => {
+      if (isImageContent(item)) {
+        openImageGallery(item, children)
+        return
+      }
       props.onParentChange(item)
     },
-    [props],
+    [children, openImageGallery, props],
   )
 
   const handleItemClick = useCallback(

apps/sensenet/src/components/content/ContentInfo.tsx

@@ -8,6 +8,7 @@ import { getIcon } from '../context-menu/icons'
 import { useContextMenuActions } from '../context-menu/use-context-menu-actions'
 import { FavoriteButton } from '../favorites/FavoriteButton'
 import { Icon } from '../Icon'
+import { useImageGallery } from '../image-gallery'
 
 export function ContentInfo() {
   const DISABLED_ACTIONS = ['Share', 'Preview', 'Delete']
@@ -21,6 +22,8 @@ export function ContentInfo() {
   })
   const { isWriteAvailable } = useWopi()
   const oDataActionsTitle = useLocalization().customActions.oDataActionsDialog.menuTitle
+  const imageGalleryLocalization = useLocalization().imageGallery
+  const { images, openImageGallery } = useImageGallery()
 
   const setActionsWopi = useCallback(
     (contentFromCallback: GenericContent) => {
@@ -80,6 +83,17 @@ export function ContentInfo() {
         </div>
         <div className="buttonPanel">
           <FavoriteButton content={parentContent} />
+          {images.length ? (
+            <Button
+              key="Gallery"
+              title={imageGalleryLocalization.openGallery}
+              disableRipple={true}
+              data-test="content-gallery-action"
+              onClick={() => openImageGallery(images[0], images)}>
+              <ListItemIcon>{getIcon('gallery')}</ListItemIcon>
+              <div style={{ flexGrow: 1 }}>{imageGalleryLocalization.openGallery}</div>
+            </Button>
+          ) : null}
           <Button
             key="ODataActions"
             title={oDataActionsTitle}

apps/sensenet/src/components/context-menu/content-context-menu.tsx

@@ -10,6 +10,8 @@ import { useLogger, useWopi } from '@sensenet/hooks-react'
 import React, { useCallback, useContext, useEffect, useState } from 'react'
 import { ResponsiveContext } from '../../context'
 import { useLoadContent, useLocalization } from '../../hooks'
+import { isImageContent } from '../../services'
+import { useImageGallery } from '../image-gallery'
 import { contextMenuODataOptions } from './context-menu-odata-options'
 import { getIcon } from './icons'
 import { useContextMenuActions } from './use-context-menu-actions'
@@ -63,8 +65,11 @@ export const ContentContextMenu: React.FunctionComponent<ContentContextMenuProps
   )
 
   const { runAction } = useContextMenuActions(props.content, setActionsWopi)
+  const { openImageGallery } = useImageGallery()
   const device = useContext(ResponsiveContext)
   const oDataActionsTitle = useLocalization().customActions.oDataActionsDialog.menuTitle
+  const imageGalleryLocalization = useLocalization().imageGallery
+  const canViewImage = isImageContent(props.content)
   const runODataActions = () => {
     props.onClose?.()
     runAction('ODataActions')
@@ -85,6 +90,17 @@ export const ContentContextMenu: React.FunctionComponent<ContentContextMenuProps
           open={props.isOpened}
           PaperProps={{ style: { paddingBottom: '2em' } }}>
           <List>
+            {canViewImage ? (
+              <ListItem
+                button
+                onClick={() => {
+                  props.onClose?.()
+                  openImageGallery(props.content)
+                }}>
+                <ListItemIcon>{getIcon('viewimage')}</ListItemIcon>
+                <ListItemText primary={imageGalleryLocalization.openImage} />
+              </ListItem>
+            ) : null}
             <ListItem onClick={runODataActions}>
               <ListItemIcon>{getIcon('odataactions')}</ListItemIcon>
               <ListItemText primary={oDataActionsTitle} />
@@ -107,6 +123,19 @@ export const ContentContextMenu: React.FunctionComponent<ContentContextMenuProps
         </Drawer>
       ) : (
         <Menu open={props.isOpened} {...props.menuProps} data-test="content-context-menu-root">
+          {canViewImage ? (
+            <MenuItem
+              key="ViewImage"
+              disableRipple={true}
+              data-test="content-context-menu-view-image"
+              onClick={() => {
+                props.onClose?.()
+                openImageGallery(props.content)
+              }}>
+              <ListItemIcon>{getIcon('viewimage')}</ListItemIcon>
+              <div style={{ flexGrow: 1 }}>{imageGalleryLocalization.openImage}</div>
+            </MenuItem>
+          ) : null}
           <MenuItem
             key="ODataActions"
             disableRipple={true}

apps/sensenet/src/components/context-menu/icons.tsx

@@ -10,12 +10,14 @@ import HistoryIcon from '@material-ui/icons/History'
 import InfoIcon from '@material-ui/icons/Info'
 import Lock from '@material-ui/icons/Lock'
 import LockOpen from '@material-ui/icons/LockOpen'
+import PhotoLibraryOutlinedIcon from '@material-ui/icons/PhotoLibraryOutlined'
 import MuiPublishIcon from '@material-ui/icons/Publish'
 import ReportProblemIcon from '@material-ui/icons/ReportProblem'
 import RestoreIcon from '@material-ui/icons/RestoreFromTrash'
 import Search from '@material-ui/icons/Search'
 import ShareIcon from '@material-ui/icons/Share'
 import UndoIcon from '@material-ui/icons/Undo'
+import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined'
 import React from 'react'
 
 export const getIcon = (actionName: string) => {
@@ -34,6 +36,8 @@ export const getIcon = (actionName: string) => {
       return <Delete />
     case 'download':
       return <CloudDownload />
+    case 'gallery':
+      return <PhotoLibraryOutlinedIcon />
     case 'edit':
       return <Edit />
     case 'forceundocheckout':
@@ -42,6 +46,8 @@ export const getIcon = (actionName: string) => {
       return <FileCopyIcon />
     case 'preview':
       return <Search />
+    case 'viewimage':
+      return <VisibilityOutlinedIcon />
     case 'publish':
       return <MuiPublishIcon />
     case 'setpermissions':

apps/sensenet/src/components/dialogs/dialog-provider.tsx

@@ -14,6 +14,7 @@ import {
   DateRangePickerProps,
   DeleteContentDialogProps,
   ExecuteActionDialogProps,
+  ImageGalleryDialogProps,
   ODataActionsDialogProps,
   OperationsDialogProps,
   PermissionEditorDialogProps,
@@ -34,6 +35,7 @@ export type DialogWithProps = (
   | { name: 'approve'; props: ApproveProps }
   | { name: 'restore'; props: RestoreProps }
   | { name: 'upload'; props: UploadDialogProps }
+  | { name: 'image-gallery'; props: ImageGalleryDialogProps }
   | { name: 'execute-action'; props: ExecuteActionDialogProps }
   | { name: 'custom-action-result'; props: CustomActionResultDialogProps }
   | { name: 'logout' }

apps/sensenet/src/components/dialogs/dialogs.tsx

@@ -14,6 +14,7 @@ const ExecuteAction = lazy(() => import('./execute-action'))
 const Logout = lazy(() => import('./logout'))
 const SaveQuery = lazy(() => import('./save-query'))
 const Upload = lazy(() => import('./upload/upload-dialog'))
+const ImageGallery = lazy(() => import('./image-gallery'))
 const ReferenceContentList = lazy(() => import('./reference-content-list'))
 const PermissionEditorDialog = lazy(() => import('./permission-editor-dialog'))
 const MemberSelect = lazy(() => import('./member-select-dialog'))
@@ -45,6 +46,8 @@ function dialogRenderer(dialog: DialogWithProps) {
       return <Restore {...dialog.props} />
     case 'upload':
       return <Upload {...dialog.props} />
+    case 'image-gallery':
+      return <ImageGallery {...dialog.props} />
     case 'execute-action':
       return <ExecuteAction {...dialog.props} />
     case 'custom-action-result':