Merge branch 'mealie-next' into feat/standardize-units

2026-02-27 10:13:11 -05:00 · 2026-02-26 16:53:15 +00:00
parent 6e072330e4 8144799733
commit d92f7fcdec
19 changed files with 2429 additions and 2340 deletions
--- a/frontend/components/Domain/Group/GroupDataPage.vue
+++ b/frontend/components/Domain/Group/GroupDataPage.vue
@@ -2,9 +2,11 @@
  <!-- Create Dialog -->
  <BaseDialog
    v-model="createDialog"
-    :title="$t('general.create')"
+    :title="createTitle || $t('general.create')"
    :icon="icon"
    color="primary"
+    max-width="600px"
+    width="100%"
    :submit-disabled="!createFormValid"
    can-confirm
    @confirm="emit('create-one', createForm.data)"
@@ -15,6 +17,7 @@
        v-model="createForm.data"
        v-model:is-valid="createFormValid"
        :items="createForm.items"
+        class="py-2"
      />
    </div>
  </BaseDialog>
@@ -22,18 +25,22 @@
  <!-- Edit Dialog -->
  <BaseDialog
    v-model="editDialog"
-    :title="$t('general.edit')"
+    :title="editTitle || $t('general.edit')"
    :icon="icon"
    color="primary"
+    max-width="600px"
+    width="100%"
    :submit-disabled="!editFormValid"
    can-confirm
    @confirm="emit('edit-one', editForm.data)"
  >
    <div class="mx-2 mt-2">
+      <slot name="edit-dialog-top" />
      <AutoForm
        v-model="editForm.data"
        v-model:is-valid="editFormValid"
        :items="editForm.items"
+        class="py-2"
      />
    </div>
    <template #custom-card-action>
