refs #4653 Show thirdparty licenses

locales/en/translation.json

@@ -130,6 +130,9 @@
     "language": "Language",
     "font_size": "Font size"
   },
+  "thirdparty": {
+    "title": "Third-party licenses"
+  },
   "report": {
     "title": "Report {user}",
     "detail": "Detail",

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "whalebird",
+  "name": "Whalebird",
   "description": "Electron based Fediverse client application",
   "version": "6.0.0-rc.2",
   "author": "Akira Fukushima <h3.poteto@gmail.com>",
@@ -12,7 +12,7 @@
     "postinstall": "electron-builder install-app-deps",
     "typecheck": "tsc -p renderer --noEmit && tsc -p main --noEmit",
     "lint": "eslint renderer --ext ts,tsx",
-    "thirdparty": "license-checker --production --json > thirdparty.json"
+    "thirdparty": "license-checker --production --json > renderer/thirdparty.json"
   },
   "dependencies": {
     "@emoji-mart/react": "^1.1.1",

renderer/components/Thirdparty.tsx

@@ -0,0 +1,28 @@
+import { Dialog, DialogBody, DialogHeader, List, ListItem } from '@material-tailwind/react'
+import { FormattedMessage } from 'react-intl'
+import licenses from '../thirdparty.json'
+
+type Props = {
+  opened: boolean
+  close: () => void
+}
+
+export default function Thirdparty(props: Props) {
+  return (
+    <Dialog open={props.opened} handler={props.close} size="md">
+      <DialogHeader>
+        <FormattedMessage id="thirdparty.title" />
+      </DialogHeader>
+      <DialogBody className="h-[42rem] overflow-scroll timeline-scrollable">
+        <List>
+          {Object.keys(licenses).map(key => (
+            <ListItem key={key} className="flex justify-between">
+              <div>{key}</div>
+              <div>{licenses[key].licenses}</div>
+            </ListItem>
+          ))}
+        </List>
+      </DialogBody>
+    </Dialog>
+  )
+}

renderer/components/layouts/account.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, useContext, useEffect, useRef, useState } from 'react'
-import { FaGear, FaPlus, FaTrash } from 'react-icons/fa6'
+import { FaGear, FaIdCard, FaPlus, FaTrash } from 'react-icons/fa6'
 import { Account, db } from '@/db'
 import NewAccount from '@/components/accounts/New'
 import Settings from '@/components/Settings'
@@ -10,6 +10,7 @@ import generator, { Entity, WebSocketInterface } from 'megalodon'
 import { Context } from '@/utils/i18n'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { Avatar, IconButton, List, ListItem, ListItemPrefix, Popover, PopoverContent, PopoverHandler } from '@material-tailwind/react'
