🚀 feat(project-support): add project proposal form and listing pages with image uploads and voting functionality

resources/views/components/input/filepond.blade.php

@@ -0,0 +1,30 @@
+<div
+    wire:ignore
+    x-data
+    x-init="
+        FilePond.registerPlugin(
+          FilePondPluginImagePreview,
+          FilePondPluginImageExifOrientation,
+          FilePondPluginFileValidateSize,
+          FilePondPluginImageEdit
+        );
+        FilePond.setOptions({
+            labelIdle: '{{ 'Drag & Drop Deiner Dateien oder <span class="filepond--label-action"> in Ordner suchen </span>' }}',
+            allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
+            server: {
+                process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
+                    @this.upload('{{ $attributes['wire:model'] }}', file, load, error, progress)
+                },
+                revert: (filename, load) => {
+                    @this.removeUpload('{{ $attributes['wire:model'] }}', filename, load)
+                },
+                load: (source, load, error, progress, abort, headers) => {
+                  @this.load('{{ $attributes['wire:model'] }}', load, error, progress, abort, headers)
+                },
+            },
+        });
+        FilePond.create($refs.input);
+    "
+>
+    <input type="file" x-ref="input" name="{{ $attributes['name'] }}">
+</div>

resources/views/components/input/group.blade.php

@@ -0,0 +1,13 @@
+@props([
+    'for',
+    'label',
+])
+<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-700 sm:pt-5">
+    <label for="{{ $for }}"
+           class="block text-sm font-medium text-gray-100 sm:mt-px sm:pt-2">
+        {{ $label }}
+    </label>
+    <div class="mt-1 sm:mt-0 sm:col-span-2">
+        {{ $slot }}
+    </div>
+</div>

resources/views/components/input/simple-mde.blade.php

@@ -0,0 +1,65 @@
+@props(['model'])
+
+<div
+    wire:ignore
+    x-data="{
+        value: $wire.entangle('{{ $model }}'),
+        init() {
+            let editor = new EasyMDE({
+                element: this.$refs.editor,
+                lineNumbers: true,
+                uploadImage: false,
+                spellChecker: false,
+{{--                imageMaxSize: 1024 * 1024 * 10,--}}
+{{--                imageUploadFunction: (file, onSuccess, onError) => {--}}
+{{--                    @this.upload('images', file, (uploadedFilename) => {--}}
+{{--                        const currentImage = @this.get('currentImage');--}}
+{{--                        const temporaryUrls = @this.get('temporaryUrls');--}}
+{{--                        onSuccess(temporaryUrls[currentImage]);--}}
+{{--                        @this.set('currentImage', currentImage + 1)--}}
+{{--                    }, () => {--}}
+{{--                        // Error callback.--}}
+{{--                    }, (event) => {--}}
+{{--                        // Progress callback.--}}
+{{--                        // event.detail.progress contains a number between 1 and 100 as the upload progresses.--}}
+{{--                    })--}}
+{{--                },--}}
+                showIcons: [
+                    'heading',
+                    'heading-smaller',
+                    'heading-bigger',
+                    'heading-1',
+                    'heading-2',
+                    'heading-3',
+                    'code',
+                    'table',
+                    'quote',
+                    'strikethrough',
+                    'unordered-list',
+                    'ordered-list',
+                    'clean-block',
+                    'horizontal-rule',
+                    'undo',
+                    'redo',
+                    //'upload-image',
+                ],
+            })
+
+            editor.value(this.value)
+
+            editor.codemirror.on('change', () => {
+                this.value = editor.value()
+            })
+        },
+    }"
+    class="w-full"
+>
+    <div class="prose max-w-none">
+        <textarea x-ref="editor"></textarea>
+    </div>
+    <style>
+        .EasyMDEContainer {
+            background-color: white;
+        }
+    </style>
+</div>

resources/views/components/layouts/app.blade.php

@@ -11,6 +11,8 @@
     @vite(['resources/js/app.js','resources/css/app.css'])
     @googlefonts
     <script src="https://kit.fontawesome.com/866fd3d0ab.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
 </head>
 <body
     class="font-sans antialiased bg-gray-100 dark:bg-[#222222] text-gray-600 dark:text-gray-400"

resources/views/components/layouts/navigation/association.blade.php

@@ -22,6 +22,14 @@
                 </div>
             </a>
         </li>
+        <li class="{{ $currentRoute === 'association.projectSupport' ? $isCurrentRouteClass : $isNotCurrentRouteClass }}">
+            <a class="block text-gray-800 dark:text-gray-100 hover:text-gray-900 dark:hover:text-white truncate transition" href="{{ route('association.projectSupport') }}">
+                <div class="flex items-center">
+                    <i class="fa-sharp-duotone fa-solid fa-hand-heart h-4 w-4"></i>
+                    <span class="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Projekt-Unterstützungen</span>
+                </div>
+            </a>
+        </li>
         <li class="{{ $currentRoute === 'association.elections' ? $isCurrentRouteClass : $isNotCurrentRouteClass }}">
             <a class="block text-gray-800 dark:text-gray-100 hover:text-gray-900 dark:hover:text-white truncate transition" href="{{ route('association.elections') }}">
                 <div class="flex items-center">