add theme store and input, update some components to use theme

frontend/src/components/CompanySelector.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { computed } from "vue";
+import Select from "primevue/select";
+import { useCompanyStore } from "@/stores/company";
+
+const companyStore = useCompanyStore();
+
+const companyOptions = computed(() =>
+	companyStore.companies.map((company) => ({ label: company, value: company })),
+);
+
+const selectedCompany = computed({
+	get: () => companyStore.selectedCompany,
+	set: (value) => companyStore.setSelectedCompany(value),
+});
+
+const fontSize = computed(() => {
+	const len = selectedCompany.value.length;
+	if (len > 12) return '0.75rem';
+	if (len > 10) return '0.8rem';
+	return '0.875rem';
+});
+</script>
+
+<template>
+	<div class="company-selector">
+		<Select
+			v-model="selectedCompany"
+			:options="companyOptions"
+			option-label="label"
+			option-value="value"
+			placeholder="Select Company"
+			class="company-select"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.company-selector {
+	margin-bottom: 6px;
+}
+
+.company-select {
+	width: 170px;
+}
+
+:deep(.p-select) {
+	border-radius: 6px;
+	border: 1px solid var(--surface-border);
+	background-color: var(--surface-card);
+	color: var(--text-color);
+	transition: all 0.2s ease;
+}
+
+:deep(.p-select:hover) {
+	border-color: var(--theme-primary);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.p-select.p-focus) {
+	border-color: var(--theme-primary);
+	box-shadow: 0 0 0 1px var(--theme-primary);
+}
+
+:deep(.p-select .p-select-label) {
+	padding: 0.5rem 0.75rem;
+	font-size: v-bind(fontSize);
+	font-weight: 500;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+:deep(.p-select .p-select-trigger) {
+	padding: 0 0.75rem;
+}
+
+:deep(.p-select-overlay) {
+	border-radius: 6px;
+	border: 1px solid var(--surface-border);
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+:deep(.p-select-option) {
+	padding: 0.5rem 0.75rem;
+	font-size: 0.875rem;
+}
+
+:deep(.p-select-option:hover) {
+	background-color: var(--surface-hover);
+}
+</style>