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,17 +53,19 @@
     </div>
   </Container>
 {:else}
-  <RepoHeader {...$selected_repo_event} />
+  <RepoHeader {...$selected_repo_event} {selected_tab} />
-
+  {#if with_side_bar}
-  <Container>
+    <Container>
-    <div class="mt-2 md:flex">
+      <div class="mt-2 md:flex">
-      <div class="md:mr-2 md:w-2/3">
+        <div class="md:mr-2 md:w-2/3">
-        <RepoMenu {identifier} {selected_tab} />
+          <slot />
-        <slot />
+        </div>
-      </div>
+        <div class="prose ml-2 hidden w-1/3 md:flex">
-      <div class="prose ml-2 hidden w-1/3 md:flex">
+          <RepoDetails repo_id={identifier} />
-        <RepoDetails repo_id={identifier} />
+        </div>
       </div>
-    </div>
+    </Container>
-  </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,51 +38,54 @@
   }
 </script>
 
-{#if !repo_error}
+<RepoPageWrapper
-  <RepoHeader {...$selected_repo_event} />
+  identifier={repo_id}
-{/if}
+  with_side_bar={false}
-
+  selected_tab="issues"
-{#if issue_error}
+>
-  <Container>
+  {#if issue_error}
-    <div role="alert" class="alert alert-error m-auto mt-6 w-full max-w-xs">
+    <Container>
-      <svg
+      <div role="alert" class="alert alert-error m-auto mt-6 w-full max-w-xs">
-        xmlns="http://www.w3.org/2000/svg"
+        <svg
-        class="h-6 w-6 shrink-0 stroke-current"
+          xmlns="http://www.w3.org/2000/svg"
-        fill="none"
+          class="h-6 w-6 shrink-0 stroke-current"
-        viewBox="0 0 24 24"
+          fill="none"
-        ><path
+          viewBox="0 0 24 24"
-          stroke-linecap="round"
+          ><path
-          stroke-linejoin="round"
+            stroke-linecap="round"
-          stroke-width="2"
+            stroke-linejoin="round"
-          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+            stroke-width="2"
-        /></svg
+            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>
+        >
-    </div>
+        <span>Error! cannot find Issue {repo_error ? 'or repo ' : ''}event</span
-  </Container>
+        >
-{:else}
-  <ProposalHeader {...$selected_issue_full.summary} />
-  <Container>
-    <div class="mx-auto max-w-6xl lg:flex">
-      <div class="md:mr-2 lg:w-2/3">
-        <div class="max-w-4xl">
-          {#if $selected_issue_full.issue_event}
-            <Thread
-              type="issue"
-              event={$selected_issue_full.issue_event}
-              replies={$selected_issue_replies}
-            />
-          {/if}
-        </div>
       </div>
-      <div class="prose ml-2 hidden w-1/3 lg:flex">
+    </Container>
-        <ProposalDetails
+  {:else}
-          type="issue"
+    <ProposalHeader {...$selected_issue_full.summary} />
-          summary={$selected_issue_full.summary}
+    <Container>
-          labels={$selected_issue_full.labels}
+      <div class="mx-auto max-w-6xl lg:flex">
-          loading={$selected_issue_full.loading}
+        <div class="md:mr-2 lg:w-2/3">
-        />
+          <div class="max-w-4xl">
+            {#if $selected_issue_full.issue_event}
+              <Thread
+                type="issue"
+                event={$selected_issue_full.issue_event}
+                replies={$selected_issue_replies}
+              />
+            {/if}
+          </div>
+        </div>
+        <div class="prose ml-2 hidden w-1/3 lg:flex">
+          <ProposalDetails
+            type="issue"
+            summary={$selected_issue_full.summary}
+            labels={$selected_issue_full.labels}
+            loading={$selected_issue_full.loading}
+          />
+        </div>
       </div>
-    </div>
+    </Container>
-  </Container>
+  {/if}
-{/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,83 +38,85 @@
   }
 </script>
 
-{#if !repo_error}
+<RepoPageWrapper
-  <RepoHeader {...$selected_repo_event} />
+  identifier={repo_id}
-{/if}
+  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">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 shrink-0 stroke-current"
+          fill="none"
+          viewBox="0 0 24 24"
+          ><path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            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 Proposal {repo_error ? 'or repo ' : ''}event</span
+        >
+      </div>
+    </Container>
+  {:else}
+    <ProposalHeader {...$selected_proposal_full.summary} />
+    <Container>
+      <div class="mx-auto max-w-6xl lg:flex">
+        <div class="lg:w-2/3 xl:mr-2">
+          <div class="max-w-4xl">
+            {#if $selected_proposal_full.proposal_event}
+              <Thread
+                type="proposal"
+                event={$selected_proposal_full.proposal_event}
+                replies={$selected_proposal_replies}
+              />
+            {/if}
+          </div>
+        </div>
+        <div class="prose ml-2 hidden w-1/3 lg:block">
+          <div role="alert" class="alert mt-3 max-w-2">
+            <div class="text-center">
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  class="inline h-6 w-6 shrink-0 stroke-info"
+                  ><path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  ></path></svg
+                >
+                <h3 class="prose mx-1 inline text-sm font-bold">
+                  view in local git repository
+                </h3>
+              </div>
 
-{#if proposal_error}
+              <p class="mx-0 mb-1 mt-2 text-xs">
-  <Container>
+                <a href="/ngit">install ngit</a>, run
-    <div role="alert" class="alert alert-error m-auto mt-6 w-full max-w-xs">
+                <span class="rounded bg-neutral p-1 font-mono"
-      <svg
+                  ><span class="py-3">ngit list</span></span
-        xmlns="http://www.w3.org/2000/svg"
+                > from the local repository and select the proposal title
-        class="h-6 w-6 shrink-0 stroke-current"
+              </p>
-        fill="none"
+            </div>
-        viewBox="0 0 24 24"
+          </div>
-        ><path
+          <div class="block">
-          stroke-linecap="round"
+            <ProposalDetails
-          stroke-linejoin="round"
-          stroke-width="2"
-          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 Proposal {repo_error ? 'or repo ' : ''}event</span
-      >
-    </div>
-  </Container>
-{:else}
-  <ProposalHeader {...$selected_proposal_full.summary} />
-  <Container>
-    <div class="mx-auto max-w-6xl lg:flex">
-      <div class="lg:w-2/3 xl:mr-2">
-        <div class="max-w-4xl">
-          {#if $selected_proposal_full.proposal_event}
-            <Thread
               type="proposal"
-              event={$selected_proposal_full.proposal_event}
+              summary={$selected_proposal_full.summary}
-              replies={$selected_proposal_replies}
+              labels={$selected_proposal_full.labels}
+              loading={$selected_proposal_full.loading}
             />
-          {/if}
-        </div>
-      </div>
-      <div class="prose ml-2 hidden w-1/3 lg:block">
-        <div role="alert" class="max-w-2 alert mt-3">
-          <div class="text-center">
-            <div>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                class="inline h-6 w-6 shrink-0 stroke-info"
-                ><path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                ></path></svg
-              >
-              <h3 class="prose mx-1 inline text-sm font-bold">
-                view in local git repository
-              </h3>
-            </div>
-
-            <p class="mx-0 mb-1 mt-2 text-xs">
-              <a href="/ngit">install ngit</a>, run
-              <span class="rounded bg-neutral p-1 font-mono"
-                ><span class="py-3">ngit list</span></span
-              > from the local repository and select the proposal title
-            </p>
           </div>
         </div>
-        <div class="block">
-          <ProposalDetails
-            type="proposal"
-            summary={$selected_proposal_full.summary}
-            labels={$selected_proposal_full.labels}
-            loading={$selected_proposal_full.loading}
-          />
-        </div>
       </div>
-    </div>
+    </Container>
-  </Container>
+  {/if}
-{/if}
+</RepoPageWrapper>