WIP - Feat: Implement updated feed design

app/Services/ParsableContentProviders/HashtagProviderParsable.php

@@ -24,7 +24,7 @@ function (array $matches): string {
                 $sanitizedHashtag = Str::limit($matches[3], 200, '');
 
                 return sprintf(
-                    '<a class="text-blue-500 hover:underline hover:text-blue-700 cursor-pointer" href="%s">#%s</a>',
+                    '<a class="hover:underline cursor-pointer text-pink-500" href="%s">#%s</a>',
                     "/hashtag/{$sanitizedHashtag}",
                     $sanitizedHashtag
                 );

app/View/Components/MainLayout.php

@@ -0,0 +1,25 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+final class MainLayout extends Component
+{
+    /**
+     * Create a new component instance.
+     * Set the background image for the layout.
+     */
+    public function __construct(public string $backgroundImage = '') {}
+
+    /**
+     * Get the view / contents that represents the component.
+     */
+    public function render(): View
+    {
+        return view('layouts.main');
+    }
+}

app/View/Components/Sidebar.php

@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\View\Components;
+
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+final class Sidebar extends Component
+{
+    public function render(): View
+    {
+        return view('layouts.components.sidebar');
+    }
+}

resources/js/app.js

@@ -69,4 +69,7 @@ Alpine.data('viewCreate', viewCreate);
 import { themeSwitch } from './theme-switch.js';
 Alpine.data('themeSwitch', themeSwitch);
 
+import { toggle } from './toggle.js';
+Alpine.data('toggle', toggle);
+
 Livewire.start()

resources/js/toggle.js

@@ -0,0 +1,57 @@
+const toggle = () => ({
+    sidebar: null,
+    tempDisabled: false,
+    isLargeScreen: false,
+
+    init() {
+        this.sidebar = this.$refs.sidebar;
+
+        const mediaQuery = window.matchMedia('(min-width: 1280px)');
+
+        this.checkMatch(mediaQuery);
+
+        mediaQuery.addEventListener('change', (e) => {
+            this.checkMatch(e);
+        });
+    },
+
+    checkMatch(event) {
+        if (event.matches) {
+            this.isLargeScreen = true;
+            this.sidebar.classList.remove('hidden');
+            this.sidebar.classList.add('flex');
+            this.sidebar.classList.add('bg-black/10');
+            this.sidebar.classList.remove('bg-section-black');
+        } else {
+            this.isLargeScreen = false;
+            this.sidebar.classList.add('hidden');
+            this.sidebar.classList.remove('flex');
+            this.sidebar.classList.remove('bg-black/10');
+            this.sidebar.classList.add('bg-section-black');
+        }
+    },
+
+    toggleSidebar(e) {
+        if (e.target !== this.sidebar) {
+            this.tempDisabled = true;
+            this.sidebar.classList.toggle('hidden');
+            this.sidebar.classList.contains('hidden')
+                ? this.sidebar.classList.remove('flex')
+                : this.sidebar.classList.add('flex');
+            setTimeout(() => {
+                this.tempDisabled = false;
+            }, 100);
+        }
+    },
+
+    closeSidebar(e) {
+        if (!this.sidebar.classList.contains('hidden') && !this.tempDisabled && !this.isLargeScreen) {
+            if (e.target !== this.sidebar) {
+                console.log('close sidebar');
+                this.sidebar.classList.add('hidden');
+            }
+        }
+    }
+});
+
+export { toggle };

resources/views/brand/resources.blade.php

@@ -1,4 +1,4 @@
-<x-app-layout>
+<x-guest-layout>
     <div class="mx-auto my-16 max-w-7xl px-6 lg:px-8">
         <a
             href="{{ url()->previous() === request()->url() ? '/' : url()->previous() }}"
@@ -82,4 +82,4 @@ class="absolute -bottom-10 text-sm hover:no-underline"
             </div>
         </div>
     </div>
-</x-app-layout>
+</x-guest-layout>

resources/views/changelog.blade.php

@@ -1,4 +1,4 @@
-<x-app-layout>
+<x-guest-layout>
     <x-slot name="title">Changelog</x-slot>
 
     <div class="flex flex-col items-center justify-center">
@@ -72,4 +72,4 @@ class="size-[600px] bg-gradient-to-r dark:from-pink-900 from-pink-50 dark:to-pin
             </div>
         </div>
     </div>
-</x-app-layout>
+</x-guest-layout>

resources/views/components/avatar-with-name.blade.php

@@ -2,20 +2,21 @@
 
 <a
     href="{{ route('profile.show', ['username' => $user->username]) }}"
-    class="group flex items-center gap-3 px-4"
+    class="group/profile flex items-center gap-3"
+    data-navigate-ignore="true"
     wire:navigate
 >
-    <figure class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10 flex-shrink-0 dark:bg-slate-800 bg-slate-200 transition-opacity group-hover:opacity-90">
+    <figure class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} size-10 flex-shrink-0 dark:bg-gray-800 bg-slate-100 transition-opacity group-hover/profile:opacity-90">
         <img
             src="{{ $user->avatar_url }}"
             alt="{{ $user->username }}"
