add: post tags

crates/app/src/public/html/communities/create_post.html

@@ -197,6 +197,7 @@
                     reactions_enabled: true,
                     is_nsfw: false,
                     content_warning: "",
+                    tags: "",
                 };
 
                 window.BLANK_INITIAL_SETTINGS = JSON.stringify(
@@ -238,12 +239,28 @@
                         window.POST_INITIAL_SETTINGS.content_warning,
                         "textarea",
                     ],
+                    [
+                        ["tags", "Tags"],
+                        window.POST_INITIAL_SETTINGS.tags,
+                        "input",
+                        {
+                            embed_html:
+                                '<span class="fade">Tags should be separated by a comma.</span>',
+                        },
+                    ],
                 ];
 
                 trigger("ui::generate_settings_ui", [
                     document.getElementById("post_options"),
                     settings_fields,
                     window.POST_INITIAL_SETTINGS,
+                    {
+                        tags: (new_tags) => {
+                            window.POST_INITIAL_SETTINGS.tags = new_tags
+                                .split(",")
+                                .map((t) => t.trim());
+                        },
+                    },
                 ]);
             }, 250);
         </script>

crates/app/src/public/html/components.html

@@ -253,6 +253,16 @@ and show_community and community.id != config.town_square or question %}
                     </span>
                 </details>
                 {% endif %}
+
+                <div class="flex flex-wrap gap-2 fade">
+                    {% for tag in post.context.tags %}
+                    <a
+                        href="/@{{ owner.username }}?tag={{ tag }}"
+                        class="flush fade"
+                        >#{{ tag }}</a
+                    >
+                    {% endfor %}
+                </div>
             </div>
         </div>
 

crates/app/src/public/html/post/post.html

@@ -168,6 +168,15 @@
                         settings.content_warning,
                         "textarea",
                     ],
+                    [
+                        ["tags", "Tags"],
+                        settings.tags.join(", "),
+                        "input",
+                        {
+                            embed_html:
+                                '<span class="fade">Tags should be separated by a comma.</span>',
+                        },
+                    ],
                 ];
 
                 if (can_manage_pins) {
@@ -186,7 +195,13 @@
                     ]);
                 }
 
-                ui.generate_settings_ui(element, settings_fields, settings);
+                ui.generate_settings_ui(element, settings_fields, settings, {
+                    tags: (new_tags) => {
+                        settings.tags = new_tags
+                            .split(",")
+                            .map((t) => t.trim());
+                    },
+                });
             }, 250);
         </script>
     </div>

crates/app/src/public/html/profile/posts.html

@@ -5,7 +5,7 @@ profile.settings.allow_anonymous_questions) %}
     {{ components::create_question_form(receiver=profile.id,
     header=profile.settings.motivational_header) }}
 </div>
-{% endif %} {% if pinned|length != 0 %}
+{% endif %} {% if not tag and pinned|length != 0 %}
 <div class="card-nest">
     <div class="card small flex gap-2 items-center">
         {{ icon "pin" }}
@@ -29,8 +29,11 @@ profile.settings.allow_anonymous_questions) %}
 
 <div class="card-nest">
     <div class="card small flex gap-2 items-center">
-        {{ icon "clock" }}
+        {% if not tag %} {{ icon "clock" }}
         <span>{{ text "auth:label.recent_posts" }}</span>
+        {% else %} {{ icon "tag" }}
+        <span>{{ text "auth:label.recent_with_tag" }}: <b>{{ tag }}</b></span>
+        {% endif %}
     </div>
 
     <div class="card flex flex-col gap-4">

crates/app/src/public/js/atto.js

@@ -858,7 +858,7 @@ media_theme_pref();
                 <label for="${option.key}"><b>${option.label.replaceAll("_", " ")}</b></label>
             </div>
 
-            <div class="card">
+            <div class="card flex flex-col gap-2">
                 <${option.input_element_type || "input"}
                     type="text"
                     onchange="window.set_setting_field('${option.key}', event.target.value)"
@@ -867,6 +867,8 @@ media_theme_pref();
                     id="${option.key}"
                     ${option.input_element_type === "input" ? `value="${option.value}"/>` : ">"}
 ${option.input_element_type === "textarea" ? `${option.value}</textarea>` : ""}
+
+                ${(option.attributes || { embed_html: "" }).embed_html}
             </div>
         </div>`;
     });
@@ -885,7 +887,7 @@ ${option.input_element_type === "textarea" ? `${option.value}</textarea>` : ""}
             }
 
             window.set_setting_field = (key, value) => {
-                if (settings_ref) {
+                if (settings_ref && !key_map[key]) {
                     settings_ref[key] = value;
                 } else {
                     key_map[key](value);