Skip to content

Commit c1a4d34

Browse files
aminnausinaminnausin
committed
feat: update many components to use cedar-ui
1 parent cbd9eef commit c1a4d34

54 files changed

Lines changed: 424 additions & 472 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎resources/css/cedar-theme.css‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,12 @@
9292
--color-primary-dark-950: #101014;
9393

9494
/* Indicator Colors */
95-
--color-success: oklch(72.3% 0.219 149.579); /* green-500 */
96-
--color-info: oklch(62.3% 0.214 259.815); /* blue-500 */
97-
--color-warning: oklch(75% 0.183 55.934); /* orange-500 */
98-
--color-danger: oklch(64.5% 0.246 16.439); /* rose-500 */
99-
--color-danger-2: oklch(58.6% 0.253 17.585); /* rose-600 */
100-
--color-danger-3: oklch(51.4% 0.222 16.935); /* rose-700 */
95+
--color-success: var(--color-green-500); /* green-500 */
96+
--color-info: var(--color-blue-500); /* blue-500 */
97+
--color-warning: var(--color-orange-500); /* orange-500 */
98+
--color-danger: var(--color-rose-500); /* rose-500 */
99+
--color-danger-2: var(--color-rose-600); /* rose-600 */
100+
--color-danger-3: var(--color-rose-700); /* rose-700 */
101101

102102
/* Opacity */
103103
--opacity-disabled: 0.6;
@@ -141,17 +141,17 @@
141141
--color-r-button: var(--color-neutral-600); /* neutral-600 #525252 */
142142
--color-r-input: transparent /* to transparent */;
143143
--color-r-default: var(--color-gray-900) /* gray-900 #101828 */;
144-
--color-r-inverse: color-mix(in oklab, oklch(26.9% 0 0) 50%, transparent); /* neutral-800/50 */
144+
--color-r-inverse: color-mix(in oklab, var(--color-neutral-800) 50%, transparent); /* neutral-800/50 */
145145

146146
/* Border Divide */
147-
--color-b: oklch(92.8% 0.006 264.531); /* gray-200 #e5e7eb */
148-
--color-border-1: oklch(43.9% 0 0); /* neutral-600 #525252 */
149-
--color-d: oklch(37.1% 0 0); /* neutral-700 #404040 */
147+
--color-b: var(--color-gray-200); /* gray-200 #e5e7eb */
148+
--color-border-1: var(--color-neutral-600); /* neutral-600 #525252 */
149+
--color-d: var(--color-neutral-700); /* neutral-700 #404040 */
150150
--color-hr: var(--color-neutral-500);
151151

152152
/* Indicator Colors */
153-
--color-success: oklch(62.7% 0.194 149.214); /* green-600 */
154-
--color-danger: oklch(58.6% 0.253 17.585); /* rose-600 */
153+
--color-success: var(--color-green-600); /* green-600 */
154+
--color-danger: var(--color-rose-600); /* rose-600 */
155155

156156
/* Toasts Menus Popovers Dropdowns */
157157
--color-overlay: oklch(0.2739 0.0055 286.03) /* #26262a */; /* surface-3/70 */

‎resources/css/theme.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,4 +207,8 @@
207207
background: transparent;
208208
height: calc(var(--thumb-size) * 0.25rem);
209209
}
210+
211+
.data-card {
212+
@apply bg-surface-2 hover:bg-surface-3 dark:hover:bg-primary-dark-600 dark:bg-surface-2/70;
213+
}
210214
}

