Custom plugin display name. Rename dialog cosmetics.

vite/src/pipedal/AppThemed.tsx

@@ -1031,6 +1031,7 @@ export
                         <RenameDialog
                             open={this.state.renameBankDialogOpen || this.state.saveBankAsDialogOpen}
                             defaultName={this.model_.banks.get().getSelectedEntryName()}
+                            title="Bank Name"
                             acceptActionName={this.state.renameBankDialogOpen ? "Rename" : "Save as"}
                             onClose={() => {
                                 this.setState({

vite/src/pipedal/BankDialog.tsx

@@ -458,7 +458,7 @@ const BankDialog = withStyles(
 
                                             <div style={{ flex: "0 0 auto", display: "flex", flexFlow: "row nowrap", alignItems: "center" }}>
                                                 <Button color="inherit" onClick={(e) => this.handleCopy()}>
-                                                    Copy
+                                                    Save as
                                                 </Button>
                                                 <Button color="inherit" onClick={() => this.handleRenameClick()}>
                                                     Rename
@@ -466,6 +466,7 @@ const BankDialog = withStyles(
                                                 <RenameDialog
                                                     open={this.state.filenameDialogOpen}
                                                     defaultName={this.getSelectedName()}
+                                                    title={this.state.filenameSaveAs ? "Save Bank As" : "Bank Name"}
                                                     acceptActionName={this.state.filenameSaveAs ? "SAVE AS" : "RENAME"}
                                                     onClose={() => { this.setState({ filenameDialogOpen: false }) }}
                                                     onOk={(text: string) => {

vite/src/pipedal/FilePropertyDialog.tsx

@@ -1599,6 +1599,7 @@ export default withStyles(
                                 <RenameDialog open={this.state.newFolderDialogOpen} defaultName=""
                                     onOk={(newName) => { this.setState({ newFolderDialogOpen: false }); this.onExecuteNewFolder(newName) }}
                                     onClose={() => { this.setState({ newFolderDialogOpen: false }); }}
+                                    title="New folder"
                                     acceptActionName="OK"
                                 />
                             )
@@ -1606,6 +1607,7 @@ export default withStyles(
                         {
                             this.state.renameDialogOpen && (
                                 <RenameDialog open={this.state.renameDialogOpen} defaultName={this.renameDefaultName()}
+                                    title="Rename" 
                                     onOk={(newName) => { this.setState({ renameDialogOpen: false }); this.onExecuteRename(newName) }}
                                     onClose={() => { this.setState({ renameDialogOpen: false }); }}
                                     acceptActionName="OK"

vite/src/pipedal/Pedalboard.tsx

@@ -61,6 +61,7 @@ export class ControlValue implements Deserializable<ControlValue> {
 export class PedalboardItem implements Deserializable<PedalboardItem> {
     deserializePedalboardItem(input: any): PedalboardItem {
         this.instanceId = input.instanceId ?? -1;
+        this.title = input.title ?? "";
         this.uri = input.uri;
         this.pluginName = input.pluginName;
         this.isEnabled = input.isEnabled;
@@ -199,6 +200,7 @@ export class PedalboardItem implements Deserializable<PedalboardItem> {
     static EmptyArray: PedalboardItem[] = [];
 
     instanceId: number = -1;
+    title: string = "";
     isEnabled: boolean = false;
     uri: string = "";
     pluginName?: string;

vite/src/pipedal/PedalboardView.tsx

@@ -329,6 +329,9 @@ class PedalLayout {
                 this.pluginType = uiPlugin.plugin_type;
                 this.iconUrl = SelectIconUri(uiPlugin.plugin_type);
                 this.name = uiPlugin.label;
+                if (pedalItem.title !== "") {
+                    this.name = pedalItem.title;
+                }
                 this.numberOfInputs = Math.min(uiPlugin.audio_inputs, 2);
                 this.numberOfOutputs = Math.min(uiPlugin.audio_outputs, 2);
             } else {

vite/src/pipedal/PiPedalModel.tsx

@@ -3153,7 +3153,22 @@ export class PiPedalModel //implements PiPedalModel
             30 * 1000);
 
     }
-
+    setPedalboardItemTitle(instanceId: number, title: string): void {
+        let pedalboard = this.pedalboard.get();
+        if (!pedalboard) {
+            throw new PiPedalStateError("Pedalboard not loaded.");
+        }
+        let newPedalboard = pedalboard.clone();
+        this.updateVst3State(newPedalboard);
+        let item = newPedalboard.getItem(instanceId);
+        if (item.title === title) {
+            return;
+        }
+        item.title = title;
+        this.pedalboard.set(newPedalboard);
+        // notify the server.
+        // xxx;
+    }
 };
 
 let instance: PiPedalModel | undefined = undefined;

vite/src/pipedal/PluginPresetSelector.tsx

@@ -335,6 +335,7 @@ const PluginPresetSelector =
                             isEditDialog={this.state.showEditPresetsDialog} 
                             onDialogClose={() => this.handleDialogClose()} />
                         <RenameDialog open={this.state.renameDialogOpen}
+                            title="Rename"
                             defaultName={this.state.renameDialogDefaultName}
                             acceptActionName={this.state.renameDialogActionName}
                             onClose={() => this.handleRenameDialogClose()}

vite/src/pipedal/PluginPresetsDialog.tsx

@@ -413,6 +413,7 @@ const PluginPresetsDialog = withStyles(
                                                     Rename
                                                 </Button>
                                                 <RenameDialog
+                                                    title="Rename"
                                                     open={this.state.renameOpen}
                                                     defaultName={this.getSelectedName()}
                                                     acceptActionName={"Rename"}

vite/src/pipedal/PresetDialog.tsx

@@ -395,6 +395,7 @@ const PresetDialog = withStyles(
                                                     Rename
                                                 </Button>
                                                 <RenameDialog
+                                                    title="Rename"
                                                     open={this.state.renameOpen}
                                                     defaultName={this.getSelectedName()}
                                                     acceptActionName={"Rename"}

vite/src/pipedal/PresetSelector.tsx

@@ -50,6 +50,7 @@ interface PresetSelectorState {
     presetsMenuAnchorRef: HTMLElement | null;
 
     renameDialogOpen: boolean;
+    renameDialogTitle: string;
     renameDialogDefaultName: string;
     renameDialogActionName: string;
     renameDialogOnOk?: (name: string) => void;
@@ -95,6 +96,7 @@ const PresetSelector =
                     showEditPresetsDialog: false,
                     presetsMenuAnchorRef: null,
                     renameDialogOpen: false,
+                    renameDialogTitle: "",
                     renameDialogDefaultName: "",
                     renameDialogActionName: "",
                     renameDialogOnOk: undefined,
@@ -144,7 +146,7 @@ const PresetSelector =
                 if (item == null) return;
                 let name = item.name;
 
-                this.renameDialogOpen(name, "Save As")
+                this.renameDialogOpen(name, "Save Preset As", "OK")
                     .then((newName) => {
                         return this.model.saveCurrentPresetAs(newName);
                     })
@@ -167,7 +169,7 @@ const PresetSelector =
                 if (item == null) return;
                 let name = item.name;
 
-                this.renameDialogOpen(name, "Rename")
+                this.renameDialogOpen(name, "Rename Preset", "OK")
                     .then((newName) => {
                         if (newName === name) return;
                         return this.model.renamePresetItem(this.model.presets.get().selectedInstanceId, newName);
@@ -196,12 +198,13 @@ const PresetSelector =
             showError(error: string) {
                 this.model.showAlert(error);
             }
-            renameDialogOpen(defaultText: string, acceptButtonText: string): Promise<string> {
+            renameDialogOpen(defaultText: string, title: string,acceptButtonText: string): Promise<string> {
                 let result = new Promise<string>(
                     (resolve, reject) => {
                         this.setState(
                             {
                                 renameDialogOpen: true,
+                                renameDialogTitle: title,
                                 renameDialogDefaultName: defaultText,
                                 renameDialogActionName: acceptButtonText,
                                 renameDialogOnOk: (name) => {
@@ -365,6 +368,7 @@ const PresetSelector =
                         </div>
                         <PresetDialog show={this.state.showPresetsDialog} isEditDialog={this.state.showEditPresetsDialog} onDialogClose={() => this.handleDialogClose()} />
                         <RenameDialog open={this.state.renameDialogOpen}
+                            title={this.state.renameDialogTitle}
                             defaultName={this.state.renameDialogDefaultName}
                             acceptActionName={this.state.renameDialogActionName}
                             onClose={() => this.handleRenameDialogClose()}

vite/src/pipedal/RenameDialog.tsx

@@ -20,6 +20,7 @@
 import React from 'react';
 import Button from '@mui/material/Button';
 import DialogEx from './DialogEx';
+import DialogTitle from '@mui/material/DialogTitle';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import { nullCast } from './Utility';
@@ -33,6 +34,9 @@ export interface RenameDialogProps {
     open: boolean,
     defaultName: string,
     acceptActionName: string,
+    title: string,
+    allowEmpty?: boolean,
+    label?: string,
     onOk: (text: string) => void,
     onClose: () => void
 };
@@ -102,7 +106,7 @@ export default class RenameDialog extends ResizeResponsiveComponent<RenameDialog
                 model.showAlert(e.toString());
                 return;
             }
-            if (text.length === 0) return;
+            if (text.length === 0 && props.allowEmpty !== true) return;
             onOk(text);
         }
         const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
@@ -119,20 +123,23 @@ export default class RenameDialog extends ResizeResponsiveComponent<RenameDialog
                 style={{userSelect: "none"}}
                 onEnterKey={()=>{}}
                 >
-                <DialogContent style={{minHeight: 96}}>
+                    <DialogTitle>
+                        {props.title ?? "Rename"}
+                    </DialogTitle>
+
+                <DialogContent >
                     <TextField
                     
                         onKeyDown={handleKeyDown}
-                        margin="dense"
+                        variant="standard"
-                        variant="outlined"
                         slotProps={{
                             input: {
                                 style: { scrollMargin: 24 }
                             }
                         }}
                         id="name"
-                        label="Name"
                         type="text"
+                        label={props.label ?? "Name"}
                         fullWidth
                         defaultValue={defaultName}
                         inputRef={this.refText}