Add checkbox for displaying emojis in sidebar (#520)

* Add settings for displaying emojis in sidebar

* updated wording

src/lib/components/SettingsModal.svelte

@@ -75,6 +75,14 @@
 					</ul>
 				</div>
 			{/if}
+			<label class="flex cursor-pointer select-none items-center gap-2 text-sm text-gray-500">
+				<input
+					type="checkbox"
+					name="hideEmojiOnSidebar"
+					bind:checked={settings.hideEmojiOnSidebar}
+				/>
+				Show emoticons in conversation topics
+			</label>
 			<form
 				method="post"
 				action="{base}/conversations?/delete"

src/lib/types/Settings.ts

@@ -14,6 +14,7 @@ export interface Settings extends Timestamps {
 	shareConversationsWithModelAuthors: boolean;
 	ethicsModalAcceptedAt: Date | null;
 	activeModel: string;
+	hideEmojiOnSidebar?: boolean;
 
 	// model name and system prompts
 	customPrompts?: Record<string, string>;

src/routes/+layout.server.ts

@@ -71,7 +71,7 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 			})
 			.map((conv) => ({
 				id: conv._id.toString(),
-				title: conv.title,
+				title: settings?.hideEmojiOnSidebar ? conv.title.replace(/\p{Emoji}/gu, "") : conv.title,
 				model: conv.model ?? defaultModel,
 			}))
 			.toArray(),
@@ -81,6 +81,7 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 				DEFAULT_SETTINGS.shareConversationsWithModelAuthors,
 			ethicsModalAcceptedAt: settings?.ethicsModalAcceptedAt ?? null,
 			activeModel: settings?.activeModel ?? DEFAULT_SETTINGS.activeModel,
+			hideEmojiOnSidebar: settings?.hideEmojiOnSidebar ?? false,
 			searchEnabled: !!(SERPAPI_KEY || SERPER_API_KEY),
 			customPrompts: settings?.customPrompts ?? {},
 		},

src/routes/settings/+page.server.ts

@@ -6,22 +6,26 @@ import { models, validateModel } from "$lib/server/models";
 import { authCondition } from "$lib/server/auth";
 import { DEFAULT_SETTINGS } from "$lib/types/Settings";
 
+const booleanFormObject = z
+	.union([z.literal("true"), z.literal("on"), z.literal("false"), z.null()])
+	.transform((value) => {
+		return value === "true" || value === "on";
+	});
+
 export const actions = {
 	default: async function ({ request, locals }) {
 		const formData = await request.formData();
 
 		const { ethicsModalAccepted, ...settings } = z
 			.object({
-				shareConversationsWithModelAuthors: z
-					.union([z.literal("true"), z.literal("on"), z.literal("false"), z.null()])
-					.transform((value) => {
-						return value === "true" || value === "on";
-					}),
+				shareConversationsWithModelAuthors: booleanFormObject,
+				hideEmojiOnSidebar: booleanFormObject,
 				ethicsModalAccepted: z.boolean({ coerce: true }).optional(),
 				activeModel: validateModel(models),
 				customPrompts: z.record(z.string()).default({}),
 			})
 			.parse({
+				hideEmojiOnSidebar: formData.get("hideEmojiOnSidebar"),
 				shareConversationsWithModelAuthors: formData.get("shareConversationsWithModelAuthors"),
 				ethicsModalAccepted: formData.get("ethicsModalAccepted"),
 				activeModel: formData.get("activeModel") ?? DEFAULT_SETTINGS.activeModel,