Skip to content

Commit 35069ed

Browse files
feat: update ui
1 parent d69a957 commit 35069ed

34 files changed

+665
-330
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
1212
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
1313
"format": "prettier --write ./src/ ./messages/",
14-
"lint": "prettier --check . && eslint .",
14+
"lint": "prettier --check ./src/ && eslint ./src/",
1515
"test:unit": "vitest",
1616
"test": "npm run test:unit -- --run"
1717
},

project.inlang/settings.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
"pathPattern": "./messages/{locale}.json"
66
},
77
"baseLocale": "en",
8-
"locales": ["en", "de", "es"]
8+
"locales": ["en", "de", "es"],
9+
"strategy": ["localStorage", "preferredLanguage", "baseLocale"]
910
}

src/app.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@plugin '@tailwindcss/forms';
33

44
@custom-variant dark (&:where(.dark, .dark *));
5-
@custom-variant light (&:where(.light, .light *));
65

76
@theme {
87
--color-gray-50: oklch(0.985 0 0);

src/app.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
%sveltekit.head%
77
<script>
88
document.documentElement.classList.toggle('dark', localStorage.getItem('theme') === 'dark');
9-
document.documentElement.classList.toggle('light', localStorage.getItem('theme') === 'light');
109
</script>
1110
</head>
1211
<body data-sveltekit-preload-data="hover" class="size-full pt-16">

src/components/FileInfo.svelte

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts">
22
import { languages, type LocalSettingsStore } from '$lib';
3+
import type { JSONSaveData } from '$lib/json';
34
import { m } from '$lib/paraglide/messages';
45
import { getContext } from 'svelte';
56
6-
let { fileName, mode, saveData = $bindable() }: { fileName: string; saveData: any; mode: 'save' | 'account' } = $props();
7+
let { fileName, mode, saveData = $bindable() }: { fileName: string; saveData: JSONSaveData; mode: 'save' | 'account' } = $props();
78
89
function secondsToHHMM(seconds: number): string {
910
const hours = Math.floor(seconds / 3600);
@@ -52,13 +53,13 @@
5253
);
5354
</script>
5455

55-
<div class="overflow-hidden rounded-lg bg-gray-800/50 inset-ring inset-ring-white/10">
56+
<div class="overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800/50 dark:shadow-none dark:inset-ring dark:inset-ring-white/10">
5657
<div class="border-t border-white/5">
5758
<dl class="divide-y divide-white/5">
58-
{#each data as d}
59+
{#each data as d (d.key)}
5960
<div class="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
60-
<dt class="text-sm font-medium text-gray-100">{d.key}</dt>
61-
<dd class="mt-1 text-sm/6 text-gray-300 sm:col-span-2 sm:mt-0">{d.value}</dd>
61+
<dt class="text-sm font-medium text-gray-900 dark:text-gray-100">{d.key}</dt>
62+
<dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0 dark:text-gray-300">{d.value}</dd>
6263
</div>
6364
{/each}
6465
</dl>

src/components/SaveButton.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
toast.info(m.component_savebutton_toast_info_processing_title(), m.component_savebutton_toast_info_processing_desc());
1616
await callback();
1717
toast.success(m.component_savebutton_toast_success_saved_title(), m.component_savebutton_toast_success_saved_desc());
18-
} catch (e) {
18+
} catch {
1919
toast.error(m.component_savebutton_toast_error_failed_title(), m.component_savebutton_toast_error_failed_desc());
2020
}
2121
blocked = false;

src/components/Sidebar.svelte

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<script lang="ts">
2-
let { data, value = $bindable() }: { data: { name: string; tab: string; icon: any | null }[]; value: string } = $props();
2+
import { page } from '$app/state';
3+
4+
let { data }: { data: { name: string; href: string; icon: any | null }[] } = $props();
35
</script>
46

57
<div class="hidden pt-16 lg:fixed lg:inset-y-0 lg:flex lg:w-72 lg:flex-col dark:bg-gray-900">
@@ -8,19 +10,23 @@
810
<ul role="list" class="flex flex-1 flex-col gap-y-7">
911
<li>
1012
<ul role="list" class="-mx-2 space-y-1">
11-
{#each data as sidebarItem}
13+
{#each data as sidebarItem (sidebarItem.name)}
1214
<li>
13-
<button
14-
type="button"
15-
onclick={() => (value = sidebarItem.tab)}
16-
class={'group flex w-full cursor-pointer gap-x-3 rounded-md p-2 text-sm/6 font-semibold ' +
17-
(sidebarItem.tab === value ? 'bg-gray-50 text-primary-600 dark:bg-white/5 dark:text-white' : 'text-gray-700 hover:bg-gray-50 hover:text-primary-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white')}
18-
>
19-
{#if sidebarItem.icon}
20-
<sidebarItem.icon width="24" height="24" class="size-6 shrink-0" />
21-
{/if}
22-
{sidebarItem.name}
23-
</button>
15+
{#if page.url.pathname === sidebarItem.href}
16+
<a href={sidebarItem.href} class="group flex gap-x-3 rounded-md bg-gray-50 p-2 text-sm/6 font-semibold text-primary-600 dark:bg-white/5 dark:text-white">
17+
{#if sidebarItem.icon}
18+
<sidebarItem.icon width="24" height="24" class="size-6 shrink-0 text-primary-600 dark:text-white" />
19+
{/if}
20+
{sidebarItem.name}
21+
</a>
22+
{:else}
23+
<a href={sidebarItem.href} class="group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-primary-600 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white">
24+
{#if sidebarItem.icon}
25+
<sidebarItem.icon width="24" height="24" class="size-6 shrink-0 text-gray-400 group-hover:text-primary-600 dark:group-hover:text-white" />
26+
{/if}
27+
{sidebarItem.name}
28+
</a>
29+
{/if}
2430
</li>
2531
{/each}
2632
</ul>

src/components/UploadForm.svelte

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
1111
let draggedOver = $state(false);
1212
let isProcessing = $state(false);
13-
let loadedFileName = $state('');
1413
1514
const ACCEPTED_FILE_EXTENSION = '.hg';
1615
const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100 MB
@@ -125,7 +124,6 @@
125124
}
126125
127126
isProcessing = true;
128-
loadedFileName = file!.name;
129127
130128
toast.info(m.component_uploadform_toast_info_processing_title(), m.component_uploadform_toast_info_processing_desc());
131129

src/components/editors/account/AccountEditorJsonEditor.svelte

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
import monacoThemeGithubLight from 'monaco-themes/themes/GitHub Light.json';
77
import monacoThemeGithubDark from 'monaco-themes/themes/GitHub Dark.json';
88
import type { LocalSettingsStore } from '$lib';
9+
import type { JSONSaveData } from '$lib/json';
910
10-
let { accountData = $bindable() }: { accountData: any } = $props();
11+
let { data = $bindable() }: { data: JSONSaveData } = $props();
1112
1213
let parent: HTMLElement;
1314
let editor: monaco.editor.IStandaloneCodeEditor;
@@ -17,9 +18,9 @@
1718
const localSettings = getContext('localSettings') as LocalSettingsStore;
1819
1920
$effect(() => {
20-
if (editor && accountData) {
21+
if (editor && data) {
2122
const currentValue = editor.getValue();
22-
const newValue = JSON.stringify(accountData, null, 2);
23+
const newValue = JSON.stringify(data, null, 2);
2324
if (currentValue !== newValue) {
2425
editor.setValue(newValue);
2526
}
@@ -63,7 +64,7 @@
6364
});
6465
6566
editor = Monaco.editor.create(parent, {
66-
value: JSON.stringify(accountData, null, 2),
67+
value: JSON.stringify(data, null, 2),
6768
language: 'json',
6869
theme: localSettings.theme === 'dark' ? 'github-dark' : 'github-light',
6970
automaticLayout: true
@@ -78,11 +79,11 @@
7879
editor.onDidChangeModelContent(() => {
7980
const newValue = editor.getValue();
8081
try {
81-
accountData = JSON.parse(newValue);
82+
data = JSON.parse(newValue);
8283
} catch (e) {
8384
console.error('Invalid JSON:', e);
8485
}
85-
console.log('Account Data Updated:', accountData);
86+
console.log('Account Data Updated:', data);
8687
});
8788
8889
return () => {

src/components/editors/account/AccountEditorTable.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
}
66
77
interface TableGroup {
8-
label: string;
8+
label: string | null;
99
items: TableItem[];
1010
}
1111

0 commit comments

Comments
 (0)