add: settings presets

crates/app/src/langs/en-US.toml

@@ -32,6 +32,7 @@ version = "1.0.0"
 "general:action.copy_link" = "Copy link"
 "general:action.copy_id" = "Copy ID"
 "general:action.post" = "Post"
+"general:action.apply" = "Apply"
 "general:label.account" = "Account"
 "general:label.safety" = "Safety"
 "general:label.share" = "Share"
@@ -161,6 +162,7 @@ version = "1.0.0"
 "settings:tab.sessions" = "Sessions"
 "settings:tab.connections" = "Connections"
 "settings:tab.images" = "Images"
+"settings:tab.presets" = "Presets"
 "settings:label.change_password" = "Change password"
 "settings:label.current_password" = "Current password"
 "settings:label.delete_account" = "Delete account"

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

@@ -939,7 +939,7 @@ dialog::backdrop {
     transition: transform 0.15s;
 }
 
-.dropdown:has(.inner.open) .dropdown-arrow {
+.dropdown:has(.inner.open) .dropdown_arrow {
     transform: rotateZ(180deg);
 }
 
@@ -1119,7 +1119,7 @@ details[open] > summary {
     margin-bottom: var(--pad-1);
 }
 
-details[open] > summary::after {
+details[open]:not(.accordion) > summary::after {
     top: 0;
     left: 0;
     width: 5px;
@@ -1142,8 +1142,7 @@ details.accordion {
 }
 
 details.accordion summary {
-    background: var(--background);
+    background: var(--color-lowered);
-    border: solid 1px var(--color-super-lowered);
     border-radius: var(--radius);
     padding: var(--pad-3) var(--pad-4);
     margin: 0;
@@ -1151,11 +1150,15 @@ details.accordion summary {
     user-select: none;
 }
 
-details.accordion summary .icon {
+details.accordion summary:hover {
+    background: var(--color-super-lowered);
+}
+
+details.accordion summary .icon.dropdown_arrow {
     transition: transform 0.15s;
 }
 
-details.accordion[open] summary .icon {
+details.accordion[open] summary .icon.dropdown_arrow {
     transform: rotateZ(180deg);
 }
 
@@ -1165,13 +1168,11 @@ details.accordion[open] summary {
 }
 
 details.accordion .inner {
-    background: var(--background);
+    background: var(--color-raised);
     padding: var(--pad-3) var(--pad-4);
     border-radius: var(--radius);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    border: solid 1px var(--color-super-lowered);
-    border-top: none;
 }
 
 /* codemirror */

crates/app/src/public/html/littleweb/browser.lisp

@@ -47,7 +47,7 @@
             ("exclude" "dropdown")
             ("style" "gap: var(--pad-1) !important")
             (text "{{ components::avatar(username=user.username, size=\"24px\") }}")
-            (icon_class (text "chevron-down") (text "dropdown-arrow")))
+            (icon_class (text "chevron-down") (text "dropdown_arrow")))
 
         (text "{{ components::user_menu() }}"))
     (text "{%- endif %}"))

crates/app/src/public/html/macros.lisp

@@ -74,7 +74,7 @@
                     ("exclude" "dropdown")
                     ("style" "gap: var(--pad-1) !important")
                     (text "{{ components::avatar(username=user.username, size=\"24px\") }}")
-                    (icon_class (text "chevron-down") (text "dropdown-arrow")))
+                    (icon_class (text "chevron-down") (text "dropdown_arrow")))
 
                 (text "{{ components::user_menu() }}"))
             (text "{%- endif %} {% else %}")
@@ -84,7 +84,7 @@
                     ("class" "title")
                     ("onclick" "trigger('atto::hooks::dropdown', [event])")
                     ("exclude" "dropdown")
