Allow defining additional actions for fields, add "open" action for urls

packages/app/src/elements/field.ts

@@ -58,6 +58,7 @@ export class FieldElement extends LitElement {
 
     private get _fieldActions() {
         const actions = [
+            ...(this._fieldDef.actions || []),
             { icon: "copy", label: $l("Copy"), action: () => this.dispatchEvent(new CustomEvent("copy-clipboard")) },
         ];
 
@@ -467,7 +468,11 @@ export class FieldElement extends LitElement {
                 <div class="end-justifying spacing horizontal layout">
                     ${this._fieldActions.map(
                         ({ icon, action, label }) => html`
-                            <pl-button class="ghost small slim" @click=${action} style="min-width: 7em">
+                            <pl-button
+                                class="ghost small slim"
+                                @click=${() => action(this.field.value)}
+                                style="min-width: 7em"
+                            >
                                 <pl-icon icon=${icon} class="right-margined"></pl-icon>
                                 <div>${label}</div>
                             </pl-button>

packages/core/src/item.ts

@@ -4,6 +4,7 @@ import { totp } from "./otp";
 import { uuid } from "./util";
 import { AccountID } from "./account";
 import { AttachmentInfo } from "./attachment";
+import { openExternalUrl } from "./platform";
 
 /** A tag that can be assigned to a [[VaultItem]] */
 export type Tag = string;
@@ -48,6 +49,7 @@ export interface FieldDef {
     format?: (value: string, masked: boolean) => string;
     /** for values that need to be prepared before being copied / filled */
     transform?: (value: string) => Promise<string>;
+    actions?: { icon: string; label: string; action: (value: string) => void }[];
 }
 
 /** Available field types and respective meta data (order matters for pattern matching) */
@@ -98,6 +100,13 @@ export const FIELD_DEFS: { [t in FieldType]: FieldDef } = {
         get name() {
             return $l("URL");
         },
+        actions: [
+            {
+                icon: "web",
+                label: $l("Open"),
+                action: (value: string) => openExternalUrl(value.startsWith("http") ? value : `https://${value}`),
+            },
+        ],
     },
     [FieldType.Date]: {
         type: FieldType.Date,