pull to refresh

client/app/components/navbar.tsx

@@ -31,7 +31,7 @@ function Navbar() {
 	const { user, unreadNotifications } = useGlobalCtx();
 
 	return (
-		<header className="container mx-auto border-b border-zinc-200 dark:border-zinc-800 mb-4 sticky top-0 bg-zinc-50 dark:bg-neutral-900 z-10">
+		<header className="container mx-auto border-b border-zinc-200 dark:border-zinc-800 sticky top-0 bg-zinc-50 dark:bg-neutral-900 z-10">
 			<div className="rounded-xl py-2">
 				<div className="flex justify-between items-center">
 					<div>

client/app/root.tsx

@@ -55,7 +55,6 @@ export default function App() {
 
 	React.useEffect(() => {
 		if (scheme === "light") {
-			// dynamically change meta theme-color
 			document
 				.querySelector('meta[name="theme-color"]')
 				?.setAttribute("content", "#FAFAFA");

client/app/routes/discussions.tsx

@@ -4,7 +4,13 @@ import {
 	MetaFunction,
 	json,
 } from "@remix-run/node";
-import { Link, useFetcher, useLoaderData, useLocation } from "@remix-run/react";
+import {
+	Link,
+	useFetcher,
+	useLoaderData,
+	useLocation,
+	useRevalidator,
+} from "@remix-run/react";
 import React from "react";
 import { TagsFilter } from "~/components/tags-filter";
 import { PostInput } from "~/components/post-input";
@@ -20,6 +26,7 @@ import { DiscussionsEmpty } from "~/components/discussions-empty";
 import { renderSummary } from "~/lib/render-summary.server";
 import { createTagsQuery } from "~/lib/create-tags-query";
 import { includeVotes } from "~/lib/include-votes";
+import PullToRefresh from "pulltorefreshjs";
 
 const PAGE_SIZE = 50;
 
@@ -74,9 +81,31 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 export default function Discussions() {
 	const { posts } = useLoaderData<typeof loader>();
 	const { user } = useGlobalCtx();
+	const revalidator = useRevalidator();
+
+	const contentRef = React.useRef<HTMLDivElement>(null);
+
+	React.useEffect(() => {
+		if (!contentRef.current) {
+			return;
+		}
+
+		PullToRefresh.init({
+			mainElement: contentRef.current,
+			onRefresh() {
+				return new Promise((resolve) => {
+					revalidator.revalidate();
+					setTimeout(resolve, 1500);
+				});
+			},
+			iconRefreshing: `<div class="i-svg-spinners-180-ring-with-bg text-xl inline-block" />`,
+		});
+
+		return PullToRefresh.destroyAll;
+	}, [revalidator]);
 
 	return (
-		<div className="container mx-auto min-h-[60vh]">
+		<div className="container mx-auto min-h-[60vh] pt-2" ref={contentRef}>
 			<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
 				<div className="col-span-1" />
 

client/app/routes/events.tsx

@@ -53,7 +53,7 @@ export default function Events() {
 	const { user } = useGlobalCtx();
 
 	return (
-		<div className="container mx-auto min-h-[60vh]">
+		<div className="container mx-auto min-h-[60vh] pt-4">
 			<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
 				<div className="col-span-1 lg:col-start-2 lg:col-span-2">
 					<h1 className="font-bold text-xl">Events</h1>

client/app/routes/library.tsx

@@ -197,7 +197,7 @@ export default function Library() {
 	const editMode = Boolean($files.length);
 
 	return (
-		<div className="min-h-[60vh] container mx-auto">
+		<div className="min-h-[60vh] container mx-auto pt-4">
 			<div className="grid grid-cols-1 md:grid-cols-5">
 				<div className="col-span-1 md:col-span-3 md:col-start-2">
 					<div className="flex">

client/app/routes/manifest[.]webmanifest.ts

@@ -9,7 +9,7 @@ export const loader = async () => {
 		{
 			short_name: appName,
 			name: appName,
-			start_url: "/?version=2",
+			start_url: "/",
 			display: "standalone",
 			background_color: "#ffffff",
 			display_override: ["fullscreen"],

client/app/routes/timetable.tsx

@@ -33,7 +33,7 @@ export default function Timetable() {
 	const { programmes } = useLoaderData<typeof loader>();
 
 	return (
-		<div className="container mx-auto min-h-[70vh]">
+		<div className="container mx-auto min-h-[70vh] pt-4">
 			<div className="grid grid-cols-1 lg:grid-cols-5">
 				<div className="col-span-1 lg:col-start-2 lg:col-span-2">
 					<TimetableFilter programmes={programmes} />

client/app/routes/timetable_.$year.$programme.$level.$sem.$day.tsx

@@ -113,7 +113,7 @@ export default function TimeTable() {
 	const minutes = _minutes - hours * 60;
 
 	return (
-		<div className="container mx-auto">
+		<div className="container mx-auto pt-4">
 			<div className="grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-6 gap-4 min-h-[70vh]">
 				<div
 					className={clsx(

client/app/style.css

@@ -170,4 +170,21 @@ input {
   100% {
     opacity: 1;
   }
+}
+
+.ptr--ptr {
+  @apply bg-zinc-100 dark:bg-neutral-800 border-b dark:border-neutral-700;
+  box-shadow: none !important;
+}
+
+.ptr--box {
+  @apply !pb-1 !pt-2;
+}
+
+.ptr--icon {
+  @apply !dark:text-neutral-400;
+}
+
+.ptr--text {
+  @apply !dark:text-neutral-500 font-medium;
 }

client/package.json

@@ -36,6 +36,7 @@
     "multer-s3": "^3.0.1",
     "posthog-js": "^1.101.0",
     "prisma": "^5.8.1",
+    "pulltorefreshjs": "^0.1.22",
     "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

yarn.lock

@@ -9444,6 +9444,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+pulltorefreshjs@^0.1.22:
+  version "0.1.22"
+  resolved "https://registry.yarnpkg.com/pulltorefreshjs/-/pulltorefreshjs-0.1.22.tgz#ddb5e3feee0b2a49fd46e1b18e84fffef2c47ac0"
+  integrity sha512-haxNVEHnS4NCQA7NeG7TSV69z4uqy/N7nfPRuc4dPWe8H6ygUrMjdNeohE+6v0lVVX/ukSjbLYwPUGUYtFKfvQ==
+
 pump@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"