From 0e57205ea5a80393c5c16629953d94586cbc9f60 Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 26 Jul 2022 00:16:47 -0400
Subject: [PATCH 01/19] Implement naive code splitting

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/router/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 48e7ff47f..b8ebecf4b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,11 +7,11 @@
 import Vue from "vue"
 import VueRouter from "vue-router"
 
-import Index from "../components/AppIndex.vue"
-import NotFound from "../components/NotFound.vue"
-import RecipeView from "../components/RecipeView.vue"
-import RecipeEdit from "../components/RecipeEdit.vue"
-import Search from "../components/SearchResults.vue"
+const Index = () => import(/* webpackPrefetch: true */ "../components/AppIndex.vue")
+const NotFound = () => import(/* webpackPrefetch: true */ "../components/NotFound.vue")
+const RecipeView = () => import(/* webpackPrefetch: true */ "../components/RecipeView.vue")
+const RecipeEdit = () => import(/* webpackPrefetch: true */ "../components/RecipeEdit.vue")
+const Search = () => import(/* webpackPrefetch: true */ "../components/SearchResults.vue")
 
 Vue.use(VueRouter)
 

From 896a232b5bd677ef2feb6f2fc90eac7d6601d516 Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 26 Jul 2022 00:49:56 -0400
Subject: [PATCH 02/19] Dynamically load moment locales

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/main.js       | 4 ++++
 webpack.config.js | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/src/main.js b/src/main.js
index 306ea61ee..8487314db 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,7 @@
 
 // Markdown
 import VueShowdown from "vue-showdown"
+import moment from 'moment'
 
 import Vue from "vue"
 
@@ -32,6 +33,9 @@ __webpack_nonce__ = btoa(OC.requestToken)
 
 helpers.useRouter(router)
 
+const locale = document.documentElement.getAttribute('data-locale')
+import(`moment/locale/${locale}.js`).then(() => moment.locale(locale))
+
 // A simple function to sanitize HTML tags
 // eslint-disable-next-line no-param-reassign
 window.escapeHTML = helpers.escapeHTML
diff --git a/webpack.config.js b/webpack.config.js
index 2eeea9c77..5a5f5a807 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -29,6 +29,9 @@ function cookbookConfig (env) {
                 '__webpack_use_dev_server__': env.dev_server || false,
                 'verboseDebugLogging': isDev && (process.env.VERBOSE || false),
             }),