-            class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} h-10 w-10"
+            class="{{ $user->is_company_verified ? 'rounded-md' : 'rounded-full' }} size-10"
         />
     </figure>
 
     <div class="overflow-hidden text-sm">
-        <div class="flex">
-            <p class="truncate font-medium dark:text-slate-50 text-slate-950">
+        <div class="items flex">
+            <p class="truncate font-medium dark:text-gray-50 text-slate-950">
                 {{ $user->name }}
             </p>
 
@@ -32,7 +33,7 @@ class="ml-1 mt-0.5 h-3.5 w-3.5"
             @endif
         </div>
 
-        <p class="truncate text-slate-500 transition-colors dark:group-hover:text-slate-400 group-hover:text-slate-600">
+        <p class="truncate text-slate-500 transition-colors dark:group-hover/profile:text-slate-400 group-hover/profile:text-slate-600">
             {{ '@'.$user->username }}
         </p>
     </div>

resources/views/components/comments.blade.php

@@ -7,13 +7,18 @@
 @endphp
 
 @if($question->children->isNotEmpty())
-    <div class="pl-3">
-        @foreach($question->children as $comment)
-            @break($loop->depth > 5)
+        <ul class="divide-y divide-white/5">
+            @foreach($question->children as $comment)
+                <li
+                    class="cursor-pointer hover:bg-gray-800/20"
+                    style="padding-left: {{ $loop->depth * 16 }}px"
+                >
+                    @break($loop->depth > 5)
 
-            <livewire:questions.show :question-id="$comment->id" :inThread='true' :wire:key="$comment->id" />
+                    <livewire:questions.show :question-id="$comment->id" :inThread='true' :wire:key="$comment->id"/>
+                </li>
 
-            <x-comments :question="$comment" />
-        @endforeach
-    </div>
+                <x-comments :question="$comment"/>
+            @endforeach
+        </ul>
 @endif

resources/views/components/home-menu.blade.php

@@ -1,54 +1,32 @@
-<div class="mb-8 flex justify-between space-x-2">
+<div class="text-sm space-x-1">
     <a
-        data-pan="home-tabs-feed"
-        href="{{ route('home.feed') }}"
-        class="{{ request()->routeIs('home.feed') ? 'bg-pink-600 text-slate-100' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
-        title="{{ __('Feed') }}"
+        data-pan="home-tabs-trending"
+        href="{{ route('home.trending') }}"
+        title="{{ __('Trending') }}"
+        class="{{ request()->routeIs('home.trending') ? 'bg-gray-800 text-white' : 'hover:bg-gray-800 text-gray-400' }} rounded-md px-2.5 py-1.5"
         wire:navigate
         wire:transition
     >
-        <x-heroicon-o-home
-            class="h-6 w-6 xsm:mr-2" />
-        <span class="hidden xsm:inline">{{ __('Feed') }}</span>
+        {{ __('Trending') }}
     </a>
-
     <a
         data-pan="home-tabs-following"
         href="{{ route('home.following') }}"
-        class="{{ request()->routeIs('home.following') ? 'bg-pink-600 text-slate-100' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
         title="{{ __('Following') }}"
+        class="{{ request()->routeIs('home.following') ? 'bg-gray-800 text-white' : 'hover:bg-gray-800 text-gray-400' }} rounded-md px-2.5 py-1.5"
         wire:navigate
         wire:transition
     >
-        <x-heroicon-o-heart
-            class="h-6 w-6 xsm:mr-2" />
-        <span class="hidden xsm:inline">{{ __('Following') }}</span>
+        {{ __('Following') }}
     </a>
-
     <a
