From 5acb2e1667a02e2eee5f831ccc11822ef9511ade Mon Sep 17 00:00:00 2001
From: vimaexd <mae@mae.wtf>
Date: Fri, 5 Jul 2024 14:51:32 +0100
Subject: [PATCH] very basic post support + misc

---
 package-lock.json               | 15 +++++++
 src/img/icons/bookmark.svg      |  4 +-
 src/img/icons/dm.svg            |  3 ++
 src/img/icons/error.svg         | 15 +++++++
 src/img/icons/explore.svg       |  6 +--
 src/img/icons/followers.svg     | 13 ++++++
 src/img/icons/hashtag.svg       | 18 ++++----
 src/img/icons/info.svg          |  6 +--
 src/img/icons/like.svg          |  4 +-
 src/img/icons/like_fill.svg     |  6 +--
 src/img/icons/lists.svg         | 11 ++++-
 src/img/icons/logout.svg        |  8 ++--
 src/img/icons/media.svg         | 12 +++++
 src/img/icons/mention.svg       |  3 ++
 src/img/icons/more.svg          |  6 +--
 src/img/icons/notifications.svg |  8 ++--
 src/img/icons/plus.svg          | 11 +++++
 src/img/icons/plus_fill.svg     | 11 +++++
 src/img/icons/poll.svg          | 10 +++++
 src/img/icons/post.svg          |  4 +-
 src/img/icons/public.svg        | 12 +++++
 src/img/icons/quote.svg         |  5 +--
 src/img/icons/react.svg         | 29 ++++++-------
 src/img/icons/reload.svg        | 16 +++++++
 src/img/icons/reply.svg         |  4 +-
 src/img/icons/repost.svg        | 10 ++---
 src/img/icons/search.svg        |  7 ++-
 src/img/icons/settings.svg      |  8 ++--
 src/img/icons/timeline.svg      |  8 ++--
 src/img/icons/unlisted.svg      |  4 ++
 src/img/icons/warning.svg       |  3 ++
 src/lib/api.js                  | 24 +++++++++-
 src/lib/ui/Composer.svelte      | 77 ++++++++++++++++++++++++++++-----
 src/lib/ui/Modal.svelte         | 19 +++++---
 src/lib/ui/Navigation.svelte    |  2 +-
 src/routes/+layout.svelte       |  2 +-
 36 files changed, 306 insertions(+), 98 deletions(-)
 create mode 100644 src/img/icons/dm.svg
 create mode 100644 src/img/icons/error.svg
 create mode 100644 src/img/icons/followers.svg
 create mode 100644 src/img/icons/media.svg
 create mode 100644 src/img/icons/mention.svg
 create mode 100644 src/img/icons/plus.svg
 create mode 100644 src/img/icons/plus_fill.svg
 create mode 100644 src/img/icons/poll.svg
 create mode 100644 src/img/icons/public.svg
 create mode 100644 src/img/icons/reload.svg
 create mode 100644 src/img/icons/unlisted.svg
 create mode 100644 src/img/icons/warning.svg

diff --git a/package-lock.json b/package-lock.json
index 68c3b16..742205a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
             "name": "campfire-client",
             "version": "0.3.0",
             "license": "GPL-3.0",
+            "dependencies": {
+                "typescript": "^5.5.3"
+            },
             "devDependencies": {
                 "@poppanator/sveltekit-svg": "^4.2.1",
                 "@sveltejs/adapter-auto": "^3.2.2",
@@ -1567,6 +1570,18 @@
                 "node": ">=6"
             }
         },