‎resources/js/components/cards/HoverCard.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ watch(
8787
</script>
8888

8989
<template>
90-
<div class="" @mouseover="hoverCardEnter" @mouseleave="hoverCardLeave">
90+
<div @mouseover="hoverCardEnter" @mouseleave="hoverCardLeave">
9191
<slot name="trigger">
9292
<a href="#_" class="hover:underline"></a>
9393
</slot>
@@ -100,7 +100,8 @@ watch(
100100
v-cloak
101101
:class="[
102102
positionClasses,
103-
`absolute z-30 flex gap-2 rounded-md border border-neutral-200/70 bg-white p-3 text-sm shadow-md backdrop-blur-lg transition-opacity duration-200 ease-in-out dark:border-none dark:bg-neutral-800/70 dark:odd:bg-primary-dark-600/70 md:max-w-xl xl:max-w-3xl`,
103+
`dark:odd:bg-primary-dark-600/70 absolute z-30 flex gap-2 rounded-md`,
104+
`border border-neutral-200/70 bg-white p-3 text-sm shadow-md backdrop-blur-lg transition-opacity duration-200 ease-in-out md:max-w-xl xl:max-w-3xl dark:border-none dark:bg-neutral-800/70`,
104105
]"
105106
:style="tooltipStyles"
106107
>
@@ -111,7 +112,7 @@ watch(
111112
<slot name="content">
112113
<div class="flex min-h-0 flex-col gap-2">
113114
<h4 v-if="contentTitle">{{ contentTitle }}</h4>
114-
<p class="w-full whitespace-pre-wrap text-pretty dark:text-neutral-400" v-if="content">{{ content }}</p>
115+
<p class="w-full text-pretty whitespace-pre-wrap dark:text-neutral-400" v-if="content">{{ content }}</p>
115116
</div>
116117
</slot>
117118
</div>

‎resources/js/components/cards/LibraryCardMenu.vue‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang="ts">
22
import type { CategoryResource, FolderResource } from '@/types/resources';
33
4-
import InputSelect from '@/components/pinesUI/InputSelect.vue';
5-
import ButtonText from '@/components/inputs/ButtonText.vue';
4+
import { InputSelect } from '@/components/cedar-ui/select';
5+
import { ButtonText } from '@/components/cedar-ui/button';
6+
67
import InputLabel from '@/components/labels/InputLabel.vue';
78
89
import ProiconsArrowSync from '~icons/proicons/arrow-sync';
@@ -29,15 +30,15 @@ const props = withDefaults(
2930
<div class="space-y-4" v-if="data">
3031
<div class="space-y-2">
3132
<h4 class="leading-none font-medium">Manage Library</h4>
32-
<p class="text-muted-foreground text-sm">Set Library Properties.</p>
33+
<p class="text-foreground-1 text-sm">Set Library Properties.</p>
3334
</div>
34-
<div class="flex flex-col gap-2 *:h-8 *:w-full disabled:*:opacity-60 dark:*:bg-neutral-900">
35+
<div class="flex flex-col gap-2 *:h-8 dark:*:bg-neutral-900">
3536
<div class="flex h-auto! flex-col gap-1 bg-transparent!">
3637
<InputLabel text="Default Folder" name="Default Folder" class="font-normal" />
3738
<InputSelect
3839
id="default-folder"
39-
root-class="flex-1 rounded-l-none capitalize w-full! whitespace-nowrap! col-span-2 "
40-
:class="'h-8 dark:bg-neutral-900!'"
40+
root-class="flex-1 rounded-l-none capitalize w-full! whitespace-nowrap! col-span-2"
41+
class="h-8! py-0 ps-2! dark:bg-neutral-900!"
4142
:placeholder="'Select Default Folder'"
4243
:default-item="folders.findIndex((folder) => folder.id == defaultFolder?.id) ?? 0"
4344
:disabled="processing || !folders.length"
@@ -52,26 +53,30 @@ const props = withDefaults(
5253
/>
5354
</div>
5455

55-
<ButtonText :title="'Scan for Changes'" @click="handleStartScan(false)">
56-
<template #text> <p class="flex-1 text-start">Scan Files</p> </template>
57-
<template #icon> <ProiconsArrowSync class="h-4 w-4" /></template>
56+
<ButtonText title="Scan for Changes" @click="handleStartScan(false)">
57+
<p class="flex-1 text-start">Scan Files</p>
58+
<template #icon> <ProiconsArrowSync class="size-4" /></template>
5859
</ButtonText>
59-
<ButtonText :title="'Verify File Metadata'" @click="handleStartScan(true)">
60-
<template #text> <p class="flex-1 text-start">Verify Files</p> </template>
61-
<template #icon> <ProiconsArrowSync class="h-4 w-4" /></template>
60+
<ButtonText title="Verify File Metadata" @click="handleStartScan(true)">
61+
<p class="flex-1 text-start">Verify Files</p>
62+
<template #icon> <ProiconsArrowSync class="size-4" /></template>
6263
</ButtonText>
63-
<ButtonText :title="'Manage all Folders in Library'" :to="`/dashboard/libraries/${data?.id}`" target="">
64-
<template #text> <p class="flex-1 text-start">Manage Folders</p> </template>
65-
<template #icon> <CircumFolderOn class="order-1 h-4 w-4" /></template>
64+
<ButtonText title="Manage all Folders in Library" :to="`/dashboard/libraries/${data?.id}`" target="">
65+
<p class="flex-1 text-start">Manage Folders</p>
66+
<template #icon> <CircumFolderOn class="order-1 size-4" /></template>
6667
</ButtonText>
6768
<ButtonText :title="'Toggle Privacy'" @click="handleTogglePrivacy(data.id, data.is_private ?? false)" :disabled="processing">
68-
<template #text>
69-
<p class="flex-1 text-start">{{ data.is_private ? 'Set to Public' : 'Set to Private' }}</p>
70-
</template>
71-
<template #icon> <ProiconsLock v-if="data.is_private" class="h-4 w-4" /> <ProiconsLockOpen v-else class="h-4 w-4" /></template>
69+
<p class="flex-1 text-start">{{ data.is_private ? 'Set to Public' : 'Set to Private' }}</p>
70+
<template #icon> <ProiconsLock v-if="data.is_private" class="size-4" /> <ProiconsLockOpen v-else class="size-4" /></template>
7271
</ButtonText>
73-
<ButtonText class="text-rose-600 dark:bg-rose-700!" :title="'Remove From Server'" text="Remove Library" @click.stop.prevent="$emit('clickAction')" disabled>
74-
<template #icon> <ProiconsDelete class="h-4 w-4" /></template>
72+
<ButtonText
73+
@click.stop.prevent="$emit('clickAction')"
74+
class="text-danger dark:text-foreground-0 dark:bg-danger-3! dark:hocus:bg-danger!"
75+
title="Remove From Server"
76+
disabled
77+
>
78+
<p class="flex-1 text-start">Remove Library</p>
79+
<template #icon> <ProiconsDelete class="size-4" /></template>
7580
</ButtonText>
7681
</div>
7782
</div>

‎resources/js/components/cards/LibraryFolderCardMenu.vue‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import ButtonText from '@/components/inputs/ButtonText.vue';
2+
import { ButtonText } from '@/components/cedar-ui/button';
33
44
import ProiconsDelete from '~icons/proicons/delete';
55
import ProiconsLock from '~icons/proicons/lock';
@@ -11,31 +11,30 @@ const props = withDefaults(defineProps<{ handleClosePopover?: () => void }>(), {
1111
<template>
1212
<div class="space-y-4">
1313
<div class="space-y-2">
14-
<h4 class="font-medium leading-none">Manage Folder</h4>
15-
<p class="text-sm text-muted-foreground">Set Folder Properties.</p>
14+
<h4 class="leading-none font-medium">Manage Folder</h4>
15+
<p class="text-foreground-1 text-sm">Set Folder Properties.</p>
1616
</div>
1717

18-
<div class="*:w-full flex flex-col gap-2 dark:*:bg-neutral-900 *:h-8 disabled:*:opacity-60">
18+
<div class="flex flex-col gap-2 dark:*:bg-neutral-900">
1919
<ButtonText
20-
class="h-8 dark:bg-neutral-950! disabled:opacity-60"
21-
:title="'Edit Folder'"
20+
title="Edit Folder"
2221
@click.stop.prevent="
2322
() => {
2423
if (handleClosePopover) handleClosePopover();
2524
$emit('clickAction');
2625
}
2726
"
2827
>
29-
<template #text> <p class="flex-1 text-start">Edit Folder</p></template>
30-
<template #icon> <CircumEdit class="h-4 w-4" /></template>
28+
<p class="flex-1 text-start">Edit Folder</p>
29+
<template #icon> <CircumEdit class="size-4" /></template>
3130
</ButtonText>
32-
<ButtonText :title="'Manage Metadata Settings'" disabled>
33-
<template #text> <p class="flex-1 text-start">Manage Metadata</p> </template>
34-
<template #icon> <ProiconsLock class="h-4 w-4" /></template>
31+
<ButtonText title="Manage Metadata Settings" disabled>
32+
<p class="flex-1 text-start">Manage Metadata</p>
33+
<template #icon> <ProiconsLock class="size-4" /></template>
3534
</ButtonText>
36-
<ButtonText class="text-rose-600 dark:bg-rose-700!" :title="'Remove From Server'" disabled>
37-
<template #text> <p class="flex-1 text-start">Remove Folder</p> </template>
38-
<template #icon> <ProiconsDelete class="h-4 w-4" /></template>
35+
<ButtonText class="text-danger dark:text-foreground-0 dark:bg-danger-3! dark:hocus:bg-danger! justify-between" title="Remove From Server" disabled>
36+
<p class="flex-1 text-start">Remove Folder</p>
37+
<template #icon> <ProiconsDelete class="size-4" /></template>
3938
</ButtonText>
4039
</div>
4140
</div>

‎resources/js/components/cards/SubTaskCard.vue‎

Lines changed: 0 additions & 101 deletions
This file was deleted.

resources/js/components/cards/sidebar/AppManifestCard.vue renamed to resources/js/components/cards/data/AppManifestCard.vue

File renamed without changes.

resources/js/components/cards/sidebar/FolderCard.vue renamed to resources/js/components/cards/data/FolderCard.vue

File renamed without changes.

resources/js/components/cards/LibraryCard.vue renamed to resources/js/components/cards/data/LibraryCard.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,15 +102,15 @@ watch(
102102
</script>
103103

104104
<template>
105-
<div class="dark:bg-primary-dark-800/70 dark:hover:bg-primary-dark-600 hover:bg-primary-800 group flex w-full flex-col rounded-xl bg-white shadow-lg ring-1 ring-gray-900/5">
105+
<div class="data-card group flex w-full flex-col rounded-xl shadow-lg ring-1 ring-gray-900/5">
106106
<RouterLink :to="`/${data?.name}`" class="peer relative h-40 w-full">
107107
<img
108-
class="peer mb-auto h-full w-full rounded-t-md object-cover shadow-xs ring-1 ring-gray-900/5 ring-inset hover:ring-4 hover:ring-red-500"
108+
class="peer mb-auto h-full w-full rounded-t-md object-cover shadow-xs ring-1 ring-gray-900/5 ring-inset hover:ring-4"
109109
:src="handleStorageURL(defaultFolder?.series?.thumbnail_url) ?? '/storage/thumbnails/default.webp'"
110110
alt="Folder Cover Art"
111111
loading="lazy"
112112
/>
113-
<span class="absolute top-0 left-0 h-full w-full rounded-t-md ring-purple-600/90 ring-inset hover:ring-2"></span>
113+
<span class="ring-primary/90 absolute top-0 left-0 h-full w-full rounded-t-md transition duration-200 ease-in-out ring-inset hover:ring-2"></span>
114114
</RouterLink>
115115
<section class="flex h-full flex-1 flex-col gap-2 p-3">
116116
<div class="flex flex-wrap items-start justify-between">
@@ -136,7 +136,7 @@ watch(
136136
</BasePopover>
137137
</span>
138138
</div>
139-
<span class="mt-auto flex h-full w-full flex-col text-sm text-neutral-600 sm:gap-1 dark:text-neutral-400" v-if="data">
139+
<span class="text-foreground-1 mt-auto flex h-full w-full flex-col text-sm sm:gap-1" v-if="data">
140140
<span class="flex flex-wrap items-start justify-between">
141141
<span class="flex flex-col gap-1 sm:gap-0">
142142
<p class="">Videos: {{ data?.videos_count ?? '?' }}</p>

0 commit comments

Comments
 (0)