From 196e04d7eab0656da1b2e0881617c25407e23dc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 9 Nov 2025 19:13:36 +0100
Subject: [PATCH] Renamed _colors.scss to _variables.scss and other misc
 changes to components

---
 app/styles/{_colors.scss => _variables.scss} |  4 +
 app/ui/Button.vue                            |  4 +-
 app/ui/Input.vue                             | 84 ++++++++++++++++++++
 app/ui/Sidebar.vue                           |  2 +-
 4 files changed, 91 insertions(+), 3 deletions(-)
 rename app/styles/{_colors.scss => _variables.scss} (62%)
 create mode 100644 app/ui/Input.vue

diff --git a/app/styles/_colors.scss b/app/styles/_variables.scss
similarity index 62%
rename from app/styles/_colors.scss
rename to app/styles/_variables.scss
index 80ca2eb..a90654b 100644
--- a/app/styles/_colors.scss
+++ b/app/styles/_variables.scss
@@ -1,5 +1,9 @@
+$color-accent: rgb(255, 69, 58);
 $color-background: #1a202c;
 $color-text: rgba(255, 255, 255, 0.92);
+$color-placeholder-text: rgba(255, 255, 255, 0.44);
 $color-border: rgba(255, 255, 255, 0.16);
 $color-button: rgba(255, 255, 255, 0.08);
 $color-button-hover: rgba(255, 255, 255, 0.16);
+
+$standard-border-radius: 0.3rem;
diff --git a/app/ui/Button.vue b/app/ui/Button.vue
index 43d9ff9..18b8d94 100644
--- a/app/ui/Button.vue
+++ b/app/ui/Button.vue
@@ -35,12 +35,12 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 </template>
 
 <style lang="scss" scoped>
-@use "@/styles/colors" as *;
+@use "@/styles/variables" as *;
 
 .button {
 	padding: 0.6rem 1rem;
 	transition: background-color 0.2s ease-in-out;
-	border-radius: 0.3rem;
+	border-radius: $standard-border-radius;
 
 	font-weight: 600;
 }
diff --git a/app/ui/Input.vue b/app/ui/Input.vue
new file mode 100644
index 0000000..0149de0
--- /dev/null
+++ b/app/ui/Input.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+interface InputProps {
+	placeholder?: string
+	full?: boolean
+	iconName?: string
+}
+
+const value = defineModel("value")
+
+const emit = defineEmits<{
+	(e: "input", value: string): void
+	(e: "focus"): void
+}>()
+
+const props = defineProps<InputProps>()
+</script>
+
+<template>
+	<div
+		class="input"
+		:class="{ full: props.full, icon: $slots.icon || props.iconName }"
+	>
+		<span class="icon-wrapper">
+			<slot name="icon" v-if="!props.iconName" />
+			<Icon :name="props.iconName" v-else />
+		</span>
+		<input
+			:placeholder="props.placeholder"
+			v-model="value"
+			@input="(e) => emit('input', e.target?.value)"
+			@focus="emit('focus')"
+		/>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+
+.input {
+	border-radius: $standard-border-radius;
+	border: 1px solid $color-border;
+
+	padding: 0.5rem 1rem;
+
+	transition: outline 0.2s ease;
+	outline: 2px solid transparent;
+
+	&:focus-within {
+		outline: 2px solid $color-accent;
+	}
+
+	& input {
+		width: 100%;
+		background: none;
+	}
+
+	& input:focus {
+		outline: none;
+	}
+
+	& input::placeholder {
+		color: $color-placeholder-text;
+	}
+}
+
+.input,
+.icon,
+.icon-wrapper {
+	display: inline-flex;
+	align-items: center;
+}
+
+.icon {
+	gap: 0.7rem;
+
+	.icon-wrapper {
+		font-size: 24px;
+	}
+}
+
+.full {
+	width: 100%;
+}
+</style>
diff --git a/app/ui/Sidebar.vue b/app/ui/Sidebar.vue
index 3a6adde..32c8e18 100644
--- a/app/ui/Sidebar.vue
+++ b/app/ui/Sidebar.vue
@@ -11,7 +11,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use "@/styles/colors" as *;
+@use "@/styles/variables" as *;
 @use "sass:color";
 
 .sidebar-container {