refactor(frontend): ♻️ split user profile/management (#670)

* refactor(frontend): ♻️ major rewrite/improvement of use-profile pages

* refactor(frontend): ♻️ split webhooks into their own page

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/components/global/BaseButton.vue

@@ -131,7 +131,7 @@ export default {
         },
         cancel: {
           text: "Cancel",
-          icon: this.$globals.icons.cancel,
+          icon: this.$globals.icons.close,
           color: "grey",
         },
         download: {

frontend/components/global/BaseCardSectionTitle.vue

@@ -1,10 +1,11 @@
 <template>
   <v-card flat class="pb-2">
     <h2 class="headline">{{ title }}</h2>
-    <BaseDivider width="200px" color="primary" class="my-2" thickness="1px" />
+    <!-- <BaseDivider width="200px" color="primary" class="my-2" thickness="1px" /> -->
     <p class="pb-0 mb-0">
       <slot />
     </p>
+    <v-divider class="my-4"></v-divider>
   </v-card>
 </template>
 

frontend/components/global/BasePageTitle.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="mt-4">
+    <section class="d-flex flex-column align-center">
+      <slot name="header"></slot>
+      <h2 class="headline">
+        <slot name="title"> 👋 Here's a Title </slot>
+      </h2>
+
+      <h3 class="subtitle-1">
+        <slot> </slot>
+      </h3>
+    </section>
+    <v-divider v-if="divider" class="my-4"></v-divider>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    divider: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

frontend/components/global/ToggleState.vue

@@ -0,0 +1,29 @@
+<template>
+  <component :is="tag">
+    <slot name="activator" v-bind="{ toggle, state }"> </slot>
+    <slot v-bind="{ state, toggle }"></slot>
+  </component>
+</template>
+    
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import { useToggle } from "@vueuse/shared";
+
+export default defineComponent({
+  props: {
+    tag: {
+      type: String,
+      default: "div",
+    },
+  },
+  setup() {
+    const [state, toggle] = useToggle();
+    console.log(state, toggle);
+    return {
+      state,
+      toggle,
+    };
+  },
+});
+</script>
+