Related links

assets/controllers/form-related-links_controller.js

@@ -0,0 +1,56 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['relatedContainer'];
+
+    static values = {
+        index: Number,
+        link: String,
+    };
+
+    connect() {
+        const container = this.element;
+        container
+            .querySelectorAll('.related-link-item')
+            .forEach((item) => {
+                this.#addButtonDeleteLink(item);
+            });
+    }
+
+    addRelatedElement() {
+        console.log('addRelatedElement method');
+
+        const item = document.createElement('span');
+        item.className = 'flex related-link-item';
+
+        const nodeLink = this.#htmlToNode(this.linkValue.replace(
+            /__name__/g,
+            this.indexValue,
+        ));
+        item.append(nodeLink);
+
+        this.#addButtonDeleteLink(item);
+
+        this.relatedContainerTarget.appendChild(item);
+        this.indexValue++;
+    }
+
+    #addButtonDeleteLink(item) {
+        const removeFormButton = document.createElement('button');
+        removeFormButton.innerText = '⌫';
+        removeFormButton.className = 'btn';
+
+        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/styles/layout/_forms.scss

@@ -525,3 +525,22 @@ div.input-box {
     border-radius: var(--kbin-rounded-edges-radius) !important;
   }
 }
+
+.related-link-fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.related-link-item {
+    align-items: center;
+}
+
+.related-link-item button {
+    padding: 0;
+    background: none;
+    font-size: 1.5rem;
+    border: 0;
+    color: var(--kbin-input-text-color);
+
+}

assets/styles/layout/_layout.scss

@@ -365,6 +365,10 @@ figure {
   flex-wrap: wrap;
 }
 
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
 pre, code {
   white-space: pre-wrap;
   word-wrap: break-word;

migrations/Version20240822112013.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20240822112013 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add related links to user';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE "user" ADD related_links JSONB DEFAULT \'[]\' NOT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE "user" DROP related_links');
+    }
+}

src/DTO/UserDto.php

@@ -49,6 +49,7 @@ class UserDto implements UserDtoInterface
     public ?string $totpSecret = null;
     public ?string $serverSoftware = null;
     public ?string $serverSoftwareVersion = null;
+    public array $relatedLinks = [];
 
     #[Assert\Callback]
     public function validate(
@@ -91,6 +92,7 @@ public static function create(
         ?bool $isBot = null,
         ?bool $isAdmin = null,
         ?bool $isGlobalModerator = null,
+        array $relatedLinks = []
     ): self {
         $dto = new UserDto();
         $dto->id = $id;
@@ -107,6 +109,7 @@ public static function create(
         $dto->isBot = $isBot;
         $dto->isAdmin = $isAdmin;
         $dto->isGlobalModerator = $isGlobalModerator;
+        $dto->relatedLinks = $relatedLinks;
 
         return $dto;
     }

src/Entity/User.php

@@ -238,6 +238,9 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface, Visibil
     #[Column(type: 'string', nullable: false, options: ['default' => self::USER_TYPE_PERSON])]
     public string $type;
 
+    #[Column(type: 'json', nullable: false, options: ['jsonb' => true, 'default' => '[]'])]
+    public array $relatedLinks = [];
+
     public function __construct(
         string $email,
         string $username,
@@ -894,4 +897,14 @@ public function canUpdateUser(User $actor): bool
             return $this->apDomain === $actor->apDomain;
         }
     }
+
+    public function getRelatedLinks(): array
+    {
+        return $this->relatedLinks;
+    }
+
+    public function setRelatedLinks(array $relatedLinks): void
+    {
+        $this->relatedLinks = $relatedLinks;
+    }
 }

src/Factory/UserFactory.php

@@ -36,6 +36,7 @@ public function createDto(User $user): UserDto
             'Service' === $user->type, // setting isBot
             $user->isAdmin(),
             $user->isModerator(),
+            $user->relatedLinks,
         );
 
         /** @var User $currentUser */

src/Form/UserBasicType.php

@@ -10,9 +10,11 @@
 use App\Form\EventListener\DisableFieldsOnUserEdit;
 use App\Form\EventListener\ImageListener;
 use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\Extension\Core\Type\UrlType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 
@@ -31,7 +33,15 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
         $builder
             ->add('username', TextType::class, ['required' => false])
             ->add('about', TextareaType::class, ['required' => false])
-            ->add('submit', SubmitType::class);
+            ->add('relatedLinks', CollectionType::class, [
+                'entry_type' => UrlType::class,
+                'entry_options' => ['label' => false],
+                'label' => false,
+                'allow_add' => true,
+                'allow_delete' => true,
+            ])
+            ->add('submit', SubmitType::class)
+        ;
 
         $builder->addEventSubscriber($this->disableUsernameFieldOnUserEdit);
         $builder->addEventSubscriber($this->addAvatarFieldOnUserEdit);

src/Service/UserManager.php

@@ -211,6 +211,8 @@ public function edit(User $user, UserDto $dto): User
                 $user->setTotpSecret($dto->totpSecret);
             }
 
+            $user->relatedLinks = $dto->relatedLinks;
+
             $user->lastActive = new \DateTime();
 
             $this->entityManager->flush();

templates/user/settings/profile.html.twig

@@ -43,6 +43,41 @@
             }}) }}
             {{ form_row(form.avatar, {label: 'avatar'}) }}
             {{ form_row(form.cover, {label: 'cover'}) }}
+
+            <fieldset class='related-link-fieldset'
+                {{ stimulus_controller('form-related-links') }}
+                data-form-related-links-index-value="{{ form.relatedLinks|length }}"
+                data-form-related-links-link-value="{{ 
+                    form_widget(form.relatedLinks.vars.prototype, {
+                                label: false,
+                                row_attr: { class: 'flex-grow-1' }
+                    })|e('html_attr') 
+                }}"
+
+            >
+                <legend>{{ 'related_links'|trans }}</legend>
+
+                <div 
+                    class='related-links-group'
+                    data-form-related-links-target="relatedContainer"
+                >
+                    {% for item_form in form.relatedLinks %}
+                        <span class='flex related-link-item'>
+                            {{ form_widget(item_form, {
+                                label: false,
+                                row_attr: { class: 'flex-grow-1' }
+                            }) }}
+                        </span>
+                    {% endfor %}
+                </div>
+
+                <button 
+                    type="button"
+                    class="btn btn__primary"
+                    {{ stimulus_action('form-related-links', 'addRelatedElement') }}
+                >Add link</button>
+            </fieldset>
+
             <div class="row actions">
                 {{ form_row(form.submit, {label: 'save', attr: {class: 'btn btn__primary'}}) }}
             </div>

translations/messages.en.yaml

@@ -890,3 +890,4 @@ admin_users_suspended: Suspended
 admin_users_banned: Banned
 user_verify: Activate account
 max_image_size: Maximum file size
+related_links: Related links

translations/messages.es.yaml

@@ -532,3 +532,4 @@ marked_for_deletion_at: Marcado para eliminar el %date%
 sort_by: Ordenar por
 filter_by_subscription: Filtrar por suscripción
 filter_by_federation: Filtrar por estado de la federación
+related_links: Enlaces relacionados