Early history UI

stackernews · Feb 18, 2025 · 6d9ca69 · 6d9ca69
1 parent 7e6e08f
commit 6d9ca69
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/components/item-history.js b/components/item-history.js
@@ -5,17 +5,13 @@ import styles from './item.module.css'
 // TODO: styling
 // TODO: render it as Item
 
-export default function ItemHistory ({ item }) {
+export default function ItemHistory ({ version }) {
   return (
     <div className={styles.other}>
-      {item.oldVersions.map(version => (
-        <div key={version.id}>
-          <span className='text-muted' title={version.cloneBornAt || version.createdAt}>{timeSince(new Date(version.cloneBornAt || version.createdAt))}</span>
-          <h3>{version.title}</h3>
-          <p>{version.text}</p>
-          <p>{version.url}</p>
-        </div>
-      ))}
+      <span className='text-muted' title={version.cloneBornAt || version.createdAt}>{timeSince(new Date(version.cloneBornAt || version.createdAt))}</span>
+      <h3>{version.title}</h3>
+      <p>{version.text}</p>
+      <p>{version.url}</p>
     </div>
   )
 }
diff --git a/components/item-info.js b/components/item-info.js
@@ -147,12 +147,28 @@ export default function ItemInfo ({
               yesterday
             </Link>
           </>}
-        {item.oldVersions?.length > 0 &&
+        {item.oldVersions?.length > 0 && !item.deletedAt &&
           <>
             <span> \ </span>
-            <span onClick={() => showModal((onClose) => <ItemHistory item={item} onClose={onClose} />)} className='text-reset' title={item.cloneBornAt}>
-              edited {item.oldVersions.length} times
-            </span>
+            <Dropdown className='pointer' as='span'>
+              <Dropdown.Toggle as='span' onPointerDown={e => e.preventDefault()}>
+                edited
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Header className='text-muted'>
+                  edited {item.oldVersions.length} times
+                </Dropdown.Header>
+                <hr className='dropdown-divider' />
+                <Dropdown.Item>
+                  edited {timeSince(new Date(item.cloneBornAt))} ago (most recent)
+                </Dropdown.Item>
+                {item.oldVersions.map((version) => ( // TODO: prettier
+                  <Dropdown.Item key={version.id} onClick={() => showModal((onClose) => <ItemHistory version={version} onClose={onClose} />)}>
+                    {!version.cloneBornAt ? 'created' : 'edited'} {timeSince(new Date(version.cloneBornAt || version.createdAt))} ago
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
           </>}
       </span>
       {item.subName &&