feat: allow collapsing widget content, add categories widget

(cherry picked from commit 9a4ca8f6163d5e1375aa7c612e1338cce5a8c0b5)

src/components/widget/WidgetLayout.astro

@@ -1,18 +1,62 @@
 ---
+import Button from "../control/Button.astro";
+import { Icon } from 'astro-icon/components';
+import {i18n} from "../../i18n/translation";
+import I18nKey from "../../i18n/i18nKey";
 interface Props {
+    id: string;
     name?: string;
+    isCollapsed?: boolean;
+    collapsedHeight?: string;
 }
 const props = Astro.props;
 const {
+    id,
     name,
+    isCollapsed,
+    collapsedHeight,
 } = Astro.props
 
 ---
-<div class="pb-4 card-base">
-    <div class="font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-8 mt-4 mb-2
+<widget-layout data-id={id} data-isCollapsed={isCollapsed} class="pb-4 card-base">
+    <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2
         before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
         before:absolute before:left-[-16px] before:top-[5.5px]">{name}</div>
-    <div class="px-4">
+    <div id={id} class:list={["collapse-wrapper px-4 overflow-hidden", {"collapsed": isCollapsed}]}>
         <slot></slot>
     </div>
-</div>
+    {isCollapsed && <div class="expand-btn px-4 -mb-2">
+        <Button light class=" w-full rounded-lg" height="36px">
+            <div class="text-[var(--primary)] flex items-center justify-center gap-2 -translate-x-2">
+                <Icon name="material-symbols:more-horiz" size={28}></Icon> {i18n(I18nKey.more)}
+            </div>
+        </Button>
+    </div>}
+</widget-layout>
+
+<style define:vars={{ collapsedHeight }}>
+    .collapsed {
+        height: var(--collapsedHeight);
+    }
+</style>
+
+<script>
+    class WidgetLayout extends HTMLElement {
+        constructor() {
+            super();
+
+            if (!this.dataset.isCollapsed)
+                return;
+
+            const id = this.dataset.id;
+            const btn = this.querySelector('.expand-btn');
+            const wrapper = this.querySelector(`#${id}`)
+            btn.addEventListener('click', () => {
+                wrapper.classList.remove('collapsed');
+                btn.classList.add('hidden');
+            })
+        }
+    }
+
+    customElements.define('widget-layout', WidgetLayout);
+</script>