Related links

.gitignore

@@ -1,6 +1,7 @@
 # IDEA/PhpStorm
 *.iml
 .idea/
+.run/
 .DS_Store
 supervisord.log
 supervisord.pid

assets/controllers/form-related-links_controller.js

@@ -0,0 +1,66 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['relatedContainer'];
+
+    static values = {
+        index: Number,
+        label: String,
+        value: String,
+        deleteIcon: String,
+    };
+
+    connect() {
+        const container = this.element;
+        container
+            .querySelectorAll('.related-link-row')
+            .forEach((item) => {
+                this.#addButtonDeleteLink(item);
+            });
+    }
+
+    addRelatedElement() {
+        console.log('entra');
+        console.log(this.labelValue, 'label');
+        console.log(this.valueValue, 'value');
+
+        const rowNode = document.createElement('div');
+        rowNode.className = 'related-link-row';
+
+        const nodeLabel = this.#htmlToNode(this.labelValue.replace(
+            /__name__/g,
+            this.indexValue,
+        ));
+        rowNode.appendChild(nodeLabel);
+
+        const nodeValue = this.#htmlToNode(this.valueValue.replace(
+            /__name__/g,
+            this.indexValue,
+        ));
+        rowNode.appendChild(nodeValue);
+
+        this.#addButtonDeleteLink(rowNode);
+
+        this.relatedContainerTarget.appendChild(rowNode);
+        this.indexValue++;
+    }
+
+    #addButtonDeleteLink(item) {
+        const removeFormButton = document.createElement('button');
+        removeFormButton.innerHTML = this.deleteIconValue;
+        removeFormButton.className = 'btn btn__secondary delete-button';
+
+        item.append(removeFormButton);
+
+        removeFormButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            item.remove();
+        });
+    }
+
+    #htmlToNode(html) {
+        const template = document.createElement('div');
+        template.innerHTML = html;
+        return template.firstChild;
+    }
+}

assets/controllers/subject_controller.js

@@ -199,6 +199,46 @@ export default class extends Controller {
         }
     }
 
