From 6be9cea0860fbdc0f54910f39276b111dcc8e425 Mon Sep 17 00:00:00 2001
From: millennIumAMbiguity
 <37588844+millennIumAMbiguity@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:49:46 +0200
Subject: [PATCH 1/2] Add descriptions on hover

descriptions added here https://github.com/OpenActionAPI/plugins/pull/2
---
 src/app.css             | 16 ++++++++++++++++
 src/routes/+page.svelte |  9 +++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index 22e8eca..10713b5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -32,3 +32,19 @@ body {
 .readme ul {
 	@apply list-disc ml-6;
 }
+
+.tooltip-desc {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	background-color: #404040a0;
+	display: none;
+	transition: 0.3s;
+}
+
+.tooltip-desc:hover {
+	display: block;
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8a4d423..041e99f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 
-	let data: { [id: string]: { name: string; repository: string; author: string } };
+	let data: { [id: string]: { name: string; repository: string; author: string; discription: string } };
 	let searchString = "";
 
 	onMount(async () => {
@@ -26,7 +26,7 @@
 	</div>
 
 	{#if data}
-		<div class="p-8 gap-x-4 gap-y-12 grid" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
+		<div class="p-8 gap-x-4 gap-y-12 grid" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr); position: relative;">
 			{#each Object.entries(data) as [id, plugin]}
 				{#if plugin.name.toLowerCase().includes(searchString.toLowerCase())}
 					<a href={"/plugin/" + id} class="p-5 items-center flex flex-col text-xl bg-neutral-700 rounded-3xl">
@@ -42,6 +42,11 @@
 						<p class="text-[16px] text-neutral-300">
 							by {plugin.author}
 						</p>
+						{#if plugin.discription}
+							<p class="text-[16px] text-neutral-300 tooltip-desc">
+								{plugin.discription}
+							</p>
+						{/if}
 					</a>
 				{/if}
 			{/each}

From 05fbfff0cb2394c4c3059d1dd6b09e9b5654aeb5 Mon Sep 17 00:00:00 2001
From: millennIumAMbiguity
 <37588844+millennIumAMbiguity@users.noreply.github.com>
Date: Tue, 29 Apr 2025 14:57:54 +0200
Subject: [PATCH 2/2] Update +page.svelte

---
 src/routes/+page.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 041e99f..561a278 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -26,7 +26,7 @@
 	</div>
 
 	{#if data}
-		<div class="p-8 gap-x-4 gap-y-12 grid" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr); position: relative;">
+		<div class="p-8 gap-x-4 gap-y-12 grid" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); position: relative">
 			{#each Object.entries(data) as [id, plugin]}
 				{#if plugin.name.toLowerCase().includes(searchString.toLowerCase())}
 					<a href={"/plugin/" + id} class="p-5 items-center flex flex-col text-xl bg-neutral-700 rounded-3xl">
@@ -42,9 +42,9 @@
 						<p class="text-[16px] text-neutral-300">
 							by {plugin.author}
 						</p>
-						{#if plugin.discription}
+						{#if plugin.description}
 							<p class="text-[16px] text-neutral-300 tooltip-desc">
-								{plugin.discription}
+								{plugin.description}
 							</p>
 						{/if}
 					</a>