Emote Set Selector Layout

locale/en_US.ts

@@ -15,6 +15,7 @@ export default {
 		update: "Update",
 		report: "Report",
 		activity: "Activity",
+		loading: "Loading",
 		object: {
 			user: "User",
 			emote_set: "Emote Set",
@@ -87,6 +88,9 @@ export default {
 		author: "Added by",
 		created_at: "Created",
 		versions: "Versions",
+		preview_loading: "Loading previews... {'('}{0}{'/'}{1}{')'}",
+		preview_failed: "Failed to load previews",
+		processing: "Processing Emote - this may take some time.",
 		use: "Use Emote",
 		switch_version: "Switch to this version",
 		in_n_sets: "in {0} set | in {0} sets",
@@ -138,9 +142,16 @@ export default {
 		editing: "Editing {0}",
 		owner: "{USER}'s Emote Set",
 		owned: "Owned Emote Set",
+		label_renamed: "Renamed",
+		label_conflict: "Conflict",
+		label_default: "Default",
 		modal: {
 			selected_channel_count: "no channel selected | {0} channel selected | {0} channels selected",
 			create_button: "Create @:common.object.emote_set",
+			rename_in_set: "Rename in {0}",
+			context_rename: "Customize Emote Name",
+			context_set_default: "Assign As Default",
+			context_unset_default: "Unassign As Default",
 		},
 	},
 	// Text that is relevant to users

src/App.vue

@@ -23,6 +23,7 @@
 				innerProps: contextMenu.props,
 			}"
 			@close="contextMenu.shown = false"
+			@ctx-interact="contextMenu.interact = $event"
 		/>
 	</div>
 </template>
@@ -72,6 +73,7 @@ const theme = computed(() => {
 const showWAYTOODANK = ref(false);
 const contextMenu = reactive({
 	shown: false,
+	interact: "",
 	component: null as Component | null,
 	props: {} as Record<string, unknown>,
 	x: 0,
@@ -244,13 +246,22 @@ watch(locale, updateLocale);
 updateLocale(locale.value, "en_US");
 
 // Provide right click context utility
-provide("ContextMenu", (ev: MouseEvent, component: Component, props: Record<string, unknown>) => {
+provide("ContextMenu", (ev: MouseEvent, component: Component, props: Record<string, unknown>): Promise<string> => {
 	ev.preventDefault();
+	ev.stopPropagation();
 	contextMenu.x = ev.clientX;
 	contextMenu.y = ev.clientY;
 	contextMenu.shown = true;
 	contextMenu.component = shallowRef(component);
 	contextMenu.props = props;
+
+	return new Promise<string>((resolve) => {
+		watch(contextMenu, (v) => {
+			if (v.interact !== "") {
+				resolve(v.interact);
+			}
+		});
+	});
 });
 
 // WIP Notice

src/components/form/TextInput.vue

@@ -1,6 +1,12 @@
 <template>
 	<div class="text-input">
-		<input :value="modelValue" :empty="!modelValue?.length" @input="onInput" @blur="$emit('blur')" />
+		<input
+			:autofocus="autofocus"
+			:value="modelValue"
+			:empty="!modelValue?.length"
+			@input="onInput"
+			@blur="$emit('blur')"
+		/>
 		<label>
 			<span> {{ label }} </span>
 		</label>
@@ -20,6 +26,7 @@ defineProps({
 		type: String as PropType<"flat" | "outline">,
 		default: "flat",
 	},
+	autofocus: Boolean,
 });
 
 const emit = defineEmits(["update:modelValue", "blur"]);