-        data-pan="home-tabs-trending"
-        href="{{ route('home.trending') }}"
-        class="{{ request()->routeIs('home.trending') ? 'bg-pink-600 text-slate-100' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
-        title="{{ __('Trending') }}"
-        wire:navigate
-        wire:transition
-    >
-        <x-heroicon-m-fire
-            color="currentColor"
-            class="h-6 w-6 xsm:mr-2"
-        />
-        <span class="hidden xsm:inline">{{ __('Trending') }}</span>
-    </a>
-
-    <a
-        data-pan="home-tabs-search"
-        href="{{ route('home.users') }}"
-        class="{{ request()->routeIs('home.users') ? 'bg-pink-600 text-slate-100' : 'dark:text-slate-500 text-slate-400 dark:hover:text-slate-100 hover:text-slate-800 dark:bg-slate-900 bg-slate-50 ' }} inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md border dark:border-transparent border-slate-200 px-3 py-2 text-sm font-medium leading-4 transition duration-150 ease-in-out focus:outline-none"
-        title="{{ __('Search') }}"
+        data-pan="home-tabs-feed"
+        href="{{ route('home.feed') }}"
+        title="{{ __('Recent') }}"
+        class="{{ request()->routeIs('home.feed') ? 'bg-gray-800 text-white' : 'hover:bg-gray-800 text-gray-400' }} rounded-md px-2.5 py-1.5"
         wire:navigate
         wire:transition
     >
-        <x-heroicon-o-magnifying-glass class="h-6 w-6 xsm:mr-2" />
-        <span class="hidden xsm:inline">{{ __('Search') }}</span>
+        {{ __('Recent') }}
     </a>
 </div>

resources/views/components/icons/camera.blade.php

@@ -6,5 +6,14 @@
     stroke="currentColor"
     {{ $attributes }}
 >
-    <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
+    <path
+        d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"
+    ></path>
+    <circle cx="16.5" cy="7.5" r="1.5"></circle>
+    <path
+        d="M16 22C15.3805 19.7749 13.9345 17.7821 11.8765 16.3342C9.65761 14.7729 6.87163 13.9466 4.01569 14.0027C3.67658 14.0019 3.33776 14.0127 3 14.0351"
+        stroke-linejoin="round"></path>
+    <path
+        d="M13 18C14.7015 16.6733 16.5345 15.9928 18.3862 16.0001C19.4362 15.999 20.4812 16.2216 21.5 16.6617"
+        stroke-linejoin="round"></path>
 </svg>

resources/views/components/icons/chart.blade.php

@@ -1,8 +1,19 @@
 <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="currentColor"
+    fill="none"
     {{ $attributes }}
 >
-    <path d="M3 5v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2H5c-1.103 0-2 .897-2 2zm16.001 14H5V5h14l.001 14z"></path><path d="M11 7h2v10h-2zm4 3h2v7h-2zm-8 2h2v5H7z"></path>
+    <path
+        d="M3.5 9.5V18.5C3.5 18.9659 3.5 19.1989 3.57612 19.3827C3.67761 19.6277 3.87229 19.8224 4.11732 19.9239C4.30109 20 4.53406 20 5 20C5.46594 20 5.69891 20 5.88268 19.9239C6.12771 19.8224 6.32239 19.6277 6.42388 19.3827C6.5 19.1989 6.5 18.9659 6.5 18.5V9.5C6.5 9.03406 6.5 8.80109 6.42388 8.61732C6.32239 8.37229 6.12771 8.17761 5.88268 8.07612C5.69891 8 5.46594 8 5 8C4.53406 8 4.30109 8 4.11732 8.07612C3.87229 8.17761 3.67761 8.37229 3.57612 8.61732C3.5 8.80109 3.5 9.03406 3.5 9.5Z"
+        stroke="currentColor" stroke-width="1.5" stroke-linecap="square"
+        stroke-linejoin="round"></path>
+    <path
+        d="M10.5 5.5V18.4995C10.5 18.9654 10.5 19.1984 10.5761 19.3822C10.6776 19.6272 10.8723 19.8219 11.1173 19.9234C11.3011 19.9995 11.5341 19.9995 12 19.9995C12.4659 19.9995 12.6989 19.9995 12.8827 19.9234C13.1277 19.8219 13.3224 19.6272 13.4239 19.3822C13.5 19.1984 13.5 18.9654 13.5 18.4995V5.5C13.5 5.03406 13.5 4.80109 13.4239 4.61732C13.3224 4.37229 13.1277 4.17761 12.8827 4.07612C12.6989 4 12.4659 4 12 4C11.5341 4 11.3011 4 11.1173 4.07612C10.8723 4.17761 10.6776 4.37229 10.5761 4.61732C10.5 4.80109 10.5 5.03406 10.5 5.5Z"
+        stroke="currentColor" stroke-width="1.5" stroke-linecap="square"
+        stroke-linejoin="round"></path>
+    <path
+        d="M17.5 12.5V18.5C17.5 18.9659 17.5 19.1989 17.5761 19.3827C17.6776 19.6277 17.8723 19.8224 18.1173 19.9239C18.3011 20 18.5341 20 19 20C19.4659 20 19.6989 20 19.8827 19.9239C20.1277 19.8224 20.3224 19.6277 20.4239 19.3827C20.5 19.1989 20.5 18.9659 20.5 18.5V12.5C20.5 12.0341 20.5 11.8011 20.4239 11.6173C20.3224 11.3723 20.1277 11.1776 19.8827 11.0761C19.6989 11 19.4659 11 19 11C18.5341 11 18.3011 11 18.1173 11.0761C17.8723 11.1776 17.6776 11.3723 17.5761 11.6173C17.5 11.8011 17.5 12.0341 17.5 12.5Z"
+        stroke="currentColor" stroke-width="1.5" stroke-linecap="square"
+        stroke-linejoin="round"></path>
 </svg>