+        "node_modules/typescript": {
+            "version": "5.5.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+            "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
         "node_modules/vite": {
             "version": "5.3.1",
             "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
diff --git a/src/img/icons/bookmark.svg b/src/img/icons/bookmark.svg
index b9e9b8e..70f328d 100644
--- a/src/img/icons/bookmark.svg
+++ b/src/img/icons/bookmark.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M92.1414 16C96.4815 16 100 19.5746 100 23.9838C100 40.8497 100 80.4817 100 104.016C100 107.201 98.1365 110.082 95.2586 111.345C92.3797 112.609 89.038 112.013 86.7552 109.83C76.4888 100.013 64 88.0719 64 88.0719C64 88.0719 51.5112 100.013 41.2448 109.83C38.962 112.013 35.6204 112.609 32.7414 111.345C29.8635 110.082 28 107.201 28 104.016C28 80.4817 28 40.8497 28 23.9838C28 19.5746 31.5185 16 35.8586 16C49.7059 16 78.2941 16 92.1414 16Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path fill-rule="evenodd" d="M23.035 4C24.12 4 25 4.894 25 5.996v20.008c0 .796-.466 1.516-1.185 1.832a1.941 1.941 0 0 1-2.126-.378L16 22.017l-5.689 5.44a1.941 1.941 0 0 1-2.126.378A1.997 1.997 0 0 1 7 26.004V5.996C7 4.894 7.88 4 8.965 4h14.07Z" clip-rule="evenodd"/>
 </svg>
diff --git a/src/img/icons/dm.svg b/src/img/icons/dm.svg
new file mode 100644
index 0000000..41b64da
--- /dev/null
+++ b/src/img/icons/dm.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path fill-rule="evenodd" d="M4.075 10.226c-.05.25-.075.51-.075.774v8a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-8a4.02 4.02 0 0 0-.075-.774L16.53 17.348l-.53.331-.53-.331-11.395-7.122Zm.874-1.812L16 15.32l11.051-6.907A3.991 3.991 0 0 0 24 7H8a3.991 3.991 0 0 0-3.051 1.414Z" clip-rule="evenodd"/>
+</svg>
diff --git a/src/img/icons/error.svg b/src/img/icons/error.svg
new file mode 100644
index 0000000..cdcc032
--- /dev/null
+++ b/src/img/icons/error.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path fill-rule="evenodd" d="M13 26a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm0 2a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" clip-rule="evenodd"/>
+    <path d="M11.417 18.547a1.556 1.556 0 1 1-3.112 0 1.556 1.556 0 0 1 3.112 0Zm6.222 0a1.556 1.556 0 1 1-3.111 0 1.556 1.556 0 0 1 3.11 0Z"/>
+    <path fill-rule="evenodd" d="M16.146 23.489a.889.889 0 0 1-1.247.156l-.034-.026c-.39-.304-.866-.676-1.865-.676-.998 0-1.475.372-1.865.676l-.034.026a.889.889 0 0 1-1.091-1.403l.027-.022c.484-.377 1.355-1.054 2.963-1.054s2.479.677 2.963 1.054l.027.022c.388.301.458.86.156 1.247Z" clip-rule="evenodd"/>
+    <path d="M28 11.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-8-4a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Zm-1-1a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Zm-1 2a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"/>
+    <path d="M24.5 6.7c.663 0 1.2.672 1.2 1.5s-.537 1.5-1.2 1.5c-.663 0-1.2-.672-1.2-1.5s.537-1.5 1.2-1.5Z"/>
+    <path fill-rule="evenodd" d="M24.34 5.552c.336.324.543.782.651 1.355.115.604.04 1.088-.124 1.478-.106.25-.244.449-.365.6l.116.03-.236.971a4.28 4.28 0 0 1-.579-.173c-.125-.051-.333-.148-.452-.352a.645.645 0 0 1 .015-.658c.06-.104.149-.204.207-.27l.011-.013c.14-.158.272-.311.361-.524.086-.202.143-.486.064-.903-.085-.449-.225-.689-.363-.822-.132-.127-.312-.204-.582-.226-.28-.023-.626.017-1.05.103-.323.066-.665.153-1.036.247l-.357.09a.5.5 0 0 1-.242-.97l.336-.085c.377-.096.75-.19 1.1-.262.452-.092.909-.154 1.33-.12.432.035.854.174 1.195.504Zm-.212 3.31.006.003a.032.032 0 0 1-.006-.003Z" clip-rule="evenodd"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M4 4h24v24H4z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/img/icons/explore.svg b/src/img/icons/explore.svg
index 9699f07..e2a289c 100644
--- a/src/img/icons/explore.svg
+++ b/src/img/icons/explore.svg
@@ -1,10 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
   <g clip-path="url(#a)">
-    <path fill-rule="evenodd" d="M49.698 17.698c-17.673 0-32 14.327-32 32v29.456c0 17.673 14.327 32 32 32h29.456c17.673 0 32-14.327 32-32V49.698c0-17.673-14.327-32-32-32H49.698Zm41.963 23.469c1.636-2.963-1.622-6.221-4.586-4.586l-18.64 10.29a3.375 3.375 0 0 0-.755 5.34l8.35 8.352a3.375 3.375 0 0 0 5.342-.756l10.29-18.64ZM59.657 65.314a1.688 1.688 0 0 1 0-2.386l3.27-3.27a1.688 1.688 0 0 1 2.387 0l3.27 3.27c.66.659.66 1.727 0 2.386l-3.27 3.27a1.688 1.688 0 0 1-2.386 0l-3.27-3.27ZM36.581 87.075c-1.636 2.964 1.623 6.222 4.586 4.586l18.64-10.29a3.375 3.375 0 0 0 .756-5.34l-8.352-8.352a3.375 3.375 0 0 0-5.34.756l-10.29 18.64Z" clip-rule="evenodd"/>
+    <path fill-rule="evenodd" d="M12.425 4.425a8 8 0 0 0-8 8v7.363a8 8 0 0 0 8 8h7.363a8 8 0 0 0 8-8v-7.363a8 8 0 0 0-8-8h-7.364Zm10.49 5.867c.41-.741-.405-1.556-1.146-1.147l-4.66 2.573a.844.844 0 0 0-.19 1.335l2.089 2.088a.844.844 0 0 0 1.335-.19l2.572-4.66Zm-8 6.037a.422.422 0 0 1 0-.597l.817-.818a.422.422 0 0 1 .596 0l.818.818a.422.422 0 0 1 0 .597l-.818.817a.422.422 0 0 1-.596 0l-.818-.817Zm-5.77 5.44c-.409.74.406 1.555 1.147 1.146l4.66-2.572a.844.844 0 0 0 .189-1.335l-2.088-2.088a.844.844 0 0 0-1.336.189l-2.572 4.66Z" clip-rule="evenodd"/>
   </g>
   <defs>
     <clipPath id="a">
-      <path d="M16 16h96v96H16z"/>
+      <path d="M4 4h24v24H4z"/>
     </clipPath>
   </defs>
 </svg>
diff --git a/src/img/icons/followers.svg b/src/img/icons/followers.svg
new file mode 100644
index 0000000..7293c31
--- /dev/null
+++ b/src/img/icons/followers.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path fill-rule="evenodd" d="M16.5 20.889a7.389 7.389 0 1 0 0-14.778 7.389 7.389 0 0 0 0 14.778Zm0 2.111a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19Z" clip-rule="evenodd"/>
+    <path d="M14.829 13.022a1.642 1.642 0 1 1-3.284 0 1.642 1.642 0 0 1 3.284 0Zm6.568 0a1.642 1.642 0 1 1-3.284 0 1.642 1.642 0 0 1 3.284 0Z"/>
+    <path fill-rule="evenodd" d="M13.18 16.148a.938.938 0 0 1 1.351-.137c.412.321.915.713 1.969.713s1.557-.392 1.969-.713c.011-.01.023-.018.035-.027a.938.938 0 1 1 1.123 1.503c-.51.398-1.43 1.114-3.127 1.114-1.698 0-2.616-.716-3.127-1.114l-.03-.022a.938.938 0 0 1-.164-1.317Z" clip-rule="evenodd"/>
+    <path d="M9.224 28.276a7.276 7.276 0 0 1 14.552 0H9.224Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M4 4h24v24H4z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/img/icons/hashtag.svg b/src/img/icons/hashtag.svg
index 5a574d7..52f7097 100644
--- a/src/img/icons/hashtag.svg
+++ b/src/img/icons/hashtag.svg
@@ -1,10 +1,10 @@
-<svg viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_135_36)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M35.2278 87.9024H24.0002C21.4714 87.9024 19.0909 86.7072 17.5817 84.6778C16.0718 82.6493 15.6106 80.0255 16.3372 77.6038L17.0496 75.2299C18.0649 71.8454 21.179 69.5284 24.7125 69.5284H39.6624L42.7666 56.6666H31.3495C28.8207 56.6666 26.441 55.4714 24.9311 53.442C23.4219 51.4135 22.96 48.7897 23.6873 46.368L24.3989 43.9941C25.4143 40.6096 28.5291 38.2927 32.0619 38.2927H47.2012L50.38 25.1231C51.247 21.531 54.4612 19 58.1565 19H58.7262C61.1784 19 63.495 20.1245 65.012 22.051C66.529 23.9775 67.0782 26.4929 66.5027 28.8769L64.2308 38.2927H78.4208L81.5995 25.1231C82.4666 21.531 85.6807 19 89.376 19H89.9458C92.3979 19 94.7145 20.1245 96.2315 22.051C97.7485 23.9775 98.2977 26.4929 97.7223 28.8769L95.4503 38.2927H103.553C106.081 38.2927 108.461 39.4879 109.971 41.5173C111.48 43.5458 111.941 46.1696 111.215 48.5913L110.503 50.9652C109.488 54.3497 106.373 56.6666 102.84 56.6666H91.0157L87.9115 69.5284H96.2032C98.7319 69.5284 101.112 70.7236 102.621 72.7531C104.131 74.7815 104.592 77.4053 103.865 79.827L103.153 82.201C102.138 85.5854 99.0236 87.9024 95.4908 87.9024H83.4769L80.2982 101.072C79.4312 104.664 76.217 107.195 72.5217 107.195H71.952C69.4998 107.195 67.1832 106.071 65.6662 104.144C64.1492 102.218 63.6 99.7022 64.1755 97.3181L66.4474 87.9024H52.2574L49.0787 101.072C48.2116 104.664 44.9974 107.195 41.3022 107.195H40.7324C38.2803 107.195 35.9636 106.071 34.4466 104.144C32.9297 102.218 32.3805 99.7022 32.9559 97.3181L35.2278 87.9024ZM59.7962 56.6666L56.692 69.5284H70.882L73.9862 56.6666H59.7962Z"/>
-</g>
-<defs>
-<clipPath id="clip0_135_36">
-<rect width="96" height="89" fill="white" transform="translate(16 19)"/>
-</clipPath>
-</defs>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path fill-rule="evenodd" d="M8.807 21.976H6A2 2 0 0 1 4.084 19.4l.178-.594a2 2 0 0 1 1.916-1.425h3.737l.777-3.215H7.836a2 2 0 0 1-1.915-2.575l.178-.594a2 2 0 0 1 1.915-1.425H11.8l.795-3.292a2 2 0 0 1 1.944-1.531h.142a2 2 0 0 1 1.944 2.47l-.567 2.353h3.547L20.4 6.28a2 2 0 0 1 1.944-1.531h.142a2 2 0 0 1 1.944 2.47l-.568 2.353h2.026a2 2 0 0 1 1.915 2.575l-.177.593a2 2 0 0 1-1.916 1.426h-2.956l-.776 3.215h2.073a2 2 0 0 1 1.915 2.575l-.178.593a2 2 0 0 1-1.916 1.426H20.87l-.795 3.292a2 2 0 0 1-1.944 1.53h-.142a2 2 0 0 1-1.944-2.468l.568-2.354h-3.548l-.794 3.292a2 2 0 0 1-1.945 1.53h-.142a2 2 0 0 1-1.944-2.468l.568-2.354Zm6.142-7.81-.776 3.216h3.547l.776-3.215H14.95Z" clip-rule="evenodd"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M4 4.75h24V27H4z"/>
+    </clipPath>
+  </defs>
 </svg>
diff --git a/src/img/icons/info.svg b/src/img/icons/info.svg
index 23077aa..e9342e4 100644
--- a/src/img/icons/info.svg
+++ b/src/img/icons/info.svg
@@ -1,5 +1,3 @@
-<svg viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" fill="currentColor">
-    <g transform="matrix(1,0,0,1,16,16)">
-        <path d="M84,48C84,67.882 67.882,84 48,84C28.118,84 12,67.882 12,48C12,28.118 28.118,12 48,12C67.882,12 84,28.118 84,48ZM56,30C56,34.418 52.418,38 48,38C43.582,38 40,34.418 40,30C40,25.582 43.582,22 48,22C52.418,22 56,25.582 56,30ZM48,42C43.582,42 40,45.582 40,50L40,66C40,70.418 43.582,74 48,74C52.418,74 56,70.418 56,66L56,50C56,45.582 52.418,42 48,42Z"/>
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path fill-rule="evenodd" d="M25 16a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-7-4.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-2 3a2 2 0 0 0-2 2v4a2 2 0 1 0 4 0v-4a2 2 0 0 0-2-2Z" clip-rule="evenodd"/>
 </svg>
diff --git a/src/img/icons/like.svg b/src/img/icons/like.svg
index a2ffd55..45682c9 100644
--- a/src/img/icons/like.svg
+++ b/src/img/icons/like.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
-  <path fill-rule="evenodd" d="M58.719 106.897C31.554 85.804 20.068 67.619 16.989 54.07c-2.574-11.324.138-20.218 5.13-26.454C27.613 20.754 36.142 17 44.84 17c8.436 0 14.687 3.415 18.99 7.126C68.133 20.415 74.384 17 82.82 17c8.698 0 17.226 3.754 22.721 10.616 4.992 6.236 7.705 15.13 5.131 26.454-3.081 13.55-14.566 31.734-41.73 52.827l-5.111 3.969-5.111-3.969Zm5.11-6.582c59.315-46.058 39.64-74.982 18.99-74.982-13.241 0-18.99 11.716-18.99 11.716s-5.747-11.716-18.99-11.716c-20.65 0-40.324 28.924 18.99 74.982Z" clip-rule="evenodd"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path fill-rule="evenodd" d="M14.68 26.724c-6.791-5.273-9.663-9.82-10.433-13.207-.643-2.83.035-5.054 1.283-6.613C6.903 5.188 9.035 4.25 11.21 4.25c2.109 0 3.672.854 4.747 1.782 1.076-.928 2.639-1.782 4.748-1.782 2.174 0 4.306.938 5.68 2.654 1.248 1.56 1.926 3.783 1.283 6.614-.77 3.387-3.642 7.933-10.433 13.206l-1.278.992-1.277-.992Zm1.277-1.645c14.829-11.515 9.91-18.746 4.748-18.746-3.31 0-4.748 2.93-4.748 2.93s-1.437-2.93-4.747-2.93c-5.163 0-10.081 7.231 4.747 18.746Z" clip-rule="evenodd"/>
 </svg>
diff --git a/src/img/icons/like_fill.svg b/src/img/icons/like_fill.svg
index 6d2eb3b..09aa5b8 100644
--- a/src/img/icons/like_fill.svg
+++ b/src/img/icons/like_fill.svg
@@ -1,10 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 33">
   <g clip-path="url(#a)">
-    <path fill-rule="evenodd" d="M58.719 106.897C31.554 85.804 20.068 67.619 16.989 54.07c-2.574-11.324.138-20.218 5.13-26.454C27.613 20.754 36.142 17 44.84 17c8.436 0 14.687 3.415 18.99 7.126C68.133 20.415 74.384 17 82.82 17c8.698 0 17.226 3.754 22.721 10.616 4.992 6.236 7.705 15.13 5.131 26.454-3.081 13.55-14.566 31.734-41.73 52.827l-5.111 3.969-5.111-3.969Z" clip-rule="evenodd"/>
+    <path fill-rule="evenodd" d="M14.68 27.474c-6.791-5.273-9.663-9.82-10.433-13.207-.643-2.83.035-5.054 1.283-6.613C6.903 5.938 9.035 5 11.21 5c2.109 0 3.672.854 4.747 1.782C17.033 5.854 18.596 5 20.705 5c2.174 0 4.306.938 5.68 2.654 1.248 1.56 1.926 3.783 1.283 6.614-.77 3.387-3.642 7.933-10.433 13.206l-1.278.992-1.277-.992Z" clip-rule="evenodd"/>
   </g>
   <defs>
     <clipPath id="a">
-      <path d="M16 16h96v96H16z"/>
+      <path d="M4 4.75h24v24H4z"/>
     </clipPath>
   </defs>
 </svg>
diff --git a/src/img/icons/lists.svg b/src/img/icons/lists.svg
index a3e5c30..47a99bb 100644
--- a/src/img/icons/lists.svg
+++ b/src/img/icons/lists.svg
@@ -1,3 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
-  <path fill-rule="evenodd" d="M36 16h4.03c.517 8.37 7.47 15 15.97 15h16c8.5 0 15.453-6.63 15.97-15H92a8 8 0 0 1 8 8v80a8 8 0 0 1-8 8H36a8 8 0 0 1-8-8V24a8 8 0 0 1 8-8Zm43.938 0H48.062A8.001 8.001 0 0 0 56 23h16a8.001 8.001 0 0 0 7.938-7ZM44 46a4 4 0 0 0 0 8h41a4 4 0 0 0 0-8H44Zm-4 20a4 4 0 0 1 4-4h41a4 4 0 0 1 0 8H44a4 4 0 0 1-4-4Zm4 12a4 4 0 0 0 0 8h41a4 4 0 0 0 0-8H44Z" clip-rule="evenodd"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path fill-rule="evenodd" d="M9 4h1.008A4 4 0 0 0 14 7.75h4A4 4 0 0 0 21.992 4H23a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm10.985 0h-7.97A2 2 0 0 0 14 5.75h4A2 2 0 0 0 19.985 4ZM11 11.5a1 1 0 1 0 0 2h10.25a1 1 0 1 0 0-2H11Zm-1 5a1 1 0 0 1 1-1h10.25a1 1 0 1 1 0 2H11a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h10.25a1 1 0 1 0 0-2H11Z" clip-rule="evenodd"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M4 4h24v24H4z"/>
+    </clipPath>
+  </defs>
 </svg>
diff --git a/src/img/icons/logout.svg b/src/img/icons/logout.svg
index 1a3cf80..d97e04d 100644
--- a/src/img/icons/logout.svg
+++ b/src/img/icons/logout.svg
@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
   <g clip-path="url(#a)">
-    <path fill-rule="evenodd" d="M42.23 17A9.23 9.23 0 0 0 33 26.23v76.155a9.23 9.23 0 0 0 9.23 9.23h41.54a9.23 9.23 0 0 0 9.23-9.23v-7.247c-7.175 1.296-14.923-3.924-14.923-12.444v-1.88H72.23C62.714 80.813 55 73.098 55 63.581c0-9.516 7.714-17.23 17.23-17.23h5.847v-.727c0-8.52 7.748-13.74 14.923-12.445v-6.95A9.23 9.23 0 0 0 83.77 17H42.23ZM93 41.614c-2.899-1.703-6.923.297-6.923 4.01v8.728H72.23a9.23 9.23 0 0 0 0 18.461h13.846v9.88c0 3.715 4.024 5.715 6.923 4.011v-45.09Z" clip-rule="evenodd"/>
-    <path fill-rule="evenodd" d="M110.949 67.263a4.616 4.616 0 0 0 0-6.208l-16.84-18.534c-2.838-3.123-8.032-1.115-8.032 3.104v8.727H72.23a9.23 9.23 0 0 0 0 18.461h13.846v9.88c0 4.22 5.194 6.227 8.031 3.105l16.841-18.535Z" clip-rule="evenodd"/>
+    <path fill-rule="evenodd" d="M10.558 4.25A2.308 2.308 0 0 0 8.25 6.558v19.038a2.308 2.308 0 0 0 2.308 2.308h10.384a2.308 2.308 0 0 0 2.308-2.308v-1.811c-1.794.323-3.73-.982-3.73-3.111v-.47h-1.462a4.308 4.308 0 1 1 0-8.616h1.461v-.182c0-2.13 1.937-3.435 3.731-3.11V6.557a2.308 2.308 0 0 0-2.308-2.308H10.558Zm12.692 6.154c-.725-.426-1.73.074-1.73 1.002v2.182h-3.463a2.308 2.308 0 0 0 0 4.615h3.462v2.47c0 .929 1.006 1.429 1.731 1.003V10.404Z" clip-rule="evenodd"/>
+    <path fill-rule="evenodd" d="M27.737 16.816c.4-.44.4-1.112 0-1.552l-4.21-4.634c-.71-.78-2.008-.279-2.008.776v2.182h-3.461a2.308 2.308 0 0 0 0 4.615h3.461v2.47c0 1.055 1.299 1.557 2.008.776l4.21-4.633Z" clip-rule="evenodd"/>
   </g>
   <defs>
     <clipPath id="a">
-      <path d="M16 16h96v96H16z"/>
+      <path d="M4 4h24v24H4z"/>
     </clipPath>
   </defs>
 </svg>
diff --git a/src/img/icons/media.svg b/src/img/icons/media.svg
new file mode 100644
index 0000000..f88b45e
--- /dev/null
+++ b/src/img/icons/media.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path fill-rule="evenodd" d="M24 7H8a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1ZM8 4a4 4 0 0 0-4 4v16a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H8Z" clip-rule="evenodd"/>
+    <path d="M11.606 16.787a1 1 0 0 1 1.788 0l4.01 8.015a1 1 0 0 1-.893 1.448H8.489a1 1 0 0 1-.894-1.448l4.01-8.015Z"/>
+    <path d="M18.652 19.355a1 1 0 0 1 1.696 0l3.824 6.115a1 1 0 0 1-.848 1.53h-7.648a1 1 0 0 1-.848-1.53l3.824-6.114ZM23 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M4 4h24v24H4z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/img/icons/mention.svg b/src/img/icons/mention.svg
new file mode 100644
index 0000000..3895acb
--- /dev/null
+++ b/src/img/icons/mention.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path d="M15.878 27.028c-1.813 0-3.426-.247-4.841-.741-1.415-.489-2.61-1.207-3.588-2.156-.977-.944-1.722-2.097-2.233-3.46-.511-1.364-.767-2.915-.767-4.654 0-1.716.256-3.273.767-4.67.517-1.398 1.27-2.597 2.258-3.597.99-1.006 2.196-1.778 3.623-2.318 1.431-.54 3.062-.81 4.892-.81 1.693 0 3.204.247 4.534.742 1.335.494 2.466 1.199 3.392 2.113a8.977 8.977 0 0 1 2.122 3.247c.489 1.25.73 2.634.724 4.151a13.416 13.416 0 0 1-.272 2.88c-.188.876-.483 1.64-.887 2.293a4.48 4.48 0 0 1-1.568 1.543c-.648.375-1.432.588-2.352.64-.66.05-1.193.002-1.602-.146-.41-.148-.722-.366-.938-.656a2.404 2.404 0 0 1-.41-1.031h-.101c-.137.34-.404.65-.802.929-.397.272-.883.485-1.457.639a5.76 5.76 0 0 1-1.815.162 5.357 5.357 0 0 1-1.91-.469 4.846 4.846 0 0 1-1.593-1.185c-.46-.517-.824-1.156-1.09-1.917-.262-.761-.396-1.642-.402-2.642.006-.989.145-1.85.418-2.583.278-.733.645-1.349 1.1-1.849.46-.5.971-.892 1.534-1.176a5.42 5.42 0 0 1 1.696-.546 5.772 5.772 0 0 1 1.824 0c.573.097 1.056.253 1.448.47.398.215.645.448.742.698h.12v-.955h2.667v8.319c.005.392.093.696.264.912.17.216.4.323.69.323.392 0 .72-.173.98-.52.267-.346.466-.877.597-1.593.136-.716.205-1.628.205-2.736 0-1.068-.143-2.006-.427-2.813-.278-.812-.67-1.502-1.176-2.07a6.196 6.196 0 0 0-1.747-1.398 8.058 8.058 0 0 0-2.165-.784 11.413 11.413 0 0 0-2.386-.248c-1.415 0-2.65.216-3.707.648-1.057.426-1.938 1.026-2.642 1.799A7.604 7.604 0 0 0 8.01 12.53c-.346 1.034-.522 2.162-.528 3.384.006 1.346.193 2.54.562 3.58.375 1.033.927 1.903 1.654 2.607.727.705 1.625 1.239 2.693 1.602 1.068.364 2.296.546 3.682.546.653 0 1.292-.048 1.917-.145.625-.09 1.19-.204 1.697-.34a9.91 9.91 0 0 0 1.218-.384l.844 2.471c-.358.205-.844.395-1.457.571-.608.182-1.296.327-2.063.435a15.86 15.86 0 0 1-2.352.17Zm-.392-7.704c.693 0 1.244-.134 1.653-.4.415-.268.71-.663.887-1.185.181-.529.267-1.18.255-1.952-.005-.682-.093-1.259-.264-1.73a1.959 1.959 0 0 0-.86-1.083c-.404-.25-.967-.375-1.688-.375-.63 0-1.168.134-1.611.401a2.615 2.615 0 0 0-1.006 1.125c-.227.477-.344 1.04-.35 1.688a5.34 5.34 0 0 0 .29 1.713c.188.534.498.968.93 1.303.431.33 1.02.495 1.764.495Z"/>
+</svg>
diff --git a/src/img/icons/more.svg b/src/img/icons/more.svg
index bc531b2..ab0f996 100644
--- a/src/img/icons/more.svg
+++ b/src/img/icons/more.svg
@@ -1,5 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
-  <circle cx="28" cy="64" r="12"/>
-  <circle cx="64" cy="64" r="12"/>
-  <circle cx="100" cy="64" r="12"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path d="M10 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm9 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm9 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
 </svg>
diff --git a/src/img/icons/notifications.svg b/src/img/icons/notifications.svg
index e946ca5..7e3dfa6 100644
--- a/src/img/icons/notifications.svg
+++ b/src/img/icons/notifications.svg
@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
   <g clip-path="url(#a)">
-    <path d="M28 48c0-17.673 14.327-32 32-32h9c17.673 0 32 14.327 32 32v33a8 8 0 0 1-8 8H36a8 8 0 0 1-8-8V48Z"/>
-    <path fill-rule="evenodd" d="M53.417 84h21.166c-2.82-2.49-6.525-4-10.583-4a15.94 15.94 0 0 0-10.583 4Zm26.552 13H48.031c.516 8.371 7.468 15 15.969 15 8.5 0 15.453-6.629 15.97-15Z" clip-rule="evenodd"/>
+    <path d="M7 12a8 8 0 0 1 8-8h2.25a8 8 0 0 1 8 8v8.25a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V12Z"/>
+    <path fill-rule="evenodd" d="M13.354 21h5.292A3.984 3.984 0 0 0 16 20a3.99 3.99 0 0 0-2.646 1Zm6.638 3.25h-7.984a4 4 0 0 0 7.984 0Z" clip-rule="evenodd"/>
   </g>
   <defs>
     <clipPath id="a">
-      <path d="M16 16h96v96H16z"/>
+      <path d="M4 4h24v24H4z"/>
     </clipPath>
   </defs>
 </svg>
diff --git a/src/img/icons/plus.svg b/src/img/icons/plus.svg
new file mode 100644
index 0000000..0bcf501
--- /dev/null
+++ b/src/img/icons/plus.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path d="M15 5a1 1 0 1 1 2 0v22a1 1 0 1 1-2 0V5Z"/>
+    <path d="M5 17a1 1 0 1 1 0-2h22a1 1 0 1 1 0 2H5Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M4 4h24v24H4z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/img/icons/plus_fill.svg b/src/img/icons/plus_fill.svg
new file mode 100644
index 0000000..cd16e2a
--- /dev/null
+++ b/src/img/icons/plus_fill.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path d="M13 5.5A1.5 1.5 0 0 1 14.5 4h3A1.5 1.5 0 0 1 19 5.5v21a1.5 1.5 0 0 1-1.5 1.5h-3a1.5 1.5 0 0 1-1.5-1.5v-21Z"/>
+    <path d="M5.5 19A1.5 1.5 0 0 1 4 17.5v-3A1.5 1.5 0 0 1 5.5 13h21a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-21Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M4 4h24v24H4z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/img/icons/poll.svg b/src/img/icons/poll.svg
new file mode 100644
index 0000000..f258b9d
--- /dev/null
+++ b/src/img/icons/poll.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path d="M10 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm0 9a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm0 9a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm2-18a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H14a2 2 0 0 1-2-2Zm0 9a2 2 0 0 1 2-2h3a2 2 0 1 1 0 4h-3a2 2 0 0 1-2-2Zm0 9a2 2 0 0 1 2-2h7a2 2 0 1 1 0 4h-7a2 2 0 0 1-2-2Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M4 4h24v24H4z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/img/icons/post.svg b/src/img/icons/post.svg
index 79d5536..3d4ac43 100644
--- a/src/img/icons/post.svg
+++ b/src/img/icons/post.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
-  <path fill-rule="evenodd" d="M36 103c.151 0 .302-.004.45-.012a11.97 11.97 0 0 0 9.035-3.503l3.868-3.868-16.97-16.97-3.868 3.868A11.962 11.962 0 0 0 25 90.993V103h11Zm19.01-13.04 44.475-44.475c4.687-4.686 4.687-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0L38.04 72.99l16.97 16.97Z" clip-rule="evenodd"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path fill-rule="evenodd" d="M9 24.75c.616 0 1.167-.278 1.533-.716.045-.038.089-.078.131-.12l.967-.967-2.828-2.828-.967.967a2.02 2.02 0 0 0-.12.13A1.996 1.996 0 0 0 7 22.75v2h2Zm4.045-3.217 11.12-11.119a2 2 0 1 0-2.83-2.828L10.218 18.705l2.828 2.828Z" clip-rule="evenodd"/>
 </svg>
diff --git a/src/img/icons/public.svg b/src/img/icons/public.svg
new file mode 100644
index 0000000..c321adf
--- /dev/null
+++ b/src/img/icons/public.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path d="M16 5.162c0-.642.521-1.168 1.16-1.106A12 12 0 0 1 27.944 14.84c.062.639-.464 1.16-1.106 1.16-.641 0-1.154-.522-1.23-1.159a9.678 9.678 0 0 0-8.45-8.448C16.523 6.316 16 5.803 16 5.162Z"/>
+    <path d="M16 9.37c0-.757.617-1.382 1.363-1.253a8 8 0 0 1 6.52 6.52c.129.745-.496 1.363-1.252 1.363-.757 0-1.352-.623-1.547-1.354a5.248 5.248 0 0 0-1.364-2.366 5.26 5.26 0 0 0-2.366-1.364c-.73-.194-1.354-.79-1.354-1.547Zm1.95 14.58A6.998 6.998 0 0 1 6 19a7 7 0 0 1 2.05-4.95L13 19l4.95 4.95Z"/>
+    <path d="M6.399 27.55a3.377 3.377 0 0 1 6.753 0H6.399Zm8.241-11.559a1 1 0 1 1 1.415 1.414l-3.934 3.934a1 1 0 0 1-1.414-1.414l3.934-3.934ZM19 14.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M4 4h24v24H4z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/img/icons/quote.svg b/src/img/icons/quote.svg
index 98ce541..5a74811 100644
--- a/src/img/icons/quote.svg
+++ b/src/img/icons/quote.svg
@@ -1,4 +1,3 @@
-<svg viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M41.25 102C36.8317 102 33.25 98.4183 33.25 94V81H30.75C23.018 81 16.75 74.732 16.75 67V40C16.75 32.268 23.018 26 30.75 26H49.5C57.232 26 63.5 32.268 63.5 40V73C63.5 75.6212 62.7488 78.5715 61.9055 81.062C60.9986 83.7402 59.7131 86.6735 58.1334 89.4379C56.5813 92.154 54.5609 95.032 52.0686 97.3339C49.6611 99.5574 45.9736 102 41.25 102ZM41.25 73V94C44.1431 94 46.9245 91.6565 49.25 88.4761C50.8958 86.2252 52.3132 83.5551 53.3802 81C54.7139 77.806 55.5 74.7916 55.5 73V40C55.5 36.6863 52.8137 34 49.5 34H30.75C27.4363 34 24.75 36.6863 24.75 40V67C24.75 70.3137 27.4363 73 30.75 73H41.25ZM40.5032 86.1254C40.5032 86.1249 40.512 86.1202 40.5295 86.1129C40.5119 86.1223 40.5032 86.126 40.5032 86.1254Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M88 102C83.5817 102 80 98.4183 80 94V81H77.5C69.768 81 63.5 74.732 63.5 67V40C63.5 32.268 69.768 26 77.5 26H96.25C103.982 26 110.25 32.268 110.25 40V73C110.25 75.6212 109.499 78.5715 108.655 81.062C107.749 83.7402 106.463 86.6735 104.883 89.4379C103.331 92.154 101.311 95.032 98.8186 97.3339C96.4111 99.5574 92.7236 102 88 102ZM88 73V94C90.8931 94 93.6745 91.6565 96 88.4761C97.6458 86.2252 99.0632 83.5551 100.13 81C101.464 77.806 102.25 74.7916 102.25 73V40C102.25 36.6863 99.5637 34 96.25 34H77.5C74.1863 34 71.5 36.6863 71.5 40V67C71.5 70.3137 74.1863 73 77.5 73H88ZM87.2532 86.1254C87.2532 86.1249 87.262 86.1202 87.2795 86.1129C87.2619 86.1223 87.2532 86.126 87.2532 86.1254Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path fill-rule="evenodd" d="M10.313 25.5a2 2 0 0 1-2-2v-3.25h-.626a3.5 3.5 0 0 1-3.5-3.5V10a3.5 3.5 0 0 1 3.5-3.5h4.688a3.5 3.5 0 0 1 3.5 3.5v8.25c0 .655-.188 1.393-.399 2.015-.226.67-.548 1.403-.943 2.095-.388.678-.893 1.398-1.516 1.974-.602.555-1.524 1.166-2.704 1.166Zm0-7.25v5.25c.723 0 1.418-.586 2-1.381a9.323 9.323 0 0 0 1.032-1.869c.333-.799.53-1.552.53-2V10a1.5 1.5 0 0 0-1.5-1.5H7.687a1.5 1.5 0 0 0-1.5 1.5v6.75a1.5 1.5 0 0 0 1.5 1.5h2.625Zm-.187 3.281.006-.003a.04.04 0 0 1-.006.003ZM22 25.5a2 2 0 0 1-2-2v-3.25h-.625a3.5 3.5 0 0 1-3.5-3.5V10a3.5 3.5 0 0 1 3.5-3.5h4.688a3.5 3.5 0 0 1 3.5 3.5v8.25c0 .655-.188 1.393-.4 2.015-.226.67-.547 1.403-.942 2.095-.388.678-.893 1.398-1.516 1.974-.602.555-1.524 1.166-2.705 1.166Zm0-7.25v5.25c.723 0 1.419-.586 2-1.381a9.323 9.323 0 0 0 1.032-1.869c.334-.799.53-1.552.53-2V10a1.5 1.5 0 0 0-1.5-1.5h-4.687a1.5 1.5 0 0 0-1.5 1.5v6.75a1.5 1.5 0 0 0 1.5 1.5H22Zm-.187 3.281s.003 0 .007-.003a.04.04 0 0 1-.007.003Z" clip-rule="evenodd"/>
 </svg>
diff --git a/src/img/icons/react.svg b/src/img/icons/react.svg
index 532213d..e7396e9 100644
--- a/src/img/icons/react.svg
+++ b/src/img/icons/react.svg
@@ -1,15 +1,14 @@
-<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_114_221)">
-<circle cx="52" cy="76" r="32" stroke="currentColor" stroke-width="8"/>
-<circle cx="39.4444" cy="74.1898" r="6.22222" fill="currentColor"/>
-<circle cx="64.3333" cy="74.1898" r="6.22222" fill="currentColor"/>
-<path d="M42.2222 88.2176C43.9722 89.5787 46.6666 91.7731 51.9999 91.7731C57.3333 91.7731 60.0278 89.5787 61.7777 88.2176" stroke="currentColor" stroke-width="7.11111" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M90 21C90 19.8954 90.8954 19 92 19H96C97.1046 19 98 19.8954 98 21V49C98 50.1046 97.1046 51 96 51H92C90.8954 51 90 50.1046 90 49V21Z" fill="currentColor"/>
-<path d="M80 39C78.8954 39 78 38.1046 78 37V33C78 31.8954 78.8954 31 80 31H108C109.105 31 110 31.8954 110 33V37C110 38.1046 109.105 39 108 39H80Z" fill="currentColor"/>
-</g>
-<defs>
-<clipPath id="clip0_114_221">
-<rect width="96" height="96" fill="currentColor" transform="translate(16 16)"/>
-</clipPath>
-</defs>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path fill-rule="evenodd" d="M13 26a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm0 2a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" clip-rule="evenodd"/>
+    <path d="M11.417 18.547a1.556 1.556 0 1 1-3.112 0 1.556 1.556 0 0 1 3.112 0Zm6.222 0a1.556 1.556 0 1 1-3.111 0 1.556 1.556 0 0 1 3.11 0Z"/>
+    <path fill-rule="evenodd" d="M9.854 21.509a.889.889 0 0 1 1.247-.156l.034.026c.39.304.866.675 1.865.675s1.475-.371 1.865-.675l.034-.026a.889.889 0 1 1 1.064 1.424c-.484.377-1.355 1.055-2.963 1.055s-2.479-.678-2.963-1.055l-.027-.021a.889.889 0 0 1-.156-1.247Z" clip-rule="evenodd"/>
+    <path d="M22.5 5.25a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-7Z"/>
+    <path d="M20 9.75a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-7Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M4 4h24v24H4z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/img/icons/reload.svg b/src/img/icons/reload.svg
new file mode 100644
index 0000000..4e58201
--- /dev/null
+++ b/src/img/icons/reload.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <g clip-path="url(#b)">
+      <path d="M9.578 10.611c-.684-.574-.78-1.606-.104-2.188a10 10 0 1 1-3.385 8.906c-.119-.885.639-1.592 1.531-1.567.893.025 1.577.78 1.763 1.652a6.766 6.766 0 1 0 2.61-6.867c-.719.53-1.73.638-2.415.064Z"/>
+      <path d="M8.285 14.095a1 1 0 0 1-1.326-1.113l.902-5.117a1 1 0 0 1 1.628-.592l3.98 3.34a1 1 0 0 1-.3 1.705l-4.884 1.777Z"/>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M0 0h32v32H0z"/>
+    </clipPath>
+    <clipPath id="b">
+      <path d="M17.48 32.906-.907 17.479 14.521-.906 32.906 14.52z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/img/icons/reply.svg b/src/img/icons/reply.svg
index 5462c7b..dc18cb0 100644
--- a/src/img/icons/reply.svg
+++ b/src/img/icons/reply.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
-  <path fill-rule="evenodd" d="M78 34H49c-13.255 0-24 10.745-24 24v11c0 13.255 10.745 24 24 24h53V58c0-13.255-10.745-24-24-24Zm-29-8c-17.673 0-32 14.327-32 32v11c0 17.673 14.327 32 32 32h61V58c0-17.673-14.327-32-32-32H49Z" clip-rule="evenodd"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path fill-rule="evenodd" d="M19.5 8.5h-7.25a6 6 0 0 0-6 6v2.75a6 6 0 0 0 6 6H25.5V14.5a6 6 0 0 0-6-6Zm-7.25-2a8 8 0 0 0-8 8v2.75a8 8 0 0 0 8 8H27.5V14.5a8 8 0 0 0-8-8h-7.25Z" clip-rule="evenodd"/>
 </svg>