+            // Don't import all locales at once
+            // Only the needed locale is dynamically loaded later
+            new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }),
         ],
         resolve: {
             'alias': {

From 0207accacb9691ca1bf779b1975f2cae14e4560b Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 26 Jul 2022 01:05:24 -0400
Subject: [PATCH 03/19] Ignore calendar-js

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 webpack.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webpack.config.js b/webpack.config.js
index 5a5f5a807..2dc724b02 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -32,6 +32,7 @@ function cookbookConfig (env) {
             // Don't import all locales at once
             // Only the needed locale is dynamically loaded later
             new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }),
+            new webpack.IgnorePlugin({ resourceRegExp: /calendar-js/ }),
         ],
         resolve: {
             'alias': {

From f6226cce8e7db0575ad4ddd774c02f5c8427ac35 Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 26 Jul 2022 15:08:20 -0400
Subject: [PATCH 04/19] Ignore DatetimePicker

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 webpack.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webpack.config.js b/webpack.config.js
index 2dc724b02..6f5619efb 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -33,6 +33,7 @@ function cookbookConfig (env) {
             // Only the needed locale is dynamically loaded later
             new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }),
             new webpack.IgnorePlugin({ resourceRegExp: /calendar-js/ }),
+            new webpack.IgnorePlugin({ resourceRegExp: /DatetimePicker/ }),
         ],
         resolve: {
             'alias': {

From 409bde7f20b60123618124a1632a1f9c2e57a728 Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 26 Jul 2022 15:57:00 -0400
Subject: [PATCH 05/19] Fix dynamically loading moment locale

`en` is the default and cannot be dynamically loaded

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/main.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/main.js b/src/main.js
index 8487314db..6d1badb6a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,8 +33,16 @@ __webpack_nonce__ = btoa(OC.requestToken)
 
 helpers.useRouter(router)
 
-const locale = document.documentElement.getAttribute('data-locale')
-import(`moment/locale/${locale}.js`).then(() => moment.locale(locale))
+const locale = document.documentElement
+    .getAttribute("data-locale")
+    .replace("_", "-")
+    .toLowerCase()
+;// `en` is the default locale and cannot be dynamically imported. Will 404
+// https://github.com/moment/moment/issues/3624
+(locale === "en"
+    ? Promise.resolve()
+    : import(`moment/locale/${locale}.js`)
+).then(() => moment.locale(locale))
 
 // A simple function to sanitize HTML tags
 // eslint-disable-next-line no-param-reassign

From 7c4aa37660d79e979d34e115ba4e88fe2a923fc8 Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 26 Jul 2022 15:59:01 -0400
Subject: [PATCH 06/19] Only load markdown editor where needed (RecipeView)

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/components/RecipeView.vue | 9 +++++++++
 src/main.js                   | 9 +--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/RecipeView.vue b/src/components/RecipeView.vue
index 2b24a7ff9..0665e63cf 100644
--- a/src/components/RecipeView.vue
+++ b/src/components/RecipeView.vue
@@ -254,7 +254,9 @@
 </template>
 
 <script>
+import Vue from "vue"
 import moment from "@nextcloud/moment"
+import VueShowdown from "vue-showdown"
 
 import api from "cookbook/js/api-interface"
 import helpers from "cookbook/js/helper"
@@ -269,6 +271,13 @@ import RecipeNutritionInfoItem from "./RecipeNutritionInfoItem.vue"
 import RecipeTimer from "./RecipeTimer.vue"
 import RecipeTool from "./RecipeTool.vue"
 
+// Markdown for Vue
+// Used by RecipeTool, RecipeInstruction, and RecipeIngredient
+Vue.use(VueShowdown, {
+    // set default flavor for Markdown
+    flavor: "vanilla",
+})
+
 export default {
     name: "RecipeView",
     components: {
diff --git a/src/main.js b/src/main.js
index 6d1badb6a..4253c16ef 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,8 +6,7 @@
  */
 
 // Markdown
-import VueShowdown from "vue-showdown"
-import moment from 'moment'
+import moment from "moment"
 
 import Vue from "vue"
 
@@ -55,12 +54,6 @@ Vue.prototype.OC = OC
 // eslint-disable-next-line no-undef
 Vue.prototype.verboseDebugLogging = verboseDebugLogging
 
-// Markdown for Vue
-Vue.use(VueShowdown, {
-    // set default flavor for Markdown
-    flavor: "vanilla",
-})
-
 // TODO: Equivalent library for Vue3 when we make that transition:
 // https://github.com/rlemaigre/vue3-promise-dialog
 Vue.use(ModalDialogs)

From b5de43df54e5a396fc8d9afbf80629cd59580fe1 Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 26 Jul 2022 16:52:20 -0400
Subject: [PATCH 07/19] Implement SimpleActionInput

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/components/AppControls/AppControls.vue |   3 +-
 src/components/AppNavi.vue                 |   2 +-
 src/components/SimpleActionInput.vue       | 613 +++++++++++++++++++++
 3 files changed, 616 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SimpleActionInput.vue

diff --git a/src/components/AppControls/AppControls.vue b/src/components/AppControls/AppControls.vue
index 20cbd9681..1018a6639 100644
--- a/src/components/AppControls/AppControls.vue
+++ b/src/components/AppControls/AppControls.vue
@@ -175,7 +175,6 @@ import NcActions from "@nextcloud/vue/dist/Components/NcActions"
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton"
 // Cannot use `Button` else get `vue/no-reserved-component-names` eslint errors
 import NcButton from "@nextcloud/vue/dist/Components/NcButton"
-import NcActionInput from "@nextcloud/vue/dist/Components/NcActionInput"
 import NcLoadingIcon from "@nextcloud/vue/dist/Components/NcLoadingIcon"
 
 import PencilIcon from "icons/Pencil.vue"
@@ -193,6 +192,8 @@ import {
 import Location from "./Location.vue"
 import ModeIndicator from "./ModeIndicator.vue"
 
+import NcActionInput from "../SimpleActionInput.vue"
+
 export default {
     name: "AppControls",
     components: {
diff --git a/src/components/AppNavi.vue b/src/components/AppNavi.vue
index ece23572a..ed963c3d9 100644
--- a/src/components/AppNavi.vue
+++ b/src/components/AppNavi.vue
@@ -82,7 +82,6 @@
 </template>
 
 <script>
-import NcActionInput from "@nextcloud/vue/dist/Components/NcActionInput"
 import NcAppNavigation from "@nextcloud/vue/dist/Components/NcAppNavigation"
 import NcAppNavigationItem from "@nextcloud/vue/dist/Components/NcAppNavigationItem"
 import NcAppNavigationNew from "@nextcloud/vue/dist/Components/NcAppNavigationNew"
@@ -98,6 +97,7 @@ import { showSimpleAlertModal } from "cookbook/js/modals"
 
 import AppSettings from "./AppSettings.vue"
 import AppNavigationCaption from "./AppNavigationCaption.vue"
+import NcActionInput from "./SimpleActionInput.vue"
 
 export default {
     name: "AppNavi",
diff --git a/src/components/SimpleActionInput.vue b/src/components/SimpleActionInput.vue
new file mode 100644
index 000000000..72767d7b8
--- /dev/null
+++ b/src/components/SimpleActionInput.vue
@@ -0,0 +1,613 @@
+<template>
+    <li class="action">
+        <span class="action-input">
+            <slot name="icon">
+                <span :class="icon" class="action-input__icon" />
+            </slot>
+            <form
+                ref="form"
+                class="action-input__form"
+                :disabled="disabled"
+                @submit.prevent="onSubmit"
+            >
+                <input :id="id" type="submit" class="action-input__submit" />
+
+                <input
+                    :type="type"
+                    :value="value"
+                    :placeholder="text"
+                    :disabled="disabled"
+                    :aria-label="ariaLabel"
+                    v-bind="$attrs"
+                    :class="{ focusable: isFocusable }"
+                    class="action-input__input"
+                    @input="onInput"
+                    @change="onChange"
+                />
+                <label v-show="!disabled" :for="id" class="action-input__label">
+                    <ArrowRight :size="20" />
+                </label>
+            </form>
+        </span>
+    </li>
+</template>
+
+<script>
+const ActionGlobalMixin = {
+	before() {
+		// all actions requires a valid text content
+		// if none, forbid the component mount and throw error
+		if (!this.$slots.default || this.text.trim() === '') {
+			Vue.util.warn(`${this.$options.name} cannot be empty and requires a meaningful text content`, this)
+			this.$destroy()
+			this.$el.remove()
+		}
+	},
+
+	beforeUpdate() {
+		this.text = this.getText()
+	},
+
+	data() {
+		return {
+			// $slots are not reactive.
+			// We need to update  the content manually
+			text: this.getText(),
+		}
+	},
+
+	computed: {
+		isLongText() {
+			return this.text && this.text.trim().length > 20
+		},
+	},
+
+	methods: {
+		getText() {
+			return this.$slots.default ? this.$slots.default[0].text.trim() : ''
+		},
+	},
+}
+
+const GenRandomId = (length) => {
+	return Math.random()
+		.toString(36)
+		.replace(/[^a-z]+/g, '')
+		.slice(0, length || 5)
+}
+
+import ArrowRight from "icons/ArrowRight"
+
+export default {
+    name: "ActionInput",
+
+    components: {
+        ArrowRight,
+    },
+
+    mixins: [ActionGlobalMixin],
+
+    props: {
+        /**
+         * id attribute of the checkbox element
+         */
+        id: {
+            type: String,
+            default: () => "action-" + GenRandomId(),
+            validator: (id) => id.trim() !== "",
+        },
+        /**
+         * Icon to show with the action, can be either a CSS class or an URL
+         */
+        icon: {
+            type: String,
+            default: "",
+        },
+        /**
+         * type attribute of the input field
+         */
+        type: {
+            type: String,
+            default: "text",
+            validator(type) {
+                return (
+                    [
+                        "text",
+                    ].indexOf(type) > -1
+                )
+            },
+        },
+        /**
+         * value attribute of the input field
+         */
+        value: {
+            type: [String, Date, Number],
+            default: "",
+        },
+        /**
+         * disabled state of the input field
+         */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * aria-label attribute of the input field
+         */
+        ariaLabel: {
+            type: String,
+            default: "",
+        },
+    },
+
+    computed: {
+        /**
+         * determines if the action is focusable
+         *
+         * @return {boolean} is the action focusable ?
+         */
+        isFocusable() {
+            return !this.disabled
+        },
+    },
+
+    methods: {
+        onInput(event) {
+            /**
+             * Emitted on input events of the text field
+             *
+             * @type {Event|Date}
+             */
+            this.$emit("input", event)
+            /**
+             * Emitted when the inputs value changes
+             * ! DatetimePicker only send the value
+             *
+             * @type {string|Date}
+             */
+            this.$emit(
+                "update:value",
+                event.target ? event.target.value : event
+            )
+        },
+        onSubmit(event) {
+            event.preventDefault()
+            event.stopPropagation()
+            if (!this.disabled) {
+                /**
+                 * Emitted on submit of the input field
+                 *
+                 * @type {Event}
+                 */
+                this.$emit("submit", event)
+            } else {
+                // ignore submit
+                return false
+            }
+        },
+        onChange(event) {
+            /**
+             * Emitted on change of the input field
+             *
+             * @type {Event}
+             */
+            this.$emit("change", event)
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+@use 'sass:math';
+
+// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
+// recommended is 48px
+// 44px is what we choose and have very good visual-to-usability ratio
+$clickable-area: 44px;
+
+// background icon size
+// also used for the scss icon font
+$icon-size: 16px;
+
+// icon padding for a $clickable-area width and a $icon-size icon
+// ( 44px - 16px ) / 2
+$icon-margin: math.div($clickable-area - $icon-size, 2);
+
+// transparency background for icons
+$icon-focus-bg: rgba(127, 127, 127, .25);
+
+// popovermenu arrow width from the triangle center
+$arrow-width: 9px;
+
+// opacities
+$opacity_disabled: .5;
+$opacity_normal: .7;
+$opacity_full: 1;
+
+// menu round background hover feedback
+// good looking on dark AND white bg
+$action-background-hover: rgba(127, 127, 127, .25);
+
+// various structure data used in the 
+// `AppNavigation` component
+$header-height: 50px;
+$navigation-width: 300px;
+
+// mobile breakpoint
+$breakpoint-mobile: 1024px;
+
+// top-bar spacing
+$topbar-margin: 4px;
+button:not(.button-vue),
+input:not([type='range']),
+textarea {
+	margin: 0;
+	padding: 7px 6px;
+
+	cursor: text;
+
+	color: var(--color-text-lighter);
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius);
+	outline: none;
+	background-color: var(--color-main-background);
+
+	font-size: 13px;
+
+	&:not(:disabled):not(.primary) {
+		&:hover,
+		&:focus,
+		&.active {
+			/* active class used for multiselect */
+			border-color: var(--color-primary-element);
+			outline: none;
+		}
+
+		&:active {
+			color: var(--color-text-light);
+			outline: none;
+			background-color: var(--color-main-background);
+		}
+	}
+
+	&:disabled {
+		cursor: default;
+		opacity: $opacity_disabled;
+		color: var(--color-text-maxcontrast);
+		background-color: var(--color-background-dark);
+	}
+
+	&:required {
+		box-shadow: none;
+	}
+
+	&:invalid {
+		border-color: var(--color-error);
+		box-shadow: none !important;
+	}
+
+	/* Primary action button, use sparingly */
+	&.primary {
+		cursor: pointer;
+		color: var(--color-primary-text);
+		border-color: var(--color-primary-element);
+		background-color: var(--color-primary-element);
+
+		&:not(:disabled) {
+			&:hover,
+			&:focus,
+			&:active {
+				border-color: var(--color-primary-element-light);
+				background-color: var(--color-primary-element-light);
+			}
+			&:active {
+				color: var(--color-primary-text-dark);
+			}
+		}
+
+		&:disabled {
+			cursor: default;
+			color: var(--color-primary-text-dark);
+			// opacity is already defined to .5 if disabled
+			background-color: var(--color-primary-element);
+		}
+	}
+}
+@mixin action-active {
+	li {
+		&.active {
+			background-color: var(--color-background-hover);
+			border-radius: 6px;
+			padding: 0;
+		}
+	}
+}
+
+@mixin action--disabled {
+	.action--disabled {
+		pointer-events: none;
+		opacity: $opacity_disabled;
+		&:hover, &:focus {
+			cursor: default;
+			opacity: $opacity_disabled;
+		}
+		& * {
+			opacity: 1 !important;
+		}
+	}
+}
+
+
+@mixin action-item($name) {
+	.action-#{$name} {
+		display: flex;
+		align-items: flex-start;
+
+		width: 100%;
+		height: auto;
+		margin: 0;
+		padding: 0;
+		padding-right: $icon-margin;
+		box-sizing: border-box; // otherwise router-link overflows in Firefox
+
+		cursor: pointer;
+		white-space: nowrap;
+
+		opacity: $opacity_normal;
+		color: var(--color-main-text);
+		border: 0;
+		border-radius: 0; // otherwise Safari will cut the border-radius area
+		background-color: transparent;
+		box-shadow: none;
+
+		font-weight: normal;
+		font-size: var(--default-font-size);
+		line-height: $clickable-area;
+
+		&:hover,
+		&:focus {
+			opacity: $opacity_full;
+		}
+
+		& > span {
+			cursor: pointer;
+			white-space: nowrap;
+		}
+
+		&__icon {
+			width: $clickable-area;
+			height: $clickable-area;
+			opacity: $opacity_full;
+			background-position: $icon-margin center;
+			background-size: $icon-size;
+			background-repeat: no-repeat;
+		}
+
+		&::v-deep .material-design-icon {
+			width: $clickable-area;
+			height: $clickable-area;
+			opacity: $opacity_full;
+
+			.material-design-icon__svg {
+				vertical-align: middle;
+			}
+		}
+
+		// long text area
+		p {
+			max-width: 220px;
+			line-height: 1.6em;
+
+			// 14px are currently 1em line-height. Mixing units as '44px - 1.6em' does not work.
+			padding: #{math.div($clickable-area - 1.6 * 14px, 2)} 0;
+
+			cursor: pointer;
+			text-align: left;
+
+			// in case there are no spaces like long email addresses
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&__longtext {
+			cursor: pointer;
+			// allow the use of `\n`
+			white-space: pre-wrap;
+		}
+
+		&__title {
+			font-weight: bold;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			max-width: 100%;
+			display: inline-block;
+		}
+	}
+}
+@include action-active;
+@include action--disabled;
+
+$input-margin: 4px;
+
+.action-input {
+    display: flex;
+    align-items: flex-start;
+
+    width: 100%;
+    height: auto;
+    margin: 0;
+    padding: 0;
+
+    cursor: pointer;
+    white-space: nowrap;
+
+    color: var(--color-main-text);
+    border: 0;
+    border-radius: 0; // otherwise Safari will cut the border-radius area
+    background-color: transparent;
+    box-shadow: none;
+
+    font-weight: normal;
+
+    &::v-deep .material-design-icon {
+        width: $clickable-area;
+        height: $clickable-area;
+        opacity: $opacity_full;
+
+        .material-design-icon__svg {
+            vertical-align: middle;
+        }
+    }
+
+    // do not change the opacity of the datepicker
+    &:not(.action-input--picker) {
+        opacity: $opacity_normal;
+        &:hover,
+        &:focus {
+            opacity: $opacity_full;
+        }
+    }
+
+    // only change for the icon then
+    &--picker {
+        .action-input__icon {
+            opacity: $opacity_normal;
+        }
+        &:hover .action-input__icon,
+        &:focus .action-input__icon {
+            opacity: $opacity_full;
+        }
+    }
+
+    & > span {
+        cursor: pointer;
+        white-space: nowrap;
+    }
+
+    &__icon {
+        min-width: 0; /* Overwrite icons*/
+        min-height: 0;
+        /* Keep padding to define the width to
+			assure correct position of a possible text */
+        padding: #{math.div($clickable-area, 2)} 0 #{math.div(
+                $clickable-area,
+                2
+            )} $clickable-area;
+
+        background-position: #{$icon-margin} center;
+        background-size: $icon-size;
+    }
+
+    // Forms & text inputs
+    &__form {
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+
+        margin: $input-margin 0;
+        padding-right: $icon-margin;
+    }
+
+    &__submit {
+        position: absolute;
+        left: -10000px;
+        top: auto;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+    }
+
+    &__label {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: #{$clickable-area - $input-margin * 2};
+        height: #{$clickable-area - $input-margin * 2};
+        box-sizing: border-box;
+        margin: 0 0 0 -8px;
+        padding: 7px 6px;
+
+        opacity: $opacity_full;
+        color: var(--color-text-lighter);
+        border: 1px solid var(--color-border-dark);
+        border-left-color: transparent;
+        border-radius: 0 var(--border-radius) var(--border-radius) 0;
+        /* Avoid background under border */
+        background-color: var(--color-main-background);
+        background-clip: padding-box;
+
+        &,
+        * {
+            cursor: pointer;
+        }
+    }
+
+    /* Inputs inside popover supports text, submit & reset */
+    &__input {
+        flex: 1 1 auto;
+
+        min-width: $clickable-area * 3;
+        min-height: #{$clickable-area - $input-margin * 2}; /* twice the element margin-y */
+        max-height: #{$clickable-area - $input-margin * 2}; /* twice the element margin-y */
+        margin: 0;
+
+        // if disabled, change cursor
+        &:disabled {
+            cursor: default;
+        }
+
+        /* only show confirm borders if input is not focused */
+        &:not(:active):not(:hover):not(:focus) {
+            &:invalid {
+                & + .action-input__label {
+                    border-color: var(--color-error);
+                    border-left-color: transparent;
+                }
+            }
+            &:not(:disabled) + .action-input__label {
+                &:active,
+                &:hover,
+                &:focus {
+                    border-color: var(--color-primary-element);
+                    border-radius: var(--border-radius);
+                }
+            }
+        }
+        &:active,
+        &:hover,
+        &:focus {
+            &:not(:disabled) + .action-input__label {
+                /* above previous input */
+                z-index: 2;
+
+                border-color: var(--color-primary-element);
+                border-left-color: transparent;
+            }
+        }
+    }
+
+    &__picker::v-deep {
+        .mx-input {
+            margin: 0;
+        }
+    }
+
+    &__multi {
+        width: 100%;
+    }
+}
+
+// if a form is the last of the list
+// add the same bottomMargin as the right padding
+// for visual balance
+li:last-child > .action-input {
+    padding-bottom: $icon-margin - $input-margin;
+}
+
+// same for first item
+li:first-child > .action-input {
+    padding-top: $icon-margin - $input-margin;
+}
+</style>

From bf70e5568bc87daec93dd3c48ac8cfb9f9e5c41f Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 26 Jul 2022 16:52:37 -0400
Subject: [PATCH 08/19] Remove webpack IgnorePlugins

These are not needed with SimpleActionInput

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 webpack.config.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/webpack.config.js b/webpack.config.js
index 6f5619efb..5a5f5a807 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -32,8 +32,6 @@ function cookbookConfig (env) {
             // Don't import all locales at once
             // Only the needed locale is dynamically loaded later
             new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }),
-            new webpack.IgnorePlugin({ resourceRegExp: /calendar-js/ }),
-            new webpack.IgnorePlugin({ resourceRegExp: /DatetimePicker/ }),
         ],
         resolve: {
             'alias': {

From 6126792ccdd802953ec971611744e36e5a5d44cf Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 26 Jul 2022 16:53:16 -0400
Subject: [PATCH 09/19] Run prettier

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/components/SimpleActionInput.vue | 447 +++++++++++++--------------
 src/main.js                          |   5 +-
 src/router/index.js                  |  15 +-
 3 files changed, 235 insertions(+), 232 deletions(-)

diff --git a/src/components/SimpleActionInput.vue b/src/components/SimpleActionInput.vue
index 72767d7b8..25351389f 100644
--- a/src/components/SimpleActionInput.vue
+++ b/src/components/SimpleActionInput.vue
@@ -34,46 +34,49 @@
 
 <script>
 const ActionGlobalMixin = {
-	before() {
-		// all actions requires a valid text content
-		// if none, forbid the component mount and throw error
-		if (!this.$slots.default || this.text.trim() === '') {
-			Vue.util.warn(`${this.$options.name} cannot be empty and requires a meaningful text content`, this)
-			this.$destroy()
-			this.$el.remove()
-		}
-	},
-
-	beforeUpdate() {
-		this.text = this.getText()
-	},
-
-	data() {
-		return {
-			// $slots are not reactive.
-			// We need to update  the content manually
-			text: this.getText(),
-		}
-	},
-
-	computed: {
-		isLongText() {
-			return this.text && this.text.trim().length > 20
-		},
-	},
-
-	methods: {
-		getText() {
-			return this.$slots.default ? this.$slots.default[0].text.trim() : ''
-		},
-	},
+    before() {
+        // all actions requires a valid text content
+        // if none, forbid the component mount and throw error
+        if (!this.$slots.default || this.text.trim() === "") {
+            Vue.util.warn(
+                `${this.$options.name} cannot be empty and requires a meaningful text content`,
+                this
+            )
+            this.$destroy()
+            this.$el.remove()
+        }
+    },
+
+    beforeUpdate() {
+        this.text = this.getText()
+    },
+
+    data() {
+        return {
+            // $slots are not reactive.
+            // We need to update  the content manually
+            text: this.getText(),
+        }
+    },
+
+    computed: {
+        isLongText() {
+            return this.text && this.text.trim().length > 20
+        },
+    },
+
+    methods: {
+        getText() {
+            return this.$slots.default ? this.$slots.default[0].text.trim() : ""
+        },
+    },
 }
 
 const GenRandomId = (length) => {
-	return Math.random()
-		.toString(36)
-		.replace(/[^a-z]+/g, '')
-		.slice(0, length || 5)
+    return Math.random()
+        .toString(36)
+        .replace(/[^a-z]+/g, "")
+        .slice(0, length || 5)
 }
 
 import ArrowRight from "icons/ArrowRight"
@@ -110,11 +113,7 @@ export default {
             type: String,
             default: "text",
             validator(type) {
-                return (
-                    [
-                        "text",
-                    ].indexOf(type) > -1
-                )
+                return ["text"].indexOf(type) > -1
             },
         },
         /**
@@ -198,7 +197,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use 'sass:math';
+@use "sass:math";
 
 // https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
 // recommended is 48px
@@ -214,21 +213,21 @@ $icon-size: 16px;
 $icon-margin: math.div($clickable-area - $icon-size, 2);
 
 // transparency background for icons
-$icon-focus-bg: rgba(127, 127, 127, .25);
+$icon-focus-bg: rgba(127, 127, 127, 0.25);
 
 // popovermenu arrow width from the triangle center
 $arrow-width: 9px;
 
 // opacities
-$opacity_disabled: .5;
-$opacity_normal: .7;
+$opacity_disabled: 0.5;
+$opacity_normal: 0.7;
 $opacity_full: 1;
 
 // menu round background hover feedback
 // good looking on dark AND white bg
-$action-background-hover: rgba(127, 127, 127, .25);
+$action-background-hover: rgba(127, 127, 127, 0.25);
 
-// various structure data used in the 
+// various structure data used in the
 // `AppNavigation` component
 $header-height: 50px;
 $navigation-width: 300px;
@@ -239,191 +238,191 @@ $breakpoint-mobile: 1024px;
 // top-bar spacing
 $topbar-margin: 4px;
 button:not(.button-vue),
-input:not([type='range']),
+input:not([type="range"]),
 textarea {
-	margin: 0;
-	padding: 7px 6px;
-
-	cursor: text;
-
-	color: var(--color-text-lighter);
-	border: 1px solid var(--color-border-dark);
-	border-radius: var(--border-radius);
-	outline: none;
-	background-color: var(--color-main-background);
-
-	font-size: 13px;
-
-	&:not(:disabled):not(.primary) {
-		&:hover,
-		&:focus,
-		&.active {
-			/* active class used for multiselect */
-			border-color: var(--color-primary-element);
-			outline: none;
-		}
-
-		&:active {
-			color: var(--color-text-light);
-			outline: none;
-			background-color: var(--color-main-background);
-		}
-	}
-
-	&:disabled {
-		cursor: default;
-		opacity: $opacity_disabled;
-		color: var(--color-text-maxcontrast);
-		background-color: var(--color-background-dark);
-	}
-
-	&:required {
-		box-shadow: none;
-	}
-
-	&:invalid {
-		border-color: var(--color-error);
-		box-shadow: none !important;
-	}
-
-	/* Primary action button, use sparingly */
-	&.primary {
-		cursor: pointer;
-		color: var(--color-primary-text);
-		border-color: var(--color-primary-element);
-		background-color: var(--color-primary-element);
-
-		&:not(:disabled) {
-			&:hover,
-			&:focus,
-			&:active {
-				border-color: var(--color-primary-element-light);
-				background-color: var(--color-primary-element-light);
-			}
-			&:active {
-				color: var(--color-primary-text-dark);
-			}
-		}
-
-		&:disabled {
-			cursor: default;
-			color: var(--color-primary-text-dark);
-			// opacity is already defined to .5 if disabled
-			background-color: var(--color-primary-element);
-		}
-	}
+    margin: 0;
+    padding: 7px 6px;
+
+    cursor: text;
+
+    color: var(--color-text-lighter);
+    border: 1px solid var(--color-border-dark);
+    border-radius: var(--border-radius);
+    outline: none;
+    background-color: var(--color-main-background);
+
+    font-size: 13px;
+
+    &:not(:disabled):not(.primary) {
+        &:hover,
+        &:focus,
+        &.active {
+            /* active class used for multiselect */
+            border-color: var(--color-primary-element);
+            outline: none;
+        }
+
+        &:active {
+            color: var(--color-text-light);
+            outline: none;
+            background-color: var(--color-main-background);
+        }
+    }
+
+    &:disabled {
+        cursor: default;
+        opacity: $opacity_disabled;
+        color: var(--color-text-maxcontrast);
+        background-color: var(--color-background-dark);
+    }
+
+    &:required {
+        box-shadow: none;
+    }
+
+    &:invalid {
+        border-color: var(--color-error);
+        box-shadow: none !important;
+    }
+
+    /* Primary action button, use sparingly */
+    &.primary {
+        cursor: pointer;
+        color: var(--color-primary-text);
+        border-color: var(--color-primary-element);
+        background-color: var(--color-primary-element);
+
+        &:not(:disabled) {
+            &:hover,
+            &:focus,
+            &:active {
+                border-color: var(--color-primary-element-light);
+                background-color: var(--color-primary-element-light);
+            }
+            &:active {
+                color: var(--color-primary-text-dark);
+            }
+        }
+
+        &:disabled {
+            cursor: default;
+            color: var(--color-primary-text-dark);
+            // opacity is already defined to .5 if disabled
+            background-color: var(--color-primary-element);
+        }
+    }
 }
 @mixin action-active {
-	li {
-		&.active {
-			background-color: var(--color-background-hover);
-			border-radius: 6px;
-			padding: 0;
-		}
-	}
+    li {
+        &.active {
+            background-color: var(--color-background-hover);
+            border-radius: 6px;
+            padding: 0;
+        }
+    }
 }
 
 @mixin action--disabled {
-	.action--disabled {
-		pointer-events: none;
-		opacity: $opacity_disabled;
-		&:hover, &:focus {
-			cursor: default;
-			opacity: $opacity_disabled;
-		}
-		& * {
-			opacity: 1 !important;
-		}
-	}
+    .action--disabled {
+        pointer-events: none;
+        opacity: $opacity_disabled;
+        &:hover,
+        &:focus {
+            cursor: default;
+            opacity: $opacity_disabled;
+        }
+        & * {
+            opacity: 1 !important;
+        }
+    }
 }
 
-
 @mixin action-item($name) {
-	.action-#{$name} {
-		display: flex;
-		align-items: flex-start;
-
-		width: 100%;
-		height: auto;
-		margin: 0;
-		padding: 0;
-		padding-right: $icon-margin;
-		box-sizing: border-box; // otherwise router-link overflows in Firefox
-
-		cursor: pointer;
-		white-space: nowrap;
-
-		opacity: $opacity_normal;
-		color: var(--color-main-text);
-		border: 0;
-		border-radius: 0; // otherwise Safari will cut the border-radius area
-		background-color: transparent;
-		box-shadow: none;
-
-		font-weight: normal;
-		font-size: var(--default-font-size);
-		line-height: $clickable-area;
-
-		&:hover,
-		&:focus {
-			opacity: $opacity_full;
-		}
-
-		& > span {
-			cursor: pointer;
-			white-space: nowrap;
-		}
-
-		&__icon {
-			width: $clickable-area;
-			height: $clickable-area;
-			opacity: $opacity_full;
-			background-position: $icon-margin center;
-			background-size: $icon-size;
-			background-repeat: no-repeat;
-		}
-
-		&::v-deep .material-design-icon {
-			width: $clickable-area;
-			height: $clickable-area;
-			opacity: $opacity_full;
-
-			.material-design-icon__svg {
-				vertical-align: middle;
-			}
-		}
-
-		// long text area
-		p {
-			max-width: 220px;
-			line-height: 1.6em;
-
-			// 14px are currently 1em line-height. Mixing units as '44px - 1.6em' does not work.
-			padding: #{math.div($clickable-area - 1.6 * 14px, 2)} 0;
-
-			cursor: pointer;
-			text-align: left;
-
-			// in case there are no spaces like long email addresses
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		&__longtext {
-			cursor: pointer;
-			// allow the use of `\n`
-			white-space: pre-wrap;
-		}
-
-		&__title {
-			font-weight: bold;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-			max-width: 100%;
-			display: inline-block;
-		}
-	}
+    .action-#{$name} {
+        display: flex;
+        align-items: flex-start;
+
+        width: 100%;
+        height: auto;
+        margin: 0;
+        padding: 0;
+        padding-right: $icon-margin;
+        box-sizing: border-box; // otherwise router-link overflows in Firefox
+
+        cursor: pointer;
+        white-space: nowrap;
+
+        opacity: $opacity_normal;
+        color: var(--color-main-text);
+        border: 0;
+        border-radius: 0; // otherwise Safari will cut the border-radius area
+        background-color: transparent;
+        box-shadow: none;
+
+        font-weight: normal;
+        font-size: var(--default-font-size);
+        line-height: $clickable-area;
+
+        &:hover,
+        &:focus {
+            opacity: $opacity_full;
+        }
+
+        & > span {
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        &__icon {
+            width: $clickable-area;
+            height: $clickable-area;
+            opacity: $opacity_full;
+            background-position: $icon-margin center;
+            background-size: $icon-size;
+            background-repeat: no-repeat;
+        }
+
+        &::v-deep .material-design-icon {
+            width: $clickable-area;
+            height: $clickable-area;
+            opacity: $opacity_full;
+
+            .material-design-icon__svg {
+                vertical-align: middle;
+            }
+        }
+
+        // long text area
+        p {
+            max-width: 220px;
+            line-height: 1.6em;
+
+            // 14px are currently 1em line-height. Mixing units as '44px - 1.6em' does not work.
+            padding: #{math.div($clickable-area - 1.6 * 14px, 2)} 0;
+
+            cursor: pointer;
+            text-align: left;
+
+            // in case there are no spaces like long email addresses
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &__longtext {
+            cursor: pointer;
+            // allow the use of `\n`
+            white-space: pre-wrap;
+        }
+
+        &__title {
+            font-weight: bold;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            max-width: 100%;
+            display: inline-block;
+        }
+    }
 }
 @include action-active;
 @include action--disabled;
diff --git a/src/main.js b/src/main.js
index 4253c16ef..17bd51345 100644
--- a/src/main.js
+++ b/src/main.js
@@ -35,10 +35,9 @@ helpers.useRouter(router)
 const locale = document.documentElement
     .getAttribute("data-locale")
     .replace("_", "-")
-    .toLowerCase()
-;// `en` is the default locale and cannot be dynamically imported. Will 404
+    .toLowerCase() // `en` is the default locale and cannot be dynamically imported. Will 404
 // https://github.com/moment/moment/issues/3624
-(locale === "en"
+;(locale === "en"
     ? Promise.resolve()
     : import(`moment/locale/${locale}.js`)
 ).then(() => moment.locale(locale))
diff --git a/src/router/index.js b/src/router/index.js
index b8ebecf4b..1c0c1d7a2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,11 +7,16 @@
 import Vue from "vue"
 import VueRouter from "vue-router"
 
-const Index = () => import(/* webpackPrefetch: true */ "../components/AppIndex.vue")
-const NotFound = () => import(/* webpackPrefetch: true */ "../components/NotFound.vue")
-const RecipeView = () => import(/* webpackPrefetch: true */ "../components/RecipeView.vue")
-const RecipeEdit = () => import(/* webpackPrefetch: true */ "../components/RecipeEdit.vue")
-const Search = () => import(/* webpackPrefetch: true */ "../components/SearchResults.vue")
+const Index = () =>
+    import(/* webpackPrefetch: true */ "../components/AppIndex.vue")
+const NotFound = () =>
+    import(/* webpackPrefetch: true */ "../components/NotFound.vue")
+const RecipeView = () =>
+    import(/* webpackPrefetch: true */ "../components/RecipeView.vue")
+const RecipeEdit = () =>
+    import(/* webpackPrefetch: true */ "../components/RecipeEdit.vue")
+const Search = () =>
+    import(/* webpackPrefetch: true */ "../components/SearchResults.vue")
 
 Vue.use(VueRouter)
 

From 49d85832a9a6263800751f8a0b45be1d36f6b70e Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Fri, 14 Oct 2022 14:18:47 +0200
Subject: [PATCH 10/19] Import moment from @nextcloud/moment

We don't depend on moment directly, but rather @nextcloud/moment

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index 17bd51345..8152f7dc2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,7 @@
  */
 
 // Markdown
-import moment from "moment"
+import moment from "@nextcloud/moment"
 
 import Vue from "vue"
 

From 1c7e8836e92e677094a7797a740698c8085034b9 Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Fri, 14 Oct 2022 14:25:29 +0200
Subject: [PATCH 11/19] Fix eslint lints

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/components/SimpleActionInput.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/SimpleActionInput.vue b/src/components/SimpleActionInput.vue
index 25351389f..db7ff49de 100644
--- a/src/components/SimpleActionInput.vue
+++ b/src/components/SimpleActionInput.vue
@@ -33,6 +33,9 @@
 </template>
 
 <script>
+import Vue from 'vue'
+import ArrowRight from "icons/ArrowRight.vue"
+
 const ActionGlobalMixin = {
     before() {
         // all actions requires a valid text content
@@ -72,14 +75,11 @@ const ActionGlobalMixin = {
     },
 }
 
-const GenRandomId = (length) => {
-    return Math.random()
+const GenRandomId = (length) =>
+    Math.random()
         .toString(36)
         .replace(/[^a-z]+/g, "")
         .slice(0, length || 5)
-}
-
-import ArrowRight from "icons/ArrowRight"
 
 export default {
     name: "ActionInput",
@@ -96,7 +96,7 @@ export default {
          */
         id: {
             type: String,
-            default: () => "action-" + GenRandomId(),
+            default: () => `action-${GenRandomId()}`,
             validator: (id) => id.trim() !== "",
         },
         /**
@@ -172,6 +172,7 @@ export default {
         onSubmit(event) {
             event.preventDefault()
             event.stopPropagation()
+
             if (!this.disabled) {
                 /**
                  * Emitted on submit of the input field
@@ -179,10 +180,11 @@ export default {
                  * @type {Event}
                  */
                 this.$emit("submit", event)
-            } else {
-                // ignore submit
-                return false
+                return true
             }
+
+            // ignore submit
+            return false
         },
         onChange(event) {
             /**

From 8069a707648250261a32de5dc6f2db170123c96f Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 18 Oct 2022 16:57:27 +0200
Subject: [PATCH 12/19] Fix weird formatting of comment before semicolon

The semicolon is needed here because the line below starts with (.
JavaScript will attempt to call the line that now has a semicolon as a
function.

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/main.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index 8152f7dc2..0d6acfb5c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -35,7 +35,9 @@ helpers.useRouter(router)
 const locale = document.documentElement
     .getAttribute("data-locale")
     .replace("_", "-")
-    .toLowerCase() // `en` is the default locale and cannot be dynamically imported. Will 404
+    .toLowerCase()
+
+// `en` is the default locale and cannot be dynamically imported. Will 404
 // https://github.com/moment/moment/issues/3624
 ;(locale === "en"
     ? Promise.resolve()

From 307b46864d2e015962a70a1162510ebe32247d3d Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 18 Oct 2022 16:59:24 +0200
Subject: [PATCH 13/19] Run prettier

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/components/SimpleActionInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SimpleActionInput.vue b/src/components/SimpleActionInput.vue
index db7ff49de..add3a3d80 100644
--- a/src/components/SimpleActionInput.vue
+++ b/src/components/SimpleActionInput.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import Vue from 'vue'
+import Vue from "vue"
 import ArrowRight from "icons/ArrowRight.vue"
 
 const ActionGlobalMixin = {

From b45f91fa2237e505ee5badd450b6325459b9b66b Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 18 Oct 2022 17:04:53 +0200
Subject: [PATCH 14/19] Add attribution to original source of SimpleActionInput

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/components/SimpleActionInput.vue | 29 ++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/components/SimpleActionInput.vue b/src/components/SimpleActionInput.vue
index add3a3d80..2d3a6d94f 100644
--- a/src/components/SimpleActionInput.vue
+++ b/src/components/SimpleActionInput.vue
@@ -1,3 +1,32 @@
+<!--
+  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  - @author Marco Ambrosini <marcoambrosini@icloud.com>
+  - @author Marcel Robitaille <mail@marcelrobitaille.me>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  - This file is modified from:
+  - https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/NcActionInput/NcActionInput.vue
+  - Some features are stripped to avoid importing large dependencies to reduce
+  - bundle size.
+  - Please see: https://github.com/nextcloud/cookbook/pull/1116
+  -->
+
 <template>
     <li class="action">
         <span class="action-input">

From 3624941ca6d1b767eb177d9d5d256ad2dcfd835a Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 18 Oct 2022 17:06:00 +0200
Subject: [PATCH 15/19] Fix tabs and weird comment formatting

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/components/SimpleActionInput.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SimpleActionInput.vue b/src/components/SimpleActionInput.vue
index 2d3a6d94f..bb3b0258a 100644
--- a/src/components/SimpleActionInput.vue
+++ b/src/components/SimpleActionInput.vue
@@ -518,8 +518,8 @@ $input-margin: 4px;
     &__icon {
         min-width: 0; /* Overwrite icons*/
         min-height: 0;
-        /* Keep padding to define the width to
-			assure correct position of a possible text */
+        /* Keep padding to define the width to */
+        /* assure correct position of a possible text */
         padding: #{math.div($clickable-area, 2)} 0 #{math.div(
                 $clickable-area,
                 2

From e7f82b69369e88fe14c0f936b90c4a96a37d29ab Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Tue, 18 Oct 2022 17:06:34 +0200
Subject: [PATCH 16/19] Run stylelint-fix

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/components/SimpleActionInput.vue | 112 +++++++++++++--------------
 1 file changed, 56 insertions(+), 56 deletions(-)

diff --git a/src/components/SimpleActionInput.vue b/src/components/SimpleActionInput.vue
index bb3b0258a..e825c25b6 100644
--- a/src/components/SimpleActionInput.vue
+++ b/src/components/SimpleActionInput.vue
@@ -268,21 +268,22 @@ $breakpoint-mobile: 1024px;
 
 // top-bar spacing
 $topbar-margin: 4px;
+
 button:not(.button-vue),
 input:not([type="range"]),
 textarea {
-    margin: 0;
     padding: 7px 6px;
-
-    cursor: text;
-
-    color: var(--color-text-lighter);
     border: 1px solid var(--color-border-dark);
     border-radius: var(--border-radius);
-    outline: none;
+    margin: 0;
     background-color: var(--color-main-background);
 
+    color: var(--color-text-lighter);
+
+    cursor: text;
+
     font-size: 13px;
+    outline: none;
 
     &:not(:disabled):not(.primary) {
         &:hover,
@@ -294,17 +295,17 @@ textarea {
         }
 
         &:active {
+            background-color: var(--color-main-background);
             color: var(--color-text-light);
             outline: none;
-            background-color: var(--color-main-background);
         }
     }
 
     &:disabled {
+        background-color: var(--color-background-dark);
+        color: var(--color-text-maxcontrast);
         cursor: default;
         opacity: $opacity_disabled;
-        color: var(--color-text-maxcontrast);
-        background-color: var(--color-background-dark);
     }
 
     &:required {
@@ -318,10 +319,10 @@ textarea {
 
     /* Primary action button, use sparingly */
     &.primary {
-        cursor: pointer;
-        color: var(--color-primary-text);
         border-color: var(--color-primary-element);
         background-color: var(--color-primary-element);
+        color: var(--color-primary-text);
+        cursor: pointer;
 
         &:not(:disabled) {
             &:hover,
@@ -336,27 +337,27 @@ textarea {
         }
 
         &:disabled {
-            cursor: default;
-            color: var(--color-primary-text-dark);
             // opacity is already defined to .5 if disabled
             background-color: var(--color-primary-element);
+            color: var(--color-primary-text-dark);
+            cursor: default;
         }
     }
 }
 @mixin action-active {
     li {
         &.active {
-            background-color: var(--color-background-hover);
-            border-radius: 6px;
             padding: 0;
+            border-radius: 6px;
+            background-color: var(--color-background-hover);
         }
     }
 }
 
 @mixin action--disabled {
     .action--disabled {
-        pointer-events: none;
         opacity: $opacity_disabled;
+        pointer-events: none;
         &:hover,
         &:focus {
             cursor: default;
@@ -371,29 +372,29 @@ textarea {
 @mixin action-item($name) {
     .action-#{$name} {
         display: flex;
-        align-items: flex-start;
 
         width: 100%;
         height: auto;
-        margin: 0;
+        box-sizing: border-box; // otherwise router-link overflows in Firefox
+        align-items: flex-start;
         padding: 0;
         padding-right: $icon-margin;
-        box-sizing: border-box; // otherwise router-link overflows in Firefox
-
-        cursor: pointer;
-        white-space: nowrap;
-
-        opacity: $opacity_normal;
-        color: var(--color-main-text);
         border: 0;
         border-radius: 0; // otherwise Safari will cut the border-radius area
+        margin: 0;
         background-color: transparent;
         box-shadow: none;
+        color: var(--color-main-text);
 
-        font-weight: normal;
+        cursor: pointer;
         font-size: var(--default-font-size);
+
+        font-weight: normal;
         line-height: $clickable-area;
 
+        opacity: $opacity_normal;
+        white-space: nowrap;
+
         &:hover,
         &:focus {
             opacity: $opacity_full;
@@ -407,10 +408,10 @@ textarea {
         &__icon {
             width: $clickable-area;
             height: $clickable-area;
-            opacity: $opacity_full;
             background-position: $icon-margin center;
-            background-size: $icon-size;
             background-repeat: no-repeat;
+            background-size: $icon-size;
+            opacity: $opacity_full;
         }
 
         &::v-deep .material-design-icon {
@@ -425,17 +426,17 @@ textarea {
 
         // long text area
         p {
+
+            // in case there are no spaces like long email addresses
+            overflow: hidden;
             max-width: 220px;
-            line-height: 1.6em;
 
             // 14px are currently 1em line-height. Mixing units as '44px - 1.6em' does not work.
             padding: #{math.div($clickable-area - 1.6 * 14px, 2)} 0;
 
             cursor: pointer;
+            line-height: 1.6em;
             text-align: left;
-
-            // in case there are no spaces like long email addresses
-            overflow: hidden;
             text-overflow: ellipsis;
         }
 
@@ -446,12 +447,12 @@ textarea {
         }
 
         &__title {
+            display: inline-block;
+            overflow: hidden;
+            max-width: 100%;
             font-weight: bold;
             text-overflow: ellipsis;
-            overflow: hidden;
             white-space: nowrap;
-            max-width: 100%;
-            display: inline-block;
         }
     }
 }
@@ -462,23 +463,23 @@ $input-margin: 4px;
 
 .action-input {
     display: flex;
-    align-items: flex-start;
 
     width: 100%;
     height: auto;
-    margin: 0;
+    align-items: flex-start;
     padding: 0;
-
-    cursor: pointer;
-    white-space: nowrap;
-
-    color: var(--color-main-text);
     border: 0;
     border-radius: 0; // otherwise Safari will cut the border-radius area
+    margin: 0;
     background-color: transparent;
     box-shadow: none;
 
+    color: var(--color-main-text);
+
+    cursor: pointer;
+
     font-weight: normal;
+    white-space: nowrap;
 
     &::v-deep .material-design-icon {
         width: $clickable-area;
@@ -532,41 +533,41 @@ $input-margin: 4px;
     // Forms & text inputs
     &__form {
         display: flex;
-        align-items: center;
         flex: 1 1 auto;
+        align-items: center;
+        padding-right: $icon-margin;
 
         margin: $input-margin 0;
-        padding-right: $icon-margin;
     }
 
     &__submit {
         position: absolute;
-        left: -10000px;
         top: auto;
+        left: -10000px;
+        overflow: hidden;
         width: 1px;
         height: 1px;
-        overflow: hidden;
     }
 
     &__label {
         display: flex;
-        align-items: center;
-        justify-content: center;
 
         width: #{$clickable-area - $input-margin * 2};
         height: #{$clickable-area - $input-margin * 2};
         box-sizing: border-box;
-        margin: 0 0 0 -8px;
+        align-items: center;
+        justify-content: center;
         padding: 7px 6px;
-
-        opacity: $opacity_full;
-        color: var(--color-text-lighter);
         border: 1px solid var(--color-border-dark);
-        border-left-color: transparent;
         border-radius: 0 var(--border-radius) var(--border-radius) 0;
+        border-left-color: transparent;
+        margin: 0 0 0 -8px;
+        background-clip: padding-box;
         /* Avoid background under border */
         background-color: var(--color-main-background);
-        background-clip: padding-box;
+        color: var(--color-text-lighter);
+
+        opacity: $opacity_full;
 
         &,
         * {
@@ -576,11 +577,10 @@ $input-margin: 4px;
 
     /* Inputs inside popover supports text, submit & reset */
     &__input {
-        flex: 1 1 auto;
-
         min-width: $clickable-area * 3;
         min-height: #{$clickable-area - $input-margin * 2}; /* twice the element margin-y */
         max-height: #{$clickable-area - $input-margin * 2}; /* twice the element margin-y */
+        flex: 1 1 auto;
         margin: 0;
 
         // if disabled, change cursor

From 69bfb98def237fb6a10b4a544c6766ddee509dce Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Wed, 26 Oct 2022 11:22:53 +0200
Subject: [PATCH 17/19] Remove stale comment "markdown" from main

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/main.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index 0d6acfb5c..42e931fd4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@
  * @license AGPL3 or later
  */
 
-// Markdown
 import moment from "@nextcloud/moment"
 
 import Vue from "vue"

From 311361860e971e6dc304c86ba040f3edf9b0b698 Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Wed, 26 Oct 2022 11:32:00 +0200
Subject: [PATCH 18/19] Perma-link to ActionInput.vue

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/components/SimpleActionInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SimpleActionInput.vue b/src/components/SimpleActionInput.vue
index e825c25b6..6efe494d9 100644
--- a/src/components/SimpleActionInput.vue
+++ b/src/components/SimpleActionInput.vue
@@ -21,7 +21,7 @@
   - along with this program. If not, see <http://www.gnu.org/licenses/>.
   -
   - This file is modified from:
-  - https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/NcActionInput/NcActionInput.vue
+  - https://github.com/nextcloud/nextcloud-vue/blob/8caab6d0a9346231d77a236045723b75176b08cf/src/components/NcActionInput/NcActionInput.vue
   - Some features are stripped to avoid importing large dependencies to reduce
   - bundle size.
   - Please see: https://github.com/nextcloud/cookbook/pull/1116

From 3febd8f90c0aed09cc46d2f805042f5bebc26d08 Mon Sep 17 00:00:00 2001
From: Marcel Robitaille <mail@marcelrobitaille.me>
Date: Wed, 26 Oct 2022 11:34:00 +0200
Subject: [PATCH 19/19] Add back certain functionality of ActionInput.vue

I forgot why I changed this to be honest.

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>
---
 src/components/SimpleActionInput.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/SimpleActionInput.vue b/src/components/SimpleActionInput.vue
index 6efe494d9..6b88563f4 100644
--- a/src/components/SimpleActionInput.vue
+++ b/src/components/SimpleActionInput.vue
@@ -28,10 +28,16 @@
   -->
 
 <template>
-    <li class="action">
+    <li class="action" :class="{ 'action--disabled': disabled }">
         <span class="action-input">
             <slot name="icon">
-                <span :class="icon" class="action-input__icon" />
+                <span
+                    :class="[isIconUrl ? 'action-input__icon--url' : icon]"
+                    :style="{
+                        backgroundImage: isIconUrl ? `url(${icon})` : null,
+                    }"
+                    class="action-input__icon"
+                />
             </slot>
             <form
                 ref="form"
@@ -92,6 +98,13 @@ const ActionGlobalMixin = {
     },
 
     computed: {
+        isIconUrl() {
+            try {
+                return new URL(this.icon)
+            } catch (error) {
+                return false
+            }
+        },
         isLongText() {
             return this.text && this.text.trim().length > 20
         },
@@ -426,7 +439,6 @@ textarea {
 
         // long text area
         p {
-
             // in case there are no spaces like long email addresses
             overflow: hidden;
             max-width: 220px;