fix

frontend/src/network/index.ts

@@ -23,8 +23,8 @@ type BaseRequestParams = Partial<{
     method: "GET" | "POST" | "DELETE";
 }>;
 
-// export const base = "https://haystack.johncosta.tech";
-export const base = "http://john-desktop:3040";
+export const base = "https://haystack.johncosta.tech";
+// export const base = "http://192.168.1.199:3040";
 
 const getBaseRequest = ({ path, body, method }: BaseRequestParams): Request => {
     return new Request(`${base}/${path}`, {
@@ -42,25 +42,42 @@ export const getAccessToken = async (): Promise<string> => {
     const refreshToken = localStorage.getItem("refresh")?.toString();
 
     if (accessToken == null && refreshToken == null) {
-        throw new Error("your are not logged in")
+        throw new Error("you are not logged in")
     }
 
-    const isValidAccessToken = accessToken != null && getTokenProperties(accessToken).exp.getTime() * 1000 > Date.now()
+    // FIX: Check what getTokenProperties returns
+    const tokenProps = getTokenProperties(accessToken!);
+
+    // If tokenProps.exp is a number (seconds), convert to milliseconds:
+    const expiryTime = typeof tokenProps.exp === 'number'
+        ? tokenProps.exp * 1000  // Convert seconds to milliseconds
+        : tokenProps.exp.getTime(); // Already a Date object
+
+    const isValidAccessToken = accessToken != null && expiryTime > Date.now();
+
+    console.log('Token check:', {
+        expiryTime: new Date(expiryTime),
+        now: new Date(),
+        isValid: isValidAccessToken,
+        timeLeft: (expiryTime - Date.now()) / 1000 + 's'
+    });
 
     if (!isValidAccessToken) {
+        console.log('Refreshing token...');
         const newAccessToken = await fetch(getBaseRequest({
-            path: 'auth/refresh', method: "POST", body: JSON.stringify({
+            path: 'auth/refresh',
+            method: "POST",
+            body: JSON.stringify({
                 refresh: refreshToken,
             })
         })).then(r => r.json());
 
         const { access } = parse(refreshTokenValidator, newAccessToken);
-
         localStorage.setItem("access", access);
-        accessToken = access
+        accessToken = access;
     }
 
-    return accessToken!
+    return accessToken!;
 }
 
 const getBaseAuthorizedRequest = async ({

frontend/src/pages/front/gallery.tsx

@@ -39,7 +39,7 @@ export const Categories: Component = () => {
     return (
         <div class="rounded-xl bg-white p-4 flex flex-col gap-2">
             <h2 class="text-xl font-bold">Generated stacks</h2>
-            <div class="w-full grid grid-cols-3 auto-rows-[minmax(100px,1fr)] gap-4">
+            <div class="w-full grid grid-cols-1 md:grid-cols-3 auto-rows-[minmax(100px,1fr)] gap-4">
                 <For each={stacks()}>{(stack) => <StackCard stack={stack} />}</For>
             </div>
 

frontend/src/pages/front/recent.tsx

@@ -18,7 +18,7 @@ export const Recent: Component = () => {
     return (
         <div class="rounded-xl bg-white p-4 flex flex-col gap-2">
             <h2 class="text-xl font-bold">Recent Screenshots</h2>
-            <div class="grid grid-cols-3 gap-4 place-items-center">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 place-items-center">
                 <For each={latestImages()}>
                     {(image) => <ImageComponent ID={image.ID} onDelete={onDeleteImage} />}
                 </For>