5 files changed, 54 insertions, 1 deletions
diff --git a/static/icons.css b/static/icons.css
index 39755a2..efbf8ca 100644
--- a/static/icons.css
+++ b/static/icons.css
@@ -93,4 +93,10 @@
   &.alternate-email {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12v1.45q0 1.475-1.012 2.513T18.5 17q-.875 0-1.65-.375t-1.3-1.075q-.725.725-1.638 1.088T12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12v1.45q0 .65.425 1.1T18.5 15t1.075-.45t.425-1.1V12q0-3.35-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20h5v2zm0-7q1.25 0 2.125-.875T15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15'/%3E%3C/svg%3E");
   }
+  &.more-horiz {
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 14q-.825 0-1.412-.587T4 12t.588-1.412T6 10t1.413.588T8 12t-.587 1.413T6 14m6 0q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m6 0q-.825 0-1.412-.587T16 12t.588-1.412T18 10t1.413.588T20 12t-.587 1.413T18 14'/%3E%3C/svg%3E");
+  }
+  &.delete-outline {
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z'/%3E%3C/svg%3E");
+  }
 }
diff --git a/static/note.css b/static/note.css
index 28f6fff..9b9eb65 100644
--- a/static/note.css
+++ b/static/note.css
@@ -133,8 +133,8 @@ article.note {
     padding: 0;
     display: grid;
     grid-auto-flow: column;
+    grid-template-columns: auto auto auto auto 1fr;
     gap: var(--spacing-double);
-    width: max-content;
 
     .interactButtonContainer {
       display: flex;
@@ -155,6 +155,13 @@ article.note {
       }
     }
 
+    .right {
+      justify-self: end;
+      color: var(--clr-action-default);
+      display: flex;
+      align-items: center;
+    }
+
     label {
       margin-left: var(--spacing-half);
       font-weight: bold;
diff --git a/static/popup-menu.css b/static/popup-menu.css
new file mode 100644
index 0000000..e0ec6c9
--- /dev/null
+++ b/static/popup-menu.css
@@ -0,0 +1,38 @@
+.menuButton {
+  display: flex;
+  &:not(:has(li)) {
+    display: none;
+  }
+}
+
+ul.popupMenu {
+  position: absolute;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  background: var(--clr-panel-background);
+  z-index: 10;
+  box-shadow: var(--overlay-shadow);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li > * {
+    padding: var(--spacing-single);
+    display: grid;
+    grid-template-columns: var(--icon-size) auto;
+    gap: var(--spacing-single);
+    align-items: center;
+
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: var(--font-normal-size) !important;
+    color: var(--clr-foreground) !important;
+    width: max-content !important;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  li:not(:last-child) {
+    border-bottom: var(--border);
+  }
+}
diff --git a/static/style.css b/static/style.css
index 54128ac..8cd33b9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -7,4 +7,5 @@
 @import url(pills.css);
 @import url(profile.css);
 @import url(mobilepanes.css);
+@import url(popup-menu.css);
 @import url(misc.css);
diff --git a/static/theme.css b/static/theme.css
index 161288f..f002669 100644
--- a/static/theme.css
+++ b/static/theme.css
@@ -46,6 +46,7 @@
   --icon-size: 24px;
   --avatar-size: 64px;
   --avatar-big-size: 96px;
+  --overlay-shadow: 0 0 8px #0004;
 
   accent-color: var(--clr-primary);
 }