diff --git a/src/img/icons/repost.svg b/src/img/icons/repost.svg
index c0f950f..b679f16 100644
--- a/src/img/icons/repost.svg
+++ b/src/img/icons/repost.svg
@@ -1,12 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
   <g clip-path="url(#a)">
-    <path d="M30.57 39.698 16.057 64.835h29.026L30.57 39.698Zm43.572 57.816a2.514 2.514 0 1 0 0-5.028v5.028Zm-41.058-15.92V62.32h-5.028v19.272h5.028Zm10.893 15.92H74.14v-5.028H43.977v5.028Zm-15.92-15.92c0 8.792 7.127 15.92 15.92 15.92v-5.028c-6.016 0-10.893-4.877-10.893-10.893h-5.028Z"/>
-    <path d="M74.139 99.486a4.692 4.692 0 1 0 0-9.385v9.385Zm-30.162 0h30.162v-9.385H43.977v9.385Zm-8.715-18.099v-16.99h-9.384v16.99h9.384Zm8.715 8.714a8.714 8.714 0 0 1-8.715-8.714h-9.384c0 9.996 8.103 18.099 18.099 18.099v-9.385Zm52.453-.373 14.513-25.138H81.917L96.43 89.728ZM52.86 31.486a2.514 2.514 0 1 0 0 5.028v-5.028Zm41.055 15.92v19.698h5.028V47.407h-5.028Zm-10.893-15.92H52.861v5.028h30.162v-5.028Zm15.92 15.92c0-8.792-7.127-15.92-15.92-15.92v5.028c6.016 0 10.893 4.877 10.893 10.893h5.028Z"/>
-    <path d="M52.858 29.308a4.692 4.692 0 1 0 0 9.384v-9.384Zm30.165 0H52.86v9.384h30.164v-9.384Zm8.715 18.099V68h9.384V47.407h-9.384Zm-8.715-8.715a8.714 8.714 0 0 1 8.715 8.715h9.384c0-9.996-8.103-18.1-18.099-18.1v9.385Z"/>
+    <path fill-rule="evenodd" d="m4.014 16.209 3.629-6.285 3.628 6.285h-3v4.19a2.723 2.723 0 0 0 2.723 2.723h7.541a.628.628 0 0 1 0 1.256h-7.54a3.98 3.98 0 0 1-3.98-3.98v-4.19h-3Z" clip-rule="evenodd"/>
+    <path fill-rule="evenodd" d="M8.816 20.347c0 1.203.975 2.178 2.178 2.178h7.54a1.173 1.173 0 0 1 0 2.347h-7.54a4.525 4.525 0 0 1-4.525-4.525v-4.248h2.347v4.248Zm18.92-4.199-3.628 6.284-3.629-6.284h3v-4.296a2.723 2.723 0 0 0-2.723-2.724h-7.54a.628.628 0 0 1 0-1.256h7.54a3.98 3.98 0 0 1 3.98 3.98v4.296h3Z" clip-rule="evenodd"/>
+    <path fill-rule="evenodd" d="M22.934 11.852a2.179 2.179 0 0 0-2.178-2.179h-7.541a1.173 1.173 0 1 1 0-2.346h7.54a4.525 4.525 0 0 1 4.526 4.525V17h-2.347v-5.148Z" clip-rule="evenodd"/>
   </g>
   <defs>
     <clipPath id="a">
