Add screenshot carousel handles for desktop/mouse usage

dashboard/src/components/AppInstallDialog.vue

@@ -147,6 +147,24 @@ onMounted(async () => {
   domain.value = (domains.value.find(d => d.domain === result.adminDomain) || domains.value[0]).domain;
 });
 
+const screenshotsContainer = useTemplateRef('screenshotsContainer');
+let currentScreenshotPos = 0;
+function onScreenshotPrev() {
+  if (currentScreenshotPos <= 0) currentScreenshotPos = manifest.value.mediaLinks.length-1;
+  else --currentScreenshotPos;
+
+  const elem = screenshotsContainer.value.children.item(currentScreenshotPos);
+  elem.scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' });
+}
+
+function onScreenshotNext() {
+  if (currentScreenshotPos >= manifest.value.mediaLinks.length-1) currentScreenshotPos = 0;
+  else ++currentScreenshotPos;
+
+  const elem = screenshotsContainer.value.children.item(currentScreenshotPos);
+  elem.scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' });
+}
+
 defineExpose({
   open(a, appCountExceeded) {
     step.value = STEP.DETAILS;
@@ -174,6 +192,8 @@ defineExpose({
       port.domain = domains.value[0].domain;
     }
 
+    currentScreenshotPos = 0;
+
     dialog.value.open();
   }
 });
@@ -195,8 +215,12 @@ defineExpose({
       <Transition name="slide-left" mode="out-in">
         <div v-if="step === STEP.DETAILS">
           <Button @click="setStep(STEP.INSTALL)" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
-          <div class="screenshots">
-            <img class="screenshot" v-for="image in manifest.mediaLinks" :key="image" :src="image"/>
+          <div class="screenshots-container">
+            <div class="screenshots" ref="screenshotsContainer">
+              <img class="screenshot" v-for="image in manifest.mediaLinks" :key="image" :src="image"/>
+            </div>
+            <div class="screenshots-action screenshots-prev" @click="onScreenshotPrev" v-if="manifest.mediaLinks && manifest.mediaLinks.length > 1"><i class="fa fa-chevron-left"></i></div>
+            <div class="screenshots-action screenshots-next" @click="onScreenshotNext" v-if="manifest.mediaLinks && manifest.mediaLinks.length > 1"><i class="fa fa-chevron-right"></i></div>
           </div>
           <div class="description" v-html="description"></div>
         </div>
@@ -288,13 +312,17 @@ defineExpose({
   margin: 0 4px;
 }
 
+.screenshots-container {
+  position: relative;
+  overflow: hidden;
+}
+
 .screenshots {
   margin: 10px 4px;
   display: flex;
   gap: 20px;
   width: 100%;
   padding: 10px 0;
-
   scroll-snap-type: x mandatory;
   overflow: auto;
 }
@@ -308,4 +336,38 @@ defineExpose({
   scroll-snap-stop: always;
 }
 
+.screenshots-action {
+  color: white;
+  position: absolute;
+  top: calc(50% - 40px);
+  cursor: pointer;
+  margin: 20px;
+  width: 40px;
+  height: 40px;
+  border-radius: 40px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: all 200ms;
+  background-color: rgba(128,128,128,0.5);
+}
+
+.screenshots-container:hover .screenshots-action {
+  opacity: 1;
+}
+
+.screenshots-action:hover {
+  background-color: rgba(128,128,128,0.8);
+}
+
+.screenshots-prev {
+ left: 0;
+}
+
+.screenshots-next {
+ right: 0;
+}
+
 </style>