rag/resources/js/Components/AppSidebar.vue

<script lang="ts" setup>
import {MessageSquareOff, MoreHorizontal, Plus, Trash} from "lucide-vue-next"

import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupAction,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuAction,
    SidebarMenuButton,
    SidebarMenuItem
} from '@/Packages/Shadcn/Components/ui/sidebar'

import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger
} from "@/Packages/Shadcn/Components/ui/dropdown-menu";

import {Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle,} from '@/Packages/Shadcn/Components/ui/empty'

import {Skeleton} from "@/Packages/Shadcn/Components/ui/skeleton"

import {router, usePage} from "@inertiajs/vue3";
import {useEcho} from "@laravel/echo-vue";
import {computed} from "vue";

const page = usePage()

const {user} = defineProps({
    user: {
        type: Object,
        default: () => null,
    },

    chats: {
        type: Array,
        default: () => [],
    },
})

const chat = computed(() => page.props.chat ?? null)

useEcho(`App.Models.User.${user.id}`, '.ChatUpdated', (e) => router.reload())
</script>

<template>
    <Sidebar variant="floating">
        <SidebarContent>
            <SidebarGroup>
                <SidebarGroupLabel>Application</SidebarGroupLabel>
                <SidebarGroupAction class="rounded-full cursor-pointer" title="New Chat"
                                    @click="() => router.visit(route('chats.index'))">
                    <Plus/>
                    <span class="sr-only">New Chat</span>
                </SidebarGroupAction>
                <SidebarGroupContent>
                    <template v-if="chats.length === 0">
                        <Empty class="border border-dashed">
                            <EmptyHeader>
                                <EmptyMedia variant="icon">
                                    <MessageSquareOff/>
                                </EmptyMedia>
                                <EmptyTitle>Нет чатов</EmptyTitle>
                                <EmptyDescription>Список чатов пока пуст</EmptyDescription>
                            </EmptyHeader>
                        </Empty>
                    </template>
                    <template v-else>
                        <SidebarMenu>
                            <SidebarMenuItem v-for="item in chats" :key="item.id">
                                <SidebarMenuButton :variant="item.id == chat?.id ? 'outline' : 'default'"
                                                   class="cursor-pointer"
                                                   @click="() => router.visit(route('chats.show', item.id))">
                                    <Skeleton class="h-4 w-full rounded-full" v-if="!item.title"/>
                                    <div v-else class="text-nowrap overflow-hidden text-ellipsis" :title="item.title">{{ item.title }}</div>
                                </SidebarMenuButton>
                                <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                        <SidebarMenuAction class="rounded-full cursor-pointer">
                                            <MoreHorizontal/>
                                        </SidebarMenuAction>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent align="center" side="right">
                                        <DropdownMenuItem class="text-primary cursor-pointer"
                                                          @click="() => router.delete(route('chats.destroy', item.id), { preserveScroll: false, preserveState: false })">
                                            <Trash/>
                                            <span>Удалить чат</span>
                                        </DropdownMenuItem>
                                    </DropdownMenuContent>
                                </DropdownMenu>
                            </SidebarMenuItem>
                        </SidebarMenu>
                    </template>
                </SidebarGroupContent>
            </SidebarGroup>
        </SidebarContent>
    </Sidebar>
</template>