refactor files folders

src/Header.jsx

@@ -1,5 +1,5 @@
 import FocusPlay from './focus/FocusPlay.jsx';
-import Theme from './Theme.jsx';
+import Theme from './theme/Theme.jsx';
 
 export default function Header() {
     return <header>

src/focus/useFocus.jsx

@@ -3,7 +3,10 @@ import { branch } from 'azoth/chronos/channels';
 import { useLocalStorageJSON } from '../local-storage.js';
 import './focus.css';
 
-const newFocus = () => ({ priority: '', exit: '' });
+const newFocus = level => ({
+    priority: level ? `level ${level}` : '',
+    exit: ''
+});
 
 export function useFocus() {
     const [foci, setLocal] = useLocalStorageJSON('FOP.FOCI', [newFocus()]);
@@ -21,7 +24,7 @@ export function useFocus() {
     };
 
     const add = () => {
-        foci.push(newFocus());
+        foci.push(newFocus(foci.length));
         save();
         changeFocus();
     };

src/style.css

@@ -16,33 +16,6 @@
     --background: var(--light-background);
 }
 
-html,
-body {
-    &.light {
-        --color: var(--light-color);
-        --background: var(--light-background);
-    }
-
-    &.dark {
-        --color: var(--dark-color);
-        --background: var(--dark-background);
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    html:not(.dark) {
-        --color: var(--light-color);
-        --background: var(--light-background);
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    html:not(.light) {
-        --color: var(--dark-color);
-        --background: var(--dark-background);
-    }
-}
-
 body {
     margin: 0;
     padding: 2vw 4vw;
@@ -64,22 +37,6 @@ header {
     margin-bottom: 4vw
 }
 
-select.theme {
-    border: 0;
-    outline: 0;
-    appearance: none;
-
-    font-family: 'Arial';
-    font-size: 2em;
-    opacity: .75;
-    color: var(--color);
-    background: transparent;
-    cursor: pointer;
-}
-
-html.light select.theme {
-    opacity: 0.75;
-}
 
 #sessions {
     padding: 0;

src/theme/Theme.css

@@ -0,0 +1,69 @@
+html,
+body {
+    &.light {
+        --color: var(--light-color);
+        --background: var(--light-background);
+    }
+
+    &.dark {
+        --color: var(--dark-color);
+        --background: var(--dark-background);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    html:not(.dark) {
+        --color: var(--light-color);
+        --background: var(--light-background);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    html:not(.light) {
+        --color: var(--dark-color);
+        --background: var(--dark-background);
+    }
+}
+
+select.theme {
+    border: 0;
+    outline: 0;
+    appearance: none;
+
+    font-family: 'Arial';
+    font-size: 2em;
+    opacity: .75;
+    color: var(--color);
+    background: transparent;
+    cursor: pointer;
+}
+
+html.light select.theme {
+    opacity: 0.75;
+}
+
+footer {
+    position: absolute;
+    left: 1vw;
+    bottom: 1vw;
+    opacity: 0.7;
+
+    a,
+    a:visited,
+    a:active {
+        color: var(--color);
+    }
+
+    a {
+        text-decoration: none;
+
+        &:before {
+            content: 'ⓘ ';
+        }
+
+        span {
+            text-decoration: underline;
+        }
+    }
+
+}

src/Theme.jsx → src/theme/Theme.jsx

@@ -1,6 +1,7 @@
 import { unicast } from 'azoth/chronos/generators';
 import { consume } from 'azoth/chronos/channels';
-import { useLocalStorage } from './local-storage.js';
+import { useLocalStorage } from '../local-storage.js';
+import './Theme.css';
 
 const html = document.querySelector('html');