-      <path d="M16 16h96v96H16z"/>
+      <path d="M4 4h24v24H4z"/>
     </clipPath>
   </defs>
 </svg>
diff --git a/src/img/icons/search.svg b/src/img/icons/search.svg
index 0864af4..eecb00c 100644
--- a/src/img/icons/search.svg
+++ b/src/img/icons/search.svg
@@ -1,11 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
   <g clip-path="url(#a)">
-    <circle cx="53.5" cy="54.5" r="22.5"/>
-    <path d="M97.47 107.001a6 6 0 0 0 8.485-8.485l-8.485 8.485Zm-24-24 24 24 8.485-8.485-24-24-8.485 8.485Z"/>
+    <path fill-rule="evenodd" d="M13.375 17.75a4.125 4.125 0 1 0 0-8.25 4.125 4.125 0 0 0 0 8.25Zm0 3a7.125 7.125 0 1 0 0-14.25 7.125 7.125 0 0 0 0 14.25Zm10.992 6-6-6 2.122-2.121 6 6a1.5 1.5 0 1 1-2.122 2.121Z" clip-rule="evenodd"/>
   </g>
   <defs>
     <clipPath id="a">
-      <path d="M16 16h96v96H16z"/>
+      <path d="M4 4h24v24H4z"/>
     </clipPath>
   </defs>
 </svg>
