feat: Delegation portal part 2

src/App.vue

@@ -45,9 +45,9 @@ onMounted(async () => {
       <footer v-if="route.name === 'home'" class="mt-auto">
         <TheFooter />
       </footer>
+      <div id="action-bar" />
     </div>
   </div>
-
   <TheFlashNotification />
   <TheModalNotification />
 </template>

src/components/AvatarSpace.vue

@@ -8,7 +8,7 @@ const props = withDefaults(
     previewFile?: File;
   }>(),
   {
-    size: '22',
+    size: '20',
     previewFile: undefined
   }
 );

src/components/BaseBreadcrumbs.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  pages: { name: string; to: string; current: boolean }[];
+}>();
+</script>
+
+<template>
+  <div class="flex items-center">
+    <div v-for="(page, i) in pages" :key="i" class="flex items-center">
+      <router-link v-if="!page.current" :to="page.to" class="flex items-center">
+        <span class="text-skin-link">{{ page.name }}</span>
+      </router-link>
+      <div v-else class="flex cursor-default items-center">
+        <span class="text-skin-link opacity-40">{{ page.name }}</span>
+      </div>
+      <div class="mx-1 flex h-[20px] w-[20px] items-center justify-center">
+        <i-ho-chevron-right
+          v-if="i < pages.length - 1"
+          class="shrink-0 text-xs text-skin-text"
+        />
+      </div>
+    </div>
+  </div>
+</template>

src/components/BaseButtonIcon.vue

