refactor: move main components to views and remove unused ones

.github/FUNDING.yml

@@ -1,2 +0,0 @@
-
-custom: ['https://www.buymeacoffee.com/UJGejcNli']

src/components/ControlBar.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="flex justify-between items-center py-4 px-2">
-    <div class="flex w-1/3">
-      <RoundButton @click="$emit('stop')" class="mr-1">
-        <img :src="`/icons/${darkMode ? 'dark' : 'light'}/stop.svg`" alt="stop recording" />
-      </RoundButton>
-      <RoundButton @click="$emit('pause')" v-show="isRecording">
-        <img
-          :src="`/icons/${darkMode ? 'dark' : 'light'}/play.svg`"
-          v-show="isPaused"
-          alt="resume recording"
-        />
-        <img
-          :src="`/icons/${darkMode ? 'dark' : 'light'}/pause.svg`"
-          v-show="!isPaused"
-          alt="pause recording"
-        />
-      </RoundButton>
-    </div>
-    <RecordingLabel class="w-1/3" :is-paused="isPaused" :v-show="isRecording" />
-  </div>
-</template>
-
-<script>
-import RoundButton from '@/components/RoundButton.vue'
-import RecordingLabel from '@/components/RecordingLabel.vue'
-
-export default {
-  name: 'ControlBar',
-  components: { RoundButton, RecordingLabel },
-
-  props: {
-    darkMode: { type: Boolean, default: false },
-    isRecording: { type: Boolean, default: false },
-    isPaused: { type: Boolean, default: false },
-  },
-}
-</script>
-
-<style></style>

src/components/RecordingTabOld.vue

@@ -1,68 +0,0 @@
-<template>
-  <div
-    class="bg-white flex flex-col items-center overflow-auto break-all whitespace-pre-wrap h-100 dark:bg-black-light"
-    :class="{ 'justify-center': !liveEvents.length }"
-  >
-    <div
-      v-if="!liveEvents.length"
-      class="text-sm text-gray flex flex-col justify-center items-center animate-pulse h-100 dark:text-gray-light"
-    >
-      Waiting for events...
-    </div>
-    <ul v-else class="flex flex-col items-start p-2 w-full h-100">
-      <li
-        v-for="(event, index) in liveEvents"
-        :key="index"
-        class="border-b border-gray-lighter mb-4 w-full p-2"
-      >
-        <div class="text-sm mb-1">
-          <span class="text-gray mr-1 dark:text-gray-light">{{ index + 1 }}.</span>
-          <span class="text-gray-dark font-semibold uppercase dark:text-gray-light">{{
-            event.action
-          }}</span>
-        </div>
-        <span class="text-xs text-gray dark:text-gray-lightest">
-          {{ parseEventValue(event) }}
-        </span>
-      </li>
-    </ul>
-  </div>
-</template>
-<script>
-export default {
-  name: 'RecordingTab',
-
-  props: {
-    isRecording: { type: Boolean, default: false },
-    liveEvents: {
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
-  },
-
-  methods: {
-    parseEventValue(event) {
-      if (!event) {
-        return ''
-      }
-
-      if (event.selector) {
-        return event.selector
-      }
-
-      const action = event?.action.toLowerCase()
-
-      if (action === 'viewport') {
-        return `width: ${event.value.width} - height: ${event.value.height}`
-      }
-      if (action === 'goto') {
-        return event.href
-      }
-
-      return ''
-    },
-  },
-}
-</script>

src/modules/overlay/Overlay.vue

@@ -82,7 +82,6 @@
 <script>
 import { directive } from 'vue-tippy'
 import 'tippy.js/dist/tippy.css'
-import '@/assets/tailwind.css'
 
 import { mapState, mapMutations } from 'vuex'
 
@@ -130,7 +129,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .headless-recorder-flash {
   animation-name: flash;
   animation-duration: 0.5s;

src/modules/overlay/Selector.vue

@@ -99,7 +99,7 @@ export default {
   width: 100%;
   height: 100%;
   pointer-events: none;
-  z-index: 2147483647;
+  z-index: 2147483646;
 }
 
 .selector {

src/popup/PopupApp.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="bg-gray-lightest dark:bg-black flex flex-col overflow-hidden">
     <Header @options="openOptions" @help="goHelp" @dark="toggleDarkMode" />
-    <HomeTab v-if="!showResultsTab && !isRecording" @start="toggleRecord" />
-    <RecordingTab
+
+    <Home v-if="!showResultsTab && !isRecording" @start="toggleRecord" />
+
+    <Recording
       @stop="toggleRecord"
       @pause="togglePause"
       @restart="restart(true)"
@@ -11,13 +13,16 @@
       :dark-mode="options?.extension?.darkMode"
       v-show="!showResultsTab && isRecording"
     />
-    <ResultsTab
+
+    <Results
       :puppeteer="code"
       :playwright="codeForPlaywright"
       :options="options"
       v-if="showResultsTab"
       v-on:update:tab="currentResultTab = $event"
     />
+
+    <!-- TODO: Move this into its own component -->
     <div
       data-test-id="results-footer"
       class="flex py-2 px-3 justify-between bg-black-shady"
@@ -55,12 +60,13 @@ import { popupActions, isDarkMode } from '@/services/constants'
 
 import CodeGenerator from '@/modules/code-generator'
 
+import Home from '@/views/Home.vue'
+import Results from '@/views/Results.vue'
+import Recording from '@/views/Recording.vue'
+
 import Button from '@/components/Button.vue'
 import Footer from '@/components/Footer.vue'
 import Header from '@/components/Header.vue'
-import HomeTab from '@/components/HomeTab.vue'
-import ResultsTab from '@/components/ResultsTab.vue'
-import RecordingTab from '@/components/RecordingTab.vue'
 
 let bus
 
@@ -74,9 +80,9 @@ const defaultOptions = {
 export default {
   name: 'PopupApp',
   components: {
-    ResultsTab,
-    RecordingTab,
-    HomeTab,
+    Results,
+    Recording,
+    Home,
     Header,
     Footer,
     Button,