+    /**
+     * Calls the address attached to the nearest link node. Replaces the outer html of the nearest `cssclass` parameter
+     * with the response from the link
+     */
+    async linkCallback(event) {
+        const { cssclass: cssClass, refreshlink: refreshLink, refreshselector: refreshSelector } = event.params
+        event.preventDefault();
+
+        const a = event.target.closest('a');
+
+        try {
+            this.loadingValue = true;
+
+            let response = await fetch(a.href, {
+                method: 'GET',
+            });
+
+            response = await ok(response);
+            response = await response.json();
+
+            event.target.closest(`.${cssClass}`).outerHTML = response.html;
+
+            const refreshElement = this.element.querySelector(refreshSelector)
+            console.log("linkCallback refresh stuff", refreshLink, refreshSelector, refreshElement)
+
+            if (!!refreshLink && refreshLink !== "" && !!refreshElement) {
+                let response = await fetch(refreshLink, {
+                    method: 'GET',
+                });
+
+                response = await ok(response);
+                response = await response.json();
+                refreshElement.outerHTML = response.html;
+            }
+        } catch (e) {
+        } finally {
+            this.loadingValue = false;
+        }
+    }
+
     loadingValueChanged(val) {
         const submitButton = this.containerTarget.querySelector('form button[type="submit"]');
 

assets/styles/app.scss

@@ -1,5 +1,6 @@
 @import '@fortawesome/fontawesome-free/scss/fontawesome';
 @import '@fortawesome/fontawesome-free/scss/solid';
+@import '@fortawesome/fontawesome-free/scss/regular';
 @import '@fortawesome/fontawesome-free/scss/brands';
 @import 'simple-icons-font/font/simple-icons';
 @import 'glightbox/dist/css/glightbox.min.css';
@@ -21,6 +22,7 @@
 @import 'layout/alerts';
 @import 'layout/forms';
 @import 'layout/images';
+@import 'layout/icons';
 @import 'components/announcement';
 @import 'components/topbar';
 @import 'components/header';
@@ -35,6 +37,7 @@
 @import 'components/figure_image';
 @import 'components/figure_lightbox';
 @import 'components/post';
+@import 'components/search';
 @import 'components/subject';
 @import 'components/login';
 @import 'components/modlog';
@@ -51,6 +54,7 @@
 @import 'components/settings_row';
 @import 'pages/post_single';
 @import 'pages/post_front';
+@import 'pages/page_bookmarks';
 @import 'themes/kbin';
 @import 'themes/default';
 @import 'themes/solarized';

assets/styles/components/_search.scss

@@ -0,0 +1,24 @@
+.search-container {
+  background: var(--kbin-input-bg);
+  border: var(--kbin-input-border);
+  border-radius: var(--kbin-rounded-edges-radius) !important;
+
+  input.form-control {
+    border-radius: 0 !important;
+    border: none;
+    background: transparent;
+    margin: 0 .5em;
+    padding: .5rem .25rem;
+  }
+
+  button {
+    border-radius: 0 var(--kbin-rounded-edges-radius) var(--kbin-rounded-edges-radius) 0 !important;
+    border: 0;
+    padding: 1rem 0.5rem;
+
+    &:not(:hover) {
+      background: var(--kbin-input-bg);
+      color: var(--kbin-input-text-color) !important;
+    }
+  }
+}

assets/styles/layout/_forms.scss

@@ -122,9 +122,12 @@ input[type=radio] {
   align-content: center;
   cursor: pointer;
 
+  @extend %fa-icon;
+  @extend .fa-solid;
+
   &::before {
     font-family: var(--kbin-font-awesome-font-family);
-    content: "\f00c";
+    content: fa-content($fa-var-check);
     transform: scale(0);
     transition: 100ms transform ease-in;
   }
@@ -525,3 +528,47 @@ div.input-box {
     border-radius: var(--kbin-rounded-edges-radius) !important;
   }
 }
+
+.form-control {
+  display: block;
+  width: 100
+}
+
+.related-link-fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.related-link-fieldset legend {
+  margin-bottom: 0.5rem;
+}
+
+.related-links-group {
+  margin-bottom: 0.25rem;
+}
+
+.related-link-row {
+  display: flex;
+  flex-wrap: nowrap;
+  row-gap: 0.5rem;
+  column-gap: 0.2rem;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+
+.related-link-row div {
+  margin-bottom: 0;
+  flex-grow: 1
+}
+
+.delete-button {
+  padding: 0;
+  border: 0;
+}
+
+.add-button-container {
+  display: flex;
+  margin-right: 13.9px;
+  justify-content: center;
+}

assets/styles/layout/_icons.scss

@@ -0,0 +1,3 @@
+i.active {
+  color: var(--kbin-color-icon-active, orange);
+}

assets/styles/layout/_layout.scss

@@ -214,7 +214,9 @@ figure {
   code,
   .ts-control > [data-value].item,
   .image-preview-container {
-    border-radius: var(--kbin-rounded-edges-radius) !important;
+    &:not(.ignore-edges) {
+      border-radius: var(--kbin-rounded-edges-radius) !important;
+    }
   }
 
   .ts-wrapper {
@@ -361,10 +363,20 @@ figure {
   gap: .25rem;
 }
 
+@include media-breakpoint-down(lg) {
+  .flex.mobile {
+    display: block;
+  }
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
 
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
 pre, code {
   white-space: pre-wrap;
   word-wrap: break-word;

assets/styles/layout/_section.scss

@@ -68,11 +68,3 @@
     color: var(--kbin-alert-danger-text-color);
   }
 }
-
-.page-search {
-  .section--top {
-    button {
-      padding: 1rem 1.5rem;
-    }
-  }
-}

assets/styles/pages/page_bookmarks.scss

@@ -0,0 +1,6 @@
+.page-bookmarks {
+  .entry, .entry-comment, .post, .post-comment, .comment {
+    margin-top: 0!important;
+    margin-bottom: .5em!important;
+  }
+}

config/kbin_routes/bookmark.yaml

@@ -0,0 +1,71 @@
+bookmark_front:
+    controller: App\Controller\BookmarkListController::front
+    defaults: { sortBy: hot, time: '∞', federation: all }
+    path: /bookmark-lists/show/{list}/{sortBy}/{time}/{federation}
+    methods: [GET]
+    requirements: &front_requirement
+        sortBy: "%default_sort_options%"
+        time: "%default_time_options%"
+        federation: "%default_federation_options%"
+
+bookmark_lists:
+    controller: App\Controller\BookmarkListController::list
+    path: /bookmark-lists
+    methods: [GET, POST]
+
+bookmark_lists_menu_refresh_status:
+    controller: App\Controller\BookmarkListController::subjectBookmarkMenuListRefresh
+    path: /blr/{subject_id}/{subject_type}
+    requirements:
+        subject_type: "%default_subject_type_options%"
+    methods: [ GET ]
+
+bookmark_lists_make_default:
+    controller: App\Controller\BookmarkListController::makeDefault
+    path: /bookmark-lists/makeDefault
+    methods: [GET]
+
+bookmark_lists_edit_list:
+    controller: App\Controller\BookmarkListController::editList
+    path: /bookmark-lists/editList/{list}
+    methods: [GET, POST]
+
+bookmark_lists_delete_list:
+    controller: App\Controller\BookmarkListController::deleteList
+    path: /bookmark-lists/deleteList/{list}
+    methods: [GET]
+
+subject_bookmark_standard:
+    controller: App\Controller\BookmarkController::subjectBookmarkStandard
+    path: /bos/{subject_id}/{subject_type}
+    requirements:
+        subject_type: "%default_subject_type_options%"
+    methods: [ GET ]
+
+subject_bookmark_refresh_status:
+    controller: App\Controller\BookmarkController::subjectBookmarkRefresh
+    path: /bor/{subject_id}/{subject_type}
+    requirements:
+        subject_type: "%default_subject_type_options%"
+    methods: [ GET ]
+
+subject_bookmark_to_list:
+    controller: App\Controller\BookmarkController::subjectBookmarkToList
+    path: /bol/{subject_id}/{subject_type}/{list}
+    requirements:
+        subject_type: "%default_subject_type_options%"
+    methods: [ GET ]
+
+subject_remove_bookmarks:
+    controller: App\Controller\BookmarkController::subjectRemoveBookmarks
+    path: /rbo/{subject_id}/{subject_type}
+    requirements:
+        subject_type: "%default_subject_type_options%"
+    methods: [ GET ]
+
+subject_remove_bookmark_from_list:
+    controller: App\Controller\BookmarkController::subjectRemoveBookmarkFromList
+    path: /rbol/{subject_id}/{subject_type}/{list}
+    requirements:
+        subject_type: "%default_subject_type_options%"
+    methods: [ GET ]