wip(lab): Work on workbench

- Moved the various tabs on the draft view to their own views.
- Renames modes to views
- Started to group various aspects of the workbench state under
  `_state` in the gist to prevent it from getting all mixed up
  with the core settings.
- Updated events title to make it more clear not all events might
  be present
- Removed valid state in measurements input since it was only
  getting updated on keyboard input but now when preloading
  measurements (which it does now)

packages/freesewing.shared/components/workbench/events.js

@@ -0,0 +1,44 @@
+import Markdown from 'react-markdown'
+import { linkClasses } from 'shared/components/navigation/primary.js'
+
+const eventBlock = events => events.join("  \n")
+
+const EventGroup = ({ type='info', events=[] }) => events.length > 0 ? (
+  <div className="">
+    <h3 className="capitalize" id={`events-${type}`}>{type}</h3>
+    <div className="mdx ml-2">
+      <Markdown>{eventBlock(events)}</Markdown>
+    </div>
+  </div>
+) : null
+
+const order = [
+  'error',
+  'warning',
+  'info',
+  'debug'
+]
+const Events = props => (
+  <div className="max-w-screen-xl m-auto">
+    <div className="flex flex-col">
+      <ul className="flex flex-row row-wrap">
+        {order.map(type => (props.draft.events[type].length > 0)
+          ? (
+            <li key={type} className="">
+              <a href={`#events-${type}`} className={`text-secondary font-bold capitalize text-xl`}>{type}</a>
+              {type === 'debug' ? '' : <span className="px-2 font-bold">|</span>}
+            </li>
+          ) : (
+            <li key={type} className="text-base-content font-bold capitalize text-xl">
+              <span className="opacity-50">{type}</span>
+              {type === 'debug' ? '' : <span className="px-2 font-bold">|</span>}
+            </li>
+          )
+        )}
+      </ul>
+      {order.map(type => <EventGroup type={type} events={props.draft.events[type]} />)}
+    </div>
+  </div>
+)
+
+export default Events