Add more to plugin

vscode-extension/media/add-package.js

@@ -0,0 +1,79 @@
+
+(function(){
+    const vscode = acquireVsCodeApi();
+   
+    const searchbtn = document.getElementById('searchbtn');
+    const query = document.getElementById('query');
+    const body = document.getElementById('packages');
+    const prevPage = document.getElementById('prevPage');
+    const currentPage = document.getElementById('currentPage');
+    const nextPage = document.getElementById('nextPage');
+    var page = 1;
+    
+    if(searchbtn)
+    searchbtn.onclick = ()=>{
+        page = 1;
+        currentPage.innerText = "1";
+        vscode.postMessage(
+            {command: 'query', query: query.value, page: 1},
+        );
+    };
+    if(prevPage)
+    prevPage.onclick = ()=>{
+        page--;
+        if(page < 1) page=1;
+        currentPage.innerText = page.toString();
+        vscode.postMessage(
+            {command: 'query', query: query.value, page: page},
+        );
+    };
+    if(nextPage)
+    nextPage.onclick = ()=>{
+        page++;
+        currentPage.innerText = page.toString();
+        vscode.postMessage(
+            {command: 'query', query: query.value, page: page},
+        );
+    };
+
+
+    window.addEventListener('message', event => {
+        const message = event.data; // The json data that the extension sent
+        switch (message.command) {
+            case "searchResponse":
+            {
+                body.innerHTML = "";
+                
+                for(var i = 0; i < message.packages.length; i++)
+                {
+                    const pkg = message.packages[i];
+                    const node = document.createElement('div');
+                    node.classList.add('package');
+                    const img = document.createElement('img');
+                    img.src = pkg.icon;
+                    img.width = 64;
+                    img.height = 64;
+                    node.appendChild(img);
+                    const title = document.createElement('span');
+                    title.innerText = pkg.name;
+                    node.appendChild(title);
+                    const btn = document.createElement('button');
+                    btn.innerText = pkg.installText;
+                    btn.onclick = ()=>{
+                        vscode.postMessage({
+                            command: "manage-pkg",
+                            name: pkg.name,
+                            version: pkg.version,
+                            query: message.query,
+                            page: message.page
+                        });
+                    };
+                    node.appendChild(btn);
+
+                    body.appendChild(node);
+                }
+            }
+                break;
+        }
+    });
+}());

vscode-extension/media/jsconfig.json

@@ -0,0 +1,19 @@
+{
+	"compilerOptions": {
+		"module": "commonjs",
+		"target": "es2020",
+		"jsx": "preserve",
+		"lib": [
+			"dom"
+		]
+	},
+	"exclude": [
+		"node_modules",
+		"**/node_modules/*"
+	],
+	"typeAcquisition": {
+		"include": [
+			"@types/vscode-webview"
+		]
+	}
+}

vscode-extension/media/reset.css

@@ -0,0 +1,30 @@
+html {
+	box-sizing: border-box;
+	font-size: 13px;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+	margin: 0;
+	padding: 0;
+	font-weight: normal;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}

vscode-extension/media/vscode.css

@@ -0,0 +1,118 @@
+:root {
+	--container-padding: 20px;
+	--input-padding-vertical: 6px;
+	--input-padding-horizontal: 4px;
+	--input-margin-vertical: 4px;
+	--input-margin-horizontal: 0;
+}
+
+body {
+	padding: 0 var(--container-padding);
+	color: var(--vscode-foreground);
+	font-size: var(--vscode-font-size);
+	font-weight: var(--vscode-font-weight);
+	font-family: var(--vscode-font-family);
+	background-color: var(--vscode-editor-background);
+}
+
+ol,
+ul {
+	padding-left: var(--container-padding);
+}
+
+body > *,
+form > * {
+	margin-block-start: var(--input-margin-vertical);
+	margin-block-end: var(--input-margin-vertical);
+}
+
+*:focus {
+	outline-color: var(--vscode-focusBorder) !important;
+}
+
+a {
+	color: var(--vscode-textLink-foreground);
+}
+
+a:hover,
+a:active {
+	color: var(--vscode-textLink-activeForeground);
+}
+
+code {
+	font-size: var(--vscode-editor-font-size);
+	font-family: var(--vscode-editor-font-family);
+}
+
+button {
+	border: none;
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	width: 100%;
+	text-align: center;
+	outline: 1px solid transparent;
+	outline-offset: 2px !important;
+	color: var(--vscode-button-foreground);
+	background: var(--vscode-button-background);
+}
+
+button:hover {
+	cursor: pointer;
+	background: var(--vscode-button-hoverBackground);
+}
+
+button:focus {
+	outline-color: var(--vscode-focusBorder);
+}
+
+button.secondary {
+	color: var(--vscode-button-secondaryForeground);
+	background: var(--vscode-button-secondaryBackground);
+}
+
+button.secondary:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+}
+
+input:not([type='checkbox']),
+textarea {
+	display: block;
+	width: 100%;
+	border: none;
+	font-family: var(--vscode-font-family);
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	color: var(--vscode-input-foreground);
+	outline-color: var(--vscode-input-border);
+	background-color: var(--vscode-input-background);
+}
+
+input::placeholder,
+textarea::placeholder {
+	color: var(--vscode-input-placeholderForeground);
+}
+
+
+.search-box {
+	display: grid;
+	grid-template-columns: minmax(100px,auto) 100px;
+	column-gap: 1rem;
+}
+
+.package {
+	display: grid;
+	grid-template-columns: 64px minmax(100px,auto) 100px;
+	column-gap: 1rem;
+}
+.package button {
+	height: fit-content;
+}
+
+.pagination {
+
+	display: grid;
+	grid-template-columns: auto 100px 50px 100px auto;
+	column-gap: 1rem;
+}
+.pagination span {
+	width: 100%;
+	text-align: center;
+}