Duplicate, delete dialogs and save status in the form document (BITS-282 part d)

.vitepress/config.mts

@@ -29,8 +29,8 @@ export default defineConfig({
                         text: "Managing Forms",
                         link: "/workbench/managing-forms",
                     },
-                    { text: "Workbench", link: "/workbench/workbench" },
-                    { text: "Storyboard", link: "/workbench/storyboard" },
+                    { text: "Form Editor", link: "/workbench/workbench" },
+                    { text: "Outline", link: "/workbench/storyboard" },
                     { text: "Form Blocks", link: "/workbench/form-blocks" },
                     {
                         text: "Conditional Logic",

CHANGELOG.md

@@ -23,7 +23,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The form list loads faster when a team has many forms. It now needs the same few database queries for one form or a hundred. Before, every form added 3 queries. (#256)
 -   On screens narrower than 1280 px, a form's editor bar now sits in two rows under the app header: the form with Dashboard and Preview, then Editor, Settings, Integrations and Submissions as tabs. Nothing in it scrolls sideways any more, and the header keeps the logo and your team name. On every screen, keyboard focus in the editor bar and the account menu now shows a blue ring. (#257)
 -   A form's pages have one top bar instead of two: the form's name with its menu, a Draft or Live label, the pages, Preview, Publish and your account. Publish first checks for questions without text, rules that point to a deleted question and a missing privacy link. Once the form is live, Share has its link, Open form and Unpublish. On a phone the pages sit in a tab bar at the bottom. (#265)
--   The form editor shows your whole form as one column. Each question shows its number, answer type, text, and if it is required, has rules or is hidden. The question you work on opens right there, also on a phone, where you couldn't edit questions before. Hiding a question, random order and custom answers are now under the question's Settings. An outline next to the form jumps to any question, and on a phone a question's Settings open from the bottom of the screen. Move a question with Alt+Up/Down, with Move up and Move down in its menu, or by dragging. (#268, #272, #275)
+-   The form editor shows your whole form as one column. Each question shows its number, answer type, text, and if it is required, has rules or is hidden. The question you work on opens right there, also on a phone, where you couldn't edit questions before. Hiding a question, random order and custom answers are now under the question's Settings. An outline next to the form jumps to any question, and on a phone a question's Settings open from the bottom of the screen. Move a question with Alt+Up/Down, with Move up and Move down in its menu, or by dragging. Duplicate in a question's menu puts a copy right below it. (#268, #272, #275, #277)
 -   Deleting a question, a group, an answer choice, a consent policy or a logic rule in the form editor now asks first in the app's own dialog. It names the question, how many answers will be deleted with it, and the questions whose rules will stop working. A choice nobody picked, or a policy nobody agreed to, is still deleted at once. (#269)
 
 ### Fixed

docs/workbench/conditional-logic.md

@@ -14,8 +14,8 @@ Conditional logic lets you control the flow of your form based on how users resp
 
 To add logic to any block in your form:
 
-1. Select the block you want to apply logic to
-2. Click the **Block Logic** button in the block footer
+1. Open the question you want to apply logic to (for a group: use its header)
+2. Click **Rules** at the bottom of the question
 3. In the slide-out panel that appears, click the **Rule** button to add a new rule
 4. Give your rule a descriptive name (e.g., "Skip to payment if premium selected")
 5. Configure your conditions and actions (detailed below)
@@ -73,9 +73,7 @@ Go to logic is evaluated after a user interacts with the current block. When sel
 
 ## Logic Visualization
 
-Blocks with logic rules applied are indicated by a blue highlight on the **Block Logic** button. If a block has multiple rules, a counter will show the number of applied rules (e.g., "Block Logic (2)").
-
-When viewing the Storyboard with logic visualization enabled, you can see a visual representation of all logic rules, making it easier to understand your form's conditional flow.
+In the editor, the line below each question shows how many rules it has (e.g., "2 rules"), and its **Rules** button shows the same count (e.g., "Rules (2)").
 
 ## Best Practices
 

docs/workbench/form-blocks.md

@@ -37,14 +37,14 @@ Input offers a variety of block types to gather different kinds of information:
 
 To add a new block to your form:
 
-1. Click the "+" button at the bottom of an existing block
-2. Choose the block type from the dropdown menu
-3. The new block will be inserted below the current block
+1. Click **Add question** at the end of the form, or **Add question below** in a question's menu (…)
+2. The new question opens with the cursor in its text
+3. Choose its answer type at the bottom of the question
 
 ## Block Groups
 
 Organize related blocks together:
 
-1. **Creating a Group**: Select multiple blocks and click "Group"
-2. **Group Settings**: Add a group title and description
-3. **Collapsing/Expanding**: Control group visibility in the editor
+1. **Creating a Group**: Click **Add group** at the end of the form and give it a name
+2. **Filling a Group**: Use **Add question to this group** in the group's menu, or drag questions into it
+3. **Hiding a Group**: **Hide group** in its menu hides all its questions at once, and a rule on the group shows or hides them together

docs/workbench/storyboard.md

@@ -1,46 +1,16 @@
-# Storyboard: Form Block Overview
+# Outline
 
-The Storyboard is the sidebar component of the Workbench that provides a scrollable overview of all the blocks in your form. It helps you navigate through your form blocks quickly and efficiently.
+The outline is a short list of your form's questions and groups. Use it to jump to a question in a long form. It replaces the Storyboard of earlier versions.
 
-## What is the Storyboard?
+## Where to find it
 
-The Storyboard is essentially a compact representation of your form structure that:
+-   **Wide screens (1280 px and up)** - The outline sits on the left of the editor
+-   **Tablets and phones** - Click **Outline** above the questions to open it as a panel. Close it with the close button or Escape
 
--   Shows all blocks in your form in sequential order
--   Allows quick navigation between blocks
--   Provides a way to reorder blocks through drag and drop
--   Displays visual indicators for blocks with conditional logic
+## Using the outline
 
-## Using the Storyboard
+-   Each question shows its number and the start of its text. Groups show their name, with their questions below
+-   Click a question to open it in the document, scrolled into view, with the cursor in its text
+-   The open question is marked, and the outline keeps it in view
 
-### Navigating Your Form
-
-The Storyboard makes it easy to move through your form:
-
-1. **Scrolling**: Scroll up and down to see all the blocks in your form
-2. **Block Selection**: Click on any block to select it and display its properties in the main Workbench area
-3. **Visual Overview**: Quickly see your entire form structure without having to navigate through the form itself
-
-### Managing Blocks
-
-The Storyboard provides essential block management capabilities:
-
-1. **Reordering**: Drag and drop blocks to change their order in the form
-2. **Adding Blocks**: Use the "+" button at the bottom of blocks to add new blocks
-3. **Removing Blocks**: Select a block and use the delete option to remove it
-4. **Block Status**: See visual indicators for required fields or blocks with conditional logic
-
-### Logic Indicators
-
-When you've added conditional logic to blocks, the Storyboard helps you keep track:
-
--   Blocks with conditional logic have visual indicators
--   You can quickly identify which blocks have special behavior
-
-### Form Organization
-
-For forms with multiple questions, the Storyboard helps you:
-
--   Keep track of the overall structure
--   Ensure a logical question sequence
--   Easily navigate to specific sections
+To add, move or delete questions, use the document itself. See [The Form Editor](./workbench.md).

docs/workbench/workbench.md

@@ -1,47 +1,51 @@
-# Workbench Overview
+# The Form Editor
 
-The Workbench is the core interface of Input where you build and design your forms. It provides a powerful, intuitive environment for creating engaging form experiences without requiring any coding knowledge.
+The editor is where you build your form. It shows the whole form as one document: every question in order, with groups as sections. You edit a question right where it sits in the form, on a computer, a tablet or a phone.
 
-## Workbench Layout
+## Layout
 
-The Workbench is divided into several key areas:
+1. **Top bar** - The form's name and menu, Draft or Live, the form's pages (Editor, Settings, Integrations, Submissions), the save status, Preview and Publish
+2. **Outline** - A short list of all questions and groups to jump to one. On wide screens it sits on the left; on smaller screens the **Outline** button opens it as a panel. See [Outline](./storyboard.md)
+3. **Document** - Your questions in the order people answer them
 
-1. **Main Workbench Area** - The central area where you can see and interact with the currently selected form block
-2. **Sidebar** - Contains a list of all form blocks and tools for adding new blocks
-3. **Top Navigation** - Access to form settings, preview, and publishing options
+## Reading the document
 
-## Working with Blocks
+Each question shows:
 
-The building blocks of your form are called "blocks." Each block represents a question, content, or interaction in your form:
+-   Its number and an icon for its answer type
+-   Its text, on up to two lines
+-   A line below with the answer type, the number of choices, **Required**, the number of rules, **Hidden**, and its identifier if you gave it one
 
-1. **Adding Blocks** - Click the "+" button at the bottom of any block to add a new block below it
-2. **Selecting Blocks** - Click on any block in the sidebar to select it and edit its properties in the main workbench area
-3. **Rearranging Blocks** - Drag and drop blocks in the sidebar to reorder them in your form
-4. **Deleting Blocks** - Select a block and click the trash icon to remove it
+Groups show their name with their questions inside. An empty group says how to add a question to it.
 
-## Block Configuration
+## Editing a question
 
-When you select a block, you can configure its properties in the main workbench area:
+Click a question, or move to it with Tab and press Enter, to open it in place. The open question shows:
 
-1. **Block Type** - Choose the type of interaction (text, multiple choice, etc.)
-2. **Question Text** - The main prompt or question for the user
-3. **Description** - Optional additional information about the question
-4. **Required Setting** - Toggle whether the user must complete this block
-5. **Advanced Settings** - Access additional options specific to each block type
+1. **Text** - The question with a toolbar for bold, links, images, headings, lists and more
+2. **Choices** - For multiple choice and checkboxes. Each row has a grip to drag it and a delete button. Alt+Up and Alt+Down move a choice
+3. **Answer type** - Change what kind of answer the question takes
+4. **Required** - Whether people must answer it
+5. **Settings** - The settings of this answer type, the identifier and **Hide this question**. On a phone they open as a sheet from the bottom
+6. **Rules** - Logic rules for this question, see [Conditional Logic](./conditional-logic.md)
+7. **Menu (…)** - Duplicate, Add question below, Move up, Move down, Copy question ID and Delete
 
-## Preview Mode
+Press Escape to close the question. A link with `?block=` opens that question and scrolls it into view.
 
-To see how your form will appear to users:
+## Adding, moving and deleting
 
-1. Click the "Preview" button in the top navigation
-2. A new browser tab will open showing your form as users will see it
-3. Navigate through your form as a user would
-4. Test interactions, conditional logic, and overall flow
-5. Close the preview tab to return to the Workbench
+-   **Add** - Use **Add question** or **Add group** at the end of the form, or **Add question below** in a question's menu
+-   **Duplicate** - The copy goes right below the question and opens
+-   **Move** - Drag a question by its grip; the page scrolls when you drag near its edge. With the keyboard, press Alt+Up or Alt+Down. On touch screens, use **Move up** and **Move down** in the menu. A screen reader hears the new position, for example "Moved to position 3 of 34"
+-   **Delete** - The editor asks first. It names the question, how many answers will be deleted with it, and the questions whose rules will stop working
 
-## Auto-Save
+## Preview
 
-Input automatically saves your work as you make changes, so you never have to worry about losing progress. The saving status is indicated in the top navigation bar.
+Click **Preview** in the top bar to open your form in a new tab, as people will see it. Test the questions, the rules and the flow, then close the tab to return to the editor.
+
+## Saving
+
+Every change saves on its own. The top bar shows "Saving…", then "Saved" for a moment. When a change can't be saved, it says "Not saved" and offers **Retry**. On smaller screens only the icon shows.
 
 ## Published vs. Unpublished Forms
 
@@ -50,6 +54,6 @@ Forms in Input can be either published or unpublished:
 - **Published** - The form is visible to the public and can receive submissions
 - **Unpublished** - The form is only visible to you and team members with access
 
-When you make changes to a form in the Workbench, these changes are saved immediately. If the form is published, these changes will be visible to users right away. There is no separate draft state - any changes you make to a published form will be live immediately.
+When you make changes to a form in the editor, these changes are saved immediately. If the form is published, these changes will be visible to users right away. There is no separate draft state - any changes you make to a published form will be live immediately.
 
-You can toggle a form between published and unpublished states using the publish/unpublish controls in the form settings.
+Use **Publish** in the top bar to publish a form. Once it is live, **Share** has its link, Open form and Unpublish.

resources/js/Pages/Forms/Edit.vue

@@ -1,5 +1,6 @@
 <template>
   <app-layout title="Edit Form" limit-height>
+    <template #save-status><SaveStatus /></template>
     <FormDocument :status="status" @retry="loadBlocks" />
   </app-layout>
 </template>
@@ -8,6 +9,7 @@
 import AppLayout from "@/Layouts/AppLayout.vue";
 import FormDocument from "@/components/Factory/Document/FormDocument.vue";
 import { useForm, useWorkbench } from "@/stores";
+import SaveStatus from "@/components/Factory/Shared/SaveStatus.vue";
 import { useSaveOnLeave } from "@/components/Factory/Shared/useSaveOnLeave";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 

resources/js/api/blocks.ts

@@ -63,6 +63,13 @@ export function callUpdateFormBlock(
     });
 }
 
+// the copy goes right after the original; the server renumbers the form
+export function callDuplicateFormBlock(
+    id: number
+): Promise<AxiosResponse<FormBlockModel>> {
+    return handler.post(window.route("api.blocks.duplicate", { block: id }));
+}
+
 export function callDeleteFormBlock(id: number): Promise<AxiosResponse> {
     return new Promise(async (resolve, reject) => {
         try {