fix(editor): Fix i18n issues (#3072)

* 🐛 Fix `defaultLocale` watcher

* ⚡ Improve error handling for headers

* ✏️ Improve naming

* 🐛 Fix hiring banner check

* ⚡ Flatten base text keys

* ⚡ Fix miscorrected key

* ⚡ Implement pluralization

* ✏️ Update docs

* 🚚 Move headers fetching to `App.vue`

* fix hiring banner

* ⚡ Fix missing import

* ✏️ Alphabetize translations

* ⚡ Switch to async check

* feat(editor): Refactor Output Panel + fix i18n issues (#3097)

* update main panel

* finish up tabs

* fix docs link

* add icon

* update node settings

* clean up settings

* add rename modal

* fix component styles

* fix spacing

* truncate name

* remove mixin

* fix spacing

* fix spacing

* hide docs url

* fix bug

* fix renaming

* refactor tabs out

* refactor execute button

* refactor header

* add more views

* fix error view

* fix workflow rename bug

* rename component

* fix small screen bug

* move items, fix positions

* add hover state

* show selector on empty state

* add empty run state

* fix binary view

* 1 item

* add vjs styles

* show empty row for every item

* refactor tabs

* add branch names

* fix spacing

* fix up spacing

* add run selector

* fix positioning

* clean up

* increase width of selector

* fix up spacing

* fix copy button

* fix branch naming; type issues

* fix docs in custom nodes

* add type

* hide items when run selector is shown

* increase selector size

* add select prepend

* clean up a bit

* Add pagination

* add stale icon

* enable stale data in execution run

* Revert "enable stale data in execution run"

8edb68dbffa0aa0d8189117e1a53381cb2c27608

* move metadata to its own state

* fix smaller size

* add scroll buttons

* update tabs on resize

* update stale data on rename

* remove metadata on delete

* hide x

* change title colors

* binary data classes

* remove duplicate css

* add colors

* delete unused keys

* use event bus

* update styles of pagination

* fix ts issues

* fix ts issues

* use chevron icons

* fix design with download button

* add back to canvas button

* add trigger warning disabled

* show trigger warning tooltip

* update button labels for triggers

* update node output message

* fix add-option bug

* add page selector

* fix pagination selector bug

* fix executions bug

* remove hint

* add json colors

* add colors for json

* add color json keys

* fix select options bug

* update keys

* address comments

* update name limit

* align pencil

* update icon size

* update radio buttons height

* address comments

* fix pencil bug

* change buttons alignment

* fully center

* change order of buttons

* add no output message in branch

* scroll to top

* change active state

* fix page size

* all items

* update expression background

* update naming

* align pencil

* update modal background

* add schedule group

* update schedule nodes messages

* use ellpises for last chars

* fix spacing

* fix tabs issue

* fix too far data bug

* fix executions bug

* fix table wrapping

* fix rename bug

* add padding

* handle unkown errors

* add sticky header

* ignore empty input, trim node name

* nudge lightness of color

* center buttons

* update pagination

* set colors of title

* increase table font, fix alignment

* fix pencil bug

* fix spacing

* use date now

* address pagination issues

* delete unused keys

* update keys sort

* fix prepend

* fix radio button position

* Revert "fix radio button position"

ae42781786f2e6dcfb00d1be770b19a67f533bdf

Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

packages/design-system/src/components/N8nRadioButtons/RadioButton.vue

@@ -0,0 +1,66 @@
+<template>
+	<label role="radio" tabindex="-1" :class="$style.container" aria-checked="true">
+		<input type="radio" tabindex="-1" autocomplete="off" :class="$style.input" :value="value">
+		<div :class="{[$style.button]: true, [$style.active]: active}" @click="$emit('click')">{{ label }}</div>
+	</label>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'n8n-radio-button',
+	props: {
+		label: {
+			type: String,
+			required: true,
+		},
+		value: {
+			type: String,
+			required: true,
+		},
+		active: {
+			type: Boolean,
+			default: false,
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.container {
+	display: inline-block;
+	outline: 0;
+	position: relative;
+
+	&:hover {
+		.button:not(.active) {
+			color: var(--color-primary);
+		}
+	}
+}
+
+.input {
+	opacity: 0;
+	outline: 0;
+	z-index: -1;
+	position: absolute;
+}
+
+.button {
+	border-radius: 0;
+	padding: 0 var(--spacing-s);
+	display: flex;
+	align-items: center;
+	height: 26px;
+	font-size: var(--font-size-2xs);
+	border-radius: var(--border-radius-base);
+	font-weight: var(--font-weight-bold);
+	color: var(--color-text-base);
+	cursor: pointer;
+	transition: background-color 0.2s ease;
+}
+
+.active {
+	background-color: var(--color-foreground-xlight);
+	color: var(--color-text-dark);
+}
+</style>