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/MainPage.tsx

@@ -19,10 +19,12 @@
 
 import { SyntheticEvent } from 'react';
 import { Theme } from '@mui/material/styles';
-import WithStyles, {withTheme} from './WithStyles';
+import WithStyles, { withTheme } from './WithStyles';
 import { withStyles } from "tss-react/mui";
 import IconButtonEx from './IconButtonEx';
 import ButtonEx from './ButtonEx';
+import ButtonBase from '@mui/material/ButtonBase';
+import RenameDialog from './RenameDialog';
 
 import ToolTipEx from './ToolTipEx';
 import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
@@ -69,7 +71,8 @@ const HORIZONTAL_CONTROL_SCROLL_HEIGHT_BREAK = 500;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 // const HORIZONTAL_LAYOUT_MQ = "@media (max-height: " + HORIZONTAL_CONTROL_SCROLL_HEIGHT_BREAK + "px)";
 
-const styles = ({ palette }: Theme) => { return {
+const styles = ({ palette }: Theme) => {
+    return {
         frame: css({
             position: "absolute", display: "flex", flexDirection: "column", flexWrap: "nowrap",
             justifyContent: "flex-start", left: "0px", top: "0px", bottom: "0px", right: "0px", overflow: "hidden"
@@ -99,9 +102,9 @@ const styles = ({ palette }: Theme) => { return {
         controlContentSmall: css({
             flex: "0 0 162px", width: "100%", height: 162, overflowY: "hidden",
         }),
-    title: css({ fontSize: "1.1em", fontWeight: 700, marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 }),
+        title: css({ fontSize: "1.1rem", fontWeight: 700, marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 }),
-    author: css({ fontWeight: 500, marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 })
+        author: css({ fontWeight: 500, fontSize: "0.8rem", marginRight: 8, textOverflow: "ellipsis", whiteSpace: "nowrap", opacity: 0.75 })
-}
+    }
 };
 
 
@@ -124,6 +127,8 @@ interface MainState {
     horizontalScrollLayout: boolean;
     showMidiBindingsDialog: boolean;
     screenHeight: number;
+    displayNameDialogOpen: boolean;
+
 
 }
 
@@ -137,10 +142,8 @@ export const MainPage =
                 getSplitToolbar() {
                     return this.windowSize.width < SPLIT_CONTROLBAR_THRESHHOLD;
                 }
-            getDisplayAuthor()
+                getDisplayAuthor() {
-            {
+                    if (this.getSplitToolbar()) {
-                if (this.getSplitToolbar())
-                {
                         return this.windowSize.width >= DISPLAY_AUTHOR_SPLIT_THRESHOLD;
                     } else {
                         return this.windowSize.width >= DISPLAY_AUTHOR_THRESHHOLD;
@@ -157,6 +160,7 @@ export const MainPage =
                         selectedSnapshot: -1,
                         loadDialogOpen: false,
                         snapshotDialogOpen: false,
+                        displayNameDialogOpen: false,
                         pedalboard: pedalboard,
                         addMenuAnchorEl: null,
                         splitControlBar: this.getSplitToolbar(),
@@ -177,6 +181,9 @@ export const MainPage =
                     this.handleEnableCurrentItemChanged = this.handleEnableCurrentItemChanged.bind(this);
                 }
 
+                handleEditPluginDisplayName() {
+                    this.setState({ displayNameDialogOpen: true });
+                }
                 onInsertPedal(instanceId: number) {
                     this.setAddMenuAnchorEl(null);
                     let newId = this.model.addPedalboardItem(instanceId, false);
@@ -292,8 +299,7 @@ export const MainPage =
                     this.setSelection(selectedId);
                     let item = this.getPedalboardItem(selectedId);
                     if (item != null) {
-                    if (item.isStart() || item.isEnd())
+                        if (item.isStart() || item.isEnd()) {
-                    {
                             // do nothing.
                         } else if (item.isSplit()) {
                             let split = item as PedalboardSplitItem;
@@ -375,6 +381,7 @@ export const MainPage =
                     let infoPluginUri = "";
                     let presetsUri = "";
                     let missing = false;
+                    let canEditTitle = false;
                     if (pedalboardItem) {
                         if (pedalboardItem.isEmpty()) {
                             title = "";
@@ -391,9 +398,15 @@ export const MainPage =
                             if (!uiPlugin) {
                                 missing = true;
                                 title = pedalboardItem?.pluginName ?? "Missing plugin";
+                            } else {
+                                canEditTitle = this.props.enableStructureEditing;
+                                if (pedalboardItem.title !== "") {
+                                    title = pedalboardItem.title;
+                                    author = "";
                                 } else {
                                     title = uiPlugin.name;
                                     author = uiPlugin.author_name;
+                                }
                                 presetsUri = uiPlugin.uri;
                                 // if (uiPlugin.description.length > 20) {
                                 // }
@@ -420,15 +433,34 @@ export const MainPage =
                     } else {
                         return (
                             <div style={{
-                            flex: "1 1 auto", minWidth: 0, overflow: "hidden", marginRight: 8,
+                                flex: "1 1 auto", minWidth: 0, overflow: "hidden",
                                 display: "flex", flexDirection: "row", height: 48, flexWrap: "nowrap",
                                 alignItems: "center"
                             }}>
-                            <div style={{ flex: "0 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>
+                                <div style={{ position: "relative", flex: "0 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>
+                                    {canEditTitle ? (
+                                        <ButtonBase
+                                            style={{ borderRadius: "6px", width: "100%", paddingLeft: 8, paddingRight: 8, height: 48, textTransform: "none" }}
+                                            onClick={()=> {
+                                                this.handleEditPluginDisplayName();
+                                            }}
+                                        >
+                                            <span>
                                                 <span className={classes.title}>{title}</span>
-                                {this.state.displayAuthor&&(
+                                                {this.state.displayAuthor && (
                                                     <span className={classes.author}>{author}</span>
                                                 )}
+                                            </span>
+                                        </ButtonBase>)
+                                        : (
+                                            <div style={{ flex: "0 1 auto", paddingLeft: 8, paddingRight: 8,minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>
+                                                <span className={classes.title}>{title}</span>
+                                                {this.state.displayAuthor && (
+                                                    <span className={classes.author}>{author}</span>
+                                                )}
+                                            </div>
+
+                                        )}
                                 </div>
                                 <div style={{ flex: "0 0 auto", verticalAlign: "center" }}>
                                     <PluginInfoDialog plugin_uri={infoPluginUri} />
@@ -528,8 +560,8 @@ export const MainPage =
                                     display: "flex", flexFlow: "row nowrap", alignItems: "center", justifyContent: "center", minWidth: 0,
                                     width: "100%", height: 48, paddingLeft: 16, paddingRight: 16
                                 }} >
-                                <div style={{ flex: "0 0 auto", width: this.state.splitControlBar? undefined:  80 }} >
+                                    <div style={{ flex: "0 0 auto", width: this.state.splitControlBar ? undefined : 60 }} >
-                                    <div style={{ display: bypassVisible ? "block" : "none", width: this.state.splitControlBar? undefined:  80 }} >
+                                        <div style={{ display: bypassVisible ? "block" : "none", width: this.state.splitControlBar ? undefined : 60 }} >
                                             <ToolTipEx title="Bypass"
                                             >
                                                 <Switch color="secondary" checked={bypassChecked} onChange={this.handleEnableCurrentItemChanged} />
@@ -537,13 +569,14 @@ export const MainPage =
                                         </div>
                                     </div>
                                     {
-                                    (!this.state.splitControlBar || !this.props.enableStructureEditing) && this.titleBar(pedalboardItem)
+                                        (!this.state.splitControlBar || !this.props.enableStructureEditing)
+                                        && this.titleBar(pedalboardItem)
                                     }
                                     <div style={{ flex: "1 1 1px" }}>
 
                                     </div>
                                     {this.props.enableStructureEditing && (
-                                    <div style={{ flex: "0 0 auto", display: "flex", flexFlow: "row nowrap",alignItems: "center" }}>
+                                        <div style={{ flex: "0 0 auto", display: "flex", flexFlow: "row nowrap", alignItems: "center" }}>
                                             <div style={{ flex: "0 0 auto", display: (canInsert || canAppend) ? "block" : "none", paddingRight: 8 }}>
                                                 <IconButtonEx tooltip="Add pedal slot" onClick={(e) => { this.onAddClick(e) }} size="large">
                                                     <AddIcon style={{ height: 24, width: 24, fill: this.props.theme.palette.text.primary, opacity: 0.6 }} />
@@ -642,6 +675,21 @@ export const MainPage =
                             {(this.state.snapshotDialogOpen) && (
                                 <SnapshotDialog open={this.state.snapshotDialogOpen} onOk={() => this.onSnapshotDialogOk()} />
                             )}
+                            {(this.state.displayNameDialogOpen) && (
+                                <RenameDialog open={this.state.displayNameDialogOpen}
+                                    allowEmpty={true}
+                                    defaultName={pedalboardItem?.title ?? ""}
+                                    title="Plugin Display Name"
+                                    acceptActionName="OK"
+                                    onClose={() => this.setState({ displayNameDialogOpen: false })}
+                                    onOk={(newName: string) => {
+                                        if (pedalboardItem) {
+                                            this.model.setPedalboardItemTitle(pedalboardItem.instanceId, newName);
+                                        }
+                                        this.setState({ displayNameDialogOpen: false });
+                                    }}
+                                />
+                            )}  
                         </div>
                     );
                 }

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}