Skip to content

Commit 6e25732

Browse files
fullstackjamfullstackjam
committed
refactor: clean up dashboard and docs page layouts
Improve dashboard layout structure and remove console warnings from docs page. Minor UI refinements for better code quality.
1 parent 747ae33 commit 6e25732

File tree

2 files changed

+47
-46
lines changed

2 files changed

+47
-46
lines changed

‎src/routes/dashboard/+page.svelte‎

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -548,11 +548,11 @@
548548
<span class="config-meta-item">Modified: <strong>{formatDate(config.updated_at)}</strong></span>
549549
{/if}
550550
</div>
551-
<div class="config-url" onclick={(e) => e.stopPropagation()}>
551+
<div class="config-url" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} role="presentation">
552552
<code>curl -fsSL {getInstallUrl(config)} | bash</code>
553553
<button class="copy-btn" onclick={() => copyToClipboard(`curl -fsSL https://${getInstallUrl(config)} | bash`, config.id)}>{copiedId === config.id ? 'Copied!' : 'Copy'}</button>
554554
</div>
555-
<div class="config-actions" onclick={(e) => e.stopPropagation()}>
555+
<div class="config-actions" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} role="presentation">
556556
<Button variant="secondary" onclick={() => editConfig(config.slug)}>Edit</Button>
557557
<Button variant="secondary" onclick={() => duplicateConfig(config.slug)}>Duplicate</Button>
558558
<Button variant="secondary" onclick={() => shareConfig(config)}>Share</Button>
@@ -566,8 +566,8 @@
566566
</main>
567567

568568
{#if showModal}
569-
<div class="modal-overlay" onclick={closeModal}>
570-
<div class="modal" onclick={(e) => e.stopPropagation()}>
569+
<div class="modal-overlay" onclick={closeModal} onkeydown={(e) => e.key === 'Escape' && closeModal()} role="dialog" tabindex="0">
570+
<div class="modal" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} role="presentation">
571571
<div class="modal-header">
572572
<h3 class="modal-title">{editingSlug ? 'Edit Configuration' : 'New Configuration'}</h3>
573573
<button class="close-btn" onclick={closeModal}>&times;</button>
@@ -577,20 +577,20 @@
577577
<div class="error-message">{error}</div>
578578
{/if}
579579

580-
<div class="form-group">
581-
<label class="form-label">Name</label>
582-
<input type="text" class="form-input" bind:value={formData.name} placeholder="e.g. Frontend Team" />
583-
<p class="form-hint">Will be used as the URL slug</p>
584-
</div>
580+
<div class="form-group">
581+
<label class="form-label" for="config-name">Name</label>
582+
<input id="config-name" type="text" class="form-input" bind:value={formData.name} placeholder="e.g. Frontend Team" />
583+
<p class="form-hint">Will be used as the URL slug</p>
584+
</div>
585585

586-
<div class="form-group">
587-
<label class="form-label">Description</label>
588-
<input type="text" class="form-input" bind:value={formData.description} placeholder="Optional description" />
589-
</div>
586+
<div class="form-group">
587+
<label class="form-label" for="config-description">Description</label>
588+
<input id="config-description" type="text" class="form-input" bind:value={formData.description} placeholder="Optional description" />
589+
</div>
590590

591-
<div class="form-group">
592-
<label class="form-label">Base Preset</label>
593-
<select class="form-select" onchange={(e) => handlePresetChange(e.currentTarget.value)} value={formData.base_preset}>
591+
<div class="form-group">
592+
<label class="form-label" for="config-preset">Base Preset</label>
593+
<select id="config-preset" class="form-select" onchange={(e) => handlePresetChange(e.currentTarget.value)} value={formData.base_preset}>
594594
<option value="minimal">minimal - CLI essentials</option>
595595
<option value="developer">developer - Ready-to-code setup</option>
596596
<option value="full">full - Complete dev environment</option>
@@ -604,20 +604,20 @@
604604
</label>
605605
</div>
606606

607-
<div class="form-group">
608-
<label class="form-label">Short Alias (Optional)</label>
609-
<div class="alias-input">
610-
<span class="alias-prefix">openboot.dev/</span>
611-
<input type="text" class="form-input" bind:value={formData.alias} placeholder="e.g. myteam" />
612-
</div>
613-
<p class="form-hint">2-20 characters, lowercase letters, numbers, and dashes only.</p>
607+
<div class="form-group">
608+
<label class="form-label" for="config-alias">Short Alias (Optional)</label>
609+
<div class="alias-input">
610+
<span class="alias-prefix">openboot.dev/</span>
611+
<input id="config-alias" type="text" class="form-input" bind:value={formData.alias} placeholder="e.g. myteam" />
614612
</div>
613+
<p class="form-hint">2-20 characters, lowercase letters, numbers, and dashes only.</p>
614+
</div>
615615

