Add some links and context to readme

web/.storybook/main.js

@@ -2,7 +2,11 @@ module.exports = {
   core: {
     builder: 'webpack5',
   },
-  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: [
+    '../stories/Introduction.stories.mdx',
+    '../stories/**/*.stories.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

web/components/modals/BrowserNotifyModal.tsx

@@ -1,6 +1,36 @@
+/* eslint-disable react/no-unescaped-entities */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-interface Props {}
+import { Row, Col, Switch, Typography } from 'antd';
+import { useState } from 'react';
 
-export default function BrowserNotifyModal(props: Props) {
+const { Title } = Typography;
-  return <div>Component goes here</div>;
+
+// interface Props {}
+
+export default function BrowserNotifyModal() {
+  const [enabled, setEnabled] = useState(false);
+
+  const onSwitchToggle = (checked: Boolean) => {
+    setEnabled(true);
+  };
+
+  return (
+    <div>
+      <Row align="top">
+        <Col span={12}>
+          <Switch defaultChecked={enabled} checked={enabled} onChange={onSwitchToggle} />{' '}
+          {enabled ? 'Enabled' : 'Disabled'}
+        </Col>
+        <Col span={12}>
+          You'll need to allow your browser to receive notifications from Owncast Nightly, first.
+          Fake push notification prompt example goes here.
+        </Col>
+      </Row>
+      <Row align="top">
+        <Title>Browser Notifications</Title>
+        Get notified right in the browser each time this stream goes live. Blah blah blah more
+        description text goes here.
+      </Row>
+    </div>
+  );
 }

web/stories/Introduction.stories.mdx

@@ -107,24 +107,33 @@ import Direction from './assets/direction.svg';
   
 `}</style>
 
-# Owncast Component Library
+# Owncast web UI v2
 
-This is a place to build and experiment with styling individual components.
+Owncast is going through a complete rewrite of the web app frontend.
 
-This approach helps build UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+Visit the [uiv2 milestone](https://github.com/owncast/owncast/milestone/18) on GitHub to see the individual tasks for this project. Please take a look and see if there's anything you can help with. Even just grabbing one component is a huge help!
 
-## How to Edit
+## What
 
-In the web project edit the `styles/theme.less` file to change or add variables used in the components. When customizing Ant Design components refer to the list of variables at https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less that you can override.
+- [Next.js](https://nextjs.org/)
+- [React](https://reactjs.org/)
+- [Ant Design](https://ant.design/)
 
-<div className="subheading">Learn</div>
+## Why?
 
-<div className="link-list">
+- Moving to a full React Component workflow allows the project to be more productive and build features faster.
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+- Better accessibility.
-    <img src={Direction} alt="direction" />
+- Better mobile experience.
-    <span>
+
-      <strong>In-depth guides</strong>
+## How?
-      Best practices from leading teams
+
-    </span>
+This is a large project, but like anything else, breaking it into pieces and working on one thing at a time will eventually get us to the finish line.
-  </a>
+And that's what this interface lets us do. On this page we see all the different components still needing to be worked on, and have a place to document the functionality of these pieces.
-</div>
+
+## What about the Admin?
+
+The admin has always been a Next+React+Ant project, so the goal is to touch that as little as possible.
+
+---
+
+More documentation about things should go here.