diff --git a/src/img/icons/settings.svg b/src/img/icons/settings.svg
index be2926e..bfc8697 100644
--- a/src/img/icons/settings.svg
+++ b/src/img/icons/settings.svg
@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
   <g clip-path="url(#a)">
-    <path d="M107.742 41.773a26.944 26.944 0 0 1-2.808 16.212c-2.601 4.963-6.685 8.954-11.66 11.394a25.559 25.559 0 0 1-16.01 2.178c-5.428-1.025-10.396-3.785-14.183-7.88a26.72 26.72 0 0 1-6.88-14.894 26.931 26.931 0 0 1 3.076-16.162c2.683-4.917 6.832-8.837 11.846-11.19a25.553 25.553 0 0 1 16.045-1.902l-3.334 16.756a9.066 9.066 0 0 0-5.693.675 9.296 9.296 0 0 0-4.203 3.97 9.555 9.555 0 0 0-1.092 5.735 9.479 9.479 0 0 0 2.441 5.285 9.176 9.176 0 0 0 5.033 2.795 9.068 9.068 0 0 0 5.68-.773 9.304 9.304 0 0 0 4.137-4.042 9.558 9.558 0 0 0 .996-5.752l16.609-2.405Z"/>
+    <path d="M26.935 10.443a6.736 6.736 0 0 1-.702 4.053 6.555 6.555 0 0 1-2.914 2.849 6.39 6.39 0 0 1-4.003.544 6.467 6.467 0 0 1-3.546-1.97 6.68 6.68 0 0 1-1.72-3.723 6.733 6.733 0 0 1 .77-4.04 6.55 6.55 0 0 1 2.96-2.798 6.388 6.388 0 0 1 4.012-.476l-.834 4.19c-.48-.1-.978-.04-1.423.168a2.324 2.324 0 0 0-1.05.993 2.389 2.389 0 0 0 .337 2.754 2.268 2.268 0 0 0 2.678.506c.441-.216.803-.57 1.034-1.01.231-.44.318-.944.25-1.439l4.151-.6Z"/>
   </g>