616-
<div class="form-group">
617-
<label class="form-label">Dotfiles Repository (Optional)</label>
618-
<input type="text" class="form-input" bind:value={formData.dotfiles_repo} placeholder="https://github.com/username/dotfiles" />
619-
<p class="form-hint">After installing packages, OpenBoot will clone this repo and deploy configs via stow.</p>
620-
</div>
616+
<div class="form-group">
617+
<label class="form-label" for="config-dotfiles">Dotfiles Repository (Optional)</label>
618+
<input id="config-dotfiles" type="text" class="form-input" bind:value={formData.dotfiles_repo} placeholder="https://github.com/username/dotfiles" />
619+
<p class="form-hint">After installing packages, OpenBoot will clone this repo and deploy configs via stow.</p>
620+
</div>
621621

622622
{#if true}
623623
{@const grouped = getGroupedPackages()}
@@ -747,10 +747,10 @@
747747
</div>
748748
{/if}
749749

750-
<div class="form-group">
751-
<label class="form-label">Custom Post-Install Script (Optional)</label>
752-
<textarea class="form-textarea" bind:value={formData.custom_script} placeholder="#!/bin/bash&#10;# Commands to run after installation"></textarea>
753-
</div>
750+
<div class="form-group">
751+
<label class="form-label" for="config-script">Custom Post-Install Script (Optional)</label>
752+
<textarea id="config-script" class="form-textarea" bind:value={formData.custom_script} placeholder="#!/bin/bash&#10;# Commands to run after installation"></textarea>
753+
</div>
754754
</div>
755755
<div class="modal-footer">
756756
<Button variant="secondary" onclick={closeModal}>Cancel</Button>
@@ -761,8 +761,8 @@
761761
{/if}
762762

763763
{#if showImportModal}
764-
<div class="modal-overlay" onclick={() => showImportModal = false}>
765-
<div class="modal import-modal" onclick={(e) => e.stopPropagation()}>
764+
<div class="modal-overlay" onclick={() => showImportModal = false} onkeydown={(e) => e.key === 'Escape' && (showImportModal = false)} role="dialog" tabindex="0">
765+
<div class="modal import-modal" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} role="presentation">
766766
<div class="modal-header">
767767
<h3 class="modal-title">Import Brewfile</h3>
768768
<button class="close-btn" onclick={() => showImportModal = false}>&times;</button>
@@ -772,15 +772,16 @@
772772
<div class="error-message">{importError}</div>
773773
{/if}
774774

775-
<div class="form-group">
776-
<label class="form-label">Paste your Brewfile content</label>
777-
<textarea
778-
class="form-textarea brewfile-input"
779-
bind:value={brewfileContent}
780-
placeholder={'tap "homebrew/cask"\nbrew "git"\nbrew "node"\ncask "visual-studio-code"\ncask "docker"'}
781-
></textarea>
782-
<p class="form-hint">Supports tap, brew, and cask entries</p>
783-
</div>
775+
<div class="form-group">
776+
<label class="form-label" for="brewfile-input">Paste your Brewfile content</label>
777+
<textarea
778+
id="brewfile-input"
779+
class="form-textarea brewfile-input"
780+
bind:value={brewfileContent}
781+
placeholder={'tap "homebrew/cask"\nbrew "git"\nbrew "node"\ncask "visual-studio-code"\ncask "docker"'}
782+
></textarea>
783+
<p class="form-hint">Supports tap, brew, and cask entries</p>
784+
</div>
784785
</div>
785786
<div class="modal-footer">
786787
<Button variant="secondary" onclick={() => showImportModal = false}>Cancel</Button>
@@ -791,8 +792,8 @@
791792
{/if}
792793

793794
{#if showShareModal}
794-
<div class="modal-overlay" onclick={closeShareModal} onkeydown={(e) => e.key === 'Escape' && closeShareModal()} role="dialog" tabindex="-1">
795-
<div class="modal share-modal" onclick={(e) => e.stopPropagation()}>
795+
<div class="modal-overlay" onclick={closeShareModal} onkeydown={(e) => e.key === 'Escape' && closeShareModal()} role="dialog" tabindex="0">
796+
<div class="modal share-modal" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} role="presentation">
796797
<div class="modal-header">
797798
<h3 class="modal-title">Share Configuration</h3>
798799
<button class="close-btn" onclick={closeShareModal}>&times;</button>

‎src/routes/docs/[slug]/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737

3838
<article class="prose">
3939
{#key slug}
40-
<svelte:component this={Component} />
40+
<Component />
4141
{/key}
4242
</article>
4343

0 commit comments

Comments
 (0)