From 9239c77e12ea9bbad04dd5807e164ad0d81aded4 Mon Sep 17 00:00:00 2001
From: Jesse Malotaux <jemx@mboutrecht.nl>
Date: Sun, 23 Mar 2025 14:47:50 +0100
Subject: [PATCH] Base components added

---
 fe/src/components/base/AlertComp.vue   |  54 ++++++++++
 fe/src/components/base/ButtonComp.vue  | 137 ++++++++++++++++++++-----
 fe/src/components/base/ButtonGroup.vue |  15 +++
 fe/src/components/base/ContextMenu.vue |  14 ++-
 fe/src/components/base/DialogComp.vue  |  26 +++--
 fe/src/components/base/MainMenu.vue    |  27 ++---
 6 files changed, 215 insertions(+), 58 deletions(-)
 create mode 100644 fe/src/components/base/AlertComp.vue
 create mode 100644 fe/src/components/base/ButtonGroup.vue

diff --git a/fe/src/components/base/AlertComp.vue b/fe/src/components/base/AlertComp.vue
new file mode 100644
index 0000000..7fbae31
--- /dev/null
+++ b/fe/src/components/base/AlertComp.vue
@@ -0,0 +1,54 @@
+<template>
+  <div :class="`alert alert__${type}`">
+    <IconInfoCircle v-if="type === 'info'" />
+    <IconCheck v-if="type === 'success'" />
+    <IconExclamationCircle v-if="type === 'warning'" />
+    <IconAlertTriangle v-if="type === 'error'" />
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import {
+  IconAlertTriangle,
+  IconCheck,
+  IconExclamationCircle,
+  IconInfoCircle,
+} from '@tabler/icons-vue'
+
+defineProps({
+  type: String, // info, success, warning, error
+})
+</script>
+
+<style scoped>
+@reference "@/assets/main.css";
+
+.alert {
+  @apply flex
+  items-center
+  gap-4
+  p-4
+  border
+  border-white/10
+  bg-white/10
+  rounded-md
+  backdrop-blur-md;
+
+  &.alert__info {
+    @apply text-sky-400 bg-sky-400/10;
+  }
+
+  &.alert__success {
+    @apply text-lime-400 bg-lime-400/10;
+  }
+
+  &.alert__warning {
+    @apply text-amber-400 bg-amber-400/10;
+  }
+
+  &.alert__error {
+    @apply text-rose-400 bg-rose-400/10;
+  }
+}
+</style>
diff --git a/fe/src/components/base/ButtonComp.vue b/fe/src/components/base/ButtonComp.vue
index 43a775c..3f3e331 100644
--- a/fe/src/components/base/ButtonComp.vue
+++ b/fe/src/components/base/ButtonComp.vue
@@ -1,11 +1,11 @@
 <template>
   <template v-if="href">
-    <a :href="href" :class="`button ${classString}`">
+    <a :href="href" :class="classString">
       <slot />
     </a>
   </template>
   <template v-else>
-    <button :class="`button ${classString}`">
+    <button :class="classString">
       <slot />
     </button>
   </template>
@@ -21,23 +21,11 @@ const props = defineProps({
 })
 
 const classString = computed(() => {
-  const classes = {
-    'bg-sky-500/80 hover:bg-sky-400 text-white border-sky-400': props.variant === 'primary',
-    'bg-white/80 hover:bg-white text-slate-900 border-white': props.variant === 'secondary',
-    'bg-red-700/80 hover:bg-red-700 text-white border-red-800': props.variant === 'danger',
-    'bg-slate-700/80 hover:bg-slate-700 text-white border-slate-600': props.variant === 'dark',
-    'bg-lime-500/80 hover:bg-lime-500 text-white border-lime-600': props.variant === 'success',
-    'button__subtle bg-transparent hover:bg-white/10 text-white border-transparent':
-      props.variant === 'subtle',
-    'button__ghost bg-transparent text-white/80 border-transparent hover:text-white':
-      props.variant === 'ghost',
-    'button__lg px-5 py-3 text-lg gap-4': props.size === 'lg',
-    'button__sm px-3 py-1.5 text-sm gap-2': props.size === 'sm',
-    'px-4 py-2 gap-3': props.size !== 'sm' && props.size !== 'lg',
-  }
-  return Object.keys(classes)
-    .filter((key) => classes[key])
-    .join(' ')
+  let classes = 'btn'
+  if (props.variant) classes += ` btn__${props.variant}`
+  if (props.size) classes += ` btn__${props.size}`
+
+  return classes
 })
 </script>
 
