Bookmarks and Actions bar

app/Http/Controllers/RoomBookmarkController.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Room;
+
+class RoomBookmarkController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Room $room)
+    {
+        auth()->user()->bookmarkedRooms()->attach($room);
+
+        return redirect()->back();
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Room $room)
+    {
+        auth()->user()->bookmarkedRooms()->detach($room);
+
+        return redirect()->back();
+    }
+}

app/Http/Controllers/RoomController.php

@@ -83,6 +83,7 @@ public function show(Room $room)
                 'pause_between_tracks' => $room->pause_between_tracks,
                 'pause_between_rounds' => $room->pause_between_rounds,
                 'tracks_count' => $room->tracks()->count(),
+                'is_bookmarked' => $room->bookmarks()->where('user_id', auth()?->user()?->id)->exists(),
             ],
         ]);
     }

app/Http/Controllers/UserController.php

@@ -33,6 +33,7 @@ public function show()
                 'latest_round_at' => $user->scores()->latest()->first()?->round?->created_at->format('d/m/Y H:i'),
                 'rooms' => $user->allRooms,
                 'playlists' => $user->allPlaylists,
+                'bookmarked_rooms' => $user->bookmarkedRooms()->get(),
                 'total_score' => floatval($user->scores()->sum('score')),
                 'scores' => $user->allScores()->paginate(10)->through(fn ($score) => [
                     'room_id' => $score->room_id,

app/Models/Bookmark.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\MorphTo;
+use Illuminate\Database\Eloquent\Relations\MorphToMany;
+
+class Bookmark extends Model
+{
+    use HasFactory;
+
+    public function bookmarkable(): MorphTo
+    {
+        return $this->morphTo();
+    }
+}

app/Models/Room.php

@@ -6,6 +6,7 @@
 use App\Http\Traits\Sluggable;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\MorphToMany;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Support\Facades\Auth;
 
@@ -78,6 +79,11 @@ public function startRound()
         $round->start();
     }
 
+    public function bookmarks(): MorphToMany
+    {
+        return $this->morphToMany(User::class, 'bookmarkable', 'bookmarks')->withTimestamps();
+    }
+
     public function messages()
     {
         return $this->morphMany(Message::class, 'messagable');

app/Models/User.php

@@ -5,6 +5,7 @@
 use App\Http\Traits\HasPicture;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Relations\MorphToMany;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
@@ -119,6 +120,13 @@ public function canEditPlaylist(Playlist $playlist)
         return $this->isPlaylistOwner($playlist) || $this->isPlaylistModerator($playlist) || $this->isAdministrator();
     }
 
+    // Bookmarks
+
+    public function bookmarkedRooms(): MorphToMany
+    {
+        return $this->morphedByMany(Room::class, 'bookmarkable', 'bookmarks')->withTimestamps();
+    }
+
     // ROOM
 
     public function rooms()

database/migrations/2023_03_12_182137_create_bookmarks_table.php

@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('bookmarks', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id')->constrained()->cascadeOnUpdate()->cascadeOnDelete();
+            $table->morphs('bookmarkable');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('bookmarks');
+    }
+};

resources/js/Components/Chat/Chat.vue

@@ -4,7 +4,6 @@ import { Link, usePage } from '@inertiajs/vue3'
 import Message from './Message.vue'
 import AlertModeratorsModal from './AlertModeratorsModal.vue'
 import TextInput from '@/Components/TextInput.vue'