-  <rect width="25" height="75.773" x="67.609" y="43.703" rx="12.5" transform="rotate(46.112 67.61 43.703)"/>
+  <path d="M14.65 13.092a3.125 3.125 0 1 1 4.333 4.505l-9.148 8.8a3.125 3.125 0 0 1-4.333-4.505l9.148-8.8Z"/>
   <defs>
     <clipPath id="a">
-      <path d="M16 16h96v96H16z"/>
+      <path d="M4 4h24v24H4z"/>
     </clipPath>
   </defs>
 </svg>
diff --git a/src/img/icons/timeline.svg b/src/img/icons/timeline.svg
index a2be615..712e88f 100644
--- a/src/img/icons/timeline.svg
+++ b/src/img/icons/timeline.svg
@@ -1,12 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
   <g clip-path="url(#a)">
-    <rect width="73" height="25" x="27.5" y="16" rx="8"/>
-    <rect width="73" height="41" x="27.5" y="47" rx="8"/>
-    <rect width="73" height="25" x="27.5" y="94" rx="8"/>
+    <path d="M6.875 6a2 2 0 0 1 2-2h14.25a2 2 0 0 1 2 2v2.25a2 2 0 0 1-2 2H8.875a2 2 0 0 1-2-2V6Zm0 7.75a2 2 0 0 1 2-2h14.25a2 2 0 0 1 2 2V20a2 2 0 0 1-2 2H8.875a2 2 0 0 1-2-2v-6.25Zm0 11.75a2 2 0 0 1 2-2h14.25a2 2 0 0 1 2 2v2.25a2 2 0 0 1-2 2H8.875a2 2 0 0 1-2-2V25.5Z"/>
   </g>
   <defs>
     <clipPath id="a">
