Initial commit

resources/js/pages/apps/components/ModelSelector.vue

@@ -0,0 +1,63 @@
+<script setup>
+const props = defineProps({
+  models: Array,
+  selectedModelIdentifier: String,
+  activeModelColor: String,
+  showModelMenu: Boolean,
+});
+const emit = defineEmits(['update:model', 'update:menu']);
+
+const selectedModelName = computed(() => {
+  const model = props.models.find((m) => m.identifier === props.selectedModelIdentifier);
+  return model ? model.name : 'Select Model';
+});
+</script>
+
+<template>
+  <VMenu :model-value="showModelMenu" location="top" @update:model-value="emit('update:menu', $event)">
+    <template v-slot:activator="{ props: menuProps }">
+      <VBtn
+        v-bind="menuProps"
+        :color="activeModelColor"
+        variant="text"
+        class="text-none model-select-btn"
+        density="comfortable"
+      >
+        <span class="d-none d-sm-block">{{ selectedModelName }}</span>
+        <span class="d-block d-sm-none">Model</span>
+        <VIcon icon="tabler-chevron-down" class="ms-1" />
+      </VBtn>
+    </template>
+
+    <VList density="compact" max-height="300">
+      <VListItem
+        v-for="model in models"
+        :key="model.identifier"
+        :value="model.identifier"
+        @click="emit('update:model', model.identifier); emit('update:menu', false)"
+      >
+        <template v-slot:prepend>
+          <div
+            class="model-color-indicator"
+            :style="`background-color: var(--v-theme-${model.color})`"
+          ></div>
+        </template>
+        <VListItemTitle>{{ model.name }}</VListItemTitle>
+      </VListItem>
+    </VList>
+  </VMenu>
+</template>
+
+<style scoped>
+.model-select-btn {
+  min-width: auto;
+  padding: 0 8px;
+}
+
+.model-color-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+</style>