-                    (icon_class (text "chevron-down") (text "dropdown-arrow")))
+                    (icon_class (text "chevron-down") (text "dropdown_arrow")))
 
                 (div
                     ("class" "inner")

crates/app/src/public/html/profile/base.lisp

@@ -225,7 +225,7 @@
                                 ("onclick" "trigger('atto::hooks::dropdown', [event])")
                                 ("exclude" "dropdown")
                                 ("class" "lowered red")
-                                (icon_class (text "chevron-down") (text "dropdown-arrow"))
+                                (icon_class (text "chevron-down") (text "dropdown_arrow"))
                                 (str (text "auth:action.block")))
                             (div
                                 ("class" "inner left")

crates/app/src/public/html/profile/blocked.lisp

@@ -30,7 +30,7 @@
                         ("onclick" "trigger('atto::hooks::dropdown', [event])")
                         ("exclude" "dropdown")
                         ("class" "lowered red")
-                        (icon_class (text "chevron-down") (text "dropdown-arrow"))
+                        (icon_class (text "chevron-down") (text "dropdown_arrow"))
                         (str (text "auth:action.block")))
                     (div
                         ("class" "inner left")

crates/app/src/public/html/profile/private.lisp

@@ -57,7 +57,7 @@
                         ("onclick" "trigger('atto::hooks::dropdown', [event])")
                         ("exclude" "dropdown")
                         ("class" "lowered red")
-                        (icon_class (text "chevron-down") (text "dropdown-arrow"))
+                        (icon_class (text "chevron-down") (text "dropdown_arrow"))
                         (str (text "auth:action.block")))
                     (div
                         ("class" "inner left")

crates/app/src/public/html/profile/settings.lisp

@@ -35,6 +35,87 @@
         (text "{{ macros::profile_settings_nav_options() }}"))
 
     ; ...
+    (div
+        ("class" "w-full flex flex-col gap-2 hidden")
+        ("data-tab" "presets")
+        (div
+            ("class" "card lowered flex flex-col gap-2")
+            (a
+                ("href" "#/account")
+                ("class" "button secondary")
+                (icon (text "arrow-left"))
+                (span
+                    (str (text "general:action.back"))))
+            (div
+                ("class" "card-nest")
+                (div
+                    ("class" "card flex items-center gap-2 small")
+                    (icon (text "cooking-pot"))
+                    (span
+                        (str (text "settings:tab.presets"))))
+                (div
+                    ("class" "card flex flex-col gap-2 secondary")
+                    (p (text "Not sure where to start? Try some settings presets!"))
+                    (details
+                        ("class" "w-full accordion")
+                        (summary
+                            (icon (text "rss"))
+                            (text "Microblogging"))
+
+                        (div
+                            ("class" "inner flex flex-col gap-2")
+                            (p ("class" "fade") (text "Focus on yourself and your communities."))
+                            (ul ("id" "preset_microblogging_ul"))
+                            (button
+                                ("onclick" "apply_preset(PRESET_MICROBLOGGING)")
+                                (icon (text "settings"))
+                                (str (text "general:action.apply")))))
+
+                    (details
+                        ("class" "w-full accordion")
+                        (summary
+                            (icon (text "message-circle-heart"))
+                            (text "Q&A"))
+
+                        (div
+                            ("class" "inner flex flex-col gap-2")
+                            (p ("class" "fade") (text "Just like Neospring!"))
+                            (ul ("id" "preset_questions_ul"))
+                            (button
+                                ("onclick" "apply_preset(PRESET_QUESTIONS)")
+                                (icon (text "settings"))
+                                (str (text "general:action.apply")))))
+
+                    (details
+                        ("class" "w-full accordion")
+                        (summary
+                            (icon (text "key"))
+                            (text "Private"))
+
+                        (div
+                            ("class" "inner flex flex-col gap-2")
+                            (p ("class" "fade") (text "This preset allows you to keep your profile and posts hidden to people you aren't following."))
+                            (ul ("id" "preset_private_ul"))
+                            (button
+                                ("onclick" "apply_preset(PRESET_PRIVATE)")
+                                (icon (text "settings"))
+                                (str (text "general:action.apply")))))
+
+                    (details
+                        ("class" "w-full accordion")
+                        (summary
+                            (icon (text "eye-closed"))
+                            (text "NSFW"))
+
+                        (div
+                            ("class" "inner flex flex-col gap-2")
+                            (p ("class" "fade") (text "NSFW content is allowed if it is hidden from main timelines. This preset will help you do that quickly."))
+                            (ul ("id" "preset_nsfw_ul"))
+                            (button
+                                ("onclick" "apply_preset(PRESET_NSFW)")
+                                (icon (text "settings"))
+                                (str (text "general:action.apply")))))))))
+
     (div
         ("class" "w-full flex flex-col gap-2")
         ("data-tab" "account")
@@ -780,7 +861,23 @@
                             (text "Responses")))
                     (span
                         ("class" "fade")
-                        (text "This represents the timeline that is shown on your profile by default.")))))
+                        (text "This represents the timeline that is shown on your profile by default."))))
+            (div
+                ("class" "flex flex-col gap-2")
+                ("ui_ident" "show_presets")
+                (hr ("class" "margin"))
+                (div
+                    ("class" "card-nest")
+                    (div
+                        ("class" "card small")
+                        (b
+                            (text "Not sure what to do?")))
+                    (div
+                        ("class" "card no_p_margin")
+                        (p
+                            (text "Quickly set up your account with ")
+                            (a ("href" "/settings#/presets") (text "settings presets"))
+                            (text "!"))))))
         (button
             ("onclick" "save_settings()")
             ("id" "save_button")
@@ -1392,6 +1489,63 @@
                     });
             }
 
