Patch plugin page issues (#1200)

* fix: infinite scroll while searching

* fix: plugin page issue in some cases

- handle if changelogs not available
- rename changelog to changelogs
- handle weird keywords type

* feat: add option to install plugins from sidebar

Author: bajrangCoder

CHANGELOG.md

@@ -2,65 +2,67 @@
 
 ## v1.11.0 (956)
 
-### Fixes  
-* Fixed a typo: "vission" → "vision" by @ByteJoseph in #1125  
-* Fixed heading and image alignment issues with `alignment="center"` on the plugin page by @bajrangCoder in #1132  
-* Fixed file listing in SFTP by @bajrangCoder in #1133  
-* Fixed fallback to `*/*` when the `accept` attribute is absent in `<input type="file">` in the in-app browser by @bajrangCoder in #1154  
-* Fixed console not reappearing after page reload in the in-app browser by @bajrangCoder in #1155  
-* Fixed infinite scroll on the plugin page to remove duplicates by @bajrangCoder in #1171  
-* Fixed logger to limit its size in #1167  
-* Fixed an issue where the info dialog wouldn't appear for non-editor tabs in #1167  
-* Fixed incorrect file attributes in FTP by @bajrangCoder in #1194  
-* Fixed the palette not opening when triggered from an existing palette by @bajrangCoder in #1197  
-
-### Features  
-* Improved tab view gesture handling to distinguish between scroll and swipe on the plugin page by @bajrangCoder in #1131  
-* Added color preview for SVG files by @bajrangCoder in #1135  
-* Implemented custom editor tab support by @bajrangCoder in #1136  
-  * Now supports image, video, and audio previews directly in the editor instead of pop-ups  
-  * Exposed API for plugin developers to add content in editor tabs via `EditorFile`  
-* Redesigned the About page by @bajrangCoder in #1153  
-* Added a plugin rebuild option for local plugins by @bajrangCoder in #1150  
-  * Plugins can use `cordova.plugin.http` instead of `fetch` to avoid CORS issues when making network requests  
-* Redesigned the Plugin page by @bajrangCoder in #1152  
-  * Added new metadata fields in `plugin.json`: `license`, `changelog`, `keywords`, and `contributors`  
-* Added a new option to open files in an external app from the file browser in #1163  
-* Added minor sidebar UI tweaks and improved input element styling in #1164  
-* Used theme colors in the extra cutout area in landscape mode instead of the default color in #1165  
-* Improved file info dialog design in #1170  
-* Added Eruda console support for external sites in Acode's built-in browser in #1172  
-* Added a new editor setting: **"Fade fold widgets"** by @bajrangCoder in #1195  
-* Added a command to change the editor and app theme via the command palette by @bajrangCoder in #1197  
-
-### Improvements  
-* Improved paste operation with proper error handling in #1162  
-* Rewritten SFTP implementation(#1167):  
-  * Better performance and stability  
-  * Improved symlink support with better visual distinction  
-  * Proper error handling  
-  * Enhanced file reading (downloading) and writing  
-  * Uses native APIs for file system operations  
-  * Better buffer handling—now even 30-40 minute videos load within seconds (faster than internal storage)  
-  * Emoji support added  
-* Improved the FTP client (#1193) by @bajrangCoder  
-  * Supports emoji-named files  
-  * Improved symlink handling  
-  * Better handling of videos and images as binary files  
-  * Displays file names instead of full paths  
-* Reworked the plugin page UI—now displays essential info such as author, license, price, etc., in the list view by @bajrangCoder in #1196  
-* Tweaked breadcrumbs in the file browser to follow the app theme in #1167  
-* Updated the SSH library to `v3.1.2` in #1167  
-* Removed deprecated APIs in #1167  
-* Added experimental support for saving native logs in Acode Logger in #1167  
+### Fixes
+* Fixed a typo: "vission" → "vision" by @ByteJoseph in #1125
+* Fixed heading and image alignment issues with `alignment="center"` on the plugin page by @bajrangCoder in #1132
+* Fixed file listing in SFTP by @bajrangCoder in #1133
+* Fixed fallback to `*/*` when the `accept` attribute is absent in `<input type="file">` in the in-app browser by @bajrangCoder in #1154
+* Fixed console not reappearing after page reload in the in-app browser by @bajrangCoder in #1155
+* Fixed infinite scroll on the plugin page to remove duplicates by @bajrangCoder in #1171
+* Fixed logger to limit its size in #1167
+* Fixed an issue where the info dialog wouldn't appear for non-editor tabs in #1167
+* Fixed incorrect file attributes in FTP by @bajrangCoder in #1194
+* Fixed the palette not opening when triggered from an existing palette by @bajrangCoder in #1197
+* Fixed trigering of infinite scroll on plugin page while searching by @bajrangCoder in #1200
+
+### Features
+* Improved tab view gesture handling to distinguish between scroll and swipe on the plugin page by @bajrangCoder in #1131
+* Added color preview for SVG files by @bajrangCoder in #1135
+* Implemented custom editor tab support by @bajrangCoder in #1136
+  * Now supports image, video, and audio previews directly in the editor instead of pop-ups
+  * Exposed API for plugin developers to add content in editor tabs via `EditorFile`
+* Redesigned the About page by @bajrangCoder in #1153
+* Added a plugin rebuild option for local plugins by @bajrangCoder in #1150
+  * Plugins can use `cordova.plugin.http` instead of `fetch` to avoid CORS issues when making network requests
+* Redesigned the Plugin page by @bajrangCoder in #1152
+  * Added new metadata fields in `plugin.json`: `license`, `changelog`, `keywords`, and `contributors`
+* Added a new option to open files in an external app from the file browser in #1163
+* Added minor sidebar UI tweaks and improved input element styling in #1164
+* Used theme colors in the extra cutout area in landscape mode instead of the default color in #1165
+* Improved file info dialog design in #1170
+* Added Eruda console support for external sites in Acode's built-in browser in #1172
+* Added a new editor setting: **"Fade fold widgets"** by @bajrangCoder in #1195
+* Added a command to change the editor and app theme via the command palette by @bajrangCoder in #1197
+* Added option to install plugins directly from sidebar extensions app by @bajrangCoder in #1200
+
+### Improvements
+* Improved paste operation with proper error handling in #1162
+* Rewritten SFTP implementation(#1167):
+  * Better performance and stability
+  * Improved symlink support with better visual distinction
+  * Proper error handling
+  * Enhanced file reading (downloading) and writing
+  * Uses native APIs for file system operations
+  * Better buffer handling—now even 30-40 minute videos load within seconds (faster than internal storage)
+  * Emoji support added
+* Improved the FTP client (#1193) by @bajrangCoder
+  * Supports emoji-named files
+  * Improved symlink handling
+  * Better handling of videos and images as binary files
+  * Displays file names instead of full paths
+* Reworked the plugin page UI—now displays essential info such as author, license, price, etc., in the list view by @bajrangCoder in #1196
+* Tweaked breadcrumbs in the file browser to follow the app theme in #1167
+* Updated the SSH library to `v3.1.2` in #1167
+* Removed deprecated APIs in #1167
+* Added experimental support for saving native logs in Acode Logger in #1167
 * Tweaked the donation page  #1188
 
-### Other Changes  
+### Other Changes
 * **Chore**: Updated Ace Editor to `v1.39.0`
   * Added CSV & TSV mode
   * Improved search support for multi-line patterns (`\n`, `\t`)
   * And more—see the Ace Changelog
-* Many translation updates for `hu-hu` by @summoner  
+* Many translation updates for `hu-hu` by @summoner
 
 ## v1.10.7 (955)
 

src/pages/plugin/plugin.js

@@ -79,11 +79,19 @@ export default async function PluginInclude(
 			const description = await fsOperation(
 				Url.join(PLUGIN_DIR, id, "readme.md"),
 			).readFile("utf8");
-			const changelog = installedPlugin.changelog
-				? await fsOperation(
-						Url.join(PLUGIN_DIR, id, installedPlugin.changelog),
-					).readFile("utf8")
-				: "";
+			let changelogs = "";
+			if (installedPlugin.changelogs) {
+				const changelogPath = Url.join(
+					PLUGIN_DIR,
+					id,
+					installedPlugin.changelogs,
+				);
+				const changelogExists = await fsOperation(changelogPath).exists();
+				if (changelogExists) {
+					changelogs = await fsOperation(changelogPath).readFile("utf8");
+				}
+			}
+
 			const iconUrl = await helpers.toInternalUri(
 				Url.join(PLUGIN_DIR, id, "icon.png"),
 			);
@@ -103,7 +111,7 @@ export default async function PluginInclude(
 				keywords: installedPlugin.keywords,
 				contributors: installedPlugin.contributors,
 				description,
-				changelog,
+				changelogs,
 			};
 
 			isPaid = installedPlugin.price > 0;
@@ -153,7 +161,7 @@ export default async function PluginInclude(
 					}
 				}
 			} catch (error) {
-				window.log("error", error);
+				console.log(error);
 			} finally {
 				loader.removeTitleLoader();
 			}
@@ -167,7 +175,7 @@ export default async function PluginInclude(
 			$button?.click();
 		}
 	} catch (err) {
-		window.log("error", err);
+		console.log(err);
 		helpers.error(err);
 	} finally {
 		loader.removeTitleLoader();
@@ -311,7 +319,7 @@ export default async function PluginInclude(
 				})
 				.use(markdownItTaskLists)
 				.render(plugin.description),
-			changelog: plugin.changelog
+			changelogs: plugin.changelogs
 				? markdownIt({ html: true, xhtmlOut: true })
 						.use(MarkdownItGitHubAlerts)
 						.use(anchor, {
@@ -322,7 +330,7 @@ export default async function PluginInclude(
 									.replace(/[^a-z0-9]+/g, "-"),
 						})
 						.use(markdownItTaskLists)
-						.render(plugin.changelog)
+						.render(plugin.changelogs)
 				: null,
 			purchased,
 			installed,

src/pages/plugin/plugin.view.js

@@ -1,12 +1,14 @@
 import TabView from "components/tabView";
 import toast from "components/toast";
 import alert from "dialogs/alert";
+import DOMPurify from "dompurify";
 import fsOperation from "fileSystem";
 import Ref from "html-tag-js/ref";
 import actionStack from "lib/actionStack";
 import constants from "lib/constants";
 import Url from "utils/Url";
 import helpers from "utils/helpers";
+
 export default (props) => {
 	const {
 		id,
@@ -18,7 +20,7 @@ export default (props) => {
 		license,
 		keywords,
 		contributors,
-		changelog,
+		changelogs,
 		votes_up: votesUp,
 		votes_down: votesDown,
 		author_verified: authorVerified,
@@ -101,7 +103,7 @@ export default (props) => {
 							</div>
 						</div>
 					) : null}
-					{keywords?.length ? (
+					{Array.isArray(keywords) && keywords.length ? (
 						<div className="keywords">
 							{keywords.map((keyword) => (
 								<span className="keyword">{keyword}</span>
@@ -163,28 +165,24 @@ export default (props) => {
 						})()}
 					</div>
 
-					<div id="changelog" className="content-section">
-						{changelog || (
-							<div className="no-changelog">
-								<i className="icon historyrestore"></i>
-								<p
-									style={{
-										fontSize: "1.1rem",
-									}}
-								>
+					<div
+						id="changelog"
+						className="content-section md"
+						innerHTML={
+							DOMPurify.sanitize(changelogs) ||
+							`
+							<div class="no-changelog">
+								<i class="icon historyrestore"></i>
+								<p style="font-size: 1.1rem;">
 									No changelog is available for this plugin yet.
 								</p>
-								<p
-									style={{
-										fontSize: "0.9rem",
-										fontStyle: "italic",
-									}}
-								>
+								<p style="font-size: 0.9rem; font-style: italic;">
 									Check back later for updates!
 								</p>
 							</div>
-						)}
-					</div>
+					`
+						}
+					></div>
 				</div>
 			</TabView>
 		</div>

src/pages/plugins/plugins.js

@@ -47,6 +47,7 @@ export default function PluginsInclude(updates) {
   let currentPage = 1;
   let isLoading = false;
   let hasMore = true;
+  let isSearching = false;
   const LIMIT = 50;
 
   Contextmenu({
@@ -147,7 +148,7 @@ export default function PluginsInclude(updates) {
   $page.onclick = handleClick;
 
   $list.all.addEventListener('scroll', async (e) => {
-    if (isLoading || !hasMore) return;
+    if (isLoading || !hasMore || isSearching) return;
 
     const { scrollTop, scrollHeight, clientHeight } = e.target;
     if (scrollTop + clientHeight >= scrollHeight - 100) {
@@ -187,15 +188,23 @@ export default function PluginsInclude(updates) {
     const { action } = $target.dataset;
     if (action === "search") {
       if (currSection === "all") {
+        isSearching = true;
         searchBar(
           $currList,
-          (hide) => (hideSearchBar = hide),
+          (hide) => {
+            hideSearchBar = hide;
+            isSearching = false;
+          },
           undefined,
           searchRemotely,
         );
         return;
       } else {
-        searchBar($currList, (hide) => (hideSearchBar = hide));
+        isSearching = true;
+        searchBar($currList, (hide) => {
+          hideSearchBar = hide;
+          isSearching = false;
+        });
         return;
       }
     }
@@ -398,6 +407,7 @@ export default function PluginsInclude(updates) {
       await installPlugin(source);
       await getInstalledPlugins();
     } catch (error) {
+      console.error(error);
       window.toast(helpers.errorMessage(error));
       addSource(sourceType, source);
     }

src/sidebarApps/extensions/index.js

@@ -2,11 +2,13 @@ import "./style.scss";
 
 import collapsableList from "components/collapsableList";
 import Sidebar from "components/sidebar";
+import prompt from "dialogs/prompt";
 import select from "dialogs/select";
 import fsOperation from "fileSystem";
 import constants from "lib/constants";
 import InstallState from "lib/installState";
 import settings from "lib/settings";
+import FileBrowser from "pages/fileBrowser";
 import plugin from "pages/plugin";
 import Url from "utils/Url";
 import helpers from "utils/helpers";
@@ -32,6 +34,9 @@ const $header = (
 			<button className="icon-button" onclick={filterPlugins}>
 				<span className="icon tune"></span>
 			</button>
+			<button className="icon-button" onclick={addSource}>
+				<span className="icon more_vert"></span>
+			</button>
 		</div>
 		<input
 			oninput={searchPlugin}
@@ -215,6 +220,39 @@ async function clearFilter() {
 	$searchResult.content = "";
 }
 
+async function addSource() {
+	const sourceOption = [
+		["remote", strings.remote],
+		["local", strings.local],
+	];
+	const sourceType = await select("Select Source", sourceOption);
+
+	if (!sourceType) return;
+	let source;
+	if (sourceType === "remote") {
+		source = await prompt("Enter plugin source", "https://", "url");
+	} else {
+		source = (await FileBrowser("file", "Select plugin source")).url;
+	}
+
+	if (!source) return;
+
+	try {
+		const { default: installPlugin } = await import("lib/installPlugin");
+		await installPlugin(source);
+		if (!$explore.collapsed) {
+			$explore.ontoggle();
+		}
+		if (!$installed.collapsed) {
+			$installed.ontoggle();
+		}
+	} catch (error) {
+		console.error(error);
+		window.toast(helpers.errorMessage(error));
+		addSource(sourceType, source);
+	}
+}
+
 async function loadInstalled() {
 	if (this.collapsed) return;