[WiP] tree comments

src/components/Article/Comment.module.scss

@@ -9,32 +9,11 @@
     margin-bottom: 0;
   }
 
-  .comment {
+  $levels: 0, 1, 2, 3, 4;
-    &:before,
+  $padding: 1rem;
-    &:after {
+  @each $level in $levels {
-      content: '';
+    &.commentLevel-#{level} {
-      left: 0;
+      padding-left: $padding * $level;
-      position: absolute;
-    }
-
-    &:before {
-      border-bottom: 2px solid #ccc;
-      border-left: 2px solid #ccc;
-      border-radius: 0 0 0 1.2rem;
-      top: -1rem;
-      height: 2.4rem;
-      width: 1.2rem;
-    }
-
-    &:after {
-      background: #ccc;
-      height: 100%;
-      top: 0;
-      width: 2px;
-    }
-
-    &:last-child:after {
-      display: none;
     }
   }
 

src/components/Article/Comment.tsx

@@ -51,8 +51,10 @@ export default (props: Props) => {
     formatDate(new Date(comment()?.createdAt), { hour: 'numeric', minute: 'numeric' })
   )
 
+  console.log('!!! lvl:', props.level)
   return (
-    <li class={clsx(styles.comment, { [styles[`commentLevel${props.level}`]]: Boolean(props.level) })}>
+    <li class={clsx(styles.comment, { [styles[`commentLevel-${props.level}`]]: props.level })}>
+      {props.level}
       <Show when={!!body()}>
         <div class={styles.commentContent}>
           <Show

src/graphql/types.gen.ts

@@ -238,7 +238,7 @@ export type MutationDeleteMessageArgs = {
 }
 
 export type MutationDeleteReactionArgs = {
-  id: Scalars['Int']
+  reaction: Scalars['Int']
 }
 
 export type MutationDeleteShoutArgs = {