Add the context menu with the duplicate option

As per the design document.

po/ca.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: numerus\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-03-08 11:23+0100\n"
+"POT-Creation-Date: 2023-03-08 11:51+0100\n"
 "PO-Revision-Date: 2023-01-18 17:08+0100\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Catalan <ca@dodds.net>\n"
@@ -135,7 +135,17 @@ msgctxt "title"
 msgid "Download"
 msgstr "Descàrrega"
 
-#: web/template/invoices/index.gohtml:69
+#: web/template/invoices/index.gohtml:29
+msgctxt "title"
+msgid "Actions"
+msgstr "Accions"
+
+#: web/template/invoices/index.gohtml:75 web/template/invoices/view.gohtml:14
+msgctxt "action"
+msgid "Duplicate"
+msgstr "Duplica"
+
+#: web/template/invoices/index.gohtml:85
 msgid "No invoices added yet."
 msgstr "No hi ha cap factura."
 
@@ -144,11 +154,6 @@ msgctxt "title"
 msgid "Invoice %s"
 msgstr "Factura %s"
 
-#: web/template/invoices/view.gohtml:14
-msgctxt "action"
-msgid "Duplicate"
-msgstr "Duplica"
-
 #: web/template/invoices/view.gohtml:17
 msgctxt "action"
 msgid "Download invoice"

po/es.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: numerus\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-03-08 11:23+0100\n"
+"POT-Creation-Date: 2023-03-08 11:51+0100\n"
 "PO-Revision-Date: 2023-01-18 17:45+0100\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Spanish <es@tp.org.es>\n"
@@ -135,7 +135,17 @@ msgctxt "title"
 msgid "Download"
 msgstr "Descargar"
 
-#: web/template/invoices/index.gohtml:69
+#: web/template/invoices/index.gohtml:29
+msgctxt "title"
+msgid "Actions"
+msgstr "Acciones"
+
+#: web/template/invoices/index.gohtml:75 web/template/invoices/view.gohtml:14
+msgctxt "action"
+msgid "Duplicate"
+msgstr "Duplicar"
+
+#: web/template/invoices/index.gohtml:85
 msgid "No invoices added yet."
 msgstr "No hay facturas."
 
@@ -144,11 +154,6 @@ msgctxt "title"
 msgid "Invoice %s"
 msgstr "Factura %s"
 
-#: web/template/invoices/view.gohtml:14
-msgctxt "action"
-msgid "Duplicate"
-msgstr "Duplicar"
-
 #: web/template/invoices/view.gohtml:17
 msgctxt "action"
 msgid "Download invoice"

web/static/numerus.css

@@ -418,34 +418,17 @@ fieldset {
 }
 
 /* Profile Menu */
-
+details.menu summary {
-#profile-menu {
-    position: relative;
-}
-
-#profile-menu summary {
-    width: 7rem;
-    height: 7rem;
-    margin: 1rem 0;
     display: flex;
+    cursor: pointer;
     justify-content: center;
     align-items: center;
-    border-radius: 50%;
-    border: none;
 }
 
-#profile-menu summary::-webkit-details-marker {
+details.menu summary::-webkit-details-marker {
     display: none;
 }
 
-#profile-menu summary, #profile-menu button {
-    cursor: pointer;
-}
-
-#profile-menu summary, #profile-menu ul {
-    background-color: var(--numerus--background-color);
-}
-
 details.menu[open] summary::before {
     background-color: var(--numerus--header--background-color);
     position: fixed;
@@ -460,23 +443,22 @@ details.menu[open] summary::before {
 }
 
 ul[role="menu"] {
+    position: absolute;
     padding: 0;
     list-style: none;
-}
+    background-color: var(--numerus--background-color);
-
-#profile-menu ul {
-    position: absolute;
-    right: -1.875em;
-    top: 100%;
-    padding: 1rem 2rem;
     z-index: 20;
 }
 
-#profile-menu li + li {
+ul[role="menu"].action-menu {
+    padding: 1rem 2rem;
+}
+
+ul[role="menu"].action-menu li + li {
     border-top: 1px solid var(--numerus--color--black);
 }
 
