Big GUI improvements on Nostr rendering and fetchingpolwex/iris

5 files changed, 214 insertions, 185 deletions

diff --git a/gui/src/styles/Composer.css b/gui/src/styles/Composer.css
new file mode 100644
index 0000000..4fc7739
--- /dev/null
+++ b/gui/src/styles/Composer.css
@@ -0,0 +1,173 @@
+#composer {
+  padding: 16px;
+  display: flex;
+  gap: 0.75rem;
+  transition: all 0.3s ease;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+  width: 100%;
+
+  &.expanded {
+    padding: 20px 16px;
+    background: linear-gradient(to bottom, rgba(128, 128, 128, 0.05), transparent);
+  }
+
+  &.has-context {
+    min-height: 120px;
+  }
+
+  & .sigil {
+    width: 48px;
+    height: 48px;
+    flex-shrink: 0;
+
+    & img {
+      width: inherit;
+      border-radius: 50%;
+    }
+  }
+
+  & .composer-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  & .composer-context {
+    background: rgba(128, 128, 128, 0.08);
+    border-radius: 12px;
+    padding: 12px;
+    position: relative;
+    animation: slideDown 0.3s ease;
+
+    & .composer-snippet {
+      /* TODO it overflows to the right */
+      max-height: 200px;
+      overflow-y: auto;
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.05);
+
+
+      .trill-post {
+        /* width: 60%; */
+        /* margin: 0 auto; */
+      }
+    }
+
+    & #reply {
+      background: transparent;
+      padding: 0;
+    }
+  }
+
+  & .reply-context {
+    margin-bottom: 12px;
+    border-left: 3px solid var(--color-accent, #2a9d8f);
+    background: rgba(42, 157, 143, 0.08);
+  }
+
+  & .quote-context {
+    margin-top: 12px;
+    border-left: 3px solid var(--color-secondary, #e76f51);
+    background: rgba(231, 111, 81, 0.08);
+  }
+
+  & .quote-header {
+    margin-bottom: 12px;
+    padding: 8px 12px;
+    background: rgba(231, 111, 81, 0.08);
+    border-radius: 8px;
+    border-left: 3px solid var(--color-secondary, #e76f51);
+  }
+
+  & .context-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+
+    & .context-type {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 0.85rem;
+      color: var(--color-text-muted, #888);
+      font-weight: 500;
+    }
+
+    & .clear-context {
+      background: none;
+      border: none;
+      color: var(--color-text-muted, #888);
+      cursor: pointer;
+      font-size: 1.5rem;
+      line-height: 1;
+      padding: 0;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      transition: all 0.2s;
+
+      &:hover {
+        background: rgba(128, 128, 128, 0.2);
+        color: var(--color-text);
+      }
+    }
+  }
+
+  & .quote-header .context-header {
+    margin-bottom: 0;
+  }
+
+  & .composer-input-row {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  & input {
+    background-color: transparent;
+    color: var(--color-text);
+    flex-grow: 1;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    padding: 8px 0;
+    border-bottom: 2px solid transparent;
+    transition: border-color 0.2s;
+
+    &:focus {
+      border-bottom-color: var(--color-accent, #2a9d8f);
+    }
+
+    &::placeholder {
+      color: var(--color-text-muted, #888);
+    }
+  }
+
+  & .post-btn {
+    padding: 8px 20px;
+    background: var(--color-accent, #2a9d8f);
+    color: white;
+    border: none;
+    border-radius: 20px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+
+    &:hover:not(:disabled) {
+      background: var(--color-accent-hover, #238b7f);
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(42, 157, 143, 0.3);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
\ No newline at end of file
diff --git a/gui/src/styles/UserModal.css b/gui/src/styles/UserModal.css
index e976b38..09fae13 100644
--- a/gui/src/styles/UserModal.css
+++ b/gui/src/styles/UserModal.css
@@ -4,9 +4,9 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
-  min-width: 400px;
-  max-width: 500px;
-  padding: 0;
+  /* min-width: 400px; */
+  /* max-width: 500px; */
+  padding: 1rem;
   overflow: hidden;
 }
 
diff --git a/gui/src/styles/feed.css b/gui/src/styles/feed.css
index 02d64db..f4c1050 100644
--- a/gui/src/styles/feed.css
+++ b/gui/src/styles/feed.css
@@ -88,7 +88,7 @@
   border: 1px solid var(--color-border);
 }
 
-.resync-btn-small {
+.btn-small {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -101,12 +101,12 @@
   color: var(--color-text);
 }
 
-.resync-btn-small:hover:not(:disabled) {
+.btn-small:hover:not(:disabled) {
   background: var(--color-surface-hover);
   border-color: var(--color-primary);
 }
 
-.resync-btn-small:disabled {
+.btn-small:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
diff --git a/gui/src/styles/styles.css b/gui/src/styles/styles.css
index 41b3c4d..d9fc06c 100644
--- a/gui/src/styles/styles.css
+++ b/gui/src/styles/styles.css
@@ -152,8 +152,12 @@ t .red {
 /* styles */
 
 /* common */
-html {
+* {
+
   box-sizing: border-box;
+}
+
+html {
   color: var(--text-color);
   background-color: var(--background-color);
 }
@@ -162,7 +166,8 @@ html,
 body,
 #root,
 #mobile-ui {
-  height: 100%;
+  height: 100vh;
+  max-height: 100vh;
   width: 100vw;
   overflow: hidden;
   /* no scrolling!!!*/
@@ -171,7 +176,7 @@ body,
 *,
 *:before,
 *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 body {
@@ -201,8 +206,7 @@ h6 {
 }
 
 #root {
-  margin: 1rem 2rem;
-  height: 100%;
+  padding: 1rem 2rem;
   overflow-y: auto;
   font-family: "Inter";
 
@@ -211,6 +215,11 @@ h6 {
 
   & #left-menu {
     margin-right: 1rem;
+    height: 100%;
+    position: sticky;
+    left: 0;
+    top: 2%;
+
 
     #logo {
       display: flex;
@@ -242,8 +251,9 @@ h6 {
 
   & main {
     width: 726px;
-    margin: auto;
-    height: 100vh;
+    margin: 0 auto;
+    height: 95%;
+    /* i hate this */
 
     & #top-tabs {
       display: flex;
@@ -264,176 +274,8 @@ h6 {
       margin-top: 1rem;
       border: 1px solid grey;
       border-radius: 0.75rem;
-
-      & #composer {
-        padding: 16px;
-        display: flex;
-        gap: 0.75rem;
-        transition: all 0.3s ease;
-        border-bottom: 1px solid rgba(128, 128, 128, 0.2);
-
-        &.expanded {
-          padding: 20px 16px;
-          background: linear-gradient(to bottom, rgba(128, 128, 128, 0.05), transparent);
-        }
-
-        &.has-context {
-          min-height: 120px;
-        }
-
-        & .sigil {
-          width: 48px;
-          height: 48px;
-          flex-shrink: 0;
-
-          & img {
-            width: inherit;
-            border-radius: 50%;
-          }
-        }
-
-        & .composer-content {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-        }
-
-        & .composer-context {
-          background: rgba(128, 128, 128, 0.08);
-          border-radius: 12px;
-          padding: 12px;
-          position: relative;
-          animation: slideDown 0.3s ease;
-
-          & .composer-snippet {
-            max-height: 200px;
-            overflow-y: auto;
-            border-radius: 8px;
-            background: rgba(255, 255, 255, 0.05);
-
-            &>div {
-              padding: 8px;
-            }
-          }
-
-          & #reply {
-            background: transparent;
-            padding: 0;
-          }
-        }
-
-        & .reply-context {
-          margin-bottom: 12px;
-          border-left: 3px solid var(--color-accent, #2a9d8f);
-          background: rgba(42, 157, 143, 0.08);
-        }
-
-        & .quote-context {
-          margin-top: 12px;
-          border-left: 3px solid var(--color-secondary, #e76f51);
-          background: rgba(231, 111, 81, 0.08);
-        }
-
-        & .quote-header {
-          margin-bottom: 12px;
-          padding: 8px 12px;
-          background: rgba(231, 111, 81, 0.08);
-          border-radius: 8px;
-          border-left: 3px solid var(--color-secondary, #e76f51);
-        }
-
-        & .context-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 8px;
-
-          & .context-type {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            font-size: 0.85rem;
-            color: var(--color-text-muted, #888);
-            font-weight: 500;
-          }
-
-          & .clear-context {
-            background: none;
-            border: none;
-            color: var(--color-text-muted, #888);
-            cursor: pointer;
-            font-size: 1.5rem;
-            line-height: 1;
-            padding: 0;
-            width: 24px;
-            height: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50%;
-            transition: all 0.2s;
-
-            &:hover {
-              background: rgba(128, 128, 128, 0.2);
-              color: var(--color-text);
-            }
-          }
-        }
-
-        & .quote-header .context-header {
-          margin-bottom: 0;
-        }
-
-        & .composer-input-row {
-          display: flex;
-          gap: 12px;
-          align-items: center;
-        }
-
-        & input {
-          background-color: transparent;
-          color: var(--color-text);
-          flex-grow: 1;
-          border: none;
-          outline: none;
-          font-size: 1rem;
-          padding: 8px 0;
-          border-bottom: 2px solid transparent;
-          transition: border-color 0.2s;
-
-          &:focus {
-            border-bottom-color: var(--color-accent, #2a9d8f);
-          }
-
-          &::placeholder {
-            color: var(--color-text-muted, #888);
-          }
-        }
-
-        & .post-btn {
-          padding: 8px 20px;
-          background: var(--color-accent, #2a9d8f);
-          color: white;
-          border: none;
-          border-radius: 20px;
-          font-weight: 600;
-          cursor: pointer;
-          transition: all 0.2s;
-          white-space: nowrap;
-
-          &:hover:not(:disabled) {
-            background: var(--color-accent-hover, #238b7f);
-            transform: translateY(-1px);
-            box-shadow: 0 2px 8px rgba(42, 157, 143, 0.3);
-          }
-
-          &:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-          }
-        }
-      }
+      height: 100%;
+      overflow-y: auto;
 
       @keyframes slideDown {
         from {
@@ -581,8 +423,8 @@ h6 {
     }
 
     .body {
-      max-height: 300px;
-      overflow-y: auto;
+      max-height: 500px;
+      overflow-y: hidden;
     }
 
     & footer {
diff --git a/gui/src/styles/trill.css b/gui/src/styles/trill.css
index 0b1650c..dc08f48 100644
--- a/gui/src/styles/trill.css
+++ b/gui/src/styles/trill.css
@@ -264,6 +264,10 @@
 }
 
 /* threads */
+#thread-head {
+  font-size: 1.3rem;
+}
+
 .trill-reply-thread {
   margin-top: 1rem;
 }
@@ -272,6 +276,16 @@
   border-top: 1px solid black;
 }
 
+.minithread {
+  margin-top: 1rem;
+
+  .tail {
+    .trill-post {
+      border: unset !important;
+    }
+  }
+}
+
 /* footer */
 
 .footer-wrapper {