From 363787faa31512d9f6019291baeb488714aa5cc5 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 12 May 2022 15:41:54 -0700
Subject: [PATCH] Add some links and context to readme

---
 web/.storybook/main.js                       |  6 ++-
 web/components/modals/BrowserNotifyModal.tsx | 36 ++++++++++++++++--
 web/stories/Introduction.stories.mdx         | 39 ++++++++++++--------
 3 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/web/.storybook/main.js b/web/.storybook/main.js
index c9bbb3a0e..bd65d31a6 100644
--- a/web/.storybook/main.js
+++ b/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',
diff --git a/web/components/modals/BrowserNotifyModal.tsx b/web/components/modals/BrowserNotifyModal.tsx
index 45e26c76a..e487858fd 100644
--- a/web/components/modals/BrowserNotifyModal.tsx
+++ b/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) {
-  return <div>Component goes here</div>;
+const { Title } = Typography;
+
+// 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>
+  );
 }
diff --git a/web/stories/Introduction.stories.mdx b/web/stories/Introduction.stories.mdx
index 96d2c51c1..f0cb40a69 100644
--- a/web/stories/Introduction.stories.mdx
+++ b/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">
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-</div>
+- Moving to a full React Component workflow allows the project to be more productive and build features faster.
+- Better accessibility.
+- Better mobile experience.
+
+## How?
+
+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.
+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.
+
+## 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.
\ No newline at end of file