featured tags and stuff

z1g-project · Apr 5, 2024 · 17b449c · 17b449c
1 parent 68d62c6
commit 17b449c
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "ephemeral",
 	"private": true,
-	"version": "0.9.0",
+	"version": "0.9.5",
 	"type": "module",
 	"scripts": {
 		"preinstall": "npx only-allow pnpm",
@@ -79,7 +79,6 @@
 		"typescript-eslint": "^7.4.0",
 		"vite": "^5.2.7"
 	},
-	"description": "release - 2/23/24 This is using Vite and React. To build and start, run `npm run bstart`. For UI components, we're using https://ui.shadcn.com/. To add a new component run `npx shadcn-ui@latest add [name of component]`. **Note: Whenever you add a component make sure to open it's file, and remove the dark prefixes from the classes. Then, remove the non-prefixed classes that were there before. **",
 	"main": "index.ts",
 	"author": "",
 	"license": "ISC"

diff --git a/src/components/shortcut-card.tsx b/src/components/shortcut-card.tsx
@@ -12,6 +12,13 @@ import {
 } from "@/components/ui/card";
 import { useEffect } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Sparkles } from "lucide-react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "./ui/tooltip";
 export default function ShortcutCard({ app }: { app: Application }) {
 	const { data: image, loading, run, error } = useAsync<string>(null);
 	useEffect(() => {
@@ -22,12 +29,29 @@ export default function ShortcutCard({ app }: { app: Application }) {
 					res.blob().then((blob) => URL.createObjectURL(blob) as string),
 				),
 		);
-	}, [app.image]); // eslint-disable-line react-hooks/exhaustive-deps
+	}, [app, run]);
 	return (
 		<Link to={`/view/${encoder.encode(app.url)}`}>
-			<Card className="my-2 flex h-[20rem] w-72 flex-col items-center justify-center duration-200 hover:bg-secondary">
+			<Card className="my-2 flex h-[19rem] w-72 flex-col items-center justify-center duration-200 hover:bg-secondary">
 				<CardHeader>
-					<CardTitle>{app.name}</CardTitle>
+					<CardTitle>
+						{app.featured && (
+							<TooltipProvider>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Sparkles
+											className="mr-2 inline-block text-yellow-500"
+											size={24}
+										/>
+									</TooltipTrigger>
+									<TooltipContent className="font-medium">
+										Featured
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						)}
+						{app.name}
+					</CardTitle>
 					<CardDescription>{app.description}</CardDescription>
 				</CardHeader>
 				<CardContent>

diff --git a/src/components/shortcut-carousel.tsx b/src/components/shortcut-carousel.tsx
@@ -54,24 +54,29 @@ export function ShortcutCarousel() {
 	return (
 		<Carousel>
 			<CarouselContent>
-				{!appError
-					? !loading
-						? apps
-							? apps
-									.filter((app) => app.featured)
-									.map((app) => (
-										<CarouselItem key={app.name} className="basis-1/4">
-											<Link
-												key={app.name}
-												to={`/view/${encodeURIComponent(encoder.encode(app.url))}`}
-											>
-												<AppImage imageUrl={app.image} />
-											</Link>
-										</CarouselItem>
-									))
-							: null
-						: null
-					: null}
+				{!appError ? (
+					!loading ? (
+						apps ? (
+							apps
+								.filter((app) => app.featured)
+								.map((app) => (
+									<CarouselItem
+										key={app.name}
+										className="basis-1/4 select-none"
+									>
+										<Link
+											key={app.name}
+											to={`/view/${encodeURIComponent(encoder.encode(app.url))}`}
+										>
+											<AppImage imageUrl={app.image} />
+										</Link>
+									</CarouselItem>
+								))
+						) : null
+					) : (
+						<div className="h-32 w-56" />
+					)
+				) : null}
 			</CarouselContent>
 			<CarouselPrevious />
 			<CarouselNext />

diff --git a/src/layouts/main-layout.tsx b/src/layouts/main-layout.tsx
@@ -126,19 +126,18 @@ export default function MainLayout() {
 									<Tooltip>
 										<TooltipTrigger asChild>
 											<Button asChild variant="outline" size="icon">
-												<a
-													href="https://github.com/z1g-project/ephemeral"
-													className="[&>svg]:size-5"
-													target="_blank"
+												<Link
+													to={`/view/${encoder.encode("https://github.com/z1g-project/Ephemeral")}`}
 												>
 													<svg
 														xmlns="http://www.w3.org/2000/svg"
 														viewBox="0 0 24 24"
 														fill="currentColor"
+														className="size-4"
 													>
 														<path d="M5.88401 18.6533C5.58404 18.4526 5.32587 18.1975 5.0239 17.8369C4.91473 17.7065 4.47283 17.1524 4.55811 17.2583C4.09533 16.6833 3.80296 16.417 3.50156 16.3089C2.9817 16.1225 2.7114 15.5499 2.89784 15.0301C3.08428 14.5102 3.65685 14.2399 4.17672 14.4263C4.92936 14.6963 5.43847 15.1611 6.12425 16.0143C6.03025 15.8974 6.46364 16.441 6.55731 16.5529C6.74784 16.7804 6.88732 16.9182 6.99629 16.9911C7.20118 17.1283 7.58451 17.1874 8.14709 17.1311C8.17065 16.7489 8.24136 16.3783 8.34919 16.0358C5.38097 15.3104 3.70116 13.3952 3.70116 9.63971C3.70116 8.40085 4.0704 7.28393 4.75917 6.3478C4.5415 5.45392 4.57433 4.37284 5.06092 3.15636C5.1725 2.87739 5.40361 2.66338 5.69031 2.57352C5.77242 2.54973 5.81791 2.53915 5.89878 2.52673C6.70167 2.40343 7.83573 2.69705 9.31449 3.62336C10.181 3.41879 11.0885 3.315 12.0012 3.315C12.9129 3.315 13.8196 3.4186 14.6854 3.62277C16.1619 2.69 17.2986 2.39649 18.1072 2.52651C18.1919 2.54013 18.2645 2.55783 18.3249 2.57766C18.6059 2.66991 18.8316 2.88179 18.9414 3.15636C19.4279 4.37256 19.4608 5.45344 19.2433 6.3472C19.9342 7.28337 20.3012 8.39208 20.3012 9.63971C20.3012 13.3968 18.627 15.3048 15.6588 16.032C15.7837 16.447 15.8496 16.9105 15.8496 17.4121C15.8496 18.0765 15.8471 18.711 15.8424 19.4225C15.8412 19.6127 15.8397 19.8159 15.8375 20.1281C16.2129 20.2109 16.5229 20.5077 16.6031 20.9089C16.7114 21.4504 16.3602 21.9773 15.8186 22.0856C14.6794 22.3134 13.8353 21.5538 13.8353 20.5611C13.8353 20.4708 13.836 20.3417 13.8375 20.1145C13.8398 19.8015 13.8412 19.599 13.8425 19.4094C13.8471 18.7019 13.8496 18.0716 13.8496 17.4121C13.8496 16.7148 13.6664 16.2602 13.4237 16.051C12.7627 15.4812 13.0977 14.3973 13.965 14.2999C16.9314 13.9666 18.3012 12.8177 18.3012 9.63971C18.3012 8.68508 17.9893 7.89571 17.3881 7.23559C17.1301 6.95233 17.0567 6.54659 17.199 6.19087C17.3647 5.77663 17.4354 5.23384 17.2941 4.57702L17.2847 4.57968C16.7928 4.71886 16.1744 5.0198 15.4261 5.5285C15.182 5.69438 14.8772 5.74401 14.5932 5.66413C13.7729 5.43343 12.8913 5.315 12.0012 5.315C11.111 5.315 10.2294 5.43343 9.40916 5.66413C9.12662 5.74359 8.82344 5.69492 8.57997 5.53101C7.8274 5.02439 7.2056 4.72379 6.71079 4.58376C6.56735 5.23696 6.63814 5.77782 6.80336 6.19087C6.94565 6.54659 6.87219 6.95233 6.61423 7.23559C6.01715 7.8912 5.70116 8.69376 5.70116 9.63971C5.70116 12.8116 7.07225 13.9683 10.023 14.2999C10.8883 14.3971 11.2246 15.4769 10.5675 16.0482C10.3751 16.2156 10.1384 16.7802 10.1384 17.4121V20.5611C10.1384 21.5474 9.30356 22.2869 8.17878 22.09C7.63476 21.9948 7.27093 21.4766 7.36613 20.9326C7.43827 20.5204 7.75331 20.2116 8.13841 20.1276V19.1381C7.22829 19.1994 6.47656 19.0498 5.88401 18.6533Z" />
 													</svg>
-												</a>
+												</Link>
 											</Button>
 										</TooltipTrigger>
 										<TooltipContent>Github</TooltipContent>

diff --git a/src/main.tsx b/src/main.tsx
@@ -34,8 +34,12 @@ export default function App() {
 					scope: "/~/",
 				})
 				.then(() => {
-					if (localStorage.getItem("refreshAgain") === "true") {
+					if (
+						localStorage.getItem("refreshAgain") === "true" ||
+						!localStorage.getItem("firstLoad")
+					) {
 						localStorage.removeItem("refreshAgain");
+						localStorage.setItem("firstLoad", "true");
 						window.location.reload();
 					}
 					console.log(

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -34,9 +34,8 @@ export default function Home() {
 		async (event: React.ChangeEvent<HTMLInputElement>) => {
 			const query = event.target.value;
 			await fetchSuggestions(query);
-			console.log(suggestions);
 		},
-		[fetchSuggestions, suggestions],
+		[fetchSuggestions],
 	);
 
 	const throttledInputChange = useCallback(throttle(500, onInputChange), []); // eslint-disable-line
@@ -121,16 +120,16 @@ export default function Home() {
 					</CommandList>
 				</Command>
 			</section>
-			<section
-				className={`mt-24 w-[56rem] ${showingSuggestions ? "invisible" : "visible"}`}
-			>
-				<h1 className="mb-4 text-start text-xl font-bold text-foreground">
-					Featured Apps
-				</h1>
-				<div className="h-32 w-[56rem]">
-					<ShortcutCarousel />
-				</div>
-			</section>
+			{!showingSuggestions ? (
+				<section className="mt-24 w-[56rem]">
+					<h1 className="mb-4 text-start text-xl font-bold text-foreground">
+						Featured Apps
+					</h1>
+					<div className="h-32 w-[56rem]">
+						<ShortcutCarousel />
+					</div>
+				</section>
+			) : null}
 		</div>
 	);
 }
diff --git a/src/pages/settings/proxy.tsx b/src/pages/settings/proxy.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import { useToast } from "@/components/ui/use-toast";
-import { useConfig } from "@/hooks"; // Replace with correct path
+import { useConfig } from "@/hooks";
 import {
 	Card,
 	CardContent,
@@ -23,12 +23,11 @@ import {
 import { unregisterServiceWorker } from "@/lib/sw";
 export default function ProxySettings() {
 	const { toast } = useToast();
-	const [config, reset, loading] = useConfig("proxy"); // Using the useConfig hook to get proxy settings
+	const [config, reset, loading] = useConfig("proxy");
 	const wispServerRef = useRef<HTMLInputElement>(null);
 
 	useEffect(() => {
 		if (config) {
-			// Setting default values from config if available
 			if (wispServerRef.current)
 				wispServerRef.current.value = config.wispServer;
 		}

diff --git a/src/pages/view.tsx b/src/pages/view.tsx
@@ -230,9 +230,10 @@ export default function View() {
 			<div className="space-between flex max-h-14 items-start overflow-visible p-2">
 				<div className="mr-auto whitespace-nowrap">
 					{leftButtons.map(
-						({ title, onClick, disabled, children, asChild }) => (
+						({ title, onClick, disabled, children, asChild }, key) => (
 							<Button
 								{...{
+									key,
 									disabled,
 									onClick,
 									title,
@@ -298,9 +299,10 @@ export default function View() {
 				</section>
 				<div className="ml-auto whitespace-nowrap">
 					{rightButtons.map(
-						({ title, onClick, disabled, children, asChild }) => (
+						({ title, onClick, disabled, children, asChild }, key) => (
 							<Button
 								{...{
+									key,
 									disabled,
 									onClick,
 									title,

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="vite/client" />
 
-declare const __BUILD_DATE__: Date.now;
+declare const __BUILD_DATE__: number;
 declare const __GIT_COMMIT__: string;
 interface ImportMetaEnv {
 	readonly VITE_WISP_SERVER: string;