+            // presets
+            globalThis.apply_preset = async (preset) => {
+                if (
+                    !(await trigger(\"atto::confirm\", [
+                        \"Are you sure you would like to do this? This will change all listed settings to the listed value.\",
+                    ]))
+                ) {
+                    return;
+                }
+
+                for (const x of preset) {
+                    window.SETTING_SET_FUNCTIONS[0](x[0], x[1])
+                }
+
+                save_settings();
+            }
+
+            globalThis.render_preset_lis = (preset, id) => {
+                for (const x of preset) {
+                    console.log(id);
+                    document.getElementById(id).innerHTML += `<li><b>${x[0]}:</b> ${x[1]}</li>`;
+                }
+            }
+
+            globalThis.PRESET_MICROBLOGGING = [
+                [\"default_timeline\", \"All\"],
+                [\"all_timeline_hide_answers\", true],
+            ];
+
+            globalThis.PRESET_QUESTIONS = [
+                [\"default_timeline\", \"Following\"],
+                [\"auto_full_unlist\", true],
+                [\"enable_questions\", true],
+                [\"allow_anonymous_questions\", true],
+                [\"enable_drawings\", true],
+                [\"hide_extra_post_tabs\", true],
+            ];
+
+            globalThis.PRESET_PRIVATE = [
+                [\"private_profile\", true],
+                [\"private_last_seen\", true],
+                [\"private_communities\", true],
+                [\"private_chats\", true],
+                [\"require_account\", true],
+            ];
+
+            globalThis.PRESET_NSFW = [
+                [\"auto_unlist\", true],
+                [\"show_nsfw\", true],
+            ];
+
+            render_preset_lis(PRESET_MICROBLOGGING, \"preset_microblogging_ul\");
+            render_preset_lis(PRESET_QUESTIONS, \"preset_questions_ul\");
+            render_preset_lis(PRESET_PRIVATE, \"preset_private_ul\");
+            render_preset_lis(PRESET_NSFW, \"preset_nsfw_ul\");
+
+            // ...
             const account_settings =
                 document.getElementById(\"account_settings\");
             const profile_settings =
@@ -1411,6 +1565,7 @@
                 \"change_avatar\",
                 \"change_banner\",
                 \"default_profile_page\",
+                \"show_presets\",
             ]);
             ui.refresh_container(theme_settings, [
                 \"supporter_ad\",

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

@@ -24,6 +24,18 @@
                 (a
                     ("href" "/communities/search")
                     (text "searching for a community to join!")))))
+    (div
+        ("class" "card-nest")
+        (div
+            ("class" "card small")
+            (b
+                (text "Need help getting started?")))
+        (div
+            ("class" "card no_p_margin")
+            (p
+                (text "Quickly set up your account with ")
+                (a ("href" "/settings#/presets") (text "settings presets"))
+                (text "!"))))
     (text "{% else %}")
     (div
         ("class" "card w-full flex flex-col gap-2")