11 files changed, 92 insertions, 8 deletions
diff --git a/assets/.DS_Store b/assets/.DS_Store
index 5cbb3b6..f70562d 100644
--- a/assets/.DS_Store
+++ b/assets/.DS_Store
diff --git a/assets/dark.css b/assets/dark.css
index 8279657..a5085b1 100644
--- a/assets/dark.css
+++ b/assets/dark.css
@@ -60,7 +60,7 @@
         color: #666 !important;
     }
 
-    #filter, .btn, .form-check-input, .link, .btn-close {
+    #filter, #search, .btn, .form-check-input, .link, .btn-close {
         filter: invert(1) hue-rotate(180deg);
     }
 
diff --git a/assets/default.jpg b/assets/default.jpg
new file mode 100644
index 0000000..6e8e91e
--- /dev/null
+++ b/assets/default.jpg
diff --git a/assets/icons/notes-android.svg b/assets/icons/notes-android.svg
new file mode 100644
index 0000000..9e6fc98
--- /dev/null
+++ b/assets/icons/notes-android.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M62-253q10-102 63.036-187.845Q178.072-526.691 267-576l-70-121q-5-10-2-18.5t12-14.5q11-4 19-2t12.8 11.226L309-598q81.8-34.905 171-34.905T651-598l70.2-122.774Q726-730 734-732t19 2q9 6 12 14.5t-2 18.5l-70 121q88.928 49.309 141.964 135.155Q888-355 898-253H62Zm228.141-105Q309-358 323-372.141t14-33Q337-424 322.859-438t-33-14Q271-452 257-437.859t-14 33Q243-386 257.141-372t33 14Zm380 0Q689-358 703-372.141t14-33Q717-424 702.859-438t-33-14Q651-452 637-437.859t-14 33Q623-386 637.141-372t33 14Z"/></svg>
+\ No newline at end of file
diff --git a/assets/icons/notes-connect.svg b/assets/icons/notes-connect.svg
new file mode 100644
index 0000000..86c57b5
--- /dev/null
+++ b/assets/icons/notes-connect.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240.294-51Q195-51 163-82.706t-32-77Q131-205 162.8-237q31.801-32 77.23-32 9.128 0 20.549 2.5T283-259l106-131q-15-19-19.5-36.5T365-468l-155-51q-14 22-38.286 35-24.285 13-51.714 13-45.417 0-77.208-31.706Q11-534.412 11-579.706T42.757-657q31.758-32 77.125-32Q164-689 196-658.083q32 30.916 33 75.083 0 4-.5 5t-.5 2l155 55q10-16 27-29.5t41-21.5v-164q-38-9-59-38.9t-21-65.513q0-44.837 31.706-76.712t77-31.875Q525-949 557-917.208q32 31.791 32 77.208 0 35.2-20.5 65.1Q548-745 509-736v164q25 8 41 20.5t27 30.5l155-55q-1-3-1-3.167V-583q2-44.167 33.294-75.083 31.294-30.917 76-30.917T917-657.294q32 31.706 32 77T917.208-503Q885.417-471 840-471q-27.106 0-51.053-13Q765-497 750-519l-156 51q0 24-4 42t-19 35l106 131q11-4 22.421-6.5t20.549-2.5q45.429 0 77.23 31.706 31.8 31.706 31.8 77T797.294-83q-31.706 32-77 32T643-82.792Q611-114.583 611-160q0-17.193 4-32.096Q619-207 632-222L528-355q-19.022 10-47.011 10Q453-345 433-355L328-222q12 15 16.5 29.904Q349-177.193 349-160q0 45.417-31.706 77.208Q285.588-51 240.294-51ZM119.772-525Q142-525 158.5-541.272t16.5-38.5Q175-602 158.728-618.5t-38.5-16.5Q98-635 81.5-618.728t-16.5 38.5Q65-558 81.272-541.5t38.5 16.5Zm120 420Q262-105 278.5-121.272t16.5-38.5Q295-182 278.728-198.5t-38.5-16.5Q218-215 201.5-198.728t-16.5 38.5Q185-138 201.272-121.5t38.5 16.5Zm240-680Q502-785 518.5-801.272t16.5-38.5Q535-862 518.728-878.5t-38.5-16.5Q458-895 441.5-878.728t-16.5 38.5Q425-818 441.272-801.5t38.5 16.5Zm.214 386Q505-399 523-416.986q18-17.986 18-43T523.014-503q-17.986-18-43-18T437-503.014q-18 17.986-18 43T436.986-417q17.986 18 43 18Zm239.786 294Q742-105 758.5-121.272t16.5-38.5Q775-182 758.728-198.5t-38.5-16.5Q698-215 681.5-198.728t-16.5 38.5Q665-138 681.272-121.5t38.5 16.5Zm120-420Q862-525 878.5-541.272t16.5-38.5Q895-602 878.728-618.5t-38.5-16.5Q818-635 801.5-618.728t-16.5 38.5Q785-558 801.272-541.5t38.5 16.5ZM480-840ZM120-580Zm360 120Zm360-120ZM240-160Zm480 0Z"/></svg>
+\ No newline at end of file
diff --git a/assets/icons/notes-security.svg b/assets/icons/notes-security.svg
new file mode 100644
index 0000000..7ffcfec
--- /dev/null
+++ b/assets/icons/notes-security.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M268-88q-37 0-61.5-24.5T182-174v-344q0-37 24.5-61.5T268-604h36v-80q0-75 51.19-126.5T480-862q73.62 0 124.81 51.5T656-684v80h36q37 0 61.5 24.5T778-518v344q0 37-24.5 61.5T692-88H268Zm0-54h424q14 0 23-9t9-23v-344q0-14-9-23t-23-9H268q-14 0-23 9t-9 23v344q0 14 9 23t23 9Zm212.159-134Q509-276 528.5-295.659q19.5-19.66 19.5-48.5Q548-373 528.341-392.5q-19.66-19.5-48.5-19.5Q451-412 431.5-392.341q-19.5 19.66-19.5 48.5Q412-315 431.659-295.5q19.66 19.5 48.5 19.5ZM358-604h244v-80q0-51-35.618-87.5-35.617-36.5-86.5-36.5Q429-808 393.5-771.5 358-735 358-684v80ZM236-142v-408 408Z"/></svg>
+\ No newline at end of file
diff --git a/assets/js/common.js b/assets/js/common.js
new file mode 100644
index 0000000..4668316
--- /dev/null
+++ b/assets/js/common.js
@@ -0,0 +1,22 @@
+let style = document.createElement("style");
+
+if (window.MistAndroid) {
+    style.innerHTML =
+    `:root {
+        --android-navigation-bar: ${window.MistAndroid.getNavigationBarHeight()}px;
+        --android-status-bar: ${window.MistAndroid.getStatusBarHeight()}px;
+    }`;
+} else {
+    style.innerHTML =
+    `:root {
+        --android-navigation-bar: 0px;
+        --android-status-bar: 0px;
+    }`;
+}
+
+document.head.append(style);
+
+if (navigator.userAgent.includes("MistNative/darwin") || navigator.userAgent.includes("MistNative/win32")) {
+    document.getElementById("native-css").disabled = false;
+    document.body.classList.remove("crossplatform");
+}
+\ No newline at end of file
diff --git a/assets/shortcuts.js b/assets/js/shortcuts.js
index 2fa48ca..2fa48ca 100644
--- a/assets/shortcuts.js
+++ b/assets/js/shortcuts.js
diff --git a/assets/logo-monochrome.svg b/assets/logo-monochrome.svg
new file mode 100644
index 0000000..94da325
--- /dev/null
+++ b/assets/logo-monochrome.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:10;stroke-miterlimit:10;}
+	.st1{stroke:#000000;stroke-width:10;stroke-miterlimit:10;}
+</style>
+<path class="st0" d="M265.3,328.2c0.2,1.2,0.5,2.2-0.5,2.9c-1,0.7-1.9,0.3-2.6-0.4c-5.6-5.3-10.9-4.2-16,0.6
+	c-0.7,0.7-1.7,1.1-2.7,0.6s-1.1-1.5-0.9-2.5c0.7-3.3,7.1-7.5,11.8-7.5C259.3,322,263,324.2,265.3,328.2z"/>
+<path class="st0" d="M221.7,223.6c-8.7-10.6-17-21.6-26.5-31.5c-15.3-16.1-31.8-30.7-52.1-40.5c-13.3-6.4-27.1-9.4-41.7-6.9
+	c-9.1,1.6-16.3,5.7-18.6,15.5c-1.6,9.3-0.8,18.4,1.9,27.6c2.5,8.2,4.3,16.6,5.8,25.1c2.1,11.9,5.5,23.5,9.8,34.9
+	c5.1,13.6,11.7,26.4,20.1,38.2c2.6,4.4,6.9,6.7,11.3,8.8c2.5,2.6,5,0.9,7.8,0c6.3-2.5,12.5-5.4,19.1-7.1c18-4.8,36.4-5.9,55-6.2
+	c3.3-0.1,6.7-0.1,9.3-2.6c2.4-2.7,2.5-6.2,2.8-9.4c0.5-5.9,1.7-11.8,4-17.1c5.2-11.8-4.9-19.2-7.4-28.7
+	C222.2,223.6,221.9,223.6,221.7,223.6z"/>
+<path class="st0" d="M285.2,157.2h-9.4c-7.5,10.9-12.4,23.2-15,36.5c-0.8,4-2.2,6.1-6.6,5.1c-1.1-0.2-2.4-0.2-3.5,0.1
+	c-4.9,1.4-6.9-0.8-8.1-5.5c-3.4-13.3-8.9-25.5-16.9-36.2h-9c9.8,12.2,16.1,26.3,19.8,41.7c0.5,1.6,0.6,3.3-0.9,4.2
+	c-7.6,4.9-10.5,12.9-14.1,20.5c1.2,6.8,0.9,14.1,7.7,18.7c1.5,0.9,0.5,2.5-0.1,3.7c-4.5,10.1-6.2,20.8-7.3,31.7
+	c-1.7,2.7-2.9,5.3-3,8.5c-0.7,20.5,1.5,40.5,8.2,60c0.8,2.4,1.2,5.1,4.1,6c3,3.6,5.9,7.3,9.1,10.7c8.8,9.1,18.8,9,27.6,0
+	c2.9-3,5-6.5,7.1-10c1-1.8,1.4-4.1,3.5-5.2c1.7-0.7,2.2-2.2,2.6-3.7c4.7-16.4,7.2-33.2,6-50.3c-0.4-4.9,0.2-10.3-3.5-14.5
+	c-2.2-11.8-4.8-23.5-8.3-34.9c-0.5-1.5-0.7-3.2,0.5-4.4c4.8-4.8,5.4-11,5.9-17.3c-3.3-6.4-6.5-12.9-12.5-17.5
+	c-1.8-1.4-1.9-3.4-1.5-5.4C270.8,184.3,276.1,169.8,285.2,157.2z"/>
+<path class="st1" d="M217.8,147.9c-4.1-4.3-6.9-8.7-7.9-14.6c-1.2-7.2-5.6-12.4-12.6-15c-6.3-2.3-11.6,1.3-11.9,7.9
+	c-0.5,9.8,5.2,17.4,14.9,18.8c4.6,0.7,8,2.8,11,6c1.9,2,3.7,4.1,5.4,6.2h9C223.3,154,220.7,150.9,217.8,147.9z"/>
+<path class="st1" d="M299.3,144.8c7.5-1,13.6-4.9,18.4-10.7c2.9-3.6,3.8-7.9,1.2-12c-2.5-3.9-6.6-4.4-11-3.6
+	c-8.1,1.5-13.9,6.6-15.6,14.2c-1.3,6-4.3,10-8.2,14.2c-3.1,3.3-5.8,6.7-8.3,10.3h9.4c2.2-3,4.5-5.9,7.1-8.7
+	C294.2,146.4,296.3,145.2,299.3,144.8z"/>
+<path class="st1" d="M221.8,277.7c-1.6,25.4,0.9,50.4,9.3,74.6c-2,11.8-3.8,23.6-10.4,34.1c-7.1,11.4-17.3,16.6-30.6,16.1
+	c-9.4-0.4-14.4-4.4-16.8-13.5c-2.6-9.9-3.8-20-3.3-30.3c0.4-8.8,0.4-8.9-8-5.2c-8.1,3.5-16.5,6.3-25.1,8.2
+	c-4.3,0.9-8.6,1.1-12.8,0.2c-10.2-2.2-15.8-10-14.1-20.3c3-17.5,9.2-33.6,21.7-46.7c7.6-2.9,15.1-6.2,22.9-8.6
+	c19.4-6,39.5-7.4,59.8-7.4C216.9,278.7,219.5,279.1,221.8,277.7z"/>
+<path class="st1" d="M278.4,347.8c0.2-2.1-0.1-4.4,0.5-6.4c6-19.4,7-39.2,4.3-59.2c-0.1-0.9,0.2-1.9,0.3-2.9
+	c22.1-0.9,44.1-0.4,65.8,5.1c7.2,1.8,13.4,6.3,20.7,7.8c3.6,5.6,9,9.8,12.4,15.5c4.7,7.8,8.6,15.9,9.9,25c2.2,14.9-6.1,24-21,23
+	c-10.5-0.7-20.4-3.8-29.9-8.2c-5.8-2.6-5.7-2.7-5.3,3.5c0.5,10.2,0.9,20.3-1.1,30.5c-1.7,8.5-7.1,12.9-15.1,14.2
+	c-9.3,1.5-17.4-0.9-24.2-7.6C284.4,376.9,279.6,363.1,278.4,347.8z"/>
+<path class="st0" d="M356.7,256.6c-9.3,2-21,1.6-32.8,0.6c-3.3-0.3-4.9-2-5.1-5.3c-0.8-15.4,0-30.5,5.2-45.2
+	c2.6-7.4,8.4-11.1,16-12.1c5.3-0.8,10.1,2.5,11.7,7.6c1.3,4.2,0.8,8.5,0.3,12.8c-1,8-0.9,8,6.7,6c3.6-1,7.2-1.9,11-1.8
+	c7.8,0.2,11.8,4.8,10.7,12.6C378.9,242.5,369.4,253.2,356.7,256.6z"/>
+<path class="st0" d="M367.2,197c-2.5-9.6,4.7-22.5,14.2-25.4c6.5-2,11.8,1.1,13.1,7.8c1.9,9.4-5.6,21.9-14.8,24.7
+	C373.8,205.9,368.8,203,367.2,197z"/>
+<path class="st0" d="M180.4,219.1c2.4,11.6,3.8,23.4,2.9,35.5c-0.2,3.4-1.7,5-4.9,5.3c-10.7,1-21.4,2.2-32.2,0.4
+	c-12.4-2.1-23.3-13.3-24.9-25.8c-0.8-6.5,3.3-11.1,10.6-10.9c4.5,0.1,9,0.8,13.3,1.9c4.1,1.1,5,0,4.5-3.8c-0.5-3.9-1.2-7.8-1.1-11.7
+	c0.4-10,8.1-14.6,17.6-10.8C175.1,202.8,177.6,210.9,180.4,219.1z"/>
+<path class="st0" d="M134.8,193.6c0.4,1.2,0.7,4.1,0.1,7c-1.5,6.8-7.4,10-13.9,7.4c-7.8-3.1-14.4-13.1-14.2-21.4
+	c0.2-9.4,8.2-13.9,16.4-9.2C128.9,180.8,132.7,185.6,134.8,193.6z"/>
+<path class="st0" d="M268.3,304c0.4,1.1,0.2,2-0.6,2.8c-1,1-2.2,0.8-3.2,0c-7.2-6.1-14.3-4.8-21.4,0.3c-1.1,0.8-2.5,1.2-3.7-0.1
+	c-0.9-1.1-0.5-2.1,0.1-3.2c4.6-7.8,23.7-8.2,28.3-0.6C268,303.4,268.1,303.8,268.3,304z"/>
+<path class="st0" d="M250.9,274.9c4.9-1.1,9.3,0.9,12.9,5c0.9,1.1,1.7,2.4,0.7,3.7c-1.1,1.5-2.4,0.6-3.5-0.3
+	c-5.1-4.4-10.1-4.3-15.1,0.2c-1,0.9-2.2,2.1-3.5,0.9c-1.4-1.3-0.7-2.9,0.3-4.2C244.7,277.7,247.1,275.9,250.9,274.9z"/>
+<path class="st0" d="M420.6,160.4c-1.3-10.7-8.2-18.4-18.8-20.6c-7.3-1.5-14.4-1.3-21.6,0.4c-20.7,4.8-37.4,16.7-53,30.4
+	c-17.4,15.4-31.7,33.6-45.6,52.1c-2.4,0.9-2.6,3.1-3.1,5.3c-0.5,2.7-0.9,5.4-2.8,7.6c-3.2,3.8-3.2,8-2.1,12.7c2,8.1,5.1,16,5.7,24.5
+	c0.2,2.3,0.9,4.6,2.5,6.5c1.8,1.8,4,2.4,6.5,2.3c4.5-0.1,9-0.1,13.5,0c21,0.6,42,1.5,61.4,11.1c2.2,1.1,4.7,2.3,6.8-0.5
+	c5.3-1.4,9.3-4.8,13-8.7c5.7-6.1,9.6-13.4,13-20.9c10.8-24.3,16.6-50.1,22.1-76C420,178,421.7,169.3,420.6,160.4z"/>
+</svg>
diff --git a/assets/native.css b/assets/native.css
index 3e361ca..79260eb 100644
--- a/assets/native.css
+++ b/assets/native.css
@@ -13,7 +13,7 @@ body.navigation-body {
     display: none !important;
 }
 
-#filter, .list-group-item {
+#filter, #search, .list-group-item {
     background-color: rgba(255, 255, 255, .25) !important;
 }
 
