Move title setting to RulePanel

Author: simonpai

src/renderer/component/rule/Panel.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { HotKeys } from 'react-hotkeys';
-import { Tab, Button } from 'semantic-ui-react';
+import { Tab, Button, Input } from 'semantic-ui-react';
 import Icon from '@mdi/react';
 import { mdiFloppy, mdiDelete } from '@mdi/js';
 
@@ -14,11 +14,11 @@ const keyMap = {
 
 function RulePanel({rule}) {
   const api = useApi();
-  const {id, committing, committed} = rule;
+  const {id, data, committing, committed} = rule;
   const confirm = useConfirm();
   const commit = useCallback(() => api.rule.commit(id), [id]);
   const delete_ = useCallback(() => confirm(() => api.rule.delete(id)), [id]);
-  // const onNameChange = useCallback(name => api.rule.update(id, {name}), [id]);
+  const onNameChange = useCallback(event => api.rule.update(id, {name: event.target.value}), [id]);
   const RuleTabs = UserscriptTabs;
 
   return (
@@ -34,6 +34,13 @@ function RulePanel({rule}) {
         save: commit
       }}
     >
+      <div className="hm rule name">
+        <Input
+          placeholder="(untitled)"
+          defaultValue={data.name || ''}
+          onInput={onNameChange}
+        />
+      </div>
       <Tab.View>
         {
           RuleTabs({rule}).props.children

src/renderer/component/rule/userscript/Tabs.js

@@ -3,22 +3,23 @@ import PropTypes from 'prop-types';
 import { Tab } from 'semantic-ui-react';
 
 import { useApi } from '../../../hook';
-import SettingsTab from './Settings';
+// import SettingsTab from './Settings';
 import EditorTab from './Editor';
 
 function UserscriptTabs({rule}) {
   const api = useApi();
   const {id} = rule;
   const onContentChange = useCallback(content => api.rule.update(id, {content}), [id]);
-  const onNameChange = useCallback(name => api.rule.update(id, {name}), [id]);
   return (
     <>
       <Tab.View.Tab value="editor" label="Editor" default>
         <EditorTab {...{rule, onContentChange}} />
       </Tab.View.Tab>
+      {/*
       <Tab.View.Tab value="settings" label="Settings">
         <SettingsTab {...{rule, onNameChange}} />
       </Tab.View.Tab>
+      */}
     </>
   );
 }

src/renderer/hook/index.js

@@ -1,3 +1,4 @@
 export { default as usePersistentState } from './persistent-state';
 export { default as useConfirm } from './confirm';
 export { default as useApi } from './api';
+export { default as useTriggerSelection } from './trigger-selection';

src/renderer/hook/trigger-selection.js

@@ -0,0 +1,3 @@
+export default function useTriggerSelection(event) {
+  event.target.select();
+}

src/renderer/style/index.scss

@@ -7,6 +7,33 @@
 @import 'inventory';
 @import 'console';
 
+.hm.rule.name {
+  display: flex;
+  font-size: 16px;
+  margin-top: -1em;
+  margin-bottom: 0.5em;
+
+  > .ui.input > input {
+    border: 1px dashed transparent;
+    background-color: transparent;
+    padding: 0.5em;
+    box-shadow: none;
+    border-radius: 1px;
+    color: #333;
+    cursor: pointer;
+
+    &:hover {
+      border-color: #CCC;
+      background: #FFF;
+    }
+    &:focus {
+      border-color: #AAA;
+      background: #FFF;
+      cursor: initial;
+    }
+  }
+}
+
 textarea.hm.userscript {
   border: none;
   padding: 0.5em;