Make full-screen the default action

ui/src/components/photoGallery/MediaThumbnail.tsx

@@ -49,12 +49,8 @@ const PhotoOverlay = styled.div<{ active: boolean }>`
   ${({ active }) =>
     active &&
     `
-      border: 4px solid rgba(65, 131, 196, 0.6);
-
-      & ${HoverIcon} {
-        top: -4px !important;
-        left: -4px !important;
-      }
+      outline: 4px solid rgba(65, 131, 196, 0.6);
+      outline-offset: -4px;
     `}
 `
 
@@ -87,6 +83,13 @@ const FavoriteIcon = styled(HoverIcon)`
   opacity: ${({ favorite }) => (favorite ? '0.8' : '0.2')} !important;
 `
 
+const SidebarIcon = styled(HoverIcon)`
+  margin: 10px !important;
+  position: absolute;
+  top: 0;
+  right: 0;
+`
+
 const VideoThumbnailIcon = styled(Icon)`
   color: rgba(255, 255, 255, 0.8);
   position: absolute;
@@ -152,7 +155,7 @@ export const MediaThumbnail = ({
         minWidth: `clamp(124px, ${minWidth}px, 100% - 8px)`,
       }}
       onClick={() => {
-        selectImage()
+        clickPresent()
       }}
     >
       <div
@@ -165,10 +168,11 @@ export const MediaThumbnail = ({
       </div>
       <PhotoOverlay active={active}>
         {videoIcon}
-        <HoverIcon
-          name="expand"
-          onClick={() => {
-            clickPresent()
+        <SidebarIcon
+          name="info"
+          onClick={(e: MouseEvent) => {
+            e.stopPropagation()
+            selectImage()
           }}
         />
         {heartIcon}

ui/src/components/photoGallery/PhotoGallery.tsx

@@ -81,6 +81,11 @@ const PhotoGallery = ({
             toggleFavoriteAction({
               media,
               markFavorite,
+            }).then(() => {
+              dispatchMedia({
+                type: 'selectImage',
+                index,
+              })
             })
           }}
           clickPresent={() => {

ui/src/components/photoGallery/photoGalleryMutations.ts

@@ -27,7 +27,7 @@ export const toggleFavoriteAction = ({
   media: PhotoGalleryProps_Media
   markFavorite: MutationFunction<markMediaFavorite, markMediaFavoriteVariables>
 }) => {
-  markFavorite({
+  return markFavorite({
     variables: {
       mediaId: media.id,
       favorite: !media.favorite,

ui/src/components/photoGallery/presentView/PresentMedia.tsx

@@ -49,10 +49,12 @@ const PresentMedia = ({
       return (
         <div {...otherProps}>
           <StyledPhoto
+            key={`${media.id}-thumb`}
             src={media.thumbnail?.url}
             data-testid="present-img-thumbnail"
           />
           <StyledPhoto
+            key={`${media.id}-highres`}
             style={{ display: 'none' }}
             src={media.highRes?.url}
             data-testid="present-img-highres"

ui/src/components/timelineGallery/TimelineGroupAlbum.tsx

@@ -71,9 +71,8 @@ const TimelineGroupAlbum = ({
   mediaState,
   dispatchMedia,
 }: TimelineGroupAlbumProps) => {
-  const { media, mediaTotal, album } = mediaState.timelineGroups[
-    dateIndex
-  ].groups[albumIndex]
+  const { media, mediaTotal, album } =
+    mediaState.timelineGroups[dateIndex].groups[albumIndex]
 
   const [markFavorite] = useMarkFavoriteMutation()
 
@@ -105,6 +104,15 @@ const TimelineGroupAlbum = ({
         toggleFavoriteAction({
           media,
           markFavorite,
+        }).then(() => {
+          dispatchMedia({
+            type: 'selectImage',
+            index: {
+              album: albumIndex,
+              date: dateIndex,
+              media: index,
+            },
+          })
         })
       }}
       active={media.id === getActiveTimelineImage({ mediaState })?.id}