+import Thirdparty from '../Thirdparty'
 
 type LayoutProps = {
   children: React.ReactNode
@@ -19,6 +20,7 @@ export default function Layout({ children }: LayoutProps) {
   const [accounts, setAccounts] = useState<Array<Account>>([])
   const [openNewModal, setOpenNewModal] = useState(false)
   const [openSettings, setOpenSettings] = useState(false)
+  const [openThirdparty, setOpenThirdparty] = useState(false)
   const [style, setStyle] = useState<CSSProperties>({})
   const [openPopover, setOpenPopover] = useState(false)
 
@@ -183,6 +185,18 @@ export default function Layout({ children }: LayoutProps) {
                     </ListItemPrefix>
                     <FormattedMessage id="settings.title" />
                   </ListItem>
+                  <ListItem
+                    onClick={() => {
+                      setOpenThirdparty(true)
+                      setOpenPopover(false)
+                    }}
+                    className="py-2 px-4 rounded-none"
+                  >
+                    <ListItemPrefix>
+                      <FaIdCard />
+                    </ListItemPrefix>
+                    <FormattedMessage id="thirdparty.title" />
+                  </ListItem>
                 </List>
               </PopoverContent>
             </Popover>
@@ -190,6 +204,7 @@ export default function Layout({ children }: LayoutProps) {
         </aside>
         {children}
         <Settings opened={openSettings} close={() => setOpenSettings(false)} reloadSettings={loadSettings} />
+        <Thirdparty opened={openThirdparty} close={() => setOpenThirdparty(false)} />
       </main>
     </div>
   )

yarn.lock

@@ -2675,6 +2675,48 @@ __metadata:
   languageName: node
   linkType: hard
 
+"Whalebird@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "Whalebird@workspace:."
+  dependencies:
+    "@babel/runtime-corejs3": ^7.23.2
+    "@electron/notarize": ^2.1.0
+    "@emoji-mart/react": ^1.1.1
+    "@material-tailwind/react": ^2.1.8
+    "@types/node": ^20.0.0
+    "@types/react": 18.2.19
+    "@types/sanitize-html": ^2.9.4
+    "@typescript-eslint/eslint-plugin": ^6.13.1
+    "@typescript-eslint/parser": ^6.13.1
+    autoprefixer: ^10.4.16
+    blurhash: ^2.0.5
+    dayjs: ^1.11.10
+    dexie: ^3.2.4
+    electron: ^26.6.3
+    electron-builder: ^24.6.4
+    electron-serve: ^1.1.0
+    electron-store: ^8.1.0
+    emoji-mart: ^5.5.2
+    eslint: ^8.55.0
+    eslint-config-prettier: ^9.0.0
+    eslint-plugin-react: ^7.33.2
+    megalodon: ^9.1.1
+    next: ^12.3.4
+    nextron: ^8.12.0
+    postcss: ^8.4.31
+    react: ^18.2.0
+    react-blurhash: ^0.3.0
+    react-dom: ^18.2.0
+    react-hotkeys-hook: ^4.4.1
+    react-icons: ^4.11.0
+    react-intl: ^6.5.1
+    react-virtuoso: ^4.6.2
+    sanitize-html: ^2.11.0
+    tailwindcss: ^3.3.3
+    typescript: ^5.2.2
+  languageName: unknown
+  linkType: soft
+
 "abbrev@npm:^2.0.0":
   version: 2.0.0
   resolution: "abbrev@npm:2.0.0"
@@ -8338,48 +8380,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whalebird@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "whalebird@workspace:."
-  dependencies:
-    "@babel/runtime-corejs3": ^7.23.2
-    "@electron/notarize": ^2.1.0
-    "@emoji-mart/react": ^1.1.1
-    "@material-tailwind/react": ^2.1.8
-    "@types/node": ^20.0.0
-    "@types/react": 18.2.19
-    "@types/sanitize-html": ^2.9.4
-    "@typescript-eslint/eslint-plugin": ^6.13.1
-    "@typescript-eslint/parser": ^6.13.1
-    autoprefixer: ^10.4.16
-    blurhash: ^2.0.5
-    dayjs: ^1.11.10
-    dexie: ^3.2.4
-    electron: ^26.6.3
-    electron-builder: ^24.6.4
-    electron-serve: ^1.1.0
-    electron-store: ^8.1.0
-    emoji-mart: ^5.5.2
-    eslint: ^8.55.0
-    eslint-config-prettier: ^9.0.0
-    eslint-plugin-react: ^7.33.2
-    megalodon: ^9.1.1
-    next: ^12.3.4
-    nextron: ^8.12.0
-    postcss: ^8.4.31
-    react: ^18.2.0
-    react-blurhash: ^0.3.0
-    react-dom: ^18.2.0
-    react-hotkeys-hook: ^4.4.1
-    react-icons: ^4.11.0
-    react-intl: ^6.5.1
-    react-virtuoso: ^4.6.2
-    sanitize-html: ^2.11.0
-    tailwindcss: ^3.3.3
-    typescript: ^5.2.2
-  languageName: unknown
-  linkType: soft
-
 "which-boxed-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "which-boxed-primitive@npm:1.0.2"