refactor file and folders

src/App.jsx

@@ -0,0 +1,16 @@
+import './style.css';
+import FocusFeature from './focus/FocusFeature.jsx';
+import Theme from './theme/Theme.jsx';
+
+export default function App() {
+    return <>
+        <header>
+            <FocusFeature />
+            <Theme />
+        </header>
+
+        <main>
+
+        </main>
+    </>;
+}

src/Header.jsx

@@ -1,4 +1,4 @@
-import FocusPlay from './focus/FocusPlay.jsx';
+import FocusPlay from './focus/FocusFeature.jsx';
 import Theme from './theme/Theme.jsx';
 
 export default function Header() {

src/focus/CurrentFocus.jsx

@@ -8,10 +8,9 @@ export function CurrentFocus({ current, update }) {
 }
 
 function updatableFocus(update) {
+
     const handleEnter = ({ key, target }) => {
-        if(key === 'Enter' && document.hasFocus(target)) {
-            target.blur();
-        }
+        if(key === 'Enter' && document.hasFocus(target)) target.blur();
     };
 
     const handleInput = ({ target: { innerHTML, ariaLabel } }) => {

src/focus/focus.css → src/focus/FocusFeature.css

@@ -1,4 +1,4 @@
-section.focus-play {
+.focus-play {
 
     .ico-button {
         outline: 0;

src/focus/FocusPlay.jsx → src/focus/FocusFeature.jsx

@@ -1,27 +1,27 @@
 import { FocusPath } from './FocusPath.jsx';
 import { CurrentFocus } from './CurrentFocus.jsx';
 import { useFocus } from './useFocus.jsx';
-import './focus.css';
+import './FocusFeature.css';
 
-function FocusPlayButton() {
-    return <button class="ico-button">
-        <label>
-            <input name="check-working" type="checkbox" checked />
-        </label>
-    </button>;
-}
-
-export default function FocusPlay() {
+export default function FocusFeature() {
     const [current, stack, { update, ...changeFocus }] = useFocus();
-    const { Add, Remove, Path } = <FocusPath stack={stack} {...changeFocus} />;
+    const { Add, Remove, List } = <FocusPath stack={stack} {...changeFocus} />;
 
     return <section class="focus-play">
         <FocusPlayButton />
-        <ul><Path /></ul>
-        <section class="focus-section">
+        <List />
+        <div class="focus-section">
             <Remove className="remove-button" />
             <CurrentFocus current={current} update={update} />
-        </section>
-        <Add className="add-button" />
+            <Add className="add-button" />
+        </div>
     </section>;
 }
+
+function FocusPlayButton() {
+    return <button class="ico-button">
+        <label>
+            <input name="check-working" type="checkbox" checked />
+        </label>
+    </button>;
+}

src/focus/FocusPath.jsx

@@ -1,7 +1,6 @@
 import { branch } from 'azoth/chronos/channels';
 import { Toggle } from 'azoth/maya';
 
-
 export function FocusPath({ stack, add, remove }) {
     const Add = <ChangeButton onclick={add} text="add" />;
 
@@ -13,7 +12,7 @@ export function FocusPath({ stack, add, remove }) {
         // s => s.map(focus => <Focus {...focus} />),
     );
 
-    return { Path, Add, Remove };
+    return { List: <ul><Path /></ul>, Add, Remove };
 }
 
 function Focus({ priority, exit }) {

src/focus/useFocus.jsx

@@ -1,7 +1,6 @@
 import { unicast } from 'azoth/chronos/generators';
 import { branch } from 'azoth/chronos/channels';
 import { useLocalStorageJSON } from '../local-storage.js';
-import './focus.css';
 
 const newFocus = level => ({
     priority: level ? `level ${level}` : '',

src/main.jsx

@@ -1,7 +1,6 @@
-import './style.css';
-import Header from './Header.jsx';
+import App from './App.jsx';
 
-document.body.prepend(<Header />);
+document.body.prepend(<App />);
 
 if(Notification) {
     if(Notification.permission !== 'granted' && Notification.permission !== 'denied') {
@@ -61,7 +60,7 @@ function startSession() {
         if(time - start > session) {
             clearInterval(interval);
             const li = document.createElement('li');
-            li.classList.add('session-circle')
+            li.classList.add('session-circle');
             ul.prepend(li);
             queueMicrotask(sessionComplete);
         }