From 6722b69cbf786df2b12811c4b9e01c201f22dcd3 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 11 May 2023 00:31:51 +0900
Subject: [PATCH] Display thirdparty licenses

---
 src/config/locales/en/translation.json        |   6 +-
 src/main/index.ts                             |  30 ++---
 .../components/TimelineSpace/Modals.vue       |   5 +-
 .../TimelineSpace/Modals/Shortcut.vue         |   2 +-
 .../TimelineSpace/Modals/Thirdparty.vue       | 105 ++++++++++++++++++
 5 files changed, 130 insertions(+), 18 deletions(-)
 create mode 100644 src/renderer/components/TimelineSpace/Modals/Thirdparty.vue

diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index e134a381..28818446 100644
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@@ -34,7 +34,8 @@
       "jump_to": "Jump to"
     },
     "help": {
-      "name": "Help"
+      "name": "Help",
+      "thirdparty": "Thirdparty licenses"
     }
   },
   "global_header": {
@@ -303,6 +304,9 @@
       "comment": "Additional comments",
       "cancel": "Cancel",
       "ok": "Report"
+    },
+    "thirdparty": {
+      "title": "Thirdparty licenses"
     }
   },
   "cards": {
diff --git a/src/main/index.ts b/src/main/index.ts
index 07856ec8..2095b81e 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -790,22 +790,16 @@ ipcMain.handle('list-fonts', async (_: IpcMainInvokeEvent) => {
 })
 
 // Settings
-ipcMain.handle(
-  'get-account-setting',
-  async (_: IpcMainInvokeEvent, accountId: number): Promise<Setting> => {
-    const setting = await getSetting(db, accountId)
-    return setting
-  }
-)
+ipcMain.handle('get-account-setting', async (_: IpcMainInvokeEvent, accountId: number): Promise<Setting> => {
+  const setting = await getSetting(db, accountId)
+  return setting
+})
 
-ipcMain.handle(
-  'update-account-setting',
-  async (_: IpcMainInvokeEvent, setting: Setting): Promise<Setting> => {
-    console.log(setting)
-    const res = await createOrUpdateSetting(db, setting)
-    return res
-  }
-)
+ipcMain.handle('update-account-setting', async (_: IpcMainInvokeEvent, setting: Setting): Promise<Setting> => {
+  console.log(setting)
+  const res = await createOrUpdateSetting(db, setting)
+  return res
+})
 
 // Cache
 ipcMain.handle('get-cache-hashtags', async (_: IpcMainInvokeEvent) => {
@@ -1047,6 +1041,12 @@ const ApplicationMenu = (accountsChange: Array<MenuItemConstructorOptions>, menu
           click: () => {
             mainWindow!.webContents.send('open-shortcuts-list')
           }
+        },
+        {
+          label: i18n.t<string>('main_menu.help.thirdparty'),
+          click: () => {
+            mainWindow!.webContents.send('open-thirdparty-modal')
+          }
         }
       ]
     }
diff --git a/src/renderer/components/TimelineSpace/Modals.vue b/src/renderer/components/TimelineSpace/Modals.vue
index b6b440f8..0acbeaed 100644
--- a/src/renderer/components/TimelineSpace/Modals.vue
+++ b/src/renderer/components/TimelineSpace/Modals.vue
@@ -7,6 +7,7 @@
     <mute-confirm v-if="muteConfirmModal"></mute-confirm>
     <shortcut></shortcut>
     <report v-if="reportModal"></report>
+    <thirdparty />
   </div>
 </template>
 
@@ -20,6 +21,7 @@ import AddListMember from './Modals/AddListMember.vue'
 import MuteConfirm from './Modals/MuteConfirm.vue'
 import Shortcut from './Modals/Shortcut.vue'
 import Report from './Modals/Report.vue'
+import Thirdparty from './Modals/Thirdparty.vue'
 
 export default defineComponent({
   name: 'modals',
@@ -30,7 +32,8 @@ export default defineComponent({
     AddListMember,
     MuteConfirm,
     Shortcut,
-    Report
+    Report,
+    Thirdparty
   },
   setup() {
     const store = useStore()
diff --git a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
index 7b667c21..50d26a59 100644
--- a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="shortcut">
-    <el-dialog :title="$t('modals.shortcut.title')" v-model="shortcutModal" width="500px" custom-class="shortcut-modal">
+    <el-dialog :title="$t('modals.shortcut.title')" v-model="shortcutModal" width="500px">
       <table class="shortcuts">
         <tbody>
           <tr>
diff --git a/src/renderer/components/TimelineSpace/Modals/Thirdparty.vue b/src/renderer/components/TimelineSpace/Modals/Thirdparty.vue
new file mode 100644
index 00000000..aa74deaf
--- /dev/null
+++ b/src/renderer/components/TimelineSpace/Modals/Thirdparty.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="thirdparty">
+    <el-dialog :title="$t('modals.thirdparty.title')" v-model="modalOpen" width="500px" class="thirdparty-modal">
+      <table class="licenses">
+        <tbody>
+          <template v-for="lib in thirdparty">
+            <tr>
+              <td>{{ lib.package_name }}</td>
+              <td>{{ lib.license }}</td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue'
+import { MyWindow } from '~/src/types/global'
+import thirdparty from '~/src/config/thirdparty.json'
+
+export default defineComponent({
+  name: 'thirdparty',
+  setup() {
+    const win = window as any as MyWindow
+    const modalOpen = ref(false)
+
+    onMounted(() => {
+      win.ipcRenderer.on('open-thirdparty-modal', () => {
+        modalOpen.value = true
+      })
+    })
+
+    return {
+      modalOpen,
+      thirdparty
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.thirdparty :deep() {
+  .el-dialog__header {
+    background-color: #4a5664;
+    margin-right: 0;
+
+    .el-dialog__title {
+      color: #ebeef5;
+    }
+  }
+
+  .el-dialog__body {
+    max-height: 400px;
+    box-sizing: border-box;
+    overflow: auto;
+  }
+
+  .thirdparty-modal {
+    max-height: 70%;
+    overflow: hidden;
+    position: relative;
+  }
+}
+
+.thirdparty {
+  .licenses {
+    text-align: left;
+    border-collapse: collapse;
+    line-height: 28px;
+    width: 100%;
+
+    tr {
+      border: none;
+
+      &:nth-child(even) {
+        background-color: #fafafa;
+      }
+
+      &:hover {
+        background-color: #f2f6fc;
+      }
+
+      td {
+        padding: 4px 8px;
+      }
+    }
+
+    kbd {
+      display: inline-block;
+      padding: 3px 5px;
+      font-size: 11px;
+      line-height: 10px;
+      color: #444d56;
+      vertical-align: middle;
+      background-color: #fafbfc;
+      border: solid 1px #c6cbd1;
+      border-bottom-color: #959da5;
+      border-radius: 3px;
+      box-shadow: inset 0 -1px 0 #959da5;
+    }
+  }
+}
+</style>