Move issue history into sidebar modal

frontend/app/portal/PortalClient.tsx

@@ -594,7 +594,7 @@ export default function PortalClient({ workspace }: PortalClientProps) {
       const preferred = options?.preferItemId ?? selectedItemId ?? preselectedItemId
       if (preferred && loadedItems.some((item) => item.id === preferred)) {
         setSelectedItemId(preferred)
-      } else if (loadedItems.length > 0) {
+      } else if (loadedItems.length > 0 && workspace === 'request') {
         setSelectedItemId(loadedItems[0].id)
       } else {
         setSelectedItemId(null)
@@ -1321,6 +1321,29 @@ export default function PortalClient({ workspace }: PortalClientProps) {
     }
   }
 
+  const closeIssueModal = () => {
+    setSelectedItemId(null)
+    setSelectedItem(null)
+    setComments([])
+    setActivity([])
+    setCommentText('')
+  }
+
+  useEffect(() => {
+    if (workspace !== 'issue' || selectedItemId == null) return
+    const previousOverflow = document.body.style.overflow
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') closeIssueModal()
+    }
+    document.body.style.overflow = 'hidden'
+    window.addEventListener('keydown', closeOnEscape)
+    return () => {
+      document.body.style.overflow = previousOverflow
+      window.removeEventListener('keydown', closeOnEscape)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workspace, selectedItemId])
+
   if (loadingItems && !items.length) {
     return <main className="card">Loading {workspace === 'issue' ? 'issues' : 'requests'}...</main>
   }
@@ -1898,6 +1921,7 @@ export default function PortalClient({ workspace }: PortalClientProps) {
         </>
       ) : null}
 
+      <div className={workspace === 'issue' ? 'issue-reports-column' : 'portal-lower-content'}>
       {workspace === 'issue' ? (
         <div className="issue-history-heading">
           <div>
@@ -1920,18 +1944,16 @@ export default function PortalClient({ workspace }: PortalClientProps) {
             ))}
           </select>
         </label>
-        <label className="portal-search-filter">
-          <span>Search</span>
-          <input
-            value={filterSearch}
-            onChange={(event) => setFilterSearch(event.target.value)}
-            placeholder={
-              workspace === 'request'
-                ? 'Search request items by title, description, or id'
-                : 'Search issue items by title, description, or id'
-            }
-          />
-        </label>
+        {workspace === 'request' ? (
+          <label className="portal-search-filter">
+            <span>Search</span>
+            <input
+              value={filterSearch}
+              onChange={(event) => setFilterSearch(event.target.value)}
+              placeholder="Search request items by title, description, or id"
+            />
+          </label>
+        ) : null}
         <label className="inline-checkbox portal-mine-toggle">
           <input
             type="checkbox"
@@ -1985,7 +2007,7 @@ export default function PortalClient({ workspace }: PortalClientProps) {
                           ? item.workflow?.stage_label ?? item.status
                           : formatIssueStatus(item.status)}
                       </span>
-                      <span>By: {item.created_by_username}</span>
+                      {isAdmin ? <span>By: {item.created_by_username}</span> : null}
                       <span>Updated: {formatDate(item.last_activity_at)}</span>
                     </div>
                   </div>
@@ -1995,7 +2017,33 @@ export default function PortalClient({ workspace }: PortalClientProps) {
           )}
         </section>
 
-        <section className="admin-panel portal-detail-panel">
+        {workspace === 'issue' && selectedItemId != null ? (
+          <button
+            type="button"
+            className="issue-modal-backdrop"
+            aria-label="Close issue details"
+            onClick={closeIssueModal}
+          />
+        ) : null}
+
+        <section
+          className={`admin-panel portal-detail-panel ${workspace === 'issue' ? `issue-detail-modal ${selectedItemId != null ? 'is-open' : ''}` : ''}`}
+          role={workspace === 'issue' ? 'dialog' : 'region'}
+          aria-labelledby={workspace === 'issue' ? 'issue-detail-title' : undefined}
+        >
+          {workspace === 'issue' && selectedItemId != null ? (
+            <div className="issue-modal-toolbar">
+              <div>
+                <span className="section-kicker">Reported problem</span>
+                <strong id="issue-detail-title">
+                  {selectedItem ? `Issue #${selectedItem.id}` : 'Issue details'}
+                </strong>
+              </div>
+              <button type="button" className="ghost-button" onClick={closeIssueModal}>
+                Close
+              </button>
+            </div>
+          ) : null}
           {!selectedItemId ? (
             <div className="status-banner">
               Select a {workspaceLabel} to view details.
@@ -2295,6 +2343,7 @@ export default function PortalClient({ workspace }: PortalClientProps) {
           )}
         </section>
       </div>
+      </div>
     </main>
   )
 }