add: community search

crates/app/src/public/css/style.css

@@ -157,6 +157,10 @@ p {
     margin-bottom: 0;
 }
 
+.no_p_margin img {
+    display: block !important;
+}
+
 .name {
     max-width: 250px;
     overflow: hidden;

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

@@ -33,9 +33,16 @@
     {% endif %}
 
     <div class="card-nest w-full">
-        <div class="card small flex items-center gap-2">
-            {{ icon "award" }}
-            <span>{{ text "communities:label.my_communities" }}</span>
+        <div class="card small flex items-center justify-between gap-2">
+            <div class="flex items-center gap-2">
+                {{ icon "award" }}
+                <span>{{ text "communities:label.my_communities" }}</span>
+            </div>
+
+            <a href="/communities/search" class="button quaternary small">
+                {{ icon "search" }}
+                <span>{{ text "communities:label.join_new" }}</span>
+            </a>
         </div>
 
         <div class="card flex flex-col gap-2">
@@ -45,9 +52,16 @@
     </div>
 
     <div class="card-nest w-full">
-        <div class="card small flex items-center gap-2">
-            {{ icon "trending-up" }}
-            <span>{{ text "communities:label.popular_communities" }}</span>
+        <div class="card small flex items-center justify-between gap-2">
+            <div class="flex items-center gap-2">
+                {{ icon "trending-up" }}
+                <span>{{ text "communities:label.popular_communities" }}</span>
+            </div>
+
+            <a href="/communities/search" class="button quaternary small">
+                {{ icon "search" }}
+                <span>{{ text "communities:label.search" }}</span>
+            </a>
         </div>
 
         <div class="card flex flex-col gap-2">

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

@@ -0,0 +1,45 @@
+{% extends "root.html" %} {% block head %}
+<title>Search communities - {{ config.name }}</title>
+{% endblock %} {% block body %} {{ macros::nav(selected="communities") }}
+<main class="flex flex-col gap-2">
+    <div class="card-nest">
+        <div class="card small flex items-center gap-2">
+            {{ icon "search" }}
+            <span>{{ text "communities:label.search" }}</span>
+        </div>
+
+        <form class="card flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <label for="text">{{ text "communities:label.query" }}</label>
+                <input
+                    type="text"
+                    name="text"
+                    id="text"
+                    placeholder="text"
+                    required
+                    maxlength="32"
+                    value="{{ text }}"
+                />
+            </div>
+
+            <button class="primary">{{ text "dialog:action.continue" }}</button>
+        </form>
+    </div>
+
+    <div class="card-nest">
+        <div class="card small flex items-center gap-2">
+            {{ icon "book-marked" }}
+            <span>{{ text "communities:label.search_results" }}</span>
+        </div>
+
+        <!-- prettier-ignore -->
+        <div class="card flex flex-col gap-4">
+            {% for item in list %}
+                {{ components::community_listing_card(community=item) }}
+            {% endfor %}
+
+            {{ components::pagination(page=page, items=list|length, key="&text=", value=text) }}
+        </div>
+    </div>
+</main>
+{% endblock %}

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

@@ -392,17 +392,23 @@ show_community and post.community != config.town_square %}
         </div>
     </div>
 </a>
-{%- endmacro %} {% macro pagination(page=0, items=0) -%}
+{%- endmacro %} {% macro pagination(page=0, items=0, key="", value="") -%}
 <div class="flex justify-between gap-2 w-full">
     {% if page > 0 %}
-    <a class="button quaternary" href="?page={{ page - 1 }}">
+    <a
+        class="button quaternary"
+        href="?page={{ page - 1 }}{{ key }}{{ value }}"
+    >
         {{ icon "arrow-left" }}
         <span>{{ text "general:link.previous" }}</span>
     </a>
     {% else %}
     <div></div>
     {% endif %} {% if items != 0 %}
-    <a class="button quaternary" href="?page={{ page + 1 }}">
+    <a
+        class="button quaternary"
+        href="?page={{ page + 1 }}{{ key }}{{ value }}"
+    >
         <span>{{ text "general:link.next" }}</span>
         {{ icon "arrow-right"}}
     </a>

crates/app/src/public/html/timelines/home.html

@@ -11,8 +11,14 @@
             <b>✨ Welcome to <i>{{ config.name }}</i>!</b>
         </div>
 
-        <div class="card">
-            Join some communities to populate your home timeline!
+        <div class="card no_p_margin">
+            <p>Join some communities to populate your home timeline!</p>
+            <p>
+                You can get started by
+                <a href="/communities/search"
+                    >searching for a community to join!</a
+                >
+            </p>
         </div>
     </div>
     {% else %}