Add edit button to fields

packages/app/src/elements/field.ts

@@ -60,6 +60,14 @@ export class FieldElement extends LitElement {
         const actions = [
             ...(this._fieldDef.actions || []),
             { icon: "copy", label: $l("Copy"), action: () => this.dispatchEvent(new CustomEvent("copy-clipboard")) },
+            {
+                icon: "edit",
+                label: $l("Edit"),
+                action: () => {
+                    this.dispatchEvent(new CustomEvent("edit"));
+                    this._drawer.collapsed = true;
+                },
+            },
         ];
 
         if (this._fieldDef.mask && !app.settings.unmaskFieldsOnHover) {
@@ -465,16 +473,18 @@ export class FieldElement extends LitElement {
             </div>
 
             <pl-drawer class="drawer" collapsed>
-                <div class="end-justifying spacing horizontal layout">
+                <div class="end-justifying horizontal layout">
                     ${this._fieldActions.map(
                         ({ icon, action, label }) => html`
                             <pl-button
-                                class="ghost small slim"
+                                class="transparent small slim"
                                 @click=${() => action(this.field.value)}
                                 style="min-width: 7em"
                             >
-                                <pl-icon icon=${icon} class="right-margined"></pl-icon>
-                                <div>${label}</div>
+                                <div class="half-spacing center-alinging horizontal layout">
+                                    <pl-icon icon=${icon}></pl-icon>
+                                    <div>${label}</div>
+                                </div>
                             </pl-button>
                         `
                     )}

packages/app/src/elements/item-view.ts

@@ -123,7 +123,11 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
                 return;
             }
             this._editing = true;
-            setTimeout(() => this._nameInput && this._nameInput.focus(), 500);
+            setTimeout(() => {
+                if (!this.shadowRoot?.activeElement) {
+                    this._nameInput?.focus();
+                }
+            }, 300);
         } else {
             this._editing = false;
         }
@@ -183,6 +187,12 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
         setClipboard(await field.transform(), `${item.name} / ${field.name}`);
     }
 
+    private async _editField(index: number) {
+        this.edit();
+        await this.updateComplete;
+        setTimeout(() => this._fieldInputs[index]?.focus(), 100);
+    }
+
     static styles = [
         shared,
         css`
@@ -412,6 +422,7 @@ export class ItemView extends Routing(StateMixin(LitElement)) {
                                             @drop=${(e: DragEvent) => this._drop(e)}
                                             @moveup=${() => this._moveField(index, "up")}
                                             @movedown=${() => this._moveField(index, "down")}
+                                            @edit=${() => this._editField(index)}
                                         >
                                         </pl-field>
                                     `

packages/app/src/styles/misc.ts

@@ -167,9 +167,8 @@ export const misc = css`
     }
 
     .list-item:focus:not([aria-selected="true"]) {
-        background: var(--list-item-focus-background);
         color: var(--list-item-focus-color);
-        /* box-shadow: inset 0.2em 0 0 0 var(--color-highlight); */
+        box-shadow: inset 0.2em 0 0 0 var(--color-highlight);
     }
 
     .section-header {