The return of the hover circle (now called "hover indicator")

public/locales/en/panel-skybrowser.json

@@ -88,7 +88,12 @@
     },
     "general": {
       "tooltip": "General settings for all browsers",
-      "tab-title": "General"
+      "tab-title": "General",
+      "show-hover-indicator": {
+        "label": "Show image position on hover",
+        "info": "Show an indicator on the sky in OpenSpace when hovering or focusing images in the skybrowser lists. The position of the indicator matches the position of the image interacted with.",
+        "disabled-tooltip": "No scene graph node for the hover indicator was found. Make sure that the skybrowser is properly configured and that the hover indicator asset is loaded."
+      }
     }
   },
   "tab-content": {

src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx

@@ -60,6 +60,8 @@ export function AddedImageCard({ image, opacity }: Props) {
             luaApi?.skybrowser.selectImage(image.url);
             setActiveImage(image.url);
           }}
+          onHover={() => luaApi?.skybrowser.moveIndicatorToHoverImage(image.url)}
+          onLeave={() => luaApi?.skybrowser.disableHoverIndicator()}
           bd={'1px solid var(--mantine-color-gray-7)'}
           radius={'sm'}
         />

src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx

@@ -12,10 +12,13 @@ import {
 } from '@mantine/core';
 
 import { useOpenSpaceApi } from '@/api/hooks';
+import { BoolInput } from '@/components/Input/BoolInput';
 import { NumericInput } from '@/components/Input/NumericInput/NumericInput';
 import { NumericSlider } from '@/components/Input/NumericInput/NumericSlider/NumericSlider';
 import { LoadingBlocks } from '@/components/LoadingBlocks/LoadingBlocks';
+import { MaybeTooltip } from '@/components/MaybeTooltip/MaybeTooltip';
 import { Property } from '@/components/Property/Property';
+import { useProperty } from '@/hooks/properties';
 import { useAppSelector } from '@/redux/hooks';
 import {
   SkyBrowserAllowCameraRotationKey,
@@ -46,6 +49,11 @@ export function Settings({ id }: Props) {
   const imageList = useAppSelector((state) => state.skybrowser.imageList);
   const targetId = useAppSelector((state) => state.skybrowser.browsers[id]?.targetId);
 
+  const [hoverIndicatorEnabled, setHoverIndicatorEnabled] = useProperty(
+    'BoolProperty',
+    'Scene.HoverIndicator.Renderable.Enabled'
+  );
+
   const luaApi = useOpenSpaceApi();
 
   const color = useBrowserColorString(id);
@@ -196,6 +204,19 @@ export function Settings({ id }: Props) {
             <SettingsDisplayCopies id={id} />
           </Tabs.Panel>
           <Tabs.Panel value={'General'}>
+            <MaybeTooltip
+              showTooltip={hoverIndicatorEnabled === undefined}
+              label={t('general.show-hover-indicator.disabled-tooltip')}
+            >
+              <BoolInput
+                label={t('general.show-hover-indicator.label')}
+                value={hoverIndicatorEnabled ?? false}
+                onChange={setHoverIndicatorEnabled}
+                info={t('general.show-hover-indicator.info')}
+                disabled={hoverIndicatorEnabled === undefined}
+                mb={'md'}
+              />
+            </MaybeTooltip>
             <Property uri={SkyBrowserAllowCameraRotationKey} />
             <Property uri={SkyBrowserCameraRotationSpeedKey} />
             <Property uri={SkyBrowserTargetAnimationSpeedKey} />

src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx

@@ -31,6 +31,8 @@ export function ImageCard({ image }: Props) {
         <IconImage
           url={image.thumbnail}
           onClick={select}
+          onHover={() => luaApi?.skybrowser.moveIndicatorToHoverImage(image.url)}
+          onLeave={() => luaApi?.skybrowser.disableHoverIndicator()}
           icon={<PlusIcon />}
           h={'100%'}
           w={'100%'}

src/panels/SkyBrowserPanel/components/IconImage.module.css

@@ -1,3 +1,9 @@
 .iconImage:hover {
   filter: brightness(1.3);
 }
+
+.iconImage:focus {
+  filter: brightness(1.3);
+  border-style: solid;
+  border-width: 2px;
+}

src/panels/SkyBrowserPanel/components/IconImage.tsx

@@ -5,15 +5,35 @@ import styles from './IconImage.module.css';
 
 interface Props extends ImageProps {
   onClick: () => void;
+  onHover?: () => void;
+  onLeave?: () => void;
   icon: React.JSX.Element;
   url: string;
   h?: number | string;
   w?: number | string;
 }
 
-export function IconImage({ url, onClick, icon, h, w, ...props }: Props) {
+export function IconImage({
+  url,
+  onClick,
+  onHover,
+  onLeave,
+  icon,
+  h,
+  w,
+  ...props
+}: Props) {
   return (
-    <UnstyledButton onClick={onClick} h={h} w={w} className={styles.iconImage}>
+    <UnstyledButton
+      onClick={onClick}
+      onMouseEnter={onHover}
+      onFocus={onHover}
+      onMouseLeave={onLeave}
+      onBlur={onLeave}
+      h={h}
+      w={w}
+      className={styles.iconImage}
+    >
       <AspectRatio ratio={96 / 45} pos={'relative'}>
         <Image
           src={url}