Init

resources/js/Components/PanelFolder.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="border-b border-border last:border-b-0">
+        <button
+            @click="open = !open"
+            class="w-full flex items-center gap-2 px-3 py-2 bg-section hover:bg-section/80 transition-colors cursor-pointer select-none"
+        >
+            <span
+                class="inline-block w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-t-[5px] border-t-label transition-transform duration-200"
+                :class="{ '-rotate-90': !open }"
+            ></span>
+            <span class="text-[11px] font-semibold uppercase tracking-[0.1em] text-label">{{ title }}</span>
+            <span v-if="badge !== undefined" class="ml-auto text-[10px] text-muted bg-deep px-1.5 py-0.5 rounded-sm">{{ badge }}</span>
+        </button>
+        <div class="folder-content" :class="{ 'folder-collapsed': !open }">
+            <div class="px-3 py-3">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+    title: { type: String, required: true },
+    badge: { type: [String, Number], default: undefined },
+    defaultOpen: { type: Boolean, default: true },
+});
+
+const open = ref(props.defaultOpen);
+</script>