mp3-composer/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add orval and backend integration

Browse Source
This commit is contained in:
bivashy
2025-11-11 19:53:09 +05:00
parent f56a235e86
commit 3186fa16e5
17 changed files with 1174 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
app/components/internal/PlaylistSelect.vue Normal file
View File

@ -0,0 +1,75 @@
<script setup lang="ts">
import { ChevronsUpDown, Music4 } from 'lucide-vue-next';
import Frame from '@/components/ui/frame/Frame.vue';
import Select from '@/components/ui/select/Select.vue';
import SelectCustomTrigger from '@/components/ui/select/SelectCustomTrigger.vue';
import { useSidebar } from '@/components/ui/sidebar';
import SelectContent from '@/components/ui/select/SelectContent.vue';
import SelectLabel from '@/components/ui/select/SelectLabel.vue';
import SelectSeparator from '@/components/ui/select/SelectSeparator.vue';
import SelectGroup from '@/components/ui/select/SelectGroup.vue';
import SelectItem from '@/components/ui/select/SelectItem.vue';
import { usePlaylists } from '@/composeables/api/playlist-controller/playlist-controller';
const {
open: sidebarOpen,
} = useSidebar()
const { isLoading, isError, error, data } = usePlaylists();
</script>
<template>
<Select>
<div v-if="sidebarOpen" class="hover:bg-sidebar-muted cursor-pointer rounded-md select-none">
<SelectCustomTrigger class="w-full flex p-2 gap-2 items-center">
<Frame borderRadius="round" background="primary" padding="dense" margin="none">
<Music4 class="text-primary-foreground" :size="24" />
</Frame>
<div class="overflow-hidden text-start">
<h4 class="text-xl font-semibold tracking-tight truncate">
My playlist
</h4>
<p class="text-sm text-muted-foreground">
11 track(s)
</p>
</div>
<div class="ml-auto">
<ChevronsUpDown />
</div>
</SelectCustomTrigger>
</div>
<div v-if="!sidebarOpen">
<div class="flex items-center">
<SelectCustomTrigger as-child>
<Frame borderRadius="round" background="primary" padding="dense" margin="none">
<Music4 class="text-primary-foreground" :size="24" />
</Frame>
</SelectCustomTrigger>
</div>
</div>
<SelectContent class="w-full" v-if="isLoading">
<UiSpinner />
</SelectContent>
<SelectContent class="w-full" v-else-if="isError">
<SelectLabel>{{ error?.message }}</SelectLabel>
</SelectContent>
<SelectContent class="w-full" v-else-if="data">
<SelectLabel>Playlists</SelectLabel>
<SelectSeparator />
<SelectGroup>
<SelectItem value="test">
<span>Test</span>
</SelectItem>
<SelectItem value="second">
<span>Second</span>
</SelectItem>
<SelectItem value="third">
<span>Third</span>
</SelectItem>
<SelectItem value="fourth">
<span>Fourth</span>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</template>

62
app/components/ui/sidebar/AppSidebar.vue
View File

@ -11,17 +11,8 @@ import {
SidebarHeader,
SidebarRail,
} from "@/components/ui/sidebar"
import { useSidebar } from "@/components/ui/sidebar";
import EditAudio from "@/components/icon/EditAudio.vue";
import Frame from "@/components/ui/frame/Frame.vue";
import Select from "@/components/ui/select/Select.vue";
import SelectTrigger from "@/components/ui/select/SelectTrigger.vue";
import SelectContent from "@/components/ui/select/SelectContent.vue";
import SelectLabel from "@/components/ui/select/SelectLabel.vue";
import SelectSeparator from "@/components/ui/select/SelectSeparator.vue";
import SelectGroup from "@/components/ui/select/SelectGroup.vue";
import SelectItem from "@/components/ui/select/SelectItem.vue";
import SelectCustomTrigger from "@/components/ui/select/SelectCustomTrigger.vue";
import PlaylistSelect from "@/components/internal/PlaylistSelect.vue";
const items = [
{
@ -50,62 +41,13 @@ const items = [
},
];
const {
open,
} = useSidebar()
const route = useRoute()
</script>
<template>
<Sidebar collapsible="icon">
<SidebarHeader>
<Select>
<div v-if="open" class="hover:bg-sidebar-muted cursor-pointer rounded-md select-none">
<SelectCustomTrigger class="w-full flex p-2 gap-2 items-center">
<Frame borderRadius="round" background="primary" padding="dense" margin="none">
<Music4 class="text-primary-foreground" :size="24" />
</Frame>
<div class="overflow-hidden text-start">
<h4 class="text-xl font-semibold tracking-tight truncate">
My playlist
</h4>
<p class="text-sm text-muted-foreground">
11 track(s)
</p>
</div>
<div class="ml-auto">
<ChevronsUpDown />
</div>
</SelectCustomTrigger>
</div>
<div v-if="!open">
<div class="flex items-center">
<SelectCustomTrigger as-child>
<Frame borderRadius="round" background="primary" padding="dense" margin="none">
<Music4 class="text-primary-foreground" :size="24" />
</Frame>
</SelectCustomTrigger>
</div>
</div>
<SelectContent class="w-full">
<SelectLabel>Playlists</SelectLabel>
<SelectSeparator />
<SelectGroup>
<SelectItem value="test">
<span>Test</span>
</SelectItem>
<SelectItem value="second">
<span>Second</span>
</SelectItem>
<SelectItem value="third">
<span>Third</span>
</SelectItem>
<SelectItem value="fourth">
<span>Fourth</span>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<PlaylistSelect />
</SidebarHeader>
<SidebarContent>
<SidebarGroup>

17
app/components/ui/spinner/Spinner.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { Loader2Icon } from "lucide-vue-next"
import { cn } from "@/lib/utils"
const props = defineProps<{
class?: HTMLAttributes["class"]
}>()
</script>
<template>
<Loader2Icon
role="status"
aria-label="Loading"
:class="cn('size-4 animate-spin', props.class)"
/>
</template>

1
app/components/ui/spinner/index.ts Normal file
View File

@ -0,0 +1 @@
export { default as Spinner } from "./Spinner.vue"