Add welcome landing screen

app/renderer/app.js

@@ -12,7 +12,7 @@ class StepForgeApp {
     this.homeBtn = document.getElementById('btn-home');
 
     this.state = {
-      view: 'library',
+      view: 'welcome',
       query: '',
       folderFilter: 'all',
       library: { guides: [], folders: [], guideFolders: {} },
@@ -24,9 +24,11 @@ class StepForgeApp {
     this.libraryRenderToken = 0;
 
     this.view.innerHTML = `
+      <div id="welcome-host"></div>
       <div id="library-host"></div>
       <div id="editor-host" class="hidden"></div>
     `;
+    this.welcomeHost = document.getElementById('welcome-host');
     this.libraryHost = document.getElementById('library-host');
     this.editorHost = document.getElementById('editor-host');
 
@@ -61,7 +63,7 @@ class StepForgeApp {
     });
 
     this.homeBtn.addEventListener('click', () => {
-      if (this.state.view === 'editor') this.showLibrary();
+      if (this.state.view !== 'welcome') this.showWelcome();
     });
 
     document.addEventListener('keydown', (e) => {
@@ -85,9 +87,18 @@ class StepForgeApp {
   }
 
   async init() {
-    await this.refreshData();
-    this.updateCaptureState(await api.capture.state());
-    this.renderLibrary();
+    this.renderWelcome();
+    try {
+      await this.refreshData();
+    } catch (err) {
+      console.error(err);
+    }
+    try {
+      this.updateCaptureState(await api.capture.state());
+    } catch (err) {
+      console.error(err);
+    }
+    if (this.state.view === 'welcome') this.renderWelcome();
   }
 
   async refreshData() {
@@ -123,12 +134,38 @@ class StepForgeApp {
 
   setView(view) {
     this.state.view = view;
+    this.welcomeHost.classList.toggle('hidden', view !== 'welcome');
     this.libraryHost.classList.toggle('hidden', view !== 'library');
     this.editorHost.classList.toggle('hidden', view !== 'editor');
     this.searchInput.classList.toggle('hidden', view !== 'library');
     this.renderTopbar();
   }
 
+  async showWelcome() {
+    this.editor.setActive(false);
+    this.setView('welcome');
+    this.renderWelcome();
+  }
+
+  async openExistingWorkspace() {
+    try {
+      await this.refreshData();
+    } catch (err) {
+      console.error(err);
+    }
+    this.state.query = '';
+    this.searchInput.value = '';
+    this.state.folderFilter = 'all';
+    this.setView('library');
+    this.renderLibrary();
+  }
+
+  async startNewCapture() {
+    const guide = await api.library.create({ title: 'Untitled capture' });
+    await this.openGuide(guide.guideId);
+    await api.capture.session({ action: 'start', guideId: guide.guideId });
+  }
+
   async showLibrary(reason = null) {
     this.editor.setActive(false);
     this.setView('library');
@@ -182,6 +219,9 @@ class StepForgeApp {
 
   renderTopbar() {
     clearNode(this.topbarContext);
+    if (this.state.view === 'welcome') {
+      return;
+    }
     if (this.state.view === 'library') {
       this.topbarContext.append(
         el('button', { type: 'button', onClick: () => this.createGuide() }, 'New'),
@@ -205,6 +245,30 @@ class StepForgeApp {
     );
   }
 
+  renderWelcome() {
+    this.setView('welcome');
+    clearNode(this.welcomeHost);
+
+    const body = el('div.welcome',
+      {},
+      el('div.welcome-hero',
+      {},
+        el('div.welcome-kicker', {}, 'Local guide capture'),
+        el('h1', {}, 'StepForge'),
+        el('p', {}, 'Offline guide capture and export for local workspaces.'),
+      ),
+      el('div.welcome-actions',
+        {},
+        el('button.primary.welcome-action', { type: 'button', onClick: () => this.startNewCapture() }, 'New Capture'),
+        el('button.welcome-action', { type: 'button', onClick: () => this.openExistingWorkspace() }, 'Existing Workspace'),
+        el('button.welcome-action', { type: 'button', onClick: () => this.openSettings() }, 'Settings'),
+      ),
+    );
+
+    this.welcomeHost.append(body);
+    this.renderTopbar();
+  }
+
   async renderLibrary() {
     this.setView('library');
     this.editor.setActive(false);