Add apps page

src/assets/apps.json

@@ -0,0 +1,86 @@
+[
+    {
+        "name": "Google",
+        "author": "Alphabet Inc.",
+        "description": "Search, browse, and discover information with ease.",
+        "icon": "/apps/google.jpg",
+        "url": "https://www.google.com"
+    },
+    {
+        "name": "Youtube",
+        "author": "Alphabet Inc.",
+        "description": "Watch, share, and enjoy videos anytime, anywhere.",
+        "icon": "/apps/youtube.png",
+        "url": "https://www.youtube.com"
+    },
+    {
+        "name": "Spotify",
+        "author": "Spotify",
+        "description": "Discover, stream, and enjoy endless music.",
+        "icon": "/apps/spotify.png",
+        "url": "https://open.spotify.com"
+    },
+    {
+        "name": "X (Twitter)",
+        "author": "X Corp.",
+        "description": "Connect, follow, and share thoughts in real-time",
+        "icon": "/apps/x.png",
+        "url": "https://twitter.com/explore"
+    },
+    {
+        "name": "Reddit",
+        "author": "Advance Publications",
+        "description": "Join communities, share stories, explore endless content",
+        "icon": "/apps/reddit.png",
+        "url": "https://reddit.com"
+    },
+    {
+        "name": "Twitch",
+        "author": "Amazon.com, Inc.",
+        "description": "Connect, watch, chat, and stream live gaming content.",
+        "icon": "/apps/twitch.jpg",
+        "url": "https://twitch.tv"
+    },
+    {
+        "name": "Discord",
+        "author": "Discord Inc.",
+        "description": "Voice, video, and text chats for communities worldwide",
+        "icon": "/apps/discord.jpg",
+        "url": "https://discord.com/app"
+    },
+    {
+        "name": "TikTok",
+        "author": "Bytedance",
+        "description": "Short videos, music, and creative content showcase",
+        "icon": "/apps/tiktok.jpg",
+        "url": "https://www.tiktok.com"
+    },
+    {
+        "name": "Bored Panda",
+        "author": "Bored Panda",
+        "description": "Explore creative, funny, and viral content daily.",
+        "icon": "/apps/boredpanda.png",
+        "url": "https://www.boredpanda.com"
+    },
+    {
+        "name": "Zoom",
+        "author": "Zoom Video Communications, Inc.",
+        "description": "Video conferencing, meetings, and virtual hangouts made easy",
+        "icon": "/apps/zoom.png",
+        "url": "https://pwa.zoom.us/wc"
+    },
+    {
+        "name": "Pintrest",
+        "author": "Pinterest, Inc",
+        "description": "Discover inspiration, DIY ideas, and beautiful visuals galore.",
+        "icon": "/apps/pintrest.png",
+        "url": "https://www.pinterest.com/today"
+    },
+    {
+        "name": "ChatGPT",
+        "author": "OpenAI",
+        "description": "Engage in natural conversations with an AI assistant.",
+        "icon": "/apps/chatgpt.svg",
+        "url": "https://chat.openai.com"
+    }
+]

src/components/web.tsx

@@ -54,10 +54,16 @@ function Web({ open, setOpen }: WebTypes) {
     function closeWeb() {
         if (open) {
             web.current.src = "";
-            search.value = "";
-            clearInput();
+            if (search) {
+                search.value = "";
+            }
+            if (clearInput) {
+                clearInput();
+            }
             setOpen(false);
-            search.focus();
+            if (search) {
+                search.focus();
+            }
         }
     }
 
@@ -101,4 +107,14 @@ async function searchWeb(input: string, service: string, searchEngine: string, o
     }
 }
 
-export { Web, searchWeb };
+async function setWeb(url: string, open: boolean, setOpen: any) {
+    if (!open) {
+        setOpen(true)
+        if (web && web.current) {
+            web.current.src = url;
+            web.current.focus()
+        }
+    }
+}
+
+export { Web, searchWeb, setWeb };

src/main.tsx

@@ -3,6 +3,7 @@ import { Router, Route } from 'preact-router';
 import { ObfuscateLayout } from './util/obfuscate';
 
 import { Home } from "./pages/home";
+import { Apps } from "./pages/apps";
 import { Settings } from './pages/settings';
 import { Privacy } from './pages/privacy';
 import { Error } from "./pages/error";
@@ -24,6 +25,10 @@ function App() {
                         path="/"
                         component={Home}
                     />
+                    <Route
+                        path="/apps"
+                        component={Apps}
+                    />
                     <Route
                         path="/settings/search"
                         component={Settings}

src/pages/apps.tsx

@@ -0,0 +1,61 @@
+import { Head } from "../components/head";
+import { useTranslation } from "react-i18next";
+import { useState } from "preact/hooks";
+import { Web, setWeb } from "../components/web";
+import { useGlobalState } from "@ekwoka/preact-global-state";
+import { encodeURL } from "../util/searchURL";
+import apps from "../assets/apps.json";
+
+function Apps() {
+    const { t } = useTranslation();
+    const [service] = useGlobalState<string>("service", localStorage.getItem("metallic/service") || "ultraviolet");
+    const [webOpen, setWebOpen] = useState(false);
+
+    async function openApp(url: string) {
+        setWeb(await encodeURL(url, service), webOpen, setWebOpen)
+    }
+
+    return (
+        <>
+            <Head pageTitle={t("title.apps")} />
+            <Web open={webOpen} setOpen={setWebOpen} />
+            <div
+                class="grid justify-evenly gap-8 grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(auto,16rem))]"
+            >
+                {apps.map((app: any) => (
+                    <button
+                        onClick={async() => await openApp(app.url)}
+                        class="rounded-3xl h-72 bg-secondary flex flex-col p-4 cursor-pointer w-full sm:w-64 text-left"
+                    >
+                        <div
+                            class="h-36 w-full bg-background rounded-xl flex items-center justify-center overflow-hidden select-none"
+                        >
+                            <img
+                                src={app.icon}
+                                draggable={false}
+                                loading="lazy"
+                                alt={app.name}
+                                class="h-full w-full object-cover"
+                            />
+                        </div>
+                        <div class="overflow-hidden text-lg font-bold mt-3 text-ellipsis">
+                            {app.name}
+                        </div>
+                        <div class="text-base overflow-hidden text-ellipsis">
+                            {app.author}
+                        </div>
+                        <div
+                            class="mt-2 text-base overflow-hidden text-ellipsis"
+                            style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;"
+                        >
+                            {app.description}
+                        </div>
+                    </button>
+                ))}
+            </div>
+
+        </>
+    )
+}
+
+export { Apps };

src/util/searchURL.ts

@@ -23,7 +23,7 @@ async function encodeURL(input: string, service: string) {
             break;
     }
 
-    return result;
+    return result as string;
 }
 
 async function searchURL(input: string, service: string, searchEngine: string) {
@@ -35,4 +35,4 @@ async function searchURL(input: string, service: string, searchEngine: string) {
         return await encodeURL(searchEngine.replace("%s", encodeURIComponent(input)), service);
     }
 }
-export { searchURL };
+export { searchURL, encodeURL };