0351d front end linting (#377)

* feat: disable custom script for  trial users

* after lint fix

* frontend linting

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/editors/EditorOptionsPanel.vue

@@ -1,11 +1,20 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="show">
+  <collapse
+    v-model="show"
+    class="p-4 w-full border-b"
+  >
     <template #title>
       <div class="flex items-center pr-8">
-        <div class="mr-3" :class="{'text-blue-600':show, 'text-gray-500':!show}">
+        <div
+          class="mr-3"
+          :class="{ 'text-blue-600': show, 'text-gray-500': !show }"
+        >
           <slot name="icon" />
         </div>
-        <h3 id="v-step-2" class="font-semibold flex-grow">
+        <h3
+          id="v-step-2"
+          class="font-semibold flex-grow"
+        >
           {{ name }}
         </h3>
         <pro-tag v-if="hasProTag" />
@@ -17,30 +26,30 @@
 </template>
 
 <script>
-import Collapse from '~/components/global/Collapse.vue'
-import ProTag from '~/components/global/ProTag.vue'
+import Collapse from "~/components/global/Collapse.vue"
+import ProTag from "~/components/global/ProTag.vue"
 
 export default {
-  name: 'EditorOptionsPanel',
+  name: "EditorOptionsPanel",
   components: { Collapse, ProTag },
   props: {
     name: {
       type: String,
-      required: true
+      required: true,
     },
     hasProTag: {
       type: Boolean,
-      default: false
+      default: false,
     },
     alreadyOpened: {
       type: Boolean,
-      default: false
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.alreadyOpened,
     }
   },
-  data () {
-    return {
-      show: this.alreadyOpened
-    }
-  }
 }
 </script>

client/components/open/editors/EditorRightSidebar.vue

@@ -1,7 +1,9 @@
 <template>
-  <transition @leave="(el,done) => sidebarMotion?.leave(done)">
-    <div v-if="show" ref="sidebar"
-         class="absolute shadow-lg shadow-gray-800/30 top-0 h-[calc(100vh-53px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 z-30"
+  <transition @leave="(el, done) => sidebarMotion?.leave(done)">
+    <div
+      v-if="show"
+      ref="sidebar"
+      class="absolute shadow-lg shadow-gray-800/30 top-0 h-[calc(100vh-53px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 z-30"
     >
       <slot />
     </div>
@@ -9,24 +11,26 @@
 </template>
 
 <script setup>
-import {slideRight, useMotion} from "@vueuse/motion"
-import {watch} from "vue";
+import { slideRight, useMotion } from "@vueuse/motion"
+import { watch } from "vue"
 
 const props = defineProps({
   show: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 })
 
 const sidebar = ref(null)
 const sidebarMotion = ref(null)
-watch(() => props.show, (newVal) => {
-  if (newVal) {
-    nextTick(() => {
-      sidebarMotion.value = useMotion(sidebar.value, slideRight)
-    })
-  }
-})
-
+watch(
+  () => props.show,
+  (newVal) => {
+    if (newVal) {
+      nextTick(() => {
+        sidebarMotion.value = useMotion(sidebar.value, slideRight)
+      })
+    }
+  },
+)
 </script>