From 6402ec0e4e40014949c230a7368b9bcf647e139d Mon Sep 17 00:00:00 2001
From: Xeonus <vanderbourg@gmail.com>
Date: Wed, 11 Dec 2024 16:40:33 +0100
Subject: [PATCH] feat: improve permission tables layout

- add syntax highlighting
- make table more compact and readable
- add none to empty entries
---
 docs/.vuepress/components/PermissionTable.vue | 300 +++++++++++++-----
 package-lock.json                             |  14 +
 package.json                                  |   1 +
 3 files changed, 243 insertions(+), 72 deletions(-)

diff --git a/docs/.vuepress/components/PermissionTable.vue b/docs/.vuepress/components/PermissionTable.vue
index d1d8c997..7c5d8234 100644
--- a/docs/.vuepress/components/PermissionTable.vue
+++ b/docs/.vuepress/components/PermissionTable.vue
@@ -6,50 +6,65 @@
       Error loading data. Please try again later.
     </div>
 
-    <div v-else class="table-wrapper">
-      <table>
-        <thead>
-          <tr>
-            <th>Function</th>
-            <th>Contract</th>
-            <th>Caller Names</th>
-            <th>Caller Addresses</th>
-            <th>Deployments</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, index) in sortedTableData" :key="index">
-            <td class="function">
-              <code>{{ row.function }}</code>
-            </td>
-            <td class="contract">{{ row.contract }}</td>
-            <td class="caller-names">
-              <ol>
-                <li v-for="name in row.callerNamesArray" :key="name">
-                  {{ name }}
-                </li>
-              </ol>
-            </td>
-            <td class="caller-addresses">
-              <ol>
-                <li
-                  v-for="(address, idx) in row.callerAddressesArray"
-                  :key="idx"
-                >
-                  <code>{{ address }}</code>
-                </li>
-              </ol>
-            </td>
-            <td class="deployments">{{ row.deployments }}</td>
-          </tr>
-        </tbody>
-      </table>
+    <div v-else class="table-container">
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th class="col-function">Function</th>
+              <th class="col-contract">Contract</th>
+              <th class="col-callers">Authorized Callers</th>
+              <th class="col-deployments">Deployments</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, index) in sortedTableData" :key="index">
+              <td class="function">
+                <pre><code class="javascript">{{ row.function }}</code></pre>
+              </td>
+              <td class="contract">{{ row.contract }}</td>
+              <td class="callers">
+                <template v-if="row.callerAddressesArray.length">
+                  <ol>
+                    <li
+                      v-for="(address, idx) in row.callerAddressesArray"
+                      :key="idx"
+                    >
+                      <a
+                        :href="getExplorerLink(address)"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="caller-address"
+                      >
+                        {{ address }}
+                      </a>
+                      <span
+                        v-if="
+                          row.callerNamesArray[idx] &&
+                          row.callerNamesArray[idx] !== address
+                        "
+                        class="caller-name"
+                      >
+                        ({{ row.callerNamesArray[idx] }})
+                      </span>
+                    </li>
+                  </ol>
+                </template>
+                <template v-else> none </template>
+              </td>
+              <td class="deployments">{{ row.deployments }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import 'highlight.js/styles/github-dark.css';
+import hljs from 'highlight.js';
 
 interface TableRow {
   function: string;
@@ -102,19 +117,33 @@ export default defineComponent({
       );
     },
   },
-  async mounted() {
-    await this.fetchData();
+  mounted() {
+    this.fetchData();
+    this.highlightCode();
+  },
+  updated() {
+    this.highlightCode();
   },
   methods: {
+    highlightCode() {
+      document.querySelectorAll('pre code').forEach(block => {
+        hljs.highlightBlock(block as HTMLElement);
+      });
+    },
+
+    getExplorerLink(address: string): string {
+      const baseUrl =
+        this.chain === 'mainnet'
+          ? 'https://etherscan.io/address/'
+          : 'https://gnosisscan.io/address/';
+      return `${baseUrl}${address}`;
+    },
+
     isV3Related(deployment: string, callerNames: string[]): boolean {
-      // Check if deployment contains v3
       const isV3Deployment = deployment.includes('-v3-');
-
-      // Check if any caller name contains v3
       const hasV3Caller = callerNames.some(
         name => name.includes('-v3-') || name.includes('/v3/')
       );
-
       return isV3Deployment || hasV3Caller;
     },
 
@@ -149,14 +178,12 @@ export default defineComponent({
                 const permissionAddresses = permissions[actionId] || [];
 
                 const callerNamesArray = permissionAddresses.map(addr => {
-                  let name = reverseAddressBook[addr];
-                  if (!name) {
-                    name = reverseAddressBook[addr.toLowerCase()];
-                  }
+                  let name =
+                    reverseAddressBook[addr] ||
+                    reverseAddressBook[addr.toLowerCase()];
                   return name || addr;
                 });
 
-                // Only add if it's v3 related
                 if (this.isV3Related(deployment, callerNamesArray)) {
                   processedData.push({
                     function: functionName,
@@ -205,13 +232,13 @@ table {
 
 th {
   background-color: var(--background-color, #f8fafc);
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem;
   font-weight: 600;
   border-bottom: 1px solid var(--c-docs-card-border);
 }
 
 td {
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--c-docs-card-border);
   vertical-align: top;
 }
@@ -220,47 +247,176 @@ tr:last-child td {
   border-bottom: none;
 }
 
+.col-function {
+  width: 15%;
+}
+
+.col-contract {
+  width: 20%;
+}
+
+.col-callers {
+  width: 50%;
+}
+
+.col-deployments {
+  width: 15%;
+}
+
+.function {
+  min-width: 150px;
+  max-width: 300px;
+}
+
+.function pre {
+  margin: 0;
+  padding: 0;
+}
+
 .function code {
   font-family: monospace;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   white-space: pre-wrap;
-  max-width: 300px;
-  background-color: var(--c-bg-light);
-  padding: 0.2rem 0.4rem;
+  display: block;
+  padding: 0.5rem;
   border-radius: 0.25rem;
+  background-color: var(--code-bg);
+  color: var(--code-text);
 }
 
-.caller-names ol,
-.caller-addresses ol {
-  margin: 0;
-  padding-left: 1.5rem;
+.contract {
+  min-width: 150px;
+  white-space: nowrap;
 }
 
-.caller-names li,
-.caller-addresses li {
+.callers {
+  font-size: 0.875rem;
+  min-width: 350px;
+  padding-left: 0; /* Remove any cell padding */
+}
+
+.callers ol {
+  padding-left: 1.5rem; /* Slightly reduced padding */
+  list-style-position: outside;
+  /* Pull the list slightly to the left */
+  margin: 0 0 0 -1rem;
+}
+
+.callers li {
   margin-bottom: 0.25rem;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: nowrap;
+  gap: 0.5rem;
+  font-family: monospace;
+  padding-left: 0.25rem; /* Small padding for list items */
 }
 
-.caller-addresses code {
+.callers li:last-child {
+  margin-bottom: 0;
+}
+
+.caller-address {
+  color: inherit;
+  text-decoration: none;
+  white-space: nowrap;
   font-family: monospace;
   font-size: 0.875rem;
-  white-space: pre-wrap;
-  background-color: var(--c-bg-light);
-  padding: 0.2rem 0.4rem;
-  border-radius: 0.25rem;
 }
 
-.loading,
-.error {
-  padding: 1rem;
-  text-align: center;
+.callers a:hover {
+  text-decoration: underline;
 }
 
-.error {
-  color: #dc2626;
+.bullet {
+  color: var(--c-text-lighter);
+  margin-right: 0.5rem;
+  font-size: 1.2em;
+  line-height: 1;
+}
+
+.caller-name {
+  font-family: var(--font-family);
+  color: var(--c-text-lighter);
+  white-space: normal;
+  font-size: 0.875rem;
+  min-width: 150px;
+  margin-left: 0.25rem;
+}
+
+.callers a {
+  color: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.callers a:hover {
+  text-decoration: underline;
 }
 
 tr:hover {
   background-color: var(--background-color, #f8fafc);
 }
+
+/* Theme-aware syntax highlighting */
+:deep(.hljs) {
+  background: var(--code-bg) !important;
+  color: var(--code-text) !important;
+}
+
+/* Light mode */
+html:not(.dark) {
+  --code-bg: #f8fafc;
+  --code-text: #1e293b;
+}
+
+html:not(.dark) :deep(.hljs-keyword),
+html:not(.dark) :deep(.hljs-built_in),
+html:not(.dark) :deep(.hljs-type) {
+  color: #2563eb !important; /* blue */
+}
+
+html:not(.dark) :deep(.hljs-string) {
+  color: #059669 !important; /* green */
+}
+
+html:not(.dark) :deep(.hljs-number) {
+  color: #db2777 !important; /* pink */
+}
+
+html:not(.dark) :deep(.hljs-comment) {
+  color: #64748b !important; /* slate */
+}
+
+html:not(.dark) :deep(.hljs-function) {
+  color: #334155 !important; /* darker slate blue for better readability */
+}
+
+/* Dark mode */
+html.dark {
+  --code-bg: #1a1b26;
+  --code-text: #c0caf5;
+}
+
+html.dark :deep(.hljs-keyword),
+html.dark :deep(.hljs-built_in),
+html.dark :deep(.hljs-type) {
+  color: #7aa2f7 !important; /* lighter blue */
+}
+
+html.dark :deep(.hljs-string) {
+  color: #9ece6a !important; /* lighter green */
+}
+
+html.dark :deep(.hljs-number) {
+  color: #ff9e64 !important; /* orange */
+}
+
+html.dark :deep(.hljs-comment) {
+  color: #565f89 !important; /* muted blue */
+}
+
+html.dark :deep(.hljs-function) {
+  color: #e2e8f0 !important; /* light gray with slight blue tint for dark mode */
+}
 </style>
diff --git a/package-lock.json b/package-lock.json
index 1d42548f..81f95a1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "color": "^4.2.3",
         "ethereum-blockies": "^0.1.1",
         "ethers": "^6.4.0",
+        "highlight.js": "^11.10.0",
         "mersenne-twister": "^1.1.0",
         "vue-prism-component": "^2.0.0",
         "vue-virtual-scroller": "^2.0.0-beta.8",
@@ -7174,6 +7175,14 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -18167,6 +18176,11 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
diff --git a/package.json b/package.json
index d11a8862..56381647 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "color": "^4.2.3",
     "ethereum-blockies": "^0.1.1",
     "ethers": "^6.4.0",
+    "highlight.js": "^11.10.0",
     "mersenne-twister": "^1.1.0",
     "vue-prism-component": "^2.0.0",
     "vue-virtual-scroller": "^2.0.0-beta.8",