Add image deprecation notice for Docker Hub image

app/src/main/frontend/components/temp/DockerHubDeprecationPopover.tsx

@@ -0,0 +1,44 @@
+import {Button, Link, Popover, PopoverContent, PopoverTrigger} from "@heroui/react";
+import {Warning} from "@phosphor-icons/react";
+
+// TODO: Remove this component before the release of version 2.2.0
+export default function DockerHubDeprecationPopover() {
+    return (
+        <Popover placement="bottom-end" showArrow={true} color="warning">
+            <PopoverTrigger>
+                <Button isIconOnly color="warning" variant="flat">
+                    <Warning/>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent>
+                <div className="m-4 text-sm leading-relaxed">
+                    <h3 className="mb-2 font-bold">Image deprecation notice</h3>
+                    <p>
+                        Starting with version
+                        <code className="font-semibold"> 2.2.0 </code>
+                        the image{' '}
+                        <Link href="https://hub.docker.com/r/grimsi/gameyfin"
+                              isExternal
+                              underline="always"
+                              size="sm"
+                              className="text-warning-contrast">
+                            grimsi/gameyfin
+                        </Link>
+                        {' '}will no longer be published to Docker Hub.
+                    </p>
+                    <p>
+                        Please switch to{' '}
+                        <Link href="https://github.com/gameyfin/gameyfin/pkgs/container/gameyfin"
+                              isExternal
+                              underline="always"
+                              size="sm"
+                              className="text-warning-contrast">
+                            ghcr.io/gameyfin/gameyfin
+                        </Link>
+                        {' '}if you are currently using the Docker Hub image.
+                    </p>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

app/src/main/frontend/views/MainLayout.tsx

@@ -14,6 +14,7 @@ import {useSnapshot} from "valtio/react";
 import {gameState} from "Frontend/state/GameState";
 import ScanProgressPopover from "Frontend/components/general/ScanProgressPopover";
 import {isAdmin} from "Frontend/util/utils";
+import DockerHubDeprecationPopover from "Frontend/components/temp/DockerHubDeprecationPopover";
 
 export default function MainLayout() {
     const navigate = useNavigate();
@@ -105,13 +106,22 @@ export default function MainLayout() {
                         </Tooltip>
                     </NavbarItem>
                     {isAdmin(auth) &&
-                        <NavbarItem>
+                        <div className="flex flex-row">
-                            <Tooltip content="View library scan results" placement="bottom">
+                            <NavbarItem>
-                                <div>
+                                <Tooltip content="Important information" placement="bottom">
-                                    <ScanProgressPopover/>
+                                    <div>
-                                </div>
+                                        <DockerHubDeprecationPopover/>
-                            </Tooltip>
+                                    </div>
-                        </NavbarItem>
+                                </Tooltip>
+                            </NavbarItem>
+                            <NavbarItem>
+                                <Tooltip content="View library scan results" placement="bottom">
+                                    <div>
+                                        <ScanProgressPopover/>
+                                    </div>
+                                </Tooltip>
+                            </NavbarItem>
+                        </div>
                     }
                     {auth.state.user &&
                         <NavbarItem>