Add view mode toggle and UI improvements

- Add Source/Split/Rendered view toggle button group
- Default to rendered view when opening files, split when no file
- Add 10% side margins in full-width (non-split) modes
- Hide empty state placeholder in rendered-only view
- Update title to 'mkdedit'
- Change tauri:build to skip bundling for faster local builds
- Bump version to 1.1.0

Author: appurist

package.json

@@ -1,14 +1,14 @@
 {
   "name": "mkdedit",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
     "tauri": "tauri",
     "tauri:dev": "tauri dev",
-    "tauri:build": "tauri build",
+    "tauri:build": "tauri build --no-bundle",
     "tauri:build:win": "tauri build --bundles nsis,msi",
     "tauri:build:mac": "tauri build --bundles dmg,app",
     "tauri:build:linux": "tauri build --bundles deb,appimage",

sample-markdown.md

@@ -18,7 +18,7 @@ This demonstrates Markdown's features.
 
 ```javascript
 function hello() {
-  return "Hello from Nuemark!"
+  return "Hello from Markdown!"
 }
 ```
 

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "mkdedit"
-version = "1.0.5"
+version = "1.1.0"
 description = "A Markdown editor with live preview"
 authors = ["Appurist Software Inc."]
 license = "MIT"

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "mkdedit",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "identifier": "com.appurist.mkdedit",
   "build": {
     "frontendDist": "../dist",

src-tauri/tauri.conf.json

@@ -10,6 +10,7 @@ import Preview from './components/Preview'
 export default function App() {
   const [content, setContent] = createSignal('')
   const [editorWidth, setEditorWidth] = createSignal(50)
+  const [viewMode, setViewMode] = createSignal('rendered') // 'source', 'split', 'rendered'
 
   const fileSystem = useFileSystem()
   const { parse } = useMarkdown()
@@ -19,11 +20,20 @@ export default function App() {
     const file = fileSystem.currentFile()
     const dirty = fileSystem.isDirty()
     const title = file
-      ? `${file}${dirty ? ' *' : ''} - Markdown Editor`
-      : 'Markdown Editor'
+      ? `${file}${dirty ? ' *' : ''} - mkdedit`
+      : 'mkdedit'
     document.title = title
   })
 
+  // Switch to split view if no file is loaded after startup
+  onMount(() => {
+    setTimeout(() => {
+      if (!fileSystem.currentFile() && !content()) {
+        setViewMode('split')
+      }
+    }, 1200) // Wait for CLI/Open With file to load
+  })
+
   // Keyboard shortcut: Ctrl+S to save
   onMount(() => {
     const handleKeyDown = (e) => {
@@ -41,6 +51,7 @@ export default function App() {
         const { path, content: fileContent } = event.payload
         fileSystem.setOpenFile(path)
         setContent(fileContent)
+        setViewMode('rendered')
       })
       onCleanup(() => unlisten())
     }
@@ -55,12 +66,14 @@ export default function App() {
   function handleNew() {
     setContent('')
     fileSystem.newFile()
+    setViewMode('split')
   }
 
   async function handleOpen() {
     const fileContent = await fileSystem.openFile()
     if (fileContent !== null) {
       setContent(fileContent)
+      setViewMode('rendered')
     }
   }
 
@@ -78,22 +91,32 @@ export default function App() {
         currentFile={fileSystem.currentFile}
         isDirty={fileSystem.isDirty}
         supportsFileSystemAccess={fileSystem.supportsFileSystemAccess}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
         onNew={handleNew}
         onOpen={handleOpen}
         onSave={handleSave}
         onSaveAs={handleSaveAs}
       />
       <main class="editor-container">
-        <Editor
-          content={content}
-          onInput={handleContentChange}
-          width={editorWidth}
-        />
-        <Splitter onResize={setEditorWidth} />
-        <Preview
-          html={() => parse(content())}
-          width={() => 100 - editorWidth()}
-        />
+        {(viewMode() === 'source' || viewMode() === 'split') && (
+          <Editor
+            content={content}
+            onInput={handleContentChange}
+            width={() => viewMode() === 'split' ? editorWidth() : 100}
+            viewMode={viewMode}
+          />
+        )}
+        {viewMode() === 'split' && (
+          <Splitter onResize={setEditorWidth} />
+        )}
+        {(viewMode() === 'rendered' || viewMode() === 'split') && (
+          <Preview
+            html={() => parse(content())}
+            width={() => viewMode() === 'split' ? 100 - editorWidth() : 100}
+            viewMode={viewMode}
+          />
+        )}
       </main>
     </div>
   )

src/App.jsx

@@ -1,6 +1,11 @@
 export default function Editor(props) {
+  const isFullWidth = () => props.viewMode && props.viewMode() === 'source'
+
   return (
-    <div class="editor-pane" style={{ flex: `0 0 ${props.width()}%` }}>
+    <div
+      class={`editor-pane ${isFullWidth() ? 'editor-full' : ''}`}
+      style={{ flex: `0 0 ${props.width()}%` }}
+    >
       <textarea
         id="editor"
         placeholder="Start typing your markdown here..."

src/components/Editor.jsx

@@ -1,12 +1,17 @@
 import { Show } from 'solid-js'
 
 export default function Preview(props) {
+  const isFullWidth = () => props.viewMode && props.viewMode() === 'rendered'
+
   return (
-    <div class="preview-pane" style={{ flex: `0 0 ${props.width()}%` }}>
+    <div
+      class={`preview-pane ${isFullWidth() ? 'preview-full' : ''}`}
+      style={{ flex: `0 0 ${props.width()}%` }}
+    >
       <div class="preview-content">
         <Show
           when={props.html()}
-          fallback={<p class="empty-state">Start typing markdown to see the preview...</p>}
+          fallback={!isFullWidth() && <p class="empty-state">Start typing markdown to see the preview...</p>}
         >
           <div innerHTML={props.html()} />
         </Show>

src/components/Preview.jsx

@@ -10,7 +10,27 @@ export default function Toolbar(props) {
 
   return (
     <header class="toolbar">
-      <h1>Markdown Editor</h1>
+      <h1>mkdedit</h1>
+      <div class="view-toggle">
+        <button
+          class={`btn-toggle ${props.viewMode() === 'source' ? 'active' : ''}`}
+          onClick={() => props.onViewModeChange('source')}
+        >
+          Source
+        </button>
+        <button
+          class={`btn-toggle ${props.viewMode() === 'split' ? 'active' : ''}`}
+          onClick={() => props.onViewModeChange('split')}
+        >
+          Split
+        </button>
+        <button
+          class={`btn-toggle ${props.viewMode() === 'rendered' ? 'active' : ''}`}
+          onClick={() => props.onViewModeChange('rendered')}
+        >
+          Rendered
+        </button>
+      </div>
       <div class="file-controls">
         <span class="current-file">{displayName()}</span>
         <button class="btn" onClick={props.onOpen}>Open</button>

src/components/Toolbar.jsx

@@ -78,6 +78,46 @@ body {
   background: #005a9e;
 }
 
+.view-toggle {
+  display: flex;
+  margin-left: 1.5rem;
+}
+
+.btn-toggle {
+  padding: 0.4rem 0.75rem;
+  border: 1px solid #ccc;
+  background: white;
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.btn-toggle:first-child {
+  border-radius: 4px 0 0 4px;
+}
+
+.btn-toggle:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
+.btn-toggle:not(:first-child) {
+  border-left: none;
+}
+
+.btn-toggle:hover {
+  background: #f0f0f0;
+}
+
+.btn-toggle.active {
+  background: #007acc;
+  color: white;
+  border-color: #007acc;
+}
+
+.btn-toggle.active + .btn-toggle {
+  border-left-color: #007acc;
+}
+
 .editor-container {
   display: flex;
   flex: 1;
@@ -90,6 +130,10 @@ body {
   flex-direction: column;
 }
 
+.editor-pane.editor-full {
+  padding: 0 10%;
+}
+
 #editor {
   flex: 1;
   border: none;
@@ -131,6 +175,10 @@ body {
   background: white;
 }
 
+.preview-pane.preview-full .preview-content {
+  margin: 0 10%;
+}
+
 .preview-content {
   padding: 1rem;
   max-width: none;