feat: design mode final docs

Author: devvaannsh

docs/05-design-mode.md

@@ -2,47 +2,32 @@
 title: Design Mode
 ---
 
-**Design Mode** is a layout that hides the code editor and gives the entire window to your **Live Preview**. It is built for visual-first work: chatting with the AI while you watch changes land in the preview, editing your page directly in Live Preview Edit Mode, or testing how your design looks at different device sizes.
+**Design Mode** is a layout that hides the code editor and gives that entire space to your **Live Preview**. It is built for visual-first work: chatting with the AI while you watch changes land in the preview, editing your page directly in Live Preview Edit Mode, or testing how your design looks at different device sizes.
 
 <!-- Add a video here showing the toggle going from the normal layout into Design Mode and back. The editor should disappear, the Live Preview should take over the editor area, and the sidebar should stay visible. -->
 
 ## Why use Design Mode
 
-- **Pair with the AI Chat panel.** Ask the AI to make a change and watch it land in the preview as the code changes, without glancing at the editor.
-- **Edit visually with Live Preview Edit Mode.** Click elements, drag them, change text, and swap images directly in the page (Pro feature).
-- **Test responsive designs.** With Device Preview (Pro), check how your page looks on phone, tablet, and desktop sizes without losing horizontal space to the editor.
+- **Pair with the AI Chat panel.** Ask the AI to make a change and see it applied instantly in the preview as the code updates without the need to open the editor. [Read More about AI Chat](./Pro%20Features/ai-chat).
+- **Edit visually with Live Preview Edit Mode.** Click elements, drag them, change text, swap images, and much more, directly in the preview. [Read More about Live Preview Edit Mode](./Pro%20Features/edit-mode-live-preview).
+- **Test responsive designs.** With Device Preview, check how your page looks on phone, tablet, and desktop sizes with just a click. [Read More about Device Preview](./Pro%20Features/device-preview).
 
-## Entering Design Mode
+## Switching to Design Mode
 
-There are two ways to enter Design Mode:
+There are three ways to switch to Design Mode:
 
-- Click the **Design Mode** button *(pen icon)* near the top of the **Control Bar**, the narrow vertical strip between the sidebar and the editor.
+- Click the **Design Mode** button *(pen nib icon)* near the top of the **Control Bar**, the narrow vertical strip between the sidebar and the editor.
 - Click the **fullscreen** button *(expand icon)* in the Live Preview toolbar, right after the reload button.
+- Choose **File > Toggle Design Mode** from the menu bar.
 
-Both buttons toggle the same mode. Click either one again to exit.
+All three toggle the same mode. Use any of them again to switch back to the code editor.
 
-<!-- Add an image here showing both entry points side by side: the Control Bar Design Mode button (pen icon) and the Live Preview toolbar fullscreen button (expand icon), each with an arrow pointing to it. -->
+<!-- Add an image here showing both entry points side by side: the Control Bar Design Mode button (pen nib icon) and the Live Preview toolbar fullscreen button (expand icon), each with an arrow pointing to it. -->
 
 ## The Design Mode layout
 
-In Design Mode the code editor is hidden and the Live Preview takes over its space. The sidebar (file tree) and the Control Bar stay visible, and the AI Chat panel keeps its position if it is open.
-
-If the Live Preview was not already open when you entered Design Mode, Phoenix Code opens it for you.
+When Design Mode is on, the sidebar stays visible alongside the maximized Live Preview. The recommended setup is to keep **AI Chat** open in the sidebar so you can ask for changes and watch them appear in the preview as the AI works. If the Live Preview is not already open, Phoenix Code opens it for you.
 
 <!-- Add a side-by-side image here comparing the normal layout (sidebar | editor | live preview) with the Design Mode layout (sidebar | live preview filling the rest of the window). -->
 
-### Hiding the sidebar
-
-To go even more focused, click the **toggle sidebar** button *(double left-arrow icon)* just below the Design Mode toggle in the Control Bar to hide the sidebar. Click it again to bring the sidebar back.
-
-## Working with the AI Chat panel
-
-Design Mode is the recommended way to work with [AI Chat](./Pro%20Features/ai-chat). The AI Chat panel keeps its position when you enter Design Mode, so you can chat on one side and watch the maximized preview update on the other as the AI works.
-
-<!-- Add a video here showing the AI Chat panel and a maximized Live Preview side by side, with the user typing a request and the change appearing in the preview as the AI runs. -->
-
-## Working with Live Preview Edit Mode
-
-[Live Preview Edit Mode](./Pro%20Features/edit-mode-live-preview) is an independent toggle, but it pairs naturally with Design Mode. Enter Design Mode for the room, then click the pen icon in the Live Preview toolbar to enable Edit Mode and start clicking, dragging, and editing elements directly in the page.
-
-> Live Preview Edit Mode is a Pro feature. Design Mode itself is free.
+To hide the sidebar too, click the **toggle sidebar** button *(double left-arrow icon)* just below the Design Mode toggle in the Control Bar. Click it again to bring the sidebar back.