This reverts commit 78247ac9ba.
This commit is contained in:
+5
-69
@@ -12,7 +12,7 @@ class StepForgeApp {
|
|||||||
this.homeBtn = document.getElementById('btn-home');
|
this.homeBtn = document.getElementById('btn-home');
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
view: 'welcome',
|
view: 'library',
|
||||||
query: '',
|
query: '',
|
||||||
folderFilter: 'all',
|
folderFilter: 'all',
|
||||||
library: { guides: [], folders: [], guideFolders: {} },
|
library: { guides: [], folders: [], guideFolders: {} },
|
||||||
@@ -24,11 +24,9 @@ class StepForgeApp {
|
|||||||
this.libraryRenderToken = 0;
|
this.libraryRenderToken = 0;
|
||||||
|
|
||||||
this.view.innerHTML = `
|
this.view.innerHTML = `
|
||||||
<div id="welcome-host"></div>
|
|
||||||
<div id="library-host"></div>
|
<div id="library-host"></div>
|
||||||
<div id="editor-host" class="hidden"></div>
|
<div id="editor-host" class="hidden"></div>
|
||||||
`;
|
`;
|
||||||
this.welcomeHost = document.getElementById('welcome-host');
|
|
||||||
this.libraryHost = document.getElementById('library-host');
|
this.libraryHost = document.getElementById('library-host');
|
||||||
this.editorHost = document.getElementById('editor-host');
|
this.editorHost = document.getElementById('editor-host');
|
||||||
|
|
||||||
@@ -63,7 +61,7 @@ class StepForgeApp {
|
|||||||
});
|
});
|
||||||
|
|
||||||
this.homeBtn.addEventListener('click', () => {
|
this.homeBtn.addEventListener('click', () => {
|
||||||
if (this.state.view !== 'welcome') this.showWelcome();
|
if (this.state.view === 'editor') this.showLibrary();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
@@ -87,18 +85,9 @@ class StepForgeApp {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async init() {
|
async init() {
|
||||||
this.renderWelcome();
|
await this.refreshData();
|
||||||
try {
|
this.updateCaptureState(await api.capture.state());
|
||||||
await this.refreshData();
|
this.renderLibrary();
|
||||||
} 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() {
|
async refreshData() {
|
||||||
@@ -134,38 +123,12 @@ class StepForgeApp {
|
|||||||
|
|
||||||
setView(view) {
|
setView(view) {
|
||||||
this.state.view = view;
|
this.state.view = view;
|
||||||
this.welcomeHost.classList.toggle('hidden', view !== 'welcome');
|
|
||||||
this.libraryHost.classList.toggle('hidden', view !== 'library');
|
this.libraryHost.classList.toggle('hidden', view !== 'library');
|
||||||
this.editorHost.classList.toggle('hidden', view !== 'editor');
|
this.editorHost.classList.toggle('hidden', view !== 'editor');
|
||||||
this.searchInput.classList.toggle('hidden', view !== 'library');
|
this.searchInput.classList.toggle('hidden', view !== 'library');
|
||||||
this.renderTopbar();
|
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) {
|
async showLibrary(reason = null) {
|
||||||
this.editor.setActive(false);
|
this.editor.setActive(false);
|
||||||
this.setView('library');
|
this.setView('library');
|
||||||
@@ -219,9 +182,6 @@ class StepForgeApp {
|
|||||||
|
|
||||||
renderTopbar() {
|
renderTopbar() {
|
||||||
clearNode(this.topbarContext);
|
clearNode(this.topbarContext);
|
||||||
if (this.state.view === 'welcome') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.state.view === 'library') {
|
if (this.state.view === 'library') {
|
||||||
this.topbarContext.append(
|
this.topbarContext.append(
|
||||||
el('button', { type: 'button', onClick: () => this.createGuide() }, 'New'),
|
el('button', { type: 'button', onClick: () => this.createGuide() }, 'New'),
|
||||||
@@ -245,30 +205,6 @@ 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() {
|
async renderLibrary() {
|
||||||
this.setView('library');
|
this.setView('library');
|
||||||
this.editor.setActive(false);
|
this.editor.setActive(false);
|
||||||
|
|||||||
@@ -53,14 +53,6 @@ body {
|
|||||||
|
|
||||||
#app { display: flex; flex-direction: column; height: 100vh; }
|
#app { display: flex; flex-direction: column; height: 100vh; }
|
||||||
#view { flex: 1; min-height: 0; display: flex; }
|
#view { flex: 1; min-height: 0; display: flex; }
|
||||||
#welcome-host,
|
|
||||||
#library-host,
|
|
||||||
#editor-host {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.hidden { display: none !important; }
|
.hidden { display: none !important; }
|
||||||
.muted { color: var(--muted); font-size: 12px; }
|
.muted { color: var(--muted); font-size: 12px; }
|
||||||
|
|
||||||
@@ -163,63 +155,6 @@ kbd {
|
|||||||
|
|
||||||
.library, .editor { flex: 1; min-height: 0; display: flex; }
|
.library, .editor { flex: 1; min-height: 0; display: flex; }
|
||||||
|
|
||||||
.welcome {
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: clamp(28px, 7vh, 76px) clamp(28px, 6vw, 92px) clamp(24px, 8vh, 72px);
|
|
||||||
}
|
|
||||||
.welcome-hero {
|
|
||||||
width: min(760px, 100%);
|
|
||||||
margin: clamp(32px, 12vh, 132px) auto 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.welcome-kicker {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
color: var(--muted);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 650;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
.welcome-hero h1 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: clamp(44px, 5vw, 72px);
|
|
||||||
line-height: 1.03;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
}
|
|
||||||
.welcome-hero p {
|
|
||||||
margin: 16px auto 0;
|
|
||||||
max-width: 560px;
|
|
||||||
color: var(--muted);
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
.welcome-actions {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
gap: 14px;
|
|
||||||
width: min(940px, 100%);
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.welcome-action {
|
|
||||||
min-height: 60px;
|
|
||||||
padding: 15px 18px;
|
|
||||||
border-radius: 16px;
|
|
||||||
font-size: 15px;
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
.welcome-actions .primary {
|
|
||||||
background: var(--accent);
|
|
||||||
border-color: var(--accent);
|
|
||||||
color: var(--accent-fg);
|
|
||||||
}
|
|
||||||
.welcome-actions .primary:hover {
|
|
||||||
background: var(--accent-strong);
|
|
||||||
border-color: var(--accent-strong);
|
|
||||||
}
|
|
||||||
|
|
||||||
.lib-side {
|
.lib-side {
|
||||||
width: 248px;
|
width: 248px;
|
||||||
min-width: 248px;
|
min-width: 248px;
|
||||||
@@ -736,15 +671,3 @@ fieldset legend {
|
|||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 820px) {
|
|
||||||
.welcome {
|
|
||||||
padding: 24px 20px 28px;
|
|
||||||
}
|
|
||||||
.welcome-hero {
|
|
||||||
margin-top: 72px;
|
|
||||||
}
|
|
||||||
.welcome-actions {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
width: min(440px, 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user