hydrooj-addons-manager 0.1.3 → 1.0.0

package/README.md

@@ -0,0 +1,21 @@
+hydrooj-addons-manager Plugin for HydroOJ
+=======================================
+This plugin provides an Addons Manager for HydroOJ, allowing users to easily manage and install addons in web for their HydroOJ instance.
+
+Features
+--------
+- List installed addons
+- Add new addons via package name or Git URL
+- Remove existing addons
+- Update addons to the latest version
+
+hydrooj-addons-manager 套件 
+========================
+這個套件為 HydroOJ 提供了一個套件管理器，允許使用者在網頁介面中輕鬆管理和安裝 HydroOJ 的套件。
+
+功能
+--------
+- 列出已安裝的套件
+- 透過套件名稱或 Git URL 新增套件
+- 移除已存在的套件
+- 更新套件到最新版本

package/index.ts

@@ -1,189 +1,359 @@
-import {
-    Context, Handler, PRIV, Schema, 
-    Service, superagent, SystemModel, 
-    TokenModel, 
-    UserFacingError, ForbiddenError, Types,
-    Model,
-    requireSudo
-} from 'hydrooj';
-import { exec, spawn } from 'child_process';
-import * as fs from 'fs/promises';
-import * as path from 'path';
-import semver from 'semver';
-import validatePackageName from 'validate-npm-package-name';
-type CommandResult = {success: boolean, message?: string};
-type PackageInfo = {name: string, version: string};
-type PackageAction = 'add' | 'delete' | 'update';
-type PackageOperation = PackageInfo & {action: PackageAction};
-
-type AddonsManagerModel = {
-    manageAddon: (action: PackageAction, name: string, version?: string) => Promise<CommandResult>,
-    localUpdate: (name: string) => Promise<CommandResult>,
-    getActivedPackages: () => Promise<string[]>,
-    getLockedPackages: () => Promise<string[]>
-};
-function checkNpmPackageValidity(name : string): boolean {
-    return validatePackageName(name).validForNewPackages;
-}
-function checkNpmVersionValidity(name : string): boolean {
-    return name === '' || semver.valid(name) !== null;
-}
-function checkPackageIsLocal(name : string): boolean {
-    return name[0] === '/' && path.isAbsolute(name);
-}
-class AddonsManagerHandler extends Handler {
-    private static model: AddonsManagerModel;
-    static setModel(m: AddonsManagerModel) { this.model = m; }
-    @requireSudo
-    async get()
-    {
-        this.response.template = 'manage_addons.html';
-        const packages = await AddonsManagerHandler.model.getActivedPackages();
-        let lockedPackages = await AddonsManagerHandler.model.getLockedPackages();
-        for(const pkg of packages){
-            if(checkPackageIsLocal(pkg)) lockedPackages.push(pkg);
-        }
-        this.response.body = this.request.body ||{
-            packages: packages,
-            lockedPackages: lockedPackages,
-            result: null
-        };
-        this.renderHTML(this.response.template, {title: 'manage_addons'});
-    }
-    async post()
-    {
-        const body = this.request.body;
-        const packages = await AddonsManagerHandler.model.getActivedPackages();
-        let lockedPackages = await AddonsManagerHandler.model.getLockedPackages();
-        for(const pkg of packages){
-            if(checkPackageIsLocal(pkg)) lockedPackages.push(pkg);
-        }
-
-        let pkg: PackageOperation = 
-        {
-            name: body['package_name'],
-            version: body['package_version'] || '',
-            action: body['action']
-        };
-
-        // after computing packages, lockedPackages and building `pkg`
-        let result: CommandResult = { success: false, message: 'Unknown error' };
-
-        const isInstalled = packages.includes(pkg.name);
-        const isLocked = lockedPackages.includes(pkg.name);
-
-        if (checkPackageIsLocal(pkg.name)) {
-          if (pkg.action !== 'update') {
-            result = { success: false, message: 'Local packages can only be updated' };
-          } else {
-            result = await AddonsManagerHandler.model.localUpdate(pkg.name);
-          }
-        } else {
-          if (pkg.action === 'add' && isInstalled) {
-            result = { success: false, message: 'Package is already installed' };
-          } else if ((pkg.action === 'update' || pkg.action === 'delete') && !isInstalled) {
-            result = { success: false, message: 'Package is not installed' };
-          } else if (pkg.action === 'delete' && isLocked) {
-            result = { success: false, message: 'This package is locked and cannot be removed.' };
-          } else {
-            result = await AddonsManagerHandler.model.manageAddon(pkg.action, pkg.name, pkg.version);
-          }
-        }
-
-        // optional: better log formatting
-        console.log(`[Addons Manager] Action=${pkg.action} Package=${pkg.name} Version=${pkg.version} Result=${JSON.stringify(result)}`);
-        if(result.success){
-            this.back({
-                result: result, 
-                packages: packages,
-                lockedPackages: lockedPackages
-            });
-        }else {
-            throw new UserFacingError(result.message || 'Operation failed');
-        }
-        
-    }
-}
-
-async function sendCommand(command: string, args: string[], cwd: string): Promise<CommandResult> {
-  return new Promise((resolve) => {
-    const child = spawn(command, args, { cwd });
-    let stdout = '';
-    let stderr = '';
-    child.stdout?.on('data', (d) => { stdout += d.toString(); });
-    child.stderr?.on('data', (d) => { stderr += d.toString(); });
-    child.on('error', (error) => resolve({ success: false, message: error.message }));
-    child.on('close', (code) => {
-      resolve(code === 0
-        ? { success: true, message: stdout || stderr }
-        : { success: false, message: stderr || stdout || `Exit code ${code}` });
-    });
-  });
-}
-
-export default class AddonsManagerService extends Service {
-    static Config = Schema.object({
-        pathToHydro: Schema.string().description('Path to Hydro').required(),
-    });
-
-    constructor(ctx: Context, config: ReturnType<typeof AddonsManagerService.Config>) {
-        super(ctx, 'hydrooj-addons-manager');
-        ctx.Route('manage_addons', '/manage/addons', AddonsManagerHandler, PRIV.PRIV_ALL);
-        global.Hydro.ui.inject('ControlPanel', 'manage_addons');
-        init();
-        async function init() {
-            // Model functions
-            async function manageAddon(action: PackageAction, name: string, version: string = ''): Promise<CommandResult> {
-                if (!checkNpmPackageValidity(name)) return {success: false, message: 'Invalid package name'};
-                if (version !== '' && !checkNpmVersionValidity(version)) return {success: false, message: 'Invalid version'};
-
-                let result: CommandResult = {success: false, message: 'Unknown error'};
-                switch (action) {
-                    case 'delete':
-                        await sendCommand('yarn', ['global', 'remove', name], config.pathToHydro);
-                        const rmRes = await sendCommand('hydrooj', ['addon', 'remove', name], config.pathToHydro);
-                        result = rmRes;
-                        break;
-                    case 'update':
-                        result = await sendCommand('yarn', ['global', 'upgrade', name + (version ? '@' + version : ''), '--latest'], config.pathToHydro);
-                        break;
-                    case 'add':
-                        await sendCommand('yarn', ['global', 'add', name + (version ? '@' + version : '')], config.pathToHydro);
-                        result = await sendCommand('hydrooj', ['addon', 'add', name], config.pathToHydro);
-                        break;
-                }
-                return result;
-            }
-            async function localUpdate(name: string): Promise<CommandResult> {
-                if (!checkPackageIsLocal(name)) return {success: false, message: 'Not a local package'};
-                let result: CommandResult = {success: false, message: 'Unknown error'};
-                result = await sendCommand('git', ['pull', 'origin', 'main'], name);
-                return result;
-            }
-            async function getActivedPackages(): Promise<string[]> {
-                try {
-                    const data = await fs.readFile(config.pathToHydro+'addon.json', 'utf-8');
-                    return JSON.parse(data);
-                } catch (err) {
-                    return [];
-                }
-            }
-
-            async function getLockedPackages(): Promise<string[]> {
-                try {
-                    const data = await fs.readFile(config.pathToHydro+'addon-locked.json', 'utf-8');
-                    return JSON.parse(data);
-                } catch (err) {
-                    return [];
-                }
-            }
-            const addonsManagerModel: AddonsManagerModel = { 
-                manageAddon: manageAddon,
-                localUpdate: localUpdate,
-                getActivedPackages: () => getActivedPackages(), 
-                getLockedPackages: () => getLockedPackages()
-            };
-            AddonsManagerHandler.setModel(addonsManagerModel);
-        }
-    }
+import {
+    Context, Handler, PRIV, Schema, 
+    Service, superagent, SystemModel, 
+    TokenModel, 
+    UserFacingError, ForbiddenError, Types,
+    Model,
+    requireSudo
+} from 'hydrooj';
+import { spawn } from 'child_process';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import semver from 'semver';
+import validatePackageName from 'validate-npm-package-name';
+
+// Constants
+const ADDON_JSON = 'addon.json';
+const ADDON_LOCKED_JSON = 'addon-locked.json';
+const ADDONS_DIR = 'addons/';
+const TEMPLATE_NAME = 'manage_addons.html';
+const ROUTE_PATH = '/manage/addons';
+const DEFAULT_BRANCH = 'main';
+const LOG_PREFIX = '[Addons Manager]';
+
+// Types
+type CommandResult = { success: boolean; message?: string };
+type PackageInfo = { name: string; version: string };
+type PackageAction = 'add' | 'delete' | 'update';
+type PackageOperation = PackageInfo & { action: PackageAction };
+type ManagerResponse = {
+    packages: string[];
+    lockedPackages: string[];
+    success: boolean | null;
+    result: string | null;
+};
+
+type AddonsManagerModel = {
+    manageAddon: (action: PackageAction, name: string, version?: string) => Promise<CommandResult>;
+    localUpdate: (name: string) => Promise<CommandResult>;
+    localDelete: (name: string) => Promise<CommandResult>;
+    localAdd: (name: string) => Promise<CommandResult>;
+    getActivedPackages: () => Promise<string[]>;
+    getLockedPackages: () => Promise<string[]>;
+    localPackageName: (name: string) => string;
+};
+
+// Validators
+const PackageValidator = {
+    checkNpmPackageName(name: string): boolean {
+        return validatePackageName(name).validForNewPackages;
+    },
+    checkNpmVersion(version: string): boolean {
+        return version === '' || semver.valid(version) !== null;
+    },
+    checkPackageIsGitUrl(name: string): boolean {
+        return name.endsWith('.git') && (name.startsWith('http://') || name.startsWith('https://') || name.startsWith('git@'));
+    },
+    checkPackageIsLocal(name: string): boolean {
+        return (name[0] === '/' && path.isAbsolute(name)) || this.checkPackageIsGitUrl(name);
+    }
+};
+class AddonsManagerHandler extends Handler {
+    private static model: AddonsManagerModel;
+
+    static setModel(m: AddonsManagerModel) { 
+        this.model = m; 
+    }
+
+    private async getManagerResponse(): Promise<ManagerResponse> {
+        const packages = await AddonsManagerHandler.model.getActivedPackages();
+        const lockedPackages = await AddonsManagerHandler.model.getLockedPackages();
+        return {
+            packages,
+            lockedPackages,
+            success: null,
+            result: null
+        };
+    }
+
+    @requireSudo
+    async get() {
+        this.response.template = TEMPLATE_NAME;
+        const response = await this.getManagerResponse();
+        this.response.body = this.request.body || response;
+        this.renderHTML(this.response.template, { title: 'manage_addons' });
+    }
+
+    async post() {
+        const body = this.request.body;
+        const pkg: PackageOperation = {
+            name: body['package_name'],
+            version: body['package_version'] || '',
+            action: body['action']
+        };
+
+        const result = await this.handlePackageOperation(pkg);
+        this.logOperation(pkg, result);
+
+        if (result.success) {
+            const response = await this.getManagerResponse();
+            this.response.template = TEMPLATE_NAME;
+            this.response.body = {
+                ...response,
+                success: result.success,
+                result: result.message || 'Operation successful'
+            };
+            this.renderHTML(this.response.template, { title: 'manage_addons' });
+        } else {
+            throw new UserFacingError(result.message || 'Operation failed');
+        }
+    }
+
+    private async handlePackageOperation(pkg: PackageOperation): Promise<CommandResult> {
+        const packages = await AddonsManagerHandler.model.getActivedPackages();
+        const lockedPackages = await AddonsManagerHandler.model.getLockedPackages();
+
+        const isInstalled = packages.includes(pkg.name) || 
+                          packages.includes(AddonsManagerHandler.model.localPackageName(pkg.name));
+        const isLocked = lockedPackages.includes(pkg.name);
+
+        return PackageValidator.checkPackageIsLocal(pkg.name)
+            ? this.handleLocalPackageOperation(pkg, isInstalled, isLocked)
+            : this.handleRemotePackageOperation(pkg, isInstalled, isLocked);
+    }
+
+    private async handleLocalPackageOperation(pkg: PackageOperation, isInstalled: boolean, isLocked: boolean): Promise<CommandResult> {
+        const localName = AddonsManagerHandler.model.localPackageName(pkg.name);
+        
+        if (localName === '') {
+            return { success: false, message: 'Invalid local package path.' };
+        }
+
+        switch (pkg.action) {
+            case 'add':
+                return AddonsManagerHandler.model.localAdd(pkg.name);
+            case 'update':
+                if (isInstalled) {
+                    return AddonsManagerHandler.model.localUpdate(pkg.name);
+                }
+                return { success: false, message: 'Package is already installed. Use local update instead.' };
+            case 'delete':
+                return AddonsManagerHandler.model.localDelete(pkg.name);
+            default:
+                return { success: false, message: 'Unknown action' };
+        }
+    }
+
+    private async handleRemotePackageOperation(
+        pkg: PackageOperation, 
+        isInstalled: boolean, 
+        isLocked: boolean
+    ): Promise<CommandResult> {
+        switch (pkg.action) {
+            case 'add':
+                if (isInstalled) {
+                    return { success: false, message: 'Package is already installed' };
+                }
+                break;
+            case 'update':
+            case 'delete':
+                if (!isInstalled) {
+                    return { success: false, message: 'Package is not installed' };
+                }
+                break;
+        }
+
+        if (pkg.action === 'delete' && isLocked) {
+            return { success: false, message: 'This package is locked and cannot be removed.' };
+        }
+
+        return AddonsManagerHandler.model.manageAddon(pkg.action, pkg.name, pkg.version);
+    }
+
+    private logOperation(pkg: PackageOperation, result: CommandResult): void {
+        console.log(
+            `${LOG_PREFIX} Action=${pkg.action} Package=${pkg.name} Version=${pkg.version} Result=${JSON.stringify(result)}`
+        );
+    }
+}
+
+async function sendCommand(command: string, args: string[], cwd: string): Promise<CommandResult> {
+    return new Promise((resolve) => {
+        const child = spawn(command, args, { cwd });
+        let stdout = '';
+        let stderr = '';
+
+        child.stdout?.on('data', (data) => { stdout += data.toString(); });
+        child.stderr?.on('data', (data) => { stderr += data.toString(); });
+        
+        child.on('error', (error) => {
+            resolve({ success: false, message: error.message });
+        });
+
+        child.on('close', (code) => {
+            if (code === 0) {
+                resolve({ success: true, message: stdout || stderr });
+            } else {
+                resolve({
+                    success: false,
+                    message: stderr || stdout || `Exit code ${code}`
+                });
+            }
+        });
+    });
+}
+
+export default class AddonsManagerService extends Service {
+    static Config = Schema.object({
+        pathToHydro: Schema.string().description('Path to Hydro').required(),
+    });
+
+    constructor(ctx: Context, config: ReturnType<typeof AddonsManagerService.Config>) {
+        super(ctx, 'hydrooj-addons-manager');
+        ctx.Route('manage_addons', ROUTE_PATH, AddonsManagerHandler, PRIV.PRIV_ALL);
+        global.Hydro.ui.inject('ControlPanel', 'manage_addons');
+        this.initialize(ctx, config);
+    }
+
+    private initialize(ctx: Context, config: ReturnType<typeof AddonsManagerService.Config>): void {
+        const model = this.createModel(config);
+        AddonsManagerHandler.setModel(model);
+    }
+
+    private createModel(config: ReturnType<typeof AddonsManagerService.Config>): AddonsManagerModel {
+        return {
+            manageAddon: (action, name, version = '') => this.manageAddon(action, name, version, config),
+            localUpdate: (name) => this.localUpdate(name, config),
+            localDelete: (name) => this.localDelete(name, config),
+            localAdd: (name) => this.localAdd(name, config),
+            getActivedPackages: () => this.getActivedPackages(config),
+            getLockedPackages: () => this.getLockedPackages(config),
+            localPackageName: (name) => this.extractLocalPackageName(name, config),
+        };
+    }
+
+    private async manageAddon(
+        action: PackageAction, 
+        name: string, 
+        version: string = '',
+        config: ReturnType<typeof AddonsManagerService.Config>
+    ): Promise<CommandResult> {
+        if (!PackageValidator.checkNpmPackageName(name)) {
+            return { success: false, message: 'Invalid package name' };
+        }
+        if (version !== '' && !PackageValidator.checkNpmVersion(version)) {
+            return { success: false, message: 'Invalid version' };
+        }
+
+        switch (action) {
+            case 'delete':
+                return this.deleteRemotePackage(name, config);
+            case 'update':
+                return this.updateRemotePackage(name, version, config);
+            case 'add':
+                return this.addRemotePackage(name, version, config);
+            default:
+                return { success: false, message: 'Unknown action' };
+        }
+    }
+
+    private async deleteRemotePackage(name: string, config: ReturnType<typeof AddonsManagerService.Config>): Promise<CommandResult> {
+        const yarnResult = await sendCommand('yarn', ['global', 'remove', name], config.pathToHydro);
+        if(!yarnResult.success) return yarnResult;
+        const result = await sendCommand('hydrooj', ['addon', 'remove', name], config.pathToHydro);
+        return { success: result.success, message: (yarnResult.message || '') + result.message };
+    }
+
+    private async updateRemotePackage(
+        name: string, 
+        version: string,
+        config: ReturnType<typeof AddonsManagerService.Config>
+    ): Promise<CommandResult> {
+        const packageSpec = version ? `${name}@${version}` : name;
+        return sendCommand('yarn', ['global', 'upgrade', packageSpec, '--latest'], config.pathToHydro);
+    }
+
+    private async addRemotePackage(
+        name: string, 
+        version: string,
+        config: ReturnType<typeof AddonsManagerService.Config>
+    ): Promise<CommandResult> {
+        const packageSpec = version ? `${name}@${version}` : name;
+        const yarnResult = await sendCommand('yarn', ['global', 'add', packageSpec], config.pathToHydro);
+        if(!yarnResult.success) return yarnResult;
+        const result = await sendCommand('hydrooj', ['addon', 'add', name], config.pathToHydro);
+        return { success: result.success, message: (yarnResult.message || '') + result.message };
+    }
+
+    private async localUpdate(name: string, config: ReturnType<typeof AddonsManagerService.Config>): Promise<CommandResult> {
+        if (!PackageValidator.checkPackageIsLocal(name)) {
+            return { success: false, message: 'Not a local package' };
+        }
+        const localPath = this.localPackagePath(name, config);
+        return sendCommand('git', ['pull', 'origin', DEFAULT_BRANCH], localPath);
+    }
+
+    private async localAdd(name: string, config: ReturnType<typeof AddonsManagerService.Config>): Promise<CommandResult> {
+        if (!PackageValidator.checkPackageIsLocal(name)) {
+            return { success: false, message: 'Not a local package' };
+        }
+        const deleteResult = await this.localDelete(name, config);
+        const gitResult = await sendCommand('git', ['clone', name], config.pathToHydro + ADDONS_DIR);
+        if (!gitResult.success) {
+            return gitResult;
+        }
+        const localPath = this.localPackagePath(name, config);
+        const result = await sendCommand('hydrooj', ['addon', 'add', localPath], config.pathToHydro);
+        return { success: result.success, message: (gitResult.message || '') + result.message };
+    }
+
+    private async localDelete(name: string, config: ReturnType<typeof AddonsManagerService.Config>): Promise<CommandResult> {
+        if (!PackageValidator.checkPackageIsLocal(name)) {
+            return { success: false, message: 'Not a local package' };
+        }
+        const localPath = this.localPackagePath(name, config);
+        const deleteResult : CommandResult = await fs.rm(localPath, { recursive: true, force: true })
+            .then(() => ({ success: true, message: 'Local package deleted successfully' }))
+            .catch((err) => ({ success: false, message: err.message }));
+        if (!deleteResult.success) {
+            return deleteResult;
+        }
+        const result = await sendCommand('hydrooj', ['addon', 'remove', localPath], config.pathToHydro);
+        return { success: result.success, message: (deleteResult.message || '') + result.message };
+    }
+
+    private async getActivedPackages(config: ReturnType<typeof AddonsManagerService.Config>): Promise<string[]> {
+        try {
+            const data = await fs.readFile(config.pathToHydro + ADDON_JSON, 'utf-8');
+            return JSON.parse(data);
+        } catch {
+            return [];
+        }
+    }
+
+    private async getLockedPackages(config: ReturnType<typeof AddonsManagerService.Config>): Promise<string[]> {
+        try {
+            const data = await fs.readFile(config.pathToHydro + ADDON_LOCKED_JSON, 'utf-8');
+            return JSON.parse(data);
+        } catch {
+            return [];
+        }
+    }
+
+    private extractLocalPackageName(name: string, config: ReturnType<typeof AddonsManagerService.Config>): string {
+        if (!PackageValidator.checkPackageIsLocal(name)) return '';
+        if(PackageValidator.checkPackageIsGitUrl(name)) {
+            const match = name.match(/([^/]+?)(\.git)?$/);
+            return match ? match[1] : '';
+        }
+        if(!name.startsWith(config.pathToHydro + ADDONS_DIR)) {
+            return '';
+        }
+        name = name.replace(config.pathToHydro + ADDONS_DIR, '');
+        return name ? name : '';
+    }
+    private localPackagePath(name: string, config: ReturnType<typeof AddonsManagerService.Config>): string {
+        const localName = this.extractLocalPackageName(name, config);
+        return path.join(config.pathToHydro, ADDONS_DIR, localName);
+    }
 }

package/locale/zh_TW.yaml

@@ -1,11 +1,11 @@
-__langname: 正體中文
-addons manager: 插件管理員
-activated package name: 已啟用套件名稱
-activate: 啟用
-add new package: 新增套件
-delete: 刪除
-package name: 套件名稱
-update: 更新
-version name *unnecessary: 版本名稱 *非必要
-need to restart hydrooj to make changes work: 需要重新啟動 HydroOJ 以使更改生效
+__langname: 正體中文
+addons manager: 插件管理員
+activated package name: 已啟用套件名稱
+activate: 啟用
+add new package: 新增套件
+delete: 刪除
+package name or package git url: 套件名稱或套件 Git URL
+update: 更新
+version name *unnecessary: 版本名稱 *非必要
+need to restart hydrooj to make changes work: 需要重新啟動 HydroOJ 以使更改生效
 manage_addons: 管理插件

package/package.json

@@ -1,15 +1,20 @@
-{
-  "name": "hydrooj-addons-manager",
-  "version": "0.1.3",
-  "description": "addons manager for hydrooj",
-  "main": "index.ts",
-  "author": "https://github.com/Bryan0324",
-  "dependencies": {
-    "semver": "^7.6.0",
-    "validate-npm-package-name": "^5.0.0"
-  },
-  "devDependencies": {
-    "@types/semver": "^7.7.1",
-    "@types/validate-npm-package-name": "^4.0.2"
-  }
-}
+{
+  "name": "hydrooj-addons-manager",
+  "version": "1.0.0",
+  "description": "addons manager for hydrooj",
+  "main": "index.ts",
+  "author": "https://github.com/Bryan0324",
+  "dependencies": {
+    "semver": "^7.6.0",
+    "validate-npm-package-name": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/semver": "^7.7.1",
+    "@types/validate-npm-package-name": "^4.0.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Bryan0324/npm-packages.git",
+    "directory": "hydro-plugins/hydrooj-addons-manager"
+  }
+}

package/templates/manage_addons.html

@@ -1,144 +1,143 @@
-{% extends "manage_base.html" %}
-{% block manage_content %}
-<div class="main">
-    <style>
-    .manage-addons .section__header { display: flex; flex-direction: column; gap: 12px; }
-    .manage-addons .section__title { margin: 0; font-size: 22px; }
-    .manage-addons .section__subtitle { margin: 8px 0 4px; font-size: 16px; color: #374151; }
-
-    .manage-addons #activate-package-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
-    .manage-addons .activate-package-form { margin: 0; }
-    .manage-addons .activate-package-item {
-    display: flex; align-items: center; gap: 12px; justify-content: space-between;
-    padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
-    }
-    .manage-addons .activate-package-item a { font-weight: 600; color: #111827; }
-    .manage-addons .activate-package-item:hover { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
-
-    .manage-addons .activate-package-item .btn { min-width: 96px; }
-    .manage-addons .activate-package-item .btn + .btn { margin-left: 8px; }
-
-    .manage-addons .activate-package-item input[type="text"] {
-    flex: 1; min-width: 160px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px;
-    }
-    .manage-addons .alert { margin: 6px 0 2px; }
-
-    /* Styled buttons */
-    .manage-addons .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding: 8px 12px;
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 1.2;
-    border: 1px solid transparent;
-    cursor: pointer;
-    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
-    user-select: none;
-    }
-
-    .manage-addons .btn:disabled {
-    opacity: .6;
-    cursor: not-allowed;
-    transform: none !important;
-    }
-
-    /* Primary */
-    .manage-addons .btn--primary {
-    background: #2563eb;
-    color: #fff;
-    border-color: #1d4ed8;
-    }
-    .manage-addons .btn--primary:hover { background: #1d4ed8; }
-    .manage-addons .btn--primary:active { transform: translateY(1px); }
-    .manage-addons .btn--primary:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(37,99,235,.25);
-    }
-
-    /* Secondary */
-    .manage-addons .btn--secondary {
-    background: #ffffff;
-    color: #111827;
-    border-color: #d1d5db;
-    }
-    .manage-addons .btn--secondary:hover { background: #f3f4f6; }
-    .manage-addons .btn--secondary:active { transform: translateY(1px); }
-    .manage-addons .btn--secondary:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(17,24,39,.15);
-    }
-
-    /* Danger */
-    .manage-addons .btn--danger {
-    background: #dc2626;
-    color: #fff;
-    border-color: #b91c1c;
-    }
-    .manage-addons .btn--danger:hover { background: #b91c1c; }
-    .manage-addons .btn--danger:active { transform: translateY(1px); }
-    .manage-addons .btn--danger:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(220,38,38,.25);
-    }
-
-    /* Dark mode button tweaks */
-    @media (prefers-color-scheme: dark) {
-    .manage-addons .btn--secondary {
-        background: transparent;
-        color: #e5e7eb;
-        border-color: #374151;
-    }
-    .manage-addons .btn--secondary:hover { background: #111827; }
-    .manage-addons .btn--primary { border-color: #1e40af; }
-    .manage-addons .btn--danger { border-color: #991b1b; }
-    }
-    </style>
-
-    <div class="section manage-addons">
-    <div class="section__header">
-        <h1 class="section__title" data-heading>{{ _('addons manager') }}</h1>
-        <h2 class="section__subtitle" data-heading>{{ _('activated package name') }}</h2>
-        <h2 class="section__subtitle" data-heading style="color: #ef4444; font-weight: 600;">{{ _('need to restart hydrooj to make changes work') }}</h2>
-        <ul id="activate-package-list">
-        {% for package in packages %}
-        <li>
-            <form method="post" class="activate-package-form">
-            <div class="activate-package-item">
-                <a>{{ package }}</a>
-                <input type="text" name="package_name" value="{{ package }}" hidden >
-                {% if package not in lockedPackages %}
-                <button type="submit" name="action" value="delete" class="btn btn--danger">{{ _('delete') }}</button>
-                {% endif %}
-                <button type="submit" name="action" value="update" class="btn btn--secondary">{{ _('update') }}</button>
-            </div>
-            </form>
-        </li>
-        {% endfor %}
-        </ul>
-        <h2 class="section__subtitle" data-heading>{{ _('add new package') }}</h2>
-        <form method="post" class="activate-package-form">
-        <div class="activate-package-item">
-            <input type="text" name="package_name" placeholder="{{ _('package name') }}" required>
-            <input type="text" name="package_version" placeholder="{{ _('version name *unnecessary') }}">
-            <button type="submit" name="action" value="add" class="btn btn--primary">{{ _('activate') }}</button>
-        </div>
-        </form>
-    {% if result %}
-    {% if result.success %}
-    <div class="alert alert--success">
-        {{ result.success }}
-    </div>
-    {% else %}
-    <div class="alert alert--danger">
-        {{ result.error }}
-    </div>
-    {% endif %}
-    {% endif %}
-    </div>
-    </div>
-</div>
+{% extends "manage_base.html" %}
+{% block manage_content %}
+<div class="main">
+    <style>
+    .manage-addons .section__header { display: flex; flex-direction: column; gap: 12px; }
+    .manage-addons .section__title { margin: 0; font-size: 22px; }
+    .manage-addons .section__subtitle { margin: 8px 0 4px; font-size: 16px; color: #374151; }
+
+    .manage-addons #activate-package-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
+    .manage-addons .activate-package-form { margin: 0; }
+    .manage-addons .activate-package-item {
+    display: flex; align-items: center; gap: 12px; justify-content: space-between;
+    padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
+    }
+    .manage-addons .activate-package-item a { font-weight: 600; color: #111827; }
+    .manage-addons .activate-package-item:hover { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
+
+    .manage-addons .activate-package-item .btn { min-width: 96px; }
+    .manage-addons .activate-package-item .btn + .btn { margin-left: 8px; }
+
+    .manage-addons .activate-package-item input[type="text"] {
+    flex: 1; min-width: 160px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px;
+    }
+    .manage-addons .alert { margin: 6px 0 2px; }
+
+    /* Styled buttons */
+    .manage-addons .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 1.2;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
+    user-select: none;
+    }
+
+    .manage-addons .btn:disabled {
+    opacity: .6;
+    cursor: not-allowed;
+    transform: none !important;
+    }
+
+    /* Primary */
+    .manage-addons .btn--primary {
+    background: #2563eb;
+    color: #fff;
+    border-color: #1d4ed8;
+    }
+    .manage-addons .btn--primary:hover { background: #1d4ed8; }
+    .manage-addons .btn--primary:active { transform: translateY(1px); }
+    .manage-addons .btn--primary:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(37,99,235,.25);
+    }
+
+    /* Secondary */
+    .manage-addons .btn--secondary {
+    background: #ffffff;
+    color: #111827;
+    border-color: #d1d5db;
+    }
+    .manage-addons .btn--secondary:hover { background: #f3f4f6; }
+    .manage-addons .btn--secondary:active { transform: translateY(1px); }
+    .manage-addons .btn--secondary:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(17,24,39,.15);
+    }
+
+    /* Danger */
+    .manage-addons .btn--danger {
+    background: #dc2626;
+    color: #fff;
+    border-color: #b91c1c;
+    }
+    .manage-addons .btn--danger:hover { background: #b91c1c; }
+    .manage-addons .btn--danger:active { transform: translateY(1px); }
+    .manage-addons .btn--danger:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(220,38,38,.25);
+    }
+
+    /* Dark mode button tweaks */
+    @media (prefers-color-scheme: dark) {
+    .manage-addons .btn--secondary {
+        background: transparent;
+        color: #e5e7eb;
+        border-color: #374151;
+    }
+    .manage-addons .btn--secondary:hover { background: #111827; }
+    .manage-addons .btn--primary { border-color: #1e40af; }
+    .manage-addons .btn--danger { border-color: #991b1b; }
+    }
+    </style>
+
+    <div class="section manage-addons">
+    <div class="section__header">
+        <h1 class="section__title" data-heading>{{ _('addons manager') }}</h1>
+        <h2 class="section__subtitle" data-heading>{{ _('activated package name') }}</h2>
+        <h2 class="section__subtitle" data-heading style="color: #ef4444; font-weight: 600;">{{ _('need to restart hydrooj to make changes work') }}</h2>
+        <ul id="activate-package-list">
+        {% for package in packages %}
+        <li>
+            <form method="post" class="activate-package-form">
+            <div class="activate-package-item">
+                <a>{{ package }}</a>
+                <input type="text" name="package_name" value="{{ package }}" hidden >
+                {% if package not in lockedPackages %}
+                <button type="submit" name="action" value="delete" class="btn btn--danger">{{ _('delete') }}</button>
+                {% endif %}
+                <button type="submit" name="action" value="update" class="btn btn--secondary">{{ _('update') }}</button>
+            </div>
+            </form>
+        </li>
+        {% endfor %}
+        </ul>
+        <h2 class="section__subtitle" data-heading>{{ _('add new package') }}</h2>
+        <form method="post" class="activate-package-form">
+        <div class="activate-package-item">
+            <input type="text" name="package_name" placeholder="{{ _('package name or package git url') }}" required>
+            <input type="text" name="package_version" placeholder="{{ _('version name *unnecessary') }}">
+            <button type="submit" name="action" value="add" class="btn btn--primary">{{ _('activate') }}</button>
+        </div>
+        </form>
+    </div>
+    </div>
+</div>
+<script>
+    const result = {{ result | dump | safe }};
+    console.log('Debug: ', result);
+</script>
+{% if success and result %}
+<script>
+    const message = {{ result | dump | safe }};
+    alert('✓ success:  ' + message);
+</script>
+{% endif %}
 {% endblock %}

package/templates/manage_base.html

@@ -1,24 +0,0 @@
-{% extends "layout/basic.html" %}
-{% block content %}
-<div class="row" data-sticky-parent>
-  <div class="medium-9 columns">
-  {% block manage_content %}{% endblock %}
-  </div>
-  <div class="medium-3 columns"><div data-sticky="large">
-    <div class="section side">
-      <ol class="menu">
-        <li class="menu__item">
-          <div class="menu__link expandable">
-            <span class="icon icon-info"></span> {{ _('Properties') }}
-          </div>
-          <ol class="menu collapsed">
-            {%- for item in ui.getNodes('ControlPanel') -%}
-              {{ sidemenu.render_item(item.icon, item.name) }}
-            {%- endfor -%}
-          </ol>
-        </li>
-      </ol>
-    </div>
-  </div></div>
-</div>
-{% endblock %}