terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

terry-staging #9

Merged
terry merged 8 commits from terry-staging into main 2026-05-29 10:17:12 +00:00
Conversation 0 Commits 8 Files Changed 9 +15 -92
1 changed files with 15 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b22ecc22ad - Show all commits

107
src/pages/Home/index.tsx
View File

@@ -4,10 +4,6 @@ import { useEffect, useRef, useState } from "react";
import { getJSON, itemsOrEmpty, readJSONCache, type Category } from "../../api";
import { CategoryIcon } from "../../components/CategoryIcon";
import { FigmaBanner } from "../../components/FigmaBanner";
import {
ComingSoonLatestUpdateRow,
LatestUpdateRow,
} from "../../components/LatestUpdateRow";
import { PopularRankList } from "../../components/PopularRankList";
import { RecommendedCard } from "../../components/RecommendedCard";
import { SectionHeader } from "../../components/SectionHeader";
@@ -49,17 +45,14 @@ export function Home() {
const { hash } = useLocation();
const [cats, setCats] = useState<Category[]>([]);
const [rec, setRec] = useState<PostBackedResource[]>([]);
const [latest, setLatest] = useState<PostBackedResource[]>([]);
const [latestPosts, setLatestPosts] = useState<Post[]>([]);
const [popular, setPopular] = useState<PostBackedResource[]>([]);
const [popularPosts, setPopularPosts] = useState<Post[]>([]);
const [err, setErr] = useState<string | null>(null);
const recRowRef = useRef<HTMLDivElement>(null);
const latestRowRef = useRef<HTMLDivElement>(null);
const categoryRowRef = useRef<HTMLDivElement>(null);
const [activeCategoryPage, setActiveCategoryPage] = useState(0);
const [canScrollRec, setCanScrollRec] = useState(false);
const [canScrollLatest, setCanScrollLatest] = useState(false);
const [recScroll, setRecScroll] = useState({ ratio: 1, progress: 0 });
useEffect(() => {
@@ -88,9 +81,6 @@ export function Home() {
);
const latestItems = itemsOrEmpty(l.items);
setLatestPosts(latestItems);
setLatest(
latestItems.map((post) => postToResource(post, lang, categoryItems)),
);
const popularItems = itemsOrEmpty<Post>(p.items);
setPopularPosts(popularItems);
setPopular(
@@ -139,9 +129,6 @@ export function Home() {
};
}, [lang]);
const iconKeyForResource = (r: PostBackedResource) =>
cats.find((c) => c.id === r.categoryId)?.iconKey ?? "folder";
const figmaOrderedCategories = [...cats].sort(
(a, b) => figmaCategoryRank(a) - figmaCategoryRank(b),
);
@@ -208,31 +195,6 @@ export function Home() {
recRowRef.current?.scrollBy({ left: dir * 280, behavior: "smooth" });
};
useEffect(() => {
const row = latestRowRef.current;
if (!row) {
setCanScrollLatest(false);
return;
}
const update = () => {
setCanScrollLatest(row.scrollWidth > row.clientWidth + 1);
};
update();
const resizeObserver = new ResizeObserver(update);
resizeObserver.observe(row);
row.addEventListener("scroll", update, { passive: true });
return () => {
resizeObserver.disconnect();
row.removeEventListener("scroll", update);
};
}, [latest.length]);
const scrollLatest = (dir: 1 | -1) => {
latestRowRef.current?.scrollBy({ left: dir * 360, behavior: "smooth" });
};
useEffect(() => {
if (!hash) return;
const id = hash.slice(1);
@@ -243,9 +205,8 @@ export function Home() {
});
});
return () => window.cancelAnimationFrame(frame);
}, [hash, cats.length, rec.length, latest.length, popular.length]);
}, [hash, cats.length, rec.length, latestPosts.length, popular.length]);
const latestPlaceholderCount = Math.max(0, 5 - latest.length);
const hasPopular = popular.length > 0 || popularPosts.length > 0;
const recommendedDotCount = rec.length;
const activeRecommendedDot =
@@ -446,59 +407,21 @@ export function Home() {
<Reveal>
<section id="latest" className="scroll-mt-16 md:scroll-mt-24">
<div className="px-4 md:px-0">
<SectionHeader
title={t("latestSection")}
viewAllTo="/browse"
viewAllLabel={t("viewAll")}
/>
</div>
<div className="flex flex-col gap-3 md:hidden">
{latestPosts.slice(0, 5).map((post) => (
<MessageBubble key={post.id} post={post} />
))}
</div>
<div className="relative hidden md:block">
<div
ref={latestRowRef}
className="mt-7 flex gap-4 overflow-x-auto overflow-y-hidden pb-5 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
>
{latest.map((r) => (
<div key={r.id} className="w-[340px] shrink-0 xl:w-[352px]">
<LatestUpdateRow r={r} iconKey={iconKeyForResource(r)} />
</div>
))}
{Array.from({ length: latestPlaceholderCount }).map(
(_, index) => (
<div
key={`latest-coming-soon-${index}`}
className="w-[340px] shrink-0 xl:w-[352px]"
>
<ComingSoonLatestUpdateRow index={latest.length + index} />
</div>
),
)}
<div className="mx-auto max-w-full md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
<div className="px-4 md:px-0">
<SectionHeader
title={t("latestSection")}
viewAllTo="/browse"
viewAllLabel={t("viewAll")}
/>
</div>
<div className="mt-4 flex flex-col gap-3 md:mt-7">
{latestPosts.slice(0, 5).map((post, index) => (
<Reveal key={post.id} delay={Math.min(index, 8) * 0.05}>
<MessageBubble post={post} />
</Reveal>
))}
</div>
{canScrollLatest ? (
<>
<button
type="button"
onClick={() => scrollLatest(-1)}
className="absolute left-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
aria-label="Previous latest updates"
>
<ChevronLeft className="h-5 w-5" />
</button>
<button
type="button"
onClick={() => scrollLatest(1)}
className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
aria-label="Next latest updates"
>
<ChevronRight className="h-5 w-5" />
</button>
</>
) : null}
</div>
</section>
</Reveal>