From ceba6b6c5098ef7757377774a457f617732ce7d4 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Thu, 28 Nov 2024 14:03:45 +0800
Subject: [PATCH] feat: use affix sidebar for editor sidebar

---
 apps/ui/src/views/Space/Editor.vue | 323 +++++++++++++++--------------
 1 file changed, 167 insertions(+), 156 deletions(-)

diff --git a/apps/ui/src/views/Space/Editor.vue b/apps/ui/src/views/Space/Editor.vue
index 227df8fe7..10d9da941 100644
--- a/apps/ui/src/views/Space/Editor.vue
+++ b/apps/ui/src/views/Space/Editor.vue
@@ -370,174 +370,185 @@ watchEffect(() => {
         <IH-paper-airplane class="rotate-90 relative left-[2px]" />
       </UiButton>
     </UiTopnav>
-    <div class="md:mr-[340px]">
-      <UiContainer class="pt-5 !max-w-[710px] mx-0 md:mx-auto s-box">
-        <MessageVotingPower
-          v-if="votingPower"
-          class="mb-4"
-          :voting-power="votingPower"
-          action="propose"
-          @fetch-voting-power="handleFetchVotingPower"
-        />
-        <UiAlert
-          v-if="votingPower && spaceType === 'default' && proposalLimitReached"
-          type="error"
-          class="mb-4"
-        >
-          <span
-            >Please verify your space to publish more proposals.
-            <a
-              :href="VERIFIED_URL"
-              target="_blank"
-              class="text-rose-500 dark:text-neutral-100 font-semibold"
-              >Verify space</a
-            >.</span
+    <div class="flex items-stretch md:flex-row flex-col w-full md:h-full">
+      <div class="flex-1 grow min-w-0">
+        <UiContainer class="pt-5 !max-w-[710px] mx-0 md:mx-auto s-box">
+          <MessageVotingPower
+            v-if="votingPower"
+            class="mb-4"
+            :voting-power="votingPower"
+            action="propose"
+            @fetch-voting-power="handleFetchVotingPower"
+          />
+          <UiAlert
+            v-if="
+              votingPower && spaceType === 'default' && proposalLimitReached
+            "
+            type="error"
+            class="mb-4"
           >
-        </UiAlert>
-        <UiAlert
-          v-else-if="
-            votingPower && spaceType !== 'turbo' && proposalLimitReached
-          "
-          type="error"
-          class="mb-4"
-        >
-          <span
-            >You can publish up to {{ MAX_1D_PROPOSALS.verified }} proposals per
-            day and {{ MAX_30D_PROPOSALS.verified }} proposals per month.
-            <a
-              :href="TURBO_URL"
-              target="_blank"
-              class="text-rose-500 dark:text-neutral-100 font-semibold"
-              >Increase limit</a
-            >.</span
+            <span
+              >Please verify your space to publish more proposals.
+              <a
+                :href="VERIFIED_URL"
+                target="_blank"
+                class="text-rose-500 dark:text-neutral-100 font-semibold"
+                >Verify space</a
+              >.</span
+            >
+          </UiAlert>
+          <UiAlert
+            v-else-if="
+              votingPower && spaceType !== 'turbo' && proposalLimitReached
+            "
+            type="error"
+            class="mb-4"
           >
-        </UiAlert>
-        <UiInputString
-          :key="proposalKey || ''"
-          v-model="proposal.title"
-          :definition="TITLE_DEFINITION"
-          :error="formErrors.title"
-        />
-        <div class="flex space-x-3">
-          <button type="button" @click="previewEnabled = false">
-            <UiLink
-              :is-active="!previewEnabled"
-              text="Write"
-              class="border-transparent"
+            <span
+              >You can publish up to {{ MAX_1D_PROPOSALS.verified }} proposals
+              per day and {{ MAX_30D_PROPOSALS.verified }} proposals per month.
+              <a
+                :href="TURBO_URL"
+                target="_blank"
+                class="text-rose-500 dark:text-neutral-100 font-semibold"
+                >Increase limit</a
+              >.</span
+            >
+          </UiAlert>
+          <UiInputString
+            :key="proposalKey || ''"
+            v-model="proposal.title"
+            :definition="TITLE_DEFINITION"
+            :error="formErrors.title"
+          />
+          <div class="flex space-x-3">
+            <button type="button" @click="previewEnabled = false">
+              <UiLink
+                :is-active="!previewEnabled"
+                text="Write"
+                class="border-transparent"
+              />
+            </button>
+            <button type="button" @click="previewEnabled = true">
+              <UiLink
+                :is-active="previewEnabled"
+                text="Preview"
+                class="border-transparent"
+              />
+            </button>
+          </div>
+          <UiMarkdown
+            v-if="previewEnabled"
+            class="px-3 py-2 border rounded-lg mb-[14px] min-h-[260px]"
+            :body="proposal.body"
+          />
+          <UiComposer
+            v-else
+            v-model="proposal.body"
+            :definition="bodyDefinition"
+            :error="formErrors.body"
+          >
+            <template
+              v-if="
+                !space?.turbo &&
+                isOffchainSpace &&
+                formErrors.body?.startsWith('Must not have more than')
+              "
+              #error-suffix
+            >
+              <a
+                :href="TURBO_URL"
+                target="_blank"
+                class="ml-1 text-skin-danger font-semibold"
+                >Increase limit</a
+              >.
+            </template>
+          </UiComposer>
+          <div class="s-base mb-5">
+            <UiInputString
+              :key="proposalKey || ''"
+              v-model="proposal.discussion"
+              :definition="DISCUSSION_DEFINITION"
+              :error="formErrors.discussion"
             />
-          </button>
-          <button type="button" @click="previewEnabled = true">
-            <UiLink
-              :is-active="previewEnabled"
-              text="Preview"
-              class="border-transparent"
+            <UiLinkPreview
+              :key="proposalKey || ''"
+              :url="proposal.discussion"
             />
-          </button>
-        </div>
-        <UiMarkdown
-          v-if="previewEnabled"
-          class="px-3 py-2 border rounded-lg mb-[14px] min-h-[260px]"
-          :body="proposal.body"
-        />
-        <UiComposer
-          v-else
-          v-model="proposal.body"
-          :definition="bodyDefinition"
-          :error="formErrors.body"
-        >
-          <template
+          </div>
+          <div
             v-if="
-              !space?.turbo &&
-              isOffchainSpace &&
-              formErrors.body?.startsWith('Must not have more than')
+              network &&
+              strategiesWithTreasuries &&
+              strategiesWithTreasuries.length > 0
             "
-            #error-suffix
           >
-            <a
-              :href="TURBO_URL"
-              target="_blank"
-              class="ml-1 text-skin-danger font-semibold"
-              >Increase limit</a
-            >.
-          </template>
-        </UiComposer>
-        <div class="s-base mb-5">
-          <UiInputString
-            :key="proposalKey || ''"
-            v-model="proposal.discussion"
-            :definition="DISCUSSION_DEFINITION"
-            :error="formErrors.discussion"
+            <h4 class="eyebrow mb-2">Execution</h4>
+            <EditorExecution
+              v-for="execution in editorExecutions"
+              :key="execution.address"
+              :model-value="execution.transactions"
+              :disabled="
+                !supportsMultipleTreasuries &&
+                hasExecution &&
+                execution.transactions.length === 0
+              "
+              :space="space"
+              :strategy="execution"
+              :extra-contacts="extraContacts"
+              class="mb-3"
+              @update:model-value="
+                value => handleExecutionUpdated(execution.address, value)
+              "
+            />
+          </div>
+        </UiContainer>
+      </div>
+
+      <Affix
+        :class="['shrink-0 md:w-[340px] border-l-0 md:border-l -mb-6']"
+        :top="72"
+        :bottom="64"
+      >
+        <div class="flex flex-col p-4 space-y-4">
+          <EditorVotingType
+            v-model="proposal"
+            :voting-types="
+              enforcedVoteType ? [enforcedVoteType] : space.voting_types
+            "
           />
-          <UiLinkPreview :key="proposalKey || ''" :url="proposal.discussion" />
-        </div>
-        <div
-          v-if="
-            network &&
-            strategiesWithTreasuries &&
-            strategiesWithTreasuries.length > 0
-          "
-        >
-          <h4 class="eyebrow mb-2">Execution</h4>
-          <EditorExecution
-            v-for="execution in editorExecutions"
-            :key="execution.address"
-            :model-value="execution.transactions"
-            :disabled="
-              !supportsMultipleTreasuries &&
-              hasExecution &&
-              execution.transactions.length === 0
+          <EditorChoices
+            v-model="proposal"
+            :minimum-basic-choices="
+              offchainNetworks.includes(space.network) ? 2 : 3
             "
-            :space="space"
-            :strategy="execution"
-            :extra-contacts="extraContacts"
-            class="mb-3"
-            @update:model-value="
-              value => handleExecutionUpdated(execution.address, value)
+            :definition="choicesDefinition"
+            :error="
+              proposal.choices.length > choicesDefinition.maxItems
+                ? `Must not have more than ${_n(choicesDefinition.maxItems)} items.`
+                : ''
             "
+          >
+            <template v-if="!space?.turbo && isOffchainSpace" #error-suffix>
+              <a
+                :href="TURBO_URL"
+                target="_blank"
+                class="ml-1 text-skin-danger font-semibold"
+                >Increase limit</a
+              >.
+            </template>
+          </EditorChoices>
+          <EditorLabels
+            v-if="space.labels?.length"
+            v-model="proposal.labels"
+            :space="space"
           />
+          <div>
+            <h4 class="eyebrow mb-2.5" v-text="'Timeline'" />
+            <ProposalTimeline :data="space" />
+          </div>
         </div>
-      </UiContainer>
-    </div>
-
-    <div
-      class="static md:fixed md:top-[72px] md:right-0 w-full md:h-[calc(100vh-72px)] md:max-w-[340px] p-4 md:pb-[88px] border-l-0 md:border-l space-y-4 no-scrollbar overflow-y-scroll"
-    >
-      <EditorVotingType
-        v-model="proposal"
-        :voting-types="
-          enforcedVoteType ? [enforcedVoteType] : space.voting_types
-        "
-      />
-      <EditorChoices
-        v-model="proposal"
-        :minimum-basic-choices="
-          offchainNetworks.includes(space.network) ? 2 : 3
-        "
-        :definition="choicesDefinition"
-        :error="
-          proposal.choices.length > choicesDefinition.maxItems
-            ? `Must not have more than ${_n(choicesDefinition.maxItems)} items.`
-            : ''
-        "
-      >
-        <template v-if="!space?.turbo && isOffchainSpace" #error-suffix>
-          <a
-            :href="TURBO_URL"
-            target="_blank"
-            class="ml-1 text-skin-danger font-semibold"
-            >Increase limit</a
-          >.
-        </template>
-      </EditorChoices>
-      <EditorLabels
-        v-if="space.labels?.length"
-        v-model="proposal.labels"
-        :space="space"
-      />
-      <div>
-        <h4 class="eyebrow mb-2.5" v-text="'Timeline'" />
-        <ProposalTimeline :data="space" />
-      </div>
+      </Affix>
     </div>
     <teleport to="#modal">
       <ModalTerms