Add toggle seen/favourite and filters

- Add toggle seen feature
- Add toggle favourite feature
- Add filters

app/Http/Controllers/ShowingChannelController.php

@@ -15,7 +15,23 @@ public function __invoke(Channel $channel)
             'channel' => $channel,
             'videos' => Video::where('channel_id', $channel->id)
                 ->orderByDesc('published_at')
+                ->when(request('title'), function ($q,$title) {
+                    $q->where('title','like','%'.$title.'%');
+                })
+                ->when(request('is_favorite') === 'no', function ($q) {
+                    $q->whereNull('favorite_at');
+                })
+                ->when(request('is_favorite') === 'yes', function ($q) {
+                    $q->whereNotNull('favorite_at');
+                })
+                ->when(request('is_seen') === 'no', function ($q) {
+                    $q->whereNull('seen_at');
+                })
+                ->when(request('is_seen',) === 'yes', function ($q) {
+                    $q->whereNotNull('seen_at');
+                })
                 ->paginate()
+                ->appends(request()->all())
         ]);
     }
 }

app/Http/Controllers/TogglingFavouriteController.php

@@ -0,0 +1,20 @@
+<?php
+
+
+namespace App\Http\Controllers;
+
+
+use App\Models\Video;
+
+class TogglingFavouriteController
+{
+    public function __invoke(Video $video)
+    {
+        $dateTime = null;
+        if (is_null($video->favorite_at)) {
+            $dateTime = now();
+        }
+        $video->update(['favorite_at' => $dateTime]);
+        return back();
+    }
+}

app/Http/Controllers/TogglingVideoSeenController.php

@@ -0,0 +1,21 @@
+<?php
+
+
+namespace App\Http\Controllers;
+
+
+use App\Models\Video;
+
+class TogglingVideoSeenController
+{
+    public function __invoke(Video $video)
+    {
+        $dateTime = null;
+        if (is_null($video->seen_at)) {
+            $dateTime = now();
+        }
+        $video->update(['seen_at' => $dateTime]);
+
+        return back();
+    }
+}

public/css/app.css

@@ -1123,6 +1123,10 @@ select {
 	margin-top: 0.25rem;
 	margin-bottom: 0.25rem;
 }
+.my-2 {
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+}
 .ml-3 {
 	margin-left: 0.75rem;
 }
