feat: show repo menu on issue / proposal page

by moving the menu into the RepoHeader

enabling feature request:
nostr:nevent1qqsxpezng8ft7hydqz4g06r79n3vu2rrj560v86jhswaaxcf97zz04gw57v5f

src/lib/components/repo/RepoHeader.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+  import RepoMenu from '$lib/wrappers/RepoMenu.svelte'
   import Container from '../Container.svelte'
-  import { event_defaults } from './type'
+  import { event_defaults, type RepoPage } from './type'
 
   export let {
     event_id,
@@ -17,6 +18,7 @@
     created_at,
     loading,
   } = event_defaults
+  export let selected_tab: RepoPage = 'about'
   let short_name: string
   $: {
     if (name && name.length > 45) short_name = name.slice(0, 45) + '...'
@@ -41,5 +43,6 @@
         >{short_name}</a
       >
     {/if}
+    <RepoMenu {identifier} {selected_tab} />
   </Container>
 </div>

src/lib/components/repo/type.ts

@@ -80,6 +80,8 @@ export const summary_defaults: RepoSummary = {
   created_at: 0,
 }
 
+export type RepoPage = 'about' | 'issues' | 'proposals'
+
 export interface RepoReadme {
   md: string
   loading: boolean

src/lib/wrappers/RepoMenu.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+  import type { RepoPage } from '$lib/components/repo/type'
   import { issue_summaries } from '$lib/stores/Issues'
   import { proposal_summaries } from '$lib/stores/Proposals'
   import { selected_repo_readme } from '$lib/stores/repo'
 
-  export let selected_tab: '' | 'proposals' | 'issues' = ''
+  export let selected_tab: RepoPage = 'about'
   export let identifier = ''
 </script>
 
@@ -13,7 +14,7 @@
       <a
         href={`/repo/${identifier}`}
         class="tab"
-        class:tab-active={selected_tab === ''}
+        class:tab-active={selected_tab === 'about'}
       >
         About
       </a>

src/lib/wrappers/RepoPageWrapper.svelte

@@ -9,10 +9,11 @@
   import Container from '$lib/components/Container.svelte'
   import { ensureProposalSummaries } from '$lib/stores/Proposals'
   import { ensureIssueSummaries } from '$lib/stores/Issues'
-  import RepoMenu from '$lib/wrappers/RepoMenu.svelte'
+  import type { RepoPage } from '$lib/components/repo/type'
 
   export let identifier = ''
-  export let selected_tab: '' | 'issues' | 'proposals' = ''
+  export let selected_tab: RepoPage = 'about'
+  export let with_side_bar = true
 
   ensureSelectedRepoCollection(identifier)
   ensureProposalSummaries(identifier)
@@ -52,12 +53,11 @@
     </div>
   </Container>
 {:else}
-  <RepoHeader {...$selected_repo_event} />
-
+  <RepoHeader {...$selected_repo_event} {selected_tab} />
+  {#if with_side_bar}
     <Container>
       <div class="mt-2 md:flex">
         <div class="md:mr-2 md:w-2/3">
-        <RepoMenu {identifier} {selected_tab} />
           <slot />
         </div>
         <div class="prose ml-2 hidden w-1/3 md:flex">
@@ -65,4 +65,7 @@
         </div>
       </div>
     </Container>
+  {:else}
+    <slot />
+  {/if}
 {/if}

src/routes/repo/[repo_id]/+page.svelte

@@ -7,14 +7,13 @@
   export let data: { repo_id: string }
   let identifier = data.repo_id
 
-  let selected_tab: '' | 'issues' | 'proposals' = ''
   $: {
     if ($selected_repo_readme.failed === true)
       goto(`/repo/${identifier}/proposals`)
   }
 </script>
 
-<RepoPageWrapper {identifier} {selected_tab}>
+<RepoPageWrapper {identifier} selected_tab="about">
   <div class="my-3 rounded-lg border border-base-400">
     <div class="border-b border-base-400 bg-base-300 px-6 py-3">
       <h4 class="">README.md</h4>

src/routes/repo/[repo_id]/issue/[issue_id]/+page.svelte

@@ -9,11 +9,11 @@
     selected_issue_full,
     selected_issue_replies,
   } from '$lib/stores/Issue'
-  import RepoHeader from '$lib/components/repo/RepoHeader.svelte'
   import Thread from '$lib/wrappers/Thread.svelte'
   import Container from '$lib/components/Container.svelte'
   import ProposalHeader from '$lib/components/proposals/ProposalHeader.svelte'
   import ProposalDetails from '$lib/components/proposals/ProposalDetails.svelte'
+  import RepoPageWrapper from '$lib/wrappers/RepoPageWrapper.svelte'
 
   export let data: {
     repo_id: string
@@ -38,10 +38,11 @@
   }
 </script>
 
-{#if !repo_error}
-  <RepoHeader {...$selected_repo_event} />
-{/if}
-
+<RepoPageWrapper
+  identifier={repo_id}
+  with_side_bar={false}
+  selected_tab="issues"
+>
   {#if issue_error}
     <Container>
       <div role="alert" class="alert alert-error m-auto mt-6 w-full max-w-xs">
@@ -57,7 +58,8 @@
             d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
           /></svg
         >
-      <span>Error! cannot find Issue {repo_error ? 'or repo ' : ''}event</span>
+        <span>Error! cannot find Issue {repo_error ? 'or repo ' : ''}event</span
+        >
       </div>
     </Container>
   {:else}
@@ -86,3 +88,4 @@
       </div>
     </Container>
   {/if}
+</RepoPageWrapper>

src/routes/repo/[repo_id]/proposal/[proposal_id]/+page.svelte

@@ -10,10 +10,10 @@
     selected_proposal_replies,
   } from '$lib/stores/Proposal'
   import ProposalHeader from '$lib/components/proposals/ProposalHeader.svelte'
-  import RepoHeader from '$lib/components/repo/RepoHeader.svelte'
   import Thread from '$lib/wrappers/Thread.svelte'
   import ProposalDetails from '$lib/components/proposals/ProposalDetails.svelte'
   import Container from '$lib/components/Container.svelte'
+  import RepoPageWrapper from '$lib/wrappers/RepoPageWrapper.svelte'
 
   export let data: {
     repo_id: string
@@ -38,10 +38,11 @@
   }
 </script>
 
-{#if !repo_error}
-  <RepoHeader {...$selected_repo_event} />
-{/if}
-
+<RepoPageWrapper
+  identifier={repo_id}
+  with_side_bar={false}
+  selected_tab="proposals"
+>
   {#if proposal_error}
     <Container>
       <div role="alert" class="alert alert-error m-auto mt-6 w-full max-w-xs">
@@ -78,7 +79,7 @@
           </div>
         </div>
         <div class="prose ml-2 hidden w-1/3 lg:block">
-        <div role="alert" class="max-w-2 alert mt-3">
+          <div role="alert" class="alert mt-3 max-w-2">
             <div class="text-center">
               <div>
                 <svg
@@ -118,3 +119,4 @@
       </div>
     </Container>
   {/if}
+</RepoPageWrapper>