Bump dependencies

client/eslint.config.js

@@ -44,7 +44,7 @@ const config = {
 export default [
     js.configs.recommended,
     eslintPluginReact.configs.flat.recommended,
-    eslintPluginReactHooks.configs['recommended-latest'],
+    eslintPluginReactHooks.configs.flat.recommended,
     eslintConfigPrettier,
     config,
 ];

client/js/templates/EntriesPage.jsx

@@ -416,10 +416,8 @@ export function EntriesPage({
     );
 
     // Current time for calculating relative dates in items.
-    const [currentTime, setCurrentTime] = useState(null);
+    const [currentTime, setCurrentTime] = useState(() => new Date());
     useEffect(() => {
-        setCurrentTime(new Date());
-
         const tick = window.setInterval(() => {
             setCurrentTime(new Date());
         }, 60 * 1000);

client/js/templates/Item.jsx

@@ -62,7 +62,7 @@ function stopPropagation(event) {
     event.stopPropagation();
 }
 
-function lazyLoadImages(content) {
+function forceLoadImages(content) {
     content.querySelectorAll('img').forEach((img) => {
         img.setAttribute('src', img.getAttribute('data-selfoss-src'));
     });
@@ -140,7 +140,7 @@ function handleClick({ event, navigate, location, expanded, id, target }) {
 function loadImages({ event, setImagesLoaded, contentBlock }) {
     event.preventDefault();
     event.stopPropagation();
-    lazyLoadImages(contentBlock.current);
+    forceLoadImages(contentBlock.current);
     setImagesLoaded(true);
 }
 
@@ -258,8 +258,10 @@ export default function Item({
 }) {
     const { title, author, sourcetitle } = item;
 
-    const [fullScreenTrap, setFullScreenTrap] = useState(null);
-    const [imagesLoaded, setImagesLoaded] = useState(false);
+    const configuration = useContext(ConfigurationContext);
+    const shouldAutoLoadImages =
+        !selfoss.isMobile() || configuration.loadImagesOnMobile;
+    const [imagesLoaded, setImagesLoaded] = useState(shouldAutoLoadImages);
     const contentBlock = useRef(null);
 
     const location = useLocation();
@@ -271,11 +273,14 @@ export default function Item({
     );
 
     const previouslyExpanded = usePreviousImmediate(expanded);
-    const configuration = useContext(ConfigurationContext);
 
     const [slides, setSlides] = useState([]);
     const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(null);
 
+    const fullScreenTrap = useRef(null);
+    // This should match scenarios where fullScreenTrap is set.
+    const usingFocusTrap = expanded && selfoss.isSmartphone();
+
     useEffect(() => {
         // Handle entry becoming/ceasing to be expanded.
         const parent = document.querySelector(
@@ -293,12 +298,8 @@ export default function Item({
                 );
 
                 // load images not on mobile devices
-                if (
-                    selfoss.isMobile() == false ||
-                    configuration.loadImagesOnMobile
-                ) {
-                    setImagesLoaded(true);
-                    lazyLoadImages(contentBlock.current);
+                if (shouldAutoLoadImages) {
+                    forceLoadImages(contentBlock.current);
                 }
             }
 
@@ -327,7 +328,7 @@ export default function Item({
                 document.body.classList.add('fullscreen-mode');
 
                 const trap = createFocusTrap(parent);
-                setFullScreenTrap(trap);
+                fullScreenTrap.current = trap;
                 trap.activate();
 
                 if (firstExpansion) {
@@ -366,13 +367,10 @@ export default function Item({
         } else {
             // No longer expanded.
 
-            setFullScreenTrap((trap) => {
-                if (trap !== null) {
-                    trap.deactivate();
-                }
-
-                return null;
-            });
+            if (fullScreenTrap.current !== null) {
+                fullScreenTrap.current.deactivate();
+                fullScreenTrap.current = null;
+            }
 
             document.body.classList.remove('fullscreen-mode');
         }
@@ -479,7 +477,7 @@ export default function Item({
                 selected,
             })}
             role="article"
-            aria-modal={fullScreenTrap !== null}
+            aria-modal={usingFocusTrap}
             onClick={entryOnClick}
         >
             {/* icon */}

client/js/templates/Source.jsx

@@ -593,7 +593,7 @@ export default function Source({
 
     const editOnClick = useCallback(
         (event) => handleEdit({ event, source, setEditedSource }),
-        [source],
+        [source, setEditedSource],
     );
 
     const setDirty = useCallback(