🚧 optimize dashboard

addon/locale/en-US/chartero.ftl

@@ -29,3 +29,15 @@ completeThreshold = Complete threshold for progress (seconds):
 dashboardSection =
     .label = Dashboard
     .tooltiptext = Chartero Dashboard
+dashboard-progress =
+    .tooltiptext = Reading Progress
+dashboard-page =
+    .tooltiptext = Page-Time Chart
+dashboard-date =
+    .tooltiptext = Date-Time Chart
+dashboard-group =
+    .tooltiptext = User-Time Chart
+dashboard-relation =
+    .tooltiptext = Relation Network Graph
+dashboard-timeline =
+    .tooltiptext = Timeline

addon/locale/it-IT/chartero.ftl

@@ -29,3 +29,15 @@ completeThreshold = Limite di avanzamento completo (secondi):
 dashboardSection =
     .label = Cruscotto
     .tooltiptext = Chartero Cruscotto
+dashboard-progress =
+    .tooltiptext = Ha letto
+dashboard-page =
+    .tooltiptext = Tempo di lettura per pagina
+dashboard-date =
+    .tooltiptext = Tempo di lettura giornaliero
+dashboard-group =
+    .tooltiptext = Lettura dagli utenti
+dashboard-relation =
+    .tooltiptext = Network delle relazioni
+dashboard-timeline =
+    .tooltiptext = Linea temporale

addon/locale/ja-JP/chartero.ftl

@@ -29,3 +29,15 @@ completeThreshold = 完了進捗閾値（秒）：
 dashboardSection =
     .label = ダッシュボード
     .tooltiptext = Charteroダッシュボード
+dashboard-progress =
+    .tooltiptext = 阅读进度
+dashboard-page =
+    .tooltiptext = 毎ページの読み時間
+dashboard-date =
+    .tooltiptext = 毎日の読み時間
+dashboard-group =
+    .tooltiptext = ユーザー統計
+dashboard-relation =
+    .tooltiptext = 文献関連ネットワーク
+dashboard-timeline =
+    .tooltiptext = タイムライン

addon/locale/zh-CN/chartero.ftl

@@ -29,3 +29,15 @@ completeThreshold = 页均阅读阈值（用于进度统计）：
 dashboardSection =
     .label = 仪表盘
     .tooltiptext = Chartero仪表盘
+dashboard-progress =
+    .tooltiptext = 阅读进度
+dashboard-page =
+    .tooltiptext = 每页阅读时长
+dashboard-date =
+    .tooltiptext = 每日阅读时长
+dashboard-group =
+    .tooltiptext = 用户阅读时长
+dashboard-relation =
+    .tooltiptext = 关联条目图
+dashboard-timeline =
+    .tooltiptext = 时间线

src/bootstrap/modules/sidebar.ts

@@ -12,6 +12,19 @@ export function updateDashboard(id?: number) {
  * 初始化侧边栏TabPanel
  */
 export function registerPanels() {
+    function post(body: HTMLDivElement, message: any) {
+        const iframe = body.getElementsByTagName('iframe')[0];
+        if (!iframe?.contentWindow)
+            addon.log(new Error('Dashboard iframe not found'));
+        else if (iframe.contentDocument?.readyState === 'complete')
+            iframe.contentWindow.postMessage(message, '*');
+        else
+            iframe.addEventListener('load', ({ target }) =>
+                (target as Document).defaultView!.postMessage(message, '*'), true);
+        addon.log(message, iframe.contentDocument?.readyState);
+    }
+    const tabs = ['progress', 'page', 'date', 'group', 'relation', 'timeline'];
+
     if (!Zotero.ItemPaneManager?.registerSection)
         addon.log(new Error('ItemPaneManager not found'));
     Zotero.ItemPaneManager?.registerSection({
@@ -25,12 +38,14 @@ export function registerPanels() {
             l10nID: 'chartero-dashboardSection',
             icon: `resource://${config.addonName}/icons/sidebar.svg`,
         },
-        sectionButtons: ['progress', 'page', 'date', 'group', 'relation', 'timeline'].map(tab => ({
+        sectionButtons: tabs.map(tab => ({
             type: tab,
+            l10nID: `chartero-dashboard-${tab}`,
             icon: `resource://${config.addonName}/icons/${tab}.svg`,
             onClick(e) {
-                const iframe = e.body.getElementsByTagName('iframe')[0];
-                iframe.contentWindow!.postMessage({ tab }, '*');
+                post(e.body, { tab });
+                for (const t of tabs)
+                    e.setSectionButtonStatus(t, { disabled: t === tab });
             }
         })),
         onInit: args => {
@@ -44,15 +59,8 @@ export function registerPanels() {
             (iframe.contentWindow as any).wrappedJSObject.addon = addon;
             args.body.style.height = '600px';
         },
-        onRender: args => {
-        },
-        onItemChange: args => {
-            addon.log(args);
-            const iframe = args.body.getElementsByTagName('iframe')[0],
-                id = Number(args.item.id);
-            iframe.contentWindow!.postMessage({ id }, '*');
-        },
-        onDestroy: args => addon.log(args),
+        onRender: args => post(args.body, 'render'),
+        onItemChange: args => post(args.body, { id: args.item.id }),
     });
 }