From 276471abfd8872b29d069ee20e7efc15b92c937e Mon Sep 17 00:00:00 2001
From: Felix Bauer <kontakt@felix-bauer.at>
Date: Thu, 16 Nov 2023 21:51:05 +0100
Subject: [PATCH] Improved UI for editing layer names

---
 src/renderer/components/layerlist/LayerLineEntry.js | 9 ++++++++-
 src/renderer/components/layerlist/LayerList.js      | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/layerlist/LayerLineEntry.js b/src/renderer/components/layerlist/LayerLineEntry.js
index 2ee22b8e..33cf12de 100644
--- a/src/renderer/components/layerlist/LayerLineEntry.js
+++ b/src/renderer/components/layerlist/LayerLineEntry.js
@@ -4,6 +4,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import { List, ListItem, ListItemText, ListItemSecondaryAction } from '@material-ui/core'
 import Collapse from '@material-ui/core/Collapse'
 import IconButton from '@material-ui/core/IconButton'
+import EditIcon from '@material-ui/icons/Edit'
 import LockIcon from '@material-ui/icons/Lock'
 import LockOpenIcon from '@material-ui/icons/LockOpen'
 import VisibilityIcon from '@material-ui/icons/Visibility'
@@ -65,6 +66,11 @@ export const LayerLineEntry = props => {
         <ListItemText>{ props.active ? <b>{props.name}</b> : props.name }</ListItemText>
 
         <ListItemSecondaryAction>
+          <IconButton
+            size='small'
+            onClick={props.editLayerName}>
+            <EditIcon/>
+          </IconButton>
           <IconButton
             disabled={lockToggleDisabled}
             size='small'
@@ -103,5 +109,6 @@ LayerLineEntry.propTypes = {
   locked: PropTypes.bool, // optional, false if omitted
   hidden: PropTypes.bool, // optional, false if omitted
   expanded: PropTypes.bool, // optional, false if omitted
-  selectLayer: PropTypes.func.isRequired
+  selectLayer: PropTypes.func.isRequired,
+  editLayerName: PropTypes.func.isRequired
 }
diff --git a/src/renderer/components/layerlist/LayerList.js b/src/renderer/components/layerlist/LayerList.js
index ca62ccce..b3f1f1c3 100644
--- a/src/renderer/components/layerlist/LayerList.js
+++ b/src/renderer/components/layerlist/LayerList.js
@@ -44,6 +44,10 @@ const LayerList = (/* props */) => {
   const reducer = (state, event) => (handlers[event.type] || I)(state, event)
   const [layers, dispatch] = React.useReducer(reducer, {})
 
+  const editLayerName = (layerId) => () => {
+    dispatch({ type: 'editoractivated', layerId: layerId })
+  }
+
   const selectedLayerId = () => {
     const selected = selection.selected(URI.isLayerId)
     return selected.length ? selected[0] : null
@@ -116,6 +120,7 @@ const LayerList = (/* props */) => {
         key={layer.id}
         { ...layer }
         selectLayer={selectLayer(layer.id)}
+        editLayerName={editLayerName(layer.id)}
       />
 
   const sortedLayers = () => Object.values(layers)