@@ -1216,6 +1220,18 @@ select {
 .mr-6 {
 	margin-right: 1.5rem;
 }
+.mr-10 {
+	margin-right: 2.5rem;
+}
+.mb-10 {
+	margin-bottom: 2.5rem;
+}
+.mb-12 {
+	margin-bottom: 3rem;
+}
+.mr-4 {
+	margin-right: 1rem;
+}
 .block {
 	display: block;
 }
@@ -1264,6 +1280,9 @@ select {
 .h-32 {
 	height: 8rem;
 }
+.h-screen {
+	height: 100vh;
+}
 .min-h-screen {
 	min-height: 100vh;
 }
@@ -1333,6 +1352,9 @@ select {
 .max-w-6xl {
 	max-width: 72rem;
 }
+.max-w-sm {
+	max-width: 24rem;
+}
 .flex-1 {
 	flex: 1 1 0%;
 }
@@ -1483,12 +1505,19 @@ select {
 .overflow-hidden {
 	overflow: hidden;
 }
+.overflow-x-auto {
+	overflow-x: auto;
+}
 .overflow-y-auto {
 	overflow-y: auto;
 }
 .overflow-y-hidden {
 	overflow-y: hidden;
 }
+.overscroll-auto {
+	-ms-scroll-chaining: chained;
+	    overscroll-behavior: auto;
+}
 .truncate {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -1531,6 +1560,9 @@ select {
 .border-2 {
 	border-width: 2px;
 }
+.border-0 {
+	border-width: 0px;
+}
 .border-b-2 {
 	border-bottom-width: 2px;
 }
@@ -1641,6 +1673,14 @@ select {
 	--tw-bg-opacity: 1;
 	background-color: rgba(52, 211, 153, var(--tw-bg-opacity));
 }
+.bg-red-500 {
+	--tw-bg-opacity: 1;
+	background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+}
+.bg-purple-500 {
+	--tw-bg-opacity: 1;
+	background-color: rgba(139, 92, 246, var(--tw-bg-opacity));
+}
 .bg-opacity-25 {
 	--tw-bg-opacity: 0.25;
 }
@@ -1653,6 +1693,9 @@ select {
 .bg-no-repeat {
 	background-repeat: no-repeat;
 }
+.fill-current {
+	fill: currentColor;
+}
 .object-cover {
 	-o-object-fit: cover;
 	   object-fit: cover;
@@ -1669,6 +1712,9 @@ select {
 .p-4 {
 	padding: 1rem;
 }
+.p-3 {
+	padding: 0.75rem;
+}
 .px-4 {
 	padding-left: 1rem;
 	padding-right: 1rem;
@@ -1773,6 +1819,9 @@ select {
 .pb-8 {
 	padding-bottom: 2rem;
 }
+.pr-16 {
+	padding-right: 4rem;
+}
 .text-left {
 	text-align: left;
 }
@@ -1785,6 +1834,9 @@ select {
 .align-baseline {
 	vertical-align: baseline;
 }
+.align-middle {
+	vertical-align: middle;
+}
 .font-sans {
 	font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -1927,6 +1979,22 @@ select {
 	--tw-text-opacity: 1;
 	color: rgba(59, 130, 246, var(--tw-text-opacity));
 }
+.text-yellow-600 {
+	--tw-text-opacity: 1;
+	color: rgba(217, 119, 6, var(--tw-text-opacity));
+}
+.text-blue-600 {
+	--tw-text-opacity: 1;
+	color: rgba(37, 99, 235, var(--tw-text-opacity));
+}
+.text-purple-600 {
+	--tw-text-opacity: 1;
+	color: rgba(124, 58, 237, var(--tw-text-opacity));
+}
+.text-pink-600 {
+	--tw-text-opacity: 1;
+	color: rgba(219, 39, 119, var(--tw-text-opacity));
+}
 .underline {
 	text-decoration: underline;
 }
@@ -2034,6 +2102,9 @@ select {
 .ease-in {
 	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
+.ease-linear {
+	transition-timing-function: linear;
+}
 .hover\:scale-105:hover {
 	--tw-scale-x: 1.05;
 	--tw-scale-y: 1.05;
@@ -2111,6 +2182,10 @@ select {
 	--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.hover\:shadow-md:hover {
+	--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .focus\:z-10:focus {
 	z-index: 10;
 }
@@ -2226,6 +2301,10 @@ select {
 	--tw-bg-opacity: 1;
 	background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
 }
+.active\:bg-purple-600:active {
+	--tw-bg-opacity: 1;
+	background-color: rgba(124, 58, 237, var(--tw-bg-opacity));
+}
 .active\:text-gray-700:active {
 	--tw-text-opacity: 1;
 	color: rgba(55, 65, 81, var(--tw-text-opacity));
@@ -2452,6 +2531,22 @@ select {
 		margin-top: 0px;
 	}
 
+	.md\:mb-0 {
+		margin-bottom: 0px;
+	}
+
+	.md\:mt-10 {
+		margin-top: 2.5rem;
+	}
+
+	.md\:mr-2 {
+		margin-right: 0.5rem;
+	}
+
+	.md\:ml-2 {
+		margin-left: 0.5rem;
+	}
+
 	.md\:grid {
 		display: grid;
 	}
@@ -2460,6 +2555,14 @@ select {
 		min-height: 100%;
 	}
 
+	.md\:w-1\/2 {
+		width: 50%;
+	}
+
+	.md\:w-full {
+		width: 100%;
+	}
+
 	.md\:grid-cols-3 {
 		grid-template-columns: repeat(3, minmax(0, 1fr));
 	}