From 035f488fa239d8986f43261767080694d448eb07 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 19 Aug 2021 08:39:52 +0200
Subject: [PATCH 01/11] feat: add slide button at the bottom of the thumbnails

---
 .../app-slides-aside/app-slides-aside.scss    | 94 +++++++++++++------
 .../app-slides-aside/app-slides-aside.tsx     | 24 ++++-
 .../app-actions-editor.scss                   | 33 ++-----
 studio/src/global/theme/mixins/_button.scss   | 31 ++++++
 4 files changed, 126 insertions(+), 56 deletions(-)
 create mode 100644 studio/src/global/theme/mixins/_button.scss

diff --git a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss
index 3eab63e92..d6cc8538b 100644
--- a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss
+++ b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss
@@ -1,45 +1,85 @@
+@use "../../../../../global/theme/mixins/button";
+
 app-slides-aside {
-  display: flex;
-  flex-direction: column;
 
-  min-height: 100%;
-  height: 100%;
+  position: relative;
+
+  aside {
+    display: flex;
+    flex-direction: column;
+
+    min-height: 100%;
+    height: 100%;
 
-  width: var(--slides-aside-width);
+    width: var(--slides-aside-width);
 
-  padding: 16px;
-  overflow: scroll;
-  border-right: 1px solid #dedede;
+    padding: 16px 16px 48px;
+    overflow: scroll;
+    border-right: 1px solid #dedede;
 
-  --preview-width: calc(var(--slides-aside-width) - 32px);
+    --preview-width: calc(var(--slides-aside-width) - 32px);
+
+    &.drag {
+      app-slide-thumbnail {
+        transition: margin 0.25s ease-out, min-height 0.25s ease-in;
+      }
+    }
 
-  &.drag {
     app-slide-thumbnail {
-      transition: margin 0.25s ease-out, min-height 0.25s ease-in;
+      margin-bottom: 16px;
+
+      transition: margin 0.15s ease-in;
+
+      &.hover {
+        margin-bottom: calc((var(--slides-aside-width) - 32px) * 9 / 16);
+      }
+
+      &.hover-top {
+        margin-top: calc((var(--slides-aside-width) - 32px) * 9 / 16);
+      }
+
+      &.drag-start, &.drag-hover {
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      &.drag-hover {
+        min-height: 0;
+        border: none;
+      }
     }
   }
 
-  app-slide-thumbnail {
-    margin-bottom: 16px;
+  div.actions {
+    position: absolute;
+    bottom: 0;
+    left: 0;
 
-    transition: margin 0.15s ease-in;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
 
-    &.hover {
-      margin-bottom: calc((var(--slides-aside-width) - 32px) * 9 / 16);
-    }
+    width: 100%;
 
-    &.hover-top {
-      margin-top: calc((var(--slides-aside-width) - 32px) * 9 / 16);
-    }
+    background: var(--ion-color-light);
+    border: 1px solid #dedede;
 
-    &.drag-start, &.drag-hover {
-      visibility: hidden;
-      opacity: 0;
-    }
+    padding: 8px 16px;
+  }
+
+  app-action-add-slide {
+    button {
+      --button-action-flex-direction: row;
+
+      @include button.action;
+
+      ion-icon {
+        @include button.icon;
 
-    &.drag-hover {
-      min-height: 0;
-      border: none;
+        font-size: 14px;
+        margin: 0 4px 0 0;
+      }
     }
   }
 }
diff --git a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
index ab948f143..f3464c80c 100644
--- a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
+++ b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
@@ -131,7 +131,17 @@ export class AppSlidesAside {
 
   render() {
     return (
-      <Host
+      <Host>
+        {this.renderSlides()}
+
+        <app-action-add-slide></app-action-add-slide>
+      </Host>
+    );
+  }
+
+  private renderSlides() {
+    return (
+      <aside
         onDrop={() => this.onDrop()}
         onDragOver={($event: DragEvent) => $event.preventDefault()}
         onDragLeave={() => this.onDragLeave()}
@@ -158,7 +168,17 @@ export class AppSlidesAside {
             onDragStart={() => this.onDragStart(index)}
             onDragOver={() => this.onDragHover(index)}></app-slide-thumbnail>
         ))}
-      </Host>
+
+        {this.renderActions()}
+      </aside>
+    );
+  }
+
+  private renderActions() {
+    return (
+      <div class="actions">
+        <app-action-add-slide></app-action-add-slide>
+      </div>
     );
   }
 }
diff --git a/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss b/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss
index 98dbd5193..1c73b4d31 100644
--- a/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss
+++ b/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss
@@ -1,3 +1,5 @@
+@use "../../../../../../global/theme/mixins/button";
+
 app-actions-editor {
   background: transparent;
   display: block;
@@ -13,36 +15,16 @@ app-actions-editor {
     }
 
     button {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-
-      padding: 0 12px;
+      @include button.action;
 
-      position: relative;
-
-      outline: none;
-
-      color: inherit;
-
-      border-radius: 2px;
-      background: transparent;
-
-      &:focus {
-        background: rgba(var(--ion-color-medium-rgb), 0.1);
+      ion-label {
+        margin-bottom: 6px;
       }
 
       ion-icon {
         font-size: 22px;
         margin: 6px 0 4px;
       }
-
-      ion-label {
-        font-size: var(--font-size-small);
-        margin-bottom: 6px;
-        white-space: nowrap;
-      }
     }
   }
 
@@ -69,10 +51,7 @@ app-actions-editor {
           padding: 2px 12px;
 
           ion-icon {
-            padding: 6px;
-            border-radius: 50%;
-            background: white;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+            @include button.icon;
           }
         }
       }
diff --git a/studio/src/global/theme/mixins/_button.scss b/studio/src/global/theme/mixins/_button.scss
new file mode 100644
index 000000000..e77449a5e
--- /dev/null
+++ b/studio/src/global/theme/mixins/_button.scss
@@ -0,0 +1,31 @@
+@mixin action {
+  display: flex;
+  flex-direction: var(--button-action-flex-direction, column);
+  justify-content: center;
+  align-items: center;
+
+  position: relative;
+
+  outline: none;
+
+  color: inherit;
+
+  border-radius: 2px;
+  background: transparent;
+
+  &:focus {
+    background: rgba(var(--ion-color-medium-rgb), 0.1);
+  }
+
+  ion-label {
+    font-size: var(--font-size-small);
+    white-space: nowrap;
+  }
+}
+
+@mixin icon {
+  padding: 6px;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}

From 40180d7891bc43789c803b035297cbc0d848f283 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 19 Aug 2021 08:44:10 +0200
Subject: [PATCH 02/11] feat: handles delete slide

---
 .../app-slides-aside/app-slides-aside.tsx       | 17 ++++++++++++++++-
 .../editor/events/deck/deck-events.handler.ts   | 16 +++-------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
index f3464c80c..b08b486c4 100644
--- a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
+++ b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
@@ -57,12 +57,27 @@ export class AppSlidesAside {
     this.debounceUpdateSlide(updatedSlide);
   }
 
+  @Listen('slideDelete', {target: 'document'})
+  async onSlideDelete({detail: deletedSlide}: CustomEvent<HTMLElement>) {
+    await this.deleteSlide(deletedSlide);
+  }
+
   private async updateSlide(updatedSlide: HTMLElement) {
-    const slideIndex: number = Array.from(updatedSlide.parentNode.children).indexOf(updatedSlide);
+    const slideIndex: number = this.slideIndex(updatedSlide);
 
     this.slides = [...this.slides.map((slide: HTMLElement, index: number) => (slideIndex === index ? (updatedSlide.cloneNode(true) as HTMLElement) : slide))];
   }
 
+  private async deleteSlide(deletedSlide: HTMLElement) {
+    const slideIndex: number = this.slideIndex(deletedSlide);
+
+    this.slides = [...this.slides.filter((_slide: HTMLElement, index: number) => slideIndex !== index)];
+  }
+
+  private slideIndex(slide: HTMLElement): number {
+    return Array.from(slide.parentNode.children).indexOf(slide);
+  }
+
   private async updateAllSlides() {
     const slides: NodeListOf<HTMLElement> = document.querySelectorAll(`${deckSelector} > *`);
 
diff --git a/studio/src/app/handlers/editor/events/deck/deck-events.handler.ts b/studio/src/app/handlers/editor/events/deck/deck-events.handler.ts
index 5d9407d46..f32f4da5a 100644
--- a/studio/src/app/handlers/editor/events/deck/deck-events.handler.ts
+++ b/studio/src/app/handlers/editor/events/deck/deck-events.handler.ts
@@ -559,19 +559,9 @@ export class DeckEventsHandler {
     });
   }
 
-  private deleteSlideElement(): Promise<void> {
-    return new Promise<void>(async (resolve) => {
-      const deck: HTMLElement = this.mainRef.querySelector('deckgo-deck');
-
-      if (!deck) {
-        resolve();
-        return;
-      }
-
-      await (deck as any).deleteActiveSlide();
-
-      resolve();
-    });
+  private async deleteSlideElement() {
+    const deck: HTMLDeckgoDeckElement = this.mainRef.querySelector('deckgo-deck');
+    await deck?.deleteActiveSlide();
   }
 
   private async getSlideAttributes(slide: HTMLElement, cleanFields: boolean): Promise<SlideAttributes> {

From 6b71ecd65141ad23f47bd4db204987535467437f Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 19 Aug 2021 08:53:27 +0200
Subject: [PATCH 03/11] style: ripple effect

---
 studio/src/global/theme/mixins/_button.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/studio/src/global/theme/mixins/_button.scss b/studio/src/global/theme/mixins/_button.scss
index e77449a5e..94a8aab7b 100644
--- a/studio/src/global/theme/mixins/_button.scss
+++ b/studio/src/global/theme/mixins/_button.scss
@@ -10,7 +10,9 @@
 
   color: inherit;
 
-  border-radius: 2px;
+  border-radius: 8px;
+  overflow: hidden;
+
   background: transparent;
 
   &:focus {

From d98233254f2881813301ec7028f785e5d43325a7 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 19 Aug 2021 09:34:53 +0200
Subject: [PATCH 04/11] fix: semantic

---
 .../editor/actions/app-slides-aside/app-slides-aside.tsx      | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
index b08b486c4..b2b8e693a 100644
--- a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
+++ b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
@@ -149,7 +149,7 @@ export class AppSlidesAside {
       <Host>
         {this.renderSlides()}
 
-        <app-action-add-slide></app-action-add-slide>
+        {this.renderActions()}
       </Host>
     );
   }
@@ -183,8 +183,6 @@ export class AppSlidesAside {
             onDragStart={() => this.onDragStart(index)}
             onDragOver={() => this.onDragHover(index)}></app-slide-thumbnail>
         ))}
-
-        {this.renderActions()}
       </aside>
     );
   }