@@ -7,6 +7,7 @@ defineProps<{
 
 <template>
   <button
+    type="button"
     :disabled="isDisabled"
     :class="{ '!cursor-not-allowed': isDisabled }"
     class="flex items-center rounded-full p-[6px] text-md text-skin-text transition-colors duration-200 hover:text-skin-link"

src/components/BaseButtonRound.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
-defineProps<{
-  isDisabled?: boolean;
-}>();
+withDefaults(
+  defineProps<{
+    isDisabled?: boolean;
+    size?: string;
+  }>(),
+  {
+    isDisabled: false,
+    size: '46px'
+  }
+);
 </script>
 
 <template>
   <button
     :disabled="isDisabled"
     :class="{ '!cursor-not-allowed': isDisabled }"
-    class="flex h-[44px] w-[44px] cursor-pointer select-none items-center justify-center rounded-full border hover:border-skin-text"
+    class="flex cursor-pointer select-none items-center justify-center rounded-full border hover:border-skin-text"
+    :style="`width: ${size}; height: ${size}`"
   >
     <slot />
   </button>

src/components/BaseCombobox.vue

@@ -39,7 +39,7 @@ watch(
     as="div"
     class="w-full"
   >
-    <ComboboxLabel class="block">
+    <ComboboxLabel v-if="label" class="block">
       <LabelInput :information="information">{{ label }}</LabelInput>
     </ComboboxLabel>
     <div class="relative">

src/components/BaseComboboxMultiple.vue

@@ -37,7 +37,7 @@ watch(
 
 <template>
   <Combobox v-model="selectedItems" multiple as="div" class="w-full">
-    <ComboboxLabel class="block">
+    <ComboboxLabel v-if="label" class="block">
       <LabelInput :information="information">{{ label }}</LabelInput>
     </ComboboxLabel>
     <div class="relative">

src/components/BaseListbox.vue

@@ -35,7 +35,7 @@ const selectedItem = computed({
 
 <template>
   <Listbox v-model="selectedItem" as="div" :disabled="disableInput">
-    <ListboxLabel>
+    <ListboxLabel v-if="label || definition?.title">
       <LabelInput :information="information || definition?.description">
         {{ label || definition?.title }}
       </LabelInput>

src/components/BaseListboxMultiple.vue

@@ -45,7 +45,7 @@ function isItemDisabled(item: string) {
 
 <template>
   <Listbox v-model="selectedItems" as="div" :disabled="isDisabled" multiple>
-    <ListboxLabel>
+    <ListboxLabel v-if="label || definition?.title">
       <LabelInput :information="information || definition?.description">
         {{ label || definition?.title }}
       </LabelInput>

src/components/BaseModal.vue

@@ -54,10 +54,10 @@ onBeforeUnmount(() => {
         </div>
         <BaseButtonIcon
           v-if="!hideClose"
-          class="absolute right-3 top-[20px]"
+          class="absolute right-[20px] top-[20px]"
           @click="emit('close')"
         >
-          <i-ho-x />
+          <i-ho-x class="text-[17px]" />
         </BaseButtonIcon>
       </div>
     </div>

src/components/BaseModalFullscreen.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogPanel,
+  TransitionChild,
+  TransitionRoot
+} from '@headlessui/vue';
+
+defineEmits(['close']);
+
+defineProps<{
+  open: boolean;
+  title?: string;
+}>();
+
+onBeforeMount(() => {
+  document.documentElement.style.setProperty('scrollbar-gutter', 'auto');
+});
+
+onBeforeUnmount(() => {
+  document.documentElement.style.setProperty('scrollbar-gutter', 'stable');
+});
+</script>
+
+<template>
+  <TransitionRoot appear :show="open" as="template">
+    <Dialog as="div" class="relative z-50" @close="$emit('close')">
+      <div class="fixed inset-0 overflow-y-auto">
+        <div class="flex min-h-full items-center justify-center">
+          <!-- enter from below -->
+          <TransitionChild as="template">
+            <DialogPanel
+              class="h-screen w-full transform overflow-y-auto bg-skin-bg p-0 align-middle transition-all"
+              style="scrollbar-gutter: stable"
+            >
+              <div
+                class="sticky top-0 z-10 h-[70px] w-full border-b border-skin-border bg-skin-bg"
+              >
+                <div class="absolute right-[18px] top-[18px]">
+                  <span tabindex="0"></span>
+                  <BaseButtonIcon @click="$emit('close')">
+                    <span class="sr-only">Close</span>
+                    <i-ho-x class="text-base" aria-hidden="true" />
+                  </BaseButtonIcon>
+                </div>
+              </div>
+              <div
+                class="mt-4 pb-[40px] text-base"
+                :class="{ 'scrolling-enabled': open }"
+              >
+                <slot />
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

src/components/BaseSearch.vue

@@ -37,7 +37,7 @@ watch(
 
 <template>
   <div
-    class="flex h-[46px] items-center"
+    class="flex h-[44px] items-center"
     :class="{ 'border-b bg-skin-bg py-3 pl-4': modal }"
   >
     <i-ho-search class="mr-2 flex-shrink-0 text-[19px] text-skin-link" />
@@ -53,7 +53,7 @@ watch(
     />
     <i-ho-x-circle
       v-if="modelValue"
-      class="mr-2 flex-shrink-0 cursor-pointer text-[16px] text-skin-link"
+      class="mr-[6px] flex-shrink-0 cursor-pointer text-[16px] text-skin-link"
       @click="clearInput"
     />
     <slot name="after" class="flex-shrink-0" />

src/components/ButtonBack.vue

@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <button>
+  <button type="button">
     <div
       class="inline-flex items-center gap-1 text-skin-text hover:text-skin-link"
     >

src/components/ButtonSwitch.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+interface State {
+  value: string | number | boolean;
+  name: string;
+}
+
+defineProps<{
+  modelValue: string | number | boolean;
+  state1: State;
+  state2: State;
+}>();
+
+defineEmits(['update:modelValue']);
+</script>
+
+<template>
+  <div class="inline-flex items-center rounded-full border p-1">
+    <div
+      :class="[
+        'w-full cursor-pointer px-3 py-1 text-center',
+        {
+          'rounded-full bg-skin-border text-skin-heading':
+            state1.value === modelValue
+        }
+      ]"
+      @click="$emit('update:modelValue', state1.value)"
+    >
+      {{ state1.name }}
+    </div>
+    <div
+      :class="[
+        'w-full cursor-pointer px-3 py-1 text-center',
+        {
+          'rounded-full bg-skin-border text-skin-heading':
+            state2.value === modelValue
+        }
+      ]"
+      @click="$emit('update:modelValue', state2.value)"
+    >
+      {{ state2.name }}
+    </div>
+  </div>
+</template>

src/components/ModalConfirmLeave.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  open: boolean;
+  title?: string;
+  disabled?: boolean;
+}>();
+
+defineEmits(['close', 'save', 'leave']);
+</script>
+
+<template>
+  <BaseModal :open="open" @close="$emit('close')">
+    <template #header>
+      <div class="flex flex-row items-center justify-center">
+        <h3>{{ title ? title : 'Unsaved changes' }}</h3>
+      </div>
+    </template>
+
+    <BaseMessageBlock level="warning" class="m-4">
+      You have unsaved changes. Would you like to save them before leaving?
+    </BaseMessageBlock>
+
+    <template #footer>
+      <div class="flex gap-3">
+        <BaseButton class="w-full" @click="$emit('leave'), $emit('close')">
+          Leave
+        </BaseButton>
+        <BaseButton
+          class="w-full"
+          primary
+          :disabled="disabled"
+          @click="$emit('save'), $emit('close')"
+        >
+          Save
+        </BaseButton>
+      </div>
+    </template>
+  </BaseModal>
+</template>

src/components/NavbarExtras.vue

@@ -32,7 +32,7 @@ function clickNavigationItem(item: any) {
 <template>
   <BasePopover>
     <template #button>
-      <BaseButtonRound class="relative !h-[46px] !w-[46px]">
+      <BaseButtonRound class="relative">
         <i-ho-dots-horizontal class="text-skin-link" />
       </BaseButtonRound>
     </template>

src/components/NavbarNotifications.vue

@@ -24,7 +24,7 @@ onMounted(() => loadNotifications());
 <template>
   <BasePopover>
     <template #button>
-      <BaseButtonRound class="relative !h-[46px] !w-[46px]">
+      <BaseButtonRound class="relative">
         <i-ho-bell class="text-skin-link" />
         <BaseIndicator
           v-if="notificationsSortedByTime.some(n => n.seen === false)"

src/components/ProposalsItem.vue

@@ -61,7 +61,7 @@ onMounted(() => setMessageVisibility(props.proposal.flagged));
             <LabelProposalState :state="proposal.state" />
           </div>
 
-          <router-link :to="to">
+          <router-link :to="to" class="cursor-pointer">
             <ProposalsItemTitle :proposal="proposal" :voted="voted" />
 
             <ProposalsItemBody v-if="body">

src/components/SettingsSubSpacesBlock.vue

@@ -120,11 +120,12 @@ const removeChild = (child: string) => {
         <div>
           <BaseButtonRound
             :is-disabled="isViewOnly"
-            class="!h-[42px] !w-[42px] whitespace-nowrap text-skin-link"
+            class="whitespace-nowrap text-skin-link"
             :class="{
               'cursor-not-allowed !text-skin-text hover:border-skin-border':
                 !foundChild || lookingUpChild
             }"
+            size="42px"
             @click="addChild()"
           >
             <i-ho-plus class="text-sm" />