create route file action

website/src/lib/components/explorer/ExplorerRow.svelte

@@ -116,12 +116,16 @@
     /** The folder where what is made from the menu goes: the folder of the row. */
     let folder = $derived(kind === 'file' ? undefined : path);
 
-    /** Asks for the name of a file or a folder to make in the folder of the row (see `creating`). */
-    function create(what: 'file' | 'folder') {
+    /**
+     * Asks for the name of a file or a folder to make in the folder of the row (see `creating`).
+     * With `route`, the file starts with an empty route.
+     */
+    function create(what: 'file' | 'folder', route = false) {
         if (folder === undefined) return;
         // where what is being named is shown
         folders.open(folder);
         creating.kind = what;
+        creating.route = route;
         creating.parent = folder;
     }
 
@@ -286,6 +290,10 @@
                 <Plus size="16" />
                 {i18n._('menu.explorer_menu.new_file')}
             </ContextMenu.Item>
+            <ContextMenu.Item onclick={() => create('file', true)}>
+                <Plus size="16" />
+                {i18n._('menu.explorer_menu.new_route_file')}
+            </ContextMenu.Item>
             <ContextMenu.Item onclick={() => create('folder')}>
                 <Plus size="16" />
                 {i18n._('menu.explorer_menu.new_folder')}

website/src/lib/components/explorer/ExplorerTree.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
-    import { FileText, Folder } from '@lucide/svelte';
+    import { FileText, Folder, Route } from '@lucide/svelte';
     import { getContext } from 'svelte';
     import { get } from 'svelte/store';
     import { toast } from 'svelte-sonner';
@@ -45,6 +45,7 @@
     async function create(value: string, retry: boolean) {
         const kind = pending;
         const parent = folder;
+        const route = creating.route;
         if (kind === undefined || parent === undefined) return;
         const name = value.trim();
         const taken = entries.some(
@@ -60,7 +61,7 @@
         if (name === '' || taken) return;
         let created: string | undefined;
         if (kind === 'file') {
-            const id = await engine.newFileIn(name, parent);
+            const id = await engine.newFileIn(name, parent, route);
             created = id === undefined ? undefined : get(workspace)?.files[id]?.path;
             if (created !== undefined) {
                 currentTool.set(Tool.ROUTING);
@@ -94,14 +95,20 @@
 <!-- the name of what is being made, which it is made with -->
 {#snippet named(kind: 'file' | 'folder')}
     <div class="flex flex-row items-center h-7 pl-1 pr-1 {kind === 'file' ? 'gap-1.5' : 'gap-1'}">
-        {#if kind === 'file'}
+        {#if kind === 'file' && creating.route}
+            <Route size="16" class="shrink-0" />
+        {:else if kind === 'file'}
             <FileText size="16" class="shrink-0" />
         {:else}
             <Folder size="16" class="shrink-0" />
         {/if}
         <NameInput
             placeholder={i18n._(
-                kind === 'file' ? 'menu.explorer_menu.new_file' : 'menu.explorer_menu.new_folder'
+                kind === 'folder'
+                    ? 'menu.explorer_menu.new_folder'
+                    : creating.route
+                      ? 'menu.explorer_menu.new_route_file'
+                      : 'menu.explorer_menu.new_file'
             )}
             oncommit={create}
             oncancel={() => (creating.parent = undefined)}

website/src/lib/components/explorer/state.svelte.ts

@@ -15,12 +15,14 @@ export const renaming: { path: string | undefined } = $state({ path: undefined }
 
 /**
  * The file or folder that is being made in a folder (`parent`) of the explorer: it is only made once
- * the user gave it a name.
+ * the user gave it a name. With `route`, the file starts with an empty route.
  */
-export const creating: { parent: string | undefined; kind: 'file' | 'folder' } = $state({
-    parent: undefined,
-    kind: 'file',
-});
+export const creating: { parent: string | undefined; kind: 'file' | 'folder'; route: boolean } =
+    $state({
+        parent: undefined,
+        kind: 'file',
+        route: false,
+    });
 
 /** What is dragged in the explorer, and the folder it would be dropped in. */
 export const dragging: { paths: string[]; target: string | undefined } = $state({