chore(release): add release workflow, update docs, RTK tags, UI perf improvements

[arbisoft-qaisarirfan]

🚀 Description

Set up automated release process with release-it and GitHub Actions. Optimize Dockerfile for better caching/layers. Sync docs with recent changes. Add perf improvements (dynamic page imports, Next Image blur, RTK tags). Bump to v1.3.0.

📌 Summary

Prepares production-ready release tooling, container optimization, comprehensive docs refresh, and targeted perf/UI enhancements for better loading and DX.

🔧 Changes Implemented

• ✅ Add .github/workflows/release.yml for auto-release on dev→main merge
• ✅ Add .release-it.json for conventional changelog & GitHub releases (no npm publish)
• ✅ Optimize Dockerfile: multi-stage deps caching, standalone output
• ✅ Update docs/*: ARCHITECTURE.md, deployment-and-release.md, etc. (reflect perf, virtuoso, RTK tags, release flow)
• ✅ Dynamic imports: HomePage, VideoDetail, VideosListingPage, SearchResultsPage
• ✅ VideoCard: Next Image w/ blur/placeholder, remove hover video (perf), React.memo, test/snapshot updates
• ✅ EmptyState: use Next Image
• ✅ Theme: font display: swap
• ✅ RTK: add tagTypes/providesTags for Event/Tag/Playlist/Recommendation
• ✅ Hooks: useVideoQueryManager page reset fix w/ ref
• ✅ VideosListingPage: auto refetchOnMountOrArgChange
• ✅ Config: next.config.js images *, .prettierrc remove deprecated, tsconfig.json remove baseUrl
• ✅ New BLUR_DATA_URI, package.json/lock v1.3.0

🛠️ How It Works?

1. Release: On dev→main PR merge, workflow runs npm run release --ci: bumps version, commits/tags, updates CHANGELOG.md, creates GH release.
2. Docker: deps stage caches node_modules, builder reuses, runner lightweight standalone.
3. Perf: Dynamic imports code-split pages; Next Image optimizes/remote lazy w/ blur; no hover video reduces initial load.
4. RTK: Tags enable future invalidation; query manager resets page=1 on filter changes.
5. Docs: Synced w/ virtuoso removal?, RTK updates, release process.

Edge cases: Release skips if not dev→main; Docker build args for NEXT_PUBLIC_*; images allow all hostnames (review security).

✅ Checklist Before Merging

• Test docker build . & docker-compose up
• Verify npm run release --ci --dry-run changelog
• Check dynamic imports bundle sizes (next build)
• Confirm docs accuracy (e.g., virtuoso still used?)
• RTK tags don't break queries
• Prettier/ESLint pass
• No console errors on page loads/VideoCard hover

📸 Screenshots (if applicable)

N/A (configs/docs/perf)

🔗 Related Issues

https://projects.arbisoft.com/arbisoft/browse/ARBISOFTSESS-189/

📢 Notes for Reviewers

• Test release workflow manually via PR dev→main.
• images remotePatterns: "*" broad—restrict if possible post-localhost/prod.
• VideoCard hover video removed (perf/simplicity)—re-add if UX needed.
• Version bump included—release-it will handle future.
• Docs updated extensively—spot-check sections like deployment/release.

[Copilot]

Pull request overview

This PR focuses on performance-oriented refactors across the Next.js app: replacing react-virtuoso with a native IntersectionObserver infinite scroll, tightening RTK Query caching primitives (tag types + providesTags), optimizing Docker builds, and improving image/font loading behavior.

Changes:

• Replace react-virtuoso virtualization with a custom infinite scroll hook and adjust pagination/query-reset behavior.
• Introduce RTK Query tagTypes and add providesTags to events-related endpoints.
• Optimize image loading (Next/Image + blur placeholder), introduce code-splitting via dynamic imports, and update Docker build stages + docs.

Reviewed changes

Copilot reviewed 22 out of 23 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/redux/events/apiSlice.ts	Adds providesTags to event-related queries to support tag-based caching.
src/redux/baseApi.tsx	Defines RTK Query tagTypes for events/tags/playlists/recommendations.
src/hooks/useVideoQueryManager.ts	Updates pagination reset logic and query param handling for listings.
src/hooks/useInfiniteScroll.ts	New IntersectionObserver-based load-more hook.
src/features/VideosListingPage/videosListingPage.tsx	Removes Virtuoso grid; implements native infinite scroll + useGetEventsQuery usage.
src/features/VideosListingPage/styled.tsx	Simplifies grid styling to apply directly on the container.
src/features/VideosListingPage/skeletonLoader.tsx	Adjusts skeleton layout to match new grid container styling.
src/constants/images.ts	Adds a shared blur placeholder data URI constant.
src/components/theme/theme-provider.tsx	Sets font display: "swap" for Inter/Roboto Condensed.
src/components/VideoCard/videoCard.tsx	Migrates thumbnail rendering to Next/Image, removes hover-preview video, memoizes component.
src/components/VideoCard/videoCard.test.tsx	Removes hover-preview tests and updates imports accordingly.
src/components/VideoCard/snapshots/videoCard.test.tsx.snap	Updates snapshot output for Next/Image rendering changes.
src/components/EmptyState/emptyState.tsx	Switches empty-state image rendering to Next/Image.
src/app/videos/results/page.tsx	Uses dynamic import for SearchResultsPage for code splitting.
src/app/videos/page.tsx	Uses dynamic import for VideosListingPage for code splitting.
src/app/videos/[videoId]/page.tsx	Uses dynamic import for VideoDetail for code splitting.
src/app/page.tsx	Uses dynamic import for HomePage for code splitting.
next.config.js	Broadens Next/Image remotePatterns to allow any hostname.
docs/state-management-and-api-layer.md	Updates RTK Query tagTypes and notes on tag-based caching.
docs/project-overview.md	Updates helper libs list after removing react-virtuoso.
docs/deployment-and-release.md	Updates Docker multi-stage + caching documentation.
docs/ARCHITECTURE.md	Removes now-outdated note about empty tagTypes.
Dockerfile	Refactors to a 3-stage build with cache mounts and a corrected runtime CMD.

Comments suppressed due to low confidence (1)

src/hooks/useVideoQueryManager.ts:48

• prevParamsRef + page: paramsChanged ? 1 : page prevents stale page numbers from being sent after a filter change, but it also means page state can be incremented (via infinite scroll) while paramsChanged is still true, and those increments won’t affect the query arg until after the effect updates prevParamsRef. This can lead to jumping directly to later pages once paramsChanged flips false. Consider exposing an isResetting flag (paramsChanged) to disable load-more until the reset effect runs, or update the “previous params” synchronously when detecting a change.

  const prevParamsRef = useRef<typeof parsedParams | null>(null);

  useEffect(() => {
    setPage(1);
    prevParamsRef.current = parsedParams;
  }, [parsedParams.tag, parsedParams.playlist, parsedParams.search, parsedParams.order, parsedParams.year]);

  const apiParams = useMemo(() => {
    const prevParams = prevParamsRef.current;
    const paramsChanged =
      !prevParams ||
      prevParams.tag !== parsedParams.tag ||
      prevParams.playlist !== parsedParams.playlist ||
      prevParams.search !== parsedParams.search ||
      prevParams.order !== parsedParams.order ||
      prevParams.year !== parsedParams.year;

    return parseNonPassedParams({
      ...defaultParams,
      page: paramsChanged ? 1 : page,
      page_size: 12,
      ordering: parsedParams.order ? [parsedParams.order] : ["-event_time"],
      search: parsedParams.search ?? undefined,
      tag: parsedParams.search ? "" : (parsedParams.tag ?? ""),
      playlist: parsedParams.search ? "" : (parsedParams.playlist ?? ""),
      event_time_after: parsedParams.year ? format(startOfYear(new Date(parsedParams.year)), "yyyy-MM-dd") : undefined,

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[farhan2742]

LGTM