UX Improvements (#31)

* logo as link

* pass index to scene builder

* remove scene shortcuts

* monaco editor UX

* author note

* tweaks

* tweaks

* changelog and pr template

Author: dsehnal

.github/pull_request_template.md

@@ -0,0 +1,8 @@
+<!-- Thank you for contributing to mol-view-stories -->
+
+# Description
+
+
+## Actions
+
+- [ ] Added description of changes to the `[Unreleased]` section of `CHANGELOG.md`

CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+All notable changes to this project will be documented in this file, following the suggestions of [Keep a CHANGELOG](http://keepachangelog.com/). This project adheres to [Semantic Versioning](http://semver.org/).
+
+## [Unreleased]
+
+## [v1.0.0]
+
+- Initial release

src/app/page.tsx

@@ -188,9 +188,7 @@ export default function Home() {
           </div>
         </section>
         <Features />
-        <div className='text-right text-sm text-muted-foreground py-6 mt-10'>
-          Version {APP_VERSION}
-        </div>
+        <div className='text-right text-sm text-muted-foreground py-6 mt-10'>Version {APP_VERSION}</div>
       </Main>
     </>
   );

src/app/state/actions.ts

@@ -91,10 +91,10 @@ export function newStory() {
 }
 
 const createStateProvider = (code: string) => {
-  return new Function('builder', code);
+  return new Function('builder', 'index', code);
 };
 
-async function getMVSSnapshot(story: Story, scene: SceneData) {
+async function getMVSSnapshot(story: Story, scene: SceneData, index: number) {
   try {
     const stateProvider = createStateProvider(`
 async function _run_builder() {
@@ -103,7 +103,7 @@ async function _run_builder() {
 return _run_builder();
 `);
     const builder = MVSData.createBuilder();
-    await stateProvider(builder);
+    await stateProvider(builder, index);
     if (scene.camera) {
       builder.camera({
         position: adjustedCameraPosition(scene.camera),
@@ -139,8 +139,9 @@ export async function getMVSData(story: Story, scenes: SceneData[] = story.scene
   const snapshots: Snapshot[] = [];
 
   // TODO: not sure if Promise.all would be better here.
-  for (const scene of scenes) {
-    const snapshot = await getMVSSnapshot(story, scene);
+  for (let index = 0; index < scenes.length; index++) {
+    const scene = scenes[index];
+    const snapshot = await getMVSSnapshot(story, scene, index);
     snapshots.push(snapshot);
   }
   const index: MVSData = {

src/app/state/types.ts

@@ -36,6 +36,7 @@ export type StoryContainer = {
 
 export type StoryMetadata = {
   title: string;
+  author_note?: string;
 };
 
 export type Story = {

src/app/version.ts

@@ -1 +1 @@
-export const APP_VERSION = '1.0.0-beta.1';
+export const APP_VERSION = '1.0.0-beta.2';

src/components/common.tsx

@@ -7,6 +7,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
 import { useRouter, usePathname } from 'next/navigation';
 import { useUnsavedChanges } from '@/hooks/useUnsavedChanges';
 import { ConfirmDialog } from './ui/confirm-dialog';
+import Link from 'next/link';
 
 function HeaderLogo() {
   const router = useRouter();
@@ -15,12 +16,10 @@ function HeaderLogo() {
   const [showDialog, setShowDialog] = React.useState(false);
   const handleClick = (e: React.MouseEvent) => {
     // Only intercept if on /builder
-    if (pathname.startsWith('/builder') && hasUnsavedChanges) {
+    if (pathname.includes('/builder') && hasUnsavedChanges) {
       e.preventDefault();
       disableUnsavedChanges(); // Disable browser alerts
       setShowDialog(true);
-    } else {
-      router.push('/');
     }
   };
   const handleConfirm = () => {
@@ -29,15 +28,15 @@ function HeaderLogo() {
   };
   return (
     <>
-      <button
-        type='button'
+      <Link
+        href='/'
         onClick={handleClick}
         className='flex items-center gap-2 text-xl font-bold text-foreground hover:text-foreground/80 transition-colors bg-transparent border-none p-0 cursor-pointer'
         style={{ background: 'none', border: 'none' }}
       >
         <Image src='/favicon.ico' alt='MolViewStories' width={24} height={24} className='w-6 h-6' />
         MolViewStories
-      </button>
+      </Link>
       <ConfirmDialog
         open={showDialog}
         onOpenChange={setShowDialog}
@@ -113,7 +112,6 @@ export function Main({ children, className }: { children: React.ReactNode; class
 export function PressToSave() {
   return (
     <div className='text-xs text-muted-foreground mb-2'>
-      Press{' '}
       <span className='bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none'>
         <span>Ctrl/⌘/Alt + S/Enter</span>
       </span>{' '}
@@ -122,6 +120,17 @@ export function PressToSave() {
   );
 }
 
+export function PressToCodeComplete() {
+  return (
+    <div className='text-xs text-muted-foreground mb-2'>
+      <span className='bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none'>
+        <span>Ctrl + Space</span>
+      </span>{' '}
+      for code completion
+    </div>
+  );
+}
+
 export function TooltipWrapper({
   children,
   tooltip,