-      <path d="M16 16h96v96H16z"/>
+      <path d="M4 4h24v24H4z"/>
     </clipPath>
   </defs>
 </svg>
diff --git a/src/img/icons/unlisted.svg b/src/img/icons/unlisted.svg
new file mode 100644
index 0000000..6b88c40
--- /dev/null
+++ b/src/img/icons/unlisted.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path fill-rule="evenodd" d="M11 10a5 5 0 0 0-5 5v11a2 2 0 0 0 2 2h4v-6a4 4 0 0 1 8 0v6h4a2 2 0 0 0 2-2V15a5 5 0 0 0-5-5H11Z" clip-rule="evenodd"/>
+  <path d="M14.593 4.392a2 2 0 0 1 2.814 0l7.26 7.186c1.27 1.257.38 3.422-1.407 3.422H8.74c-1.787 0-2.677-2.165-1.407-3.421l7.26-7.187Z"/>
+</svg>
diff --git a/src/img/icons/warning.svg b/src/img/icons/warning.svg
new file mode 100644
index 0000000..0fffc6f
--- /dev/null
+++ b/src/img/icons/warning.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+  <path fill-rule="evenodd" d="M14.268 7c.77-1.333 2.694-1.333 3.464 0l8.66 15c.77 1.333-.192 3-1.732 3H7.34c-1.54 0-2.502-1.667-1.732-3l8.66-15Zm3.805 14.035c.041 1.124-.82 2.068-1.924 2.108-1.104.041-2.032-.837-2.074-1.96-.041-1.124.82-2.068 1.924-2.11 1.104-.04 2.032.838 2.074 1.962ZM16 10a2 2 0 0 0-2 2v4a2 2 0 0 0 4 0v-4a2 2 0 0 0-2-2Z" clip-rule="evenodd"/>
+</svg>
diff --git a/src/lib/api.js b/src/lib/api.js
index 8006213..372bd49 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -197,6 +197,28 @@ export async function getPost(host, token, post_id) {
     return data;
 }
 
