Improve the timetables

src/lib/components/input/Frame.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
 	export let disabled = false;
+	export let minimal = false;
 </script>
 
 <div
-	class="flex w-full items-center gap-2 rounded px-2 py-2 outline outline-2 outline-gray-400 focus-within:outline-emerald-500"
+	class="flex w-full items-center gap-2 rounded px-2 py-2 outline focus-within:outline-emerald-500"
 	class:outline-red-500={disabled}
+	class:outline-1={minimal}
+	class:outline-zinc-300={minimal}
+	class:dark:outline-zinc-700={minimal}
+	class:dark:outline-zinc-500={!minimal}
+	class:outline-2={!minimal}
+	class:outline-zinc-400={!minimal}
 >
 	<slot />
 </div>

src/lib/components/input/Text.svelte

@@ -17,14 +17,16 @@
 	export let disabled = false;
 	export let options: string[] = [];
 
+	export let minimal = false;
+
 	const id = randomStr(16);
 	const dispatch = createEventDispatcher<{
 		input: string;
 		enter: null;
 	}>();
 </script>
 
-<Frame {disabled}>
+<Frame {disabled} {minimal}>
 	<div class="flex w-full flex-col">
 		<div class="flex w-full items-center gap-2">
 			{#if icon}

src/lib/components/panes/Panes.svelte

@@ -44,9 +44,11 @@
 </script>
 
 <script lang="ts">
-	export let position = 160;
+	import { clamp } from '$lib/utils/numbers/clamp';
+
 	export let min = 120;
 	export let max = 550;
+	export let position = clamp(min, 160, max);
 
 	const handler = handleMouseDownOrTouchStart({
 		max,
@@ -57,14 +59,14 @@
 </script>
 
 <div
-	class="grid h-full w-full grid-cols-1 grid-rows-1 gap-2 md:grid-cols-[var(--w),1fr]"
+	class="grid h-full w-full max-w-full grid-cols-1 grid-rows-1 gap-2 md:grid-cols-[var(--w),1fr]"
 	style:--w={`${position}px`}
 >
 	<div class="h-full">
 		<slot name="a" />
 	</div>
 
-	<div class="flex h-full gap-2">
+	<div class="flex h-full w-full max-w-full gap-2 overflow-hidden">
 		<button
 			class="hidden cursor-col-resize px-1 md:inline-block"
 			tabindex="-1"
@@ -74,7 +76,7 @@
 			<div class="h-full w-1 rounded-full bg-zinc-200 touch:w-1.5 dark:bg-zinc-700" />
 		</button>
 
-		<div class="flex w-full items-center justify-center">
+		<div class="flex w-full max-w-full overflow-hidden">
 			<slot name="b" />
 		</div>
 	</div>

src/lib/components/select/Select.svelte

@@ -69,6 +69,8 @@
 
 		dispatch('change', value);
 	};
+
+	$: isValid = options.some(({ label }) => get(label) === userInput);
 </script>
 
 <svelte:window
@@ -91,7 +93,7 @@
 <div class="entire relative w-full">
 	<div use:floatingRef>
 		<TextInput
-			isValid={!!value?.filter((i) => i).length}
+			{isValid}
 			{icon}
 			{placeholder}
 			bind:value={userInput}

src/lib/locales/de.ts

@@ -490,6 +490,7 @@ const de = {
 	'settings.timetable.import.error':
 		'Die Datei konnte nicht importiert werden. Enthält sie einen gültigen Stundenplan?',
 	'settings.timetable.confirm.desc': 'Möchtest du wirklich deine bisherigen Farben überschreiben?',
+	'settings.timetable.showWeekend': 'Zeige das Wochende im Editor an',
 
 	'settings.general.holiday': 'Ferien & Feiertage',
 	'settings.genral.holiday.autoDetect': 'Erkenne den Standort automatisch',

src/lib/locales/en.ts

@@ -477,6 +477,7 @@ const en = {
 	'settings.timetable.import.error':
 		"The file couldn't be imported. Does it contain a correctly formatted timetable?",
 	'settings.timetable.confirm.desc': 'Are you sure you want to overwrite your current timetable?',
+	'settings.timetable.showWeekend': 'Show the weekend in the editor',
 
 	'settings.general.holiday': 'Holidays',
 	'settings.genral.holiday.autoDetect': 'Detect your location automatically',

src/lib/utils/numbers/clamp.test.ts

@@ -0,0 +1,22 @@
+import { clamp } from '$lib/utils/numbers/clamp';
+import { describe, expect, it } from 'vitest';
+
+describe('clamp', () => {
+	it('should return the correct val', () => {
+		expect(clamp(0, 5, 10)).toBe(5);
+		expect(clamp(0, -1, 10)).toBe(0);
+		expect(clamp(0, 11, 10)).toBe(10);
+	});
+
+	it('should handle negative ranges correctly', () => {
+		expect(clamp(-10, -5, 0)).toBe(-5);
+	});
+
+	it('should handle equal min and max values', () => {
+		expect(clamp(5, 5, 5)).toBe(5);
+	});
+
+	it('should throw an error if min is greater than max', () => {
+		expect(() => clamp(10, 5, 0)).toThrow('min cannot be greater than max');
+	});
+});

src/lib/utils/numbers/clamp.ts

@@ -0,0 +1,16 @@
+/**
+ * Clamps a number within the inclusive range specified by the given minimum and maximum values.
+ *
+ * @param min The minimum value.
+ * @param desired The number to clamp.
+ * @param max The maximum value.
+ * @returns The clamped value.
+ * @throws {Error} Will throw an error if min is greater than max.
+ */
+export function clamp(min: number, desired: number, max: number) {
+	if (min > max) throw new Error('min cannot be greater than max');
+	if (desired > max) return max;
+	if (desired < min) return min;
+
+	return desired;
+}

src/lib/utils/store/svocal.ts

@@ -51,6 +51,8 @@ const sv = {
 				sat: []
 			}) satisfies Timetable as Timetable
 	],
+	'settings.timetable.showWeekend': ['settings.timetable.showWeekend', () => false],
+	'settings.timetable.highlightToday': ['settings.timetable.highlightToday', () => false],
 	'settings.launcher.outlineWidth': ['settings.launcher.outlineWidth', () => 2],
 	'holidays.country': ['holidays.country', () => 'DE'],
 	'holidays.state': ['holidays.state', () => 'HE'],

src/routes/homework/+page.svelte

@@ -20,7 +20,7 @@
 
 <MetaData title={i('title.homework')} />
 
-<Panes min={200}>
+<Panes min={200} position={300}>
 	<div slot="a">
 		<SideMenu
 			query={data.query ?? {

src/routes/settings/timetable/+page.svelte

@@ -20,15 +20,19 @@
 	import MetaData from '$lib/components/utils/MetaData.svelte';
 	import { loadFromFile } from '$lib/components/settings/timetable/loadFromFile';
 	import { WEEKDAYS } from '$lib/components/settings/timetable/weekdays';
+	import BoolSetting from '$lib/components/settings/BoolSetting.svelte';
 
 	const timetable = svocal('settings.timetable');
 	const weekStartsOn = svocal('settings.weekStartsOn');
+	const showWeekend = svocal('settings.timetable.showWeekend');
 	const isSmall = mediaQuery('(max-width: 768px)');
 
 	onDestroy(() => {
 		if (!browser) return;
 		timetable.update(cleanUpTimeTable);
 	});
+
+	const currentWeekday = WEEKDAYS[new Date().getDay()];
 </script>
 
 <MetaData title={i('settings.timetable.title')} />
@@ -61,15 +65,20 @@
 				<tr>
 					<th />
 					{#each { length: 7 } as _, ind}
-						<th class="pb-2 text-center">
-							<Store
-								store={i(
-									$isSmall ? 'calendar.weekday.abbr' : 'calendar.weekday',
-									{},
-									{ count: (ind + $weekStartsOn) % 7 }
-								)}
-							/>
-						</th>
+						{@const day = WEEKDAYS[(ind + $weekStartsOn) % 7]}
+						{@const show = $showWeekend ? true : !(day === 'sat' || day === 'sun')}
+
+						{#if show}
+							<th class="pb-2 text-center">
+								<Store
+									store={i(
+										$isSmall ? 'calendar.weekday.abbr' : 'calendar.weekday',
+										{},
+										{ count: (ind + $weekStartsOn) % 7 }
+									)}
+								/>
+							</th>
+						{/if}
 					{/each}
 				</tr>
 			</thead>
@@ -79,6 +88,7 @@
 					<tr class="border-b border-zinc-300 dark:border-zinc-700">
 						<th class="p-2">
 							<QuickAction
+								small
 								icon={Trash}
 								on:click={() => {
 									timetable.update((t) => removeNthLesson(t, lessonIndex));
@@ -88,21 +98,30 @@
 
 						{#each WEEKDAYS as _, ind}
 							{@const day = WEEKDAYS[(ind + $weekStartsOn) % 7]}
+							{@const isToday = currentWeekday === day}
+							{@const show = $showWeekend ? true : !(day === 'sat' || day === 'sun')}
 
-							<td class="px-1 py-3">
-								<TextInput
-									placeholder={i('settings.timetable.subject.placeholder')}
-									bind:value={$timetable[day][lessonIndex]}
-									on:enter={() => {
-										const isOnlyNull = getLastLessons($timetable).every((x) => x === null);
-										const hasLessons = countMaxLessons($timetable) > 0;
+							{#if show}
+								<td
+									class="bg-opacity-20 px-1 py-3 dark:bg-opacity-10"
+									class:bg-emerald-200={isToday}
+									class:dark:bg-emerald-800={isToday}
+								>
+									<TextInput
+										minimal
+										placeholder={i('settings.timetable.subject.placeholder')}
+										bind:value={$timetable[day][lessonIndex]}
+										on:enter={() => {
+											const isOnlyNull = getLastLessons($timetable).every((x) => x === null);
+											const hasLessons = countMaxLessons($timetable) > 0;
 
-										if (!(isOnlyNull && hasLessons)) timetable.update(addRow);
+											if (!(isOnlyNull && hasLessons)) timetable.update(addRow);
 
-										// TODO: Focus the TextInput one below
-									}}
-								/>
-							</td>
+											// TODO: Focus the TextInput one below
+										}}
+									/>
+								</td>
+							{/if}
 						{/each}
 					</tr>
 				{/each}
@@ -122,4 +141,6 @@
 			</tbody>
 		</table>
 	</div>
+
+	<BoolSetting bind:value={$showWeekend} label={i('settings.timetable.showWeekend')} />
 </div>