@@ -33,7 +33,7 @@ body.navigation-body {
         display: none !important;
     }
 
-    #filter, .list-group-item {
+    #filter, #search, .list-group-item {
         background-color: rgba(0, 0, 0, .25) !important;
     }
 }
diff --git a/assets/styles.css b/assets/styles.css
index 100ea0d..a409a09 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -169,7 +169,7 @@ iframe {
     #navigation {
         position: fixed !important;
         top: unset !important;
-        bottom: 0 !important;
+        bottom: var(--android-navigation-bar) !important;
         left: 0 !important;
         right: 0 !important;
         width: 100vw !important;
@@ -180,7 +180,7 @@ iframe {
     iframe#player {
         position: fixed !important;
         top: unset !important;
-        bottom: 48px !important;
+        bottom: calc(48px + var(--android-navigation-bar)) !important;
         left: 0 !important;
         right: 0 !important;
         width: 100vw !important;
@@ -245,12 +245,12 @@ iframe {
     }
 
     #ui, #lyrics-page {
-        top: 0 !important;
-        bottom: 97px !important;
+        top: var(--android-status-bar) !important;
+        bottom: calc(97px + var(--android-navigation-bar)) !important;
         left: 0 !important;
         right: 0 !important;
         width: 100vw !important;
-        height: calc(100vh - 97px) !important;
+        height: calc(100vh - 97px - var(--android-navigation-bar) - var(--android-status-bar)) !important;
     }
 
     iframe#lyrics-page {
@@ -445,4 +445,9 @@ iframe {
 
 body.web {
     background-color: white;
+}
+
+.modal-dialog {
+    margin-top: calc(1.75rem + var(--android-status-bar));
+    margin-bottom: calc(1.75rem + var(--android-navigation-bar));
 }
 \ No newline at end of file