From 7bdba76d501c790a8915af2e5e739b350009fe45 Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Fri, 3 Apr 2026 02:15:07 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Added=20technique=5Fsection=20result=20?=
 =?UTF-8?q?rendering=20with=20Section=20badge,=20deep=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/api/public-client.ts"
- "frontend/src/pages/TechniquePage.tsx"
- "frontend/src/pages/SearchResults.tsx"
- "frontend/src/components/SearchAutocomplete.tsx"

GSD-Task: S07/T02
---
 frontend/src/api/public-client.ts             |  2 +
 .../src/components/SearchAutocomplete.tsx     | 50 +++++++++++-------
 frontend/src/pages/SearchResults.tsx          | 51 ++++++++++++++++++-
 frontend/src/pages/TechniquePage.tsx          |  8 +--
 4 files changed, 87 insertions(+), 24 deletions(-)

diff --git a/frontend/src/api/public-client.ts b/frontend/src/api/public-client.ts
index 2e436fd..c0c5ecb 100644
--- a/frontend/src/api/public-client.ts
+++ b/frontend/src/api/public-client.ts
@@ -19,6 +19,8 @@ export interface SearchResultItem {
   topic_tags: string[];
   technique_page_slug?: string;
   match_context?: string;
+  section_anchor?: string;
+  section_heading?: string;
 }
 
 export interface SearchResponse {
diff --git a/frontend/src/components/SearchAutocomplete.tsx b/frontend/src/components/SearchAutocomplete.tsx
index bd0460e..c8d91be 100644
--- a/frontend/src/components/SearchAutocomplete.tsx
+++ b/frontend/src/components/SearchAutocomplete.tsx
@@ -163,6 +163,7 @@ export default function SearchAutocomplete({
     creator: "Creator",
     technique_page: "Technique",
     key_moment: "Key Moment",
+    technique_section: "Section",
   };
 
   return (
@@ -215,26 +216,37 @@ export default function SearchAutocomplete({
 
           {showSearch && (
             <>
-              {searchResults.map((item) => (
-                <Link
-                  key={`${item.type}-${item.slug}`}
-                  to={`/techniques/${item.slug}`}
-                  className="typeahead-item"
-                  onClick={() => setShowDropdown(false)}
-                >
-                  <span className="typeahead-item__title">{item.title}</span>
-                  <span className="typeahead-item__meta">
-                    <span className={`typeahead-item__type typeahead-item__type--${item.type}`}>
-                      {typeLabel[item.type] ?? item.type}
-                    </span>
-                    {item.creator_name && (
-                      <span className="typeahead-item__creator">
-                        {item.creator_name}
-                      </span>
+              {searchResults.map((item) => {
+                let linkTo = `/techniques/${item.slug}`;
+                if (item.type === "technique_section" && item.technique_page_slug) {
+                  linkTo = `/techniques/${item.technique_page_slug}${item.section_anchor ? `#${item.section_anchor}` : ""}`;
+                } else if (item.type === "key_moment" && item.technique_page_slug) {
+                  linkTo = `/techniques/${item.technique_page_slug}#km-${item.slug || item.title}`;
+                }
+                return (
+                  <Link
+                    key={`${item.type}-${item.slug}-${item.section_anchor ?? ""}`}
+                    to={linkTo}
+                    className="typeahead-item"
+                    onClick={() => setShowDropdown(false)}
+                  >
+                    <span className="typeahead-item__title">{item.title}</span>
+                    {item.type === "technique_section" && item.section_heading && (
+                      <span className="typeahead-item__section">§ {item.section_heading}</span>
                     )}
-                  </span>
-                </Link>
-              ))}
+                    <span className="typeahead-item__meta">
+                      <span className={`typeahead-item__type typeahead-item__type--${item.type}`}>
+                        {typeLabel[item.type] ?? item.type}
+                      </span>
+                      {item.creator_name && (
+                        <span className="typeahead-item__creator">
+                          {item.creator_name}
+                        </span>
+                      )}
+                    </span>
+                  </Link>
+                );
+              })}
               <Link
                 to={`/search?q=${encodeURIComponent(query)}`}
                 className="typeahead-see-all"
diff --git a/frontend/src/pages/SearchResults.tsx b/frontend/src/pages/SearchResults.tsx
index fcf65a6..be24e92 100644
--- a/frontend/src/pages/SearchResults.tsx
+++ b/frontend/src/pages/SearchResults.tsx
@@ -66,6 +66,7 @@ export default function SearchResults() {
 
   // Group results by type
   const techniqueResults = results.filter((r) => r.type === "technique_page");
+  const sectionResults = results.filter((r) => r.type === "technique_section");
   const momentResults = results.filter((r) => r.type === "key_moment");
 
   return (
@@ -124,6 +125,20 @@ export default function SearchResults() {
         </section>
       )}
 
+      {/* Technique sections */}
+      {sectionResults.length > 0 && (
+        <section className="search-group">
+          <h3 className="search-group__title">
+            Sections ({sectionResults.length})
+          </h3>
+          <div className="search-group__list">
+            {sectionResults.map((item, i) => (
+              <SearchResultCard key={`ts-${item.slug}-${item.section_anchor}-${i}`} item={item} staggerIndex={i} />
+            ))}
+          </div>
+        </section>
+      )}
+
       {/* Key moments */}
       {momentResults.length > 0 && (
         <section className="search-group">
@@ -142,6 +157,15 @@ export default function SearchResults() {
 }
 
 function getSearchResultLink(item: SearchResultItem): string {
+  if (item.type === "technique_section") {
+    if (item.technique_page_slug && item.section_anchor) {
+      return `/techniques/${item.technique_page_slug}#${item.section_anchor}`;
+    }
+    if (item.technique_page_slug) {
+      return `/techniques/${item.technique_page_slug}`;
+    }
+    return `/search?q=${encodeURIComponent(item.title)}`;
+  }
   if (item.type === "key_moment") {
     if (item.technique_page_slug) {
       return `/techniques/${item.technique_page_slug}#km-${item.slug || item.title}`;
@@ -153,6 +177,12 @@ function getSearchResultLink(item: SearchResultItem): string {
 }
 
 function SearchResultCard({ item, staggerIndex }: { item: SearchResultItem; staggerIndex: number }) {
+  const typeLabels: Record<string, string> = {
+    technique_page: "Technique",
+    key_moment: "Key Moment",
+    technique_section: "Section",
+  };
+
   return (
     <Link
       to={getSearchResultLink(item)}
@@ -162,9 +192,14 @@ function SearchResultCard({ item, staggerIndex }: { item: SearchResultItem; stag
       <div className="search-result-card__header">
         <span className="search-result-card__title">{item.title}</span>
         <span className={`badge badge--type badge--type-${item.type}`}>
-          {item.type === "technique_page" ? "Technique" : "Key Moment"}
+          {typeLabels[item.type] ?? item.type}
         </span>
       </div>
+      {item.type === "technique_section" && item.section_heading && (
+        <div className="search-result-card__section-context">
+          § {item.section_heading}
+        </div>
+      )}
       {item.match_context && (
         <div className="search-result-card__match-context">
           <span className="match-context__icon">⚡</span>
@@ -198,6 +233,7 @@ function SearchResultCard({ item, staggerIndex }: { item: SearchResultItem; stag
 
 function PartialMatchResults({ items }: { items: SearchResultItem[] }) {
   const techniqueResults = items.filter((r) => r.type === "technique_page");
+  const sectionResults = items.filter((r) => r.type === "technique_section");
   const momentResults = items.filter((r) => r.type === "key_moment");
 
   return (
@@ -219,6 +255,19 @@ function PartialMatchResults({ items }: { items: SearchResultItem[] }) {
         </section>
       )}
 
+      {sectionResults.length > 0 && (
+        <section className="search-group">
+          <h4 className="search-group__title">
+            Sections ({sectionResults.length})
+          </h4>
+          <div className="search-group__list">
+            {sectionResults.map((item, i) => (
+              <SearchResultCard key={`partial-ts-${item.slug}-${item.section_anchor}-${i}`} item={item} staggerIndex={i} />
+            ))}
+          </div>
+        </section>
+      )}
+
       {momentResults.length > 0 && (
         <section className="search-group">
           <h4 className="search-group__title">
diff --git a/frontend/src/pages/TechniquePage.tsx b/frontend/src/pages/TechniquePage.tsx
index 38771cd..570593e 100644
--- a/frontend/src/pages/TechniquePage.tsx
+++ b/frontend/src/pages/TechniquePage.tsx
@@ -171,12 +171,12 @@ export default function TechniquePage() {
     };
   }, [slug, selectedVersion]);
 
-  // Scroll to key moment if URL has a #km- hash fragment
+  // Scroll to hash fragment after technique loads (key moments, section anchors, etc.)
   useEffect(() => {
     if (!technique) return;
-    const hash = window.location.hash;
-    if (hash.startsWith("#km-")) {
-      const el = document.getElementById(hash.slice(1));
+    const hash = window.location.hash.slice(1);
+    if (hash) {
+      const el = document.getElementById(hash);
       if (el) {
         el.scrollIntoView({ behavior: "smooth", block: "start" });
       }