resources/views/components/icons/chat-bubble.blade.php

@@ -6,5 +6,9 @@
     stroke="currentColor"
     {{ $attributes }}
 >
-    <path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 0 1-.923 1.785A5.969 5.969 0 0 0 6 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337Z" />
+    <path d="M8 13.5H16M8 8.5H12"
+          stroke-linecap="round" stroke-linejoin="round"></path>
+    <path
+        d="M6.09881 19C4.7987 18.8721 3.82475 18.4816 3.17157 17.8284C2 16.6569 2 14.7712 2 11V10.5C2 6.72876 2 4.84315 3.17157 3.67157C4.34315 2.5 6.22876 2.5 10 2.5H14C17.7712 2.5 19.6569 2.5 20.8284 3.67157C22 4.84315 22 6.72876 22 10.5V11C22 14.7712 22 16.6569 20.8284 17.8284C19.6569 19 17.7712 19 14 19C13.4395 19.0125 12.9931 19.0551 12.5546 19.155C11.3562 19.4309 10.2465 20.0441 9.14987 20.5789C7.58729 21.3408 6.806 21.7218 6.31569 21.3651C5.37769 20.6665 6.29454 18.5019 6.5 17.5"
+        stroke-linecap="round"></path>
 </svg>

resources/views/components/icons/login.blade.php

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+     {{ $attributes }}
+     stroke="currentColor">
+    <path d="M8 12H16M8 12C8 11.2998 9.9943 9.99153 10.5 9.5M8 12C8 12.7002 9.9943 14.0085 10.5 14.5"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"
+          stroke="currentColor" stroke-width="1.5"/>
+</svg>

resources/views/components/icons/menu.blade.php

@@ -0,0 +1,13 @@
+<svg
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+    data-slot="icon"
+    {{ $attributes }}
+>
+    <path
+        fill-rule="evenodd"
+        d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z"
+        clip-rule="evenodd"
+    ></path>
+</svg>

resources/views/components/icons/notifications.blade.php

@@ -0,0 +1,12 @@
+<svg {{ $attributes }}
+     xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 24 24"
+     fill="none">
+    <path
+            d="M2.52992 14.7696C2.31727 16.1636 3.268 17.1312 4.43205 17.6134C8.89481 19.4622 15.1052 19.4622 19.5679 17.6134C20.732 17.1312 21.6827 16.1636 21.4701 14.7696C21.3394 13.9129 20.6932 13.1995 20.2144 12.5029C19.5873 11.5793 19.525 10.5718 19.5249 9.5C19.5249 5.35786 16.1559 2 12 2C7.84413 2 4.47513 5.35786 4.47513 9.5C4.47503 10.5718 4.41272 11.5793 3.78561 12.5029C3.30684 13.1995 2.66061 13.9129 2.52992 14.7696Z"
+            stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+            stroke-linejoin="round"></path>
+    <path d="M8 19C8.45849 20.7252 10.0755 22 12 22C13.9245 22 15.5415 20.7252 16 19"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+          stroke-linejoin="round"></path>
+</svg>

resources/views/components/icons/register.blade.php

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 24 24"
+     fill="none"
+     stroke="currentColor"
+    {{ $attributes }}>
+>
+    <path d="M5.18007 15.2964C3.92249 16.0335 0.625213 17.5386 2.63348 19.422C3.6145 20.342 4.7071 21 6.08077 21H13.9192C15.2929 21 16.3855 20.342 17.3665 19.422C19.3748 17.5386 16.0775 16.0335 14.8199 15.2964C11.8709 13.5679 8.12906 13.5679 5.18007 15.2964Z"
+          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M14 7C14 9.20914 12.2091 11 10 11C7.79086 11 6 9.20914 6 7C6 4.79086 7.79086 3 10 3C12.2091 3 14 4.79086 14 7Z"
+          stroke="currentColor" stroke-width="1.5"/>
+    <path d="M19.5 4V9M22 6.5L17 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+          stroke-linejoin="round"/>
+</svg>