feat(auth): enhance error handling for token expiration and unauthorized access

k-tv-frontend/app/(main)/guide/page.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useQuery } from "@tanstack/react-query";
 import { Tv } from "lucide-react";
-import { api } from "@/lib/api";
+import { api, ApiRequestError } from "@/lib/api";
 import { useChannels } from "@/hooks/use-channels";
 import { useAuthContext } from "@/context/auth-context";
 import type { ChannelResponse, ScheduledSlotResponse } from "@/lib/types";
@@ -43,16 +43,17 @@ function slotLabel(slot: ScheduledSlotResponse) {
 // ---------------------------------------------------------------------------
 
 function ChannelRow({ channel }: { channel: ChannelResponse }) {
-  const { token } = useAuthContext();
+  const { token, isLoaded } = useAuthContext();
 
-  const { data: slots, isError, isPending } = useQuery({
-    queryKey: ["guide-epg", channel.id],
+  const { data: slots, isError, error, isPending, isFetching } = useQuery({
+    queryKey: ["guide-epg", channel.id, token],
     queryFn: () => {
       const now = new Date();
       const from = now.toISOString();
       const until = new Date(now.getTime() + 4 * 60 * 60 * 1000).toISOString();
       return api.schedule.getEpg(channel.id, token ?? "", from, until);
     },
+    enabled: isLoaded,
     refetchInterval: 30_000,
     retry: false,
   });
@@ -117,8 +118,10 @@ function ChannelRow({ channel }: { channel: ChannelResponse }) {
               />
             </div>
           </div>
-        ) : isPending ? (
+        ) : isPending && isFetching ? (
           <p className="text-xs italic text-zinc-600">Loading…</p>
+        ) : isError && error instanceof ApiRequestError && error.status === 401 ? (
+          <p className="text-xs italic text-zinc-600">Sign in to view this channel</p>
         ) : (
           <p className="text-xs italic text-zinc-600">
             {isError || !slots?.length