let's get it into review I guess

server_manager/package.json

@@ -22,6 +22,7 @@
     "@material/mwc-circular-progress": "^0.27.0",
     "@material/mwc-formfield": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
+    "@material/mwc-icon-button": "^0.27.0",
     "@material/mwc-list": "^0.27.0",
     "@material/mwc-menu": "^0.27.0",
     "@material/mwc-radio": "^0.27.0",

server_manager/www/views/server_view/access_key_data_table/access_key_controls/index.ts

@@ -14,8 +14,101 @@
  * limitations under the License.
  */
 
-import {LitElement} from 'lit';
-import {customElement} from 'lit/decorators.js';
+import type {IconButton} from '@material/mwc-icon-button';
+import type {Menu} from '@material/mwc-menu';
+
+import {LitElement, html, css} from 'lit';
+import {customElement, property, query} from 'lit/decorators.js';
+
+import '@material/mwc-icon-button';
+import '@material/mwc-icon';
+import '@material/mwc-menu';
 
 @customElement('access-key-controls')
-export class AccessKeyControls extends LitElement {}
+export class AccessKeyControls extends LitElement {
+  @property({type: Object}) localize: (messageId: string) => string;
+  @property({type: String}) id: string;
+
+  @query('#menuButton') menuButton: IconButton;
+  @query('#menu') menu: Menu;
+
+  static styles = css`
+    .wrapper {
+      float: right;
+    }
+  `;
+
+  render() {
+    return html`
+      <span class="wrapper">
+        <mwc-icon-button
+          icon="share"
+          @click=${this.fireShareEvent}
+        ></mwc-icon-button>
+        <mwc-icon-button
+          icon="more_vert"
+          id="menuButton"
+          @click=${() => {
+            this.menu.anchor = this.menuButton;
+            this.menu.show();
+          }}
+        ></mwc-icon-button>
+        <mwc-menu id="menu" corner="TOP_LEFT" menuCorner="END">
+          <mwc-list-item @click=${this.fireEditNameEvent} graphic="icon">
+            <mwc-icon slot="graphic">create</mwc-icon>
+            ${this.localize('server-access-key-rename')}
+          </mwc-list-item>
+          <mwc-list-item @click=${this.fireDeleteEvent} graphic="icon">
+            <mwc-icon slot="graphic">delete</mwc-icon>
+            ${this.localize('remove')}
+          </mwc-list-item>
+          <!-- TODO: hide this on versions 1.6 or earlier? -->
+          <mwc-list-item @click=${this.fireEditDataLimitEvent} graphic="icon">
+            <mwc-icon slot="graphic">perm_data_setting</mwc-icon>
+            ${this.localize('data-limit')}
+          </mwc-list-item>
+        </mwc-menu>
+      </span>
+    `;
+  }
+
+  fireDeleteEvent() {
+    this.dispatchEvent(
+      new CustomEvent('AccessKeyControls::Delete', {
+        bubbles: true,
+        composed: true,
+        detail: {id: this.id},
+      })
+    );
+  }
+
+  fireEditDataLimitEvent() {
+    this.dispatchEvent(
+      new CustomEvent('AccessKeyControls::EditDataLimit', {
+        bubbles: true,
+        composed: true,
+        detail: {id: this.id},
+      })
+    );
+  }
+
+  fireEditNameEvent() {
+    this.dispatchEvent(
+      new CustomEvent('AccessKeyControls::EditName', {
+        bubbles: true,
+        composed: true,
+        detail: {id: this.id},
+      })
+    );
+  }
+
+  fireShareEvent() {
+    this.dispatchEvent(
+      new CustomEvent('AccessKeyControls::Share', {
+        bubbles: true,
+        composed: true,
+        detail: {id: this.id},
+      })
+    );
+  }
+}

