set up list management

2025-12-13 19:33:52 -06:00 · 2025-12-13 19:33:52 -06:00 · 73d6578857
commit 73d6578857
parent 0c42bef077
26 changed files with 495 additions and 230 deletions
--- a/app/Livewire/Forms/FilterForm.php
+++ b/app/Livewire/Forms/FilterForm.php
@ -0,0 +1,11 @@
+<?php
+
+namespace App\Livewire\Forms;
+
+use Livewire\Attributes\Validate;
+use Livewire\Form;
+
+class FilterForm extends Form
+{
+    //
+}
--- a/app/Livewire/Forms/SettingsForm.php
+++ b/app/Livewire/Forms/SettingsForm.php
@ -0,0 +1,33 @@
+<?php
+
+namespace App\Livewire\Forms;
+
+use App\Models\MovieList;
+use Livewire\Attributes\Locked;
+use Livewire\Form;
+
+class SettingsForm extends Form
+{
+    #[Locked]
+    public ?int $listId = null;
+
+    public bool $isPublic = false;
+    public string $name = "";
+
+    public function setList(MovieList $list): void
+    {
+        $this->name = $list->name;
+        $this->listId = $list->id;
+        $this->isPublic = $list->is_public;
+    }
+
+    public function save(): void
+    {
+        if ($this->listId) {
+            $list = MovieList::find($this->listId);
+            $list->name = $this->name;
+            $list->is_public = $this->isPublic;
+            $list->save();
+        }
+    }
+}
--- a/app/Livewire/MovieDetailsPanel.php
+++ b/app/Livewire/MovieDetailsPanel.php
@ -0,0 +1,31 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\Movie;
+use Livewire\Component;
+
+class MovieDetailsPanel extends Component
+{
+    public $showDetails = false;
+    public ?Movie $selectedMovie = null;
+
+    protected $listeners = ['openMovieDetails' => 'openPanel'];
+
+    public function openPanel(int $movieId): void
+    {
+        $this->selectedMovie = Movie::find($movieId);
+        $this->showDetails = true;
+    }
+
+    public function closePanel(): void
+    {
+        $this->showDetails = false;
+        $this->selectedMovie = null;
+    }
+
+    public function render()
+    {
+        return view('livewire.movie-details-panel');
+    }
+}
--- a/app/Livewire/MovieList.php
+++ b/app/Livewire/MovieList.php
@ -3,18 +3,25 @@
 namespace App\Livewire;

 use App\Livewire\Forms\MovieListForm;
-use App\Models\Interfaces\MovieDbInterface;
+use App\Livewire\Forms\SettingsForm;
 use App\Models\MovieList as MovieListModel;
 use Livewire\Component;
