(feat): translations page

services/src/db/database.ts

@@ -1,4 +1,4 @@
-import type { DB } from 'kysely-codegen' // this is the Database interface we defined earlier
+import type { DB } from 'kysely-codegen'
 import SQLite from 'better-sqlite3'
 import { Kysely, SqliteDialect } from 'kysely'
 import 'better-sqlite3'

src/components/container/translations/TranslationsKeyTable.svelte

@@ -0,0 +1,91 @@
+<script lang="ts" context="module">
+	export type TranslationData = {
+		key: string
+		translations: { langCode: LanguageCode; langLabel: string; text: string; isDefault?: boolean }[]
+	}
+</script>
+
+<script lang="ts">
+	import * as Table from '$components/ui/table'
+	import CopyClipboard from '$components/copy/CopyClipboard.svelte'
+	import Input from '$components/ui/input/input.svelte'
+	import Badge from '$components/ui/badge/badge.svelte'
+	import Button from '$components/ui/button/button.svelte'
+	import { Languages } from 'lucide-svelte'
+	import { type LanguageCode } from '$components/container/language/languages'
+
+	export let translationData: TranslationData[] = [
+		{
+			key: 'survey.question.title',
+			translations: [
+				{
+					langCode: 'en',
+					langLabel: 'English',
+					text: 'Have you already eaten something today?',
+					isDefault: true
+				},
+				{ langCode: 'es', langLabel: 'Spanish', text: '' },
+				{ langCode: 'zh', langLabel: 'Chinese', text: '你今天已经吃东西了吗？' }
+			]
+		},
+		{
+			key: 'survey.question.description',
+			translations: [
+				{
+					langCode: 'en',
+					langLabel: 'English',
+					text: 'It is important for us to know that you follow a daily diet.',
+					isDefault: true
+				},
+				{
+					langCode: 'es',
+					langLabel: 'Spanish',
+					text: 'Es importante para nosotros saber que usted sigue una dieta diaria.'
+				},
+				{ langCode: 'zh', langLabel: 'Chinese', text: '' }
+			]
+		},
+		{
+			key: 'user.greeting',
+			translations: [
+				{ langCode: 'en', langLabel: 'English', text: 'Hello my dear friend.', isDefault: true },
+				{ langCode: 'es', langLabel: 'Spanish', text: '' },
+				{ langCode: 'zh', langLabel: 'Chinese', text: '你好我亲爱的朋友。' }
+			]
+		}
+	]
+</script>
+
+<Table.Root class="w-full">
+	{#each translationData as keyValue}
+		<Table.Row>
+			<Table.Cell colspan={3} class="p-0">
+				<div
+					class="flex w-full items-center justify-between bg-primary p-2 text-base text-primary-foreground"
+				>
+					<span>{keyValue.key}</span>
+					<CopyClipboard value={keyValue.key} />
+				</div>
+			</Table.Cell>
+		</Table.Row>
+
+		{#each keyValue.translations as translation}
+			<Table.Row>
+				<Table.Cell class="w-5 font-bold">{translation.langCode}</Table.Cell>
+				<Table.Cell>
+					<div class="flex items-center gap-2">
+						<Input placeholder="Add translation" bind:value={translation.text} />
+						{#if translation.isDefault}
+							<Badge>Default</Badge>
+						{/if}
+						{#if !translation.text}
+							<Button size="icon" on:click={() => {}}>
+								<Languages />
+							</Button>
+						{/if}
+					</div>
+				</Table.Cell>
+			</Table.Row>
+		{/each}
+	{/each}
+</Table.Root>

src/components/copy/CopyClipboard.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Button from '$components/ui/button/button.svelte'
+	import { Check, Copy } from 'lucide-svelte'
+
+	export let copied = false
+	export let value: string
+
+	const copyToClipboard = async () => {
+		await navigator.clipboard.writeText(value)
+		copied = true
+		setTimeout(() => {
+			copied = false
+		}, 2000)
+	}
+</script>
+
+<div>
+	<Button variant="ghost" size="icon" class="bg-transparent" on:click={copyToClipboard}>
+		{#if copied}
+			<Check class="h-4 w-4" />
+		{:else}
+			<Copy class="h-4 w-4" />
+		{/if}
+	</Button>
+</div>

src/components/search-input/SearchInput.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Search } from 'lucide-svelte'
+	import { Input } from '$components/ui/input'
+
+	export let placeholder = 'Search...'
+</script>
+
+<div class="relative">
+	<Search class="absolute left-2 top-[50%] h-4 w-4 translate-y-[-50%] text-muted-foreground" />
+	<Input {placeholder} class="pl-8" />
+</div>

src/components/ui/badge/badge.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Variant, badgeVariants } from './index.js'
+	import { cn } from '$lib/utils/shadcn.js'
+
+	let className: string | undefined | null = undefined
+	export let href: string | undefined = undefined
+	export let variant: Variant = 'default'
+	export { className as class }
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

src/components/ui/badge/index.ts

@@ -0,0 +1,21 @@
+import { type VariantProps, tv } from 'tailwind-variants'
+
+export { default as Badge } from './badge.svelte'
+
+export const badgeVariants = tv({
+	base: 'focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
+	variants: {
+		variant: {
+			default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent',
+			secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
+			destructive:
+				'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent',
+			outline: 'text-foreground'
+		}
+	},
+	defaultVariants: {
+		variant: 'default'
+	}
+})
+
+export type Variant = VariantProps<typeof badgeVariants>['variant']

src/routes/(authenticated)/projects/[slug]/keys/+page.svelte

@@ -1 +1,12 @@
-keys
+<script lang="ts">
+	import { pageTitle } from '$lib/utils/page-title'
+	import type { PageData } from './$types'
+
+	export let data: PageData
+</script>
+
+<svelte:head>
+	<title>{pageTitle(data.project.name, 'Keys')}</title>
+</svelte:head>
+
+This page will display all keys. It will also give the option to add or delete keys.

src/routes/(authenticated)/projects/[slug]/languages/+page.svelte

@@ -12,6 +12,7 @@
 	import LanguageTable from '$components/container/language/LanguageTable.svelte'
 	import { Button } from '$components/ui/button'
 	import { Check, Plus } from 'lucide-svelte'
+	import { pageTitle } from '$lib/utils/page-title'
 
 	export let data: PageData
 
@@ -58,6 +59,10 @@
 	}
 </script>
 
+<svelte:head>
+	<title>{pageTitle(data.project.name, 'Languages')}</title>
+</svelte:head>
+
 <MainContent>
 	<form id="languagesForm" method="POST" use:enhance>
 		<MainContentHeader title="{data.project.name} - Languages">

src/routes/(authenticated)/projects/[slug]/translations/+page.svelte

@@ -1 +1,25 @@
-Translation
+<script lang="ts">
+	import { MainContent, MainContentHeader } from '$components/layout/main-content'
+	import SearchInput from '$components/search-input/SearchInput.svelte'
+	import type { PageData } from './$types'
+	import TranslationsKeyTable from '$components/container/translations/TranslationsKeyTable.svelte'
+	import { pageTitle } from '$lib/utils/page-title'
+
+	export let data: PageData
+</script>
+
+<svelte:head>
+	<title>{pageTitle(data.project.name, 'Translations')}</title>
+</svelte:head>
+
+<MainContent>
+	<MainContentHeader title="{data.project.name} - Translations"></MainContentHeader>
+
+	<div class="max-w-96">
+		<SearchInput placeholder="Search keys or translations..." />
+	</div>
+
+	<div class="mb-12 mt-4">
+		<TranslationsKeyTable />
+	</div>
+</MainContent>