fix/notification card display#13 (#14)

* fix(extension): firefox bug shifting stream page to the left

* refactor(extension): code quality

* fix(extension): firefox bug, endless waiting for request
Fixed by adding logic for Manifest V2 which plasmo uses, as we were using client API only introduced in Manifest V3

* refactor(backend): added kick/twitch client id/secret placeholders for dev

* chore(extension): bump version to 1.2.1 in package.json and constants.ts

* refactor(extension): remove commented code

* refactor(extension): remove commented code

* fix(extension): notification display while watching on kick #13

* refactor(extension): remove testing code

* chore(extension): bump version to 1.2.2 in package.json and constants.ts

---------

Co-authored-by: Anas Mazouni <madadj4@gmail.com>

Author: aL0NEW0LF

apps/extension/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lgamila/extension",
   "displayName": "LGamila Live",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "This extension shows you a real-time list of all Moroccan Twitch and Kick streamers who are currently live.",
   "author": "Stormix <hello@stormix.dev>",
   "scripts": {

apps/extension/src/components/molecules/notification-card.tsx

@@ -1,8 +1,8 @@
-import logo from 'data-base64:~assets/logo.svg';
-import { FiTwitch, FiX } from 'react-icons/fi';
-import { RiKickLine } from 'react-icons/ri';
-import { Avatar, AvatarImage } from '../ui/avatar';
-import { Button } from '../ui/button';
+import logo from "data-base64:~assets/logo.svg";
+import { FiTwitch, FiX } from "react-icons/fi";
+import { RiKickLine } from "react-icons/ri";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import { Button } from "../ui/button";
 
 interface NotificationCardProps {
   name: string;
@@ -20,7 +20,7 @@ export function NotificationCard({
   onDismiss,
 }: NotificationCardProps) {
   return (
-    <div className="bg-background py-2 px-4 rounded-lg items-center justify-center shadow-lg w-[250px] gap-2 mx-auto flex flex-col text-foreground animate-in slide-in-from-right-full fade-in duration-500 ease-out relative">
+    <div className="bg-background py-2 px-4 rounded-lg items-center justify-center shadow-lg gap-2 mx-auto flex flex-col text-foreground animate-in slide-in-from-right-full fade-in duration-500 ease-out relative w-md min-w-md">
       <div className="flex flex-row gap-2 justify-start items-start w-full py-1">
         <img alt="logo" className="size-4" src={logo} />
         <p className="text-muted-foreground text-xs">LGamila Live</p>
@@ -35,19 +35,21 @@ export function NotificationCard({
           </button>
         )}
       </div>
-      <div className="flex flex-row gap-4 items-center">
-        <Avatar className="size-16">
-          <AvatarImage src={avatar} />
-        </Avatar>
-        <div className="flex flex-col gap-0 flex-grow">
-          <h3 className="font-medium">{name}</h3>
-          <p className="text-muted-foreground">
-            {name} is live on {platform}
-          </p>
+      <div className="flex flex-row gap-4 items-center justify-between w-full">
+        <div className="flex flex-row gap-1 items-center justify-start">
+          <Avatar className="size-16">
+            <AvatarImage src={avatar} />
+          </Avatar>
+          <div className="flex flex-col gap-0 flex-grow">
+            <h3 className="font-medium">{name}</h3>
+            <p className="text-muted-foreground">
+              {name} is live on {platform}
+            </p>
+          </div>
         </div>
         <Button
-          icon={platform === 'twitch' ? <FiTwitch /> : <RiKickLine />}
-          onClick={() => window.open(link, '_blank')}
+          icon={platform === "twitch" ? <FiTwitch /> : <RiKickLine />}
+          onClick={() => window.open(link, "_blank")}
           size="sm"
         >
           Watch Now

apps/extension/src/content.tsx

@@ -1,14 +1,14 @@
 /** biome-ignore-all lint/complexity/noExcessiveCognitiveComplexity: allow it */
-import styleText from 'data-text:./index.css';
-import { serverToClient } from '@lgamila/shared';
-import { Storage } from '@plasmohq/storage';
-import type { PlasmoCSConfig, PlasmoGetStyle } from 'plasmo';
-import { useCallback, useEffect, useState } from 'react';
-import { NotificationCard } from './components/molecules/notification-card';
-import { playNotificationSound } from './lib/audio';
-import { API_URL, NOTIFICATION_DURATION } from './lib/constants';
-import { logger } from './lib/logger';
-import type { Settings, Streamer } from './lib/types';
+import styleText from "data-text:./index.css";
+import { serverToClient } from "@lgamila/shared";
+import { Storage } from "@plasmohq/storage";
+import type { PlasmoCSConfig, PlasmoGetStyle } from "plasmo";
+import { useCallback, useEffect, useState } from "react";
+import { NotificationCard } from "./components/molecules/notification-card";
+import { playNotificationSound } from "./lib/audio";
+import { API_URL, NOTIFICATION_DURATION } from "./lib/constants";
+import { logger } from "./lib/logger";
+import type { Settings, Streamer } from "./lib/types";
 
 interface StreamerData {
   name: string;
@@ -18,7 +18,7 @@ interface StreamerData {
 }
 
 export const config: PlasmoCSConfig = {
-  matches: ['https://*.twitch.tv/*', 'https://*.kick.com/*'],
+  matches: ["https://*.twitch.tv/*", "https://*.kick.com/*"],
   all_frames: true,
 };
 
@@ -27,7 +27,7 @@ const CHECK_INTERVAL = 10_000;
 
 const getStreamer = async (
   name: string,
-  platform: 'twitch' | 'kick'
+  platform: "twitch" | "kick"
 ): Promise<Streamer[]> => {
   const response = await fetch(
     `${API_URL}/api/streamers?search=${name}&platform=${platform}`
@@ -40,10 +40,10 @@ const getStreamer = async (
 };
 
 const determinePlatform = (url: string) => {
-  if (url.includes('twitch.tv')) {
-    return 'twitch' as const;
+  if (url.includes("twitch.tv")) {
+    return "twitch" as const;
   }
-  return 'kick' as const;
+  return "kick" as const;
 };
 
 const TWITCH_URL_REGEX =
@@ -110,7 +110,7 @@ const checkAndRedirect = async () => {
       currentStreamerData.livePlatforms?.[0] ??
       currentStreamerData.livePlatform;
     const username =
-      platform === 'twitch'
+      platform === "twitch"
         ? currentStreamerData.twitchUsername
         : currentStreamerData.kickUsername;
     window.location.href = `https://www.${platform}.com/${username}`;
@@ -122,7 +122,7 @@ let checkInterval: number | null = null;
 
 const startChecking = () => {
   if (checkInterval) return;
-  logger.info('Starting auto-redirect checks');
+  logger.info("Starting auto-redirect checks");
   checkAndRedirect(); // Initial check
   checkInterval = setInterval(
     checkAndRedirect,
@@ -132,7 +132,7 @@ const startChecking = () => {
 
 const stopChecking = () => {
   if (!checkInterval) return;
-  logger.info('Stopping auto-redirect checks');
+  logger.info("Stopping auto-redirect checks");
   clearInterval(checkInterval);
   checkInterval = null;
 };
@@ -152,16 +152,16 @@ storage.watch({
 });
 
 // Initial setup based on current settings
-storage.get<Settings>('settings').then((settings) => {
+storage.get<Settings>("settings").then((settings) => {
   if (settings?.autoRedirect) {
     startChecking();
   }
 });
 
 // Notification Card
 export const getStyle: PlasmoGetStyle = () => {
-  const style = document.createElement('style');
-  style.textContent = styleText.replaceAll(':root', ':host(plasmo-csui)');
+  const style = document.createElement("style");
+  style.textContent = styleText.replaceAll(":root", ":host(plasmo-csui)");
   return style;
 };
 
@@ -186,29 +186,29 @@ export default function Root() {
     chrome.runtime.onMessage.addListener(async (message) => {
       const parsed = serverToClient.safeParse(message);
       if (!parsed.success) {
-        logger.warn('Invalid message', parsed.error);
+        logger.warn("Invalid message", parsed.error);
         return;
       }
-      if (parsed.data.type === 'streamer-live') {
+      if (parsed.data.type === "streamer-live") {
         // Check settings before showing notification
-        const settings = await storage.get<Settings>('settings');
+        const settings = await storage.get<Settings>("settings");
         const favorites =
-          (await storage.get<Streamer['id'][]>('favorites')) || [];
+          (await storage.get<Streamer["id"][]>("favorites")) || [];
         const blockedStreamers =
-          (await storage.get<Streamer['id'][]>('blocked')) || [];
+          (await storage.get<Streamer["id"][]>("blocked")) || [];
 
         // Skip if notifications are disabled
         if (settings?.notifyWhenStreamerIsLive === false) {
           logger.info(
-            'Notifications disabled, skipping content script notification'
+            "Notifications disabled, skipping content script notification"
           );
           return;
         }
 
         // Skip if streamer is blocked
         if (blockedStreamers.includes(parsed.data.data.id)) {
           logger.info(
-            'Streamer is blocked, skipping content script notification'
+            "Streamer is blocked, skipping content script notification"
           );
           return;
         }
@@ -219,7 +219,7 @@ export default function Root() {
           !favorites.includes(parsed.data.data.id)
         ) {
           logger.info(
-            'Only favorite notifications enabled and streamer is not a favorite, skipping content script notification'
+            "Only favorite notifications enabled and streamer is not a favorite, skipping content script notification"
           );
           return;
         }

apps/extension/src/index.css

@@ -44,16 +44,16 @@
   --radius: 0.5rem;
   --shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
   --shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
-  --shadow-sm:
-    1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
-  --shadow:
-    1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
-  --shadow-md:
-    1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06);
-  --shadow-lg:
-    1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06);
-  --shadow-xl:
-    1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06);
+  --shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06),
+    1px 1px 2px 0px hsl(0 0% 0% / 0.06);
+  --shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06),
+    1px 1px 2px 0px hsl(0 0% 0% / 0.06);
+  --shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06),
+    1px 2px 4px 0px hsl(0 0% 0% / 0.06);
+  --shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06),
+    1px 4px 6px 0px hsl(0 0% 0% / 0.06);
+  --shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06),
+    1px 8px 10px 0px hsl(0 0% 0% / 0.06);
   --shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15);
 
   --sb-track-color: #202020;
@@ -100,3 +100,9 @@
   right: 25px;
   left: auto;
 }
+
+#plasmo-overlay-0,
+.plasmo-csui-container {
+  right: 0px !important;
+  left: auto !important;
+}

apps/extension/src/lib/constants.ts

@@ -1,5 +1,5 @@
 export const APP_NAME = "LGamila Live";
-export const APP_VERSION = "1.2.1";
+export const APP_VERSION = "1.2.2";
 export const APP_DESCRIPTION =
   "This extension shows you a real-time list of all Moroccan Twitch and Kick streamers who are currently live.";
 export const APP_AUTHOR = "Stormix <hello@s.dev>";

apps/extension/src/popup.tsx

@@ -1,33 +1,33 @@
-import './index.css';
-import logo from 'data-base64:~assets/logo.svg';
-import { ArrowUpDown, Loader2, Search, X } from 'lucide-react';
-import { useRef, useState } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { Toaster } from '@/components/ui/sonner';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Footer } from './components/molecules/footer';
-import { SettingsDialog } from './components/molecules/settings';
-import { SortDropdown } from './components/molecules/sort-dropdown';
-import type { SortOption } from './components/molecules/streamer-list';
-import { StreamerList } from './components/molecules/streamer-list';
-import { Button } from './components/ui/button';
-import { Card, CardContent } from './components/ui/card';
-import { Input } from './components/ui/input';
-import { useSearch } from './hooks/use-search';
-import { useStreamers } from './hooks/use-streamers';
-import { APP_NAME } from './lib/constants';
-import { cn } from './lib/utils';
+import "./index.css";
+import logo from "data-base64:~assets/logo.svg";
+import { ArrowUpDown, Loader2, Search, X } from "lucide-react";
+import { useRef, useState } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { Toaster } from "@/components/ui/sonner";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Footer } from "./components/molecules/footer";
+import { SettingsDialog } from "./components/molecules/settings";
+import { SortDropdown } from "./components/molecules/sort-dropdown";
+import type { SortOption } from "./components/molecules/streamer-list";
+import { StreamerList } from "./components/molecules/streamer-list";
+import { Button } from "./components/ui/button";
+import { Card, CardContent } from "./components/ui/card";
+import { Input } from "./components/ui/input";
+import { useSearch } from "./hooks/use-search";
+import { useStreamers } from "./hooks/use-streamers";
+import { APP_NAME } from "./lib/constants";
+import { cn } from "./lib/utils";
 
 function StreamersPopup() {
   const [toggleSearch, setToggleSearch] = useState(false);
   const [showSort, setShowSort] = useState(false);
-  const [sortBy, setSortBy] = useState<SortOption>('default');
+  const [sortBy, setSortBy] = useState<SortOption>("default");
   const inputRef = useRef<HTMLInputElement>(null);
 
   const { data: streamersData, isLoading } = useStreamers();
   const streamers = streamersData?.streamers || [];
   const { search, results } = useSearch(streamers, {
-    keys: ['name', 'twitchUsername', 'kickUsername', 'category', 'title'],
+    keys: ["name", "twitchUsername", "kickUsername", "category", "title"],
     threshold: 0.3,
   });
 
@@ -44,7 +44,7 @@ function StreamersPopup() {
         <Tabs className="w-full" defaultValue="live">
           <div className="flex flex-row justify-between items-start">
             <div
-              className={cn('flex flex-row justify-start', {
+              className={cn("flex flex-row justify-start", {
                 hidden: toggleSearch || showSort,
               })}
             >
@@ -56,8 +56,8 @@ function StreamersPopup() {
             </div>
             <div
               className={cn(
-                'flex flex-row justify-center gap-2',
-                (toggleSearch || showSort) && 'w-full'
+                "flex flex-row justify-center gap-2",
+                (toggleSearch || showSort) && "w-full"
               )}
             >
               <Button