From 3ca9b508ee3b3f073eefc491bd595455d8e9b6c8 Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Tue, 15 Jul 2025 18:28:52 +0530
Subject: [PATCH 1/4] refactor: plugins page
- fixed layout issue
- enable/disable state update issue
- dont show switch on updates page
---
src/pages/plugins/item.js | 31 +----
src/pages/plugins/plugins.js | 166 +++++++++++++++++------
src/pages/plugins/plugins.scss | 232 ++++++++++++++++++++++++---------
3 files changed, 298 insertions(+), 131 deletions(-)
diff --git a/src/pages/plugins/item.js b/src/pages/plugins/item.js
index 27df0b509..48479a3d1 100644
--- a/src/pages/plugins/item.js
+++ b/src/pages/plugins/item.js
@@ -26,6 +26,7 @@ export default function Item({
installed,
enabled,
onToggleEnabled,
+ updates,
}) {
const authorName = (() => {
const displayName =
@@ -98,12 +99,10 @@ export default function Item({
{price !== null && price !== undefined && price !== 0 ? (
₹{price}
) : null}
- {/* Enable/Disable Toggle */}
- {installed && (
+ {installed && !updates ? (
{
e.stopPropagation();
onToggleEnabled?.(id, enabled);
@@ -112,33 +111,11 @@ export default function Item({
-
+
- )}
+ ) : null}
diff --git a/src/pages/plugins/plugins.js b/src/pages/plugins/plugins.js
index 7ea82f8eb..735e225f6 100644
--- a/src/pages/plugins/plugins.js
+++ b/src/pages/plugins/plugins.js
@@ -50,6 +50,7 @@ export default function PluginsInclude(updates) {
let isLoading = false;
let hasMore = true;
let isSearching = false;
+ let currentFilter = null;
const LIMIT = 50;
Contextmenu({
@@ -81,26 +82,32 @@ export default function PluginsInclude(updates) {
downloads: strings.most_downloaded,
};
const filterName = filterNames[item];
+ currentFilter = item;
+ currentPage = 1;
+ hasMore = true;
+ isLoading = false;
+ plugins.all = []; // Reset the all plugins array
render("all");
- getFilteredPlugins(item).then((plugins) => {
- $list.all.replaceChildren();
- $list.all.append(
-
@@ -115,6 +119,16 @@ async function handleScroll(e) {
}
}
+async function handleFilterScroll(e) {
+ if (isFilterLoading || !filterHasMore || !currentFilter) return;
+
+ const { scrollTop, scrollHeight, clientHeight } = e.target;
+
+ if (scrollTop + clientHeight >= scrollHeight - 50) {
+ await loadFilteredPlugins(currentFilter, false);
+ }
+}
+
async function loadMorePlugins() {
try {
isLoading = true;
@@ -143,9 +157,47 @@ async function loadMorePlugins() {
}
}
+async function loadFilteredPlugins(filterName, isInitial = false) {
+ if (isFilterLoading || !filterHasMore) return;
+
+ try {
+ isFilterLoading = true;
+
+ const plugins = await getFilteredPlugins(filterName, filterCurrentPage);
+
+ if (plugins.length < LIMIT) {
+ filterHasMore = false;
+ }
+
+ installedPlugins = await listInstalledPlugins();
+ const pluginElements = plugins.map(ListItem);
+
+ if (isInitial) {
+ $searchResult.append(...pluginElements);
+ } else {
+ $searchResult.append(...pluginElements);
+ }
+
+ filterCurrentPage++;
+ updateHeight($searchResult);
+ } catch (error) {
+ window.log("error", "Error loading filtered plugins:");
+ window.log("error", error);
+ } finally {
+ isFilterLoading = false;
+ }
+}
+
async function searchPlugin() {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(async () => {
+ // Clear filter when searching
+ currentFilter = null;
+ filterCurrentPage = 1;
+ filterHasMore = true;
+ isFilterLoading = false;
+ $searchResult.onscroll = null;
+
$searchResult.content = "";
const status = helpers.checkAPIStatus();
if (!status) {
@@ -188,14 +240,17 @@ async function filterPlugins() {
$searchResult.content = "";
const filterParam = filterOptions[filterName];
+ currentFilter = filterParam;
+ filterCurrentPage = 1;
+ filterHasMore = true;
+ isFilterLoading = false;
try {
$searchResult.classList.add("loading");
- const plugins = await getFilteredPlugins(filterParam);
const filterMessage = (
- Filter for {filterName}
+ Filtered by {filterName}
);
- $searchResult.content = [filterMessage, ...plugins.map(ListItem)];
+ $searchResult.content = [filterMessage];
+ $searchResult.onscroll = handleFilterScroll;
+ await loadFilteredPlugins(filterParam, true);
updateHeight($searchResult);
function clearFilter() {
+ currentFilter = null;
+ filterCurrentPage = 1;
+ filterHasMore = true;
+ isFilterLoading = false;
$searchResult.content = "";
+ $searchResult.onscroll = null;
updateHeight($searchResult);
}
} catch (error) {
@@ -221,7 +283,12 @@ async function filterPlugins() {
}
async function clearFilter() {
+ currentFilter = null;
+ filterCurrentPage = 1;
+ filterHasMore = true;
+ isFilterLoading = false;
$searchResult.content = "";
+ $searchResult.onscroll = null;
}
async function addSource() {
@@ -317,19 +384,20 @@ async function listInstalledPlugins() {
return plugins;
}
-async function getFilteredPlugins(filterName) {
+async function getFilteredPlugins(filterName, page = 1) {
try {
let response;
if (filterName === "top_rated") {
- response = await fetch(`${constants.API_BASE}/plugins?explore=random`);
+ response = await fetch(`${constants.API_BASE}/plugins?explore=random&page=${page}&limit=${LIMIT}`);
} else {
response = await fetch(
- `${constants.API_BASE}/plugin?orderBy=${filterName}`,
+ `${constants.API_BASE}/plugin?orderBy=${filterName}&page=${page}&limit=${LIMIT}`,
);
}
return await response.json();
} catch (error) {
window.log("error", error);
+ return [];
}
}
diff --git a/src/sidebarApps/extensions/style.scss b/src/sidebarApps/extensions/style.scss
index 781127048..2669c7a76 100644
--- a/src/sidebarApps/extensions/style.scss
+++ b/src/sidebarApps/extensions/style.scss
@@ -3,8 +3,8 @@
.container.extensions {
.header {
display: flex;
- justify-content: space-between;
- align-items: center;
+ flex-direction: column;
+ border-bottom: 1px solid var(--border-color);
.title {
font-size: 1.125rem;
@@ -13,20 +13,50 @@
justify-content: space-between;
align-items: center;
width: 100%;
+ color: var(--primary-text-color);
.icon-button {
background: none;
border: none;
cursor: pointer;
color: var(--primary-text-color);
- padding: 5px;
- margin-left: 15px;
- border-radius: 50%;
- transition: background-color 0.3s ease;
+ padding: 0.5rem;
+ margin-left: 0.5rem;
+ border-radius: 6px;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
&:hover {
- background-color: var(--active-icon-color);
+ background-color: var(--primary-color);
+ transform: scale(1.05);
}
+
+ &:active {
+ transform: scale(0.95);
+ }
+ }
+ }
+
+ input[type="search"] {
+ width: 100%;
+ padding: 0.5rem;
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ background: var(--secondary-color);
+ color: var(--primary-text-color);
+ font-size: 0.875rem;
+ transition: all 0.2s ease;
+
+ &:focus {
+ outline: none;
+ border-color: var(--active-color);
+ box-shadow: 0 0 0 2px rgba(51, 153, 255, 0.1);
+ }
+
+ &::placeholder {
+ color: var(--secondary-text-color);
}
}
}
@@ -42,22 +72,29 @@
display: flex;
justify-content: space-between;
align-items: center;
- background-color: var(--primary-color);
- padding: 5px;
+ background: var(--primary-color);
+ padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border-color);
+ font-size: 0.875rem;
+ color: var(--primary-text-color);
strong {
- color: var(--link-text-color);
+ color: var(--active-color);
+ margin-left: 0.25rem;
}
.close-button {
background: none;
border: none;
cursor: pointer;
- transition: color 0.3s;
+ padding: 0.25rem;
+ border-radius: 4px;
+ transition: all 0.2s ease;
+ color: var(--secondary-text-color);
&:hover {
background-color: var(--error-text-color);
+ color: white;
}
}
}
@@ -114,6 +151,7 @@
display: flex;
align-items: center;
justify-content: center;
+ box-shadow: 0 1px 3px var(--box-shadow-color);
&:hover {
background-color: var(--active-icon-color);
@@ -124,4 +162,4 @@
}
}
}
-}
\ No newline at end of file
+}
From b44029a31d0fbd438b76fd392db52ab480527bf4 Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Tue, 15 Jul 2025 18:32:51 +0530
Subject: [PATCH 3/4] fix
---
src/sidebarApps/extensions/index.js | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/src/sidebarApps/extensions/index.js b/src/sidebarApps/extensions/index.js
index d744f9318..1679e847a 100644
--- a/src/sidebarApps/extensions/index.js
+++ b/src/sidebarApps/extensions/index.js
@@ -162,16 +162,16 @@ async function loadFilteredPlugins(filterName, isInitial = false) {
try {
isFilterLoading = true;
-
+
const plugins = await getFilteredPlugins(filterName, filterCurrentPage);
-
+
if (plugins.length < LIMIT) {
filterHasMore = false;
}
installedPlugins = await listInstalledPlugins();
const pluginElements = plugins.map(ListItem);
-
+
if (isInitial) {
$searchResult.append(...pluginElements);
} else {
@@ -197,7 +197,7 @@ async function searchPlugin() {
filterHasMore = true;
isFilterLoading = false;
$searchResult.onscroll = null;
-
+
$searchResult.content = "";
const status = helpers.checkAPIStatus();
if (!status) {
@@ -388,7 +388,9 @@ async function getFilteredPlugins(filterName, page = 1) {
try {
let response;
if (filterName === "top_rated") {
- response = await fetch(`${constants.API_BASE}/plugins?explore=random&page=${page}&limit=${LIMIT}`);
+ response = await fetch(
+ `${constants.API_BASE}/plugins?explore=random&page=${page}&limit=${LIMIT}`,
+ );
} else {
response = await fetch(
`${constants.API_BASE}/plugin?orderBy=${filterName}&page=${page}&limit=${LIMIT}`,
From c71cf752b5f9561f0925950fa9b47ce50f5f78b7 Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Tue, 15 Jul 2025 20:03:41 +0530
Subject: [PATCH 4/4] Update style.scss
---
src/sidebarApps/extensions/style.scss | 5 -----
1 file changed, 5 deletions(-)
diff --git a/src/sidebarApps/extensions/style.scss b/src/sidebarApps/extensions/style.scss
index 2669c7a76..bbd7c87e0 100644
--- a/src/sidebarApps/extensions/style.scss
+++ b/src/sidebarApps/extensions/style.scss
@@ -30,11 +30,6 @@
&:hover {
background-color: var(--primary-color);
- transform: scale(1.05);
- }
-
- &:active {
- transform: scale(0.95);
}
}
}