fix: sync manager ui

fix: #915

addon/chrome/content/syncManager.xhtml

@@ -70,7 +70,7 @@
       #table-container {
         height: 100%;
         width: 100%;
-        overflow: hidden;
+        overflow: auto;
       }
     </style>
     <link rel="localization" href="__addonRef__-syncManager.ftl" />

addon/chrome/content/templateEditor.xhtml

@@ -75,7 +75,7 @@
       #table-container {
         height: 100%;
         width: 100%;
-        overflow: hidden;
+        overflow: auto;
       }
       .editor-viewport {
         display: flex;

src/addon.ts

@@ -8,6 +8,7 @@ import ToolkitGlobal from "zotero-plugin-toolkit/dist/managers/toolkitGlobal";
 
 import { getPref, setPref } from "./utils/prefs";
 import { OutlineType } from "./utils/workspace";
+import { SyncDataType } from "./modules/sync/managerWindow";
 import hooks from "./hooks";
 import api from "./api";
 import { createZToolkit } from "./utils/ztoolkit";
@@ -36,12 +37,9 @@ class Addon {
       manager: {
         window?: Window;
         tableHelper?: VirtualizedTableHelper;
-        data: {
-          noteId: number;
-          noteName: string;
-          lastSync: string;
-          filePath: string;
-        }[];
+        data: SyncDataType[];
+        columnIndex: number;
+        columnAscending: boolean;
       };
       diff: {
         window?: Window;
@@ -101,6 +99,8 @@ class Addon {
       lock: false,
       manager: {
         data: [],
+        columnAscending: true,
+        columnIndex: 0,
       },
       diff: {},
     },

src/modules/sync/managerWindow.ts

@@ -4,6 +4,13 @@ import { getString } from "../../utils/locale";
 import { jointPath } from "../../utils/str";
 import { isWindowAlive } from "../../utils/window";
 
+export interface SyncDataType {
+  noteId: number;
+  noteName: string;
+  lastSync: string;
+  filePath: string;
+}
+
 export async function showSyncManager() {
   if (isWindowAlive(addon.data.sync.manager.window)) {
     addon.data.sync.manager.window?.focus();
@@ -92,6 +99,12 @@ export async function showSyncManager() {
         "getRowString",
         (index) => addon.data.prefs?.rows[index].title || "",
       )
+      // @ts-ignore TODO: Fix type in zotero-plugin-toolkit
+      .setProp("onColumnSort", (columnIndex, ascending) => {
+        addon.data.sync.manager.columnIndex = columnIndex;
+        addon.data.sync.manager.columnAscending = ascending > 0;
+        refresh();
+      })
       .render();
     const refreshButton = win.document.querySelector(
       "#refresh",
@@ -120,7 +133,12 @@ export async function showSyncManager() {
   }
 }
 
+const sortDataKeys = ["noteName", "lastSync", "filePath"] as Array<
+  keyof SyncDataType
+>;
+
 function updateData() {
+  const sortKey = sortDataKeys[addon.data.sync.manager.columnIndex];
   addon.data.sync.manager.data = addon.api.sync
     .getSyncNoteIds()
     .map((noteId) => {
@@ -131,6 +149,16 @@ function updateData() {
         lastSync: new Date(syncStatus.lastsync).toLocaleString(),
         filePath: jointPath(syncStatus.path, syncStatus.filename),
       };
+    })
+    .sort((a, b) => {
+      if (!a || !b) {
+        return 0;
+      }
+      const valueA = String(a[sortKey] || "");
+      const valueB = String(b[sortKey] || "");
+      return addon.data.sync.manager.columnAscending
+        ? valueA.localeCompare(valueB)
+        : valueB.localeCompare(valueA);
     });
 }