first pass at accordion

2026-03-30 12:11:56 +00:00 · 2021-06-23 17:05:42 -06:00
parent 56f9bd4b89
commit 635072bf29
6 changed files with 823 additions and 7 deletions
--- a/ui/README.md
+++ b/ui/README.md
@@ -24,6 +24,12 @@ Then open  `patch-db`, `ws-example`, and `embassy-os`, in separate tabs.

 `git submodule update --init --recursive`

+`cd client/`
+
+`npm i`
+
+`npm run build`
+
 ### ws-example

 **Start the server**
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -67,6 +67,479 @@
        "typescript": "4.1.5"
      }
    },
+    "../../patch-db/client/node_modules/@babel/code-frame": {
+      "version": "7.14.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/highlight": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "../../patch-db/client/node_modules/@babel/helper-validator-identifier": {
+      "version": "7.14.5",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "../../patch-db/client/node_modules/@babel/highlight": {
+      "version": "7.14.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "../../patch-db/client/node_modules/@types/node": {
+      "version": "15.14.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/@types/uuid": {
+      "version": "8.3.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "../../patch-db/client/node_modules/arg": {
+      "version": "4.1.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/argparse": {
+      "version": "1.0.10",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "../../patch-db/client/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "../../patch-db/client/node_modules/buffer-from": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/builtin-modules": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "../../patch-db/client/node_modules/chalk": {
+      "version": "2.4.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "../../patch-db/client/node_modules/color-convert": {
+      "version": "1.9.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "../../patch-db/client/node_modules/color-name": {
+      "version": "1.1.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/commander": {
+      "version": "2.20.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/concat-map": {
+      "version": "0.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/create-require": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/diff": {
+      "version": "4.0.2",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "../../patch-db/client/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "../../patch-db/client/node_modules/esprima": {
+      "version": "4.0.1",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "../../patch-db/client/node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "ISC"
+    },
+    "../../patch-db/client/node_modules/function-bind": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/glob": {
+      "version": "7.1.7",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "../../patch-db/client/node_modules/has": {
+      "version": "1.0.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "../../patch-db/client/node_modules/has-flag": {
+      "version": "3.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "../../patch-db/client/node_modules/inflight": {
+      "version": "1.0.6",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "../../patch-db/client/node_modules/inherits": {
+      "version": "2.0.4",
+      "dev": true,
+      "license": "ISC"
+    },
+    "../../patch-db/client/node_modules/is-core-module": {
+      "version": "2.4.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "../../patch-db/client/node_modules/js-tokens": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "../../patch-db/client/node_modules/make-error": {
+      "version": "1.3.6",
+      "dev": true,
+      "license": "ISC"
+    },
+    "../../patch-db/client/node_modules/minimatch": {
+      "version": "3.0.4",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "../../patch-db/client/node_modules/minimist": {
+      "version": "1.2.5",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/mkdirp": {
+      "version": "0.5.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "../../patch-db/client/node_modules/once": {
+      "version": "1.4.0",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "../../patch-db/client/node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "../../patch-db/client/node_modules/path-parse": {
+      "version": "1.0.7",
+      "dev": true,
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/resolve": {
+      "version": "1.20.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "../../patch-db/client/node_modules/rxjs": {
+      "version": "6.6.7",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "../../patch-db/client/node_modules/semver": {
+      "version": "5.7.1",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "../../patch-db/client/node_modules/sorted-btree": {
+      "version": "1.5.0",
+      "license": "MIT"
+    },
+    "../../patch-db/client/node_modules/source-map": {
+      "version": "0.6.1",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "../../patch-db/client/node_modules/source-map-support": {
+      "version": "0.5.19",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "../../patch-db/client/node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "../../patch-db/client/node_modules/supports-color": {
+      "version": "5.5.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "../../patch-db/client/node_modules/ts-node": {
+      "version": "9.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "source-map-support": "^0.5.17",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.7"
+      }
+    },
+    "../../patch-db/client/node_modules/tslib": {
+      "version": "1.14.1",
+      "license": "0BSD"
+    },
+    "../../patch-db/client/node_modules/tslint": {
+      "version": "6.1.3",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "builtin-modules": "^1.1.1",
+        "chalk": "^2.3.0",
+        "commander": "^2.12.1",
+        "diff": "^4.0.1",
+        "glob": "^7.1.1",
+        "js-yaml": "^3.13.1",
+        "minimatch": "^3.0.4",
+        "mkdirp": "^0.5.3",
+        "resolve": "^1.3.2",
+        "semver": "^5.3.0",
+        "tslib": "^1.13.0",
+        "tsutils": "^2.29.0"
+      },
+      "bin": {
+        "tslint": "bin/tslint"
+      },
+      "engines": {
+        "node": ">=4.8.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >=3.0.0-dev || >= 3.1.0-dev || >= 3.2.0-dev || >= 4.0.0-dev"
+      }
+    },
+    "../../patch-db/client/node_modules/tsutils": {
+      "version": "2.29.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^1.8.1"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >= 3.0.0-dev || >= 3.1.0-dev"
+      }
+    },
+    "../../patch-db/client/node_modules/typescript": {
+      "version": "4.1.5",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "../../patch-db/client/node_modules/uuid": {
+      "version": "8.3.2",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "../../patch-db/client/node_modules/wrappy": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "ISC"
+    },
+    "../../patch-db/client/node_modules/yn": {
+      "version": "3.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/@angular-devkit/architect": {
      "version": "0.1102.14",
      "dev": true,
@@ -22189,6 +22662,317 @@
        "tslint": "^6.1.0",
        "typescript": "4.1.5",
        "uuid": "^8.3.2"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.14.5",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.14.5"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.5",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.14.5",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@types/node": {
+          "version": "15.14.1",
+          "dev": true
+        },
+        "@types/uuid": {
+          "version": "8.3.1",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "arg": {
+          "version": "4.1.3",
+          "dev": true
+        },
+        "argparse": {
+          "version": "1.0.10",
+          "dev": true,
+          "requires": {
+            "sprintf-js": "~1.0.2"
+          }
+        },
+        "balanced-match": {
+          "version": "1.0.2",
+          "dev": true
+        },
+        "brace-expansion": {
+          "version": "1.1.11",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "buffer-from": {
+          "version": "1.1.1",
+          "dev": true
+        },
+        "builtin-modules": {
+          "version": "1.1.1",
+          "dev": true
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "dev": true
+        },
+        "commander": {
+          "version": "2.20.3",
+          "dev": true
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "dev": true
+        },
+        "create-require": {
+          "version": "1.1.1",
+          "dev": true
+        },
+        "diff": {
+          "version": "4.0.2",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "dev": true
+        },
+        "esprima": {
+          "version": "4.0.1",
+          "dev": true
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "dev": true
+        },
+        "function-bind": {
+          "version": "1.1.1",
+          "dev": true
+        },
+        "glob": {
+          "version": "7.1.7",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "has": {
+          "version": "1.0.3",
+          "dev": true,
+          "requires": {
+            "function-bind": "^1.1.1"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "dev": true
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "dev": true,
+          "requires": {
+            "once": "^1.3.0",
+            "wrappy": "1"
+          }
+        },
+        "inherits": {
+          "version": "2.0.4",
+          "dev": true
+        },
+        "is-core-module": {
+          "version": "2.4.0",
+          "dev": true,
+          "requires": {
+            "has": "^1.0.3"
+          }
+        },
+        "js-tokens": {
+          "version": "4.0.0",
+          "dev": true
+        },
+        "js-yaml": {
+          "version": "3.14.1",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
+        "make-error": {
+          "version": "1.3.6",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "0.5.5",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "once": {
+          "version": "1.4.0",
+          "dev": true,
+          "requires": {
+            "wrappy": "1"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "dev": true
+        },
+        "path-parse": {
+          "version": "1.0.7",
+          "dev": true
+        },
+        "resolve": {
+          "version": "1.20.0",
+          "dev": true,
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        },
+        "rxjs": {
+          "version": "6.6.7",
+          "requires": {
+            "tslib": "^1.9.0"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "dev": true
+        },
+        "sorted-btree": {
+          "version": "1.5.0"
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "dev": true
+        },
+        "source-map-support": {
+          "version": "0.5.19",
+          "dev": true,
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "source-map": "^0.6.0"
+          }
+        },
+        "sprintf-js": {
+          "version": "1.0.3",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "ts-node": {
+          "version": "9.1.1",
+          "dev": true,
+          "requires": {
+            "arg": "^4.1.0",
+            "create-require": "^1.1.0",
+            "diff": "^4.0.1",
+            "make-error": "^1.1.1",
+            "source-map-support": "^0.5.17",
+            "yn": "3.1.1"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1"
+        },
+        "tslint": {
+          "version": "6.1.3",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "builtin-modules": "^1.1.1",
+            "chalk": "^2.3.0",
+            "commander": "^2.12.1",
+            "diff": "^4.0.1",
+            "glob": "^7.1.1",
+            "js-yaml": "^3.13.1",
+            "minimatch": "^3.0.4",
+            "mkdirp": "^0.5.3",
+            "resolve": "^1.3.2",
+            "semver": "^5.3.0",
+            "tslib": "^1.13.0",
+            "tsutils": "^2.29.0"
+          }
+        },
+        "tsutils": {
+          "version": "2.29.0",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
+        },
+        "typescript": {
+          "version": "4.1.5",
+          "dev": true
+        },
+        "uuid": {
+          "version": "8.3.2"
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "dev": true
+        },
+        "yn": {
+          "version": "3.1.1",
+          "dev": true
+        }
      }
    },
    "path-browserify": {
--- a/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.module.ts
+++ b/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.module.ts
@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
-import { AppReleaseNotesList } from './app-release-notes-list.page'
+import { AppReleaseNotesListPage } from './app-release-notes-list.page'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'

 const routes: Routes = [
  {
    path: '',
-    component: AppReleaseNotesList,
+    component: AppReleaseNotesListPage,
  },
 ]

@@ -21,6 +21,6 @@ const routes: Routes = [
    PwaBackComponentModule,
    SharingModule,
  ],
-  declarations: [AppReleaseNotesList],
+  declarations: [AppReleaseNotesListPage],
 })
 export class AppReleaseNotesListModule { }
--- a/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.html
+++ b/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.html
@@ -7,6 +7,17 @@
  </ion-toolbar>
 </ion-header>

-<ion-content *ngIf="pkg">
-  hello
+<ion-content>
+  <ion-spinner *ngIf="!pkg; else loaded" class="center" name="lines" color="warning"></ion-spinner>
+
+  <ng-template #loaded>
+    <div *ngFor="let note of pkg['release-notes'] | keyvalue : asIsOrder">
+      <ion-button (click)="setSelected(note.key)"  expand="full" color="light" style="height: 50px;" >
+        <p style="position: absolute; left: 10px;">{{note.key | displayEmver}}</p>
+      </ion-button>
+      <ion-card *ngIf="selected === note.key" class="acc-text" color="light" >
+        <ion-text id='release-notes' [innerHTML]="note.value | markdown"></ion-text>
+      </ion-card>
+    </div>
+  </ng-template>
 </ion-content>
--- a/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.scss
+++ b/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.scss
@@ -1,3 +1,8 @@
 .metric-note {
  font-size: 16px;
+}
+
+.acc-text {
+  margin: 0px 0px 10px 0px;
+  padding: 15px;
 }
--- a/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.ts
+++ b/ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.ts
@@ -1,6 +1,5 @@
 import { Component } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
 import { AvailableShow } from 'src/app/services/api/api-types'
 import { ApiService } from 'src/app/services/api/api.service'

@@ -9,10 +8,12 @@ import { ApiService } from 'src/app/services/api/api.service'
  templateUrl: './app-release-notes-list.page.html',
  styleUrls: ['./app-release-notes-list.page.scss'],
 })
-export class AppReleaseNotesList {
+export class AppReleaseNotesListPage {
  loading = true
+  error = ''
  pkgId: string
  pkg: AvailableShow
+  selected: string

  constructor (
    private readonly route: ActivatedRoute,
@@ -22,6 +23,7 @@ export class AppReleaseNotesList {

  ngOnInit () {
    this.pkgId = this.route.snapshot.paramMap.get('pkgId')
+    this.getPkg()
  }

  async getPkg (version?: string): Promise<void> {
@@ -36,6 +38,14 @@ export class AppReleaseNotesList {
    }
  }

+  setSelected (selected: string) {
+    if (this.selected === selected) {
+      this.selected = null
+    } else {
+      this.selected = selected
+    }
+  }
+
  asIsOrder (a: any, b: any) {
    return 0
  }