Can I put form actions in +layout.server.js?

I have a small "Admin Panel" on a website I'm working on. Because the AdminPanel is a component, I put it into +layout.svelte so it will be on every page. I'm working on adding something into my database through the admin panel through form actions but because it's on everypage, it feels kinda counterintuitive to copy export const actions with proper name into every +page.server.js in every endpoint. So I am asking if I can somehow put it into +layout.server.js. When I tried tho, it returned an error that it couldn't find any action with that name.

Solution

You can create a separate route for holding that shared action and target it via an absolute path.

So instead of this:

<form ...>
<form action="?/action" ...>

You would just target it as:

<form action="/full/route" ...>
<form action="/full/route?/action" ...>

The layout does not have a form property, though. In theory, when using the enhance action, it should update the $page.form but when testing it, that did not happen; possibly because the route is not that of the action. You can however get the result data manually as well.

<script>
    import { applyAction, enhance } from '$app/forms';

    let form = undefined;
    function onSubmit() {
        return async ({ result }) => {
            await applyAction(result); // might not do anything here

            if (result.type == 'success' || result.type == 'failure')
                form = result.data;
        }
    }
</script>

<form ... use:enhance={onSubmit}>