@@ -153,6 +160,12 @@ defineProps({
    type: String,
    required: true,
  },
+  createTitle: {
+    type: String,
+  },
+  editTitle: {
+    type: String,
+  },
  tableConfig: {
    type: Object as PropType<TableConfig>,
    default: () => ({
--- a/frontend/components/global/AutoForm.vue
+++ b/frontend/components/global/AutoForm.vue
@@ -7,134 +7,137 @@
      :width="width"
      class="my-2"
    >
-      <v-row>
-        <v-col
-          v-for="(inputField, index) in items"
-          :key="index"
-          cols="12"
-          sm="12"
-        >
-          <v-divider
+      <v-row no-gutters>
+        <template v-for="(inputField, index) in items" :key="index">
+          <v-col
            v-if="inputField.section"
-            class="my-2"
-          />
-          <v-card-title
-            v-if="inputField.section"
-            class="pl-0"
+            :cols="12"
+            class="px-2"
          >
-            {{ inputField.section }}
-          </v-card-title>
-          <v-card-text
-            v-if="inputField.sectionDetails"
-            class="pl-0 mt-0 pt-0"
+            <v-divider
+              class="my-2"
+            />
+            <v-card-title
+              class="pl-0"
+            >
+              {{ inputField.section }}
+            </v-card-title>
+            <v-card-text
+              v-if="inputField.sectionDetails"
+              class="pl-0 mt-0 pt-0"
+            >
+              {{ inputField.sectionDetails }}
+            </v-card-text>
+          </v-col>
+          <v-col
+            :cols="inputField.cols || 12"
+            class="px-2"
          >
-            {{ inputField.sectionDetails }}
-          </v-card-text>
+            <!-- Check Box -->
+            <v-checkbox
+              v-if="inputField.type === fieldTypes.BOOLEAN"
+              v-model="model[inputField.varName]"
+              :name="inputField.varName"
+              :readonly="fieldState[inputField.varName]?.readonly"
+              :disabled="fieldState[inputField.varName]?.disabled"
+              :hint="inputField.hint"
+              :hide-details="!inputField.hint"
+              :persistent-hint="!!inputField.hint"
+              density="comfortable"
+              validate-on="input"
+            >
+              <template #label>
+                <span class="ml-4">
+                  {{ inputField.label }}
+                </span>
+              </template>
+            </v-checkbox>

-          <!-- Check Box -->
-          <v-checkbox
-            v-if="inputField.type === fieldTypes.BOOLEAN"
-            v-model="model[inputField.varName]"
-            :name="inputField.varName"
-            :readonly="fieldState[inputField.varName]?.readonly"
-            :disabled="fieldState[inputField.varName]?.disabled"
-            :hint="inputField.hint"
-            :hide-details="!inputField.hint"
-            :persistent-hint="!!inputField.hint"
-            density="comfortable"
-            validate-on="input"
-          >
-            <template #label>
-              <span class="ml-4">
-                {{ inputField.label }}
-              </span>
-            </template>
-          </v-checkbox>
+            <!-- Text Field -->
+            <v-text-field
+              v-else-if="inputField.type === fieldTypes.TEXT || inputField.type === fieldTypes.PASSWORD"
+              v-model="model[inputField.varName]"
+              :readonly="fieldState[inputField.varName]?.readonly"
+              :disabled="fieldState[inputField.varName]?.disabled"
+              :type="inputField.type === fieldTypes.PASSWORD ? 'password' : 'text'"
+              variant="solo-filled"
+              flat
+              density="comfortable"
+              :label="inputField.label"
+              :name="inputField.varName"
+              :hint="inputField.hint || ''"
+              :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
+              validate-on="input"
+            />

-          <!-- Text Field -->
-          <v-text-field
-            v-else-if="inputField.type === fieldTypes.TEXT || inputField.type === fieldTypes.PASSWORD"
-            v-model="model[inputField.varName]"
-            :readonly="fieldState[inputField.varName]?.readonly"
-            :disabled="fieldState[inputField.varName]?.disabled"
-            :type="inputField.type === fieldTypes.PASSWORD ? 'password' : 'text'"
-            variant="solo-filled"
-            flat
-            density="comfortable"
-            :label="inputField.label"
-            :name="inputField.varName"
-            :hint="inputField.hint || ''"
-            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
-            validate-on="input"
-          />
+            <!-- Text Area -->
+            <v-textarea
+              v-else-if="inputField.type === fieldTypes.TEXT_AREA"
+              v-model="model[inputField.varName]"
+              :readonly="fieldState[inputField.varName]?.readonly"
+              :disabled="fieldState[inputField.varName]?.disabled"
+              variant="solo-filled"
+              flat
+              rows="3"
+              auto-grow
+              density="comfortable"
+              :label="inputField.label"
+              :name="inputField.varName"
+              :hint="inputField.hint || ''"
+              :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
+              validate-on="input"
+            />

-          <!-- Text Area -->
-          <v-textarea
-            v-else-if="inputField.type === fieldTypes.TEXT_AREA"
-            v-model="model[inputField.varName]"
-            :readonly="fieldState[inputField.varName]?.readonly"
-            :disabled="fieldState[inputField.varName]?.disabled"
-            variant="solo-filled"
-            flat
-            rows="3"
-            auto-grow
-            density="comfortable"
-            :label="inputField.label"
-            :name="inputField.varName"
-            :hint="inputField.hint || ''"
-            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
-            validate-on="input"
-          />
+            <!-- Number Input -->
+            <v-number-input
+              v-else-if="inputField.type === fieldTypes.NUMBER"
+              v-model="model[inputField.varName]"
+              variant="underlined"
+              :control-variant="inputField.numberInputConfig?.controlVariant"
+              density="comfortable"
+              :label="inputField.label"
+              :name="inputField.varName"
+              :min="inputField.numberInputConfig?.min"
+              :max="inputField.numberInputConfig?.max"
+              :precision="inputField.numberInputConfig?.precision"
+              :hint="inputField.hint"
+              :hide-details="!inputField.hint"
+              :persistent-hint="!!inputField.hint"
+              :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
+              validate-on="input"
+            />

-          <!-- Number Input -->
-          <v-number-input
-            v-else-if="inputField.type === fieldTypes.NUMBER"
-            v-model="model[inputField.varName]"
-            variant="underlined"
-            :control-variant="inputField.numberInputConfig?.controlVariant"
-            density="comfortable"
-            :label="inputField.label"
-            :name="inputField.varName"
-            :min="inputField.numberInputConfig?.min"
-            :max="inputField.numberInputConfig?.max"
-            :precision="inputField.numberInputConfig?.precision"
-            :hint="inputField.hint"
-            :hide-details="!inputField.hint"
-            :persistent-hint="!!inputField.hint"
-            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
-            validate-on="input"
-          />
+            <!-- Option Select -->
+            <v-select
+              v-else-if="inputField.type === fieldTypes.SELECT"
+              v-model="model[inputField.varName]"
+              :readonly="fieldState[inputField.varName]?.readonly"
+              :disabled="fieldState[inputField.varName]?.disabled"
+              variant="solo-filled"
+              flat
+              :label="inputField.label"
+              :name="inputField.varName"
+              :items="inputField.options"
+              item-title="text"
+              :item-value="inputField.selectReturnValue || 'text'"
+              :return-object="false"
+              :hint="inputField.hint"
+              density="comfortable"
+              persistent-hint
+              :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
+              validate-on="input"
+            />

-          <!-- Option Select -->
-          <v-select
-            v-else-if="inputField.type === fieldTypes.SELECT"
-            v-model="model[inputField.varName]"
-            :readonly="fieldState[inputField.varName]?.readonly"
-            :disabled="fieldState[inputField.varName]?.disabled"
-            variant="solo-filled"
-            flat
-            :label="inputField.label"
-            :name="inputField.varName"
-            :items="inputField.options"
-            item-title="text"
-            :item-value="inputField.selectReturnValue || 'text'"
-            :return-object="false"
-            :hint="inputField.hint"
-            density="comfortable"
-            persistent-hint
-            :rules="!(inputField.disableUpdate && updateMode) ? inputField.rules || [] : []"
-            validate-on="input"
-          />
-
-          <!-- Color Picker -->
-          <div
-            v-else-if="inputField.type === fieldTypes.COLOR"
-            class="d-flex"
-            style="width: 100%"
-          >
-            <InputColor v-model="model[inputField.varName]" />
-          </div>
-        </v-col>
+            <!-- Color Picker -->
+            <div
+              v-else-if="inputField.type === fieldTypes.COLOR"
+              class="d-flex"
+              style="width: 100%"
+            >
+              <InputColor v-model="model[inputField.varName]" />
+            </div>
+          </v-col>
+        </template>
      </v-row>
    </v-card>
  </v-form>
--- a/frontend/composables/partials/use-actions-factory.ts
+++ b/frontend/composables/partials/use-actions-factory.ts
@@ -26,8 +26,10 @@ export function useReadOnlyActions<T extends BoundT>(
  api: BaseCRUDAPIReadOnly<T>,
  allRef: Ref<T[] | null> | null,
  loading: Ref<boolean>,
+  defaultQueryParams: Record<string, QueryValue> = {},
 ): ReadOnlyStoreActions<T> {
  function getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
+    params = { ...defaultQueryParams, ...params };
    params.orderBy ??= "name";
    params.orderDirection ??= "asc";

@@ -56,6 +58,7 @@ export function useReadOnlyActions<T extends BoundT>(
  }

  async function refresh(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
+    params = { ...defaultQueryParams, ...params };
    params.orderBy ??= "name";
    params.orderDirection ??= "asc";

@@ -86,8 +89,10 @@ export function useStoreActions<T extends BoundT>(
  api: BaseCRUDAPI<unknown, T, unknown>,
  allRef: Ref<T[] | null> | null,
  loading: Ref<boolean>,
+  defaultQueryParams: Record<string, QueryValue> = {},
 ): StoreActions<T> {
  function getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
+    params = { ...defaultQueryParams, ...params };
    params.orderBy ??= "name";
    params.orderDirection ??= "asc";

@@ -116,6 +121,7 @@ export function useStoreActions<T extends BoundT>(
  }

  async function refresh(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
+    params = { ...defaultQueryParams, ...params };
    params.orderBy ??= "name";
    params.orderDirection ??= "asc";

--- a/frontend/composables/use-group-recipe-actions.ts
+++ b/frontend/composables/use-group-recipe-actions.ts
@@ -78,7 +78,13 @@ export const useGroupRecipeActions = function (
  };

  const actions = {
-    ...useStoreActions<GroupRecipeActionOut>("group-recipe-actions", api.groupRecipeActions, groupRecipeActions, loading),
+    ...useStoreActions<GroupRecipeActionOut>(
+      "group-recipe-actions",
+      api.groupRecipeActions,
+      groupRecipeActions,
+      loading,
+      { orderBy: orderBy },
+    ),
    flushStore() {
      groupRecipeActions.value = [];
    },
--- a/frontend/composables/use-users/user-form.ts
+++ b/frontend/composables/use-users/user-form.ts
@@ -26,6 +26,7 @@ export const useUserForm = () => {
      rules: [validators.required],
    },
    {
+      cols: 6,
      label: i18n.t("user.password"),
      varName: "password",
      disableUpdate: true,
@@ -33,6 +34,7 @@ export const useUserForm = () => {
      rules: [validators.required, validators.minLength(8)],
    },
    {
+      cols: 6,
      label: i18n.t("user.authentication-method"),
      varName: "authMethod",
      type: fieldTypes.SELECT,
@@ -42,36 +44,42 @@ export const useUserForm = () => {
    },
    {
      section: i18n.t("user.permissions"),
+      cols: 6,
      label: i18n.t("user.administrator"),
      varName: "admin",
      type: fieldTypes.BOOLEAN,
      rules: [validators.required],
    },
    {
+      cols: 6,
      label: i18n.t("user.user-can-invite-other-to-group"),
      varName: "canInvite",
      type: fieldTypes.BOOLEAN,
      rules: [validators.required],
    },
    {
+      cols: 6,
      label: i18n.t("user.user-can-manage-group"),
      varName: "canManage",
      type: fieldTypes.BOOLEAN,
      rules: [validators.required],
    },
    {
+      cols: 6,
      label: i18n.t("user.user-can-organize-group-data"),
      varName: "canOrganize",
      type: fieldTypes.BOOLEAN,
      rules: [validators.required],
    },
    {
+      cols: 6,
      label: i18n.t("user.user-can-manage-household"),
      varName: "canManageHousehold",
      type: fieldTypes.BOOLEAN,
      rules: [validators.required],
    },
    {
+      cols: 6,
      label: i18n.t("user.enable-advanced-features"),
      varName: "advanced",
      type: fieldTypes.BOOLEAN,
--- a/frontend/lang/messages/da-DK.json
+++ b/frontend/lang/messages/da-DK.json
@@ -1086,7 +1086,7 @@
    "forgot-password": "Glemt adgangskode",
    "forgot-password-text": "Indtast venligst din e-mail-adresse. Vi sender dig en e-mail, så at du kan nulstille din adgangskode.",
    "changes-reflected-immediately": "Ændringer til denne bruger vil have effekt med det samme.",
-    "default-activity": "",
+    "default-activity": "Standardaktivitet",
    "default-activity-hint": "Vælg den side, du vil navigere til, når du logger ind fra denne enhed"
  },
  "language-dialog": {
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -1181,7 +1181,11 @@
      "recipe-actions-data": "Recipe Actions Data",
      "new-recipe-action": "New Recipe Action",
      "edit-recipe-action": "Edit Recipe Action",
-      "action-type": "Action Type"
+      "action-type": "Action Type",
+      "action-types": {
+        "link": "Link",
+        "post": "Post"
+      }
    },
    "create-alias": "Create Alias",
    "manage-aliases": "Manage Aliases",
--- a/frontend/pages/admin/manage/users/[id].vue
+++ b/frontend/pages/admin/manage/users/[id].vue
@@ -27,92 +27,102 @@
        variant="outlined"
        style="border-color: lightgrey;"
      >
-        <v-card-text>
-          <div class="d-flex">
-            <p> {{ $t("user.user-id-with-value", { id: user.id }) }}</p>
-          </div>
-          <!-- This is disabled since we can't properly handle changing the user's group in most scenarios -->
-          <v-select
-            v-if="groups"
-            v-model="user.group"
-            disabled
-            :items="groups"
-            variant="solo-filled"
-            flat
-            item-title="name"
-            item-value="name"
-            :return-object="false"
-            :label="$t('group.user-group')"
-            :rules="[validators.required]"
-          />
-          <v-select
-            v-if="households"
-            v-model="user.household"
-            :items="households"
-            variant="solo-filled"
-            flat
-            item-title="name"
-            item-value="name"
-            :return-object="false"
-            :label="$t('household.user-household')"
-            :rules="[validators.required]"
-          />
-          <div class="d-flex py-2 pr-2">
-            <BaseButton
-              type="button"
-              :loading="generatingToken"
-              create
-              @click.prevent="handlePasswordReset"
-            >
-              {{ $t("user.generate-password-reset-link") }}
-            </BaseButton>
-          </div>
-          <div
-            v-if="resetUrl"
-            class="mb-2"
-          >
-            <v-card-text>
-              <p class="text-center pb-0">
-                {{ resetUrl }}
-              </p>
-            </v-card-text>
-            <v-card-actions
-              class="align-center pt-0"
-              style="gap: 4px"
-            >
-              <BaseButton
-                cancel
-                @click="resetUrl = ''"
-              >
-                {{ $t("general.close") }}
-              </BaseButton>
-              <v-spacer />
-              <BaseButton
-                v-if="user.email"
-                color="info"
-                class="mr-1"
-                @click="sendResetEmail"
-              >
-                <template #icon>
-                  {{ $globals.icons.email }}
-                </template>
-                {{ $t("user.email") }}
-              </BaseButton>
-              <AppButtonCopy
-                :icon="false"
-                color="info"
-                :copy-text="resetUrl"
-              />
-            </v-card-actions>
-          </div>
+        <v-sheet class="pt-4">
+          <v-card-text>
+            <div class="d-flex">
+              <p> {{ $t("user.user-id-with-value", { id: user.id }) }}</p>
+            </div>
+            <!-- This is disabled since we can't properly handle changing the user's group in most scenarios -->

-          <AutoForm
-            v-model="user"
-            :items="userForm"
-            update-mode
-            :disabled-fields="disabledFields"
-          />
-        </v-card-text>
+            <v-row>
+              <v-col cols="6">
+                <v-select
+                  v-if="groups"
+                  v-model="user.group"
+                  disabled
+                  :items="groups"
+                  variant="solo-filled"
+                  flat
+                  item-title="name"
+                  item-value="name"
+                  :return-object="false"
+                  :label="$t('group.user-group')"
+                  :rules="[validators.required]"
+                />
+              </v-col>
+              <v-col cols="6">
+                <v-select
+                  v-if="households"
+                  v-model="user.household"
+                  :items="households"
+                  variant="solo-filled"
+                  flat
+                  item-title="name"
+                  item-value="name"
+                  :return-object="false"
+                  :label="$t('household.user-household')"
+                  :rules="[validators.required]"
+                />
+              </v-col>
+            </v-row>
+            <div class="d-flex py-2 pr-2">
+              <BaseButton
+                type="button"
+                :loading="generatingToken"
+                create
+                @click.prevent="handlePasswordReset"
+              >
+                {{ $t("user.generate-password-reset-link") }}
+              </BaseButton>
+            </div>
+
+            <div
+              v-if="resetUrl"
+              class="mb-2"
+            >
+              <v-card-text>
+                <p class="text-center pb-0">
+                  {{ resetUrl }}
+                </p>
+              </v-card-text>
+              <v-card-actions
+                class="align-center pt-0"
+                style="gap: 4px"
+              >
+                <BaseButton
+                  cancel
+                  @click="resetUrl = ''"
+                >
+                  {{ $t("general.close") }}
+                </BaseButton>
+                <v-spacer />
+                <BaseButton
+                  v-if="user.email"
+                  color="info"
+                  class="mr-1"
+                  @click="sendResetEmail"
+                >
+                  <template #icon>
+                    {{ $globals.icons.email }}
+                  </template>
+                  {{ $t("user.email") }}
+                </BaseButton>
+                <AppButtonCopy
+                  :icon="false"
+                  color="info"
+                  :copy-text="resetUrl"
+                />
+              </v-card-actions>
+            </div>
+
+            <AutoForm
+              v-model="user"
+              :items="userForm"
+              update-mode
+              :disabled-fields="disabledFields"
+            />
+          </v-card-text>
+        </v-sheet>
      </v-card>
      <div class="d-flex pa-2">
        <BaseButton
--- a/frontend/pages/admin/manage/users/create.vue
+++ b/frontend/pages/admin/manage/users/create.vue
@@ -20,27 +20,35 @@
    >
      <v-card variant="outlined">
        <v-card-text>
-          <v-select
-            v-model="selectedGroup"
-            :items="groups || []"
-            item-title="name"
-            return-object
-            variant="filled"
-            :label="$t('group.user-group')"
-            :rules="[validators.required]"
-          />
-          <v-select
-            v-model="newUserData.household"
-            :disabled="!selectedGroup"
-            :items="households"
-            item-title="name"
-            item-value="name"
-            variant="filled"
-            :label="$t('household.user-household')"
-            :hint="selectedGroup ? '' : $t('group.you-must-select-a-group-before-selecting-a-household')"
-            persistent-hint
-            :rules="[validators.required]"
-          />
+          <v-sheet>
+            <v-row>
+              <v-col cols="6">
+                <v-select
+                  v-model="selectedGroup"
+                  :items="groups || []"
+                  item-title="name"
+                  return-object
+                  variant="filled"
+                  :label="$t('group.user-group')"
+                  :rules="[validators.required]"
+                />
+              </v-col>
+              <v-col cols="6">
+                <v-select
+                  v-model="newUserData.household"
+                  :disabled="!selectedGroup"
+                  :items="households"
+                  item-title="name"
+                  item-value="name"
+                  variant="filled"
+                  :label="$t('household.user-household')"
+                  :hint="selectedGroup ? '' : $t('group.you-must-select-a-group-before-selecting-a-household')"
+                  persistent-hint
+                  :rules="[validators.required]"
+                />
+              </v-col>
+            </v-row>
+          </v-sheet>
          <AutoForm
            v-model="newUserData"
            :items="userForm"
--- a/frontend/pages/group/data/categories.vue
+++ b/frontend/pages/group/data/categories.vue
@@ -3,6 +3,8 @@
    <GroupDataPage
      :icon="$globals.icons.categories"
      :title="$t('data-pages.categories.category-data')"
+      :create-title="$t('data-pages.categories.new-category')"
+      :edit-title="$t('data-pages.categories.edit-category')"
      :table-headers="tableHeaders"
      :table-config="tableConfig"
      :data="categoryStore.store.value || []"
--- a/frontend/pages/group/data/foods.vue
+++ b/frontend/pages/group/data/foods.vue
@@ -130,6 +130,8 @@
    <GroupDataPage
      :icon="$globals.icons.foods"
      :title="$t('data-pages.foods.food-data')"
+      :create-title="$t('data-pages.foods.create-food')"
+      :edit-title="$t('data-pages.foods.edit-food')"
      :table-headers="tableHeaders"
      :table-config="tableConfig"
      :data="foods || []"
@@ -307,6 +309,7 @@ const formItems = computed<AutoFormItems>(() => [
    varName: "labelId",
    type: fieldTypes.SELECT,
    options: labelOptions.value,
+    selectReturnValue: "value",
  },
  {
    label: i18n.t("tool.on-hand"),
--- a/frontend/pages/group/data/labels.vue
+++ b/frontend/pages/group/data/labels.vue
@@ -45,6 +45,8 @@
    <GroupDataPage
      :icon="$globals.icons.tags"
      :title="$t('data-pages.labels.labels')"
+      :create-title="$t('data-pages.labels.new-label')"
+      :edit-title="$t('data-pages.labels.edit-label')"
      :table-headers="tableHeaders"
      :table-config="tableConfig"
      :data="labelStore.store.value || []"
@@ -66,7 +68,11 @@
      </template>

      <template #create-dialog-top>
-        <MultiPurposeLabel :label="createForm.data" class="my-2" />
+        <MultiPurposeLabel v-if="createForm.data.name" :label="createForm.data" class="my-2" />
+      </template>
+
+      <template #edit-dialog-top>
+        <MultiPurposeLabel v-if="editForm.data.name" :label="editForm.data" class="my-2" />
      </template>

      <template #table-button-bottom>
--- a/frontend/pages/group/data/recipe-actions.vue
+++ b/frontend/pages/group/data/recipe-actions.vue
@@ -3,6 +3,8 @@
    <GroupDataPage
      :icon="$globals.icons.categories"
      :title="$t('data-pages.categories.category-data')"
+      :create-title="$t('data-pages.recipe-actions.new-recipe-action')"
+      :edit-title="$t('data-pages.recipe-actions.edit-recipe-action')"
      :table-headers="tableHeaders"
      :table-config="tableConfig"
      :data="actionStore.recipeActions.value || []"
@@ -57,11 +59,11 @@ const tableHeaders: TableHeaders[] = [
  },
 ];

-const actionStore = useGroupRecipeActions(null, null);
+const actionStore = useGroupRecipeActions();

 // ============================================================
 // Form items (shared)
-const formItems: AutoFormItems = [
+const formItems = computed<AutoFormItems>(() => [
  {
    label: i18n.t("general.title"),
    varName: "title",
@@ -78,10 +80,14 @@ const formItems: AutoFormItems = [
    label: i18n.t("data-pages.recipe-actions.action-type"),
    varName: "actionType",
    type: fieldTypes.SELECT,
-    options: [{ text: "link" }, { text: "post" }],
+    options: [
+      { text: i18n.t("data-pages.recipe-actions.action-types.link"), value: "link" },
+      { text: i18n.t("data-pages.recipe-actions.action-types.post"), value: "post" },
+    ],
+    selectReturnValue: "value",
    rules: [validators.required],
  },
-];
+]);

 // ============================================================
 // Create
--- a/frontend/pages/group/data/tags.vue
+++ b/frontend/pages/group/data/tags.vue
@@ -3,6 +3,8 @@
    <GroupDataPage
      :icon="$globals.icons.tags"
      :title="$t('data-pages.tags.tag-data')"
+      :create-title="$t('data-pages.tags.new-tag')"
+      :edit-title="$t('data-pages.tags.edit-tag')"
      :table-headers="tableHeaders"
      :table-config="tableConfig"
      :data="tagStore.store.value || []"
--- a/frontend/pages/group/data/tools.vue
+++ b/frontend/pages/group/data/tools.vue
@@ -3,6 +3,8 @@
    <GroupDataPage
      :icon="$globals.icons.tools"
      :title="$t('data-pages.tools.tool-data')"
+      :create-title="$t('data-pages.tools.new-tool')"
+      :edit-title="$t('data-pages.tools.edit-tool')"
      :table-headers="tableHeaders"
      :table-config="tableConfig"
      :data="tools || []"
--- a/frontend/pages/group/data/units.vue
+++ b/frontend/pages/group/data/units.vue
@@ -95,6 +95,8 @@
    <GroupDataPage
      :icon="$globals.icons.units"
      :title="$t('general.units')"
+      :create-title="$t('data-pages.units.create-unit')"
+      :edit-title="$t('data-pages.units.edit-unit')"
      :table-headers="tableHeaders"
      :table-config="tableConfig"
      :data="unitStore || []"
@@ -247,22 +249,26 @@ type StandardizedUnitTypeOption = {

 const formItems = computed<AutoFormItems>(() => [
  {
+    cols: 8,
    label: i18n.t("general.name"),
    varName: "name",
    type: fieldTypes.TEXT,
    rules: [validators.required],
  },
  {
-    label: i18n.t("general.plural-name"),
-    varName: "pluralName",
-    type: fieldTypes.TEXT,
-  },
-  {
+    cols: 4,
    label: i18n.t("data-pages.units.abbreviation"),
    varName: "abbreviation",
    type: fieldTypes.TEXT,
  },
  {
+    cols: 8,
+    label: i18n.t("general.plural-name"),
+    varName: "pluralName",
+    type: fieldTypes.TEXT,
+  },
+  {
+    cols: 4,
    label: i18n.t("data-pages.units.plural-abbreviation"),
    varName: "pluralAbbreviation",
    type: fieldTypes.TEXT,
@@ -273,11 +279,14 @@ const formItems = computed<AutoFormItems>(() => [
    type: fieldTypes.TEXT,
  },
  {
+    section: i18n.t("general.settings"),
+    cols: 4,
    label: i18n.t("data-pages.units.use-abbv"),
    varName: "useAbbreviation",
    type: fieldTypes.BOOLEAN,
  },
  {
+    cols: 4,
    label: i18n.t("data-pages.units.fraction"),
    varName: "fraction",
    type: fieldTypes.BOOLEAN,
--- a/frontend/types/auto-forms.ts
+++ b/frontend/types/auto-forms.ts
@@ -28,6 +28,7 @@ export interface FormFieldNumberInputConfig {
 export interface FormField {
  section?: string;
  sectionDetails?: string;
+  cols?: number | "auto";
  label?: string;
  hint?: string;
  varName: string;
--- a/mealie/repos/seed/resources/foods/locales/da-DK.json
+++ b/mealie/repos/seed/resources/foods/locales/da-DK.json
--- a/mealie/repos/seed/resources/foods/locales/nl-NL.json
+++ b/mealie/repos/seed/resources/foods/locales/nl-NL.json
@@ -198,7 +198,7 @@
            "romaine lettuce": {
                "aliases": [],
                "description": "",
-                "name": "romaine sla",
+                "name": "Romeinse sla",
                "plural_name": "romaine sla"
            },
            "beetroot": {
@@ -2577,8 +2577,8 @@
            "salad cheese": {
                "aliases": [],
                "description": "",
-                "name": "salad cheese",
-                "plural_name": "salad cheese"
+                "name": "salade kaas",
+                "plural_name": "Salade kaas"
            },
            "truffle cheese": {
                "aliases": [],
@@ -3559,8 +3559,8 @@
            "coconut manna": {
                "aliases": [],
                "description": "",
-                "name": "coconut manna",
-                "plural_name": "coconut mannas"
+                "name": "kokosnoot manna",
+                "plural_name": "kokosnoten manna"
            },
            "falafel mix": {
                "aliases": [],
@@ -3661,8 +3661,8 @@
            "egg tofu": {
                "aliases": [],
                "description": "",
-                "name": "egg tofu",
-                "plural_name": "egg tofus"
+                "name": "ei tofu",
+                "plural_name": "ei tofu"
            },
            "protein drink": {
                "aliases": [],
@@ -3917,7 +3917,7 @@
            "kielbasa": {
                "aliases": [],
                "description": "",
-                "name": "kielbasa",
+                "name": "kielbasa worst",
                "plural_name": "kielbasas"
            },
            "pork belly": {
@@ -4313,14 +4313,14 @@
            "sausage patty": {
                "aliases": [],
                "description": "",
-                "name": "sausage patty",
-                "plural_name": "sausage patties"
+                "name": "worstenburger",
+                "plural_name": "worst burgers"
            },
            "beef suet": {
                "aliases": [],
                "description": "",
-                "name": "beef suet",
-                "plural_name": "beef suets"
+                "name": "rundervet",
+                "plural_name": "rundervetten"
            },
            "veal roast": {
                "aliases": [],
@@ -4467,8 +4467,8 @@
            "cornish hen": {
                "aliases": [],
                "description": "",
-                "name": "cornish hen",
-                "plural_name": "cornish hens"
+                "name": "piepkuiken",
+                "plural_name": "piepkuikens"
            },
            "deli turkey": {
                "aliases": [],
@@ -4851,26 +4851,26 @@
            "duck bacon": {
                "aliases": [],
                "description": "",
-                "name": "duck bacon",
-                "plural_name": "duck bacons"
+                "name": "eenden spek",
+                "plural_name": "eenden spekken"
            },
            "pulled turkey": {
                "aliases": [],
                "description": "",
-                "name": "pulled turkey",
-                "plural_name": "pulled turkeys"
+                "name": "getrokken kalkoen",
+                "plural_name": "getrokken kalkoenen"
            },
            "chicken gyro": {
                "aliases": [],
                "description": "",
-                "name": "chicken gyro",
-                "plural_name": "chicken gyros"
+                "name": "kip gyro",
+                "plural_name": "kip gyros"
            },
            "chicken patty": {
                "aliases": [],
                "description": "",
-                "name": "chicken patty",
-                "plural_name": "chicken patties"
+                "name": "kip burger",
+                "plural_name": "kip burgers"
            },
            "chicken rib": {
                "aliases": [],