-import Share from '@/Components/Share.vue'
 
 const props = defineProps({
   room: Object,
@@ -76,7 +75,6 @@ const scrollToBottom = () => {
           <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
         </svg>
       </a>
-      <Share :url="room.url" class="h-5 w-5" />
     </div>
     <div ref="messenger" class="flex flex-1 flex-col-reverse overflow-y-scroll p-2">
       <Message v-for="message in messages" :key="message.id" :message="message" :room="room" />

resources/js/Components/Navbar.vue

@@ -20,7 +20,7 @@ const showingSearchbar = ref(false)
     <div class="flex w-full items-center justify-between px-4 py-2 md:flex-shrink-0 md:px-12">
       <Link :href="route('home')" title="Blinest">
         <logo class="w-24 fill-inherit lg:w-32" />
-        <p class="text-sm text-neutral-500 mt-1">Testez votre culture musicale</p>
+        <p class="text-sm text-neutral-500 mt-1 hidden md-block">Testez votre culture musicale</p>
       </Link>
 
       <div class="mt-1 items-center gap-2 hidden md:flex">

resources/js/Components/ShareModal.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import Modal from '@/Components/Modal.vue'
+import Card from '@/Components/Card.vue'
+import Clip from '@/Components/Clip.vue'
+
+defineProps({
+  show: Boolean,
+  url: String,
+})
+
+defineEmits(['close'])
+
+</script>
+<template>
+  <Modal :show="show" @close="$emit('close')">
+    <div class="p-6">
+      <h2 class="my-4 text-xl">{{ __('Share this page') }}</h2>
+      <p class="mb-1 text-sm">{{ __('Copy URL:') }}</p>
+      <Clip class="mb-4" :text="url" />
+      <a class="btn-primary my-2" target="_blank" :href="`https://www.facebook.com/sharer/sharer.php?u=${url}`">{{ __('Share on Facebook') }}</a>
+      <a class="btn-primary my-2" target="_blank" :href="`https://twitter.com/intent/tweet?&url=${url}`">{{ __('Share on Twitter') }}</a>
+      <button class="btn-secondary mt-4 ml-auto" @click="$emit('close')">{{ __('Close') }}</button>
+    </div>
+  </Modal>
+</template>

resources/js/Pages/Me/Show.vue

@@ -88,10 +88,22 @@ const deleteUser = () => {
           </template>
         </Card>
 
+        <Card class="mb-4">
+          <template #header>
+            <h2 class="text-xl font-bold">{{ __('Bookmark') }}</h2>
+          </template>
+          <ul class="flex flex-wrap items-center" v-if="user.bookmarked_rooms.length">
+            <li v-for="room in user.bookmarked_rooms" :key="'bookmarked_rooms-' + room.id" class="badge" :class="'bg-teal-900', room.user_id === user.id">
+              <Link :href="route('rooms.show', room.slug)">{{ room.name }}</Link>
+            </li>
+          </ul>
+        </Card>
+
+
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
           <Card class="">
             <template #header>
-              <h2 class="text-xl font-bold">{{ __('Playlists') }}</h2>
+              <h2 class="text-xl font-bold">{{ __('My Playlists') }}</h2>
             </template>
             <ul class="flex flex-wrap items-center" v-if="user.playlists.length">
               <li v-for="playlist in user.playlists" :key="'playlist-' + playlist.id" class="badge" :class="'bg-teal-900', playlist.user_id === user.id">
@@ -102,7 +114,7 @@ const deleteUser = () => {
 
           <Card class="">
             <template #header>
-              <h2 class="text-xl font-bold">{{ __('Rooms') }}</h2>
+              <h2 class="text-xl font-bold">{{ __('My Rooms') }}</h2>
             </template>
             <ul class="flex flex-wrap items-center" v-if="user.rooms.length">
               <li v-for="room in user.rooms" :key="'room-' + room.id" class="badge" :class="'bg-teal-900', room.user_id === user.id">

resources/js/Pages/Rooms/Show.vue

@@ -7,12 +7,11 @@ import Icon from '@/Components/Icon.vue'
 import Card from '@/Components/Card.vue'
 import Spinner from '@/Components/Spinner.vue'
 import Chat from '@/Components/Chat/Chat.vue'
-import Share from '@/Components/Share.vue'
 import Tip from '@/Components/Tip.vue'
 import Modal from '@/Components/Modal.vue'
 import LoginForm from '@/Pages/Auth/LoginForm.vue'
 
-import Controls from './partials/Controls.vue'
+import RoomActions from './partials/RoomActions.vue'
 import Player from './partials/Player.vue'
 import UserInput from './partials/UserInput.vue'
 import Answers from './partials/Answers.vue'
@@ -32,7 +31,7 @@ const users = ref([])
 const data = ref(null)
 const roundFinished = ref(false)
 const sendingSuggestion = ref(false)
-const showSidebar = ref(true)
+const displayChat = ref(true)
 const currentTime = ref(0)
 const users_podium = ref([])
 const teams_podium = ref([])
@@ -101,9 +100,13 @@ const listenRounds = () => {
     <Transition name="slide-right">
       <div v-if="joined || !user" class="h-full md:flex">
         <div class="relative flex-1 overflow-y-auto p-4 md:px-12 md:py-8" scroll-region>
-          <article class="mb-4 flex items-center">
-            <h1 class="mr-2 text-xl font-bold">{{ room.name }}</h1>
-            <Share :url="room.url" class="w-5" />
+          <article class="mb-4 flex flex-wrap gap-2 items-center justify-between">
+            <div class="flex items-center">
+              <h1 class="mr-2 text-xl font-bold">{{ room.name }}</h1>
+            </div>
+            <div class="flex items-center gap-2">
+              <RoomActions :room="room" :channel="channel" :round="round" @displayChat="displayChat = $event"/>
+            </div>
           </article>
 
           <Tip class="bg-orange-400 text-orange-800" v-if="!room.is_autostart && (!round || !round.is_playing) && !room.is_playing">
@@ -122,10 +125,6 @@ const listenRounds = () => {
             <Ranking class="mb-4 md:mb-8" :room="room" :users="users" :channel="channel" :data="data" />
           </div>
 
-          <template v-if="user">
-            <Controls v-if="room.moderators.find((x) => user.id === x.id)" :room="room" :round="round" :channel="channel" class="mb-4" />
-          </template>
-
           <Card>
             <div class="flex flex-col items-center gap-4 text-sm lg:flex-row lg:justify-between">
               <div>
@@ -146,14 +145,10 @@ const listenRounds = () => {
             </div>
           </Card>
 
-          <button v-if="user && room.is_chat_active" class="absolute right-0 top-5 hidden rounded-l-lg bg-neutral-800 p-2 md:block" @click="showSidebar = !showSidebar" :title="__('Hide/Show chatbox')">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-            </svg>
-          </button>
+
         </div>
 
-        <div v-if="user && showSidebar && room.is_chat_active" class="flex h-96 w-full flex-shrink-0 flex-col rounded-tl border-neutral-700 bg-neutral-800 transition-all duration-300 md:h-full md:w-1/5">
+        <div v-if="user && displayChat && room.is_chat_active" class="flex h-96 w-full flex-shrink-0 flex-col rounded-tl border-neutral-700 bg-neutral-800 transition-all duration-300 md:h-full md:w-1/5">
           <Chat :room="room" />
         </div>
       </div>

resources/js/Pages/Rooms/partials/Bookmark.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from 'vue'
+import { router, usePage } from '@inertiajs/vue3'
+
+const props = defineProps({
+  room: Object,
+})
+
+const user = usePage().props.auth.user
+
+const bookmark = () => {
+  router.post(`/rooms/${props.room.id}/bookmark`);
+}
+
+const unbookmark = () => {
+  router.delete(`/rooms/${props.room.id}/bookmark`);
+}
+
+</script>
+
+<template>
+  <button v-if="room.is_bookmarked" @click="unbookmark" type="button" class="btn-secondary btn-sm gap-1 text-green-300">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
+      <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
+    </svg>
+    <span class="hidden md:block">{{ __('Bookmark') }}</span>
+  </button>
+  <button v-else type="button" @click="bookmark" class="btn-secondary btn-sm gap-1">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+    </svg>
+    <span class="hidden md:block">{{ __('Bookmark') }}</span>
+  </button>
+</template>