+/**
+ * POST /api/v1/statuses
+ * @param {string} host - The domain of the target server.
+ * @param {string} token - The application token
+ * @param {any} post_data - The post content
+ */
+export async function createPost(host, token, post_data) {
+    let formdata = new FormData();
+    for (const key in post_data) {
+        formdata.append(key, post_data[key]);
+    }
+
+    let url = `https://${host}/api/v1/statuses`;
+    const data = await fetch(url, {
+        method: 'POST',
+        headers: { "Authorization": `Bearer ${token}` },
+        body: formdata
+    })
+
+    return await data.json()
+}
+
 /**
  * GET /api/v1/statuses/{post_id}/context.
  * @param {string} host - The domain of the target server.
@@ -336,4 +358,4 @@ export async function getUser(host, token, user_id) {
     }).then(res => res.json());
 
     return data;
-}
+}
\ No newline at end of file
diff --git a/src/lib/ui/Composer.svelte b/src/lib/ui/Composer.svelte
index c8f474c..3be2a25 100644
--- a/src/lib/ui/Composer.svelte
+++ b/src/lib/ui/Composer.svelte
@@ -1,7 +1,42 @@
-<script>
+<script lang="js">
     import { account } from '@cf/store/account';
+    import * as api from '$lib/api';
+    import { server } from '$lib/client/server';
+    import { app } from '$lib/client/app';
+    import { parsePost } from '$lib/post.js';
+    import { timeline } from '$lib/timeline.js';
+    import { createEventDispatcher } from 'svelte';
+
     import Button from '@cf/ui/Button.svelte';
     import PostIcon from '@cf/icons/post.svg';
+    import MediaIcon from '@cf/icons/media.svg';
+    import PollIcon from '@cf/icons/poll.svg';
+    import WarningIcon from '@cf/icons/warning.svg';
+
+    import PublicVisIcon from '@cf/icons/public.svg';
+
+    let content_warning = ""
+    let content = "";
+    // let media_ids = [];
+    let show_cw = false;
+
+    const dispatch = createEventDispatcher();
+
+    async function buildPost() {
+        let postdata = {}
+        if(show_cw) {
+            postdata.spoiler_text = content_warning;
+        }
+
+        if(!content) return;
+        postdata.status = content;
+
+        let new_post = await api.createPost($server.host, $app.token, postdata);
+        let new_post_parsed = await parsePost(new_post);
+
+        timeline.update(current => [new_post_parsed ,...current])
+        dispatch("compose_finished")
+    }
 </script>
 
 <div class="composer">
@@ -19,25 +54,35 @@
         </header>
         <div>
             <Button centered={true}>
-                vis
+                <svelte:fragment slot="icon">
+                    <PublicVisIcon/>
+                </svelte:fragment>
             </Button>
         </div>
     </div>
-    <input type="text" id="" placeholder="content warning"/>
-    <textarea placeholder="what's cooking, mae?" class="textbox"></textarea>
+    {#if show_cw}
+        <input type="text" id="" placeholder="content warning" bind:value={content_warning}/>
+    {/if}
+    <textarea placeholder="what's cooking, mae?" class="textbox" bind:value={content}></textarea>
     <div class="composer-footer">
-        <div>
-            <Button centered={true}>
-                media
+        <div class="actions">
+            <Button centered={true} disabled>
+                <svelte:fragment slot="icon">
+                    <MediaIcon/>
+                </svelte:fragment>
             </Button>
-            <Button centered={true}>
-                poll
+            <Button centered={true} disabled>
+                <svelte:fragment slot="icon">
+                    <PollIcon/>
+                </svelte:fragment>
             </Button>
-            <Button centered={true}>
-                cw
+            <Button centered={true} active={show_cw} on:click={() => show_cw = !show_cw}>
+                <svelte:fragment slot="icon">
+                    <WarningIcon/>
+                </svelte:fragment>
             </Button>
         </div>
-        <Button filled={true} centered={true} class="postbtn">
+        <Button filled={true} centered={true} class="postbtn" on:click={buildPost}>
             <svelte:fragment slot="icon">
                 <PostIcon/>
             </svelte:fragment>
@@ -82,6 +127,14 @@
         background-color: var(--bg-700);
         color: var(--text);
         font-family: inherit;
+
+        border-radius: 8px;
+        border: 1px solid color-mix(in srgb, transparent, var(--accent) 25%);
+    }
+
+    input[type="text"]:focus, textarea:focus {
+        outline: none;
+        box-shadow: 0 0 16px color-mix(in srgb, transparent, var(--accent) 25%);
     }
 
     .textbox {
diff --git a/src/lib/ui/Modal.svelte b/src/lib/ui/Modal.svelte
index 695dc43..14e6457 100644
--- a/src/lib/ui/Modal.svelte
+++ b/src/lib/ui/Modal.svelte
@@ -1,13 +1,16 @@
 <script>
+    import { beforeUpdate } from "svelte";
     export let visible = true;
     export let centered = false;
 
-    // disable scrolling hack: this has to be on body
-    $: if(visible) {
-        document.body.style.overflowY = "hidden";
-    } else {
-        document.body.style.overflowY = "scroll";
-    }
+    beforeUpdate(() => {
+        // disable scrolling hack: this has to be on body
+        if(visible) {
+            document.body.style.overflowY = "hidden";
+        } else {
+            document.body.style.overflowY = "scroll";
+        }
+    })
 </script>
 
 {#if visible}
@@ -40,6 +43,8 @@
         box-shadow: 0px 16px 64px 4px rgba(0,0,0,0.5);
         animation: modal_pop_up .15s cubic-bezier(0.22, 1, 0.36, 1);
         height: fit-content;
+
+        pointer-events: all;
     }
 
     .overlay {
@@ -78,10 +83,12 @@
 
     @keyframes modal_pop_up {
         from {
+            opacity: 0%;
             transform: translateY(16px) scale(0.95);
         }
 
         to {
+            opacity: 100%;
             transform: translateY(0px) scale(1);
         }
     }
diff --git a/src/lib/ui/Navigation.svelte b/src/lib/ui/Navigation.svelte
index a37365a..23aff7e 100644
--- a/src/lib/ui/Navigation.svelte
+++ b/src/lib/ui/Navigation.svelte
@@ -125,7 +125,7 @@
             </Button>
         </div>
 
-        <Button filled label="Post" disabled on:click={() => dispatch("compose")}>
+        <Button filled label="Post" on:click={() => dispatch("compose")}>
             <svelte:fragment slot="icon">
                 <PostIcon/>
             </svelte:fragment>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a718d7b..df928b4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -63,7 +63,7 @@
     </div>
 
     <Modal bind:visible={show_composer}>
-        <Composer/>
+        <Composer on:compose_finished={() => show_composer = false }/>
     </Modal>
 </div>