problem: problem layout kind of sux

package.json

@@ -27,6 +27,7 @@
     "prettier-plugin-svelte": "^2.10.1",
     "svelte": "^4.2.0",
     "svelte-check": "^3.4.3",
+    "svelte-motion": "^0.12.0",
     "tailwindcss": "^3.3.5",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",

src/components/elements/ColumnTile.svelte

@@ -0,0 +1,6 @@
+<script>
+  import { Column, Tile } from "carbon-components-svelte";
+  export let sizes = {lg:3}
+
+</script>
+<Column><Tile></Tile></Column>

src/components/problems/ChatLayout.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { base } from "$app/paths";
+  import { consensusTipState } from "$lib/stores/nostrocket_state/master_state";
+  import type { Problem } from "$lib/stores/nostrocket_state/types";
+  import { Column, Row, Tag, Tile } from "carbon-components-svelte";
+  import { ParentChild, XAxis } from "carbon-icons-svelte";
+  import { rootProblem } from "../../settings";
+  import ChatLayoutProblemHome from "./ChatLayoutProblemHome.svelte";
+  export let selected: Problem;
+
+  function getParents(pr: Problem) {
+    let parentSet = new Set<Problem>();
+    if (pr.UID == rootProblem) {
+      parentSet.add(pr);
+    }
+    for (let p of pr.Parents) {
+      let parentProblem = $consensusTipState.Problems.get(p);
+      if (parentProblem) {
+        parentSet.add(parentProblem);
+      }
+    }
+    return [...parentSet];
+  }
+</script>
+
+<Row>
+  <Column noGutter lg={16}>
+    {#each getParents(selected) as p}
+      <Tile
+        on:click={() => {
+          goto(`${base}/problems/${p.UID}`);
+        }}
+        light={selected.UID == p.UID}
+        style="cursor:pointer;padding:6px;color:steelblue;font-weight:bold;"
+        ><h4>{p.Title}</h4>
+        <p>{p.Summary}</p>
+
+        <!-- <Tag style="display:inline-block;float:right;" size="sm"
+          ><ParentChild />{p.Children.size}</Tag
+        > -->
+      </Tile>
+    {/each}
+  </Column></Row
+>
+<Row
+  ><Column noGutter lg={4}>
+    {#each getParents(selected) as p}
+      {#each p.FullChildren as c}
+        <Tile
+          on:click={() => {
+            goto(`${base}/problems/${c.UID}`);
+          }}
+          light={selected.UID == c.UID}
+          style="cursor:pointer;margin-top:2px;padding:6px;"
+          >{c.Title}
+          {#if c.Children.size > 0}<Tag style="float:right;" size="sm"
+              ><ParentChild />{c.Children.size}</Tag
+            >{/if}
+        </Tile>
+      {/each}
+    {/each}
+  </Column>
+
+  <Column noGutter lg={12}>
+    <ChatLayoutProblemHome {selected} />
+    {#each selected.FullChildren as c}
+      <Tile
+        on:click={() => {
+          goto(`${base}/problems/${c.UID}`);
+        }}
+        light={selected.UID == c.UID}
+        style="cursor:pointer;margin-left:2px;margin-top:2px;padding:6px;"
+        ><XAxis />{c.Title}</Tile
+      >
+    {/each}
+  </Column>
+</Row>

src/components/problems/ChatLayoutProblemHome.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { Problem } from "$lib/stores/nostrocket_state/types";
+  import { Button, ButtonSet, Tag, Tile } from "carbon-components-svelte";
+  import CommentUser from "../comments/CommentUser.svelte";
+  import { ParentChild, Rocket } from "carbon-icons-svelte";
+  import { makeHtml } from "$lib/helpers/mundane";
+  import { consensusTipState } from "$lib/stores/nostrocket_state/master_state";
+  import Close from "$lib/icons/Close.svelte";
+  import CommentsWrapper from "../comments/CommentsWrapper.svelte";
+  export let selected: Problem;
+
+  function pubkey(p: Problem) {
+    return selected.CreatedBy;
+  }
+
+  let problemStatusColor = "green";
+  let problemStatusDescription = "";
+  let rocketName: string | undefined;
+  $: {
+    //depthColor = getDepthColor(selected.Depth);
+    if ($consensusTipState.RocketMap.get(selected.Rocket)?.Name) {
+      rocketName = $consensusTipState.RocketMap.get(selected.Rocket)?.Name;
+    }
+    problemStatusDescription = selected.Status;
+    switch (selected.Status) {
+      case "open":
+        problemStatusColor = "green";
+        break;
+      case "claimed":
+        problemStatusColor = "gray";
+        break;
+      case "patched":
+        problemStatusColor = "cyan";
+        break;
+      case "closed":
+        problemStatusColor = "red";
+        break;
+    }
+    if (selected.Status == "open" && selected.Children.size > 0) {
+      problemStatusColor = "purple";
+      problemStatusDescription = "open children";
+    }
+  }
+</script>
+
+<Tile light style="margin-left:2px;margin-top:2px;">
+  <h4>{selected.Title}</h4>
+  <p>{selected.Summary}</p>
+  <Tile style="margin-top:1%;">
+    <CommentUser pubkey={pubkey(selected)} />
+    {#if selected.Children.size > 0}<Tag type="green"
+        ><ParentChild />{selected.Children.size}</Tag
+      >{/if}
+    <Tag type={problemStatusColor}>{problemStatusDescription}</Tag>
+    <Tag type="teal">{rocketName}</Tag>
+    <ButtonSet>
+      {#if selected.Status == "open" && selected.Children.size == 0}<Button
+          size="small"
+          icon={Rocket}>WORK ON THIS NOW</Button
+        >{/if}
+      {#if selected.Status != "closed" && selected.Children.size == 0}<Button
+          kind="danger"
+          size="small"
+          icon={Close}>CLOSE</Button
+        >{/if}
+    </ButtonSet>
+  </Tile>
+  {#if selected.FullText?.length > 0}
+    {@html makeHtml(selected.FullText)}
+  {/if}
+  {#if selected.FullText?.length > 0}{/if}
+  <Tile style="margin-top:10px;">
+  <Tile light><h6>DISCUSSION</h6>
+    <CommentsWrapper problem={selected} parentId={selected.UID} isRoot={true} />
+  </Tile>
+</Tile>
+</Tile>