9 rework desktop and mobile UI (#10)

* feat: enhance video filtering and layout features

- Added support for timeframe filtering in video queries, allowing users to filter videos by recent, weekly, monthly, quarterly, and yearly views.
- Introduced a new `FilterModal` component for mobile devices to manage video filters more effectively.
- Updated the `Sidebar` component to include timeframe selection alongside duration filters.
- Enhanced the `VideosGrid` component to integrate the new filtering options and display active filters.
- Refactored various components to improve layout and responsiveness, ensuring a better user experience across devices.
- Added utility functions for managing filter states and URL parameters.

* refactor: streamline layout and enhance component structure

- Removed unnecessary props from the `Layout` and `Header` components, simplifying their interfaces.
- Introduced a new `StreamInfoComponent` for better separation of concerns in displaying stream information.
- Updated the `Sidebar` to include mobile-friendly components and improved social links section.
- Enhanced the `VideosGrid` layout for better responsiveness and visual consistency.
- Refactored CSS styles for improved clarity and organization, including custom scrollbar styling.
- Added new utility classes for better control over layout and spacing.

* fix: drawer on safari

* fix: drawer on mobile

* fix: update drawer height for mobile responsiveness

* fix: update CSS styles and improve filter modal layout

* feat: add support for 3xl breakpoint and enhance layout for large screens

* feat: enhance filter modal and sidebar with new utility classes

- Updated FilterModal to reflect active sorting state with visual indicators.
- Simplified the rendering of active filter counts in both FilterModal and Sidebar, replacing larger indicators with smaller, consistent visual cues.

* feat: enhance CSS styles and update header and sidebar components

* fix: update GitHub link in header and sidebar components

* feat: update Tailwind CSS breakpoints and enhance layout responsiveness

- Adjusted the '2xl' and '3xl' breakpoints in tailwind.config.js for improved layout on larger screens.
- Enhanced various UI components for better spacing and alignment, including the header, sidebar, and videos grid.

* chore: remove unused API route files for Turso Prisma queries

* feat: enhance video grid item display

- Improved date formatting in VideoGridItem to show "today" and "yesterday" labels.
- Adjusted layout in VideosGrid for better responsiveness and consistency.

* fix: adjust thumbnail dimensions in VideoGridItem for consistency

* Update README.md

* Update README.md

* feat: implement dark mode support and enhance CSS styles

- Changed dark mode configuration in tailwind.config.js to use 'selector'.
- Added media query listener in App component to toggle dark mode based on user preference.
- Removed unused ContentHeader component and cleaned up sidebar styles for consistency.

Author: chrcit

README.md

@@ -1,6 +1,6 @@
 # Hasanhub
 
-![CleanShot 2024-11-06 at 00 14 23](https://github.com/user-attachments/assets/7df9a391-b909-4606-9a6d-03bc49d6bd9e)
+![Screenvideo of Hasanhub on desktop](https://github.com/user-attachments/assets/a539fd5d-7cf6-4ffc-a8f0-f6797aeebe74)
 
 ## Important Note
 
@@ -49,13 +49,3 @@ Syncing needs to be setup via Cron jobs (or similiar) by hitting the API routes
 
 For sure! If you do pls [let me know](https://twitter.com/chrcit) so I can check it out.
 I'd also love a backlink to [my website](https://chrcit.com/projects/hasanhub-com?utm_source=github-hasanhub) somewhere on the site if you are awesome!
-
-## Random stuff
-
-## Refresh Twitch access token
-
-```bash
-curl -X POST 'https://id.twitch.tv/oauth2/token' \
--H 'Content-Type: application/x-www-form-urlencoded' \
--d 'client_id=ttsgjnui5mqji4aqjvzahh3mrlyzy3&client_secret=[CLIENT_SECRET]&grant_type=client_credentials'
-```

app/hooks/use-action-url.ts

@@ -1,5 +1,5 @@
 import useUrlState from "~/hooks/use-url-state";
-import type { DurationType } from "~/utils/validators";
+import type { DurationType, TimeframeType } from "~/utils/validators";
 import type { OrderByType, OrderDirectionType } from "../utils/validators";
 
 const useActionUrl = () => {
@@ -9,6 +9,7 @@ const useActionUrl = () => {
     action: {
       tagSlugs?: string[];
       durations?: DurationType[];
+      timeframe?: TimeframeType;
       ordering?: { by?: OrderByType; order?: OrderDirectionType };
       lastVideoId?: number;
     },
@@ -34,6 +35,10 @@ const useActionUrl = () => {
       searchParams.append("durations", duration);
     });
 
+    if (merged.timeframe) {
+      searchParams.append("timeframe", merged.timeframe);
+    }
+
     if (merged.ordering.order && merged.ordering.order !== "desc") {
       searchParams.append("order", merged.ordering.order);
     }

app/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

app/hooks/use-url-state.ts

@@ -3,10 +3,15 @@ import { useEffect, useState } from "react";
 import type {
   LastVideoIdType,
   DurationListType,
+  TimeframeType,
   OrderByType,
   OrderDirectionType,
 } from "../utils/validators";
-import { UrlParamsSchema, DurationListValidator } from "../utils/validators";
+import {
+  UrlParamsSchema,
+  DurationListValidator,
+  TimeframeValidator,
+} from "../utils/validators";
 
 const getTagSlugsFromPathname = (location?: string | null) => {
   if (location === null || location === undefined) {
@@ -20,6 +25,7 @@ type UrlStateType = {
   tagSlugs: string[];
   lastVideoId?: LastVideoIdType;
   durations?: DurationListType;
+  timeframe?: TimeframeType;
   ordering: {
     by: OrderByType;
     order: OrderDirectionType;
@@ -34,6 +40,12 @@ const useUrlState = () => {
     tagSlugs: getTagSlugsFromPathname(location?.pathname),
     durations:
       DurationListValidator.parse(searchParams.getAll("durations")) ?? null,
+    timeframe: (() => {
+      const timeframeParam = searchParams.get("timeframe");
+      return timeframeParam
+        ? TimeframeValidator.parse(timeframeParam)
+        : undefined;
+    })(),
     ordering: {
       order: "desc",
       by: "publishedAt",
@@ -53,21 +65,25 @@ const useUrlState = () => {
       transition?.location?.pathname
     );
 
-    const { order, durations, by, lastVideoId } = UrlParamsSchema.parse({
-      order: searchParams.get("order") ?? undefined,
-      durations: searchParams.getAll("durations"),
-      by: searchParams.get("by") ?? undefined,
-      lastVideoId: lastVideoIdParam ? parseInt(lastVideoIdParam) : undefined,
-    });
+    const { order, durations, timeframe, by, lastVideoId } =
+      UrlParamsSchema.parse({
+        order: searchParams.get("order") ?? undefined,
+        durations: searchParams.getAll("durations"),
+        timeframe: searchParams.get("timeframe"),
+        by: searchParams.get("by") ?? undefined,
+        lastVideoId: lastVideoIdParam ? parseInt(lastVideoIdParam) : undefined,
+      });
 
     const {
       order: nextOrder,
       durations: nextDurations,
+      timeframe: nextTimeframe,
       by: nextBy,
       lastVideoId: nextLastVideoId,
     } = UrlParamsSchema.parse({
       order: nextSearchParams.get("order") ?? undefined,
       durations: nextSearchParams.getAll("durations"),
+      timeframe: nextSearchParams.get("timeframe"),
       by: nextSearchParams.get("by") ?? undefined,
       lastVideoId: nextLastVideoIdParam
         ? parseInt(nextLastVideoIdParam)
@@ -76,6 +92,7 @@ const useUrlState = () => {
 
     setUrlState({
       durations: nextDurations?.length !== 0 ? nextDurations : durations,
+      timeframe: nextTimeframe ?? timeframe,
       ordering: {
         order: nextOrder ?? order ?? "desc",
         by: nextBy ?? by ?? "publishedAt",

app/lib/get-videos.ts

@@ -1,9 +1,14 @@
 import { z } from "zod";
 import { publishStatus, videoSyncStatus } from "~/utils/dbEnums";
 import { prisma } from "~/utils/prisma.server";
-import type { DurationListType, LastVideoIdType } from "~/utils/validators";
+import type {
+  DurationListType,
+  TimeframeType,
+  LastVideoIdType,
+} from "~/utils/validators";
 import {
   DurationListValidator,
+  TimeframeValidator,
   LastVideoIdValidator,
   OrderByValdiator,
   OrderDirectionValidator,
@@ -25,11 +30,12 @@ const GetVideosValidator = z.object({
   by: OrderByValdiator,
   order: OrderDirectionValidator,
   durations: z.optional(DurationListValidator),
+  timeframe: z.optional(TimeframeValidator),
   lastVideoId: LastVideoIdValidator,
 });
 
 const getVideos = async (params: GetVideosArgs) => {
-  const { order, durations, by, lastVideoId, tagSlugs, take } =
+  const { order, durations, timeframe, by, lastVideoId, tagSlugs, take } =
     GetVideosValidator.parse(params);
 
   let conditions: {
@@ -76,6 +82,16 @@ const getVideos = async (params: GetVideosArgs) => {
     }
   }
 
+  if (timeframe) {
+    const earliestDate = getDateRangeForTimeframe(timeframe);
+    if (earliestDate) {
+      conditions["publishedAt"] = {
+        ...conditions["publishedAt"],
+        gte: earliestDate,
+      };
+    }
+  }
+
   return await prisma.$transaction([
     prisma.video.findMany({
       select: {
@@ -135,4 +151,23 @@ const getMinxMaxForTimeFilter = (durations?: DurationListType) => {
   });
 };
 
+const getDateRangeForTimeframe = (timeframe: TimeframeType) => {
+  const now = new Date();
+
+  switch (timeframe) {
+    case "recent": // Last 24h
+      return new Date(now.getTime() - 24 * 60 * 60 * 1000);
+    case "week": // Last week
+      return new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+    case "month": // Last month
+      return new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+    case "quarter": // Last quarter (3 months)
+      return new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000);
+    case "year": // Last year
+      return new Date(now.getTime() - 365 * 24 * 60 * 60 * 1000);
+    default:
+      return null;
+  }
+};
+
 export default getVideos;

app/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

app/root.tsx

@@ -1,5 +1,4 @@
-import type { LoaderFunction, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import {
   isRouteErrorResponse,
   Links,
@@ -8,12 +7,11 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-  useLoaderData,
   useRouteError,
 } from "@remix-run/react";
+import { useEffect } from "react";
 import Layout from "./ui/layout";
 import styles from "./styles/app.css";
-import { getStreamInfo } from "./lib/get-stream-info.server";
 
 export const meta: MetaFunction = () => ({
   charset: "utf-8",
@@ -74,38 +72,33 @@ export function links() {
   ];
 }
 
-export async function loader() {
-  const [streamInfo, schedule] = await getStreamInfo();
+function App() {
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
-  return json(
-    {
-      streamInfo: streamInfo.data?.length
-        ? {
-            user_login: streamInfo.data[0].user_login,
-            user_name: streamInfo.data[0].user_name,
-            title: streamInfo.data[0].title,
-          }
-        : null,
-      schedule: schedule.data?.segments.length
-        ? {
-            broadcaster_login: schedule.data.broadcaster_login,
-            broadcaster_name: schedule.data.broadcaster_name,
-            start_time: schedule.data.segments[0].start_time,
-            title: schedule.data.segments[0].title,
-          }
-        : null,
-    },
-    {
-      status: 200,
-      headers: {
-        "Cache-Control": "max-age=60, s-maxage=60, stale-while-revalidate=360",
-      },
+    const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
+      console.log("handleChange", e.matches);
+      if (e.matches) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    };
+
+    // Set initial state
+    handleChange(mediaQuery);
+
+    // Listen for changes
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
     }
-  );
-}
 
-function App() {
-  const { streamInfo, schedule } = useLoaderData<typeof loader>();
+    return () => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", handleChange);
+      }
+    };
+  }, []);
 
   return (
     <html lang="en">
@@ -119,7 +112,7 @@ function App() {
         <meta name="og:image" content="https://hasanhub.com/og.png" />
       </head>
       <body>
-        <Layout streamInfo={streamInfo} streamSchedule={schedule}>
+        <Layout>
           <Outlet />
         </Layout>
         <ScrollRestoration />

app/routes/[robots.txt].tsx

@@ -1,3 +1,5 @@
+import { cacheHeader } from "pretty-cache-header";
+
 export const loader = async () => {
   const block = `Sitemap: https://hasanhub.com/sitemap.xml
     Allow: /$
@@ -19,7 +21,10 @@ ${block}
   return new Response(robotText, {
     status: 200,
     headers: {
-      "Cache-Control": "max-age=0, s-maxage=86400",
+      "Cache-Control": cacheHeader({
+        maxAge: "0s",
+        sMaxage: "1day",
+      }),
       "Content-Type": "text/plain",
     },
   });

app/routes/[sitemap.xml].tsx

@@ -1,3 +1,4 @@
+import { cacheHeader } from "pretty-cache-header";
 import { prisma } from "~/utils/prisma.server";
 
 export const loader = async () => {
@@ -29,7 +30,10 @@ export const loader = async () => {
   return new Response(sitemap, {
     status: 200,
     headers: {
-      "Cache-Control": "max-age=0, s-maxage=86400",
+      "Cache-Control": cacheHeader({
+        maxAge: "0s",
+        sMaxage: "1day",
+      }),
       "Content-Type": "application/xml",
       "xml-version": "1.0",
       encoding: "UTF-8",