Allow setting letter case to original

materialious/src/lib/components/ComboBox.svelte

@@ -3,7 +3,7 @@
 	import { mergeAttrs } from 'melt';
 	import { Combobox } from 'melt/builders';
 
-	type ComboOption = { label: string; value: string };
+	type ComboOption = { label: string; value: any };
 
 	let {
 		options,

materialious/src/lib/components/settings/Interface.svelte

@@ -408,12 +408,14 @@
 <ComboBox
 	label={$_('letterCase')}
 	defaultValue={$interfaceForceCase}
-	options={titleCases.map((caseType) => {
-		return {
-			label: letterCase(`${caseType}`, caseType),
-			value: caseType as string
-		};
-	})}
+	options={[
+		...titleCases.map((caseType) => {
+			return {
+				label: letterCase(`${caseType}`, caseType),
+				value: caseType as string
+			};
+		})
+	]}
 	onChange={(value) => interfaceForceCase.set(value as TitleCase)}
 />
 

materialious/src/lib/components/thumbnail/PlaylistThumbnail.svelte

@@ -10,10 +10,9 @@
 
 	interface Props {
 		playlist: Playlist | PlaylistPage;
-		disabled?: boolean;
 	}
 
-	let { playlist, disabled = false }: Props = $props();
+	let { playlist }: Props = $props();
 
 	const playlistLink = resolve('/playlist/[playlistId]', { playlistId: playlist.playlistId });
 
@@ -27,12 +26,7 @@
 	const thumbnail = new Avatar({ src: thumbnailSrc });
 </script>
 
-<a
-	href={playlistLink}
-	class:link-disabled={disabled}
-	style="width: 100%; overflow: hidden;min-height:100px;"
-	class="wave"
->
+<a href={playlistLink} style="width: 100%; overflow: hidden;min-height:100px;" class="wave">
 	<img
 		class="responsive"
 		{...mergeAttrs(thumbnail.image, {
@@ -51,9 +45,7 @@
 <div class="small-padding">
 	<nav class="no-margin">
 		<div class="max">
-			<a class:link-disabled={disabled} href={playlistLink}
-				><div class="bold">{letterCase(truncate(playlist.title))}</div></a
-			>
+			<a href={playlistLink}><div class="bold">{letterCase(truncate(playlist.title))}</div></a>
 			<div>
 				{#if playlist.authorId}
 					<a href={resolve('/channel/[authorId]', { authorId: playlist.authorId })}
@@ -66,9 +58,3 @@
 		</div>
 	</nav>
 </div>
-
-<style>
-	.link-disabled {
-		pointer-events: none;
-	}
-</style>

materialious/src/lib/letterCasing.ts

@@ -1,8 +1,20 @@
 import { get } from 'svelte/store';
 import { interfaceForceCase } from './store';
 
-export type TitleCase = 'uppercase' | 'lowercase' | 'sentence case' | 'title case' | null;
-export const titleCases: TitleCase[] = ['lowercase', 'uppercase', 'title case', 'sentence case'];
+export type TitleCase =
+	| 'uppercase'
+	| 'lowercase'
+	| 'sentence case'
+	| 'title case'
+	| 'original'
+	| null;
+export const titleCases: TitleCase[] = [
+	'original',
+	'lowercase',
+	'uppercase',
+	'title case',
+	'sentence case'
+];
 
 export function letterCase(text: string, caseTypeOverwrite?: TitleCase): string {
 	const casing = caseTypeOverwrite ? caseTypeOverwrite : get(interfaceForceCase);

materialious/src/lib/store.ts

@@ -214,7 +214,7 @@ export const interfaceSearchSuggestionsStore = persist(
 	'searchSuggestions'
 );
 export const interfaceForceCase: Writable<TitleCase> = persist(
-	writable(null),
+	writable('original'),
 	createStorage(),
 	'forceCase'
 );

materialious/src/routes/(app)/playlists/+page.svelte

@@ -43,7 +43,7 @@
 			<ContentColumn>
 				<article class="no-padding" style="height: 100%;">
 					{#key playlist.playlistId}
-						<PlaylistThumbnail disabled={playlist.videoCount === 0} {playlist} />
+						<PlaylistThumbnail {playlist} />
 					{/key}
 
 					<nav class="right-align padding">