tidy stylesheets and improve replies styling

9 files changed, 382 insertions, 368 deletions

diff --git a/Digitigrade/Model/Note.php b/Digitigrade/Model/Note.php
index 277b503..a4891a3 100644
--- a/Digitigrade/Model/Note.php
+++ b/Digitigrade/Model/Note.php
@@ -112,6 +112,8 @@ class Note extends PushableModel implements TimelineIncludeable {
     }
 
     public static function findAllInThread(Note $threadApex, ?int $limit = null, int $offset = 0): array {
+        if (isset($limit))
+            $limit--; // to account for adding the note afterwards
         $notes = self::findAllWhere('thread_apex = ? AND deleted = false', [$threadApex->id], $limit, $offset, 'created ASC');
         array_splice($notes, 0, 0, [$threadApex]); // since the apex itself has threadApex = null
         return $notes;
diff --git a/static/form.css b/static/form.css
new file mode 100644
index 0000000..91f755b
--- /dev/null
+++ b/static/form.css
@@ -0,0 +1,71 @@
+form {
+  border: 1px solid #3334;
+  background: #9892;
+  border-radius: 8px;
+  margin: 16px;
+  padding: 16px;
+  display: grid;
+  grid-auto-flow: row;
+  gap: 8px;
+  max-width: max-content;
+
+  label:has(+ input, + textarea) {
+    display: block;
+    font-size: 10pt;
+    color: #555;
+  }
+  input:not([type="checkbox"]),
+  textarea {
+    display: block;
+    border: 1px solid #3334;
+    border-radius: 8px;
+    margin: 8px 0;
+    padding: 8px;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background: #fff;
+    width: min(60vw, 24em, calc(100% - 16px));
+  }
+  textarea {
+    resize: vertical;
+  }
+  button {
+    background: #3b005e;
+    color: #fff;
+    font-family: inherit;
+    font-size: inherit;
+    border-radius: 8px;
+    border: none;
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+    cursor: pointer;
+    &:disabled {
+      opacity: 80%;
+      cursor: default;
+    }
+  }
+  .error {
+    background: #f004;
+    border: 1px solid #f007;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 0;
+  }
+
+  &.noteReplyForm {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    margin-top: 8px;
+    max-width: 100%;
+    input:not([type="checkbox"]),
+    textarea,
+    button {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
+}
diff --git a/static/misc.css b/static/misc.css
new file mode 100644
index 0000000..20d8da2
--- /dev/null
+++ b/static/misc.css
@@ -0,0 +1,40 @@
+.alertbox {
+  border: 1px solid;
+  border-radius: 8px;
+  margin: 16px;
+  padding: 16px;
+  &.info {
+    border-color: #23f4;
+    background: #5673ff44;
+  }
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+button.icon {
+  border: none;
+  background: none;
+  aspect-ratio: 1;
+  margin: 0;
+  padding: 0;
+  &.active {
+    font-variation-settings: "FILL" 1;
+  }
+}
+
+a.icon {
+  color: inherit;
+  text-decoration: none;
+  font-size: 24px;
+}
+
+span.inlineIcon {
+  font-size: inherit;
+  color: inherit;
+}
+
+[hidden] {
+  display: none;
+}
diff --git a/static/note.css b/static/note.css
new file mode 100644
index 0000000..7795882
--- /dev/null
+++ b/static/note.css
@@ -0,0 +1,121 @@
+.timelineReason {
+  background: #fee4;
+  border: 1px solid #3b005e44;
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  margin: 16px 16px -16px 16px;
+  padding: 8px;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  align-items: center;
+  gap: 8px;
+
+  .icon {
+    font-size: 24px;
+  }
+  a {
+    text-decoration: none;
+    font-weight: bold;
+    color: inherit;
+  }
+
+  + article.note {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+article.note {
+  background: #fee4;
+  border: 1px solid #3b005e44;
+  border-radius: 8px;
+  margin: 16px;
+  padding: 16px;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 16px;
+
+  img.avatar {
+    width: 64px;
+    aspect-ratio: 1;
+  }
+
+  &.selected {
+    background: #ebf4;
+  }
+
+  .content {
+    font-size: 12pt;
+    padding: 4px 0;
+    .selected & {
+      font-size: 16pt;
+    }
+  }
+
+  .infoLine {
+    display: grid;
+    grid-template-columns: max-content 1fr max-content;
+    align-items: baseline;
+    margin-bottom: 4px;
+    gap: 8px;
+
+    .authorName {
+      font-weight: bold;
+    }
+    .authorHandle,
+    .timestamp {
+      font-size: 10pt;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    a.timestamp {
+      color: inherit;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .replyInfo a {
+    font-size: 10pt;
+    color: #555;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .buttons {
+    margin-top: 8px;
+    padding: 0;
+    display: grid;
+    grid-auto-flow: column;
+    gap: 16px;
+    width: max-content;
+
+    button {
+      width: 24px;
+      font-size: 24px;
+      color: #3b005e44;
+      cursor: pointer;
+
+      &:disabled {
+        opacity: 0.5;
+      }
+
+      &.like.active {
+        color: #8c22d8;
+      }
+      &.dislike.active {
+        color: #c02e2e;
+      }
+      &.reshare.active {
+        color: #21a821;
+      }
+      &.reply.active {
+        color: #0761b6;
+      }
+    }
+  }
+}
diff --git a/static/profile.css b/static/profile.css
new file mode 100644
index 0000000..028c69c
--- /dev/null
+++ b/static/profile.css
@@ -0,0 +1,26 @@
+.fullProfile {
+  border-radius: 8px;
+  margin: 16px;
+  padding: 16px;
+  border: 1px solid #23f4;
+  background: #e6eaff44;
+
+  .basicInfo {
+    display: grid;
+    grid-template-columns: max-content 1fr max-content;
+    gap: 16px;
+
+    img.avatar {
+      width: 96px;
+      aspect-ratio: 1;
+    }
+    .displayName {
+      font-size: 16pt;
+      font-weight: bold;
+    }
+    .handle,
+    .joinedDate {
+      font-size: 10pt;
+    }
+  }
+}
diff --git a/static/skeleton.css b/static/skeleton.css
new file mode 100644
index 0000000..a7b7009
--- /dev/null
+++ b/static/skeleton.css
@@ -0,0 +1,110 @@
+html,
+body {
+  background: #fdf5ff;
+  color: #0f070f;
+  margin: 0;
+  padding: 0;
+  font-family: "DM Sans", sans-serif;
+  font-size: 12pt;
+  display: grid;
+  grid-template-rows: max-content 1fr;
+  justify-items: center;
+  min-height: 100vh;
+  width: 100%;
+}
+
+header {
+  background: #3b005e;
+  color: white;
+  position: sticky;
+  top: 0;
+  padding: 8px;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+#siteTitle {
+  font-weight: bold;
+}
+
+nav {
+  width: min(800px, 100%);
+  height: 32px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr max-content 1fr;
+  align-items: center;
+
+  > * {
+    margin: 0 8px;
+  }
+
+  > :last-child {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    align-items: center;
+    justify-self: end;
+    gap: 8px;
+  }
+
+  ul {
+    list-style: none;
+    display: inline;
+    padding: 0;
+    > li {
+      display: inline;
+      > .navlink {
+        border-radius: 4px;
+        background: #fff3;
+        padding: 4px 8px;
+        color: white;
+        text-decoration: none;
+        &.disabled {
+          opacity: 0.6;
+        }
+      }
+    }
+  }
+  img.avatar {
+    width: 32px;
+    aspect-ratio: 1;
+  }
+}
+
+main {
+  width: min(1300px, 100%);
+  display: grid;
+  grid-template-columns: 1fr min(700px, 100%) 1fr;
+  height: 100%;
+  #leftPane,
+  #rightPane {
+    position: sticky;
+    top: 56px;
+    height: max-content;
+  }
+  @media (width < 1300px) {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+  }
+}
+
+h1 {
+  margin: 32px 16px;
+  padding: 0;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #5554;
+  margin: 0px 16px;
+}
+
+.placeholder {
+  font-style: italic;
+  color: #555;
+  text-align: center;
+}
diff --git a/static/style.css b/static/style.css
index 698113d..da65e4a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,367 +1,5 @@
-html,
-body {
-  background: #fdf5ff;
-  color: #0f070f;
-  margin: 0;
-  padding: 0;
-  font-family: "DM Sans", sans-serif;
-  font-size: 12pt;
-  display: grid;
-  grid-template-rows: max-content 1fr;
-  justify-items: center;
-  min-height: 100vh;
-  width: 100%;
-}
-
-header {
-  background: #3b005e;
-  color: white;
-  position: sticky;
-  top: 0;
-  padding: 8px;
-  margin-bottom: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-#siteTitle {
-  font-weight: bold;
-}
-
-nav {
-  width: min(800px, 100%);
-  height: 32px;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: 1fr max-content 1fr;
-  align-items: center;
-
-  > * {
-    margin: 0 8px;
-  }
-
-  > :last-child {
-    display: grid;
-    grid-template-columns: 1fr max-content;
-    align-items: center;
-    justify-self: end;
-    gap: 8px;
-  }
-
-  ul {
-    list-style: none;
-    display: inline;
-    padding: 0;
-    > li {
-      display: inline;
-      > .navlink {
-        border-radius: 4px;
-        background: #fff3;
-        padding: 4px 8px;
-        color: white;
-        text-decoration: none;
-        &.disabled {
-          opacity: 0.6;
-        }
-      }
-    }
-  }
-  img.avatar {
-    width: 32px;
-    aspect-ratio: 1;
-  }
-}
-
-main {
-  width: min(1300px, 100%);
-  display: grid;
-  grid-template-columns: 1fr min(700px, 100%) 1fr;
-  height: 100%;
-  #leftPane,
-  #rightPane {
-    position: sticky;
-    top: 56px;
-    height: max-content;
-  }
-  @media (width < 1300px) {
-    grid-auto-flow: row;
-    grid-template-columns: 1fr;
-  }
-}
-
-h1 {
-  margin: 32px 16px;
-  padding: 0;
-}
-
-hr {
-  border: none;
-  border-top: 1px solid #5554;
-  margin: 0px 16px;
-}
-
-.placeholder {
-  font-style: italic;
-  color: #555;
-  text-align: center;
-}
-
-.timelineReason {
-  background: #fee4;
-  border: 1px solid #3b005e44;
-  border-bottom: none;
-  border-radius: 8px 8px 0 0;
-  margin: 16px 16px -16px 16px;
-  padding: 8px;
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  align-items: center;
-  gap: 8px;
-
-  .icon {
-    font-size: 24px;
-  }
-  a {
-    text-decoration: none;
-    font-weight: bold;
-    color: inherit;
-  }
-
-  + article.note {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}
-
-article.note {
-  background: #fee4;
-  border: 1px solid #3b005e44;
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 16px;
-
-  img.avatar {
-    width: 64px;
-    aspect-ratio: 1;
-  }
-
-  &.selected {
-    background: #ebf4;
-  }
-
-  .content {
-    font-size: 12pt;
-    padding: 4px 0;
-    .selected & {
-      font-size: 16pt;
-    }
-  }
-
-  .infoLine {
-    display: grid;
-    grid-template-columns: max-content 1fr max-content;
-    align-items: baseline;
-    margin-bottom: 4px;
-    gap: 8px;
-
-    .authorName {
-      font-weight: bold;
-    }
-    .authorHandle,
-    .timestamp {
-      font-size: 10pt;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-    a.timestamp {
-      color: inherit;
-      text-decoration: none;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .replyInfo a {
-    font-size: 10pt;
-    color: #555;
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .buttons {
-    margin-top: 8px;
-    padding: 0;
-    display: grid;
-    grid-auto-flow: column;
-    gap: 16px;
-    width: max-content;
-
-    button {
-      width: 24px;
-      font-size: 24px;
-      color: #3b005e44;
-      cursor: pointer;
-
-      &:disabled {
-        opacity: 0.5;
-      }
-
-      &.like.active {
-        color: #8c22d8;
-      }
-      &.dislike.active {
-        color: #c02e2e;
-      }
-      &.reshare.active {
-        color: #21a821;
-      }
-      &.reply.active {
-        color: #0761b6;
-      }
-    }
-  }
-}
-
-.alertbox {
-  border: 1px solid;
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
-  &.info {
-    border-color: #23f4;
-    background: #5673ff44;
-  }
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-button.icon {
-  border: none;
-  background: none;
-  aspect-ratio: 1;
-  margin: 0;
-  padding: 0;
-  &.active {
-    font-variation-settings: "FILL" 1;
-  }
-}
-
-a.icon {
-  color: inherit;
-  text-decoration: none;
-  font-size: 24px;
-}
-
-form {
-  border: 1px solid #3334;
-  background: #9892;
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
-  display: grid;
-  grid-auto-flow: row;
-  gap: 8px;
-  max-width: max-content;
-
-  label:has(+ input, + textarea) {
-    display: block;
-    font-size: 10pt;
-    color: #555;
-  }
-  input:not([type="checkbox"]),
-  textarea {
-    display: block;
-    border: 1px solid #3334;
-    border-radius: 8px;
-    margin: 8px 0;
-    padding: 8px;
-    font-family: inherit;
-    font-size: inherit;
-    color: inherit;
-    background: #fff;
-    width: min(60vw, 24em, calc(100% - 16px));
-  }
-  textarea {
-    resize: vertical;
-  }
-  button {
-    background: #3b005e;
-    color: #fff;
-    font-family: inherit;
-    font-size: inherit;
-    border-radius: 8px;
-    border: none;
-    width: 100%;
-    padding: 8px;
-    box-sizing: border-box;
-    cursor: pointer;
-    &:disabled {
-      opacity: 80%;
-      cursor: default;
-    }
-  }
-  .error {
-    background: #f004;
-    border: 1px solid #f007;
-    border-radius: 8px;
-    padding: 16px;
-    margin: 0;
-  }
-
-  &.noteReplyForm {
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-    margin-top: 8px;
-    max-width: 100%;
-    input:not([type="checkbox"]),
-    textarea,
-    button {
-      width: 100%;
-      box-sizing: border-box;
-    }
-  }
-}
-
-.fullProfile {
-  border-radius: 8px;
-  margin: 16px;
-  padding: 16px;
-  border: 1px solid #23f4;
-  background: #e6eaff44;
-
-  .basicInfo {
-    display: grid;
-    grid-template-columns: max-content 1fr max-content;
-    gap: 16px;
-
-    img.avatar {
-      width: 96px;
-      aspect-ratio: 1;
-    }
-    .displayName {
-      font-size: 16pt;
-      font-weight: bold;
-    }
-    .handle,
-    .joinedDate {
-      font-size: 10pt;
-    }
-  }
-}
-
-[hidden] {
-  display: none;
-}
+@import url(skeleton.css);
+@import url(note.css);
+@import url(form.css);
+@import url(profile.css);
+@import url(misc.css);
diff --git a/templates/note.php b/templates/note.php
index 56f1322..1fb03a9 100644
--- a/templates/note.php
+++ b/templates/note.php
@@ -30,6 +30,7 @@ if ($user != null) {
         <?php if (isset($note->inReplyTo)): ?>
             <div class="replyInfo">
                 <a href="/@/<?= $note->inReplyTo->author->getFullHandle() ?>/note/<?= $note->inReplyTo->id ?>">
+                    <span class="material-symbols-outlined inlineIcon">reply</span>
                     <?= sprintf(__('note.info.replyTo'),
                         '<b>' . $note->inReplyTo->author->displayName) . '</b>' ?>
                 </a>
diff --git a/templates/reply_button.php b/templates/reply_button.php
index 6b755df..1b9736b 100644
--- a/templates/reply_button.php
+++ b/templates/reply_button.php
@@ -1,2 +1,7 @@
+<?php
+use Digitigrade\Model\Note;
+
+$icon = count(Note::findAllInThread($note, 2)) > 1 ? 'reply_all' : 'reply';
+?>
 <button title="<?= __('note.action.reply') ?>" class="icon material-symbols-outlined reply"
-    _="on click send toggle to [me, next .noteReplyForm] on toggle toggle .active">reply</button>
\ No newline at end of file
+    _="on click send toggle to [me, next .noteReplyForm] on toggle toggle .active"><?= $icon ?></button>
\ No newline at end of file