chore: Update dependencies and remove sync-fetch from theme API

package.json

@@ -36,7 +36,6 @@
     "react-markdown": "^9.0.1",
     "react-spring": "^9.7.4",
     "styled-components": "^6.1.12",
-    "sync-fetch": "^0.5.2",
     "tailwind-merge": "^2.5.1",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"

src/app/themes/[theme]/page.tsx

@@ -5,11 +5,11 @@ import ThemePage from "@/components/theme-page";
 import { getThemeFromId } from "@/lib/themes";
 import { useParams } from "next/navigation";
 
-export default function ThemeInfoPage() {
+export default async function ThemeInfoPage() {
   const params = useParams<{ theme: string }>();
   const { theme: themeID } = params;
 
-  const theme = getThemeFromId(themeID);
+  const theme = await getThemeFromId(themeID);
   if (!theme) {
     return <div>Theme not found</div>;
   }

src/components/marketplace.tsx

@@ -9,7 +9,7 @@ export default function MarketplacePage() {
   const [themes, setThemes] = React.useState<ZenTheme[]>([]);
 
   React.useEffect(() => {
-    setThemes(getAllThemes());
+    getAllThemes().then(setThemes);
   }, []);
 
   return (

src/components/theme-page.tsx

@@ -8,7 +8,7 @@ import { ChevronLeft, MoveLeftIcon } from "lucide-react";
 export default function ThemePage({ theme }: { theme: ZenTheme }) {
   const [readme, setReadme] = useState<string | null>(null);
   useEffect(() => {
-    setReadme(getThemeMarkdown(theme));
+    getThemeMarkdown(theme).then(setReadme);
   }, []);
 
   return (
@@ -35,10 +35,10 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
         <p id="install-theme-error" className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
       </div>
       <hr className="block my-4 lg:hidden" />
-      <div className="flex flex-col p-5 !pt-0 max-w-xl w-full">
+      <div className="flex flex-col p-5 !pt-0 max-w-xl min-w-xl w-full">
         <div className="flex my-2 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
-          <ChevronLeft className="w-6 h-6 mr-1" />
-          <h3 className="text-lg font-bold">Go back</h3>
+          <ChevronLeft className="w-4 h-4 mr-1" />
+          <h3 className="text-md">Go back</h3>
         </div>
         <div id="policy">
           <Markdown>{`${readme}`}</Markdown>

src/lib/themes.ts

@@ -1,4 +1,3 @@
-import fetch from "sync-fetch";
 
 export interface ZenTheme {
   name: string
@@ -15,12 +14,12 @@ export interface ZenTheme {
 }
 
 const THEME_API = "https://zen-browser.github.io/theme-store/themes.json";
-const CACHE_OPTIONS = {};
+const CACHE_OPTIONS = { cache: "force-cache" } as RequestInit;
 
-export function getAllThemes(): ZenTheme[] {
+export async function getAllThemes() {
   // Fetch from the API
-  const response = fetch(THEME_API, CACHE_OPTIONS);
-  const themes = response.json();
+  const response = await fetch(THEME_API, CACHE_OPTIONS);
+  const themes = await response.json();
   // transform in to a ZenTheme[] as it is currently an object
   let themesArray: ZenTheme[] = [];
   for (let key in themes) {
@@ -33,12 +32,12 @@ export function getThemesFromSearch(themes: ZenTheme[], query: string): ZenTheme
   return themes.filter((theme) => theme.name.toLowerCase().includes(query.toLowerCase()));
 }
 
-export function getThemeFromId(id: string): ZenTheme | undefined {
-  return getAllThemes().find((theme) => theme.id === id);
+export async function getThemeFromId(id: string) {
+  return (await getAllThemes()).find((theme) => theme.id === id);
 }
 
-export function getThemeMarkdown(theme: ZenTheme): string {
-  return fetch(theme.readme, CACHE_OPTIONS).text();
+export async function getThemeMarkdown(theme: ZenTheme) {
+  return (await fetch(theme.readme, CACHE_OPTIONS)).text();
 }
 
 export function getThemeAuthorLink(theme: ZenTheme): string {