Refactor: Renamed fe->ui

ui/src/components/panels/PanelsOverview.vue

@@ -0,0 +1,183 @@
+<!--
+Macrame is a program that enables the user to create keyboard macros and button panels. 
+The macros are saved as simple JSON files and can be linked to the button panels. The panels can 
+be created with HTML and CSS.
+
+Copyright (C) 2025 Jesse Malotaux
+
+This program is free software: you can redistribute it and/or modify 
+it under the terms of the GNU General Public License as published by 
+the Free Software Foundation, either version 3 of the License, or 
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful, 
+but WITHOUT ANY WARRANTY; without even the implied warranty of 
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License 
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div id="panels-overview">
+    <AlertComp v-if="Object.keys(panels.list).length == 0" variant="info">
+      No panels found
+    </AlertComp>
+    <div class="panel-list">
+      <div class="panel-item mcrm-block block__dark" v-for="(panel, i) in panels.list" :key="i">
+        <div class="panel-item__content" @click="panelItemClick(panel.dir)">
+          <div class="thumb">
+            <img v-if="panel.thumb" :src="`data:image/jpeg;base64,${panel.thumb}`" alt="" />
+            <IconLayoutGrid v-else />
+          </div>
+          <h4>{{ panel.name }}</h4>
+          <div class="description" v-if="isLocal()">
+            <div class="content">
+              <strong class="block mb-1 text-slate-400">{{ panel.name }}</strong>
+              <hr class="mb-2 border-slate-600" />
+              <p v-if="panel.description != 'null'" class="text-slate-200">
+                {{ panel.description }}
+              </p>
+            </div>
+            <footer>
+              <ButtonComp variant="subtle" size="sm" :href="`/panel/view/${panel.dir}`">
+                <IconEye /> Preview
+              </ButtonComp>
+              <ButtonComp variant="primary" size="sm" :href="`/panel/edit/${panel.dir}`">
+                <IconPencil /> Edit
+              </ButtonComp>
+            </footer>
+          </div>
+        </div>
+        <template v-if="!isLocal()"> </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { usePanelStore } from '@/stores/panel'
+import { onMounted, reactive } from 'vue'
+import AlertComp from '../base/AlertComp.vue'
+import { IconEye, IconLayoutGrid, IconPencil } from '@tabler/icons-vue'
+import ButtonComp from '../base/ButtonComp.vue'
+import { isLocal } from '@/services/ApiService'
+import { useRouter } from 'vue-router'
+
+const panel = usePanelStore()
+
+const panels = reactive({
+  list: {},
+})
+
+const router = useRouter()
+
+onMounted(async () => {
+  const panelList = await panel.getList()
+
+  panels.list = panelList
+})
+
+function panelItemClick(dir) {
+  if (isLocal()) return
+
+  router.push(`/panel/view/${dir}`)
+}
+</script>
+
+<style scoped>
+@reference "@/assets/main.css";
+
+.panel-list {
+  @apply grid
+  grid-cols-2
+  md:grid-cols-4
+  lg:grid-cols-6
+  gap-4
+  w-full h-fit;
+}
+
+.panel-item {
+  @apply p-px 
+  overflow-hidden;
+
+  .thumb {
+    @apply flex 
+    justify-center
+    items-center
+    w-full
+    aspect-[4/3];
+
+    img {
+      @apply size-full
+      object-cover;
+    }
+
+    &:not(:has(img)) {
+      @apply bg-sky-950;
+    }
+
+    svg {
+      @apply size-12;
+    }
+  }
+
+  h4 {
+    @apply px-4 py-2
+    h-12
+    truncate;
+  }
+
+  &:hover .description {
+    @apply opacity-100;
+  }
+
+  .description {
+    @apply absolute
+    inset-0
+    size-full
+    pt-2
+    pr-1
+    pb-13
+    bg-slate-900/60
+    backdrop-blur-md
+    text-slate-100
+    opacity-0
+    transition-opacity
+    cursor-default
+    z-10;
+
+    .content {
+      @apply h-full
+      p-4
+      pt-2
+      overflow-y-auto;
+    }
+
+    footer {
+      @apply absolute
+      bottom-0 left-0
+      w-full
+      h-12
+      grid
+      grid-cols-2
+      bg-slate-900
+      border-t
+      border-slate-600;
+
+      .btn {
+        @apply size-full
+        rounded-none
+        justify-center
+        border-0;
+
+        &:last-child {
+          @apply border-l
+          border-slate-600;
+        }
+      }
+    }
+  }
+}
+</style>