From 7fe8fb14890337a7fae2ec57540b5751825de64b Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Mon, 22 Apr 2024 15:29:26 +0100
Subject: [PATCH] fix(ProposalPage): status selector in ProposalHeader

the dropdown icon was present but the selector component wasn't used

the selector options appeared without padding in header so this was
added in the component

fixes
https://gitworkshop.dev/repo/gitworkshop/issue/
7a8983734d366ae22828b4bbcc5c292480f427ab9f5a78428aa6fca1c9562b7b
---
 src/lib/components/proposals/ProposalHeader.svelte | 13 +++++++++++--
 src/lib/components/proposals/StatusSelector.svelte |  8 ++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/proposals/ProposalHeader.svelte b/src/lib/components/proposals/ProposalHeader.svelte
index 8691410..eab08e7 100644
--- a/src/lib/components/proposals/ProposalHeader.svelte
+++ b/src/lib/components/proposals/ProposalHeader.svelte
@@ -15,6 +15,7 @@
   import { ensureUser, logged_in_user } from '$lib/stores/users'
   import type { Unsubscriber } from 'svelte/store'
   import { onDestroy } from 'svelte'
+  import StatusSelector from './StatusSelector.svelte'
 
   dayjs.extend(relativeTime)
   export let type: 'proposal' | 'issue' = 'proposal'
@@ -60,7 +61,7 @@
 </script>
 
 <div
-  class="grow overflow-hidden border-b border-accent-content bg-base-200 pb-4 pt-2 text-xs text-neutral-content"
+  class="grow border-b border-accent-content bg-base-200 pb-4 pt-2 text-xs text-neutral-content"
 >
   <Container>
     {#if loading}
@@ -82,7 +83,15 @@
       </div>
       <div class="pt-1">
         <div class="mr-3 inline align-middle">
-          <Status {type} {status} edit_mode={!!$logged_in_user} />
+          {#if !$logged_in_user}
+            <Status {type} {status} edit_mode={false} />
+          {:else}
+            <StatusSelector
+              {type}
+              {status}
+              {repo_identifier}
+              proposal_or_issue_id={id}
+            />{/if}
         </div>
         <div class="mr-3 inline align-middle">
           opened {created_at_ago}
diff --git a/src/lib/components/proposals/StatusSelector.svelte b/src/lib/components/proposals/StatusSelector.svelte
index ba37a08..4d26219 100644
--- a/src/lib/components/proposals/StatusSelector.svelte
+++ b/src/lib/components/proposals/StatusSelector.svelte
@@ -98,7 +98,7 @@
         class="menu dropdown-content z-[1] ml-0 w-52 rounded-box bg-base-300 p-2 shadow"
       >
         {#if status !== proposal_status_draft && type !== 'issue'}
-          <li class="pl-0">
+          <li class="my-2 pl-0">
             <button
               on:click={() => {
                 changeStatus(proposal_status_draft)
@@ -109,7 +109,7 @@
           </li>
         {/if}
         {#if status !== proposal_status_open}
-          <li class="pl-0">
+          <li class="my-2 pl-0">
             <button
               on:click={() => {
                 changeStatus(proposal_status_open)
@@ -120,7 +120,7 @@
           </li>
         {/if}
         {#if status !== proposal_status_applied}
-          <li class="pl-0">
+          <li class="my-2 pl-0">
             <button
               on:click={() => {
                 changeStatus(proposal_status_applied)
@@ -131,7 +131,7 @@
           </li>
         {/if}
         {#if status !== proposal_status_closed}
-          <li class="pl-0">
+          <li class="my-2 pl-0">
             <button
               on:click={() => {
                 changeStatus(proposal_status_closed)