From 68fdd4c242a3a2857c5adfe0bb9d345171646335 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 25 Aug 2026 21:51:05 +0000
Subject: [PATCH 1/4] feature: add item details and comments

Co-Authored-By: Charity Quinn <charity.quinn@cognition.ai>
---
 src-react/App.tsx                           |   2 +
 src-react/item-details/ItemDetails.scss     | 151 ++++++++++++++++++++
 src-react/item-details/ItemDetails.tsx      | 143 ++++++++++++++++++
 src-react/item-details/comment/Comment.scss |  85 +++++++++++
 src-react/item-details/comment/Comment.tsx  |  48 +++++++
 5 files changed, 429 insertions(+)
 create mode 100644 src-react/item-details/ItemDetails.scss
 create mode 100644 src-react/item-details/ItemDetails.tsx
 create mode 100644 src-react/item-details/comment/Comment.scss
 create mode 100644 src-react/item-details/comment/Comment.tsx

diff --git a/src-react/App.tsx b/src-react/App.tsx
index d455b4435..e1a1153fd 100644
--- a/src-react/App.tsx
+++ b/src-react/App.tsx
@@ -4,6 +4,7 @@ import { useSettings } from './shared/settings/SettingsContext';
 import Footer from './core/footer/Footer';
 import Header from './core/header/Header';
 import Feed from './feeds/feed/Feed';
+import ItemDetails from './item-details/ItemDetails';
 import type { FeedName } from './shared/models';
 import './App.scss';
 
@@ -26,6 +27,7 @@ function App() {
                             element={<Feed key={feedName} feedType={feedName} />}
                         />
                     ))}
+                    <Route path="item/:id" element={<ItemDetails />} />
                 </Routes>
                 <Footer />
             </div>
