Change javascript to typescript

frontend/components/comment/Comment.vue

@@ -95,15 +95,14 @@
   </v-card>
 </template>
 
-<script>
+<script lang="ts">
 import Vue from 'vue'
 import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format'
 import VueFilterDateParse from '@vuejs-community/vue-filter-date-parse'
 Vue.use(VueFilterDateFormat)
 Vue.use(VueFilterDateParse)
 
-export default {
-  name: 'Comment',
+export default Vue.extend({
   props: {
     comment: {
       required: true,
@@ -114,26 +113,29 @@ export default {
       type: Number
     }
   },
+
   data() {
     return {
       showEdit: false,
       editText: this.comment.text,
       commentRules: [
-        v => !!v.trim() || 'Comment is required'
+        (v: string) => !!v.trim() || 'Comment is required'
       ],
       valid: false
     }
   },
+
   methods: {
-    updateComment(newText) {
+    updateComment(newText: string) {
       this.showEdit = false
       const comment = {...this.comment, text:newText }
       this.$emit('update-comment', comment)
     },
+    
     cancel() {
       this.showEdit = false
       this.editText = this.comment.text
     }
   }
-}
+})
 </script>

frontend/components/layout/FeatureCard.vue

@@ -15,8 +15,10 @@
   </v-card>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   props: {
     title: {
       type: String,
@@ -34,5 +36,5 @@ export default {
       required: true
     }
   }
-}
+})
 </script>

frontend/components/layout/FeatureCards.vue

@@ -35,10 +35,11 @@
   </v-container>
 </template>
 
-<script>
-import FeatureCard from './FeatureCard'
+<script lang="ts">
+import Vue from 'vue'
+import FeatureCard from './FeatureCard.vue'
 
-export default {
+export default Vue.extend({
   components: {
     FeatureCard
   },
@@ -64,5 +65,5 @@ export default {
       ]
     }
   }
-}
+})
 </script>

frontend/components/layout/LocaleMenu.vue

@@ -26,7 +26,3 @@
     </v-list>
   </v-menu>
 </template>
-
-<script>
-export default {}
-</script>

frontend/components/layout/TheBottomBanner.vue

@@ -61,8 +61,9 @@
   </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   data() {
     return {
       items: [
@@ -73,5 +74,5 @@ export default {
       ]
     }
   }
-}
+})
 </script>

frontend/components/layout/TheColorModeSwitcher.vue

@@ -13,8 +13,9 @@
   </v-btn>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   data() {
     return {
       isDark: false
@@ -24,7 +25,7 @@ export default {
   watch: {
     isDark() {
       this.$vuetify.theme.dark = this.isDark
-      localStorage.setItem('dark', this.isDark)
+      localStorage.setItem('dark', JSON.stringify(this.isDark))
     }
   },
 
@@ -32,5 +33,5 @@ export default {
     const dark = localStorage.getItem('dark')
     this.isDark = dark ? JSON.parse(dark) : false
   }
-}
+})
 </script>

frontend/components/tasks/toolbar/forms/FormAutoLabeling.vue

@@ -24,10 +24,11 @@
   </base-card>
 </template>
 
-<script>
-import BaseCard from '@/components/utils/BaseCard'
+<script lang="ts">
+import Vue from 'vue'
+import BaseCard from '@/components/utils/BaseCard.vue'
 
-export default {
+export default Vue.extend({
   components: {
     BaseCard
   },
@@ -44,5 +45,5 @@ export default {
       required: true
     }
   }
-}
+})
 </script>

frontend/components/utils/ActionMenu.vue

@@ -29,8 +29,10 @@
   </v-menu>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   props: {
     text: {
       type: String,
@@ -42,5 +44,5 @@ export default {
       required: true
     }
   }
-}
+})
 </script>

frontend/layouts/workspace.vue

@@ -17,7 +17,7 @@
       />
     </v-navigation-drawer>
 
-    <v-main>
+    <v-main class="pb-0">
       <nuxt />
     </v-main>
   </v-app>