Skip to content

Commit b60a5e0

Browse files
decryptedchaosdecryptedchaos
committed
theme update & automatic version bumps
1 parent 7a8a5d2 commit b60a5e0

7 files changed

Lines changed: 279 additions & 109 deletions

File tree

‎.github/workflows/release.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ jobs:
5555
- name: Build frontend
5656
run: |
5757
cd frontend
58+
export APP_VERSION="v${{ steps.version.outputs.version }}"
5859
npm run build
5960
6061
- name: Download Go modules

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ nas-dashboard
1212

1313
# IDE
1414
.vscode/
15+
/.idea/

‎frontend/src/app.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare const __APP_VERSION__: string;

‎frontend/src/lib/components/Sidebar.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
let showSubmenuPopup = false;
1919
let popupPosition = { top: 0, left: 0 };
2020
21+
// Get version from build-time constant
22+
const appVersion = __APP_VERSION__;
23+
2124
// Helper functions for submenu management
2225
function handleExpandableClick(event, expandedState, toggleExpanded) {
2326
if (isCollapsed) {
@@ -127,7 +130,7 @@
127130
<p class="text-sm font-medium text-gray-900 dark:text-white">
128131
Arcanas Manager
129132
</p>
130-
<p class="text-xs text-gray-500 dark:text-gray-400">v1.0.0</p>
133+
<p class="text-xs text-gray-500 dark:text-gray-400">{appVersion}</p>
131134
</div>
132135
{/if}
133136
</div>

‎frontend/src/routes/samba/+page.svelte‎

Lines changed: 138 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,6 @@
8383
}
8484
}
8585
86-
function getStatusColor(available) {
87-
return available
88-
? "text-green-600 bg-green-100"
89-
: "text-gray-600 dark:text-gray-300 bg-gray-100";
90-
}
91-
9286
async function toggleShare(share) {
9387
try {
9488
await sambaAPI.toggleShare(share.name);
@@ -207,30 +201,43 @@
207201
}
208202
</script>
209203

210-
<div class="p-6">
211-
<div class="mb-6">
212-
<h1 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
213-
Samba Shares
214-
</h1>
215-
<p class="text-sm text-gray-600 dark:text-gray-300">
216-
Manage SMB/CIFS file shares
217-
</p>
218-
</div>
219-
220-
<div class="flex justify-between items-center mb-6">
221-
<button
222-
on:click={loadShares}
223-
class="btn btn-secondary"
224-
disabled={loading}
225-
>
226-
Refresh
227-
</button>
228-
<button
229-
on:click={() => (showCreateModal = true)}
230-
class="btn btn-primary"
231-
>
232-
Create Share
233-
</button>
204+
<div class="space-y-6">
205+
<!-- Header -->
206+
<div class="flex items-center justify-between">
207+
<div class="flex items-center space-x-4">
208+
<!-- Samba Icon with glow effect -->
209+
<div class="relative">
210+
<div class="absolute inset-0 bg-gradient-to-br from-orange-400 to-amber-500 rounded-xl blur opacity-25"></div>
211+
<div class="relative w-14 h-14 bg-gradient-to-br from-orange-100 to-amber-100 dark:from-orange-900/40 dark:to-amber-900/40 rounded-xl flex items-center justify-center shadow-lg">
212+
<svg class="w-7 h-7 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
213+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
214+
</svg>
215+
</div>
216+
</div>
217+
<div>
218+
<h2 class="text-xl font-bold text-gray-900 dark:text-white">
219+
Samba Shares
220+
</h2>
221+
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
222+
Manage SMB/CIFS file shares
223+
</p>
224+
</div>
225+
</div>
226+
<div class="flex items-center space-x-3">
227+
<button
228+
on:click={loadShares}
229+
class="btn btn-secondary"
230+
disabled={loading}
231+
>
232+
Refresh
233+
</button>
234+
<button
235+
on:click={() => (showCreateModal = true)}
236+
class="btn btn-primary"
237+
>
238+
Create Share
239+
</button>
240+
</div>
234241
</div>
235242

236243
{#if loading}
@@ -257,42 +264,58 @@
257264
{:else}
258265
<div class="space-y-4">
259266
{#each shares as share}
260-
<div class="bg-white dark:bg-card shadow rounded-lg p-6">
261-
<div class="flex justify-between items-start">
262-
<div>
263-
<div class="flex items-center space-x-3 mb-3">
264-
<h3
265-
class="text-lg font-semibold text-gray-900 dark:text-white"
266-
>
267+
<div class="bg-white dark:bg-card shadow-lg hover:shadow-xl transition-shadow duration-200 rounded-lg p-6 border border-gray-100 dark:border-border">
268+
<!-- Header Section -->
269+
<div class="flex items-start justify-between mb-6">
270+
<div class="flex items-center space-x-4">
271+
<!-- Share Icon with glow effect -->
272+
<div class="relative">
273+
<div class="absolute inset-0 {share.available
274+
? 'bg-gradient-to-br from-orange-400 to-amber-500'
275+
: 'bg-gradient-to-br from-gray-400 to-gray-500'} rounded-xl blur opacity-25"></div>
276+
<div class="relative w-14 h-14 {share.available
277+
? 'bg-gradient-to-br from-orange-100 to-amber-100 dark:from-orange-900/40 dark:to-amber-900/40'
278+
: 'bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800/40 dark:to-gray-700/40'} rounded-xl flex items-center justify-center shadow-lg">
279+
<svg class="w-7 h-7 {share.available ? 'text-orange-600 dark:text-orange-400' : 'text-gray-500 dark:text-gray-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
280+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
281+
</svg>
282+
</div>
283+
</div>
284+
285+
<div>
286+
<h3 class="text-xl font-bold text-gray-900 dark:text-white">
267287
{share.name}
268288
</h3>
269-
<span
270-
class="px-2 py-1 text-xs font-medium rounded-full {getStatusColor(
271-
share.available,
272-
)}"
273-
>
274-
{share.available
275-
? "Available"
276-
: "Unavailable"}
277-
</span>
289+
<div class="flex items-center flex-wrap gap-2 mt-1">
290+
<!-- Status Badge -->
291+
<span class="px-2 py-0.5 text-xs font-semibold rounded-full {share.available
292+
? 'bg-gradient-to-r from-orange-500 to-amber-500 text-white'
293+
: 'bg-gradient-to-r from-gray-500 to-gray-600 text-white'}">
294+
{share.available ? "AVAILABLE" : "UNAVAILABLE"}
295+
</span>
296+
<!-- Read Only Badge -->
297+
{#if share.read_only}
298+
<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 text-white">
299+
READ ONLY
300+
</span>
301+
{/if}
302+
<!-- Guest Access Badge -->
303+
{#if share.guest_ok}
304+
<span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-gradient-to-r from-green-500 to-emerald-500 text-white">
305+
GUEST OK
306+
</span>
307+
{/if}
308+
</div>
278309
</div>
279-
<p class="text-gray-600 dark:text-gray-300 mb-2">
280-
{share.comment}
281-
</p>
282-
<p class="text-sm text-gray-500 dark:text-gray-400">
283-
Path: {share.path}
284-
</p>
285-
<p class="text-sm text-gray-500 dark:text-gray-400">
286-
Users: {share.users.join(", ")}
287-
</p>
288-
<p class="text-sm text-gray-500 dark:text-gray-400">
289-
Groups: {share.groups.join(", ")}
290-
</p>
291310
</div>
311+
312+
<!-- Action Buttons -->
292313
<div class="flex space-x-2">
293314
<button
294315
on:click={() => toggleShare(share)}
295-
class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
316+
class="p-2 rounded-lg {share.available
317+
? 'text-green-500 hover:bg-green-50 dark:hover:bg-green-900/20'
318+
: 'text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/20'}"
296319
title="Toggle share availability"
297320
aria-label="Toggle share availability"
298321
>
@@ -312,7 +335,7 @@
312335
</button>
313336
<button
314337
on:click={() => openEditModal(share)}
315-
class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
338+
class="p-2 rounded-lg text-gray-400 hover:text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20"
316339
title="Edit share"
317340
aria-label="Edit share"
318341
>
@@ -332,7 +355,7 @@
332355
</button>
333356
<button
334357
on:click={() => deleteShare(share.name)}
335-
class="p-2 text-gray-400 hover:text-red-600"
358+
class="p-2 rounded-lg text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
336359
title="Delete share"
337360
aria-label="Delete share"
338361
>
@@ -352,6 +375,60 @@
352375
</button>
353376
</div>
354377
</div>
378+
379+
<!-- Share Details -->
380+
<div class="space-y-4">
381+
<!-- Comment -->
382+
{#if share.comment}
383+
<div>
384+
<p class="text-sm text-gray-600 dark:text-gray-300">
385+
{share.comment}
386+
</p>
387+
</div>
388+
{/if}
389+
390+
<!-- Details Grid -->
391+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
392+
<div>
393+
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
394+
Path
395+
</p>
396+
<p class="font-mono text-sm text-gray-900 dark:text-white flex items-center">
397+
<svg class="w-4 h-4 mr-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
398+
<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"/>
399+
</svg>
400+
{share.path}
401+
</p>
402+
</div>
403+
<div>
404+
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
405+
Browseable
406+
</p>
407+
<div class="flex items-center space-x-2">
408+
<div class="w-2 h-2 rounded-full {share.browseable ? 'bg-green-500' : 'bg-gray-400'}"></div>
409+
<span class="text-sm font-medium text-gray-900 dark:text-white">
410+
{share.browseable ? 'Yes' : 'No'}
411+
</span>
412+
</div>
413+
</div>
414+
<div>
415+
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
416+
Users ({share.users.length})
417+
</p>
418+
<p class="text-sm font-medium text-gray-900 dark:text-white">
419+
{share.users.length > 0 ? share.users.join(", ") : 'None'}
420+
</p>
421+
</div>
422+
<div>
423+
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
424+
Groups ({share.groups.length})
425+
</p>
426+
<p class="text-sm font-medium text-gray-900 dark:text-white">
427+
{share.groups.length > 0 ? share.groups.join(", ") : 'None'}
428+
</p>
429+
</div>
430+
</div>
431+
</div>
355432
</div>
356433
{/each}
357434
</div>

0 commit comments

Comments
 (0)