diff --git a/src-react/item-details/ItemDetails.scss b/src-react/item-details/ItemDetails.scss
new file mode 100644
index 000000000..adde0bd7c
--- /dev/null
+++ b/src-react/item-details/ItemDetails.scss
@@ -0,0 +1,151 @@
+@import "../shared/scss/media";
+@import "../shared/scss/theme_variables";
+
+.main-content {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  -webkit-transition: opacity .2s ease;
+  transition: opacity .2s ease;
+  box-sizing: border-box;
+  padding: 8px 0;
+  z-index: 0;
+}
+
+.item {
+  box-sizing: border-box;
+  padding: 10px 40px 0 40px;
+  z-index: 0;
+}
+
+@media #{$tablet-only} {
+  .item {
+    padding: 10px 20px 0 40px;
+  }
+}
+
+@media #{$mobile-only} {
+  .item {
+    box-sizing: border-box;
+    padding: 110px 15px 0 15px;
+  }
+}
+
+.head-margin {
+  margin-bottom: 15px;
+}
+
+p {
+  margin: 2px 0;
+}
+
+.subject {
+  word-wrap: break-word;
+  margin-top: 20px;
+}
+
+a {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+@media #{$mobile-only} {
+  .laptop {
+    display: none;
+  }
+}
+
+@media #{$laptop-only} {
+  .mobile {
+    display: none;
+  }
+}
+
+.title {
+  font-size: 16px;
+  font-family: Verdana, Geneva, sans-serif;
+}
+
+.title-block {
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0 75px;
+}
+
+@media #{$mobile-only} {
+  .title {
+    font-size: 15px;
+  }
+  .back-button {
+    position: absolute;
+    top: 52%;
+    width: 0.6rem;
+    height: 0.6rem;
+    background: transparent;
+    box-shadow: 0 0 0 lightgray;
+    transition: all 200ms ease;
+    left: 4%;
+    transform: translate3d(0, -50%, 0) rotate(-135deg);
+  }
+}
+
+.subtext {
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+}
+
+.domain {
+  letter-spacing: 0.5px;
+}
+
+.subtext a {
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.item-details {
+  padding: 10px;
+}
+
+.item-header {
+  padding-bottom: 10px;
+}
+
+@media #{$mobile-only} {
+  .item-header {
+    padding: 10px 0 10px 0;
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 62px;
+  }
+}
+
+.pollResults {
+  margin-bottom: 1em;
+}
+
+.pollContent {
+  * {
+    padding-bottom: 0;
+    margin-bottom: -1em;
+    margin-top: 1em;
+  }
+  .pollBar {
+    height: 10px;
+    margin-bottom: 1em;
+  }
+}
+
+ul {
+  list-style-type: none;
+  padding: 10px 0;
+}
+
+li {
+  display: list-item;
+}
diff --git a/src-react/item-details/ItemDetails.tsx b/src-react/item-details/ItemDetails.tsx
new file mode 100644
index 000000000..c7a229350
--- /dev/null
+++ b/src-react/item-details/ItemDetails.tsx
@@ -0,0 +1,143 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+
+import { fetchItemContent } from '../shared/api/hackernewsApi';
+import ErrorMessage from '../shared/components/error-message/ErrorMessage';
+import Loader from '../shared/components/loader/Loader';
+import type { Story } from '../shared/models';
+import { useSettings } from '../shared/settings/SettingsContext';
+import { formatComments } from '../shared/utils/formatComments';
+import Comment from './comment/Comment';
+import './ItemDetails.scss';
+
+function ItemDetails() {
+    const params = useParams<{ id?: string }>();
+    const itemID = Number(params.id);
+    const navigate = useNavigate();
+    const { settings } = useSettings();
+    const [item, setItem] = useState<Story>();
+    const [errorMessage, setErrorMessage] = useState('');
+
+    useEffect(() => {
+        let ignore = false;
+        window.scrollTo(0, 0);
+        setErrorMessage('');
+
+        fetchItemContent(itemID)
+            .then((nextItem) => {
+                if (!ignore) {
+                    setItem(nextItem);
+                }
+            })
+            .catch(() => {
+                if (!ignore) {
+                    setErrorMessage('Could not load item comments.');
+                }
+            });
+
+        return () => {
+            ignore = true;
+        };
+    }, [itemID]);
+
+    const goBack = () => {
+        navigate(-1);
+    };
+
+    const hasUrl = item?.url?.indexOf('http') === 0;
+
+    return (
+        <div className="main-content">
+            {!item && !errorMessage && <Loader />}
+            {!item && errorMessage !== '' && <ErrorMessage message={errorMessage} />}
+            {item && (
+                <div className="item">
+                    <div className="mobile item-header">
+                        <p className="title-block">
+                            <span className="back-button" onClick={goBack} />
+                            {hasUrl ? (
+                                <a
+                                    className="title"
+                                    href={item.url}
+                                    target={settings.openLinkInNewTab ? '_blank' : undefined}
+                                    rel={settings.openLinkInNewTab ? 'noopener' : undefined}
+                                >
+                                    {item.title}
+                                </a>
+                            ) : (
+                                <Link className="title" to={`/item/${item.id}`}>
+                                    {item.title}
+                                </Link>
+                            )}
+                        </p>
+                    </div>
+                    <div
+                        className={`laptop${item.comments_count > 0 || item.type === 'job' ? ' item-header' : ''}${
+                            item.text ? ' head-margin' : ''
+                        }`}
+                    >
+                        {hasUrl ? (
+                            <p>
+                                <a
+                                    className="title"
+                                    href={item.url}
+                                    target={settings.openLinkInNewTab ? '_blank' : undefined}
+                                    rel={settings.openLinkInNewTab ? 'noopener' : undefined}
+                                >
+                                    {item.title}
+                                </a>
+                                {item.domain && <span className="domain">({item.domain})</span>}
+                            </p>
+                        ) : (
+                            <p>
+                                <Link className="title" to={`/item/${item.id}`}>
+                                    {item.title}
+                                </Link>
+                            </p>
+                        )}
+                        <div className="subtext">
+                            {item.type !== 'job' && (
+                                <span>
+                                    {item.points} points by <Link to={`/user/${item.user}`}>{item.user}</Link>
+                                </span>
+                            )}
+                            <span className={item.type !== 'job' ? 'item-details' : undefined}>
+                                {item.time_ago}
+                                {item.type !== 'job' && (
+                                    <span>
+                                        {' | '}
+                                        <Link to={`/item/${item.id}`}>{formatComments(item.comments_count)}</Link>
+                                    </span>
+                                )}
+                            </span>
+                        </div>
+                    </div>
+                    {item.type === 'poll' && (
+                        <div className="pollResults">
+                            {item.poll.map((pollResult, index) => (
+                                <div className="pollContent" key={index}>
+                                    <div dangerouslySetInnerHTML={{ __html: pollResult.content }} />
+                                    <div className="subtext">{pollResult.points} points</div>
+                                    <div
+                                        className="pollBar"
+                                        style={{ width: `${(pollResult.points / item.poll_votes_count) * 100}%` }}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                    <p className="subject" dangerouslySetInnerHTML={{ __html: item.content ?? '' }} />
+                    <ul className="comment-list">
+                        {item.comments.map((comment) => (
+                            <li key={comment.id}>
+                                <Comment comment={comment} />
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default ItemDetails;
diff --git a/src-react/item-details/comment/Comment.scss b/src-react/item-details/comment/Comment.scss
new file mode 100644
index 000000000..83992b13c
--- /dev/null
+++ b/src-react/item-details/comment/Comment.scss
@@ -0,0 +1,85 @@
+@import "../../shared/scss/media";
+@import "../../shared/scss/theme_variables";
+
+:host >>> {
+  a {
+    font-weight: bold;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.meta {
+  font-size: 13px;
+  color: #696969;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  .time {
+    padding-left: 5px;
+  }
+}
+
+@media #{$mobile-only} {
+  .meta {
+    font-size: 14px;
+    margin-bottom: 10px;
+    .time {
+      padding: 0;
+      float: right;
+    }
+  }
+}
+
+.meta-collapse {
+  margin-bottom: 20px;
+}
+
+.deleted-meta {
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  margin: 30px 0;
+  a {
+    text-decoration: none;
+  }
+}
+
+.collapse {
+  font-size: 13px;
+  letter-spacing: 2px;
+  cursor: pointer;
+}
+
+.comment-tree {
+  margin-left: 24px;
+}
+
+@media #{$tablet-only} {
+  .comment-tree {
+    margin-left: 8px;
+  }
+}
+
+.comment-text {
+  font-size: 15px;
+  margin-top: 0;
+  margin-bottom: 20px;
+  word-wrap: break-word;
+  line-height: 1.5em;
+}
+
+.subtree {
+  margin-left: 0;
+  padding: 0;
+  list-style-type: none;
+}
diff --git a/src-react/item-details/comment/Comment.tsx b/src-react/item-details/comment/Comment.tsx
new file mode 100644
index 000000000..66eca9cef
--- /dev/null
+++ b/src-react/item-details/comment/Comment.tsx
@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import type { Comment as CommentModel } from '../../shared/models';
+import './Comment.scss';
+
+interface CommentProps {
+    comment: CommentModel;
+}
+
+function Comment({ comment }: CommentProps) {
+    const [collapse, setCollapse] = useState(false);
+
+    return (
+        <>
+            {!comment.deleted && (
+                <div>
+                    <div className={`meta${collapse ? ' meta-collapse' : ''}`}>
+                        <span className="collapse" onClick={() => setCollapse((current) => !current)}>
+                            [{collapse ? '+' : '-'}]
+                        </span>{' '}
+                        <Link to={`/user/${comment.user}`}>{comment.user}</Link>
+                        <span className="time">{comment.time_ago}</span>
+                    </div>
+                    <div className="comment-tree">
+                        <div hidden={collapse}>
+                            <p className="comment-text" dangerouslySetInnerHTML={{ __html: comment.content }} />
+                            <ul className="subtree">
+                                {(comment.comments ?? []).map((subComment) => (
+                                    <li key={subComment.id}>
+                                        <Comment comment={subComment} />
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            )}
+            {comment.deleted && (
+                <div className="deleted-meta">
+                    <span className="collapse">[deleted]</span> | Comment Deleted
+                </div>
+            )}
+        </>
+    );
+}
+
+export default Comment;

From c219f6a7ead95476f3b4a846c34163fed4f129cc Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 25 Aug 2026 21:56:02 +0000
Subject: [PATCH 2/4] bug: scope comment link styles

Co-Authored-By: Charity Quinn <charity.quinn@cognition.ai>
---
 src-react/item-details/comment/Comment.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-react/item-details/comment/Comment.scss b/src-react/item-details/comment/Comment.scss
index 83992b13c..f3ec00874 100644
--- a/src-react/item-details/comment/Comment.scss
+++ b/src-react/item-details/comment/Comment.scss
@@ -1,7 +1,7 @@
 @import "../../shared/scss/media";
 @import "../../shared/scss/theme_variables";
 
-:host >>> {
+.comment-text {
   a {
     font-weight: bold;
     text-decoration: none;

From 6e369ac006c1b3de5e9395e4a2e31058d1289609 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 25 Aug 2026 22:23:47 +0000
Subject: [PATCH 3/4] bug: sanitize API-provided HTML

Co-Authored-By: Charity Quinn <charity.quinn@cognition.ai>
---
 package.json                               |  1 +
 src-react/item-details/ItemDetails.tsx     |  7 ++++---
 src-react/item-details/comment/Comment.tsx |  6 +++++-
 src-react/shared/utils/sanitizeHtml.ts     |  5 +++++
 yarn.lock                                  | 12 ++++++++++++
 5 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 src-react/shared/utils/sanitizeHtml.ts

diff --git a/package.json b/package.json
index 488cd2249..7a28d0865 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "~9.0.1",
     "@angular/router": "~9.0.1",
     "@angular/service-worker": "~9.0.1",
+    "dompurify": "3.2.6",
     "node-fetch": "^2.6.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src-react/item-details/ItemDetails.tsx b/src-react/item-details/ItemDetails.tsx
index c7a229350..39149cdca 100644
--- a/src-react/item-details/ItemDetails.tsx
+++ b/src-react/item-details/ItemDetails.tsx
@@ -7,6 +7,7 @@ import Loader from '../shared/components/loader/Loader';
 import type { Story } from '../shared/models';
 import { useSettings } from '../shared/settings/SettingsContext';
 import { formatComments } from '../shared/utils/formatComments';
+import { sanitizeHtml } from '../shared/utils/sanitizeHtml';
 import Comment from './comment/Comment';
 import './ItemDetails.scss';
 
@@ -116,7 +117,7 @@ function ItemDetails() {
                         <div className="pollResults">
                             {item.poll.map((pollResult, index) => (
                                 <div className="pollContent" key={index}>
-                                    <div dangerouslySetInnerHTML={{ __html: pollResult.content }} />
+                                    <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(pollResult.content) }} />
                                     <div className="subtext">{pollResult.points} points</div>
                                     <div
                                         className="pollBar"
@@ -126,9 +127,9 @@ function ItemDetails() {
                             ))}
                         </div>
                     )}
-                    <p className="subject" dangerouslySetInnerHTML={{ __html: item.content ?? '' }} />
+                    <p className="subject" dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.content ?? '') }} />
                     <ul className="comment-list">
-                        {item.comments.map((comment) => (
+                        {(item.comments ?? []).map((comment) => (
                             <li key={comment.id}>
                                 <Comment comment={comment} />
                             </li>
diff --git a/src-react/item-details/comment/Comment.tsx b/src-react/item-details/comment/Comment.tsx
index 66eca9cef..25297ebb9 100644
--- a/src-react/item-details/comment/Comment.tsx
+++ b/src-react/item-details/comment/Comment.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import type { Comment as CommentModel } from '../../shared/models';
+import { sanitizeHtml } from '../../shared/utils/sanitizeHtml';
 import './Comment.scss';
 
 interface CommentProps {
@@ -24,7 +25,10 @@ function Comment({ comment }: CommentProps) {
                     </div>
                     <div className="comment-tree">
                         <div hidden={collapse}>
-                            <p className="comment-text" dangerouslySetInnerHTML={{ __html: comment.content }} />
+                            <p
+                                className="comment-text"
+                                dangerouslySetInnerHTML={{ __html: sanitizeHtml(comment.content) }}
+                            />
                             <ul className="subtree">
                                 {(comment.comments ?? []).map((subComment) => (
                                     <li key={subComment.id}>
diff --git a/src-react/shared/utils/sanitizeHtml.ts b/src-react/shared/utils/sanitizeHtml.ts
new file mode 100644
index 000000000..de0650b21
--- /dev/null
+++ b/src-react/shared/utils/sanitizeHtml.ts
@@ -0,0 +1,5 @@
+import DOMPurify from 'dompurify';
+
+export function sanitizeHtml(html: string): string {
+    return DOMPurify.sanitize(html);
+}
diff --git a/yarn.lock b/yarn.lock
index aa77d2683..abce9264a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1668,6 +1668,11 @@
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
   integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
 
+"@types/trusted-types@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
 "@types/webpack-sources@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-0.1.5.tgz#be47c10f783d3d6efe1471ff7f042611bd464a92"
@@ -3754,6 +3759,13 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
   integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
 
+dompurify@3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.2.6.tgz#ca040a6ad2b88e2a92dc45f38c79f84a714a1cad"
+  integrity sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==
+  optionalDependencies:
+    "@types/trusted-types" "^2.0.7"
+
 domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"

From f374fab777804bb5d73fa9b3b41df143f7209129 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 25 Aug 2026 22:47:13 +0000
Subject: [PATCH 4/4] bug: update dompurify security fix

Co-Authored-By: Charity Quinn <charity.quinn@cognition.ai>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 7a28d0865..2f9db88b7 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@angular/platform-browser-dynamic": "~9.0.1",
     "@angular/router": "~9.0.1",
     "@angular/service-worker": "~9.0.1",
-    "dompurify": "3.2.6",
+    "dompurify": "3.4.13",
     "node-fetch": "^2.6.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/yarn.lock b/yarn.lock
index abce9264a..641062a8e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3759,10 +3759,10 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
   integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
 
-dompurify@3.2.6:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.2.6.tgz#ca040a6ad2b88e2a92dc45f38c79f84a714a1cad"
-  integrity sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==
+dompurify@3.4.13:
+  version "3.4.13"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.4.13.tgz#fc28949d59f92d62e28a3a764bcbeee35897a1be"
+  integrity sha512-2vmYIoqjze2d+kakP8S/nS5shfsl587kzwEjcGlTdiksUVgFHnFCsLYDVj/JNqJVOQZGSYBTmuycv0PodwmnMQ==
   optionalDependencies:
     "@types/trusted-types" "^2.0.7"