fix: UI overhaul — align all HTMX views with Lumina Design System (46 fixes)
- All 7 pages rewritten: Dashboard, Terminal, Snippets, Keychain, SFTP, Settings, Brief - Apply consistent Lumina glassmorphic theme (rounded-2xl, shadows, borders, tracking) - Fix SVG icons not rendering — return template.HTML instead of string - Fix Alpine x-data scoping: terminal tabs, SFTP modals, snippet tag buttons - Fix dashboard search sending literal ?q=... - Rebuild CSS with all new Tailwind classes (62KB) - Add .air.toml with hot-reload config, docs/PERBAIKANUI.md checklist - Remove unused backup partials
This commit is contained in:
swanadiva
+131
-65
@@ -21,91 +21,131 @@
|
||||
<h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
|
||||
</header>
|
||||
<main id="main-content" class="flex-1 overflow-auto p-6">
|
||||
<div id="snippets-page" class="max-w-7xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="relative flex-1 max-w-md">
|
||||
<input type="search" placeholder="Search snippets..."
|
||||
hx-get="/snippets/grid?q=..." hx-trigger="keyup delay:200ms"
|
||||
hx-target="#snippet-grid"
|
||||
class="w-full pl-9 pr-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface placeholder-on-surface-variant focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50">
|
||||
<div class="max-w-7xl mx-auto space-y-8">
|
||||
<!-- Search Header Panel -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-on-surface tracking-tight">Snippets & Scripts Library</h2>
|
||||
<p class="text-xs text-on-surface-variant mt-0.5">Quickly reuse and catalog command line shortcuts across remote clusters</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 text-outline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="search" name="q" placeholder="Search code snippets..."
|
||||
hx-get="/snippets/grid" hx-trigger="keyup delay:200ms" hx-target="#snippet-grid"
|
||||
class="pl-9 pr-4 py-1.5 rounded-full bg-surface-container-low border border-outline-variant/30 text-sm focus:border-primary focus:bg-white focus:outline-none focus:ring-1 focus:ring-primary w-48 sm:w-60 transition-all">
|
||||
</div>
|
||||
<button @click="$dispatch('open-snippet-modal')"
|
||||
class="flex items-center gap-1.5 bg-primary text-white hover:bg-primary/90 font-bold text-xs py-2 px-4 rounded-xl shadow-md transition-all">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||
New Snippet
|
||||
</button>
|
||||
</div>
|
||||
<button @click="$dispatch('open-snippet-modal')"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||||
Add Snippet
|
||||
</button>
|
||||
</div>
|
||||
<div id="snippet-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{{range .Snippets}}
|
||||
<div class="rounded-xl bg-white border border-outline-variant/30 p-4 hover:shadow-md transition-shadow animate-fade-in">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-on-surface">{{.Name}}</p>
|
||||
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-tertiary/10 text-tertiary">{{.Language}}</span>
|
||||
|
||||
<!-- Grid: Sidebar + Cards -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
<!-- Sidebar -->
|
||||
<div class="lg:col-span-3 space-y-5" x-data="sidebarManager()" x-init="init()">
|
||||
<div class="bg-white rounded-2xl border border-outline-variant/30 p-4 space-y-4">
|
||||
<h4 class="text-xs font-bold text-outline-variant uppercase tracking-wider px-2">Collections</h4>
|
||||
<div class="space-y-1 text-sm font-semibold">
|
||||
<button hx-get="/snippets/grid" hx-target="#snippet-grid"
|
||||
:class="activeColl === 'all' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:bg-surface-container-low'"
|
||||
class="w-full flex items-center justify-between p-2 rounded-lg transition-colors"
|
||||
@click="activeColl = 'all'">
|
||||
<span class="flex items-center gap-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg> All Code Blocks</span>
|
||||
<span class="text-xs text-outline" x-text="total"></span>
|
||||
</button>
|
||||
<button hx-get="/snippets/grid?collection=favorites" hx-target="#snippet-grid"
|
||||
:class="activeColl === 'favorites' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:bg-surface-container-low'"
|
||||
class="w-full flex items-center justify-between p-2 rounded-lg transition-colors"
|
||||
@click="activeColl = 'favorites'">
|
||||
<span class="flex items-center gap-2"><svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg> Starred Favorites</span>
|
||||
<span class="text-xs text-outline" x-text="favCount"></span>
|
||||
</button>
|
||||
<button hx-get="/snippets/grid?collection=recent" hx-target="#snippet-grid"
|
||||
:class="activeColl === 'recent' ? 'bg-primary/10 text-primary' : 'text-on-surface-variant hover:bg-surface-container-low'"
|
||||
class="w-full flex items-center justify-between p-2 rounded-lg transition-colors"
|
||||
@click="activeColl = 'recent'">
|
||||
<span class="flex items-center gap-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Recent</span>
|
||||
<span class="text-xs text-outline" x-text="recentCount"></span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="p-1.5 rounded-lg hover:bg-red-50 text-on-surface-variant hover:text-red-500 transition-colors shrink-0"
|
||||
hx-delete="/snippets/{{.ID}}" hx-target="#snippet-grid" hx-confirm="Delete {{.Name}}?">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<pre class="text-xs text-on-surface-variant bg-surface-container-low/50 rounded-lg p-3 mb-3 overflow-x-auto font-mono leading-relaxed">{{.Content}}</pre>
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-variant/20">
|
||||
<span class="text-xs text-on-surface-variant">{{.CreatedAt}}</span>
|
||||
<button class="p-1.5 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors"
|
||||
onclick="copyToClipboard(`{{.Content}}`)" title="Copy">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
|
||||
</button>
|
||||
|
||||
<div class="bg-white rounded-2xl border border-outline-variant/30 p-4 space-y-3">
|
||||
<h4 class="text-xs font-bold text-outline-variant uppercase tracking-wider px-2">Tag Categories</h4>
|
||||
<div class="flex flex-wrap gap-1.5 p-1">
|
||||
<button hx-get="/snippets/grid" hx-target="#snippet-grid"
|
||||
:class="activeTag === 'all' ? 'bg-primary text-white' : 'bg-surface-container-low text-on-surface-variant hover:bg-surface-container'"
|
||||
class="px-3 py-1 rounded-full text-xs font-bold transition-all"
|
||||
@click="activeTag = 'all'">All Tags</button>
|
||||
{{range .AllTags}}
|
||||
<button hx-get="/snippets/grid?tag={{.}}" hx-target="#snippet-grid"
|
||||
:class="activeTag === '{{.}}' ? 'bg-primary text-white' : 'bg-surface-container-low text-on-surface-variant hover:bg-surface-container'"
|
||||
class="px-3 py-1 rounded-full text-xs font-bold transition-all"
|
||||
@click="activeTag = '{{.}}'">
|
||||
{{.}}
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if eq (len .Snippets) 0}}
|
||||
<div class="col-span-full text-center py-12 text-on-surface-variant">
|
||||
<p class="text-lg font-medium">No snippets found</p>
|
||||
<p class="text-sm mt-1">Add your first snippet to get started</p>
|
||||
|
||||
<!-- Snippet Cards -->
|
||||
<div class="lg:col-span-9 space-y-6" id="snippet-grid">
|
||||
{{template "snippet_grid" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Snippet Modal -->
|
||||
<div id="snippet-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
|
||||
@open-snippet-modal.window="open = true" @keydown.escape.window="open = false">
|
||||
<div class="absolute inset-0 bg-black/30 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
|
||||
<div class="bg-white rounded-xl shadow-xl w-full max-w-lg p-6" @click.outside="open = false">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-lg font-semibold text-on-surface">Add New Snippet</h2>
|
||||
<button @click="open = false" class="p-1 rounded-lg hover:bg-surface-container-low text-on-surface-variant">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
<div class="bg-white rounded-2xl max-w-lg w-full border border-outline-variant/30 shadow-2xl p-6 space-y-4">
|
||||
<div class="flex justify-between items-center border-b border-outline-variant/30 pb-3">
|
||||
<h3 class="font-bold text-lg text-on-surface">Store Custom Snippet</h3>
|
||||
<button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
|
||||
</div>
|
||||
<form hx-post="/snippets" hx-target="#snippet-grid" hx-swap="outerHTML"
|
||||
@submit="open = false" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Name</label>
|
||||
<input type="text" name="name" required placeholder="e.g. Health Check Script"
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
@submit="open = false" class="space-y-4 text-sm">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">SNIPPET TITLE</label>
|
||||
<input type="text" name="name" required placeholder="e.g. Purge Docker Cache"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Content</label>
|
||||
<textarea name="content" rows="6" required placeholder="Paste your snippet here..."
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface font-mono focus:outline-none focus:ring-2 focus:ring-primary/30"></textarea>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">SHORT DESCRIPTION / USAGE</label>
|
||||
<input type="text" name="description" placeholder="e.g. Safe cleanup to recover workspace disk capacity."
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-on-surface mb-1">Language</label>
|
||||
<select name="language"
|
||||
class="w-full px-3 py-2 rounded-lg border border-outline-variant/50 bg-white text-sm text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/30">
|
||||
<option value="bash">Bash</option>
|
||||
<option value="nginx">Nginx</option>
|
||||
<option value="yaml">YAML</option>
|
||||
<option value="json">JSON</option>
|
||||
<option value="sql">SQL</option>
|
||||
<option value="dockerfile">Dockerfile</option>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">CODE SYNTAX BLOCK</label>
|
||||
<textarea name="content" required rows="4" placeholder="e.g. systemctl restart nginx"
|
||||
class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-xs"></textarea>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-bold text-on-surface-variant">PRIMARY TAG CATEGORY</label>
|
||||
<select name="tags"
|
||||
class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary">
|
||||
<option value="DevOps">DevOps</option>
|
||||
<option value="Docker">Docker</option>
|
||||
<option value="Nginx">Nginx</option>
|
||||
<option value="Git">Git</option>
|
||||
<option value="SSL">SSL</option>
|
||||
<option value="Security">Security</option>
|
||||
<option value="Database">Database</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex justify-end gap-3 pt-2">
|
||||
<input type="hidden" name="collection" value="recent">
|
||||
<div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
|
||||
<button type="button" @click="open = false"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium text-on-surface-variant hover:bg-surface-container-low transition-colors">Cancel</button>
|
||||
class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors">Add Snippet</button>
|
||||
class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Save Code Snippet</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -114,5 +154,31 @@
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function sidebarManager() {
|
||||
return {
|
||||
activeColl: 'all',
|
||||
activeTag: 'all',
|
||||
total: 0,
|
||||
favCount: 0,
|
||||
recentCount: 0,
|
||||
init() {
|
||||
this.updateCounts();
|
||||
document.body.addEventListener('htmx:afterSwap', () => this.updateCounts());
|
||||
},
|
||||
updateCounts() {
|
||||
const el = document.getElementById('snippet-data');
|
||||
if (!el) return;
|
||||
try {
|
||||
const snippets = JSON.parse(el.textContent) || [];
|
||||
this.total = snippets.length;
|
||||
this.favCount = snippets.filter(s => s.Collection === 'favorites').length;
|
||||
this.recentCount = snippets.filter(s => s.Collection === 'recent').length;
|
||||
} catch(e) {}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user