From 764e6686dae12e80e99d19f4296b6e14902d8ddd Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 19 Aug 2021 10:00:58 +0200
Subject: [PATCH 05/11] feat: effectively add slide

---
 .../app-slides-aside/app-slides-aside.tsx     |  2 +-
 .../app-action-add-slide.tsx                  | 23 +++++++---------
 .../app-actions-deck/app-actions-deck.tsx     | 13 +--------
 .../app-actions-element.tsx                   |  5 ++--
 .../app-actions-editor/app-actions-editor.tsx | 10 ++-----
 .../pages/editor/app-editor/app-editor.tsx    |  5 ++--
 .../style/app-deck-style/app-deck-style.tsx   | 14 +++++-----
 .../editor/anonymous/anonymous.service.ts     |  8 +++---
 studio/src/components.d.ts                    | 27 +++++--------------
 9 files changed, 36 insertions(+), 71 deletions(-)

diff --git a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
index b2b8e693a..f94d61ecc 100644
--- a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
+++ b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
@@ -190,7 +190,7 @@ export class AppSlidesAside {
   private renderActions() {
     return (
       <div class="actions">
-        <app-action-add-slide></app-action-add-slide>
+        <app-action-add-slide slidesLength={this.slides.length}></app-action-add-slide>
       </div>
     );
   }
diff --git a/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx b/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx
index 836b445fe..37f7c6301 100644
--- a/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx
+++ b/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx
@@ -1,4 +1,4 @@
-import {Component, Element, EventEmitter, h, JSX, Prop} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, h, JSX, Prop} from '@stencil/core';
 
 import {modalController, OverlayEventDetail, popoverController} from '@ionic/core';
 
