From 32b1f0f226233952c090689d6a7eb48108dc7915 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:58:16 +0000
Subject: [PATCH 1/3] feature: add React user profile

Co-Authored-By: Charity Quinn <charity.quinn@cognition.ai>
---
 src-react/App.tsx        |  2 +
 src-react/user/User.scss | 89 ++++++++++++++++++++++++++++++++++++++++
 src-react/user/User.tsx  | 70 +++++++++++++++++++++++++++++++
 3 files changed, 161 insertions(+)
 create mode 100644 src-react/user/User.scss
 create mode 100644 src-react/user/User.tsx

diff --git a/src-react/App.tsx b/src-react/App.tsx
index e1a1153fd..6e636b5e8 100644
--- a/src-react/App.tsx
+++ b/src-react/App.tsx
@@ -6,6 +6,7 @@ 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 User from './user/User';
 import './App.scss';
 
 const feedNames: FeedName[] = ['news', 'newest', 'show', 'ask', 'jobs'];
@@ -28,6 +29,7 @@ function App() {
                         />
                     ))}
                     <Route path="item/:id" element={<ItemDetails />} />
+                    <Route path="user/:id" element={<User />} />
                 </Routes>
                 <Footer />
             </div>
diff --git a/src-react/user/User.scss b/src-react/user/User.scss
new file mode 100644
index 000000000..c5fc9af57
--- /dev/null
+++ b/src-react/user/User.scss
@@ -0,0 +1,89 @@
+@import "../shared/scss/media";
+@import "../shared/scss/theme_variables";
+
+:host >>> pre {
+  white-space: pre-wrap;
+}
+
+.profile {
+  padding: 30px;
+}
+
+@media #{$mobile-only} {
+  .profile {
+    padding: 110px 15px 0 15px;
+  }
+  .title-block {
+    font-size: 15px;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 0 75px;
+  }
+  .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);
+  }
+  .item-header {
+    padding-bottom: 10px;
+    background-color: #fff;
+    padding: 10px 0 10px 0;
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 62px;
+    height: 20px;
+  }
+}
+
+@media #{$laptop-only} {
+  .mobile {
+    display: none;
+  }
+}
+
+.main-details {
+  .name {
+    font-weight: bold;
+    font-size: 32px;
+    letter-spacing: 2px;
+  }
+  .age {
+    font-weight: bold;
+    color: #696969;
+    padding-bottom: 0;
+  }
+  .right {
+    float: right;
+    font-weight: bold;
+    font-size: 32px;
+    letter-spacing: 2px;
+  }
+}
+
+@media #{$mobile-only} {
+  .main-details {
+    margin-top: 20px;
+    .name {
+      font-size: 18px;
+    }
+  }
+}
+
+@media #{$mobile-only} {
+  .main-details .right {
+    font-size: 18px;
+  }
+}
+
+.other-details {
+  word-wrap: break-word;
+}
diff --git a/src-react/user/User.tsx b/src-react/user/User.tsx
new file mode 100644
index 000000000..fad0e8f5e
--- /dev/null
+++ b/src-react/user/User.tsx
@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { fetchUser } from '../shared/api/hackernewsApi';
+import ErrorMessage from '../shared/components/error-message/ErrorMessage';
+import Loader from '../shared/components/loader/Loader';
+import type { User as UserModel } from '../shared/models';
+import './User.scss';
+
+function User() {
+    const params = useParams<{ id?: string }>();
+    const userID = params.id ?? '';
+    const navigate = useNavigate();
+    const [user, setUser] = useState<UserModel>();
+    const [errorMessage, setErrorMessage] = useState('');
+
+    useEffect(() => {
+        let ignore = false;
+        setErrorMessage('');
+
+        fetchUser(userID)
+            .then((nextUser) => {
+                if (!ignore) {
+                    setUser(nextUser);
+                }
+            })
+            .catch(() => {
+                if (!ignore) {
+                    setErrorMessage(`Could not load user ${userID}.`);
+                }
+            });
+
+        return () => {
+            ignore = true;
+        };
+    }, [userID]);
+
+    const goBack = () => {
+        navigate(-1);
+    };
+
+    return (
+        <>
+            {!user && !errorMessage && <Loader />}
+            {!user && errorMessage !== '' && <ErrorMessage message={errorMessage} />}
+            {user && (
+                <div className="profile">
+                    <div className="mobile item-header">
+                        <p className="title-block">
+                            <span className="back-button" onClick={goBack} />
+                            Profile: {user.id}
+                        </p>
+                    </div>
+                    <div className="main-details">
+                        <span className="name">{user.id}</span>
+                        <span className="right">{user.karma} ★</span>
+                        <p className="age">Created {user.created}</p>
+                    </div>
+                    {user.about && (
+                        <div className="other-details">
+                            <p dangerouslySetInnerHTML={{ __html: user.about }} />
+                        </div>
+                    )}
+                </div>
+            )}
+        </>
+    );
+}
+
+export default User;

From 1f2f287187377dfa9ddf249082449485056e608c 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:00:23 +0000
Subject: [PATCH 2/3] bug: scope user about pre styles

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

diff --git a/src-react/user/User.scss b/src-react/user/User.scss
index c5fc9af57..532855788 100644
--- a/src-react/user/User.scss
+++ b/src-react/user/User.scss
@@ -1,7 +1,7 @@
 @import "../shared/scss/media";
 @import "../shared/scss/theme_variables";
 
-:host >>> pre {
+.other-details pre {
   white-space: pre-wrap;
 }
 

From 1754abb53983705da8c7306b9f9cdccdacae5b9d 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:24:11 +0000
Subject: [PATCH 3/3] bug: sanitize user profile HTML

Co-Authored-By: Charity Quinn <charity.quinn@cognition.ai>
---
 src-react/user/User.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src-react/user/User.tsx b/src-react/user/User.tsx
index fad0e8f5e..24a302c6b 100644
--- a/src-react/user/User.tsx
+++ b/src-react/user/User.tsx
@@ -5,6 +5,7 @@ import { fetchUser } from '../shared/api/hackernewsApi';
 import ErrorMessage from '../shared/components/error-message/ErrorMessage';
 import Loader from '../shared/components/loader/Loader';
 import type { User as UserModel } from '../shared/models';
+import { sanitizeHtml } from '../shared/utils/sanitizeHtml';
 import './User.scss';
 
 function User() {
@@ -58,7 +59,7 @@ function User() {
                     </div>
                     {user.about && (
                         <div className="other-details">
-                            <p dangerouslySetInnerHTML={{ __html: user.about }} />
+                            <p dangerouslySetInnerHTML={{ __html: sanitizeHtml(user.about) }} />
                         </div>
                     )}
                 </div>