-use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

 class MovieList extends Component
 {
    public int $id;
-    public string $query;
    public MovieListModel $list;
    public $movies = [];
+    public string $filterText = "";
+    public $filteredMovies = [];
    public MovieListForm $form;
+    public SettingsForm $settingsForm;
+    public bool $showSettings = false;
+
+    protected $listeners = [
+        'movie-added' => 'getList',
+        'list-updated' => 'getList'
+    ];

    public function mount($id): void
    {
@ -30,25 +37,33 @@ class MovieList extends Component
        if ($list) {
            $this->list = $list;
            $this->movies = $list->movies;
+            $this->filteredMovies = $list->movies;
+            $this->settingsForm->setList($list);
        } else {
            abort(404);
        }
    }

-    public function addMovie(MovieDbInterface $movie_db)
+    public function filterMovies(): void
    {
-        $this->resetErrorBag();
-
-        try {
-            $movie = $movie_db->search($this->query);
-        } catch (NotFoundHttpException $e) {
-            $this->addError('query', 'Movie not found');
-            return;
+        $this->filteredMovies = collect($this->movies)
+            ->filter(fn($movie) => stripos($movie->title, $this->filterText) !== false);
    }

-        $this->list->movies()->syncWithoutDetaching($movie->id);
+    public function toggleSettings(): void
+    {
+        $this->showSettings = !$this->showSettings;
+    }
+
+    public function saveSettings(): void
+    {
+        $this->settingsForm->save();
        $this->getList();
-        $this->form->reset();
+    }
+
+    public function updatedSettingsForm(): void
+    {
+        $this->settingsForm->save();
    }

    public function render()
--- a/app/Livewire/SearchPanel.php
+++ b/app/Livewire/SearchPanel.php
@ -0,0 +1,54 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\Interfaces\MovieDbInterface;
+use App\Models\Movie;
+use App\Models\MovieList as MovieListModel;
+use App\Services\OmdbService;
+use Livewire\Component;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+
+class SearchPanel extends Component
+{
+    public $showSearch = false;
+    public $query = '';
+    public $results = [];
+    public int $listId;
+
+    protected $listeners = ['openSearch' => 'openSearchPanel'];
+
+    public function openSearchPanel(): void
+    {
+        $this->showSearch = true;
+    }
+
+    public function findMovies(MovieDbInterface $movie_db): void
+    {
+        try {
+            //$movie = $movie_db->search($this->query, ["type" => "imdb"]);
+            $this->results = $movie_db->search($this->query, ["type" => "title"]);
+        } catch (NotFoundHttpException $e) {
+            $this->addError('query', 'Movie not found');
+        }
+    }
+
+    public function addMovie(MovieDbInterface $movieDb, string $imdbId): void
+    {
+        $this->resetErrorBag();
+        $movie = $movieDb->searchByImdbId($imdbId);
+
+        $list = MovieListModel::find($this->listId);
+        $list->movies()->syncWithoutDetaching($movie->id);
+
+        $this->dispatch('movie-added');
+        $this->showSearch = false;
+        $this->query = '';
+        $this->results = [];
+    }
+
+    public function render()
+    {
+        return view('livewire.search-panel');
+    }
+}
--- a/app/Providers/FortifyServiceProvider.php
+++ b/app/Providers/FortifyServiceProvider.php
@ -10,6 +10,7 @@ use Illuminate\Support\Facades\RateLimiter;
 use Illuminate\Support\ServiceProvider;
 use Illuminate\Support\Str;
 use Laravel\Fortify\Fortify;
+use Laravel\Fortify\Contracts\LoginResponse;

 class FortifyServiceProvider extends ServiceProvider
 {
--- a/app/Services/OmdbService.php
+++ b/app/Services/OmdbService.php
@ -8,6 +8,7 @@ use App\Models\User;
 use Exception;
 use Illuminate\Support\Facades\Http;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+use function Symfony\Component\Translation\t;

 class OmdbService implements MovieDbInterface
 {
@ -20,14 +21,26 @@ class OmdbService implements MovieDbInterface
        $this->user = auth()->user();
    }

-    public function search(string $query, array $options = [])
+    public function search(string $query, array $options = []): array|Movie
    {
-        $movie = Http::get($this->url . "&t=" . $query)->json();
+        $searchType = $options["type"] ?? "title";
+
+        $result = match ($searchType) {
+            'imdb' => $this->searchByImdbId($query),
+            'title' => $this->searchByTitle($query),
+            default => $this->searchByTitle($query),
+        };
+
+        return $result;
+    }
+
+    public function searchByImdbId(string $imdbId)
+    {
+        $movie = Http::get($this->url . "&i=" . $imdbId)->json();
        if ($movie['Response'] !== 'True') {
            throw new NotFoundHttpException("Movie not found");
        }

-        logger()->debug("Movie from OMDB: " . json_encode($movie));
        try {
            $existing_movie = $this->movie->where('imdb_id', $movie['imdbID'])->firstOrFail();
            return $existing_movie;
@ -38,4 +51,25 @@ class OmdbService implements MovieDbInterface
            );
        }
    }
+
+    public function searchByTitle(string $title)
+    {
+        $search_results = Http::get($this->url . "&s=" . $title . "&type=movie")->json();
+        if ($search_results['Response'] !== 'True') {
+            throw new NotFoundHttpException("Movie not found");
+        }
+
+        $movies = [];
+        foreach ($search_results['Search'] as $result) {
+            $movies[] = [
+                'title' => $result['Title'] ?? "",
+                'year' => $result['Year'] ?? "",
+                'imdb_id' => $result['imdbID'] ?? "",
+                'type' => $result['Type'] ?? "",
+                'poster' => $result['Poster'] ?? ""
+            ];
+        }
+
+        return $movies;
+    }
 }
--- a/config/fortify.php
+++ b/config/fortify.php
@ -73,7 +73,7 @@ return [
    |
    */

-    'home' => '/dashboard',
+    'home' => '/lists',

    /*
    |--------------------------------------------------------------------------
--- a/package-lock.json
+++ b/package-lock.json
@ -5,6 +5,7 @@
    "packages": {
        "": {
            "dependencies": {
+                "@fortawesome/fontawesome-free": "^7.1.0",
                "@tailwindcss/vite": "^4.1.11",
                "autoprefixer": "^10.4.20",
                "axios": "^1.7.4",
@ -448,6 +449,15 @@
                "node": ">=18"
            }
        },
+        "node_modules/@fortawesome/fontawesome-free": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.1.0.tgz",
+            "integrity": "sha512-+WxNld5ZCJHvPQCr/GnzCTVREyStrAJjisUPtUxG5ngDA8TMlPnKp6dddlTpai4+1GNmltAeuk1hJEkBohwZYA==",
+            "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+            "engines": {
+                "node": ">=6"
+            }
+        },
        "node_modules/@isaacs/fs-minipass": {
            "version": "4.0.1",
            "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -7,6 +7,7 @@
        "dev": "vite"
    },
    "dependencies": {
+        "@fortawesome/fontawesome-free": "^7.1.0",
        "@tailwindcss/vite": "^4.1.11",
        "autoprefixer": "^10.4.20",
        "axios": "^1.7.4",
--- a/resources/css/app.css
+++ b/resources/css/app.css
@ -1,4 +1,5 @@
@import 'tailwindcss';
+@import '@fortawesome/fontawesome-free/css/all.css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
--- a/resources/views/components/header.blade.php
+++ b/resources/views/components/header.blade.php
@ -1,9 +1,9 @@
-<div class="text-white flex flex-col gap-5 sm:flex-row sm:justify-between sm:m-5 mt-5 items-center">
-    <x-site-logo/>
+<div class="text-white flex flex-col gap-5 sm:flex-row justify-between mt-5 items-center pb-5 border-b-2">
+    <x-ui.site-logo/>
    @auth
        <ul class="flex flex-row gap-4 font-bold text-2xl my-auto">
            <li><a href="/lists" wire:navigate>Lists</a></li>
-            <li>Schedule</li>
+            <!-- <li>Schedule</li> -->
            <li>
                <form method="POST" action="{{ route('logout') }}" class="inline">
                    @csrf
--- a/resources/views/components/layouts/app/header.blade.php
+++ b/resources/views/components/layouts/app/header.blade.php
@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
-    <head>
-        @include('partials.head')
-    </head>
-    <body class="min-h-screen bg-white dark:bg-zinc-800">
-        <flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
-            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
-
-            <a href="{{ route('dashboard') }}" class="ms-2 me-5 flex items-center space-x-2 rtl:space-x-reverse lg:ms-0" wire:navigate>
-                <x-app-logo />
-            </a>
-
-            <flux:navbar class="-mb-px max-lg:hidden">
-                <flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
-                    {{ __('Dashboard') }}
-                </flux:navbar.item>
-            </flux:navbar>
-
-            <flux:spacer />
-
-            <flux:navbar class="me-1.5 space-x-0.5 rtl:space-x-reverse py-0!">
-                <flux:tooltip :content="__('Search')" position="bottom">
-                    <flux:navbar.item class="!h-10 [&>div>svg]:size-5" icon="magnifying-glass" href="#" :label="__('Search')" />
-                </flux:tooltip>
-                <flux:tooltip :content="__('Repository')" position="bottom">
-                    <flux:navbar.item
-                        class="h-10 max-lg:hidden [&>div>svg]:size-5"
-                        icon="folder-git-2"
-                        href="https://github.com/laravel/livewire-starter-kit"
-                        target="_blank"
-                        :label="__('Repository')"
-                    />
-                </flux:tooltip>
-                <flux:tooltip :content="__('Documentation')" position="bottom">
-                    <flux:navbar.item
-                        class="h-10 max-lg:hidden [&>div>svg]:size-5"
-                        icon="book-open-text"
-                        href="https://laravel.com/docs/starter-kits#livewire"
-                        target="_blank"
-                        label="Documentation"
-                    />
-                </flux:tooltip>
-            </flux:navbar>
-
-            <!-- Desktop User Menu -->
-            <flux:dropdown position="top" align="end">
-                <flux:profile
-                    class="cursor-pointer"
-                    :initials="auth()->user()->initials()"
-                />
-
-                <flux:menu>
-                    <flux:menu.radio.group>
-                        <div class="p-0 text-sm font-normal">
-                            <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
-                                <span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
-                                    <span
-                                        class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
-                                    >
-                                        {{ auth()->user()->initials() }}
-                                    </span>
-                                </span>
-
-                                <div class="grid flex-1 text-start text-sm leading-tight">
-                                    <span class="truncate font-semibold">{{ auth()->user()->name }}</span>
-                                    <span class="truncate text-xs">{{ auth()->user()->email }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </flux:menu.radio.group>
-
-                    <flux:menu.separator />
-
-                    <flux:menu.radio.group>
-                        <flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
-                    </flux:menu.radio.group>
-
-                    <flux:menu.separator />
-
-                    <form method="POST" action="{{ route('logout') }}" class="w-full">
-                        @csrf
-                        <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
-                            {{ __('Log Out') }}
-                        </flux:menu.item>
-                    </form>
-                </flux:menu>
-            </flux:dropdown>
-        </flux:header>
-
-        <!-- Mobile Menu -->
-        <flux:sidebar stashable sticky class="lg:hidden border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
-            <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
-
-            <a href="{{ route('dashboard') }}" class="ms-1 flex items-center space-x-2 rtl:space-x-reverse" wire:navigate>
-                <x-app-logo />
-            </a>
-
-            <flux:navlist variant="outline">
-                <flux:navlist.group :heading="__('Platform')">
-                    <flux:navlist.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
-                      {{ __('Dashboard') }}
-                    </flux:navlist.item>
-                </flux:navlist.group>
-            </flux:navlist>
-
-            <flux:spacer />
-
-            <flux:navlist variant="outline">
-                <flux:navlist.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
-                    {{ __('Repository') }}
-                </flux:navlist.item>
-
-                <flux:navlist.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
-                    {{ __('Documentation') }}
-                </flux:navlist.item>
-            </flux:navlist>
-        </flux:sidebar>
-
-        {{ $slot }}
-
-        @fluxScripts
-    </body>
-</html>
--- a/resources/views/components/movie.blade.php
+++ b/resources/views/components/movie.blade.php
@ -1,5 +1,5 @@
@props(['movie'])
-<div class="flex flex-col bg-gray-500 w-full h-full">
-    <img class="object-fill col-span-2" src="{{$movie->poster}}" alt="{{$movie->title}}">
-    <!-- <span class="text-center p-2">{{$movie->title}}</span> -->
+<div class="flex flex-col bg-gray-500 w-full h-full cursor-pointer hover:bg-gray-600 transition-colors"
+     wire:click="$dispatch('openMovieDetails', { movieId: {{ $movie->id }} })">
+    <img class="w-full h-full object-cover" src="{{$movie->poster}}" alt="{{$movie->title}}">
 </div>
--- a/resources/views/components/settings/layout.blade.php
+++ b/resources/views/components/settings/layout.blade.php
@ -1,23 +0,0 @@
-<div class="flex items-start max-md:flex-col">
-    <div class="me-10 w-full pb-4 md:w-[220px]">
-        <flux:navlist>
-            <flux:navlist.item :href="route('profile.edit')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
-            <flux:navlist.item :href="route('user-password.edit')" wire:navigate>{{ __('Password') }}</flux:navlist.item>
-            @if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
-                <flux:navlist.item :href="route('two-factor.show')" wire:navigate>{{ __('Two-Factor Auth') }}</flux:navlist.item>
-            @endif
-            <flux:navlist.item :href="route('appearance.edit')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
-        </flux:navlist>
-    </div>
-
-    <flux:separator class="md:hidden" />
-
-    <div class="flex-1 self-stretch max-md:pt-6">
-        <flux:heading>{{ $heading ?? '' }}</flux:heading>
-        <flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
-
-        <div class="mt-5 w-full max-w-lg">
-            {{ $slot }}
-        </div>
-    </div>
-</div>
--- a/resources/views/components/slide-over.blade.php
+++ b/resources/views/components/slide-over.blade.php
@ -0,0 +1,44 @@
+@props(['wire:model'])
+
+<div x-data="{ open: @entangle($attributes->wire('model')) }" x-show="open" @keydown.escape.window="open = false">
+    <!-- Overlay -->
+    <div x-show="open"
+         x-transition:enter="transition-opacity ease-linear duration-300"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition-opacity ease-linear duration-300"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         class="fixed inset-0 bg-gray-900/80 z-40"
+         @click="open = false"></div>
+
+    <!-- Slide-over panel -->
+    <div x-show="open"
+         x-transition:enter="transform transition ease-in-out duration-500"
+         x-transition:enter-start="translate-x-full"
+         x-transition:enter-end="translate-x-0"
+         x-transition:leave="transform transition ease-in-out duration-500"
+         x-transition:leave-start="translate-x-0"
+         x-transition:leave-end="translate-x-full"
+         class="fixed inset-y-0 right-0 z-50 w-full max-w-md bg-white shadow-xl">
+
+        <div class="flex h-full flex-col overflow-y-scroll">
+            <!-- Close button -->
+            <div class="px-4 py-6 sm:px-6">
+                <button @click="open = false"
+                        type="button"
+                        class="rounded-md text-gray-400 hover:text-gray-500">
+                    <span class="sr-only">Close panel</span>
+                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Content -->
+            <div class="flex-1 px-4 py-6 sm:px-6">
+                {{ $slot }}
+            </div>
+        </div>
+    </div>
+</div>
--- a/resources/views/components/ui/card.blade.php
+++ b/resources/views/components/ui/card.blade.php
@ -0,0 +1,3 @@
+<div {{ $attributes->merge(['class' => 'bg-gray-800 p-5 flex flex-col gap-5 items-center rounded']) }}>
+    {{ $slot }}
+</div>
--- a/resources/views/components/ui/site-logo.blade.php
+++ b/resources/views/components/ui/site-logo.blade.php
@ -1,9 +1,9 @@
-<div class="relative -rotate-6 max-w-72 sm:max-w-96">
+<div {{$attributes->merge(['class' => "relative -rotate-6 max-w-72 sm:max-w-96"])}}>
    <div class="p-2 bg-blue-700 border-2 border-amber-200 -rounded-lg"
         style="mask: radial-gradient(circle at left, transparent 10px, black 11px) top left / 51% 100% no-repeat,
                          radial-gradient(circle at right, transparent 10px, black 11px) top right / 51% 100% no-repeat;">
        <div class="p-2 border-2 border-amber-200 m-2">
-            <h1 class="font-bold font-arial text-2xl text-amber-200">Cinema Corona</h1>
+            <h1 class="font-bold font-arial text-2xl text-amber-200">Movie Night</h1>
        </div>
    </div>

--- a/resources/views/components/ui/slide-over.blade.php
+++ b/resources/views/components/ui/slide-over.blade.php
@ -0,0 +1,44 @@
+@props(['model'])
+
+<div x-data="{ open: @entangle($model) }" @keydown.escape.window="open = false">
+    <!-- Overlay -->
+    <div x-show="open"
+         x-transition:enter="transition-opacity ease-linear duration-300"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition-opacity ease-linear duration-300"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         class="fixed inset-0 bg-gray-900/80 z-40"
+         @click="open = false"></div>
+
+    <!-- Slide-over panel -->
+    <div x-show="open"
+         x-transition:enter="transform transition ease-in-out duration-500"
+         x-transition:enter-start="translate-x-full"
+         x-transition:enter-end="translate-x-0"
+         x-transition:leave="transform transition ease-in-out duration-500"
+         x-transition:leave-start="translate-x-0"
+         x-transition:leave-end="translate-x-full"
+         class="fixed inset-y-0 right-0 z-50 w-full sm:max-w-md bg-gray-800 shadow-xl">
+
+        <div class="flex h-full flex-col overflow-y-scroll">
+            <!-- Close button -->
+            <div class="px-4 py-6 sm:px-6">
+                <button @click="open = false"
+                        type="button"
+                        class="rounded-md text-gray-400 hover:text-gray-500">
+                    <span class="sr-only">Close panel</span>
+                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Content -->
+            <div class="flex-1 px-4 py-6 sm:px-6">
+                {{ $slot }}
+            </div>
+        </div>
+    </div>
+</div>
--- a/resources/views/livewire/lists.blade.php
+++ b/resources/views/livewire/lists.blade.php
@ -1,8 +1,7 @@
-<div class="m-5 py-10">
-    <p class="text-3xl mb-5 text-center">Lists</p>
-    <div class="bg-gray-800 p-5 flex flex-col gap-5 items-center rounded">
+<div class="mt-5 w-full mx-auto flex flex-col gap-5">
+    <h1 class="font-bold text-3xl mx-2 sm:mx-0">Lists</h1>
+    <x-ui.card>
        <div class="w-full flex flex-col gap-2">
-            <h2 class="text-xl font-bold">Add List</h2>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
@ -13,27 +12,25 @@
                </div>
            @endif

-            <form class="flex flex-col mx-auto" wire:submit.prevent="addList">
-                <label for="list_name">Name</label>
+            <form class="flex flex-col max-w-lg gap-2" wire:submit.prevent="addList">
+                <label class="font-bold" for="list_name">Add List</label>
                <div class="flex">
-                    <input name="list_name" class="text-black bg-white p-3 rounded rounded-r-none" type="text"
+                    <input name="list_name" placeholder="List Name"
+                           class="flex-1 w-full text-black bg-white p-2 rounded rounded-r-none"
+                           type="text"
                           wire:model="form.name">
                    <button type="submit" class="bg-green-400 text-white px-4 py-2 rounded rounded-l-none">Add</button>
                </div>
            </form>
        </div>

-        <ul class="w-full flex flex-col gap-5 justify-between">
+        <ul class="w-full flex flex-col gap-5">
            @foreach($lists as $list)
-                <li class="grid grid-cols-2 gap-5 text-center">
-                    <div><a href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a></div>
-                    <div>
-                        <label for="is_public">Public</label>
-                        <input name="is_public" type="checkbox" value="is_public" wire:model="form.is_public"/>
-                    </div>
+                <li class="flex justify-between text-center">
+                    <a href="/lists/{{$list->id}}" wire:navigate>{{$list->name}}</a>
                </li>
            @endforeach
        </ul>
-    </div>
+    </x-ui.card>
 </div>
 </div>
--- a/resources/views/livewire/movie-details-panel.blade.php
+++ b/resources/views/livewire/movie-details-panel.blade.php
@ -0,0 +1,57 @@
+<x-ui.slide-over model="showDetails">
+    @if($selectedMovie)
+        <div class="flex flex-col gap-6">
+            <!-- Header with title and year -->
+            <div class="flex flex-col gap-2 text-center">
+                <h2 class="text-2xl font-bold text-gray-300">{{ $selectedMovie->title }}</h2>
+                <p class="text-lg text-gray-400">{{ $selectedMovie->year }}</p>
+            </div>
+
+            <!-- Poster -->
+            @if($selectedMovie->poster && $selectedMovie->poster !== 'N/A')
+                <img src="{{ $selectedMovie->poster }}"
+                     alt="{{ $selectedMovie->title }}"
+                     class="max-w-48 rounded-lg shadow-md mx-auto">
+            @endif
+
+            <!-- Plot/Description -->
+            @if($selectedMovie->plot && $selectedMovie->plot !== 'N/A')
+                <div>
+                    <h3 class="text-sm font-semibold text-gray-300 mb-2">Plot</h3>
+                    <p class="text-gray-400">{{ $selectedMovie->plot }}</p>
+                </div>
+            @endif
+
+            <!-- Additional Details -->
+            <div class="flex flex-col gap-3 text-sm">
+                @if($selectedMovie->director && $selectedMovie->director !== 'N/A')
+                    <div>
+                        <span class="font-semibold text-gray-300">Director:</span>
+                        <span class="text-gray-400">{{ $selectedMovie->director }}</span>
+                    </div>
+                @endif
+
+                @if($selectedMovie->actors && $selectedMovie->actors !== 'N/A')
+                    <div>
+                        <span class="font-semibold text-gray-300">Actors:</span>
+                        <span class="text-gray-400">{{ $selectedMovie->actors }}</span>
+                    </div>
+                @endif
+
+                @if($selectedMovie->genre && $selectedMovie->genre !== 'N/A')
+                    <div>
+                        <span class="font-semibold text-gray-300">Genre:</span>
+                        <span class="text-gray-400">{{ $selectedMovie->genre }}</span>
+                    </div>
+                @endif
+
+                @if($selectedMovie->mpaa_rating && $selectedMovie->mpaa_rating !== 'N/A')
+                    <div>
+                        <span class="font-semibold text-gray-300">Rating:</span>
+                        <span class="text-gray-400">{{ $selectedMovie->mpaa_rating }}</span>
+                    </div>
+                @endif
+            </div>
+        </div>
+    @endif
+</x-ui.slide-over>
--- a/resources/views/livewire/movie-list.blade.php
+++ b/resources/views/livewire/movie-list.blade.php
@ -1,22 +1,70 @@
-<div class=" text-white pt-5 flex flex-col gap-5">
-    <h1 class="text-2xl font-bold">{{$list->name}}</h1>
-
-    <form wire:submit.prevent="addMovie">
-        <div class="flex flex-col gap-2">
-            <label for="query">Enter a movie title</label>
-            <input wire:model="query" type="text" name="query" class="bg-white text-black"/>
-            @error('query') <span class="error text-red-500">{{ $message }}</span> @enderror
+<div class=" text-white pt-10 flex flex-col gap-5">
+    <div class="flex flex-row justify-between items-center mx-2 sm:mx-0">
+        <h1 class="text-2xl sm:text-3xl font-bold">{{$list->name}}</h1>
+        <button type="button" wire:click="toggleSettings"
+                class="hover:bg-blue-600 cursor-pointer text-white px-4 py-2 rounded">
+            <i class="fas fa-cog"></i>
+        </button>
    </div>

-        <button type="submit">Search</button>
-    </form>
+    <x-ui.card class="overflow-hidden">
+        <div class="absolute">
+            <livewire:search-panel :list-id="$list->id"/>
+            <livewire:movie-details-panel/>
+        </div>

+        <div class="relative w-full overflow-hidden">
+            <div class="flex transition-transform duration-300 ease-in-out"
+                 style="transform: translateX({{ $showSettings ? '-100%' : '0' }})">

-    <ul class="my-5 grid grid-cols-4 gap-5">
-        @foreach ($movies as $movie)
+                <!-- Movie List View -->
+                <div class="w-full flex-shrink-0 flex flex-col gap-5">
+                    <div class="flex flex-col-reverse sm:flex-row gap-5 sm:gap-0 justify-between w-full">
+                        <input class="bg-white p-2 rounded" type="text" placeholder="Filter movies"
+                               wire:model="filterText"
+                               wire:keyup="filterMovies"/>
+
+                        <button wire:click="$dispatch('openSearch')" class="bg-green-500 text-white p-2 rounded">
+                            Add Movie
+                        </button>
+                    </div>
+                    <ul class="grid grid-cols-2 sm:grid-cols-4 gap-5">
+                        @foreach ($filteredMovies as $movie)
                            <li class="bg-gray-200">
                                <x-movie :movie="$movie"/>
                            </li>
                        @endforeach
                    </ul>
+                </div>
+
+                <!-- Settings View -->
+                <div class="w-full flex-shrink-0 flex flex-col gap-5">
+                    <div class="flex justify-between items-center">
+                        <button wire:click="toggleSettings" class="text-white hover:text-gray-300">
+                            ← Back to List
+                        </button>
+                        <h2 class="text-xl font-semibold">Settings</h2>
+                    </div>
+
+                    <div class="flex flex-col gap-2 w-full">
+                        <label for="list-name">List Name</label>
+                        <div class="flex flex-row">
+                            <input type="text" wire:model="settingsForm.name" id="list-name"
+                                   class="w-full p-2 rounded rounded-r-none bg-white"/>
+                            <button class="bg-green-400 p-2 rounded-r" type="submit" wire:click="saveSettings">Save
+                            </button>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-between bg-gray-700 p-4 rounded">
+                        <label for="is_public" class="text-white">Make list public</label>
+                        <input type="checkbox"
+                               id="is_public"
+                               wire:model.live="settingsForm.isPublic"
+                               class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </x-ui.card>
+
 </div>
--- a/resources/views/livewire/search-panel.blade.php
+++ b/resources/views/livewire/search-panel.blade.php
@ -0,0 +1,30 @@
+<x-ui.slide-over model="showSearch">
+    <form wire:submit.prevent="findMovies" class="flex flex-row">
+        <div class="mb-5">
+            <label for="query">Enter a movie title</label>
+            <div class="flex flex-row">
+                <input wire:model="query" type="text" name="query" class="bg-white p-2 text-black"/>
+                <button class="bg-green-400 p-2" type="submit">Search</button>
+            </div>
+            @error('query') <span class="error text-red-500">{{ $message }}</span> @enderror
+        </div>
+
+    </form>
+    <ul class="flex flex-col gap-2">
+        @foreach ($results as $result)
+            <li class="flex flex-row justify-between border border-gray-300 p-2">
+                <div class="flex flex-col gap-1">
+                    <div class="flex flex-col sm:flex-row gap-1 font-bold">
+                        <span>{{ $result['title'] }}</span>
+                        <span>({{$result['year']}})</span>
+                    </div>
+                    <button class="bg-green-400 p-2 rounded w-25 justify-between" type=button
+                            wire:click="addMovie(@js($result['imdb_id']))">
+                        Add to List
+                    </button>
+                </div>
+                <img class="max-h-20" src="{{$result['poster']}}" alt="poster"/>
+            </li>
+        @endforeach
+    </ul>
+</x-ui.slide-over>
--- a/resources/views/pages/auth/login.blade.php
+++ b/resources/views/pages/auth/login.blade.php
@ -1,8 +1,9 @@
 <x-layouts.auth>
-    <div class="text-2xl">
-        <h1 class="text-center m-5">Log in</h1>
+    <div class="text-2xl text-white flex flex-col items-center gap-10 py-6 min-h-screen">
+        <x-ui.site-logo class="w-50 mt-4"/>

-        <form class="flex flex-col gap-5" method="POST" action="{{route("login")}}">
+        <x-ui.card class="w-full max-w-md">
+            <form class="flex flex-col gap-5 w-full" method="POST" action="{{route("login")}}">
                @csrf
                @if($errors->any())
                    <div class="text-red-500">
@ -12,16 +13,17 @@
                    </div>
                @endif

-            <div class="flex flex-col">
-                <label class="py-5" for="email">Email</label>
-                <input class="bg-white" type="email" name="email" value="{{old("email")}}"/>
+                <div class="flex flex-col gap-2">
+                    <label class="font-bold" for="email">Email</label>
+                    <input class="bg-white p-2" type="email" name="email" value="{{old("email")}}"/>
                </div>
-            <div class="flex flex-col">
-                <label class="py-5" for="password">Password</label>
-                <input class="bg-white" type="password" name="password"/>
+                <div class="flex flex-col gap-2">
+                    <label class="font-bold" for="password">Password</label>
+                    <input class="bg-white p-2" type="password" name="password"/>
                </div>

-            <button type="submit">Submit</button>
+                <button class="bg-green-400 rounded p-2" type="submit">Log in</button>
            </form>
+        </x-ui.card>
    </div>
 </x-layouts.auth>
--- a/resources/views/pages/lists.blade.php
+++ b/resources/views/pages/lists.blade.php
@ -1,5 +1,4 @@
 <x-layouts.app>
-    <h1>Lists</h1>
    <div class="text-white text-2xl">
        <livewire:movie-lists/>
    </div>
--- a/routes/web.php
+++ b/routes/web.php
@ -11,13 +11,10 @@ Route::get('/register', RegisterUser::class)->name('register');
 Route::get('/reset-password/{token}', PasswordReset::class)->name('reset-password');


-/* AUTH */
-Route::view('dashboard', 'pages.home')
-    ->middleware(['auth', 'verified'])
-    ->name('home');
+Route::view('/', 'pages.auth.login')->name('login');

+/* AUTH */
 Route::middleware(['auth'])->group(function () {
-    Route::view('/', 'pages.home')->name('home');
    Route::get('/lists', MovieLists::class)->name('lists');
    Route::get('/lists/{id}', MovieList::class)->name('list');
 });