-#profile-menu button, #profile-menu a {
+ul[role="menu"].action-menu button, ul[role="menu"].action-menu a {
     font-size: 2rem;
     font-style: italic;
     height: 8rem;
@@ -490,12 +472,37 @@ ul[role="menu"] {
     text-transform: initial;
 }
 
-#profile-menu li i[class^='ri-'] {
+ul[role="menu"].action-menu li i[class^='ri-'] {
     margin-right: 2rem;
     color: var(--numerus--color--dark-gray);
 }
 
-#profile-menu summary:hover, #profile-menu summary:focus, #profile-menu button:hover, #profile-menu a:hover, body > nav a:hover {
+#profile-menu {
+    position: relative;
+}
+
+#profile-menu summary {
+    width: 7rem;
+    height: 7rem;
+    margin: 1rem 0;
+    border-radius: 50%;
+    border: none;
+}
+
+#profile-menu button {
+    cursor: pointer;
+}
+
+#profile-menu summary {
+    background-color: var(--numerus--background-color);
+}
+
+#profile-menu ul {
+    right: -1.875em;
+    top: 100%;
+}
+
+#profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav a:hover {
     background-color: var(--numerus--color--light-gray);
 }
 
@@ -534,20 +541,13 @@ main > nav {
 
 .invoice-status summary {
     height: 3rem;
-    display: block;
-}
-
-.invoice-status summary::-webkit-details-marker {
-    display: none;
 }
 
 .invoice-status ul {
     position: absolute;
     top: 0;
     left: 100%;
-    z-index: 20;
     padding: 2rem;
-    background: var(--numerus--color--white);
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -580,6 +580,14 @@ main > nav {
     background-color: var(--numerus--color--rosy);
 }
 
+.actions details {
+    position: relative;
+}
+
+.actions .action-menu {
+    right: 0;
+}
+
 /* Remix Icon */
 
 @font-face {

web/template/app.gohtml

@@ -13,7 +13,7 @@
 				<summary>
 					<i class="ri-eye-close-line ri-3x"></i>
 				</summary>
-				<ul role="menu">
+				<ul role="menu" class="action-menu">
 					<li role="presentation">
 						<a role="menuitem" href="{{ companyURI "/profile" }}">
 							<i class="ri-account-circle-line"></i>

web/template/invoices/index.gohtml

@@ -26,6 +26,7 @@
             <th>{{( pgettext "Label" "title" )}}</th>
             <th>{{( pgettext "Amount" "title" )}}</th>
             <th>{{( pgettext "Download" "title" )}}</th>
+            <th>{{( pgettext "Actions" "title" )}}</th>
         </tr>
         </thead>
         <tbody>
@@ -45,9 +46,11 @@
                                 <ul role="menu">
                                     {{- range $status, $name := $.InvoiceStatuses }}
                                         {{- if ne $status $invoice.Status }}
-                                            <li>
+                                            <li role="presentation">
-                                                <button type="submit" name="status" class="invoice-status-{{ $status }}"
+                                                <button role="menuitem" type="submit"
-                                                        value="{{ $status }}">{{ $name }}</button>
+                                                        name="status" value="{{ $status }}"
+                                                        class="invoice-status-{{ $status }}"
+                                                >{{ $name }}</button>
                                             </li>
                                         {{- end }}
                                     {{- end }}
@@ -62,6 +65,19 @@
                                                     title="{{( pgettext "Download invoice" "action" )}}"
                                                     aria-label="{{( pgettext "Download invoice %s" "action" )}}"><i
                                     class="ri-download-line"></i></a></td>
+                    <td class="actions">
+                        <details class="menu">
+                            <summary><i class="ri-more-line"></i></summary>
+                            <ul role="menu" class="action-menu">
+                                <li role="presentation">
+                                    <a role="menuitem" href="{{ companyURI "/invoices/new"}}?duplicate={{ .Slug }}">
+                                        <i class="ri-file-copy-line"></i>
+                                        {{( pgettext "Duplicate" "action" )}}
+                                    </a>
+                                </li>
+                            </ul>
+                        </details>
+                    </td>
                 </tr>
             {{- end }}
         {{ else }}