feat(board): add post form UI on desktop with link type previewer

src/components/post-form/post-form.module.css

@@ -19,6 +19,65 @@
   padding-bottom: 100px;
 }
 
+.postFormButtonDesktop table {
+  display: table;
+  border-spacing: 1px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: left;
+}
+
+.postFormButtonDesktop td:first-child {
+  background-color: var(--post-form-field-title-background-color);
+  color: var(--post-form-field-title-color);
+  font-weight: var(--post-form-field-title-font-weight);
+  border: var(--post-form-field-border);
+  padding: 0 5px;
+  width: 80px;
+  font-size: 10pt;
+}
+
+.postFormButtonDesktop td {
+  margin: 0;
+  padding: 0;
+  font-size: 10pt;
+  position: relative;
+}
+      
+.postFormButtonDesktop td > input[type="text"] {
+  width: 244px;
+  margin: 0;
+  margin-right: 2px;
+  padding: 2px 4px 3px;
+  border: 1px solid #aaa;
+  outline: none;
+  appearance: none;
+  font-family: arial, helvetica, sans-serif;
+  font-size: 10pt;
+}
+
+.postFormButtonDesktop textarea {
+  width: 292px;
+  margin-bottom: 0;
+  outline: none;
+  border-radius: none;
+  border: 1px solid #aaa;
+  padding: 2px 4px 3px;
+  appearance: none;
+  font-family: arial, helvetica, sans-serif;
+  font-size: 10pt;
+  
+  /* textareas have a gap below them that differs along browsers https://stackoverflow.com/a/7144960 */
+  vertical-align: top;
+}
+
+.linkType {
+  font-weight: normal;
+  position: absolute;
+  white-space: nowrap;
+  bottom: 3px;
+}
+
 @media (max-width: 640px) {
   .postFormButtonDesktop {
     display: none;

src/components/post-form/post-form.tsx

@@ -1,10 +1,61 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router-dom';
-import { useComment } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useComment } from '@plebbit/plebbit-react-hooks';
+import { getLinkMediaInfo } from '../../lib/utils/media-utils';
+import { isValidURL } from '../../lib/utils/url-utils';
 import { isDescriptionView, isPostPageView, isRulesView } from '../../lib/utils/view-utils';
 import styles from './post-form.module.css';
 
+const LinkTypePreviewer = ({ link }: { link: string }) => {
+  const mediaInfo = getLinkMediaInfo(link);
+  return isValidURL(link) ? mediaInfo?.type : 'Invalid URL';
+};
+
+const PostFormTable = () => {
+  const account = useAccount();
+  const { displayName } = account || {};
+
+  const [link, setLink] = useState('');
+
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <td>Name</td>
+          <td>
+            <input type='text' placeholder={!displayName ? 'Anonymous' : undefined} defaultValue={displayName || undefined} />
+          </td>
+        </tr>
+        <tr>
+          <td>Subject</td>
+          <td>
+            <input type='text' />
+            <button>Post</button>
+          </td>
+        </tr>
+        <tr>
+          <td>Comment</td>
+          <textarea cols={48} rows={4} wrap='soft' />
+        </tr>
+        <tr>
+          <td>Link</td>
+          <td>
+            <input type='text' onChange={(e) => setLink(e.target.value)} />
+            <span className={styles.linkType}>
+              {link && (
+                <>
+                  (<LinkTypePreviewer link={link} />)
+                </>
+              )}
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
 const PostForm = () => {
   const { t } = useTranslation();
   const location = useLocation();
@@ -30,7 +81,7 @@ const PostForm = () => {
             <br />
             {t('may_not_reply')}
           </div>
-        ) : (
+        ) : !showForm ? (
           <div>
             [
             <button className='button' onClick={() => setShowForm(true)}>
@@ -38,6 +89,8 @@ const PostForm = () => {
             </button>
             ]
           </div>
+        ) : (
+          <PostFormTable />
         )}
       </div>
       <div className={styles.postFormButtonMobile}>

src/lib/utils/media-utils.ts

@@ -45,7 +45,7 @@ const getPatternThumbnailUrl = (url: URL): string | undefined => {
   }
 };
 
-const getLinkMediaInfo = memoize(
+export const getLinkMediaInfo = memoize(
   (link: string): CommentMediaInfo | undefined => {
     if (!isValidURL(link)) {
       return;

src/themes.css

@@ -242,6 +242,10 @@
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
+  --post-form-field-title-background-color: #98e;
+  --post-form-field-title-color: #000;
+  --post-form-field-border: 1px solid #000;
+  --post-form-field-title-font-weight: 700;
 
   /* quotelink */
   --post-quotelink-text-color: #d00;