problem: rocket page layout sucks

src/components/rockets/RocketItem.svelte

@@ -1,28 +1,28 @@
 <script lang="ts">
   import { base } from "$app/paths";
+  import { consensusTipState } from "$lib/stores/nostrocket_state/master_state";
   import type { Rocket } from "$lib/stores/nostrocket_state/types";
-  import { AccordionItem, Tag } from "carbon-components-svelte";
+  import { StructuredListCell, StructuredListRow, Tag } from "carbon-components-svelte";
+  import { Report, Usb } from "carbon-icons-svelte";
+  import { get } from "svelte/store";
 
   export let rocket:Rocket|undefined = undefined
+  let problemText:string|undefined = undefined
+  let problemRoute:string = "#"
+  $: {
+    if (rocket && !problemText) {
+      problemText = get(consensusTipState).Problems.get(rocket.ProblemID)?.Title
+      problemRoute = base+"/problems/"+rocket.ProblemID
+    }
+  }
 
 </script>
 {#if rocket} 
-<AccordionItem>
-    <svelte:fragment slot="title">
-      <h3 class="problem-title">{#if !rocket.Consensus}<Tag type="red">UNCONFIRMED</Tag>{/if}
-        {rocket.Name}
-      </h3>
-
-      <div class="problem-summary">
-        <Tag>{rocket.Problems.size} Problems</Tag>
-      </div>
-    </svelte:fragment>
-        <p>
-          <a href="{base}/problems/rocket/{rocket.Name}">View Open Problems</a><br />
-          {#if rocket.ProblemID}<a href="{base}/problems/{rocket.ProblemID}">View the root problem for this Rocket</a>{:else}No Associated Problem{/if}
-          <br />
-        </p>
-        <p>Created By: {rocket.CreatedBy}</p>
-        <a href="{base}/rockets/{rocket.UID}">More...</a>
-  </AccordionItem>
+    <StructuredListRow>
+        <StructuredListCell noWrap><h3>{rocket.Name} <a href="{base}/rockets/{rocket.UID}"><Report /></a></h3></StructuredListCell>
+        <StructuredListCell>{#if !rocket.Consensus}<Tag type="red">UNCONFIRMED</Tag>{/if} <Tag interactive on:click={()=>{window.location.href=base+"/problems/rocket/"+rocket?.Name}}>{rocket.Problems.size} Problems</Tag></StructuredListCell>
+        <StructuredListCell>
+          {#if problemText}<a href="{base}/problems/{rocket.ProblemID}">{problemText}</a>{/if}        
+        </StructuredListCell>
+      </StructuredListRow>
   {/if}

src/lib/helpers/mundane.ts

@@ -7,6 +7,7 @@ import {
   differenceInMonths,
   differenceInSeconds, differenceInYears, format
 } from "date-fns";
+import { goto } from "$app/navigation";
 
 export function unixTimeNow() {
   return Math.floor(new Date().getTime() / 1000);
@@ -99,4 +100,10 @@ export const formatDateTime = (unixTimestamp: number): string => {
     return `${diffInYears} years ago`;
 
   return "";
-};
+};
+
+
+export function goBack(defaultRoute = '/') {
+  const ref = document.referrer;
+  goto(ref.length > 0 ? ref : defaultRoute)
+}

src/routes/rockets/+page.svelte

@@ -1,7 +1,7 @@
 <script>
   import { base } from "$app/paths";
   import { consensusTipState } from "$lib/stores/nostrocket_state/master_state";
-  import { Accordion, AccordionItem, Column, Row, Tag } from "carbon-components-svelte";
+  import { Accordion, AccordionItem, Column, Row, StructuredList, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListRow, Tag } from "carbon-components-svelte";
   import CreateRocket from "../../components/modals/CreateRocket.svelte";
   import RocketItem from "../../components/rockets/RocketItem.svelte";
   import { derived } from "svelte/store";
@@ -24,9 +24,15 @@
   </Column>
 </Row>
 <Row>
-  <Accordion>
-  {#each [...$sortedRockets] as [key, rocket]}
-  <RocketItem {rocket} />
-  {/each}
-</Accordion>
+<StructuredList condensed>
+
+  <StructuredListBody>
+    {#each [...$sortedRockets] as [key, rocket]}
+    <RocketItem {rocket} />
+    {/each}
+  </StructuredListBody>
+</StructuredList>
+
+
+
 </Row>