From 4e86dbf14a7ab430463c66867659e969c8641db8 Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Wed, 13 Sep 2023 22:13:18 +0800
Subject: [PATCH 1/2] Convert c-segment to typescript

---
 frontend/src/components/c-segment.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/c-segment.vue b/frontend/src/components/c-segment.vue
index 53aa79e2c7..60b552376a 100644
--- a/frontend/src/components/c-segment.vue
+++ b/frontend/src/components/c-segment.vue
@@ -31,11 +31,13 @@
     )
 </template>
 
-<script>
+<script lang='ts'>
+import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 import Segment from '../utils/segment';
+import { StoreState } from '../types/vuex.d';
 
-export default {
+export default defineComponent({
   name: 'c-segment',
   props: {
     segment: {
@@ -49,14 +51,14 @@ export default {
   },
   data() {
     return {
-      isOpen: this.segment.knownAuthor || this.segment.lines.length < 5,
-      canOpen: !this.segment.knownAuthor && this.segment.lines.length > 4,
-      transparencyValue: '30',
+      isOpen: (this.segment.knownAuthor === null) || this.segment.lines.length < 5 as boolean,
+      canOpen: (this.segment.knownAuthor !== null) && this.segment.lines.length > 4 as boolean,
+      transparencyValue: '30' as string,
     };
   },
   computed: {
     ...mapState({
-      authorColors: ['tabAuthorColors'],
+      authorColors: (state: unknown) => (state as StoreState).tabAuthorColors,
     }),
   },
   methods: {
@@ -64,7 +66,7 @@ export default {
       this.isOpen = !this.isOpen;
     },
   },
-};
+});
 </script>
 
 <style lang="css">

From 20e5007227f81f402b6732028ed5cbeb5bf50e27 Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Wed, 13 Sep 2023 22:26:44 +0800
Subject: [PATCH 2/2] Fix inverted isOpen and canOpen

---
 frontend/src/components/c-segment.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/c-segment.vue b/frontend/src/components/c-segment.vue
index 60b552376a..0d3234ff1e 100644
--- a/frontend/src/components/c-segment.vue
+++ b/frontend/src/components/c-segment.vue
@@ -51,8 +51,8 @@ export default defineComponent({
   },
   data() {
     return {
-      isOpen: (this.segment.knownAuthor === null) || this.segment.lines.length < 5 as boolean,
-      canOpen: (this.segment.knownAuthor !== null) && this.segment.lines.length > 4 as boolean,
+      isOpen: (this.segment.knownAuthor !== null) || this.segment.lines.length < 5 as boolean,
+      canOpen: (this.segment.knownAuthor === null) && this.segment.lines.length > 4 as boolean,
       transparencyValue: '30' as string,
     };
   },