@@ -20,16 +20,16 @@ export class AppActionAddSlide {
   @Element() el: HTMLElement;
 
   @Prop()
-  slides: JSX.IntrinsicElements[] = [];
+  slidesLength: number | undefined;
 
-  @Prop()
-  blockSlide: EventEmitter;
+  @Event({bubbles: true})
+  private signIn: EventEmitter<void>;
 
-  @Prop()
-  signIn: EventEmitter;
+  @Event({bubbles: true})
+  private addSlide: EventEmitter<JSX.IntrinsicElements>;
 
-  @Prop()
-  addSlide: EventEmitter;
+  @Event({bubbles: true})
+  private blockSlide: EventEmitter<boolean>;
 
   private anonymousService: AnonymousService;
 
@@ -42,7 +42,7 @@ export class AppActionAddSlide {
       return;
     }
 
-    const couldAddSlide: boolean = await this.anonymousService.couldAddSlide(this.slides);
+    const couldAddSlide: boolean = await this.anonymousService.couldAddSlide(this.slidesLength);
 
     if (!couldAddSlide) {
       this.signIn.emit();
@@ -276,10 +276,7 @@ export class AppActionAddSlide {
 
   render() {
     return (
-      <app-action-busy
-        aria-label={i18n.state.editor.add_slide}
-        iconName="add"
-        onActionReady={($event: CustomEvent) => this.onActionOpenSlideAdd($event)}>
+      <app-action-busy aria-label={i18n.state.editor.add_slide} iconName="add" onActionReady={($event: CustomEvent) => this.onActionOpenSlideAdd($event)}>
         <ion-label aria-hidden="true">{i18n.state.editor.add_slide}</ion-label>
       </app-action-busy>
     );
diff --git a/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx b/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx
index 27ef6a462..d319992af 100644
--- a/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx
+++ b/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx
@@ -30,15 +30,6 @@ export class AppActionsDeck {
   @Prop()
   slides: JSX.IntrinsicElements[] = [];
 
-  @Prop()
-  blockSlide: EventEmitter;
-
-  @Prop()
-  signIn: EventEmitter;
-
-  @Prop()
-  addSlide: EventEmitter;
-
   @Prop()
   animatePrevNextSlide: EventEmitter;
 
@@ -160,8 +151,6 @@ export class AppActionsDeck {
     const popover: HTMLIonPopoverElement = await popoverController.create({
       component: 'app-deck-style',
       componentProps: {
-        signIn: this.signIn,
-        blockSlide: this.blockSlide,
         deckDidChange: this.deckDidChange
       },
       mode: 'ios',
@@ -240,7 +229,7 @@ export class AppActionsDeck {
     return (
       <aside>
         <ion-buttons slot="start">
-          <app-action-add-slide slides={this.slides} blockSlide={this.blockSlide} signIn={this.signIn} addSlide={this.addSlide}></app-action-add-slide>
+          <app-action-add-slide slidesLength={this.slides?.length}></app-action-add-slide>
 
           <button
             onMouseDown={($event) => $event.stopPropagation()}
diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx
index 892762434..b87c89367 100644
--- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx
+++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx
@@ -26,7 +26,7 @@ import {SelectedElement} from '../../../../../types/editor/selected-element';
 import {SlideScope} from '../../../../../models/data/slide';
 import {InitTemplate} from '../../../../../utils/editor/create-slides.utils';
 import {CloneSlideUtils} from '../../../../../utils/editor/clone-slide.utils';
-import { AppIcon } from '../../../../core/app-icon/app-icon';
+import {AppIcon} from '../../../../core/app-icon/app-icon';
 
 @Component({
   tag: 'app-actions-element',
@@ -48,7 +48,8 @@ export class AppActionsElement {
   @State()
   private selectedElement: SelectedElement | undefined;
 
-  @Event() private blockSlide: EventEmitter<boolean>;
+  @Event({bubbles: true})
+  private blockSlide: EventEmitter<boolean>;
 
   @Event() private slideDelete: EventEmitter<HTMLElement>;
 
diff --git a/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.tsx b/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.tsx
index b1c1ac146..8c0f4b218 100644
--- a/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.tsx
+++ b/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.tsx
@@ -27,11 +27,8 @@ export class AppActionsEditor {
   @Prop()
   slideNumber: number;
 
-  @Event() private blockSlide: EventEmitter<boolean>;
-
-  @Event() private signIn: EventEmitter<void>;
-
-  @Event() private addSlide: EventEmitter<JSX.IntrinsicElements>;
+  @Event({bubbles: true})
+  private blockSlide: EventEmitter<boolean>;
 
   @Event() private animatePrevNextSlide: EventEmitter<boolean>;
 
@@ -208,9 +205,6 @@ export class AppActionsEditor {
         class={editorStore.state.step != BreadcrumbsStep.DECK ? 'hidden' : undefined}
         fullscreen={this.fullscreen}
         slides={this.slides}
-        blockSlide={this.blockSlide}
-        signIn={this.signIn}
-        addSlide={this.addSlide}
         animatePrevNextSlide={this.animatePrevNextSlide}
         toggleFullScreen={this.toggleFullScreen}
         actionPublish={this.actionPublish}
diff --git a/studio/src/app/pages/editor/app-editor/app-editor.tsx b/studio/src/app/pages/editor/app-editor/app-editor.tsx
index ca7c2601c..b0a1f0f10 100644
--- a/studio/src/app/pages/editor/app-editor/app-editor.tsx
+++ b/studio/src/app/pages/editor/app-editor/app-editor.tsx
@@ -377,7 +377,8 @@ export class AppEditor {
     await this.replaceSlide($event.detail);
   }
 
-  private async addSlide($event: CustomEvent<JSX.IntrinsicElements>) {
+  @Listen('addSlide', {target: 'document'})
+  async addSlide($event: CustomEvent<JSX.IntrinsicElements>) {
     if (!$event) {
       return;
     }
@@ -787,8 +788,6 @@ export class AppEditor {
               fullscreen={this.fullscreen}
               slides={this.slides}
               slideNumber={this.activeIndex}
-              onSignIn={() => this.signIn()}
-              onAddSlide={($event: CustomEvent<JSX.IntrinsicElements>) => this.addSlide($event)}
               onAnimatePrevNextSlide={($event: CustomEvent<boolean>) => this.animatePrevNextSlide($event)}
               onSlideCopy={($event: CustomEvent<HTMLElement>) => this.copySlide($event)}
               onSlideTransform={($event: CustomEvent<JSX.IntrinsicElements>) => this.transformSlide($event)}
diff --git a/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx
index f44a85837..d0aba5c2a 100644
--- a/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx
+++ b/studio/src/app/popovers/editor/style/app-deck-style/app-deck-style.tsx
@@ -1,4 +1,4 @@
-import {Component, Element, EventEmitter, h, Host, Prop, State} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';
 
 import i18n from '../../../../stores/i18n.store';
 
@@ -14,12 +14,6 @@ import settingsStore from '../../../../stores/settings.store';
 export class AppDeck {
   @Element() el: HTMLElement;
 
-  @Prop()
-  signIn: EventEmitter<void>;
-
-  @Prop()
-  blockSlide: EventEmitter<boolean>;
-
   @Prop()
   deckDidChange: EventEmitter<HTMLElement>;
 
@@ -29,6 +23,12 @@ export class AppDeck {
   @State()
   private deckElement: HTMLDeckgoDeckElement;
 
+  @Event({bubbles: true})
+  private signIn: EventEmitter<void>;
+
+  @Event({bubbles: true})
+  private blockSlide: EventEmitter<boolean>;
+
   private imageHelper: ImageHelper;
 
   async componentWillLoad() {
diff --git a/studio/src/app/services/editor/anonymous/anonymous.service.ts b/studio/src/app/services/editor/anonymous/anonymous.service.ts
index a84055a8a..5210b17d3 100644
--- a/studio/src/app/services/editor/anonymous/anonymous.service.ts
+++ b/studio/src/app/services/editor/anonymous/anonymous.service.ts
@@ -1,5 +1,3 @@
-import {JSX} from '@stencil/core';
-
 import authStore from '../../../stores/auth.store';
 
 import {Constants} from '../../../types/core/constants';
@@ -18,9 +16,9 @@ export class AnonymousService {
    * We limit anonymous user to add three slides
    * @param slides
    */
-  couldAddSlide(slides: JSX.IntrinsicElements[]): Promise<boolean> {
+  couldAddSlide(slidesLength: number | undefined): Promise<boolean> {
     return new Promise<boolean>(async (resolve) => {
-      if (!slides || slides.length <= 0) {
+      if (slidesLength === undefined) {
         resolve(true);
         return;
       }
@@ -35,7 +33,7 @@ export class AnonymousService {
         return;
       }
 
-      resolve(slides.length < Constants.DECK.MIN_SLIDES);
+      resolve(slidesLength < Constants.DECK.MIN_SLIDES);
     });
   }
 
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index b23ebc093..ece56831b 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -26,10 +26,7 @@ import { SlideAttributes, SlideTemplate } from "./app/models/data/slide";
 import { InitTemplate } from "./app/utils/editor/create-slides.utils";
 export namespace Components {
     interface AppActionAddSlide {
-        "addSlide": EventEmitter;
-        "blockSlide": EventEmitter;
-        "signIn": EventEmitter;
-        "slides": JSX.IntrinsicElements[];
+        "slidesLength": number | undefined;
     }
     interface AppActionBusy {
         "iconName": string;
@@ -41,12 +38,9 @@ export namespace Components {
     }
     interface AppActionsDeck {
         "actionPublish": EventEmitter;
-        "addSlide": EventEmitter;
         "animatePrevNextSlide": EventEmitter;
-        "blockSlide": EventEmitter;
         "deckDidChange": EventEmitter;
         "fullscreen": boolean;
-        "signIn": EventEmitter;
         "slides": JSX.IntrinsicElements[];
         "toggleFullScreen": EventEmitter;
     }
@@ -158,9 +152,7 @@ export namespace Components {
     interface AppDeckImport {
     }
     interface AppDeckStyle {
-        "blockSlide": EventEmitter<boolean>;
         "deckDidChange": EventEmitter<HTMLElement>;
-        "signIn": EventEmitter<void>;
     }
     interface AppDeckTransition {
         "deckElement": HTMLDeckgoDeckElement;
@@ -1294,10 +1286,10 @@ declare global {
 }
 declare namespace LocalJSX {
     interface AppActionAddSlide {
-        "addSlide"?: EventEmitter;
-        "blockSlide"?: EventEmitter;
-        "signIn"?: EventEmitter;
-        "slides"?: JSX.IntrinsicElements[];
+        "onAddSlide"?: (event: CustomEvent<JSX.IntrinsicElements>) => void;
+        "onBlockSlide"?: (event: CustomEvent<boolean>) => void;
+        "onSignIn"?: (event: CustomEvent<void>) => void;
+        "slidesLength"?: number | undefined;
     }
     interface AppActionBusy {
         "iconName"?: string;
@@ -1313,13 +1305,10 @@ declare namespace LocalJSX {
     }
     interface AppActionsDeck {
         "actionPublish"?: EventEmitter;
-        "addSlide"?: EventEmitter;
         "animatePrevNextSlide"?: EventEmitter;
-        "blockSlide"?: EventEmitter;
         "deckDidChange"?: EventEmitter;
         "fullscreen"?: boolean;
         "onSelectDeck"?: (event: CustomEvent<void>) => void;
-        "signIn"?: EventEmitter;
         "slides"?: JSX.IntrinsicElements[];
         "toggleFullScreen"?: EventEmitter;
     }
@@ -1327,13 +1316,11 @@ declare namespace LocalJSX {
         "fullscreen"?: boolean;
         "hideActions"?: boolean;
         "onActionPublish"?: (event: CustomEvent<void>) => void;
-        "onAddSlide"?: (event: CustomEvent<JSX.IntrinsicElements>) => void;
         "onAnimatePrevNextSlide"?: (event: CustomEvent<boolean>) => void;
         "onBlockSlide"?: (event: CustomEvent<boolean>) => void;
         "onDeckDidChange"?: (event: CustomEvent<HTMLElement>) => void;
         "onElementFocus"?: (event: CustomEvent<HTMLElement>) => void;
         "onPresenting"?: (event: CustomEvent<boolean>) => void;
-        "onSignIn"?: (event: CustomEvent<void>) => void;
         "onSlideCopy"?: (event: CustomEvent<HTMLElement>) => void;
         "onSlideTransform"?: (event: CustomEvent<JSX.IntrinsicElements>) => void;
         "onToggleFullScreen"?: (event: CustomEvent<void>) => void;
@@ -1464,9 +1451,9 @@ declare namespace LocalJSX {
     interface AppDeckImport {
     }
     interface AppDeckStyle {
-        "blockSlide"?: EventEmitter<boolean>;
         "deckDidChange"?: EventEmitter<HTMLElement>;
-        "signIn"?: EventEmitter<void>;
+        "onBlockSlide"?: (event: CustomEvent<boolean>) => void;
+        "onSignIn"?: (event: CustomEvent<void>) => void;
     }
     interface AppDeckTransition {
         "deckElement"?: HTMLDeckgoDeckElement;

From 91330dbdeca07e24322cf8f896f4dae591903bbf Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 19 Aug 2021 10:10:57 +0200
Subject: [PATCH 06/11] feat: if thumbnails slides are displayed hide
 duplicated wide screen actions

---
 .../actions/deck/app-actions-deck/app-actions-deck.tsx     | 2 +-
 .../footer/app-actions-editor/app-actions-editor.scss      | 7 +++++++
 studio/src/app/pages/editor/app-editor/app-editor.scss     | 2 +-
 studio/src/app/pages/editor/app-editor/app-editor.tsx      | 2 +-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx b/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx
index d319992af..efd2ec6bb 100644
--- a/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx
+++ b/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx
@@ -259,7 +259,7 @@ export class AppActionsDeck {
             aria-label={i18n.state.editor.slides}
             onClick={() => this.openSlideNavigate()}
             color="primary"
-            class="ion-activatable wider-devices">
+            class="ion-activatable wider-devices slide-navigate">
             <ion-ripple-effect></ion-ripple-effect>
             <AppIcon name="md-list" ariaLabel="" ariaHidden={true}></AppIcon>
             <ion-label aria-hidden="true">{i18n.state.editor.slides}</ion-label>
diff --git a/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss b/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss
index 1c73b4d31..e88c37aff 100644
--- a/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss
+++ b/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss
@@ -78,6 +78,13 @@ app-actions-editor {
           }
         }
       }
+
+      @media screen and (min-width: 1201px) {
+        app-action-add-slide,
+        button.slide-navigate {
+          display: none;
+        }
+      }
     }
   }
 
diff --git a/studio/src/app/pages/editor/app-editor/app-editor.scss b/studio/src/app/pages/editor/app-editor/app-editor.scss
index e0e1c8ab8..22b05030e 100644
--- a/studio/src/app/pages/editor/app-editor/app-editor.scss
+++ b/studio/src/app/pages/editor/app-editor/app-editor.scss
@@ -7,7 +7,7 @@ ion-nav app-editor ion-content {
 
     display: flex;
 
-    @media screen and (min-width: 1200px) {
+    @media screen and (min-width: 1201px) {
       --slides-aside-width: 190px;
     }
   }
diff --git a/studio/src/app/pages/editor/app-editor/app-editor.tsx b/studio/src/app/pages/editor/app-editor/app-editor.tsx
index b0a1f0f10..ba61b3e07 100644
--- a/studio/src/app/pages/editor/app-editor/app-editor.tsx
+++ b/studio/src/app/pages/editor/app-editor/app-editor.tsx
@@ -610,7 +610,7 @@ export class AppEditor {
   }
 
   private initThumbnails() {
-    const wideScreen: MediaQueryList = window.matchMedia('(min-width: 1200px)');
+    const wideScreen: MediaQueryList = window.matchMedia('(min-width: 1201px)');
 
     this.thumbnails = !isFullscreen() && wideScreen.matches;
   }

From ddb0331a056ce6f71f553ba06142c21580f4a1b1 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 19 Aug 2021 10:22:51 +0200
Subject: [PATCH 07/11] feat: popover position if triggered from aside

---
 .../editor/actions/app-slides-aside/app-slides-aside.tsx | 2 +-
 .../deck/app-action-add-slide/app-action-add-slide.tsx   | 5 ++++-
 studio/src/components.d.ts                               | 2 ++
 studio/src/global/theme/popover.scss                     | 9 +++++++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
index f94d61ecc..62d9a7452 100644
--- a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
+++ b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
@@ -190,7 +190,7 @@ export class AppSlidesAside {
   private renderActions() {
     return (
       <div class="actions">
-        <app-action-add-slide slidesLength={this.slides.length}></app-action-add-slide>
+        <app-action-add-slide slidesLength={this.slides.length} popoverCssClass="popover-menu-wide-start"></app-action-add-slide>
       </div>
     );
   }
diff --git a/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx b/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx
index 37f7c6301..3ea229673 100644
--- a/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx
+++ b/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx
@@ -22,6 +22,9 @@ export class AppActionAddSlide {
   @Prop()
   slidesLength: number | undefined;
 
+  @Prop()
+  popoverCssClass: string;
+
   @Event({bubbles: true})
   private signIn: EventEmitter<void>;
 
@@ -53,7 +56,7 @@ export class AppActionAddSlide {
       component: 'app-create-slide',
       mode: 'ios',
       showBackdrop: false,
-      cssClass: 'popover-menu popover-menu-wide'
+      cssClass: `popover-menu popover-menu-wide ${this.popoverCssClass}`
     });
 
     popover.onDidDismiss().then(async (detail: OverlayEventDetail) => {
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index ece56831b..5697f2169 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -26,6 +26,7 @@ import { SlideAttributes, SlideTemplate } from "./app/models/data/slide";
 import { InitTemplate } from "./app/utils/editor/create-slides.utils";
 export namespace Components {
     interface AppActionAddSlide {
+        "popoverCssClass": string;
         "slidesLength": number | undefined;
     }
     interface AppActionBusy {
@@ -1289,6 +1290,7 @@ declare namespace LocalJSX {
         "onAddSlide"?: (event: CustomEvent<JSX.IntrinsicElements>) => void;
         "onBlockSlide"?: (event: CustomEvent<boolean>) => void;
         "onSignIn"?: (event: CustomEvent<void>) => void;
+        "popoverCssClass"?: string;
         "slidesLength"?: number | undefined;
     }
     interface AppActionBusy {
diff --git a/studio/src/global/theme/popover.scss b/studio/src/global/theme/popover.scss
index f0088e2c7..2d166bf0d 100644
--- a/studio/src/global/theme/popover.scss
+++ b/studio/src/global/theme/popover.scss
@@ -5,6 +5,15 @@ ion-popover.popover-menu {
     }
   }
 
+  &.popover-menu-wide-start {
+    @media screen and (min-width: 1200px) {
+      div.popover-content {
+        left: 176px !important;
+        right: inherit;
+      }
+    }
+  }
+
   --width: 376px;
   --max-width: calc(100% - 12px);
 

From bef1c73d6b8d5720944d976057c27f7b004c0fbd Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 19 Aug 2021 10:26:29 +0200
Subject: [PATCH 08/11] style: split thumbnail

---
 studio/src/global/theme/mixins/_deck.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/studio/src/global/theme/mixins/_deck.scss b/studio/src/global/theme/mixins/_deck.scss
index fe43020b8..98f618f56 100644
--- a/studio/src/global/theme/mixins/_deck.scss
+++ b/studio/src/global/theme/mixins/_deck.scss
@@ -4,10 +4,12 @@
   --slide-padding-end: 4px;
   --slide-padding-bottom: 8px;
 
-  --slide-split-padding-start: 4px;
-  --slide-split-padding-top: 8px;
-  --slide-split-padding-end: 4px;
-  --slide-split-padding-bottom: 8px;
+  deckgo-slide-split {
+    --slide-split-padding-start: 8px;
+    --slide-split-padding-top: 8px;
+    --slide-split-padding-end: 8px;
+    --slide-split-padding-bottom: 8px;
+  }
 
   --deckgo-highlight-code-carbon-header-padding: 2px 8px;
   --deckgo-highlight-code-carbon-header-button-width: 2px;

From 2c2dc0884edab1ed567db2bd75b6ae7e9b18212c Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 19 Aug 2021 10:33:07 +0200
Subject: [PATCH 09/11] feat: do not hide slide navigation on mobile

---
 .../actions/deck/app-actions-deck/app-actions-deck.tsx      | 6 +++++-
 .../footer/app-actions-editor/app-actions-editor.scss       | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx b/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx
index efd2ec6bb..8887e680a 100644
--- a/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx
+++ b/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx
@@ -1,6 +1,7 @@
 import {Component, Element, Event, EventEmitter, h, JSX, Prop} from '@stencil/core';
 import {modalController, OverlayEventDetail, popoverController} from '@ionic/core';
 
+import {isMobile} from '@deckdeckgo/utils';
 import {ConnectionState, DeckdeckgoEventDeckRequest} from '@deckdeckgo/types';
 
 import offlineStore from '../../../../../stores/offline.store';
@@ -47,6 +48,9 @@ export class AppActionsDeck {
 
   private destroyListener;
 
+  // Drag and drop is not supported on iOS and Firefox on Android
+  private mobile: boolean = isMobile();
+
   async componentWillLoad() {
     this.destroyListener = remoteStore.onChange('pendingRequests', async (requests: DeckdeckgoEventDeckRequest[] | undefined) => {
       if (requests && requests.length > 0) {
@@ -259,7 +263,7 @@ export class AppActionsDeck {
             aria-label={i18n.state.editor.slides}
             onClick={() => this.openSlideNavigate()}
             color="primary"
-            class="ion-activatable wider-devices slide-navigate">
+            class={`ion-activatable wider-devices ${!this.mobile ? 'hide-slide-navigate' : ''}`}>
             <ion-ripple-effect></ion-ripple-effect>
             <AppIcon name="md-list" ariaLabel="" ariaHidden={true}></AppIcon>
             <ion-label aria-hidden="true">{i18n.state.editor.slides}</ion-label>
diff --git a/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss b/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss
index e88c37aff..d2c445c82 100644
--- a/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss
+++ b/studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.scss
@@ -81,7 +81,7 @@ app-actions-editor {
 
       @media screen and (min-width: 1201px) {
         app-action-add-slide,
-        button.slide-navigate {
+        button.hide-slide-navigate {
           display: none;
         }
       }

From 7126797bfeb3c5ec5706a9644dcec8fe3ba20044 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 19 Aug 2021 14:20:08 +0200
Subject: [PATCH 10/11] fix: drag and drop quirks

---
 .../app-slides-aside/app-slides-aside.scss    |  5 ++--
 .../app-slides-aside/app-slides-aside.tsx     | 27 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss
index d6cc8538b..ebe148233 100644
--- a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss
+++ b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss
@@ -31,11 +31,11 @@ app-slides-aside {
       transition: margin 0.15s ease-in;
 
       &.hover {
-        margin-bottom: calc((var(--slides-aside-width) - 32px) * 9 / 16);
+        margin-bottom: calc(var(--slides-aside-width) * 9 / 16);
       }
 
       &.hover-top {
-        margin-top: calc((var(--slides-aside-width) - 32px) * 9 / 16);
+        margin-top: calc(var(--slides-aside-width) * 9 / 16);
       }
 
       &.drag-start, &.drag-hover {
@@ -45,6 +45,7 @@ app-slides-aside {
 
       &.drag-hover {
         min-height: 0;
+        height: 0;
         border: none;
       }
     }
diff --git a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
index 62d9a7452..ed3af32ed 100644
--- a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
+++ b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
@@ -28,6 +28,9 @@ export class AppSlidesAside {
 
   private readonly debounceUpdateSlide: (updateSlide: HTMLElement) => void;
 
+  private canDragLeave: boolean = true;
+  private canDragHover: boolean = true;
+
   constructor() {
     this.debounceUpdateAllSlides = debounce(async () => {
       await this.updateAllSlides();
@@ -42,6 +45,14 @@ export class AppSlidesAside {
     this.debounceUpdateAllSlides();
   }
 
+  componentDidUpdate() {
+    setTimeout(() => {
+      console.log('yo');
+      this.canDragLeave = true;
+      this.canDragHover = true;
+    }, 250);
+  }
+
   @Listen('deckDidLoad', {target: 'document'})
   onDeckDidLoad() {
     this.debounceUpdateAllSlides();
@@ -99,10 +110,18 @@ export class AppSlidesAside {
   }
 
   private onDragHover(to: number) {
-    if (!this.reorderDetail) {
+    if (!this.canDragHover) {
+      return;
+    }
+
+    if (!this.reorderDetail || this.reorderDetail.to === to) {
       return;
     }
 
+    if (this.reorderDetail.to === -1 && to === 0) {
+      this.canDragLeave = false;
+    }
+
     this.reorderDetail = {
       ...this.reorderDetail,
       to
@@ -110,6 +129,10 @@ export class AppSlidesAside {
   }
 
   private onDragLeave() {
+    if (!this.canDragLeave) {
+      return;
+    }
+
     if (!this.reorderDetail) {
       return;
     }
@@ -118,6 +141,8 @@ export class AppSlidesAside {
       return;
     }
 
+    this.canDragHover = false;
+
     this.reorderDetail = {
       ...this.reorderDetail,
       to: -1

From d71efc07788d5d5140befebcc6ebb1d7c5cdaf39 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 19 Aug 2021 14:30:26 +0200
Subject: [PATCH 11/11] feat: highlight current slide

---
 .../app-slides-aside/app-slides-aside.scss    |  5 ++
 .../app-slides-aside/app-slides-aside.tsx     | 53 +++++++++++--------
 .../pages/editor/app-editor/app-editor.tsx    |  2 +-
 studio/src/components.d.ts                    |  2 +
 4 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss
index ebe148233..8c5ecc1ab 100644
--- a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss
+++ b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.scss
@@ -30,6 +30,11 @@ app-slides-aside {
 
       transition: margin 0.15s ease-in;
 
+      &.highlight {
+        border: 1px solid var(--ion-color-dark);
+        box-shadow: rgba(var(--ion-color-dark-rgb), 0.4) 0 1px 4px;
+      }
+
       &.hover {
         margin-bottom: calc(var(--slides-aside-width) * 9 / 16);
       }
diff --git a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
index ed3af32ed..46980d66a 100644
--- a/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
+++ b/studio/src/app/components/editor/actions/app-slides-aside/app-slides-aside.tsx
@@ -15,6 +15,9 @@ export class AppSlidesAside {
   @State()
   private slides: HTMLElement[] = [];
 
+  @Prop()
+  activeIndex: number;
+
   @Prop()
   deckRef!: HTMLDeckgoDeckElement;
 
@@ -47,7 +50,6 @@ export class AppSlidesAside {
 
   componentDidUpdate() {
     setTimeout(() => {
-      console.log('yo');
       this.canDragLeave = true;
       this.canDragHover = true;
     }, 250);
@@ -186,32 +188,37 @@ export class AppSlidesAside {
         onDragOver={($event: DragEvent) => $event.preventDefault()}
         onDragLeave={() => this.onDragLeave()}
         class={this.reorderDetail !== undefined ? 'drag' : ''}>
-        {this.slides.map((slide: HTMLElement, index: number) => (
-          <app-slide-thumbnail
-            custom-tappable
-            onClick={async () => await slideTo(index)}
-            key={slide.getAttribute('slide_id')}
-            slide={slide}
-            deck={this.deckRef}
-            class={
-              index === this.reorderDetail?.to && this.reorderDetail?.from !== this.reorderDetail?.to
-                ? 'hover'
-                : index === 0 && this.reorderDetail?.to === -1
-                ? 'hover-top'
-                : index === this.reorderDetail?.from
-                ? index === this.reorderDetail?.to
-                  ? 'drag-start'
-                  : 'drag-hover'
-                : ''
-            }
-            draggable={true}
-            onDragStart={() => this.onDragStart(index)}
-            onDragOver={() => this.onDragHover(index)}></app-slide-thumbnail>
-        ))}
+        {this.slides.map((slide: HTMLElement, index: number) => this.renderThumbnail(slide, index))}
       </aside>
     );
   }
 
+  private renderThumbnail(slide: HTMLElement, index: number) {
+    const dragClass: string =
+      index === this.reorderDetail?.to && this.reorderDetail?.from !== this.reorderDetail?.to
+        ? 'hover'
+        : index === 0 && this.reorderDetail?.to === -1
+        ? 'hover-top'
+        : index === this.reorderDetail?.from
+        ? index === this.reorderDetail?.to
+          ? 'drag-start'
+          : 'drag-hover'
+        : '';
+
+    return (
+      <app-slide-thumbnail
+        custom-tappable
+        onClick={async () => await slideTo(index)}
+        key={slide.getAttribute('slide_id')}
+        slide={slide}
+        deck={this.deckRef}
+        class={`${dragClass} ${this.activeIndex === index ? 'highlight' : ''}`}
+        draggable={true}
+        onDragStart={() => this.onDragStart(index)}
+        onDragOver={() => this.onDragHover(index)}></app-slide-thumbnail>
+    );
+  }
+
   private renderActions() {
     return (
       <div class="actions">
diff --git a/studio/src/app/pages/editor/app-editor/app-editor.tsx b/studio/src/app/pages/editor/app-editor/app-editor.tsx
index ba61b3e07..c76edc06a 100644
--- a/studio/src/app/pages/editor/app-editor/app-editor.tsx
+++ b/studio/src/app/pages/editor/app-editor/app-editor.tsx
@@ -837,7 +837,7 @@ export class AppEditor {
       return undefined;
     }
 
-    return <app-slides-aside deckRef={this.deckRef}></app-slides-aside>;
+    return <app-slides-aside deckRef={this.deckRef} activeIndex={this.activeIndex}></app-slides-aside>;
   }
 
   private renderSlidePreview() {
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index 5697f2169..3f917379a 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -355,6 +355,7 @@ export namespace Components {
         "overflow": boolean;
     }
     interface AppSlidesAside {
+        "activeIndex": number;
         "deckRef": HTMLDeckgoDeckElement;
     }
     interface AppSlotType {
@@ -1680,6 +1681,7 @@ declare namespace LocalJSX {
         "overflow"?: boolean;
     }
     interface AppSlidesAside {
+        "activeIndex"?: number;
         "deckRef": HTMLDeckgoDeckElement;
         "onReorder"?: (event: CustomEvent<ItemReorderEventDetail>) => void;
     }