feat: handle editing of layout names

package.json

@@ -68,6 +68,7 @@
     "on-change": "^4.0.0",
     "pinia": "^2.0.11",
     "uuid": "^8.3.2",
-    "vue": "3.2.30"
+    "vue": "3.2.30",
+    "vue3-click-away": "^1.2.1"
   }
 }

packages/renderer/src/components/Sidebar/Layout.vue

@@ -1,15 +1,28 @@
 <template>
   <div
+    v-click-away="exitEditing"
     class="macos:mx-2 macos:rounded macos:px-2 macos:py-1"
     :class="{'bg-system-background-selected-content': isSelected, 'text-white': isSelected}"
-    @click.prevent="select"
+    @click="select"
+    @click.self="exitEditing"
+    @dblclick.prevent="enterEditing"
   >
-    <span>{{ layout.name }}</span>
+    <input
+      v-if="isEditing"
+      v-model.lazy="name"
+      v-focus
+      type="text"
+      class="p-0 text-sm border-0 bg-system-background-under-page"
+      @keydown.esc="exitEditing"
+    >
+    <span
+      v-else
+    >{{ layout.name }}</span>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { Layout } from '/@/layout';
 import { useLayoutsStore } from '/@/store/layouts';
 
@@ -19,9 +32,30 @@ const props = defineProps<{
 
 const layoutsStore = useLayoutsStore();
 const isSelected = computed(() => layoutsStore.selectedLayout.name == props.layout.name);
+const isEditing = ref(false);
+
+const enterEditing = () => {
+  if (!isSelected.value) { return; }
+  isEditing.value = true;
+};
+
+const exitEditing = () => {
+  isEditing.value = false;
+};
 
 const select = () => {
   if (isSelected.value) { return; }
   layoutsStore.selectLayout(props.layout);
 };
+
+watch(isSelected, (value) => {
+  if (!value) {
+    exitEditing();
+  }
+});
+
+const name = computed({
+  get: () => props.layout.name,
+  set: (value) => layoutsStore.renameLayout(props.layout.name, value),
+});
 </script>

packages/renderer/src/components/Sidebar/Layouts.vue

@@ -1,6 +1,10 @@
 <template>
-  <Disclosure v-slot="{ open }">
-    <div class="flex justify-between gap-2 mb-2 macos:px-2 macos:pb-1 macos:border-b macos:border-system-separator macos:text-system-text-secondary">
+  <Disclosure
+    v-slot="{ open }"
+    as="div"
+    class="mb-2 "
+  >
+    <div class="flex justify-between gap-2 macos:px-2 macos:pb-1 macos:border-b macos:border-system-separator macos:text-system-text-secondary">
       <span
         v-if="open"
         class="macos:py-1 macos:pl-2"
@@ -37,7 +41,7 @@
     </div>
 
     <DisclosurePanel>
-      <div class="flex flex-col h-24 mb-2 overflow-y-auto macos:border-b macos:border-system-separator macos:pb-1">
+      <div class="flex flex-col h-24 overflow-y-auto macos:border-b macos:border-system-separator macos:py-1">
         <Layout
           v-for="layout in layouts"
           :key="layout.name"

packages/renderer/src/directives/focus.ts

@@ -0,0 +1,9 @@
+import type { Directive } from 'vue';
+
+const directive: Directive = {
+  mounted(el) {
+    el.focus();
+  },
+};
+
+export default directive;

packages/renderer/src/index.ts

@@ -1,7 +1,9 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
+import VueClickAway from 'vue3-click-away';
 import App from '/@/App.vue';
 import observeResize from '/@/directives/observe-resize';
+import focus from '/@/directives/focus';
 import {
   ContextMenu, ContextMenuProviding, MenuItem, MenuSeparator, Submenu,
 } from '/@/components/ContextMenu';
@@ -20,10 +22,10 @@ switch (window.page) {
 }
 
 createApp(page)
+  .use(VueClickAway)
   .use(createPinia())
-  .directive(
-    'observe-resize', observeResize,
-  )
+  .directive('observe-resize', observeResize)
+  .directive('focus', focus)
   .component('context-menu', ContextMenu)
   .component('context-menu-providing', ContextMenuProviding)
   .component('menu-item', MenuItem)

packages/renderer/src/store/layouts.ts

@@ -27,6 +27,9 @@ export const useLayoutsStore = defineStore('layouts', {
       this.selectedLayout.rootComponent = component;
     },
     createLayout(name: string, rootComponent: ContainerComponent) {
+      // TODO: Show an alert that there's already a layout with a given name.
+      if (this.layouts.find(layout => layout.name === name)) { return; }
+
       const layout = {
         name,
         rootComponent,
@@ -35,5 +38,13 @@ export const useLayoutsStore = defineStore('layouts', {
       this.layouts.push(layout);
       this.selectedLayout = layout;
     },
+    renameLayout(existing: string, newName: string) {
+      // TODO: Show an alert that there's already a layout with a given name.
+      if (this.layouts.find(layout => layout.name === newName)) { return; }
+
+      const index = this.layouts.findIndex(layout => layout.name === existing);
+      if (index < 0) { return; }
+      this.layouts[index].name = newName;
+    },
   },
 });