init tabs in issue details

src/components/CommentsList.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template><v-sheet class="px-4 py-2">a</v-sheet></template>
+
+<style scoped lang="scss"></style>

src/components/HistoryList.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <v-sheet class="px-4 py-2"> History </v-sheet>
+</template>
+
+<style scoped lang="scss"></style>

src/components/IssueDetails.vue

@@ -9,6 +9,8 @@ import AssigneeMenu from '@/components/AssigneeMenu.vue'
 import ReporterInfo from '@/components/ReporterInfo.vue'
 import IssueTitle from '@/components/IssueTitle.vue'
 import IssueDate from '@/components/IssueDate.vue'
+import CommentsList from '@/components/CommentsList.vue'
+import HistoryList from '@/components/HistoryList.vue'
 
 interface Props {
   ckey: string
@@ -23,6 +25,7 @@ const emit = defineEmits<{
 
 const issueStore = useIssueStore()
 const issue = ref<Issue>()
+const activity = ref()
 
 const { ckey } = defineProps<Props>()
 
@@ -127,10 +130,23 @@ defineExpose({
     </expansion-panel>
 
     <expansion-panel title="Activity">
-      <v-btn-group divided border density="compact">
+      <v-sheet>
-        <v-btn>comments</v-btn>
+        <v-tabs v-model="activity" density="compact">
-        <v-btn>history</v-btn>
+          <v-tab prepend-icon="mdi-star" value="comment">Comments</v-tab>
-      </v-btn-group>
+          <v-tab prepend-icon="mdi-star" value="history">History</v-tab>
+        </v-tabs>
+
+        <v-divider />
+
+        <v-tabs-window v-model="activity">
+          <v-tabs-window-item value="comment">
+            <comments-list />
+          </v-tabs-window-item>
+          <v-tabs-window-item value="history">
+            <history-list />
+          </v-tabs-window-item>
+        </v-tabs-window>
+      </v-sheet>
     </expansion-panel>
   </div>
 </template>