design for focus feature

src/focus/EditableFocus.css

@@ -0,0 +1,42 @@
+.current-focus {
+    display: grid;
+
+    h2:before {
+        content: '⌾';
+        position: relative;
+        top: .08em;
+        margin-right: .25em;
+    }
+
+    [contenteditable] {
+        font-size: 1.5em;
+        padding: .25em 0em;
+        margin: 0 1em 0 0;
+        transition: padding .3s ease-in-out;
+    }
+
+    [contenteditable]:hover,
+    [contenteditable]:focus {
+        padding: .25em;
+    }
+
+    [contenteditable]:hover {
+        background: #fafafa;
+        outline: 2px solid #eee;
+    }
+
+    [contenteditable]:focus {
+        background: #efefef;
+        outline: 2px solid blue;
+    }
+
+    [contenteditable]:empty:not(:focus):before {
+        content: attr(aria-placeholder);
+        opacity: .8
+    }
+
+    [contenteditable]:empty:focus:before {
+        content: ' ';
+        opacity: .8
+    }
+}

src/focus/CurrentFocus.jsx → src/focus/EditableFocus.jsx

@@ -1,7 +1,8 @@
 import { consume } from 'azoth/chronos/channels';
 import { Updater } from 'azoth/maya';
+import './EditableFocus.css';
 
-export function CurrentFocus({ current, update }) {
+export function EditableFocus({ current, update }) {
     const Focus = updatableFocus(update);
     consume(current, current => Focus.update(current));
     return Focus;

src/focus/FocusFeature.css

@@ -38,43 +38,21 @@
 
 }
 
-.focus-section {}
 
-.current-focus {
+.focus-section {
+    display: grid;
+    grid-template-areas:
+        'current remove'
+        'add add';
+    row-gap: 1em;
 
-    p {
-        font-size: 1.2em;
+    .remove-button {
+        grid-area: remove;
+        place-self: start end;
     }
 
-    [contenteditable] {
-        font-size: 26px;
-        padding: .25em 0em;
-        margin: 1em 0;
-        transition: padding .3s ease-in-out;
-    }
-
-    [contenteditable]:hover,
-    [contenteditable]:focus {
-        padding: .25em;
-    }
-
-    [contenteditable]:hover {
-        background: #fafafa;
-        outline: 2px solid #eee;
-    }
-
-    [contenteditable]:focus {
-        background: #efefef;
-        outline: 2px solid blue;
-    }
-
-    [contenteditable]:empty:not(:focus):before {
-        content: attr(aria-placeholder);
-        opacity: .8
-    }
-
-    [contenteditable]:empty:focus:before {
-        content: ' ';
-        opacity: .8
+    .add-button {
+        grid-area: add;
+        place-self: end start;
     }
 }

src/focus/FocusFeature.jsx

@@ -1,19 +1,19 @@
 import { FocusPath } from './FocusPath.jsx';
-import { CurrentFocus } from './CurrentFocus.jsx';
+import { EditableFocus } from './EditableFocus.jsx';
 import { useFocus } from './useFocus.jsx';
 import './FocusFeature.css';
 
 export default function FocusFeature() {
     const [current, stack, { update, ...changeFocus }] = useFocus();
-    const { Add, Remove, List } = <FocusPath stack={stack} {...changeFocus} />;
-
+    const { FocusStack, AddButton, RemoveButton } = <FocusPath stack={stack} {...changeFocus} />;
     return <section class="focus-play">
         <FocusPlayButton />
-        <List />
+        <FocusStack />
         <div class="focus-section">
-            <Remove className="remove-button" />
-            <CurrentFocus current={current} update={update} />
-            <Add className="add-button" />
+            <RemoveButton className="change-focus remove-button" />
+            <EditableFocus className="current-focus"
+                current={current} update={update} />
+            <AddButton className="change-focus add-button" />
         </div>
     </section>;
 }

src/focus/FocusPath.css

@@ -0,0 +1,53 @@
+button.change-focus {
+    margin: 0;
+    padding: .5em 1em;
+    font-size: .9em;
+    color: var(--color);
+    outline: 0;
+    border: 1px solid transparent;
+    cursor: pointer;
+    opacity: .6;
+    transition: all 300ms ease-in-out;
+
+    &:hover {
+        opacity: 1;
+        border: 1px solid var(--color);
+    }
+}
+
+.focus-path {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    font-size: .7em;
+    width: 100%;
+    max-width: 900px;
+
+    >li {
+        margin: .75em 0;
+        display: flex;
+        align-items: center;
+
+        >* {
+            display: inline-block;
+            margin: 0;
+        }
+
+        h2:before {
+            content: '⌾';
+            position: relative;
+            top: .08em;
+            margin-right: .25em;
+        }
+
+        p {
+            margin-left: .8em;
+            text-align: center;
+            font-size: 1.2em;
+            font-style: italic;
+        }
+    }
+
+
+
+}

src/focus/FocusPath.jsx

@@ -1,24 +1,28 @@
 import { branch } from 'azoth/chronos/channels';
 import { Toggle } from 'azoth/maya';
+import './FocusPath.css';
 
 export function FocusPath({ stack, add, remove }) {
-    const Add = <ChangeButton onclick={add} text="add" />;
+    const AddButton = <ChangeButton onclick={add} text="➕" />;
 
-    const [Remove, Path] = branch(stack,
+    const [RemoveButton, Path] = branch(stack,
         <Toggle on={s => s.length}>
-            <ChangeButton onclick={remove} text="remove" />
+            <ChangeButton onclick={remove} text="➖" />
         </Toggle>,
-        [Focus, { map: true }],
-        // s => s.map(focus => <Focus {...focus} />),
+        s => s.map(Focus),
     );
 
-    return { List: <ul><Path /></ul>, Add, Remove };
+    return {
+        FocusStack: <ul class="focus-path"><Path /></ul>,
+        AddButton,
+        RemoveButton
+    };
 }
 
 function Focus({ priority, exit }) {
     return <li>
-        <span class="priority">{priority}</span>
-        {exit}
+        <h2>{priority}</h2>
+        <p>{exit}</p>
     </li>;
 }
 

src/style.css

@@ -23,13 +23,6 @@ body {
     background: var(--background);
 }
 
-button {
-    margin: 0;
-    padding: 2vw 4vw;
-    background: var(--color);
-    color: var(--background);
-}
-
 header {
     display: flex;
     justify-content: space-between;