feat: show clicks slider in presenter mode

packages/client/App.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
+import { watchEffect } from 'vue'
+import { themeVars } from './env'
 import setupRoot from './setup/root'
 
 setupRoot()
+
+watchEffect(() => {
+  for (const [key, value] of Object.entries(themeVars.value))
+    document.body.style.setProperty(key, value.toString())
+})
 </script>
 
 <template>

packages/client/internals/OverviewClicksSlider.vue → packages/client/internals/ClicksSlider.vue

@@ -30,10 +30,14 @@ function onMousedown() {
   <div
     class="flex gap-0.5 items-center select-none"
     :title="`Clicks in this slide: ${total}`"
+    :class="total ? '' : 'op50'"
   >
     <div class="flex gap-1 items-center min-w-16">
       <carbon:cursor-1 text-sm op50 />
-      <span v-if="current <= total && current >= 0" text-primary>{{ current }}/</span>
+      <template v-if="current <= total && current >= 0">
+        <span text-primary>{{ current }}</span>
+        <span op50>/</span>
+      </template>
       <span op50>{{ total }}</span>
     </div>
     <div
@@ -47,16 +51,16 @@ function onMousedown() {
           i === 0 ? 'rounded-l border-l' : '',
           i === total ? 'rounded-r border-r' : '',
         ]"
-        :style="{ width: `${1 / total * 100}%` }"
+        :style="{ width: total > 0 ? `${1 / total * 100}%` : '100%' }"
       >
-        <div absolute inset-0 z--1 :class=" i <= current ? 'bg-primary op20' : ''" />
+        <div absolute inset-0 :class="i <= current ? 'bg-primary op20' : ''" />
         <div
           :class="[
             +i === +current ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',
             i === 0 ? 'rounded-l' : '',
             i === total ? 'rounded-r' : 'border-r-2',
           ]"
-          w-full h-full text-xs flex items-center justify-center
+          w-full h-full text-xs flex items-center justify-center z-1
         >
           {{ i }}
         </div>

packages/client/internals/QuickOverview.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useEventListener, useVModel } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
-import { themeVars } from '../env'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
@@ -128,7 +127,6 @@ watchEffect(() => {
           <div
             class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
             :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
-            :style="themeVars"
             @click="go(+route.path)"
           >
             <SlideContainer

packages/client/pages/overview.vue

@@ -3,7 +3,7 @@ import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { RouteRecordRaw } from 'vue-router'
 import type { ClicksContext } from 'packages/types'
-import { configs, themeVars } from '../env'
+import { configs } from '../env'
 import { openInEditor, rawRoutes } from '../logic/nav'
 import { useFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
@@ -13,7 +13,7 @@ import SlideWrapper from '../internals/SlideWrapper'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
-import OverviewClicksSlider from '../internals/OverviewClicksSlider.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
 import { CLICKS_MAX } from '../constants'
 
 const cardWidth = 450
@@ -164,7 +164,6 @@ onMounted(() => {
         <div class="flex flex-col gap-2 my5">
           <div
             class="border rounded border-main overflow-hidden bg-main select-none h-max"
-            :style="themeVars"
             @dblclick="openSlideInNewTab(route.path)"
           >
             <SlideContainer
@@ -184,7 +183,7 @@ onMounted(() => {
               <DrawingPreview :page="+route.path" />
             </SlideContainer>
           </div>
-          <OverviewClicksSlider
+          <ClicksSlider
             v-if="getSlideClicks(route)"
             mt-2
             :clicks-context="getClicksContext(route)"

packages/client/pages/play.vue

@@ -4,7 +4,7 @@ import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize
 import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
-import { configs, themeVars } from '../env'
+import { configs } from '../env'
 import Controls from '../internals/Controls.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
@@ -42,7 +42,10 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
 <template>
   <PrintStyle v-if="isPrintMode" />
-  <div id="page-root" ref="root" class="grid" :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'" :style="themeVars">
+  <div
+    id="page-root" ref="root" class="grid"
+    :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'"
+  >
     <SlideContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"

packages/client/pages/presenter.vue

@@ -4,13 +4,13 @@ import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
 import { clicksContext, currentPage, currentRoute, currentSlideId, hasNext, nextRoute, queryClicks, rawRoutes, total, useSwipeControls } from '../logic/nav'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
-import { configs, themeVars } from '../env'
+import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { isDrawing } from '../logic/drawings'
-import { useFixedClicks } from '../composables/useClicks'
+import { useFixedClicks, usePrimaryClicks } from '../composables/useClicks'
 import SlideWrapper from '../internals/SlideWrapper'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
@@ -21,6 +21,7 @@ import Goto from '../internals/Goto.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import DrawingControls from '../internals/DrawingControls.vue'
 import IconButton from '../internals/IconButton.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
 
 const main = ref<HTMLDivElement>()
 
@@ -93,20 +94,25 @@ onMounted(() => {
 <template>
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container" :class="`layout${presenterLayout}`">
-      <div ref="main" class="relative grid-section main flex flex-col p-2 lg:p-4" :style="themeVars">
+      <div ref="main" class="relative grid-section main flex flex-col">
         <SlideContainer
           key="main"
-          class="h-full w-full"
+          class="h-full w-full p-2 lg:p-4 flex-auto"
         >
           <template #default>
             <SlidesShow render-context="presenter" />
           </template>
         </SlideContainer>
+        <ClicksSlider
+          :key="currentRoute?.path"
+          :clicks-context="usePrimaryClicks(currentRoute)"
+          class="w-full pb2 px4 flex-none"
+        />
         <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
           Current
         </div>
       </div>
-      <div class="relative grid-section next flex flex-col p-2 lg:p-4" :style="themeVars">
+      <div class="relative grid-section next flex flex-col p-2 lg:p-4">
         <SlideContainer
           v-if="nextFrame && nextFrameClicksCtx"
           key="next"
@@ -182,7 +188,7 @@ onMounted(() => {
     </div>
     <div class="progress-bar">
       <div
-        class="progress h-2px bg-primary transition-all"
+        class="progress h-3px bg-primary transition-all"
         :style="{ width: `${(currentPage - 1) / (total - 1) * 100}%` }"
       />
     </div>
@@ -257,7 +263,7 @@ onMounted(() => {
 }
 
 .progress-bar {
-  --uno: fixed left-0 right-0 bottom-0;
+  --uno: fixed left-0 right-0 top-0;
 }
 
 .grid-section {

packages/client/pages/presenter/print.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
-import { configs, themeVars } from '../../env'
+import { configs } from '../../env'
 import { rawRoutes, total } from '../../logic/nav'
 import NoteDisplay from '../../internals/NoteDisplay.vue'
 
@@ -34,7 +34,7 @@ const slidesWithNote = computed(() => rawRoutes
 </script>
 
 <template>
-  <div id="page-root" :style="themeVars">
+  <div id="page-root">
     <div class="m-4">
       <div class="mb-10">
         <h1 class="text-4xl font-bold mt-2">

packages/client/pages/print.vue

@@ -2,7 +2,6 @@
 import { watchEffect } from 'vue'
 import { windowSize } from '../state'
 import { isPrintMode } from '../logic/nav'
-import { themeVars } from '../env'
 import PrintContainer from '../internals/PrintContainer.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
 
@@ -16,7 +15,7 @@ watchEffect(() => {
 
 <template>
   <PrintStyle v-if="isPrintMode" />
-  <div id="page-root" class="grid grid-cols-[1fr_max-content]" :style="themeVars">
+  <div id="page-root" class="grid grid-cols-[1fr_max-content]">
     <PrintContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"