server_manager/www/views/server_view/access_key_data_table/access_key_controls/stories.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2025 The Outline Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import './index';
+
+export default {
+  title: 'Manager/Server View/Access Key Data Table/Access Key Controls',
+  component: 'access-key-controls',
+};
+
+export const Example = {
+  args: {
+    id: 'ss://key.com:3000',
+    localize: (key: string) => {
+      return (
+        {
+          'server-access-key-rename': 'Rename',
+          remove: 'Remove',
+          'data-limit': 'Data Limit',
+        } as {[key: string]: string}
+      )[key];
+    },
+  },
+};

server_manager/www/views/server_view/access_key_data_table/access_key_status/index.ts

@@ -29,6 +29,7 @@ export class AccessKeyStatus extends LitElement {
       --access-key-status-text-color: hsl(0, 0%, 79%);
       --access-key-status-font-family: 'Inter', system-ui;
       --access-key-status-indicator-size: 0.5rem;
+      --access-key-status-indicator-color: hsla(127, 67%, 59%, 1);
 
       font-family: var(--access-key-status-font-family);
       color: var(--access-key-status-text-color);
@@ -52,7 +53,7 @@ export class AccessKeyStatus extends LitElement {
     }
 
     .key-icon-indicator {
-      background: green;
+      background: var(--access-key-status-indicator-color);
       border-radius: 50%;
       bottom: 0;
       display: inline-block;

server_manager/www/views/server_view/access_key_data_table/data_table/index.ts

@@ -63,13 +63,12 @@ export class DataTable extends LitElement {
     :host {
       --data-table-background-color: hsl(197, 13%, 22%);
       --data-table-text-color: hsl(0, 0%, 79%);
-      --data-table-font-family: 'Roboto', system-ui;
+      --data-table-font-family: 'Inter', system-ui;
 
       --data-table-cell-padding: 1rem;
-    }
 
-    .table-container {
-      container-type: size;
+      --data-table-header-icon-size: 1.2rem;
+      --data-table-header-gap: 0.5rem;
     }
 
     table,
@@ -108,47 +107,15 @@ export class DataTable extends LitElement {
       padding: var(--data-table-cell-padding);
     }
 
-    td {
-      content-visibility: auto;
-    }
-
-    label {
-      display: none;
-      font-weight: bold;
-      text-transform: uppercase;
-      font-size: 0.75rem;
-      margin: 0.25rem 0;
-    }
-
     th {
       align-items: center;
-      gap: 0.5rem;
-
+      background-color: var(--data-table-background-color);
+      cursor: pointer;
       display: flex;
       font-weight: bold;
+      gap: var(--data-table-header-gap);
 
-      --mdc-icon-size: 1.2rem;
-    }
-
-    @container (max-width: 540px) {
-      table {
-        grid-template-columns: auto;
-      }
-      th {
-        display: none;
-      }
-      td {
-        padding: 0.25rem 1rem;
-      }
-      td:first-child {
-        padding-top: 1rem;
-      }
-      td:last-child {
-        padding-bottom: 1rem;
-      }
-      label {
-        display: block;
-      }
+      --mdc-icon-size: var(--data-table-header-icon-size);
     }
   `;
 
@@ -185,7 +152,7 @@ export class DataTable extends LitElement {
   renderHeaderCell(columnId: string) {
     const column = this.columns.get(columnId);
 
-    return html`<th>
+    return html`<th @click=${() => this.fireSortEvent(columnId)}>
       <span>${unsafeHTML(column.name)}</span>
       ${column?.tooltip
         ? html`<info-tooltip text=${column?.tooltip}></info-tooltip>`
@@ -200,11 +167,23 @@ export class DataTable extends LitElement {
 
   renderDataCell(columnId: string, rowValue: string) {
     return html`<td>
-      <label>${unsafeHTML(this.columns.get(columnId)?.name)}</label>
       ${(this.columns.get(columnId)?.render ?? DEFAULT_RENDERER)(rowValue)}
     </td>`;
   }
 
+  fireSortEvent(columnId: string) {
+    this.dispatchEvent(
+      new CustomEvent('DataTable::Sort', {
+        detail: {
+          columnId,
+          sortDescending: !this.sortDescending,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   private get columnIds() {
     return [...this.columns.keys()];
   }