feat: Key moment search results now link to parent technique page with…

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

GSD-Task: S01/T02
This commit is contained in:
jlightner 2026-03-31 05:04:05 +00:00
parent fe8b529ad2
commit d5144307b8
4 changed files with 27 additions and 3 deletions

View file

@ -17,6 +17,7 @@ export interface SearchResultItem {
creator_slug: string; creator_slug: string;
topic_category: string; topic_category: string;
topic_tags: string[]; topic_tags: string[];
technique_page_slug?: string;
} }
export interface SearchResponse { export interface SearchResponse {

View file

@ -142,10 +142,21 @@ export default function SearchResults() {
); );
} }
function getSearchResultLink(item: SearchResultItem): string {
if (item.type === "key_moment") {
if (item.technique_page_slug) {
return `/techniques/${item.technique_page_slug}#km-${item.slug || item.title}`;
}
// Graceful fallback — re-search instead of 404
return `/search?q=${encodeURIComponent(item.title)}`;
}
return `/techniques/${item.slug}`;
}
function SearchResultCard({ item }: { item: SearchResultItem }) { function SearchResultCard({ item }: { item: SearchResultItem }) {
return ( return (
<Link <Link
to={`/techniques/${item.slug}`} to={getSearchResultLink(item)}
className="search-result-card" className="search-result-card"
> >
<div className="search-result-card__header"> <div className="search-result-card__header">

View file

@ -156,6 +156,18 @@ export default function TechniquePage() {
}; };
}, [slug, selectedVersion]); }, [slug, selectedVersion]);
// Scroll to key moment if URL has a #km- hash fragment
useEffect(() => {
if (!technique) return;
const hash = window.location.hash;
if (hash.startsWith("#km-")) {
const el = document.getElementById(hash.slice(1));
if (el) {
el.scrollIntoView({ behavior: "smooth", block: "start" });
}
}
}, [technique]);
if (loading) { if (loading) {
return <div className="loading">Loading technique</div>; return <div className="loading">Loading technique</div>;
} }
@ -418,7 +430,7 @@ export default function TechniquePage() {
<h2>Key Moments</h2> <h2>Key Moments</h2>
<ol className="technique-moments__list"> <ol className="technique-moments__list">
{technique.key_moments.map((km) => ( {technique.key_moments.map((km) => (
<li key={km.id} className="technique-moment"> <li key={km.id} id={`km-${km.id}`} className="technique-moment">
<h3 className="technique-moment__title">{km.title}</h3> <h3 className="technique-moment__title">{km.title}</h3>
<div className="technique-moment__meta"> <div className="technique-moment__meta">
{km.video_filename && ( {km.video_filename && (

View file

@ -1 +1 @@
{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/ModeToggle.tsx","./src/components/ReportIssueModal.tsx","./src/components/StatusBadge.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/MomentDetail.tsx","./src/pages/ReviewQueue.tsx","./src/pages/SearchResults.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx"],"version":"5.6.3"} {"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx"],"version":"5.6.3"}