visual(pages): highlight active horizontal page

Author: gustavotoyota

apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayHorizontalPage.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="horizontal-page"
+    :class="{ active }"
     @click="internals.pages.goToPage(pageId)"
   >
     <div class="group-title">
@@ -28,6 +29,7 @@ import { useRealtimeContext } from 'src/code/realtime/context';
 
 const props = defineProps<{
   pageId: string;
+  active: boolean;
 }>();
 
 const realtimeCtx = useRealtimeContext();
@@ -70,6 +72,16 @@ const isEmpty = computed(
   cursor: pointer;
 
   max-width: min(120px, 100vw / 4);
+
+  padding-top: 6px;
+  padding-right: 5px;
+  padding-bottom: 2px;
+  padding-left: 5px;
+}
+.horizontal-page.active {
+  border-radius: 4px;
+
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .group-title {

apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayHorizontalPath.vue

@@ -16,7 +16,7 @@
     "
   >
     <div style="display: inline-block; pointer-events: auto">
-      <div style="display: flex; gap: 5px; direction: ltr">
+      <div style="display: flex; align-items: center; direction: ltr">
         <template
           v-for="(pageId, index) in internals.pages.react.pathPageIds.slice(
             0,
@@ -26,12 +26,15 @@
         >
           <span
             v-if="index > 0"
-            style="color: #808080"
+            style="color: #808080; margin-top: -2px"
           >
             >
           </span>
 
-          <DisplayHorizontalPage :page-id="pageId" />
+          <DisplayHorizontalPage
+            :page-id="pageId"
+            :active="index === internals.pages.react.pageIndex"
+          />
         </template>
       </div>
     </div>