added ability to have custom shortener code

frontend/src/routes/(app)/links/(components)/form.svelte

@@ -75,21 +75,21 @@
 			</Dialog.Description>
 		</Dialog.Header>
 		<ScrollArea class="max-h-[calc(100vh-200px)]">
-			<div class="grid grid-cols-4 gap-4 items-center pb-4">
+			<div class="grid grid-cols-4 items-center gap-4 pb-4">
 				<div class="font-bold">Preview</div>
-				<div class="flex flex-col col-span-4 justify-center border">
-					<div class="overflow-hidden relative h-64">
+				<div class="col-span-4 flex flex-col justify-center border">
+					<div class="relative h-64 overflow-hidden">
 						{#if isPreviewLoading}
-							<div class="flex justify-center items-center h-full">
+							<div class="flex h-full items-center justify-center">
 								<Loader2 class="animate-spin" />
 							</div>
 						{:else if previewData}
 							<img
 								src={previewData.image}
 								alt=""
-								class="object-cover w-full h-64" />
+								class="h-64 w-full object-cover" />
 							<div
-								class="absolute bottom-2 left-2 px-2 rounded-lg bg-secondary">
+								class="bg-secondary absolute bottom-2 left-2 rounded-lg px-2">
 								{previewData.title}
 							</div>
 						{/if}
@@ -145,13 +145,40 @@
 					<Form.Description>Shortener Project</Form.Description>
 					<Form.FieldErrors />
 				</Form.Field>
+				<Form.Field
+					{form}
+					name="custom_code_enable"
+					class="flex items-center gap-2 space-y-0">
+					<Form.Control let:attrs>
+						<Switch
+							{...attrs}
+							bind:checked={$formData.custom_code_enable} />
+						<Form.Label>Custom Code</Form.Label>
+					</Form.Control>
+				</Form.Field>
+				{#if $formData.custom_code_enable}
+					<Form.Field
+						{form}
+						name="custom_code"
+						class="flex flex-col gap-2">
+						<Form.Control let:attrs>
+							<Input
+								{...attrs}
+								bind:value={$formData.custom_code}
+								placeholder="abcde" />
+						</Form.Control>
+						<Form.Description
+							>Custom Code For The Shortener</Form.Description>
+						<Form.FieldErrors />
+					</Form.Field>
+				{/if}
 				<Form.Field
 					{form}
 					name="ios"
-					class="flex gap-2 items-center space-y-0">
+					class="flex items-center gap-2 space-y-0">
 					<Form.Control let:attrs>
-						<Form.Label>iOS Link</Form.Label>
 						<Switch {...attrs} bind:checked={$formData.ios} />
+						<Form.Label>iOS Link</Form.Label>
 					</Form.Control>
 				</Form.Field>
 				{#if $formData.ios}
@@ -173,10 +200,10 @@
 				<Form.Field
 					{form}
 					name="android"
-					class="flex gap-2 items-center space-y-0">
+					class="flex items-center gap-2 space-y-0">
 					<Form.Control let:attrs>
-						<Form.Label>Android Link</Form.Label>
 						<Switch {...attrs} bind:checked={$formData.android} />
+						<Form.Label>Android Link</Form.Label>
 					</Form.Control>
 				</Form.Field>
 				{#if $formData.android}
@@ -198,7 +225,7 @@
 				<Form.Field
 					{form}
 					name="active"
-					class="flex gap-2 items-center space-y-0">
+					class="flex items-center gap-2 space-y-0">
 					<Form.Control let:attrs>
 						<Checkbox {...attrs} bind:checked={$formData.active} />
 						<Form.Label>Active</Form.Label>

frontend/src/routes/(app)/links/+page.server.ts

@@ -154,6 +154,24 @@ export const actions: Actions = {
 			return setError(form, 'android_link', 'Link must be HTTPS')
 		}
 
+		if (form.data.custom_code_enable) {
+			if (!form.data.custom_code) {
+				return setError(
+					form,
+					'custom_code',
+					'Please Enter Custom Code',
+				)
+			}
+			const customCodeExist = await db.query.shortener.findFirst({
+				where: (shortener, { eq }) =>
+					eq(shortener.code, form.data.custom_code),
+			})
+
+			if (customCodeExist) {
+				return setError(form, 'custom_code', 'Duplicated Custom Code')
+			}
+		}
+
 		const user = event.locals.user
 		let project = undefined
 		const selected_project = form.data.project
@@ -187,7 +205,9 @@ export const actions: Actions = {
 			}
 		}
 
-		const code = nanoid(8)
+		const code = form.data.custom_code_enable
+			? form.data.custom_code
+			: nanoid(8)
 		await db.insert(shortener).values({
 			link: form.data.link.startsWith('https://')
 				? form.data.link

frontend/src/routes/(app)/links/[id]/edit/(components)/form.svelte

@@ -62,21 +62,21 @@
 	})
 </script>
 
-<div class="grid grid-cols-4 gap-4 items-center pb-4">
+<div class="grid grid-cols-4 items-center gap-4 pb-4">
 	<div class="font-bold">Preview</div>
-	<div class="flex flex-col col-span-4 justify-center border">
-		<div class="overflow-hidden relative h-64">
+	<div class="col-span-4 flex flex-col justify-center border">
+		<div class="relative h-64 overflow-hidden">
 			{#if isPreviewLoading}
-				<div class="flex justify-center items-center h-full">
+				<div class="flex h-full items-center justify-center">
 					<Loader2 class="animate-spin" />
 				</div>
 			{:else if previewData}
 				<img
 					src={previewData.image}
 					alt=""
-					class="object-cover w-full h-64" />
+					class="h-64 w-full object-cover" />
 				<div
-					class="absolute bottom-2 left-2 px-2 rounded-lg bg-secondary">
+					class="bg-secondary absolute bottom-2 left-2 rounded-lg px-2">
 					{previewData.title}
 				</div>
 			{/if}
@@ -132,13 +132,37 @@
 		<Form.Description>Shortener Project</Form.Description>
 		<Form.FieldErrors />
 	</Form.Field>
+	<Form.Field
+		{form}
+		name="custom_code_enable"
+		class="flex items-center gap-2 space-y-0">
+		<Form.Control let:attrs>
+			<Switch
+				{...attrs}
+				bind:checked={$formData.custom_code_enable} />
+			<Form.Label>Custom Code</Form.Label>
+		</Form.Control>
+	</Form.Field>
+	{#if $formData.custom_code_enable}
+		<Form.Field {form} name="custom_code" class="flex flex-col gap-2">
+			<Form.Control let:attrs>
+				<Input
+					{...attrs}
+					bind:value={$formData.custom_code}
+					placeholder="abcde" />
+			</Form.Control>
+			<Form.Description
+				>Custom Code For The Shortener</Form.Description>
+			<Form.FieldErrors />
+		</Form.Field>
+	{/if}
 	<Form.Field
 		{form}
 		name="ios"
-		class="flex gap-2 items-center space-y-0">
+		class="flex items-center gap-2 space-y-0">
 		<Form.Control let:attrs>
-			<Form.Label>iOS Link</Form.Label>
 			<Switch {...attrs} bind:checked={$formData.ios} />
+			<Form.Label>iOS Link</Form.Label>
 		</Form.Control>
 	</Form.Field>
 	{#if $formData.ios}
@@ -156,10 +180,10 @@
 	<Form.Field
 		{form}
 		name="android"
-		class="flex gap-2 items-center space-y-0">
+		class="flex items-center gap-2 space-y-0">
 		<Form.Control let:attrs>
-			<Form.Label>Android Link</Form.Label>
 			<Switch {...attrs} bind:checked={$formData.android} />
+			<Form.Label>Android Link</Form.Label>
 		</Form.Control>
 	</Form.Field>
 	{#if $formData.android}
@@ -180,7 +204,7 @@
 	<Form.Field
 		{form}
 		name="active"
-		class="flex gap-2 items-center space-y-0">
+		class="flex items-center gap-2 space-y-0">
 		<Form.Control let:attrs>
 			<Checkbox {...attrs} bind:checked={$formData.active} />
 			<Form.Label>Active</Form.Label>

frontend/src/routes/(app)/links/[id]/edit/+page.server.ts

@@ -52,6 +52,8 @@ export const load = (async (event) => {
 		form: await superValidate(
 			{
 				...shortener,
+				custom_code_enable: true,
+				custom_code: shortener.code,
 				project: selectedCategory?.value || undefined,
 			},
 			zod(formSchema),
@@ -86,6 +88,27 @@ export const actions: Actions = {
 			return setError(form, 'android_link', 'Link must be HTTPS')
 		}
 
+		if (form.data.custom_code_enable) {
+			if (!form.data.custom_code) {
+				return setError(
+					form,
+					'custom_code',
+					'Please Enter Custom Code',
+				)
+			}
+			const customCodeExist = await db.query.shortener.findFirst({
+				where: (shortener, { eq, and, ne }) =>
+					and(
+						eq(shortener.code, form.data.custom_code),
+						ne(shortener.code, event.params.id),
+					),
+			})
+
+			if (customCodeExist) {
+				return setError(form, 'custom_code', 'Duplicated Custom Code')
+			}
+		}
+
 		const user = event.locals.user
 
 		let project = undefined
@@ -128,6 +151,9 @@ export const actions: Actions = {
 					: `https://${form.data.link}`,
 				projectId: project ? project.id : null,
 				userId: user.id,
+				code: form.data.custom_code_enable
+					? form.data.custom_code
+					: undefined,
 				ios: form.data.ios,
 				ios_link: ios_link,
 				android: form.data.android,

frontend/src/routes/(app)/links/[id]/edit/schema.ts

@@ -8,6 +8,8 @@ export const formSchema = z.object({
 	ios_link: z.string().nullable(),
 	android: z.boolean(),
 	android_link: z.string().nullable(),
+	custom_code_enable: z.boolean(),
+	custom_code: z.string(),
 })
 
 export type FormSchema = typeof formSchema

frontend/src/routes/(app)/links/schema.ts

@@ -8,6 +8,8 @@ export const formSchema = z.object({
 	ios_link: z.string(),
 	android: z.boolean(),
 	android_link: z.string(),
+	custom_code_enable: z.boolean(),
+	custom_code: z.string(),
 })
 
 export type FormSchema = typeof formSchema

frontend/src/routes/(app)/projects/[id]/(components)/form.svelte

@@ -71,21 +71,21 @@
 			</Dialog.Description>
 		</Dialog.Header>
 		<ScrollArea class="max-h-[calc(100vh-200px)]">
-			<div class="grid grid-cols-4 gap-4 items-center pb-4">
+			<div class="grid grid-cols-4 items-center gap-4 pb-4">
 				<div class="font-bold">Preview</div>
-				<div class="flex flex-col col-span-4 justify-center border">
-					<div class="overflow-hidden relative h-64">
+				<div class="col-span-4 flex flex-col justify-center border">
+					<div class="relative h-64 overflow-hidden">
 						{#if isPreviewLoading}
-							<div class="flex justify-center items-center h-full">
+							<div class="flex h-full items-center justify-center">
 								<Loader2 class="animate-spin" />
 							</div>
 						{:else if previewData}
 							<img
 								src={previewData.image}
 								alt=""
-								class="object-cover w-full h-64" />
+								class="h-64 w-full object-cover" />
 							<div
-								class="absolute bottom-2 left-2 px-2 rounded-lg bg-secondary">
+								class="bg-secondary absolute bottom-2 left-2 rounded-lg px-2">
 								{previewData.title}
 							</div>
 						{/if}
@@ -109,13 +109,40 @@
 					<Form.Description>Shortener link</Form.Description>
 					<Form.FieldErrors />
 				</Form.Field>
+				<Form.Field
+					{form}
+					name="custom_code_enable"
+					class="flex items-center gap-2 space-y-0">
+					<Form.Control let:attrs>
+						<Switch
+							{...attrs}
+							bind:checked={$formData.custom_code_enable} />
+						<Form.Label>Custom Code</Form.Label>
+					</Form.Control>
+				</Form.Field>
+				{#if $formData.custom_code_enable}
+					<Form.Field
+						{form}
+						name="custom_code"
+						class="flex flex-col gap-2">
+						<Form.Control let:attrs>
+							<Input
+								{...attrs}
+								bind:value={$formData.custom_code}
+								placeholder="abcde" />
+						</Form.Control>
+						<Form.Description
+							>Custom Code For The Shortener</Form.Description>
+						<Form.FieldErrors />
+					</Form.Field>
+				{/if}
 				<Form.Field
 					{form}
 					name="ios"
-					class="flex gap-2 items-center space-y-0">
+					class="flex items-center gap-2 space-y-0">
 					<Form.Control let:attrs>
-						<Form.Label>iOS Link</Form.Label>
 						<Switch {...attrs} bind:checked={$formData.ios} />
+						<Form.Label>iOS Link</Form.Label>
 					</Form.Control>
 				</Form.Field>
 				{#if $formData.ios}
@@ -137,10 +164,10 @@
 				<Form.Field
 					{form}
 					name="android"
-					class="flex gap-2 items-center space-y-0">
+					class="flex items-center gap-2 space-y-0">
 					<Form.Control let:attrs>
-						<Form.Label>Android Link</Form.Label>
 						<Switch {...attrs} bind:checked={$formData.android} />
+						<Form.Label>Android Link</Form.Label>
 					</Form.Control>
 				</Form.Field>
 				{#if $formData.android}
@@ -162,7 +189,7 @@
 				<Form.Field
 					{form}
 					name="active"
-					class="flex gap-2 items-center space-y-0">
+					class="flex items-center gap-2 space-y-0">
 					<Form.Control let:attrs>
 						<Checkbox {...attrs} bind:checked={$formData.active} />
 						<Form.Label>Active</Form.Label>

frontend/src/routes/(app)/projects/[id]/+page.server.ts

@@ -126,6 +126,24 @@ export const actions: Actions = {
 			return setError(form, 'android_link', 'Link must be HTTPS')
 		}
 
+		if (form.data.custom_code_enable) {
+			if (!form.data.custom_code) {
+				return setError(
+					form,
+					'custom_code',
+					'Please Enter Custom Code',
+				)
+			}
+			const customCodeExist = await db.query.shortener.findFirst({
+				where: (shortener, { eq }) =>
+					eq(shortener.code, form.data.custom_code),
+			})
+
+			if (customCodeExist) {
+				return setError(form, 'custom_code', 'Duplicated Custom Code')
+			}
+		}
+
 		const { id } = event.params
 		const user = event.locals.user
 		const project = await db.query.project.findFirst({
@@ -159,7 +177,9 @@ export const actions: Actions = {
 			}
 		}
 
-		const code = nanoid(8)
+		const code = form.data.custom_code_enable
+			? form.data.custom_code
+			: nanoid(8)
 		await db.insert(shortener).values({
 			link: form.data.link.startsWith('https://')
 				? form.data.link

frontend/src/routes/(app)/projects/[id]/links/[linkid]/edit/(components)/form.svelte

@@ -59,21 +59,21 @@
 	})
 </script>
 
-<div class="grid grid-cols-4 gap-4 items-center pb-4">
+<div class="grid grid-cols-4 items-center gap-4 pb-4">
 	<div class="font-bold">Preview</div>
-	<div class="flex flex-col col-span-4 justify-center border">
-		<div class="overflow-hidden relative h-64">
+	<div class="col-span-4 flex flex-col justify-center border">
+		<div class="relative h-64 overflow-hidden">
 			{#if isPreviewLoading}
-				<div class="flex justify-center items-center h-full">
+				<div class="flex h-full items-center justify-center">
 					<Loader2 class="animate-spin" />
 				</div>
 			{:else if previewData}
 				<img
 					src={previewData.image}
 					alt=""
-					class="object-cover w-full h-64" />
+					class="h-64 w-full object-cover" />
 				<div
-					class="absolute bottom-2 left-2 px-2 rounded-lg bg-secondary">
+					class="bg-secondary absolute bottom-2 left-2 rounded-lg px-2">
 					{previewData.title}
 				</div>
 			{/if}
@@ -97,13 +97,37 @@
 		<Form.Description>Shortener link</Form.Description>
 		<Form.FieldErrors />
 	</Form.Field>
+	<Form.Field
+		{form}
+		name="custom_code_enable"
+		class="flex items-center gap-2 space-y-0">
+		<Form.Control let:attrs>
+			<Switch
+				{...attrs}
+				bind:checked={$formData.custom_code_enable} />
+			<Form.Label>Custom Code</Form.Label>
+		</Form.Control>
+	</Form.Field>
+	{#if $formData.custom_code_enable}
+		<Form.Field {form} name="custom_code" class="flex flex-col gap-2">
+			<Form.Control let:attrs>
+				<Input
+					{...attrs}
+					bind:value={$formData.custom_code}
+					placeholder="abcde" />
+			</Form.Control>
+			<Form.Description
+				>Custom Code For The Shortener</Form.Description>
+			<Form.FieldErrors />
+		</Form.Field>
+	{/if}
 	<Form.Field
 		{form}
 		name="ios"
-		class="flex gap-2 items-center space-y-0">
+		class="flex items-center gap-2 space-y-0">
 		<Form.Control let:attrs>
-			<Form.Label>iOS Link</Form.Label>
 			<Switch {...attrs} bind:checked={$formData.ios} />
+			<Form.Label>iOS Link</Form.Label>
 		</Form.Control>
 	</Form.Field>
 	{#if $formData.ios}
@@ -121,10 +145,10 @@
 	<Form.Field
 		{form}
 		name="android"
-		class="flex gap-2 items-center space-y-0">
+		class="flex items-center gap-2 space-y-0">
 		<Form.Control let:attrs>
-			<Form.Label>Android Link</Form.Label>
 			<Switch {...attrs} bind:checked={$formData.android} />
+			<Form.Label>Android Link</Form.Label>
 		</Form.Control>
 	</Form.Field>
 	{#if $formData.android}
@@ -145,7 +169,7 @@
 	<Form.Field
 		{form}
 		name="active"
-		class="flex gap-2 items-center space-y-0">
+		class="flex items-center gap-2 space-y-0">
 		<Form.Control let:attrs>
 			<Checkbox {...attrs} bind:checked={$formData.active} />
 			<Form.Label>Active</Form.Label>

frontend/src/routes/(app)/projects/[id]/links/[linkid]/edit/+page.server.ts

@@ -35,7 +35,14 @@ export const load = (async (event) => {
 
 	return {
 		shortener,
-		form: await superValidate({ ...shortener }, zod(formSchema)),
+		form: await superValidate(
+			{
+				...shortener,
+				custom_code_enable: true,
+				custom_code: shortener.code,
+			},
+			zod(formSchema),
+		),
 	}
 }) satisfies PageServerLoad
 
@@ -66,6 +73,27 @@ export const actions: Actions = {
 			return setError(form, 'android_link', 'Link must be HTTPS')
 		}
 
+		if (form.data.custom_code_enable) {
+			if (!form.data.custom_code) {
+				return setError(
+					form,
+					'custom_code',
+					'Please Enter Custom Code',
+				)
+			}
+			const customCodeExist = await db.query.shortener.findFirst({
+				where: (shortener, { eq, and, ne }) =>
+					and(
+						eq(shortener.code, form.data.custom_code),
+						ne(shortener.code, event.params.linkid),
+					),
+			})
+
+			if (customCodeExist) {
+				return setError(form, 'custom_code', 'Duplicated Custom Code')
+			}
+		}
+
 		const { id } = event.params
 		const user = event.locals.user
 		const project = await db.query.project.findFirst({
@@ -107,6 +135,9 @@ export const actions: Actions = {
 					: `https://${form.data.link}`,
 				projectId: project.id,
 				userId: user.id,
+				code: form.data.custom_code_enable
+					? form.data.custom_code
+					: undefined,
 				ios: form.data.ios,
 				ios_link: ios_link,
 				android: form.data.android,

frontend/src/routes/(app)/projects/[id]/links/[linkid]/edit/schema.ts

@@ -7,6 +7,8 @@ export const formSchema = z.object({
 	ios_link: z.string().nullable(),
 	android: z.boolean(),
 	android_link: z.string().nullable(),
+	custom_code_enable: z.boolean(),
+	custom_code: z.string(),
 })
 
 export type FormSchema = typeof formSchema

frontend/src/routes/(app)/projects/[id]/schema.ts

@@ -7,6 +7,8 @@ export const formSchema = z.object({
 	ios_link: z.string(),
 	android: z.boolean(),
 	android_link: z.string(),
+	custom_code_enable: z.boolean(),
+	custom_code: z.string(),
 })
 
 export type FormSchema = typeof formSchema