@@ -45,32 +33,125 @@ const classString = computed(() => {
 @reference "@/assets/main.css";
 
 button,
-.button {
+.btn {
   @apply flex 
   items-center 
+  gap-3
   h-fit 
+  px-4 py-2
   border
+  border-solid
   rounded-lg
-  font-semibold
-  shadow-md
-  shadow-transparent
-  transition
+  tracking-wide
+  font-normal
+  transition-all
   cursor-pointer;
 
+  transition:
+    border-color 0.1s ease-in-out,
+    background-color 0.2s ease;
+
   &:not(.button__subtle, .button__ghost):hover {
     @apply shadow-black;
   }
 
-  svg {
-    @apply size-5 stroke-1;
+  &[disabled],
+  &.disabled {
+    @apply opacity-50 pointer-events-none cursor-not-allowed;
   }
 
-  &.button__sm svg {
+  svg {
+    @apply size-5 transition-[stroke] duration-400 ease-in-out;
+  }
+
+  &.btn__sm svg {
     @apply size-4;
   }
 
-  &.button__lg svg {
+  &.btn__lg svg {
     @apply size-6;
   }
+
+  &:hover {
+    @apply !text-white;
+
+    svg {
+      @apply !stroke-white;
+    }
+  }
+
+  &.btn__primary {
+    @apply bg-sky-100/10 border-sky-100 text-sky-100;
+
+    svg {
+      @apply stroke-sky-200;
+    }
+
+    &:hover {
+      @apply bg-sky-400/40 border-sky-300;
+    }
+  }
+
+  &.btn__secondary {
+    @apply bg-amber-100/10 border-amber-100 text-amber-100;
+
+    svg {
+      @apply stroke-amber-300;
+    }
+
+    &:hover {
+      @apply bg-amber-400/40 border-amber-400;
+    }
+  }
+
+  &.btn__danger {
+    @apply bg-rose-200/20 border-rose-100 text-rose-200;
+
+    svg {
+      @apply stroke-rose-400;
+    }
+
+    &:hover {
+      @apply bg-rose-400/40 border-rose-500 text-white;
+    }
+  }
+
+  &.btn__dark {
+    /* @apply bg-slate-700/80 hover:bg-slate-700 text-white border-slate-600; */
+    @apply bg-slate-200/10 border-slate-400 text-slate-100;
+
+    svg {
+      @apply stroke-slate-300;
+    }
+
+    &:hover {
+      @apply bg-slate-400/40 border-slate-200 text-white;
+    }
+  }
+
+  &.btn__success {
+    /* @apply bg-lime-500/80 hover:bg-lime-500 text-white border-lime-600; */
+    @apply bg-lime-200/10 border-lime-100 text-lime-100;
+
+    svg {
+      @apply stroke-lime-400;
+    }
+
+    &:hover {
+      @apply bg-lime-400/40 border-lime-500 text-white;
+    }
+  }
+
+  &.btn__subtle {
+    @apply bg-transparent hover:bg-white/10 text-white border-transparent;
+
+    &:hover {
+      @apply bg-white/20 to-white/30 border-white/40;
+    }
+  }
+
+  &.btn__ghost {
+    @apply bg-transparent text-white/80 border-transparent hover:text-white;
+  }
 }
 </style>
diff --git a/fe/src/components/base/ButtonGroup.vue b/fe/src/components/base/ButtonGroup.vue
new file mode 100644
index 0000000..c468606
--- /dev/null
+++ b/fe/src/components/base/ButtonGroup.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="button-group">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  variant: String,
+})
+</script>
+
+<style scoped>
+@reference "@/assets/main.css";
+</style>
diff --git a/fe/src/components/base/ContextMenu.vue b/fe/src/components/base/ContextMenu.vue
index 4506495..5009a15 100644
--- a/fe/src/components/base/ContextMenu.vue
+++ b/fe/src/components/base/ContextMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="context-menu">
-    <div class="context-menu__trigger" @click="menuOpen = !menuOpen">
+    <div class="context-menu__trigger" @click="toggle">
       <slot name="trigger" />
     </div>
     <div :class="`context-menu__content ${menuOpen ? 'open' : ''}`">
@@ -10,7 +10,9 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUpdated } from 'vue'
+
+defineExpose({ toggle })
 
 const props = defineProps({
   open: Boolean,
@@ -21,6 +23,12 @@ const menuOpen = ref(false)
 onMounted(() => {
   menuOpen.value = props.open
 })
+
+function toggle() {
+  console.log('toggle')
+
+  menuOpen.value = !menuOpen.value
+}
 </script>
 
 <style>
@@ -55,7 +63,7 @@ onMounted(() => {
   }
 }
 
-ul {
+.context-menu ul {
   @apply text-slate-800
   divide-y
   divide-slate-300;
diff --git a/fe/src/components/base/DialogComp.vue b/fe/src/components/base/DialogComp.vue
index 4e6379b..fc2b716 100644
--- a/fe/src/components/base/DialogComp.vue
+++ b/fe/src/components/base/DialogComp.vue
@@ -3,7 +3,7 @@
     <div class="trigger" @click="toggleDialog(true)">
       <slot name="trigger" />
     </div>
-    <dialog ref="dialog">
+    <dialog ref="dialog" class="mcrm-block block__dark">
       <ButtonComp
         class="dialog__close p-0"
         variant="ghost"
@@ -28,6 +28,8 @@ const openDialog = ref()
 
 const emit = defineEmits(['onOpen', 'onClose', 'onToggle'])
 
+defineExpose({ toggleDialog })
+
 const props = defineProps({
   open: Boolean,
 })
@@ -40,7 +42,7 @@ onUpdated(() => {
   if (props.open === true) toggleDialog(props.open)
 })
 
-const toggleDialog = (openToggle) => {
+function toggleDialog(openToggle) {
   if (openToggle) {
     dialog.value.showModal()
     emit('onOpen')
@@ -64,7 +66,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style>
 @reference "@/assets/main.css";
 
 .dialog-container {
@@ -74,13 +76,10 @@ onMounted(() => {
     @apply fixed
     top-1/2 left-1/2
     -translate-x-1/2 -translate-y-1/2
-    p-4
-    bg-slate-800
-    border
-    border-slate-600
-    rounded-lg
-    shadow-md
-    shadow-black 
+    max-w-[calc(100vw-2rem)]
+    text-slate-200
+    /* shadow-md */
+    /* shadow-black  */
     z-50
     pointer-events-none;
 
@@ -94,7 +93,7 @@ onMounted(() => {
 
     .dialog__close {
       @apply absolute
-      top-2 right-2
+      top-4 right-4
       p-0
       text-white;
 
@@ -104,4 +103,9 @@ onMounted(() => {
     }
   }
 }
+.dialog__content {
+  > *:first-child {
+    @apply pr-8;
+  }
+}
 </style>
diff --git a/fe/src/components/base/MainMenu.vue b/fe/src/components/base/MainMenu.vue
index 628cec0..1dbee4b 100644
--- a/fe/src/components/base/MainMenu.vue
+++ b/fe/src/components/base/MainMenu.vue
@@ -1,8 +1,8 @@
 <template>
   <nav id="main-menu">
     <button id="menu-toggle" :class="menuOpen ? 'open' : ''" @click="menuOpen = !menuOpen">
-      <IconMenu2 />
-      <IconX />
+      <img class="logo" src="@/assets/Macrame-Logo-gradient.svg" aria-hidden="true" />
+      <IconX :class="{ 'opacity-0': !menuOpen }" />
     </button>
     <ul :class="menuOpen ? 'open' : ''">
       <li>
@@ -14,6 +14,9 @@
       <li>
         <RouterLink @click="menuOpen = false" to="/macros"> <IconKeyboard />Macros </RouterLink>
       </li>
+      <li>
+        <RouterLink @click="menuOpen = false" to="/devices"> <IconDevices />Devices </RouterLink>
+      </li>
       <li>
         <RouterLink @click="menuOpen = false" to="/settings"> <IconSettings />Settings </RouterLink>
       </li>
@@ -24,10 +27,10 @@
 <script setup>
 import { RouterLink } from 'vue-router'
 import {
+  IconDevices,
   IconHome,
   IconKeyboard,
   IconLayoutGrid,
-  IconMenu2,
   IconSettings,
   IconX,
 } from '@tabler/icons-vue'
@@ -36,7 +39,7 @@ import { ref } from 'vue'
 const menuOpen = ref(false)
 </script>
 
-<style scoped>
+<style>
 @reference "@/assets/main.css";
 nav {
   @apply relative flex z-50;
@@ -48,10 +51,12 @@ nav {
     rounded-full
     aspect-square
     bg-white/20 hover:bg-white/40
+    border-0
     cursor-pointer
     transition-colors
     backdrop-blur-md;
 
+    .logo,
     svg {
       @apply absolute
       inset-1/2
@@ -61,18 +66,8 @@ nav {
       ease-in-out;
     }
 
-    svg:last-of-type {
-      @apply opacity-0;
-    }
-
-    &.open {
-      svg:first-of-type {
-        @apply opacity-0;
-      }
-
-      svg:last-of-type {
-        @apply opacity-100;
-      }
+    .logo {
+      @apply w-full;
     }
   }