├── .gitignore
├── .prettierrc
├── README.md
├── app.vue
├── assets
    └── css
    │   └── tailwind.css
├── components
    ├── AuthPage.vue
    ├── CardThreads.vue
    ├── CardThreadsSkeleton.vue
    ├── Chat
    │   ├── Bubble.vue
    │   └── StatusIcon.vue
    ├── CommentView.vue
    ├── Footer
    │   ├── Mobile.vue
    │   └── MobileItem.vue
    ├── FooterLinks.vue
    ├── ListThreads.vue
    ├── Loading
    │   └── Spinner.vue
    ├── MoreDialog.vue
    ├── NimueLogo.vue
    ├── Observer.vue
    ├── ReplyForm.vue
    ├── ShareDialog.vue
    ├── SplashScreen.vue
    └── Ui
    │   ├── AlertDialog
    │       ├── Action.vue
    │       ├── AlertDialog.vue
    │       ├── Cancel.vue
    │       ├── Content.vue
    │       ├── Description.vue
    │       ├── Footer.vue
    │       ├── Header.vue
    │       ├── Overlay.vue
    │       ├── Portal.vue
    │       ├── Title.vue
    │       └── Trigger.vue
    │   ├── Avatar
    │       ├── Avatar.vue
    │       ├── Fallback.vue
    │       └── Image.vue
    │   ├── Button.vue
    │   ├── Card
    │       ├── Card.vue
    │       ├── Content.vue
    │       ├── Description.vue
    │       ├── Footer.vue
    │       ├── Header.vue
    │       └── Title.vue
    │   ├── Container.vue
    │   ├── Dialog
    │       ├── Close.vue
    │       ├── Content.vue
    │       ├── Description.vue
    │       ├── Dialog.vue
    │       ├── Footer.vue
    │       ├── Header.vue
    │       ├── Overlay.vue
    │       ├── Portal.vue
    │       ├── Title.vue
    │       └── Trigger.vue
    │   ├── Divider.vue
    │   ├── DropdownMenu
    │       ├── Arrow.vue
    │       ├── CheckboxItem.vue
    │       ├── Content.vue
    │       ├── DropdownMenu.vue
    │       ├── Group.vue
    │       ├── Item.vue
    │       ├── ItemIndicator.vue
    │       ├── Label.vue
    │       ├── Portal.vue
    │       ├── RadioGroup.vue
    │       ├── RadioItem.vue
    │       ├── Separator.vue
    │       ├── Shortcut.vue
    │       ├── Sub.vue
    │       ├── SubContent.vue
    │       ├── SubTrigger.vue
    │       └── Trigger.vue
    │   ├── Form
    │       ├── Control.vue
    │       ├── Description.vue
    │       ├── Item.vue
    │       ├── Label.vue
    │       └── Message.vue
    │   ├── Input.vue
    │   ├── Label.vue
    │   ├── Navbar.vue
    │   ├── RadioGroup
    │       ├── Indicator.vue
    │       ├── Item.vue
    │       └── RadioGroup.vue
    │   ├── Skeleton.vue
    │   ├── Textarea.vue
    │   └── Toast
    │       ├── Action.vue
    │       ├── Close.vue
    │       ├── Description.vue
    │       ├── Provider.vue
    │       ├── Title.vue
    │       ├── Toast.vue
    │       ├── Toaster.vue
    │       └── Viewport.vue
├── composables
    ├── defineShortcuts.ts
    ├── useAuth.ts
    ├── useCommentService.ts
    ├── useDevice.ts
    ├── useFetchApi.ts
    ├── useFormField.ts
    ├── useMessage.ts
    ├── useNavRoute.ts
    ├── usePreferencesService.ts
    ├── useReport.ts
    ├── useShortcuts.ts
    ├── useSocket.ts
    ├── useTimelineService.ts
    ├── useToast.ts
    └── useUserService.ts
├── layouts
    ├── chat.vue
    ├── default.vue
    └── empty.vue
├── nuxt.config.ts
├── package.json
├── pages
    ├── [timeline_id].vue
    ├── about.vue
    ├── chats
    │   ├── [chat_id].vue
    │   └── index.vue
    ├── contact-us.vue
    ├── index.vue
    ├── login.vue
    ├── new.vue
    ├── privacy-policy.vue
    ├── register.vue
    ├── report
    │   └── [timeline_id].vue
    └── user-agreement.vue
├── public
    ├── apple-touch-icon-180x180.png
    ├── favicon.ico
    ├── firebase-messaging-sw.js
    ├── logo.svg
    ├── maskable-icon-512x512.png
    ├── pwa-192x192.png
    ├── pwa-512x512.png
    └── pwa-64x64.png
├── server
    └── tsconfig.json
├── tailwind.config.js
├── tsconfig.json
├── types
    ├── Chat.ts
    ├── ContentChat.ts
    ├── Conversation.ts
    ├── cloudinary.ts
    ├── comment.ts
    ├── index.ts
    ├── preferences.ts
    ├── timeline.ts
    └── user.ts
├── ui-thing.config.ts
└── utils
    ├── index.ts
    └── shared.styles.ts


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | package-lock.json
12 | 
13 | # Logs
14 | logs
15 | *.log
16 | 
17 | # Misc
18 | .DS_Store
19 | .fleet
20 | .idea
21 | 
22 | # Local env files
23 | .env
24 | .env.*
25 | !.env.example
26 | 
27 | .vscode
28 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "arrowParens": "always",
 3 |   "endOfLine": "lf",
 4 |   "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
 5 |   "printWidth": 100,
 6 |   "semi": true,
 7 |   "singleQuote": false,
 8 |   "tabWidth": 2,
 9 |   "trailingComma": "es5",
10 |   "useTabs": false,
11 |   "vueIndentScriptAndStyle": true,
12 |   "tailwindFunctions": ["tv"],
13 |   "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"]
14 | }
15 | 
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies:
 8 | 
 9 | ```bash
10 | # npm
11 | npm install
12 | 
13 | # pnpm
14 | pnpm install
15 | 
16 | # yarn
17 | yarn install
18 | 
19 | # bun
20 | bun install
21 | ```
22 | 
23 | ## Development Server
24 | 
25 | Start the development server on `http://localhost:3000`:
26 | 
27 | ```bash
28 | # npm
29 | npm run dev
30 | 
31 | # pnpm
32 | pnpm run dev
33 | 
34 | # yarn
35 | yarn dev
36 | 
37 | # bun
38 | bun run dev
39 | ```
40 | 
41 | ## Production
42 | 
43 | Build the application for production:
44 | 
45 | ```bash
46 | # npm
47 | npm run build
48 | 
49 | # pnpm
50 | pnpm run build
51 | 
52 | # yarn
53 | yarn build
54 | 
55 | # bun
56 | bun run build
57 | ```
58 | 
59 | Locally preview production build:
60 | 
61 | ```bash
62 | # npm
63 | npm run preview
64 | 
65 | # pnpm
66 | pnpm run preview
67 | 
68 | # yarn
69 | yarn preview
70 | 
71 | # bun
72 | bun run preview
73 | ```
74 | 
75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
76 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <VitePwaManifest />
  4 |         <NuxtLoadingIndicator />
  5 |         <div v-if="isAuthLoading">
  6 |             <NuxtLayout name="empty">
  7 |                 <SplashScreen />
  8 |             </NuxtLayout>
  9 |         </div>
 10 |         <div v-else-if="user">
 11 |             <NuxtLayout :user="user">
 12 |                 <NuxtPage class="h-[calc(100svh-56px-56px)]" />
 13 |                 <CookieControl locale="en">
 14 |                     <template #modal>
 15 |                         <h2>We value your privacy</h2>
 16 |                         <p>We use cookies to enhance your browsing experience, serve personalized ads or content, and
 17 |                             analyze our traffic. By clicking "Accept All", you consent to our use of cookies.</p>
 18 |                     </template>
 19 |                     <template #cookie="{ cookie }">
 20 |                         <h3 v-text="cookie.name" />
 21 |                         <span v-html="cookie.description" />
 22 | 
 23 |                         <div v-if="cookie.targetCookieIds">
 24 |                             <b>Cookie ids: </b>
 25 |                             <span v-text="cookie?.targetCookieIds?.join(', ')" />
 26 |                         </div>
 27 |                     </template>
 28 |                 </CookieControl>
 29 |             </NuxtLayout>
 30 |         </div>
 31 |         <div v-else>
 32 |             <NuxtLayout name="empty">
 33 |                 <NuxtPage />
 34 |             </NuxtLayout>
 35 |         </div>
 36 | 
 37 |         <UiToastToaster />
 38 |     </div>
 39 | </template>
 40 | 
 41 | <script lang="ts" setup>
 42 | const { useAuthUser, initAuth, useAuthLoading } = useAuth()
 43 | const {
 44 |     cookiesEnabled,
 45 |     cookiesEnabledIds,
 46 |     isConsentGiven,
 47 |     isModalActive,
 48 |     moduleOptions
 49 | } = useCookieControl()
 50 | 
 51 | const user = useAuthUser()
 52 | const isAuthLoading = useAuthLoading()
 53 | const route = useRoute()
 54 | const { getUrls } = usePreferencesService()
 55 | const socket = useSocket.getInstance()
 56 | 
 57 | // example: react to a cookie being accepted
 58 | watch(
 59 |     () => cookiesEnabledIds.value,
 60 |     (current, previous) => {
 61 |         if (
 62 |             !previous?.includes('google-analytics') &&
 63 |             current?.includes('google-analytics')
 64 |         ) {
 65 |             // cookie with id `google-analytics` got added
 66 |             window.location.reload() // placeholder for your custom change handler
 67 |         }
 68 |     },
 69 |     { deep: true },
 70 | )
 71 | 
 72 | watch(user, async (current, previous) => {
 73 |     if (current && !previous) {
 74 |         if ([
 75 |             "login",
 76 |             "register"
 77 |         ].includes(route.name?.toString() ?? "")) {
 78 |             // init socket
 79 |             // const socketURL = useRuntimeConfig().public.base_socket_url
 80 |             const socketURL = getUrls()?.socket_server ?? useRuntimeConfig().public.base_socket_url
 81 |             socket.set(socketURL)
 82 |             socket.establishConnection()
 83 | 
 84 |             return await navigateTo("/")
 85 |         }
 86 |     }
 87 | }, { deep: true })
 88 | 
 89 | onBeforeMount(() => {
 90 |     initAuth()
 91 |         .then((result) => {
 92 |             if (result) {
 93 |                 // init socket
 94 |                 // const socketURL = useRuntimeConfig().public.base_socket_url
 95 |                 const socketURL = getUrls()?.socket_server ?? useRuntimeConfig().public.base_socket_url
 96 |                 socket.set(socketURL)
 97 |                 socket.establishConnection()
 98 |             }
 99 |         })
100 |         .catch(async (error) => {
101 |             if (![
102 |                 "login",
103 |                 "register",
104 |                 "user-agreement",
105 |                 "privacy-policy",
106 |                 "about",
107 |                 "contact-us"
108 |             ].includes(route.name?.toString() ?? "")) {
109 |                 return await navigateTo("/login")
110 |             }
111 |         })
112 | })
113 | 
114 | </script>


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
 1 | @import url("https://rsms.me/inter/inter.css");
 2 | 
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | 
 7 | @layer base {
 8 |   :root {
 9 |     --background: 0 0% 100%;
10 |     --foreground: 222.2 84% 4.9%;
11 |     --card: 0 0% 100%;
12 |     --card-foreground: 222.2 84% 4.9%;
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 84% 4.9%;
15 |     --primary: 221.2 83.2% 53.3%;
16 |     --primary-foreground: 210 40% 98%;
17 |     --secondary: 210 40% 96.1%;
18 |     --secondary-foreground: 222.2 47.4% 11.2%;
19 |     --muted: 210 40% 96.1%;
20 |     --muted-foreground: 215.4 16.3% 46.9%;
21 |     --accent: 210 40% 96.1%;
22 |     --accent-foreground: 222.2 47.4% 11.2%;
23 |     --destructive: 0 84.2% 60.2%;
24 |     --destructive-foreground: 210 40% 98%;
25 |     --border: 214.3 31.8% 91.4%;
26 |     --input: 214.3 31.8% 91.4%;
27 |     --ring: 221.2 83.2% 53.3%;
28 |     --radius: 0.5rem;
29 |   }
30 |  
31 |   .dark {
32 |     --background: 222.2 84% 4.9%;
33 |     --foreground: 210 40% 98%;
34 |     --card: 222.2 84% 4.9%;
35 |     --card-foreground: 210 40% 98%;
36 |     --popover: 222.2 84% 4.9%;
37 |     --popover-foreground: 210 40% 98%;
38 |     --primary: 217.2 91.2% 59.8%;
39 |     --primary-foreground: 222.2 47.4% 11.2%;
40 |     --secondary: 217.2 32.6% 17.5%;
41 |     --secondary-foreground: 210 40% 98%;
42 |     --muted: 217.2 32.6% 17.5%;
43 |     --muted-foreground: 215 20.2% 65.1%;
44 |     --accent: 217.2 32.6% 17.5%;
45 |     --accent-foreground: 210 40% 98%;
46 |     --destructive: 0 62.8% 30.6%;
47 |     --destructive-foreground: 210 40% 98%;
48 |     --border: 217.2 32.6% 17.5%;
49 |     --input: 217.2 32.6% 17.5%;
50 |     --ring: 224.3 76.3% 48%;
51 |   }
52 | }
53 | 
54 | @layer base {
55 |   * {
56 |     @apply border-border;
57 |   }
58 |   body {
59 |     @apply bg-background text-foreground;
60 |     font-feature-settings:
61 |       "rlig" 1,
62 |       "calt" 1;
63 |   }
64 | }
65 | 
66 | 


--------------------------------------------------------------------------------
/components/AuthPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="flex h-screen">
  3 |         <div class="relative flex-1 hidden w-0 lg:block">
  4 |             <img class="absolute inset-0 object-cover w-full h-full z-0" :src="imageLogin" />
  5 |             <div v-if="(imageAppPreviews?.length ?? 0) > 0" class="absolute inset-0 bg-black opacity-50 z-10"></div>
  6 | 
  7 |             <div v-if="(imageAppPreviews?.length ?? 0) > 0" class="flex flex-col items-center justify-center h-screen gap-4">
  8 |                 <div class="flex flex-row gap-2">
  9 |                     <img v-for="imagePreview in imageAppPreviews" :src="imagePreview" alt="App Preview" class="h-[calc(100svh/2)] z-20">
 10 |                 </div>
 11 |                 <p class="text-secondary-foreground z-20">Get The App</p>
 12 |                 <div class="flex flex-row gap-8 text-center justify-center z-20">
 13 |                     <NuxtLink v-if="urlAppstore" :to="urlAppstore">
 14 |                         <img :src="imageAppstore"
 15 |                             alt="App Store Logo" class="h-12">
 16 |                     </NuxtLink>
 17 |                     <NuxtLink v-if="urlPlaystore" :to="urlPlaystore">
 18 |                         <img :src="imagePlaystore"
 19 |                             alt="Play Store Logo" class="h-12">
 20 |                     </NuxtLink>
 21 |                 </div>
 22 |             </div>
 23 | 
 24 |         </div>
 25 |         <div class="flex flex-col justify-center flex-1 px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
 26 |             <div class="flex flex-col justify-center items-center w-full h-full max-w-sm mx-auto lg:w-96">
 27 |                 <UiCard class="mt-auto mx-auto max-w-sm" title="Sign In" :description="`sign in to ${getAppName()}`">
 28 |                     <template #content>
 29 |                         <UiCardContent as="form" @submit="onSubmit" class="flex flex-col gap-4">
 30 |                             <Field v-slot="{ componentField }" name="email">
 31 |                                 <UiFormItem label="Email">
 32 |                                     <UiInput type="email" v-bind="componentField" />
 33 |                                 </UiFormItem>
 34 |                             </Field>
 35 |                             <Field v-slot="{ componentField }" name="password">
 36 |                                 <UiFormItem label="Password">
 37 |                                     <UiInput type="password" v-bind="componentField" />
 38 |                                 </UiFormItem>
 39 |                             </Field>
 40 |                             <div class="flex flex-col gap-2">
 41 |                                 <UiButton type="submit" :disabled="loading">Sign In</UiButton>
 42 |                                 <UiButton @click="loginAsAnonymousClicked" variant="secondary" :disabled="loading">
 43 |                                     <IconVenetianMask /> Sign In As Anonymous
 44 |                                 </UiButton>
 45 |                             </div>
 46 | 
 47 |                             <p class="text-sm text-center">Don't have an account? <NuxtLink class="text-primary"
 48 |                                     to="/register" :disabled="loading">Sign Up</NuxtLink>
 49 |                             </p>
 50 |                         </UiCardContent>
 51 |                     </template>
 52 |                 </UiCard>
 53 | 
 54 |                 <div class="mt-auto text-sm text-center">
 55 |                     <p class="text-sm text-center">By clicking on the "Sign In" button, you agree to our <NuxtLink
 56 |                             class="text-primary" to="/user-agreement" :disabled="loading">User Agreement</NuxtLink> and
 57 |                         our
 58 |                         <NuxtLink class="text-primary" to="/privacy-policy" :disabled="loading">Privacy Policy
 59 |                         </NuxtLink>
 60 |                     </p>
 61 |                 </div>
 62 | 
 63 |                 <div class="mt-auto">
 64 |                     <FooterLinks />
 65 |                 </div>
 66 |             </div>
 67 |         </div>
 68 |     </div>
 69 | </template>
 70 | 
 71 | <script lang="ts" setup>
 72 | import { z } from "zod";
 73 | import { TypeMessage } from "~/types";
 74 | 
 75 | const { login, loginAsAnonymous } = useAuth()
 76 | const { showMessage } = useMessage()
 77 | const { getImages, getUrls, getAppName } = usePreferencesService()
 78 | const imageLogin = getImages()?.image_url_login_lg
 79 | const imageAppPreviews = getImages()?.image_url_app_previews
 80 | const imageAppstore = getImages()?.image_url_app_store
 81 | const imagePlaystore = getImages()?.image_url_play_store
 82 | const urlAppstore = getUrls()?.app_store
 83 | const urlPlaystore = getUrls()?.play_store
 84 | const loading = ref(false);
 85 | 
 86 | const { handleSubmit } = useForm({
 87 |     validationSchema: toTypedSchema(
 88 |         z.object({
 89 |             email: z
 90 |                 .string({
 91 |                     required_error: "Email is required",
 92 |                 })
 93 |                 .email("Email must be a valid email"),
 94 |             password: z
 95 |                 .string({
 96 |                     required_error: 'Password is required',
 97 |                 })
 98 |                 .min(8, 'Password at least 8 characters'),
 99 |         })
100 |     ),
101 | });
102 | 
103 | const onSubmit = handleSubmit(async (values) => {
104 |     if (!loading.value) {
105 |         loading.value = true
106 |         await login(values.email, values.password)
107 |             .then(() => {
108 |                 console.log("login user")
109 |             })
110 |             .catch((error) => {
111 |                 showMessage(error, TypeMessage.destructive)
112 |             })
113 |             .finally(() => {
114 |                 loading.value = false
115 |             })
116 |     }
117 | });
118 | 
119 | async function loginAsAnonymousClicked() {
120 |     if (!loading.value) {
121 |         loading.value = true
122 |         await loginAsAnonymous()
123 |             .catch((error) => {
124 |                 console.log(error)
125 |             })
126 |             .finally(() => {
127 |                 loading.value = false
128 |             })
129 |     }
130 | }
131 | </script>
132 | 
133 | <style></style>


--------------------------------------------------------------------------------
/components/CardThreads.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div class="flex w-full">
  4 |             <div class="flex items-center space-x-4">
  5 |                 <UiAvatar class="h-10 w-10 rounded-full"
  6 |                     :class="isOwnerThread ? 'border-2 border-primary' : ''"
  7 |                     :src="props.timeline?.user.avatar ?? ''"
  8 |                     :fallback="getInitials(props.timeline?.user.name ?? 'Netijen Curhat')" />
  9 |                 <div class="space-y-2">
 10 |                     <h1 class="h-4 text-base font-bold"> {{ props.timeline?.user.name }} </h1>
 11 |                     <h5 class="h-4 text-xs"> {{ getTimeAgo(props.timeline?.created_at ?? "") }} </h5>
 12 |                 </div>
 13 |             </div>
 14 |             <div class="ml-auto">
 15 |                 <MoreDialog
 16 |                     :timeline_id="props.timeline?.timeline_id ?? 0"
 17 |                     :is-owner-thread="props.isOwnerThread ?? false"
 18 |                     @on-click-send-chat="handleSendChat"
 19 |                     @on-click-report="hanldeReport"
 20 |                     @on-click-delete="handleDelete"
 21 |                 />
 22 |             </div>
 23 |         </div>
 24 |         <div class="w-full text-base text-justify pt-4 pb-4">
 25 |             {{ props.timeline?.text_content }}
 26 |         </div>
 27 | 
 28 |         <div v-if="compact" class="flex items-center gap-5">
 29 |             <p class="text-sm text-gray-500">
 30 |                 {{
 31 |                     props.timeline?.total_likes +
 32 |                     ((props.timeline?.total_likes ?? 0) > 1 ? " likes" : " like")
 33 |                 }}
 34 |             </p>
 35 |             <p class="text-sm text-gray-500">
 36 |                 {{
 37 |                     props.timeline?.total_comments +
 38 |                     ((props.timeline?.total_comments ?? 0) > 1 ? " replies" : " reply")
 39 |                 }}
 40 |             </p>
 41 |         </div>
 42 | 
 43 |         <div v-else class="flex items-center gap-1">
 44 |             <UiButton @click="handleLike(props.timeline?.timeline_id ?? 0)" variant="ghost" class="rounded-full">
 45 |                 <IconHeart :class="{
 46 |                     'text-red-500': props.timeline?.is_liked,
 47 |                     'animate-pulse': props.likeIsClicked
 48 |                 }" />
 49 |                 <span :class="{
 50 |                     'animate-pulse': props.likeIsClicked
 51 |                 }">{{ (props.timeline?.total_likes ?? 0) > 0 ? props.timeline?.total_likes : "" }}</span>
 52 |             </UiButton>
 53 |             <UiButton @click="handleReply(props.timeline?.timeline_id ?? 0)" variant="ghost" class="rounded-full">
 54 |                 <IconMessageCircle />{{ (props.timeline?.total_comments ?? 0) > 0 ? props.timeline?.total_comments : "" }}
 55 |             </UiButton>
 56 |             <div class="ml-auto">
 57 |                 <ShareDialog
 58 |                     :timeline_id="props.timeline?.timeline_id ?? 0"
 59 |                     :url-to-share="urlToShare"
 60 |                     :content-to-share="contentToShare"
 61 |                     @onCopyContent="handleShare"
 62 |                 />
 63 |             </div>
 64 |         </div>
 65 |     </div>
 66 | </template>
 67 | 
 68 | <script lang="ts" setup>
 69 | import { type Timeline } from '@/types/Timeline';
 70 | const props = defineProps({
 71 |     timeline: {
 72 |         type: Object as () => Timeline,
 73 |         default: undefined,
 74 |         required: true
 75 |     },
 76 |     likeIsClicked: {
 77 |         type: Boolean,
 78 |         default: false,
 79 |         required: false
 80 |     },
 81 |     isOwnerThread: {
 82 |         type: Boolean,
 83 |         default: false,
 84 |         required: false
 85 |     },
 86 |     compact: {
 87 |         type: Boolean,
 88 |         required: false
 89 |     }
 90 | })
 91 | 
 92 | const urlToShare = `${window.location.origin}/${props.timeline?.timeline_id}`
 93 | const contentToShare = props.timeline?.text_content
 94 | 
 95 | const emits = defineEmits([
 96 |     'onClickLike',
 97 |     'onClickReply',
 98 |     'onClickShare',
 99 |     'onClickSendChat',
100 |     'onClickReport',
101 |     'onClickDelete'
102 | ])
103 | 
104 | 
105 | function handleLike(timeline_id: number) {
106 |     emits('onClickLike', timeline_id)
107 | }
108 | 
109 | function handleReply(timeline_id: number) {
110 |     emits('onClickReply', timeline_id)
111 | }
112 | 
113 | function handleShare(timeline_id: number) {
114 |     emits('onClickShare', timeline_id)
115 | }
116 | 
117 | function handleSendChat(timeline_id: number) {
118 |     emits('onClickSendChat', timeline_id)
119 | }
120 | 
121 | function hanldeReport(timeline_id: number) {
122 |     emits('onClickReport', timeline_id)
123 | }
124 | 
125 | function handleDelete(timeline_id: number) {
126 |     emits('onClickDelete', timeline_id)
127 | }
128 | 
129 | </script>
130 | 
131 | <style></style>


--------------------------------------------------------------------------------
/components/CardThreadsSkeleton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="flex flex-col gap-10">
 3 |         <UiCard class="rounded-lg">
 4 |             <div class="flex flex-col gap-5 p-6">
 5 |                 <div class="flex w-full">
 6 |                     <div class="flex items-center space-x-4">
 7 |                         <UiSkeleton class="h-12 w-12 rounded-full" />
 8 |                         <div class="space-y-2">
 9 |                             <UiSkeleton class="h-4 w-[250px]" />
10 |                             <UiSkeleton class="h-4 w-[200px]" />
11 |                         </div>
12 |                     </div>
13 |                 </div>
14 |                 <div class="flex flex-col gap-3 w-full">
15 |                     <UiSkeleton class="h-8 w-full" />
16 |                     <UiSkeleton class="h-8 w-full" />
17 |                     <UiSkeleton class="h-8 w-[300px]" />
18 |                 </div>
19 |             </div>
20 |         </UiCard>
21 |         <UiCard class="rounded-lg">
22 |             <div class="flex flex-col gap-5 p-6">
23 |                 <div class="flex w-full">
24 |                     <div class="flex items-center space-x-4">
25 |                         <UiSkeleton class="h-12 w-12 rounded-full" />
26 |                         <div class="space-y-2">
27 |                             <UiSkeleton class="h-4 w-[250px]" />
28 |                             <UiSkeleton class="h-4 w-[200px]" />
29 |                         </div>
30 |                     </div>
31 |                 </div>
32 |                 <div class="flex flex-col gap-3 w-full">
33 |                     <UiSkeleton class="h-8 w-full" />
34 |                     <UiSkeleton class="h-8 w-full" />
35 |                     <UiSkeleton class="h-8 w-[300px]" />
36 |                 </div>
37 |             </div>
38 |         </UiCard>
39 |     </div>
40 | </template>


--------------------------------------------------------------------------------
/components/Chat/Bubble.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div ref="containerMessage" class="pt-3 pb-3 rounded-lg" :class="{
  3 |         'col-start-1 col-end-8': !props.is_sender,
  4 |         'col-start-6 col-end-13': props.is_sender,
  5 |         'bubble-enter-active': appear,
  6 |         'bubble-enter': appear
  7 |     }">
  8 |         <div :class="{
  9 |             'justify-start flex-row-reverse': props.is_sender
 10 |         }" class="flex flex-row items-center gap-3">
 11 |             <UiAvatar class="h-10 w-10" :class="{
 12 |                 'scale-x-[-1]': props.is_sender
 13 |             }" :src="props.avatar ?? ''" :fallback="getInitials(props.username ?? 'NaN')" />
 14 |             <div :class="{
 15 |                 'bg-secondary text-secondary-foreground': !props.is_sender,
 16 |                 'bg-primary text-primary-foreground': props.is_sender
 17 |             }" class="relative text-sm py-2 px-4 shadow rounded-xl">
 18 |                 <div v-if="props.is_typing" class="italic">Typing...</div>
 19 |                 <div class="flex flex-col">
 20 |                     <div v-if="textMessage?.text">{{ textMessage?.text }}</div>
 21 |                     <div v-else-if="imageMessage?.url_image">
 22 |                         <CldImage :src="imageMessage.url_image" format="webp" width="288" height="288" alt="image"
 23 |                             class="
 24 |                             object-cover
 25 |                             cursor-pointer
 26 |                             hover:scale-110
 27 |                             transition
 28 |                             translate
 29 |                             " />
 30 |                     </div>
 31 | 
 32 |                     <div class="flex flex-row items-center gap-1 text-[9px] ml-auto">
 33 |                         {{ props.timestamp.toLocaleTimeString() }}
 34 |                         <IconCheckCheck class="h-3 w-3" :class="{
 35 |                             'text-green-300': props.is_read,
 36 |                             'hidden': !props.is_sender
 37 |                         }" />
 38 |                     </div>
 39 |                 </div>
 40 |             </div>
 41 |         </div>
 42 |     </div>
 43 | </template>
 44 | 
 45 | <script lang="ts" setup>
 46 | import type { AudioContentChat, ImageContentChat, TextContentChat } from '~/types/ContentChat';
 47 | 
 48 | 
 49 | const props = defineProps({
 50 |     username: {
 51 |         type: String,
 52 |         required: false
 53 |     },
 54 |     content_message: {
 55 |         type: Object as () => TextContentChat | ImageContentChat | AudioContentChat | undefined | null,
 56 |         required: false
 57 |     },
 58 |     avatar: {
 59 |         type: String,
 60 |         required: false
 61 |     },
 62 |     timestamp: {
 63 |         type: Date,
 64 |         required: true
 65 |     },
 66 |     is_sender: {
 67 |         type: Boolean,
 68 |         required: false
 69 |     },
 70 |     is_typing: {
 71 |         type: Boolean,
 72 |         required: false
 73 |     },
 74 |     is_read: {
 75 |         type: Boolean,
 76 |         required: false
 77 |     },
 78 |     is_new_chat: {
 79 |         type: Boolean,
 80 |         required: false
 81 |     }
 82 | })
 83 | 
 84 | const emits = defineEmits(['onRender'])
 85 | const containerMessage = ref<HTMLElement | undefined>(undefined)
 86 | const textMessage = ref<TextContentChat>()
 87 | const imageMessage = ref<ImageContentChat>()
 88 | const appear = ref(false)
 89 | 
 90 | onBeforeMount(() => {
 91 |     switch (props.content_message?.type) {
 92 |         case 'text':
 93 |             textMessage.value = props.content_message as TextContentChat
 94 |             break;
 95 |         case 'image':
 96 |             imageMessage.value = props.content_message as ImageContentChat
 97 |             break;
 98 |         case 'audio':
 99 |             break
100 |     }
101 | })
102 | 
103 | onMounted(() => {
104 |     console.log("on render is called")
105 |     emits('onRender')
106 |     if (props.is_new_chat) {
107 |         nextTick(() => {
108 |             containerMessage.value?.scrollIntoView({
109 |                 behavior: 'smooth',
110 |                 block: 'end',
111 |                 inline: 'end'
112 |             })
113 |             appear.value = true
114 |         })
115 |     }
116 | })
117 | 
118 | </script>
119 | 
120 | <style scoped>
121 | .bubble-enter-active {
122 |     transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
123 | }
124 | 
125 | .bubble-enter {
126 |     transform: scale(0.9);
127 |     opacity: 100;
128 | }
129 | </style>


--------------------------------------------------------------------------------
/components/Chat/StatusIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <span class="relative flex h-2 w-2">
 3 |         <span class="absolute inline-flex h-full w-full rounded-full opacity-75"
 4 |         :class="{
 5 |             'animate-ping': props.isOnline,
 6 |             'bg-green-400': props.isOnline,
 7 |             'bg-orange-400': !props.isOnline
 8 |         }"
 9 |         ></span>
10 |         <span class="relative inline-flex rounded-full h-2 w-2"
11 |         :class="{
12 |             'bg-green-500': props.isOnline,
13 |             'bg-orange-500': !props.isOnline
14 |         }"></span>
15 |     </span>
16 | </template>
17 | 
18 | <script lang="ts" setup>
19 | 
20 | const props = defineProps({
21 |     isOnline: {
22 |         type: Boolean,
23 |         default: false,
24 |         required: false
25 |     }
26 | })
27 | 
28 | </script>


--------------------------------------------------------------------------------
/components/CommentView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="flex w-full">
 3 |         <div class="flex items-center space-x-4">
 4 |             <UiAvatar
 5 |                 class="h-10 w-10 rounded-full"
 6 |                 :src="props.commentData.avatar"
 7 |                 :fallback="getInitials(props.commentData.name)"
 8 |             />
 9 |             <div class="space-y-2">
10 |                 <h1 class="h-4 text-base font-bold">
11 |                     {{ props.commentData.name }}
12 |                     <span class="text-xs font-normal text-gray-500 pl-1">
13 |                         {{ getTimeAgo(props.commentData.timed) }}
14 |                     </span>
15 |                 </h1>
16 |                 <h1 class="text-base">
17 |                     {{ props.commentData.text_content }}
18 |                 </h1>
19 |             </div>
20 |         </div>
21 |     </div>
22 |     <UiDivider class="pt-4 pb-4" />
23 | </template>
24 | 
25 | <script lang="ts" setup>
26 | import type { Comment } from '~/types/Comment';
27 | const props = defineProps({
28 |     commentData: {
29 |         type: Object as () => Comment,
30 |         required: true
31 |     }
32 | })
33 | 
34 | </script>
35 | 
36 | <style></style>


--------------------------------------------------------------------------------
/components/Footer/Mobile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="sticky w-full justify-between bottom-0 z-40 flex items-center border-t">
 3 |         <FooterMobileItem v-for="route in props.routes" :href="route.href" :icon="route.icon" :active="route.active"></FooterMobileItem>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 | const props = defineProps({
 9 |     routes: {
10 |         type: Object as () => NavRoute[],
11 |         required: true
12 |     }
13 | })
14 | </script>


--------------------------------------------------------------------------------
/components/Footer/MobileItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <NuxtLink :to="props.href"
 3 |         class="group flex gap-x-3 text-sm leading-6 font-semibold w-full justify-center p-4 text-secondary-foreground/60 bg-background/90 backdrop-blur hover:text-primary-foreground hover:bg-primary"
 4 |         :class="{
 5 |             'text-primary-foreground': props.active,
 6 |             'bg-primary': props.active
 7 |         }">
 8 |         <Icon :name="props.icon ?? 'home'" size="24px" />
 9 |     </NuxtLink>
10 | </template>
11 |     
12 | <script lang="ts" setup>
13 | const props = defineProps({
14 |     label: {
15 |         type: String,
16 |         required: false
17 |     },
18 |     href: {
19 |         type: String,
20 |         required: true
21 |     },
22 |     icon: {
23 |         type: String,
24 |         required: false,
25 |         default: 'bi:house'
26 |     },
27 |     active: {
28 |         type: Boolean,
29 |         required: false,
30 |         default: false
31 |     }
32 | })
33 | 
34 | </script>


--------------------------------------------------------------------------------
/components/FooterLinks.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="flex text-center gap-2">
 3 |         <NuxtLink v-for="(item, i) in footerItems" class="text-[10px] text-secondary-foreground/80 p-0 hover:underline"
 4 |             :key="i" :to="item?.to">
 5 |             {{ item?.title }}
 6 |         </NuxtLink>
 7 |     </div>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 | let footerItems: { title: string, to: string }[] | undefined[] = [
12 |     { title: "About", to: "/about" },
13 |     { title: "Sign In", to: "/login" },
14 |     { title: "Sign Up", to: "/register" },
15 |     { title: "Privacy Policy", to: "/privacy-policy" },
16 |     { title: "User Agreement", to: "/user-agreement" },
17 |     { title: "Contact Us", to: "/contact-us" },
18 | ];
19 | 
20 | const route = useRoute()
21 | function filterItems() {
22 |     const items = footerItems.map( (item) => {
23 |         if (item && route.path !== item.to) {
24 |             return item
25 |         }
26 |         return undefined
27 |     }).filter(Boolean) as { title: string, to: string }[]
28 |     footerItems = items
29 | }
30 | 
31 | onBeforeMount(() => {
32 |     filterItems()
33 | })
34 | 
35 | </script>


--------------------------------------------------------------------------------
/components/ListThreads.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="flex flex-col gap-10">
  3 |         <UiCard class="shadow-lg rounded-lg" v-for="timeline in props.timelines" :key="timeline.timeline_id">
  4 |             <div class="flex flex-col gap-5 p-6" v-if="!timeline.is_ads">
  5 |                 <CardThreads :timeline="timeline"
  6 |                     :likeIsClicked="likeStates[timeline.timeline_id]?.likeClicked ?? false"
  7 |                     :isOwnerThread="timeline.user.user_id == user.user_id" @onClickLike="handleLike"
  8 |                     @onClickReply="handleReply" @onClickShare="handleShare" @onClickSendChat="handleSendChat"
  9 |                     @onClickReport="hanldeReport" @onClickDelete="handleDelete" />
 10 |             </div>
 11 | 
 12 |             <div v-else>
 13 |                 <UiCard title="Space Iklan" description="Hubungi 089123456789" />
 14 |             </div>
 15 |         </UiCard>
 16 |     </div>
 17 | </template>
 18 | 
 19 | <script lang="ts" setup>
 20 | import type { User } from '~/types/User';
 21 | import type { Timeline } from '@/types/Timeline';
 22 | import type { Conversation } from '~/types/Conversation';
 23 | 
 24 | const props = defineProps({
 25 |     timelines: {
 26 |         type: Object as () => Timeline[],
 27 |         default: [],
 28 |         required: true
 29 |     }
 30 | })
 31 | 
 32 | const {
 33 |     doLikeTimeline,
 34 |     doUnlikeTimeline,
 35 |     doShareTimeline,
 36 |     deleteTimeline
 37 | } = useTimelineService()
 38 | const { useAuthUser } = useAuth()
 39 | const user = useAuthUser().value as User
 40 | const socket = useSocket.getInstance()
 41 | const likeStates = reactive<{ [key: number]: { likeClicked: boolean } }>({});
 42 | 
 43 | const getTimelineById = (timeline_id: number) => {
 44 |     const item = props.timelines.filter(item => item.timeline_id == timeline_id)
 45 |     return item.at(0)
 46 | }
 47 | 
 48 | function createConversation(from: User, to: User) {
 49 |     const conversation: Conversation = {
 50 |         conversation_id: `${from.user_id}.${to.user_id}`,
 51 |         users: [from, to],
 52 |         chats: [],
 53 |         last_chat: undefined,
 54 |         last_chat_timestamp: new Date().getTime()
 55 |     }
 56 |     socket.emit('req_create_conversation', conversation)
 57 | }
 58 | 
 59 | socket.on('res_create_conversation', (data: Conversation) => {
 60 |     console.log(data.conversation_id)
 61 |     navigateTo(`/chats/${data.conversation_id}`)
 62 | })
 63 | 
 64 | function handleSendChat(timeline_id: number) {
 65 |     const timeline = getTimelineById(timeline_id)
 66 |     const userTo = timeline?.user ?? user
 67 |     if (userTo) {
 68 |         createConversation(user, userTo)
 69 |     }
 70 | }
 71 | 
 72 | function hanldeReport(timeline_id: number) {
 73 |     navigateTo(`/report/${timeline_id}`)
 74 | }
 75 | 
 76 | function handleDelete(timeline_id: number) {
 77 |     deleteTimeline(user.user_id, timeline_id)
 78 |         .then(() => {
 79 |             location.reload()
 80 |         })
 81 |         .catch((error) => {
 82 |             useToast().toast({
 83 |                 title: "Failed",
 84 |                 description: error,
 85 |                 duration: 5000,
 86 |                 icon: "lucide:thumbs-down",
 87 |             });
 88 |         })
 89 | }
 90 | 
 91 | function handleShare(timeline_id: number) {
 92 |     doShareTimeline(user.user_id, timeline_id)
 93 |         .catch((error) => {
 94 |             console.log(error)
 95 |         })
 96 | }
 97 | 
 98 | function handleReply(timeline_id: number) {
 99 |     navigateTo(`/${timeline_id}`)
100 | }
101 | 
102 | function handleLike(timeline_id: number) {
103 |     if ((likeStates[timeline_id]?.likeClicked ?? false) == false) {
104 |         if (!likeStates[timeline_id]) {
105 |             likeStates[timeline_id] = {
106 |                 likeClicked: false
107 |             };
108 |         }
109 |         likeStates[timeline_id].likeClicked = true;
110 | 
111 |         if (getTimelineById(timeline_id)?.is_liked ?? false) {
112 |             doUnlikeTimeline(user.user_id, timeline_id)
113 |                 .then((result) => {
114 |                     getTimelineById(timeline_id)!.is_liked = false
115 |                     if (getTimelineById(timeline_id)?.total_likes ?? 0 > 0) {
116 |                         getTimelineById(timeline_id)!.total_likes -= 1
117 |                     }
118 |                 })
119 |                 .catch((error) => {
120 |                     console.log(error)
121 |                 })
122 |                 .finally(() => {
123 |                     likeStates[timeline_id].likeClicked = false;
124 |                 })
125 |         } else {
126 |             doLikeTimeline(user.user_id, timeline_id)
127 |                 .then((result) => {
128 |                     getTimelineById(timeline_id)!.is_liked = true
129 |                     getTimelineById(timeline_id)!.total_likes += 1
130 |                 })
131 |                 .catch((error) => {
132 |                     console.log(error)
133 |                 })
134 |                 .finally(() => {
135 |                     likeStates[timeline_id].likeClicked = false;
136 |                 })
137 |         }
138 |     }
139 | }
140 | 
141 | </script>
142 | 
143 | <style></style>


--------------------------------------------------------------------------------
/components/Loading/Spinner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="flex items-center justify-center p-4 border-b w-full h-20">
 3 |         <div class="w-full h-full animate-spin">
 4 |             <IconLoader2 class="w-full h-full"/>
 5 |         </div>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 | 
11 | </script>
12 | 
13 | <style></style>


--------------------------------------------------------------------------------
/components/MoreDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <UiDialog>
 3 |         <UiDialogTrigger as-child>
 4 |             <UiButton variant="ghost" class="rounded-full">
 5 |                 <IconMoreHorizontal />
 6 |             </UiButton>
 7 |         </UiDialogTrigger>
 8 | 
 9 |         <UiDialogContent class="sm:max-w-md" title="More" description="Choose button below">
10 |             <template #content>
11 |                 <UiDialogClose as-child>
12 |                     <div v-if="props.isOwnerThread" class="flex flex-col w-full max-w-sm mx-auto gap-2">
13 |                         <UiButton @click="handleDelete" variant="destructive">Delete</UiButton>
14 |                     </div>
15 |                     <div v-else class="flex flex-col w-full max-w-sm mx-auto gap-2">
16 |                         <UiButton @click="handleSendChat">Send Chat</UiButton>
17 |                         <UiButton @click="hanldeReport" variant="destructive">Report</UiButton>
18 |                     </div>
19 |                 </UiDialogClose>
20 |             </template>
21 |             <template #footer>
22 |                 <UiDialogFooter class="w-full max-w-sm mx-auto">
23 |                     <UiDialogClose as-child>
24 |                         <UiButton variant="secondary">Close</UiButton>
25 |                     </UiDialogClose>
26 |                 </UiDialogFooter>
27 |             </template>
28 |         </UiDialogContent>
29 |     </UiDialog>
30 | </template>
31 |   
32 | <script lang="ts" setup>
33 | 
34 | const props = defineProps({
35 |     timeline_id: {
36 |         type: Number,
37 |         required: true
38 |     },
39 |     isOwnerThread: {
40 |         type: Boolean,
41 |         required: true
42 |     }
43 | })
44 | 
45 | const emits = defineEmits([
46 |     'onClickSendChat',
47 |     'onClickReport',
48 |     'onClickDelete'
49 | ])
50 | 
51 | function handleSendChat() {
52 |     emits('onClickSendChat', props.timeline_id)
53 | }
54 | 
55 | function hanldeReport() {
56 |     emits('onClickReport', props.timeline_id)
57 | }
58 | 
59 | function handleDelete() {
60 |     emits('onClickDelete', props.timeline_id)
61 | }
62 | 
63 | 
64 | </script>
65 |   


--------------------------------------------------------------------------------
/components/NimueLogo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <svg width="1080" height="1080" viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
 3 |         <g clip-path="url(#clip0_370_0)">
 4 |             <circle cx="540" cy="540" r="540" fill="#008DDD" />
 5 |             <path d="M0 540H540V1080H100C44.7715 1080 0 1035.23 0 980V540Z" fill="#008DDD" />
 6 |             <path
 7 |                 d="M375.5 397.8H421.1C419.7 385.4 416.3 374.4 410.9 364.8C405.5 355.2 398.6 347.2 390.2 340.8C382 334.2 372.6 329.2 362 325.8C351.6 322.4 340.5 320.7 328.7 320.7C312.3 320.7 297.5 323.6 284.3 329.4C271.3 335.2 260.3 343.2 251.3 353.4C242.3 363.6 235.4 375.6 230.6 389.4C225.8 403 223.4 417.8 223.4 433.8C223.4 449.4 225.8 464 230.6 477.6C235.4 491 242.3 502.7 251.3 512.7C260.3 522.7 271.3 530.6 284.3 536.4C297.5 542 312.3 544.8 328.7 544.8C341.9 544.8 354 542.8 365 538.8C376 534.8 385.6 529 393.8 521.4C402 513.8 408.6 504.6 413.6 493.8C418.6 483 421.7 470.9 422.9 457.5H377.3C375.5 471.9 370.5 483.5 362.3 492.3C354.3 501.1 343.1 505.5 328.7 505.5C318.1 505.5 309.1 503.5 301.7 499.5C294.3 495.3 288.3 489.8 283.7 483C279.1 476.2 275.7 468.6 273.5 460.2C271.5 451.6 270.5 442.8 270.5 433.8C270.5 424.4 271.5 415.3 273.5 406.5C275.7 397.7 279.1 389.9 283.7 383.1C288.3 376.1 294.3 370.6 301.7 366.6C309.1 362.4 318.1 360.3 328.7 360.3C334.5 360.3 340 361.3 345.2 363.3C350.6 365.1 355.4 367.7 359.6 371.1C363.8 374.5 367.3 378.5 370.1 383.1C372.9 387.5 374.7 392.4 375.5 397.8ZM633.863 459V325.8H586.763V459C586.763 475 583.563 486.8 577.163 494.4C570.763 501.8 559.163 505.5 542.363 505.5C532.763 505.5 525.063 504.2 519.263 501.6C513.663 498.8 509.263 495.3 506.063 491.1C502.863 486.7 500.763 481.7 499.763 476.1C498.763 470.5 498.263 464.8 498.263 459V325.8H451.163V459C451.163 488.2 459.063 509.8 474.863 523.8C490.863 537.8 513.363 544.8 542.363 544.8C570.963 544.8 593.363 537.8 609.563 523.8C625.763 509.6 633.863 488 633.863 459ZM718.527 422.7V362.4H770.127C780.927 362.4 789.027 364.8 794.427 369.6C799.827 374.2 802.527 381.7 802.527 392.1C802.527 402.9 799.827 410.7 794.427 415.5C789.027 420.3 780.927 422.7 770.127 422.7H718.527ZM671.427 325.8V540H718.527V456.3H765.627C777.427 456.3 785.927 458.9 791.127 464.1C796.327 469.3 799.727 477.5 801.327 488.7C802.527 497.3 803.427 506.3 804.027 515.7C804.627 525.1 806.227 533.2 808.827 540H855.927C853.727 537 852.027 533.4 850.827 529.2C849.827 524.8 849.027 520.2 848.427 515.4C848.027 510.6 847.727 505.9 847.527 501.3C847.327 496.7 847.127 492.7 846.927 489.3C846.527 483.9 845.727 478.5 844.527 473.1C843.527 467.7 841.827 462.8 839.427 458.4C837.027 453.8 833.927 449.9 830.127 446.7C826.327 443.3 821.527 440.8 815.727 439.2V438.6C827.727 433.8 836.327 426.8 841.527 417.6C846.927 408.4 849.627 397.5 849.627 384.9C849.627 376.7 848.127 369.1 845.127 362.1C842.327 354.9 838.127 348.6 832.527 343.2C827.127 337.8 820.527 333.6 812.727 330.6C805.127 327.4 796.527 325.8 786.927 325.8H671.427ZM232.7 599.8V814H279.8V721.6H366.5V814H413.6V599.8H366.5V682H279.8V599.8H232.7ZM506.063 731.2L533.963 652.6H534.563L561.563 731.2H506.063ZM510.563 599.8L429.563 814H476.963L493.763 766.3H573.863L590.063 814H638.963L558.863 599.8H510.563ZM674.295 639.4V814H721.395V639.4H785.595V599.8H610.095V639.4H674.295Z"
 8 |                 fill="white" />
 9 |             <circle cx="796" cy="789" r="25" fill="white" />
10 |             <rect x="771" y="789" width="25" height="25" fill="white" />
11 |         </g>
12 |         <defs>
13 |             <clipPath id="clip0_370_0">
14 |                 <rect width="1080" height="1080" fill="white" />
15 |             </clipPath>
16 |         </defs>
17 |     </svg>
18 | </template>


--------------------------------------------------------------------------------
/components/Observer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="observer" />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |     props: {
 8 |         options: {
 9 |             type: Object
10 |         }
11 |     },
12 |     data: () => ({
13 |         observer: null,
14 |     }),
15 |     mounted() {
16 |         const observerOptions = this.options || {};
17 |         this.observer = new IntersectionObserver(([entry]) => {
18 |             if (entry && entry.isIntersecting) {
19 |                 this.$emit("intersect");
20 |             }
21 |         }, observerOptions);
22 | 
23 |         this.observer.observe(this.$el);
24 |     },
25 |     destroyed() {
26 |         this.observer.disconnect();
27 |     },
28 | };
29 | </script>


--------------------------------------------------------------------------------
/components/ReplyForm.vue:
--------------------------------------------------------------------------------
 1 | <!-- ReplyForm.vue -->
 2 | <template>
 3 |     <div class="flex flex-col gap-1 bg-background/90 backdrop-blur p-3">
 4 |         <div class="flex flex-row pl-12 gap-1">
 5 |             <UiButton class="rounded-full h-8 w-8" v-for="(emoji, index) in emojis" @click="emojiClicked(index)"
 6 |                 variant="ghost">{{ emoji }}
 7 |             </UiButton>
 8 |         </div>
 9 |         <form @submit.prevent="submitReply" class="flex items-center gap-2">
10 |             <UiAvatar
11 |                 class="h-10 w-10 rounded-full"
12 |                 :src="props.user.avatar"
13 |                 :fallback="getInitials(props.user.name)"
14 |             />
15 |             <CldUploadWidget
16 |                 v-if="props.withImageUpload"
17 |                 v-slot="{ open }"
18 |                 :onUpload="handleUpload"
19 |                 uploadPreset="nimue_upload_preset">
20 |                 <UiButton
21 |                     class="rounded-full h-10 w-10 shrink-0"
22 |                     @click="open"
23 |                     size="icon-sm"
24 |                 >
25 |                     <IconImage class="h-4 w-4"/>
26 |                 </UiButton>
27 |             </CldUploadWidget>
28 | 
29 |             <UiInput
30 |                 @update:model-value="handleInputUpdateModelValue"
31 |                 v-model="replyText"
32 |                 class="rounded-full"
33 |                 placeholder="mau bales apa?"
34 |                 required
35 |             />
36 |             <UiButton type="submit"
37 |                 class="lg:h-10 lg:w-16 w-10 h-10 shrink-0 rounded-full"
38 |                 size="icon-sm">
39 |                 <span class="hidden lg:block">Send</span>
40 |                 <IconSend class="lg:hidden h-4 w-4"/>
41 |             </UiButton>
42 |         </form>
43 |     </div>
44 | </template>
45 | 
46 | <script lang="ts" setup>
47 | import type { User } from '~/types/User';
48 | import usePreferencesService from '~/composables/usePreferencesService';
49 | import type { CloudinaryUploadResponse } from '~/types/Cloudinary';
50 | 
51 | const { getReplyEmojis } = usePreferencesService()
52 | const emojis: string[] = getReplyEmojis()
53 | const replyText = ref('')
54 | const preset = useRuntimeConfig().public.cloudinary.uploadPreset
55 | 
56 | const emits = defineEmits(['onSubmit', 'onKeypress', 'onUpload'])
57 | 
58 | const props = defineProps({
59 |     user: {
60 |         type: Object as () => User,
61 |         required: true
62 |     },
63 |     withImageUpload: {
64 |         type: Boolean,
65 |         required: false,
66 |         default: false
67 |     }
68 | })
69 | 
70 | function emojiClicked(index: number) {
71 |     replyText.value += emojis[index]
72 | }
73 | 
74 | const handleInputUpdateModelValue = (value: string) => {
75 |     emits('onKeypress', value)
76 | }
77 | 
78 | const handleUpload = (value: CloudinaryUploadResponse) => {
79 |     //passing url if success
80 |     if(value._value.event == 'success') {
81 |         emits('onUpload', value._value.info.secure_url)
82 |     }
83 | }
84 | 
85 | const submitReply = () => {
86 |     emits('onSubmit', replyText.value)
87 |     replyText.value = ""
88 | };
89 | </script>
90 | 
91 | <style scoped>
92 | /* Add your custom styling here */
93 | /* You might want to customize the appearance of the avatar, textarea, and button */
94 | </style>


--------------------------------------------------------------------------------
/components/ShareDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <UiDialog>
 3 |         <UiDialogTrigger as-child>
 4 |             <UiButton variant="ghost" class="rounded-full">
 5 |                 <IconShare />
 6 |             </UiButton>
 7 |         </UiDialogTrigger>
 8 | 
 9 |         <UiDialogContent class="sm:max-w-md" title="Share"
10 |             description="Share this content with your friends to spread love and wisdom.">
11 |             <template #content>
12 |                 <div class="flex items-center space-x-2">
13 |                     <div class="grid flex-1 gap-2">
14 |                         <UiLabel for="link" class="sr-only"> Link </UiLabel>
15 |                         <UiTextarea v-if="(props.contentToShare?.length ?? 0) > 32" id="link"
16 |                             :model-value="props.contentToShare ?? ''" readOnly />
17 |                         <UiInput v-else id="link" :model-value="props.contentToShare ?? ''" readOnly />
18 |                     </div>
19 |                     <UiDialogClose as-child>
20 |                         <UiButton @click="copyValue" type="submit" size="icon" class="px-3">
21 |                             <span class="sr-only">Copy</span>
22 |                             <IconCopy class="h-4 w-4" />
23 |                         </UiButton>
24 |                     </UiDialogClose>
25 |                 </div>
26 |             </template>
27 |             <template #footer>
28 |                 <UiDialogFooter class="sm:justify-start">
29 |                     <UiDialogClose as-child>
30 |                         <UiButton variant="secondary">Close</UiButton>
31 |                     </UiDialogClose>
32 |                 </UiDialogFooter>
33 |             </template>
34 |         </UiDialogContent>
35 |     </UiDialog>
36 | </template>
37 |   
38 | <script lang="ts" setup>
39 | 
40 | const props = defineProps({
41 |     timeline_id: {
42 |         type: Number,
43 |         required: true
44 |     },
45 |     urlToShare: {
46 |         type: String,
47 |         required: false
48 |     },
49 |     contentToShare: {
50 |         type: String,
51 |         required: false
52 | 
53 |     }
54 | })
55 | 
56 | const emits = defineEmits([
57 |     'onCopyContent'
58 | ])
59 | 
60 | const copyToShare = `${props.contentToShare ?? ""} \n\n ${props.urlToShare ?? ""}`
61 | 
62 | const copyValue = () => {
63 |     const { isSupported, copy } = useClipboard({ legacy: true });
64 |     if (isSupported.value) {
65 |         copy(copyToShare);
66 |         emits('onCopyContent', props.timeline_id)
67 |         useToast().toast({
68 |             title: "Copied",
69 |             description: `The content has been copied to your clipboard.`,
70 |             duration: 5000,
71 |             icon: "lucide:thumbs-up",
72 |         });
73 |         return;
74 |     } else {
75 |         useToast().toast({
76 |             title: "Not supported",
77 |             description: `Your browser does not support copying to clipboard.`,
78 |             duration: 5000,
79 |             icon: "lucide:thumbs-down",
80 |         });
81 |         return;
82 |     }
83 | };
84 | </script>
85 |   


--------------------------------------------------------------------------------
/components/SplashScreen.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="flex items-center justify-center h-screen">
 3 |         <div class="absolute w-20 h-20 animate-pulse">
 4 |             <NimueLogo class="w-20 h-20"/>
 5 |             <!-- <IconLoader2 class="w-20 h-20"/> -->
 6 |         </div>
 7 |     </div>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 | 
12 | </script>
13 | 
14 | <style></style>


--------------------------------------------------------------------------------
/components/Ui/AlertDialog/Action.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogAction
 3 |     v-bind="reactiveOmit(props, 'class', 'text', 'variant', 'size')"
 4 |     :class="buttonStyles({ variant, size, disabled, class: props.class })"
 5 |   >
 6 |     <slot>{{ text }} </slot>
 7 |   </AlertDialogAction>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { AlertDialogAction } from "radix-vue";
12 |   import type { AlertDialogActionProps } from "radix-vue";
13 | 
14 |   const props = withDefaults(
15 |     defineProps<
16 |       AlertDialogActionProps & {
17 |         /** Action to perform when the button is clicked */
18 |         onClick?: () => void;
19 |         /** Text to display in the button */
20 |         text?: string;
21 |         /** Custom class(es) to add to the button */
22 |         class?: any;
23 |         /** Whether the button is disabled */
24 |         disabled?: boolean;
25 |         /** The button's visual variant */
26 |         variant?: VariantProps<typeof buttonStyles>["variant"];
27 |         /** The button's visual size */
28 |         size?: VariantProps<typeof buttonStyles>["size"];
29 |       }
30 |     >(),
31 |     {
32 |       text: "Continue",
33 |       variant: "default",
34 |     }
35 |   );
36 | </script>
37 | 


--------------------------------------------------------------------------------
/components/Ui/AlertDialog/AlertDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogRoot v-bind="forwarded">
 3 |     <slot>
 4 |       <slot name="trigger">
 5 |         <UiAlertDialogTrigger v-if="triggerText" as-child>
 6 |           <UiButton variant="outline">{{ triggerText }}</UiButton>
 7 |         </UiAlertDialogTrigger>
 8 |       </slot>
 9 |       <slot name="content">
10 |         <UiAlertDialogContent>
11 |           <slot name="header">
12 |             <UiAlertDialogHeader>
13 |               <slot name="title">
14 |                 <UiAlertDialogTitle v-if="title" :title="title" />
15 |               </slot>
16 |               <slot name="description">
17 |                 <UiAlertDialogDescription v-if="description" :description="description" />
18 |               </slot>
19 |             </UiAlertDialogHeader>
20 |           </slot>
21 |           <slot name="footer">
22 |             <UiAlertDialogFooter>
23 |               <slot name="cancel">
24 |                 <UiAlertDialogCancel />
25 |               </slot>
26 |               <slot name="action">
27 |                 <UiAlertDialogAction />
28 |               </slot>
29 |             </UiAlertDialogFooter>
30 |           </slot>
31 |         </UiAlertDialogContent>
32 |       </slot>
33 |     </slot>
34 |   </AlertDialogRoot>
35 | </template>
36 | 
37 | <script lang="ts" setup>
38 |   import { AlertDialogRoot, useForwardPropsEmits } from "radix-vue";
39 |   import type { AlertDialogEmits, AlertDialogProps } from "radix-vue";
40 | 
41 |   const props = defineProps<
42 |     AlertDialogProps & {
43 |       /** Text to display in the trigger button */
44 |       triggerText?: string;
45 |       /** Text to be passed to the `AlertDialogTitle` */
46 |       title?: string;
47 |       /** Text to be passed to the `AlertDialogDescription` */
48 |       description?: string;
49 |     }
50 |   >();
51 | 
52 |   const emits = defineEmits<AlertDialogEmits>();
53 | 
54 |   const forwarded = useForwardPropsEmits(
55 |     reactiveOmit(props, "description", "title", "triggerText"),
56 |     emits
57 |   );
58 | </script>
59 | 


--------------------------------------------------------------------------------
/components/Ui/AlertDialog/Cancel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogCancel
 3 |     v-bind="reactiveOmit(props, 'class', 'text', 'variant', 'size')"
 4 |     :class="buttonStyles({ variant, size, disabled, class: props.class })"
 5 |   >
 6 |     <slot>{{ text }}</slot>
 7 |   </AlertDialogCancel>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { AlertDialogCancel } from "radix-vue";
12 |   import type { AlertDialogCancelProps } from "radix-vue";
13 | 
14 |   const props = withDefaults(
15 |     defineProps<
16 |       AlertDialogCancelProps & {
17 |         /** Action to perform when the button is clicked */
18 |         onClick?: () => void;
19 |         /** Text to display in the button */
20 |         text?: string;
21 |         /** Custom class(es) to add to the button */
22 |         class?: any;
23 |         /** Whether the button is disabled */
24 |         disabled?: boolean;
25 |         /** The button's visual variant */
26 |         variant?: VariantProps<typeof buttonStyles>["variant"];
27 |         /** The button's visual size */
28 |         size?: VariantProps<typeof buttonStyles>["size"];
29 |       }
30 |     >(),
31 |     {
32 |       text: "Cancel",
33 |       variant: "outline",
34 |     }
35 |   );
36 | </script>
37 | 


--------------------------------------------------------------------------------
/components/Ui/AlertDialog/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiAlertDialogPortal :to="to">
 3 |     <slot name="overlay">
 4 |       <UiAlertDialogOverlay />
 5 |     </slot>
 6 |     <AlertDialogContent
 7 |       :class="styles({ class: props.class })"
 8 |       v-bind="{ ...forwarded, ...$attrs }"
 9 |     >
10 |       <slot></slot>
11 |     </AlertDialogContent>
12 |   </UiAlertDialogPortal>
13 | </template>
14 | 
15 | <script lang="ts" setup>
16 |   import { AlertDialogContent, useForwardPropsEmits } from "radix-vue";
17 |   import type { AlertDialogContentEmits, AlertDialogContentProps } from "radix-vue";
18 | 
19 |   defineOptions({ inheritAttrs: false });
20 | 
21 |   const props = defineProps<
22 |     AlertDialogContentProps & {
23 |       /** Custom class(es) to add to the `AlertDialogContent` */
24 |       class?: any;
25 |       /** The element to render the portal into */
26 |       to?: string | HTMLElement;
27 |     }
28 |   >();
29 |   const emit = defineEmits<AlertDialogContentEmits>();
30 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emit);
31 | 
32 |   const styles = tv({
33 |     base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
34 |   });
35 | </script>
36 | 


--------------------------------------------------------------------------------
/components/Ui/AlertDialog/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogDescription
 3 |     v-bind="reactiveOmit(props, 'class', 'description')"
 4 |     :class="styles({ class: props.class })"
 5 |   >
 6 |     <slot>{{ description }}</slot>
 7 |   </AlertDialogDescription>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { AlertDialogDescription } from "radix-vue";
12 |   import type { AlertDialogDescriptionProps } from "radix-vue";
13 | 
14 |   const props = defineProps<
15 |     AlertDialogDescriptionProps & {
16 |       /** Text to display in the description */
17 |       description?: string;
18 |       /** Custom class(es) to add to the description */
19 |       class?: any;
20 |     }
21 |   >();
22 | 
23 |   const styles = tv({
24 |     base: "text-sm text-muted-foreground",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/components/Ui/AlertDialog/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
 3 |     <slot></slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the element */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "div",
20 |     }
21 |   );
22 |   const styles = tv({
23 |     base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/components/Ui/AlertDialog/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
 3 |     <slot></slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive, useForwardProps } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the element */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "div",
20 |     }
21 |   );
22 | 
23 |   const styles = tv({
24 |     base: "flex flex-col gap-2 text-center sm:text-left",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/components/Ui/AlertDialog/Overlay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogOverlay
 3 |     v-bind="reactiveOmit(props, 'class')"
 4 |     :class="styles({ class: props.class })"
 5 |   />
 6 | </template>
 7 | 
 8 | <script lang="ts" setup>
 9 |   import { AlertDialogOverlay } from "radix-vue";
10 |   import type { AlertDialogOverlayProps } from "radix-vue";
11 | 
12 |   const props = defineProps<
13 |     AlertDialogOverlayProps & {
14 |       /** Custom class(es) to add to the overlay */
15 |       class?: any;
16 |     }
17 |   >();
18 | 
19 |   const styles = tv({
20 |     base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",
21 |   });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/components/Ui/AlertDialog/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogPortal v-bind="props">
 3 |     <slot></slot>
 4 |   </AlertDialogPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { AlertDialogPortal } from "radix-vue";
 9 |   import type { AlertDialogPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<AlertDialogPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/Ui/AlertDialog/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogTitle v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })">
 3 |     <slot>{{ title }}</slot>
 4 |   </AlertDialogTitle>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { AlertDialogTitle } from "radix-vue";
 9 |   import type { AlertDialogTitleProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     AlertDialogTitleProps & {
13 |       /** Text to display in the title */
14 |       title?: string;
15 |       /** Custom class(es) to add to the title */
16 |       class?: any;
17 |     }
18 |   >();
19 | 
20 |   const styles = tv({
21 |     base: "text-lg font-semibold",
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/components/Ui/AlertDialog/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AlertDialogTrigger v-bind="props">
 3 |     <slot></slot>
 4 |   </AlertDialogTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { AlertDialogTrigger, useForwardProps } from "radix-vue";
 9 |   import type { AlertDialogTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<AlertDialogTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/Ui/Avatar/Avatar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AvatarRoot :as="as" :as-child="asChild" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <slot name="image">
 5 |         <UiAvatarImage
 6 |           @loading-status-change="emits('loadingStatusChange', $event)"
 7 |           v-if="src"
 8 |           :src="src"
 9 |           :alt="alt"
10 |           :class="imageClass"
11 |         />
12 |       </slot>
13 |       <slot name="fallback">
14 |         <UiAvatarFallback :delay-ms="delayMs" :class="fallbackClass" :fallback="fallback" />
15 |       </slot>
16 |     </slot>
17 |   </AvatarRoot>
18 | </template>
19 | 
20 | <script lang="ts" setup>
21 |   import { AvatarRoot } from "radix-vue";
22 |   import type { AvatarImageEmits, AvatarImageProps, AvatarRootProps } from "radix-vue";
23 | 
24 |   const props = withDefaults(
25 |     defineProps<
26 |       AvatarRootProps &
27 |         Partial<AvatarImageProps> & {
28 |           class?: any;
29 |           imageClass?: any;
30 |           fallbackClass?: any;
31 |           alt?: string;
32 |           fallback?: string;
33 |           delayMs?: number;
34 |         }
35 |     >(),
36 |     {}
37 |   );
38 | 
39 |   const emits = defineEmits<AvatarImageEmits>();
40 |   const styles = tv({
41 |     base: "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
42 |   });
43 | </script>
44 | 


--------------------------------------------------------------------------------
/components/Ui/Avatar/Fallback.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AvatarFallback
 3 |     :class="styles({ class: props.class })"
 4 |     v-bind="reactiveOmit(props, 'class', 'fallback')"
 5 |   >
 6 |     <slot>
 7 |       {{ fallback }}
 8 |     </slot>
 9 |   </AvatarFallback>
10 | </template>
11 | 
12 | <script lang="ts" setup>
13 |   import { AvatarFallback } from "radix-vue";
14 |   import type { AvatarFallbackProps } from "radix-vue";
15 | 
16 |   const props = defineProps<
17 |     AvatarFallbackProps & {
18 |       /** The text to display inside th eavatar */
19 |       fallback?: string;
20 |       /** Custom class(es) to add to the element */
21 |       class?: any;
22 |     }
23 |   >();
24 |   const styles = tv({
25 |     base: "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/components/Ui/Avatar/Image.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AvatarImage v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { AvatarImage } from "radix-vue";
 7 |   import type { AvatarImageEmits, AvatarImageProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     AvatarImageProps & {
11 |       /** The alt text for the image */
12 |       alt?: string;
13 |       /** Custom class(es) to add to the element */
14 |       class?: any;
15 |     }
16 |   >();
17 |   const emits = defineEmits<AvatarImageEmits>();
18 | 
19 |   const styles = tv({
20 |     base: "aspect-square h-full w-full object-cover",
21 |   });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/components/Ui/Button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <component
 3 |     :is="elementType"
 4 |     :class="
 5 |       buttonStyles({
 6 |         disabled: disabled || loading,
 7 |         variant: variant,
 8 |         size: size,
 9 |         class: props.class,
10 |       })
11 |     "
12 |     :disabled="disabled || loading"
13 |     :to="to"
14 |     :href="href"
15 |     :type="type"
16 |     @click="onClick"
17 |   >
18 |     <slot></slot>
19 |   </component>
20 | </template>
21 | 
22 | <script setup lang="ts">
23 |   import type { RouteLocationRaw } from "vue-router";
24 | 
25 |   type ButtonProps = VariantProps<typeof buttonStyles>;
26 |   const props = withDefaults(
27 |     defineProps<{
28 |       type?: "button" | "submit" | "reset";
29 |       disabled?: boolean;
30 |       loading?: boolean;
31 |       onClick?: any;
32 |       to?: string | RouteLocationRaw;
33 |       href?: string;
34 |       as?: string;
35 |       class?: any;
36 |       variant?: ButtonProps["variant"];
37 |       size?: ButtonProps["size"];
38 |     }>(),
39 |     {
40 |       type: "button",
41 |     }
42 |   );
43 | 
44 |   const elementType = computed(() => {
45 |     if (props.as) return props.as;
46 |     if (props.href || props.to) return resolveComponent("NuxtLink");
47 |     return "button";
48 |   });
49 | </script>
50 | 


--------------------------------------------------------------------------------
/components/Ui/Card/Card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :as="as" :as-child="asChild" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       <slot name="header">
 5 |         <UiCardHeader>
 6 |           <slot name="title">
 7 |             <UiCardTitle v-if="title || $slots.title" :title="title" />
 8 |           </slot>
 9 |           <slot name="description">
10 |             <UiCardDescription
11 |               v-if="description || $slots.description"
12 |               :description="description"
13 |             />
14 |           </slot>
15 |         </UiCardHeader>
16 |       </slot>
17 |       <slot name="content" v-if="content || $slots.content">
18 |         <UiCardContent>
19 |           <div v-html="content"></div>
20 |         </UiCardContent>
21 |       </slot>
22 |       <slot name="footer"></slot>
23 |     </slot>
24 |   </Primitive>
25 | </template>
26 | 
27 | <script lang="ts" setup>
28 |   import { Primitive } from "radix-vue";
29 |   import type { PrimitiveProps } from "radix-vue";
30 | 
31 |   const props = withDefaults(
32 |     defineProps<
33 |       PrimitiveProps & {
34 |         /** Title that should be displayed. Passed to the `CardTitle` component */
35 |         title?: string;
36 |         /** Description that should be displayed. Passed to the `CardDescription` component */
37 |         description?: string;
38 |         /** Content that should be displayed. Passed to the `CardContent` component */
39 |         content?: string;
40 |         /** Custom class(es) to add to the element */
41 |         class?: any;
42 |       }
43 |     >(),
44 |     {
45 |       as: "div",
46 |     }
47 |   );
48 | 
49 |   const styles = tv({
50 |     base: "rounded-lg border bg-card text-card-foreground shadow-sm",
51 |   });
52 | </script>
53 | 


--------------------------------------------------------------------------------
/components/Ui/Card/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :as="as" :as-child="asChild" :class="styles({ class: props.class })">
 3 |     <slot>
 4 |       {{ content }}
 5 |     </slot>
 6 |   </Primitive>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { Primitive } from "radix-vue";
11 |   import type { PrimitiveProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(
14 |     defineProps<
15 |       PrimitiveProps & {
16 |         /** Content to display in the card */
17 |         content?: string;
18 |         /** Custom class(es) to add to the element */
19 |         class?: any;
20 |       }
21 |     >(),
22 |     { as: "div" }
23 |   );
24 |   const styles = tv({
25 |     base: "p-6 [&+*]:pt-0",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/components/Ui/Card/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">
 3 |     <slot>
 4 |       {{ description }}
 5 |     </slot>
 6 |   </Primitive>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { Primitive } from "radix-vue";
11 |   import type { PrimitiveProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(
14 |     defineProps<
15 |       PrimitiveProps & {
16 |         /** Description to display in the card */
17 |         description?: string;
18 |         /** Custom class(es) to add to the element */
19 |         class?: any;
20 |       }
21 |     >(),
22 |     {
23 |       as: "div",
24 |     }
25 |   );
26 |   const styles = tv({
27 |     base: "text-sm text-muted-foreground",
28 |   });
29 | </script>
30 | 


--------------------------------------------------------------------------------
/components/Ui/Card/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">
 3 |     <slot> </slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the element */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     { as: "div" }
19 |   );
20 | 
21 |   const styles = tv({
22 |     base: "flex items-center p-6 ",
23 |   });
24 | </script>
25 | 


--------------------------------------------------------------------------------
/components/Ui/Card/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">
 3 |     <slot></slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the element */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     { as: "div" }
19 |   );
20 | 
21 |   const styles = tv({
22 |     base: "flex flex-col space-y-1.5 p-6 [&+*]:pt-0",
23 |   });
24 | </script>
25 | 


--------------------------------------------------------------------------------
/components/Ui/Card/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">
 3 |     <slot>
 4 |       {{ title }}
 5 |     </slot>
 6 |   </Primitive>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { Primitive } from "radix-vue";
11 |   import type { PrimitiveProps } from "radix-vue";
12 | 
13 |   const props = withDefaults(
14 |     defineProps<
15 |       PrimitiveProps & {
16 |         /** Title to display in the card */
17 |         title?: string;
18 |         /** Custom class(es) to add to the element */
19 |         class?: any;
20 |       }
21 |     >(),
22 |     {
23 |       as: "h3",
24 |     }
25 |   );
26 | 
27 |   const styles = tv({
28 |     base: "text-xl font-semibold leading-none tracking-tight",
29 |   });
30 | </script>
31 | 


--------------------------------------------------------------------------------
/components/Ui/Container.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
 3 |     <slot></slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         class?: any;
15 |       }
16 |     >(),
17 |     {
18 |       as: "div",
19 |     }
20 |   );
21 | 
22 |   const styles = tv({
23 |     base: "container mx-auto",
24 |   });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/components/Ui/Dialog/Close.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogClose v-bind="props">
 3 |     <slot> </slot>
 4 |   </DialogClose>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogClose } from "radix-vue";
 9 |   import type { DialogCloseProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogCloseProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/Ui/Dialog/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiDialogPortal :to="to">
 3 |     <UiDialogOverlay />
 4 |     <DialogContent :class="styles({ class: props.class })" v-bind="{ ...forwarded, ...$attrs }">
 5 |       <slot>
 6 |         <slot name="header">
 7 |           <UiDialogHeader>
 8 |             <slot name="title">
 9 |               <UiDialogTitle v-if="title" :title="title" />
10 |             </slot>
11 |             <slot name="description">
12 |               <UiDialogDescription v-if="description" :description="description" />
13 |             </slot>
14 |           </UiDialogHeader>
15 |         </slot>
16 |         <slot name="content"></slot>
17 |         <slot name="footer"></slot>
18 |       </slot>
19 |       <slot name="close">
20 |         <UiDialogClose />
21 |       </slot>
22 |       <UiDialogClose
23 |         v-if="!hideClose"
24 |         class="absolute right-4 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
25 |       >
26 |         <Icon name="lucide:x" class="h-4 w-4" />
27 |         <span class="sr-only">Close</span>
28 |       </UiDialogClose>
29 |     </DialogContent>
30 |   </UiDialogPortal>
31 | </template>
32 | 
33 | <script lang="ts" setup>
34 |   import { DialogContent, useForwardPropsEmits } from "radix-vue";
35 |   import type { DialogContentEmits, DialogContentProps } from "radix-vue";
36 | 
37 |   defineOptions({ inheritAttrs: false });
38 |   const props = defineProps<
39 |     DialogContentProps & {
40 |       /** Icon to display in the close button */
41 |       icon?: string;
42 |       /** Title text */
43 |       title?: string;
44 |       /** Description text */
45 |       description?: string;
46 |       /** Custom class(es) to add to the parent */
47 |       class?: any;
48 |       /** Whether to hide the close button */
49 |       hideClose?: boolean;
50 |       /** Where to render the dialog */
51 |       to?: string | HTMLElement;
52 |     }
53 |   >();
54 |   const emits = defineEmits<DialogContentEmits>();
55 |   const forwarded = useForwardPropsEmits(
56 |     reactiveOmit(props, "icon", "title", "description", "class", "hideClose", "to"),
57 |     emits
58 |   );
59 | 
60 |   const styles = tv({
61 |     base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
62 |   });
63 | </script>
64 | 


--------------------------------------------------------------------------------
/components/Ui/Dialog/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogDescription
 3 |     :class="styles({ class: props.class })"
 4 |     v-bind="reactiveOmit(props, 'class', 'description')"
 5 |   >
 6 |     <slot>{{ description }}</slot>
 7 |   </DialogDescription>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { DialogDescription } from "radix-vue";
12 |   import type { DialogDescriptionProps } from "radix-vue";
13 | 
14 |   const props = defineProps<
15 |     DialogDescriptionProps & {
16 |       /** Custom class(es) to add to the parent */
17 |       class?: any;
18 |       /** The description text */
19 |       description?: string;
20 |     }
21 |   >();
22 | 
23 |   const styles = tv({
24 |     base: "text-sm text-muted-foreground",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/components/Ui/Dialog/Dialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogRoot v-bind="forwarded">
 3 |     <slot></slot>
 4 |   </DialogRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { DialogRootEmits, DialogRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogRootProps>();
12 |   const emit = defineEmits<DialogRootEmits>();
13 |   const forwarded = useForwardPropsEmits(props, emit);
14 | </script>
15 | 


--------------------------------------------------------------------------------
/components/Ui/Dialog/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
 3 |     <slot></slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "div",
20 |     }
21 |   );
22 | 
23 |   const styles = tv({
24 |     base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/components/Ui/Dialog/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
 3 |     <slot></slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "div",
20 |     }
21 |   );
22 | 
23 |   const styles = tv({
24 |     base: "flex flex-col space-y-1.5 text-center sm:text-left",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/components/Ui/Dialog/Overlay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogOverlay :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   import { DialogOverlay } from "radix-vue";
 7 |   import type { DialogOverlayProps } from "radix-vue";
 8 | 
 9 |   const props = defineProps<
10 |     DialogOverlayProps & {
11 |       /** Custom class(es) to add to the parent */
12 |       class?: any;
13 |     }
14 |   >();
15 |   const styles = tv({
16 |     base: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn",
17 |   });
18 | </script>
19 | 


--------------------------------------------------------------------------------
/components/Ui/Dialog/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogPortal v-bind="props">
 3 |     <slot></slot>
 4 |   </DialogPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogPortal, useForwardProps } from "radix-vue";
 9 |   import type { DialogPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/Ui/Dialog/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogTitle
 3 |     :class="styles({ class: props.class })"
 4 |     v-bind="reactiveOmit(props, 'title', 'class')"
 5 |   >
 6 |     <slot>{{ title }}</slot>
 7 |   </DialogTitle>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { DialogTitle } from "radix-vue";
12 |   import type { DialogTitleProps } from "radix-vue";
13 | 
14 |   const props = defineProps<
15 |     DialogTitleProps & {
16 |       /** Custom class(es) to add to the parent */
17 |       class?: any;
18 |       /** The title text */
19 |       title?: string;
20 |     }
21 |   >();
22 | 
23 |   const styles = tv({
24 |     base: "text-lg font-semibold leading-none tracking-tight",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/components/Ui/Dialog/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DialogTrigger v-bind="props">
 3 |     <slot></slot>
 4 |   </DialogTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DialogTrigger, useForwardProps } from "radix-vue";
 9 |   import type { DialogTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DialogTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/Ui/Divider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive as="div" :class="base({ orientation, type, class: props.class })">
 3 |     <Separator :orientation="orientation" :class="border({ orientation, type })" />
 4 |     <template v-if="label || icon || avatar || $slots.default">
 5 |       <div :class="container({ orientation, type })">
 6 |         <slot>
 7 |           <slot name="label">
 8 |             <span v-if="label" :class="labelClass({ orientation, type })">
 9 |               {{ label }}
10 |             </span>
11 |           </slot>
12 |           <slot name="icon">
13 |             <Icon v-if="icon" :name="icon" :class="iconClass({ orientation, type })" />
14 |           </slot>
15 |           <slot name="avatar">
16 |             <UiAvatar v-if="avatar" :src="avatar" />
17 |           </slot>
18 |         </slot>
19 |       </div>
20 |     </template>
21 |     <Separator :orientation="orientation" :class="border({ orientation, type })" />
22 |   </Primitive>
23 | </template>
24 | 
25 | <script lang="ts" setup>
26 |   import { Primitive, Separator } from "radix-vue";
27 | 
28 |   const props = defineProps<{
29 |     class?: any;
30 |     type?: VariantProps<typeof style>["type"];
31 |     orientation?: VariantProps<typeof style>["orientation"];
32 |     icon?: string;
33 |     label?: string;
34 |     avatar?: string;
35 |   }>();
36 | 
37 |   const style = tv({
38 |     slots: {
39 |       base: "flex w-full items-center text-center align-middle",
40 |       container: "flex font-medium",
41 |       border: "flex border-border",
42 |       icon: "h-5 w-5 shrink-0",
43 |       label: "text-sm",
44 |     },
45 |     variants: {
46 |       orientation: {
47 |         horizontal: {
48 |           base: "flex-row",
49 |           container: "mx-3 whitespace-nowrap",
50 |           border: "w-full border-t",
51 |         },
52 |         vertical: {
53 |           base: "h-full flex-col",
54 |           container: "my-3",
55 |           border: "h-full border-s",
56 |         },
57 |       },
58 |       type: {
59 |         solid: {
60 |           border: "border-solid",
61 |         },
62 |         dashed: {
63 |           border: "border-dashed",
64 |         },
65 |         dotted: {
66 |           border: "border-dotted",
67 |         },
68 |       },
69 |     },
70 |     defaultVariants: {
71 |       orientation: "horizontal",
72 |       type: "solid",
73 |     },
74 |   });
75 | 
76 |   const { base, border, container, icon: iconClass, label: labelClass } = style();
77 | </script>
78 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/Arrow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuArrow
 3 |     v-bind="reactiveOmit(props, 'class')"
 4 |     :class="styles({ class: props.class })"
 5 |   />
 6 | </template>
 7 | 
 8 | <script lang="ts" setup>
 9 |   import { DropdownMenuArrow } from "radix-vue";
10 |   import type { DropdownMenuArrowProps } from "radix-vue";
11 | 
12 |   const props = withDefaults(
13 |     defineProps<
14 |       DropdownMenuArrowProps & {
15 |         /** Custom class(es) to add to the parent */
16 |         class?: any;
17 |       }
18 |     >(),
19 |     {
20 |       asChild: false,
21 |       width: 10,
22 |       height: 5,
23 |     }
24 |   );
25 | 
26 |   const styles = tv({
27 |     base: "rotate-45 border bg-muted",
28 |   });
29 | </script>
30 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/CheckboxItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuCheckboxItem v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">
 4 |       <UiDropdownMenuItemIndicator icon="lucide:check" />
 5 |     </span>
 6 |     <slot>
 7 |       <span v-if="title">{{ title }}</span>
 8 |     </slot>
 9 |     <slot name="shortcut">
10 |       <UiDropdownMenuShortcut v-if="shortcut">{{ shortcut }}</UiDropdownMenuShortcut>
11 |     </slot>
12 |   </DropdownMenuCheckboxItem>
13 | </template>
14 | 
15 | <script lang="ts" setup>
16 |   import { DropdownMenuCheckboxItem, useForwardPropsEmits } from "radix-vue";
17 |   import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "radix-vue";
18 | 
19 |   const props = defineProps<
20 |     DropdownMenuCheckboxItemProps & {
21 |       /** Custom class(es) to add to the parent */
22 |       class?: any;
23 |       /** The shorttcut text to display */
24 |       shortcut?: string;
25 |       /** The title text to display */
26 |       title?: string;
27 |     }
28 |   >();
29 |   const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
30 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "title", "shortcut", "class"), emits);
31 | 
32 |   const styles = tv({
33 |     base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
34 |   });
35 | </script>
36 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/Content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiDropdownMenuPortal>
 3 |     <DropdownMenuContent
 4 |       v-bind="{ ...forwarded, ...$attrs }"
 5 |       :class="styles({ class: props.class })"
 6 |     >
 7 |       <slot></slot>
 8 |     </DropdownMenuContent>
 9 |   </UiDropdownMenuPortal>
10 | </template>
11 | 
12 | <script lang="ts" setup>
13 |   import { DropdownMenuContent, useForwardPropsEmits } from "radix-vue";
14 |   import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "radix-vue";
15 | 
16 |   defineOptions({ inheritAttrs: false });
17 | 
18 |   const props = withDefaults(
19 |     defineProps<
20 |       DropdownMenuContentProps & {
21 |         /** Custom class(es) to add to the parent */
22 |         class?: any;
23 |       }
24 |     >(),
25 |     {
26 |       loop: true,
27 |       align: "center",
28 |       sideOffset: 5,
29 |       side: "bottom",
30 |       avoidCollisions: true,
31 |       sticky: "partial",
32 |     }
33 |   );
34 | 
35 |   const emits = defineEmits<DropdownMenuContentEmits>();
36 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
37 | 
38 |   const styles = tv({
39 |     base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
40 |   });
41 | </script>
42 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/DropdownMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuRoot v-bind="forwarded">
 3 |     <slot></slot>
 4 |   </DropdownMenuRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuRootProps>();
12 | 
13 |   const emit = defineEmits<DropdownMenuRootEmits>();
14 |   const forwarded = useForwardPropsEmits(props, emit);
15 | </script>
16 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/Group.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuGroup v-bind="props">
 3 |     <slot></slot>
 4 |   </DropdownMenuGroup>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuGroup } from "radix-vue";
 9 |   import type { DropdownMenuGroupProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuGroupProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuItem v-bind="forwarded" :class="styles({ inset, class: props.class })">
 3 |     <slot>
 4 |       <slot name="icon">
 5 |         <Icon v-if="icon" :name="icon" class="h-4 w-4" />
 6 |       </slot>
 7 |       <slot name="title">
 8 |         <span v-if="title">{{ title }}</span>
 9 |       </slot>
10 |     </slot>
11 |     <slot name="shortcut">
12 |       <UiDropdownMenuShortcut v-if="shortcut">{{ shortcut }}</UiDropdownMenuShortcut>
13 |     </slot>
14 |   </DropdownMenuItem>
15 | </template>
16 | 
17 | <script lang="ts" setup>
18 |   import { DropdownMenuItem, useForwardPropsEmits } from "radix-vue";
19 |   import type { DropdownMenuItemEmits, DropdownMenuItemProps } from "radix-vue";
20 | 
21 |   const props = defineProps<
22 |     DropdownMenuItemProps & {
23 |       /** Custom class(es) to add to the parent */
24 |       class?: any;
25 |       /** Whether to inset the content */
26 |       inset?: boolean;
27 |       /** The shorttcut text to display */
28 |       shortcut?: string;
29 |       /** The title text to display */
30 |       title?: string;
31 |       /** The icon to display */
32 |       icon?: string;
33 |     }
34 |   >();
35 | 
36 |   const emits = defineEmits<DropdownMenuItemEmits>();
37 |   const forwarded = useForwardPropsEmits(
38 |     reactiveOmit(props, "class", "inset", "shortcut", "title", "icon"),
39 |     emits
40 |   );
41 | 
42 |   const styles = tv({
43 |     base: "relative flex cursor-default select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
44 |     variants: {
45 |       inset: {
46 |         true: "pl-8",
47 |       },
48 |     },
49 |   });
50 | </script>
51 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/ItemIndicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuItemIndicator v-bind="reactiveOmit(props, 'icon')">
 3 |     <slot>
 4 |       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
 5 |     </slot>
 6 |   </DropdownMenuItemIndicator>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { DropdownMenuItemIndicator } from "radix-vue";
11 |   import type { DropdownMenuItemIndicatorProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     DropdownMenuItemIndicatorProps & {
15 |       icon?: string;
16 |     }
17 |   >();
18 | </script>
19 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuLabel
 3 |     :class="styles({ inset, class: props.class })"
 4 |     v-bind="reactiveOmit(props, 'class', 'inset', 'label')"
 5 |   >
 6 |     <slot>{{ label }}</slot>
 7 |   </DropdownMenuLabel>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { DropdownMenuLabel } from "radix-vue";
12 |   import type { DropdownMenuLabelProps } from "radix-vue";
13 | 
14 |   const props = defineProps<
15 |     DropdownMenuLabelProps & {
16 |       class?: any;
17 |       inset?: boolean;
18 |       label?: string;
19 |     }
20 |   >();
21 | 
22 |   const styles = tv({
23 |     base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",
24 |     variants: {
25 |       inset: { true: "pl-8" },
26 |     },
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/Portal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuPortal v-bind="props">
 3 |     <slot></slot>
 4 |   </DropdownMenuPortal>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuPortal } from "radix-vue";
 9 |   import type { DropdownMenuPortalProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuPortalProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/RadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuRadioGroup v-bind="forwarded">
 3 |     <slot></slot>
 4 |   </DropdownMenuRadioGroup>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuRadioGroup, useForwardPropsEmits } from "radix-vue";
 9 |   import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuRadioGroupProps>();
12 | 
13 |   const emits = defineEmits<DropdownMenuRadioGroupEmits>();
14 | 
15 |   const forwarded = useForwardPropsEmits(props, emits);
16 | </script>
17 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/RadioItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuRadioItem v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">
 4 |       <UiDropdownMenuItemIndicator>
 5 |         <Icon v-if="icon" :name="icon" class="h-4 w-4" />
 6 |         <Icon v-else name="ph:circle-fill" class="h-2 w-2" />
 7 |       </UiDropdownMenuItemIndicator>
 8 |     </span>
 9 |     <slot>{{ title }}</slot>
10 |   </DropdownMenuRadioItem>
11 | </template>
12 | 
13 | <script lang="ts" setup>
14 |   import { DropdownMenuRadioItem, useForwardPropsEmits } from "radix-vue";
15 |   import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "radix-vue";
16 | 
17 |   const props = defineProps<
18 |     DropdownMenuRadioItemProps & {
19 |       /** Custom class(es) to add to the parent */
20 |       class?: any;
21 |       /** The icon to display */
22 |       icon?: string;
23 |       /** The title text to display */
24 |       title?: string;
25 |     }
26 |   >();
27 | 
28 |   const emits = defineEmits<DropdownMenuRadioItemEmits>();
29 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "icon", "title"), emits);
30 | 
31 |   const styles = tv({
32 |     base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
33 |   });
34 | </script>
35 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/Separator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuSeparator
 3 |     :class="styles({ class: props.class })"
 4 |     v-bind="reactiveOmit(props, 'class')"
 5 |   />
 6 | </template>
 7 | 
 8 | <script lang="ts" setup>
 9 |   import { DropdownMenuSeparator } from "radix-vue";
10 |   import type { DropdownMenuSeparatorProps } from "radix-vue";
11 | 
12 |   const props = defineProps<
13 |     DropdownMenuSeparatorProps & {
14 |       /** Custom class(es) to add to the parent */
15 |       class?: any;
16 |     }
17 |   >();
18 | 
19 |   const styles = tv({
20 |     base: "-mx-1 my-1 h-px bg-border",
21 |   });
22 | </script>
23 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/Shortcut.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
 3 |     <slot />
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       as: "span",
20 |     }
21 |   );
22 | 
23 |   const styles = tv({
24 |     base: "ml-auto text-xs tracking-widest opacity-60",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/Sub.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuSub v-bind="forwarded">
 3 |     <slot></slot>
 4 |   </DropdownMenuSub>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuSub, useForwardPropsEmits } from "radix-vue";
 9 |   import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuSubProps>();
12 |   const emits = defineEmits<DropdownMenuSubEmits>();
13 |   const forwarded = useForwardPropsEmits(props, emits);
14 | </script>
15 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/SubContent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiDropdownMenuPortal :to="to">
 3 |     <DropdownMenuSubContent
 4 |       v-bind="{ ...forwarded, ...$attrs }"
 5 |       :class="styles({ class: props.class })"
 6 |     >
 7 |       <slot></slot>
 8 |     </DropdownMenuSubContent>
 9 |   </UiDropdownMenuPortal>
10 | </template>
11 | 
12 | <script lang="ts" setup>
13 |   import { DropdownMenuSubContent, useForwardPropsEmits } from "radix-vue";
14 |   import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "radix-vue";
15 | 
16 |   defineOptions({ inheritAttrs: false });
17 |   const props = withDefaults(
18 |     defineProps<
19 |       DropdownMenuSubContentProps & {
20 |         /** Custom class(es) to add to the parent */
21 |         class?: any;
22 |         /** The element to render the portal into */
23 |         to?: string | HTMLElement;
24 |       }
25 |     >(),
26 |     {
27 |       loop: true,
28 |       sideOffset: 8,
29 |       avoidCollisions: true,
30 |       collisionPadding: 5,
31 |       sticky: "partial",
32 |     }
33 |   );
34 | 
35 |   const emits = defineEmits<DropdownMenuSubContentEmits>();
36 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);
37 | 
38 |   const styles = tv({
39 |     base: "z-50 min-w-[180px] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
40 |   });
41 | </script>
42 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/SubTrigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuSubTrigger
 3 |     v-bind="reactiveOmit(props, 'class', 'inset', 'icon', 'title', 'trailingIcon')"
 4 |     :class="styles({ inset, class: props.class })"
 5 |   >
 6 |     <slot>
 7 |       <Icon v-if="icon" :name="icon" class="h-4 w-4" />
 8 |       <span v-if="title">{{ title }}</span>
 9 |     </slot>
10 |     <Icon
11 |       class="ml-auto h-4 w-4 text-muted-foreground"
12 |       :name="trailingIcon || 'lucide:chevron-right'"
13 |     />
14 |   </DropdownMenuSubTrigger>
15 | </template>
16 | 
17 | <script lang="ts" setup>
18 |   import { DropdownMenuSubTrigger, useForwardProps } from "radix-vue";
19 |   import type { DropdownMenuSubTriggerProps } from "radix-vue";
20 | 
21 |   const props = defineProps<
22 |     DropdownMenuSubTriggerProps & {
23 |       /**Custom class(es) to add to the element */
24 |       class?: any;
25 |       /** Wether an indentation should be added to the item or not */
26 |       inset?: boolean;
27 |       /** The icon to display */
28 |       icon?: string;
29 |       /** The title for the item */
30 |       title?: string;
31 |       /** The trailing icon to display */
32 |       trailingIcon?: string;
33 |     }
34 |   >();
35 | 
36 |   const styles = tv({
37 |     base: "flex cursor-default select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
38 |     variants: {
39 |       inset: {
40 |         true: "pl-8",
41 |       },
42 |     },
43 |   });
44 | </script>
45 | 


--------------------------------------------------------------------------------
/components/Ui/DropdownMenu/Trigger.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <DropdownMenuTrigger v-bind="props">
 3 |     <slot></slot>
 4 |   </DropdownMenuTrigger>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { DropdownMenuTrigger } from "radix-vue";
 9 |   import type { DropdownMenuTriggerProps } from "radix-vue";
10 | 
11 |   const props = defineProps<DropdownMenuTriggerProps>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/Ui/Form/Control.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Slot
 3 |     :id="formItemId"
 4 |     :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
 5 |     :aria-invalid="!!error"
 6 |   >
 7 |     <slot />
 8 |   </Slot>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { Slot } from "radix-vue";
13 | 
14 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
15 | </script>
16 | 


--------------------------------------------------------------------------------
/components/Ui/Form/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p :id="formDescriptionId" :class="styles({ class: props.class })" v-bind="$attrs">
 3 |     <slot>
 4 |       <ClientOnly>
 5 |         <p v-html="description"></p>
 6 |       </ClientOnly>
 7 |     </slot>
 8 |   </p>
 9 | </template>
10 | <script lang="ts" setup>
11 |   defineOptions({ inheritAttrs: false });
12 | 
13 |   const { formDescriptionId } = useFormField();
14 |   const props = defineProps<{ class?: any; description?: string }>();
15 |   const styles = tv({ base: "text-sm text-muted-foreground" });
16 | </script>
17 | 


--------------------------------------------------------------------------------
/components/Ui/Form/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="styles({ class: props.class })" v-bind="$attrs">
 3 |     <slot name="label">
 4 |       <UiFormLabel v-if="label || hint" :label="label" :hint="hint" />
 5 |     </slot>
 6 |     <UiFormControl>
 7 |       <slot />
 8 |     </UiFormControl>
 9 |     <slot name="description">
10 |       <UiFormDescription v-if="description" :description="description" />
11 |     </slot>
12 |     <slot name="errorMessage">
13 |       <TransitionSlide tag="p">
14 |         <UiFormMessage v-if="!hideMessage" />
15 |       </TransitionSlide>
16 |     </slot>
17 |   </div>
18 | </template>
19 | 
20 | <script lang="ts">
21 |   import { type InjectionKey } from "vue";
22 | 
23 |   export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;
24 | </script>
25 | 
26 | <script lang="ts" setup>
27 |   import { useId } from "radix-vue";
28 | 
29 |   defineOptions({ inheritAttrs: false });
30 | 
31 |   const id = useId();
32 |   provide(FORM_ITEM_INJECTION_KEY, id);
33 | 
34 |   const props = defineProps<{
35 |     class?: any;
36 |     label?: string;
37 |     description?: string;
38 |     hint?: string;
39 |     hideMessage?: boolean;
40 |   }>();
41 | 
42 |   const styles = tv({ base: "space-y-1.5" });
43 | </script>
44 | 


--------------------------------------------------------------------------------
/components/Ui/Form/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Label
 3 |     :class="styles({ error: Boolean(error), class: props.class })"
 4 |     :for="formItemId"
 5 |     v-bind="$attrs"
 6 |   >
 7 |     <slot
 8 |       >{{ label }}
 9 |       <span class="ml-auto font-normal text-muted-foreground/80">{{ hint }}</span></slot
10 |     >
11 |   </Label>
12 | </template>
13 | 
14 | <script lang="ts" setup>
15 |   import { Label } from "radix-vue";
16 |   import type { LabelProps } from "radix-vue";
17 | 
18 |   defineOptions({ inheritAttrs: false });
19 |   const props = defineProps<LabelProps & { class?: any; label?: string; hint?: string }>();
20 | 
21 |   const { error, formItemId } = useFormField();
22 | 
23 |   const styles = tv({
24 |     base: "flex w-full items-center justify-between text-left text-sm font-medium tracking-tight text-foreground hover:cursor-pointer",
25 |     variants: {
26 |       error: {
27 |         true: "text-destructive",
28 |       },
29 |     },
30 |   });
31 | </script>
32 | 


--------------------------------------------------------------------------------
/components/Ui/Form/Message.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ErrorMessage
 3 |     :id="formMessageId"
 4 |     as="p"
 5 |     :name="toValue(name)"
 6 |     class="text-sm font-medium text-destructive"
 7 |   />
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   const { name, formMessageId } = useFormField();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/Ui/Input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input :class="styles({ class: props.class })" v-bind="props" v-model="localModel" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   const props = withDefaults(
 7 |     defineProps<{
 8 |       class?: any;
 9 |       id?: string;
10 |       name?: string;
11 |       placeholder?: string;
12 |       disabled?: boolean;
13 |       required?: boolean;
14 |       type?: string;
15 |       modelValue?: any;
16 |     }>(),
17 |     { type: "text" }
18 |   );
19 |   const emits = defineEmits<{
20 |     "update:modelValue": [value: any];
21 |   }>();
22 |   const localModel = useVModel(props, "modelValue", emits);
23 | 
24 |   const styles = tv({
25 |     base: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
26 |   });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/components/Ui/Label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Label :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
 3 |     <slot />
 4 |   </Label>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Label } from "radix-vue";
 9 |   import type { LabelProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     LabelProps & {
13 |       /** Custom class(es) to add to the label */
14 |       class?: any;
15 |     }
16 |   >();
17 | 
18 |   const styles = tv({
19 |     base: "inline-block text-base font-medium leading-none hover:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm",
20 |   });
21 | </script>
22 | 


--------------------------------------------------------------------------------
/components/Ui/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, 'class')">
 3 |     <slot> </slot>
 4 |   </Primitive>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { Primitive } from "radix-vue";
 9 |   import type { PrimitiveProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       PrimitiveProps & {
14 |         class?: any;
15 |         sticky?: boolean;
16 |       }
17 |     >(),
18 |     {
19 |       as: "header",
20 |     }
21 |   );
22 | 
23 |   const styles = tv({
24 |     base: "z-20 border-b bg-background/90 backdrop-blur",
25 |     variants: {
26 |       sticky: {
27 |         true: "sticky top-0",
28 |       },
29 |     },
30 |   });
31 | </script>
32 | 


--------------------------------------------------------------------------------
/components/Ui/RadioGroup/Indicator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <RadioGroupIndicator
 3 |     v-bind="reactiveOmit(props, 'class', 'icon')"
 4 |     :class="styles({ class: props.class })"
 5 |   >
 6 |     <slot>
 7 |       <Icon :name="icon || 'ph:circle-fill'" class="h-2.5 w-2.5 fill-current text-current" />
 8 |     </slot>
 9 |   </RadioGroupIndicator>
10 | </template>
11 | 
12 | <script lang="ts" setup>
13 |   import { RadioGroupIndicator } from "radix-vue";
14 |   import type { RadioGroupIndicatorProps } from "radix-vue";
15 | 
16 |   const props = defineProps<
17 |     RadioGroupIndicatorProps & {
18 |       /** Custom class(es) to add to the parent */
19 |       class?: any;
20 |       /** Icon to show */
21 |       icon?: string;
22 |     }
23 |   >();
24 | 
25 |   const styles = tv({
26 |     base: "flex items-center justify-center",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/components/Ui/RadioGroup/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <RadioGroupItem
 3 |     v-bind="reactiveOmit(props, 'class', 'icon')"
 4 |     :class="styles({ class: props.class })"
 5 |   >
 6 |     <slot>
 7 |       <UiRadioGroupIndicator :icon="props.icon" />
 8 |     </slot>
 9 |   </RadioGroupItem>
10 | </template>
11 | 
12 | <script lang="ts" setup>
13 |   import { RadioGroupItem } from "radix-vue";
14 |   import type { RadioGroupItemProps } from "radix-vue";
15 | 
16 |   const props = defineProps<
17 |     RadioGroupItemProps & {
18 |       /** Class to apply to the item */
19 |       class?: any;
20 |       /** Icon to show */
21 |       icon?: string;
22 |     }
23 |   >();
24 | 
25 |   const styles = tv({
26 |     base: "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/components/Ui/RadioGroup/RadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <RadioGroupRoot v-bind="forwarded" :class="styles({ class: props.class })">
 3 |     <slot></slot>
 4 |   </RadioGroupRoot>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { RadioGroupRoot, useForwardPropsEmits } from "radix-vue";
 9 |   import type { RadioGroupRootEmits, RadioGroupRootProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       RadioGroupRootProps & {
14 |         /** Custom class(es) to add to the parent */
15 |         class?: any;
16 |       }
17 |     >(),
18 |     {
19 |       orientation: "vertical",
20 |       loop: true,
21 |     }
22 |   );
23 | 
24 |   const emits = defineEmits<RadioGroupRootEmits>();
25 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
26 | 
27 |   const styles = tv({ base: "grid gap-3" });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/components/Ui/Skeleton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Primitive
 3 |     :class="styles({ loading, class: props.class })"
 4 |     v-bind="reactiveOmit(props, 'class', 'loading')"
 5 |   >
 6 |     <slot></slot>
 7 |   </Primitive>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { Primitive } from "radix-vue";
12 |   import type { PrimitiveProps } from "radix-vue";
13 | 
14 |   const styles = tv({
15 |     base: "animate-pulse rounded-md bg-muted",
16 |     variants: {
17 |       loading: { true: "cursor-wait", false: "cursor-default" },
18 |     },
19 |   });
20 | 
21 |   const props = withDefaults(
22 |     defineProps<
23 |       PrimitiveProps & {
24 |         /** Custom class(es) to add to parent element */
25 |         class?: any;
26 |         /** Whether the skeleton is loading */
27 |         loading?: boolean;
28 |       }
29 |     >(),
30 |     {
31 |       as: "div",
32 |     }
33 |   );
34 | </script>
35 | 


--------------------------------------------------------------------------------
/components/Ui/Textarea.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <textarea :class="styles({ class: props.class })" v-bind="props" v-model="localModel" />
 3 | </template>
 4 | 
 5 | <script lang="ts" setup>
 6 |   const props = defineProps<{
 7 |     class?: any;
 8 |     name?: string;
 9 |     id?: string;
10 |     placeholder?: string;
11 |     required?: boolean;
12 |     disabled?: boolean;
13 |     rows?: number;
14 |     modelValue?: string;
15 |   }>();
16 | 
17 |   const emits = defineEmits<{
18 |     "update:modelValue": [value: any];
19 |   }>();
20 | 
21 |   const localModel = useVModel(props, "modelValue", emits);
22 | 
23 |   const styles = tv({
24 |     base: "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/components/Ui/Toast/Action.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastAction :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
 3 |     <slot></slot>
 4 |   </ToastAction>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ToastAction } from "radix-vue";
 9 |   import type { ToastActionProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(
12 |     defineProps<
13 |       ToastActionProps & {
14 |         /**
15 |          * Custom class names to add to the button.
16 |          */
17 |         class?: any;
18 |       }
19 |     >(),
20 |     {
21 |       altText: "Action button",
22 |     }
23 |   );
24 | 
25 |   const styles = tv({
26 |     base: "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3  text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
27 |   });
28 | </script>
29 | 


--------------------------------------------------------------------------------
/components/Ui/Toast/Close.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastClose :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class', 'icon')">
 3 |     <slot>
 4 |       <Icon :name="icon || 'lucide:x'" class="h-4 w-4" />
 5 |     </slot>
 6 |   </ToastClose>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 |   import { ToastClose } from "radix-vue";
11 |   import type { ToastCloseProps } from "radix-vue";
12 | 
13 |   const props = defineProps<
14 |     ToastCloseProps & {
15 |       /**
16 |        * Custom class names to add to the button.
17 |        */
18 |       class?: any;
19 |       /**
20 |        * The icon to render.
21 |        */
22 |       icon?: string;
23 |     }
24 |   >();
25 | 
26 |   const styles = tv({
27 |     base: "absolute right-2 top-2 inline-flex items-center justify-center rounded-md p-1 text-foreground/50 opacity-50 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 focus-visible:ring-ring  group-hover:opacity-100",
28 |   });
29 | </script>
30 | 


--------------------------------------------------------------------------------
/components/Ui/Toast/Description.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastDescription
 3 |     :class="styles({ class: props.class })"
 4 |     v-bind="reactiveOmit(props, 'class', 'description')"
 5 |   >
 6 |     <slot>{{ description }}</slot>
 7 |   </ToastDescription>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { ToastDescription } from "radix-vue";
12 |   import type { ToastDescriptionProps } from "radix-vue";
13 | 
14 |   const props = defineProps<
15 |     ToastDescriptionProps & {
16 |       /** The description text to render */
17 |       description?: string;
18 |       /** Custom class(es) to add to the parent */
19 |       class?: any;
20 |     }
21 |   >();
22 | 
23 |   const styles = tv({
24 |     base: "text-sm opacity-90",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/components/Ui/Toast/Provider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastProvider v-bind="props">
 3 |     <slot></slot>
 4 |   </ToastProvider>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ToastProvider } from "radix-vue";
 9 |   import type { ToastProviderProps } from "radix-vue";
10 | 
11 |   const props = withDefaults(defineProps<ToastProviderProps>(), {
12 |     label: "Notification",
13 |     swipeDirection: "right",
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/components/Ui/Toast/Title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastTitle
 3 |     :class="styles({ class: props.class })"
 4 |     v-bind="reactiveOmit(props, 'class', 'title')"
 5 |   >
 6 |     <slot>{{ title }}</slot>
 7 |   </ToastTitle>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 |   import { ToastTitle } from "radix-vue";
12 |   import type { ToastTitleProps } from "radix-vue";
13 | 
14 |   const props = defineProps<
15 |     ToastTitleProps & {
16 |       /** The title text to render */
17 |       title?: string;
18 |       /** Custom class(es) to add to the parent */
19 |       class?: any;
20 |     }
21 |   >();
22 | 
23 |   const styles = tv({
24 |     base: "text-sm font-semibold",
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/components/Ui/Toast/Toast.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastRoot
 3 |     v-bind="forwarded"
 4 |     :class="styles({ variant, class: props.class })"
 5 |     @update:open="onOpenChange"
 6 |   >
 7 |     <slot></slot>
 8 |   </ToastRoot>
 9 | </template>
10 | 
11 | <script lang="ts" setup>
12 |   import { ToastRoot, useForwardPropsEmits } from "radix-vue";
13 |   import type { ToastRootEmits, ToastRootProps } from "radix-vue";
14 | 
15 |   export interface ToastProps extends ToastRootProps {
16 |     /**
17 |      * Custom class names to add to the toast.
18 |      */
19 |     class?: any;
20 |     /**
21 |      * The variant of the toast.
22 |      */
23 |     variant?: VariantProps<typeof styles>["variant"];
24 |     /**
25 |      * Callback that fires when the toast is closed.
26 |      */
27 |     onOpenChange?: ((value: boolean) => void) | undefined;
28 |   }
29 | 
30 |   const props = withDefaults(defineProps<ToastProps>(), {});
31 | 
32 |   const emits = defineEmits<ToastRootEmits>();
33 |   const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
34 | 
35 |   const styles = tv({
36 |     base: "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-4 pr-9 shadow-sm transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
37 |     variants: {
38 |       variant: {
39 |         default: "border bg-background text-foreground",
40 |         success:
41 |           "success group border-[var(--success-border)] bg-[--success-bg] text-[--success-text]",
42 |         info: "info group border-[var(--info-border)] bg-[--info-bg] text-[--info-text]",
43 |         warning:
44 |           "warning group border-[var(--warning-border)] bg-[--warning-bg] text-[--warning-text]",
45 |         destructive:
46 |           "destructive group border-[var(--error-border)] bg-[--error-bg] text-[--error-text]",
47 |       },
48 |     },
49 |     defaultVariants: {
50 |       variant: "default",
51 |     },
52 |   });
53 | </script>
54 | 


--------------------------------------------------------------------------------
/components/Ui/Toast/Toaster.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <UiToastProvider>
 3 |     <template v-for="toast in toasts" :key="toast.id">
 4 |       <UiToast v-bind="toast">
 5 |         <div class="flex gap-3">
 6 |           <Icon
 7 |             v-if="toast.icon"
 8 |             :name="toast.icon"
 9 |             class="h-5 w-5 shrink-0"
10 |             :class="[!!toast.title && !!toast.description && 'mt-0.5']"
11 |           />
12 |           <div class="flex flex-col gap-1">
13 |             <UiToastTitle v-if="toast.title" :title="toast.title" />
14 |             <template v-if="toast.description">
15 |               <UiToastDescription v-if="isVNode(toast.description)">
16 |                 <component :is="toast.description" />
17 |               </UiToastDescription>
18 |               <UiToastDescription v-else>
19 |                 {{ toast.description }}
20 |               </UiToastDescription>
21 |             </template>
22 |             <UiToastClose />
23 |           </div>
24 |         </div>
25 |         <component :is="toast.action" />
26 |       </UiToast>
27 |     </template>
28 |     <UiToastViewport />
29 |   </UiToastProvider>
30 | </template>
31 | 
32 | <script lang="ts" setup>
33 |   import { isVNode } from "vue";
34 | 
35 |   const { toasts } = useToast();
36 | </script>
37 | 
38 | <style>
39 |   :root {
40 |     --success-bg: hsl(143, 85%, 96%);
41 |     --success-border: hsl(145, 92%, 91%);
42 |     --success-text: hsl(140, 100%, 27%);
43 | 
44 |     --info-bg: hsl(208, 100%, 97%);
45 |     --info-border: hsl(221, 91%, 91%);
46 |     --info-text: hsl(210, 92%, 45%);
47 | 
48 |     --warning-bg: hsl(49, 100%, 97%);
49 |     --warning-border: hsl(49, 91%, 91%);
50 |     --warning-text: hsl(31, 92%, 45%);
51 | 
52 |     --error-bg: hsl(359, 100%, 97%);
53 |     --error-border: hsl(359, 100%, 94%);
54 |     --error-text: hsl(360, 100%, 45%);
55 |   }
56 |   .dark {
57 |     --success-bg: hsl(150, 100%, 6%);
58 |     --success-border: hsl(147, 100%, 12%);
59 |     --success-text: hsl(150, 86%, 65%);
60 | 
61 |     --info-bg: hsl(215, 100%, 6%);
62 |     --info-border: hsl(223, 100%, 12%);
63 |     --info-text: hsl(216, 87%, 65%);
64 | 
65 |     --warning-bg: hsl(64, 100%, 6%);
66 |     --warning-border: hsl(60, 100%, 12%);
67 |     --warning-text: hsl(46, 87%, 65%);
68 | 
69 |     --error-bg: hsl(358, 76%, 10%);
70 |     --error-border: hsl(357, 89%, 16%);
71 |     --error-text: hsl(358, 100%, 81%);
72 |   }
73 | </style>
74 | 


--------------------------------------------------------------------------------
/components/Ui/Toast/Viewport.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ToastViewport :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">
 3 |     <slot></slot>
 4 |   </ToastViewport>
 5 | </template>
 6 | 
 7 | <script lang="ts" setup>
 8 |   import { ToastViewport } from "radix-vue";
 9 |   import type { ToastViewportProps } from "radix-vue";
10 | 
11 |   const props = defineProps<
12 |     ToastViewportProps & {
13 |       /**
14 |        * Custom class names to add to the button.
15 |        */
16 |       class?: any;
17 |     }
18 |   >();
19 | 
20 |   const styles = tv({
21 |     base: "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring  sm:bottom-auto sm:right-0 sm:flex-col md:max-w-[420px]",
22 |   });
23 | </script>
24 | 
25 | <style>
26 |   [aria-label~="Notifications"] {
27 |     display: grid;
28 |   }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/composables/defineShortcuts.ts:
--------------------------------------------------------------------------------
  1 | import { logicAnd, logicNot } from "@vueuse/math";
  2 | import { computed, ref } from "vue";
  3 | import type { ComputedRef, WatchSource } from "vue";
  4 | 
  5 | export interface ShortcutConfig {
  6 |   handler: Function;
  7 |   usingInput?: string | boolean;
  8 |   whenever?: WatchSource<Boolean>[];
  9 | }
 10 | 
 11 | export interface ShortcutsConfig {
 12 |   [key: string]: ShortcutConfig | Function;
 13 | }
 14 | 
 15 | export interface ShortcutsOptions {
 16 |   chainDelay?: number;
 17 | }
 18 | 
 19 | interface Shortcut {
 20 |   handler: Function;
 21 |   condition: ComputedRef<Boolean>;
 22 |   chained: boolean;
 23 |   // KeyboardEvent attributes
 24 |   key: string;
 25 |   ctrlKey: boolean;
 26 |   metaKey: boolean;
 27 |   shiftKey: boolean;
 28 |   altKey: boolean;
 29 |   // code?: string
 30 |   // keyCode?: number
 31 | }
 32 | 
 33 | export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptions = {}) => {
 34 |   const { macOS, usingInput } = useShortcuts();
 35 | 
 36 |   let shortcuts: Shortcut[] = [];
 37 | 
 38 |   const chainedInputs = ref<any[]>([]);
 39 |   const clearChainedInput = () => {
 40 |     chainedInputs.value.splice(0, chainedInputs.value.length);
 41 |   };
 42 |   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
 43 | 
 44 |   const onKeyDown = (e: KeyboardEvent) => {
 45 |     // Input autocomplete triggers a keydown event
 46 |     if (!e.key) {
 47 |       return;
 48 |     }
 49 | 
 50 |     const alphabeticalKey = /^[a-z]{1}$/i.test(e.key);
 51 | 
 52 |     let chainedKey;
 53 |     chainedInputs.value.push(e.key);
 54 |     // try matching a chained shortcut
 55 |     if (chainedInputs.value.length >= 2) {
 56 |       chainedKey = chainedInputs.value.slice(-2).join("-");
 57 | 
 58 |       for (const shortcut of shortcuts.filter((s) => s.chained)) {
 59 |         if (shortcut.key !== chainedKey) {
 60 |           continue;
 61 |         }
 62 | 
 63 |         if (shortcut.condition.value) {
 64 |           e.preventDefault();
 65 |           shortcut.handler();
 66 |         }
 67 |         clearChainedInput();
 68 |         return;
 69 |       }
 70 |     }
 71 | 
 72 |     // try matching a standard shortcut
 73 |     for (const shortcut of shortcuts.filter((s) => !s.chained)) {
 74 |       if (e.key.toLowerCase() !== shortcut.key) {
 75 |         continue;
 76 |       }
 77 |       if (e.metaKey !== shortcut.metaKey) {
 78 |         continue;
 79 |       }
 80 |       if (e.ctrlKey !== shortcut.ctrlKey) {
 81 |         continue;
 82 |       }
 83 |       // shift modifier is only checked in combination with alphabetical keys
 84 |       // (shift with non-alphabetical keys would change the key)
 85 |       if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) {
 86 |         continue;
 87 |       }
 88 |       // alt modifier changes the combined key anyways
 89 |       // if (e.altKey !== shortcut.altKey) { continue }
 90 | 
 91 |       if (shortcut.condition.value) {
 92 |         e.preventDefault();
 93 |         shortcut.handler();
 94 |       }
 95 |       clearChainedInput();
 96 |       return;
 97 |     }
 98 | 
 99 |     debouncedClearChainedInput();
100 |   };
101 | 
102 |   // Map config to full detailled shortcuts
103 |   shortcuts = Object.entries(config)
104 |     .map(([key, shortcutConfig]) => {
105 |       if (!shortcutConfig) {
106 |         return null;
107 |       }
108 | 
109 |       // Parse key and modifiers
110 |       let shortcut: Partial<Shortcut>;
111 | 
112 |       if (key.includes("-") && key.includes("_")) {
113 |         console.trace("[Shortcut] Invalid key");
114 |         return null;
115 |       }
116 | 
117 |       const chained = key.includes("-");
118 |       if (chained) {
119 |         shortcut = {
120 |           key: key.toLowerCase(),
121 |           metaKey: false,
122 |           ctrlKey: false,
123 |           shiftKey: false,
124 |           altKey: false,
125 |         };
126 |       } else {
127 |         const keySplit = key
128 |           .toLowerCase()
129 |           .split("_")
130 |           .map((k) => k);
131 |         shortcut = {
132 |           key: keySplit.filter((k) => !["meta", "ctrl", "shift", "alt"].includes(k)).join("_"),
133 |           metaKey: keySplit.includes("meta"),
134 |           ctrlKey: keySplit.includes("ctrl"),
135 |           shiftKey: keySplit.includes("shift"),
136 |           altKey: keySplit.includes("alt"),
137 |         };
138 |       }
139 |       shortcut.chained = chained;
140 | 
141 |       // Convert Meta to Ctrl for non-MacOS
142 |       if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
143 |         shortcut.metaKey = false;
144 |         shortcut.ctrlKey = true;
145 |       }
146 | 
147 |       // Retrieve handler function
148 |       if (typeof shortcutConfig === "function") {
149 |         shortcut.handler = shortcutConfig;
150 |       } else if (typeof shortcutConfig === "object") {
151 |         shortcut = { ...shortcut, handler: shortcutConfig.handler };
152 |       }
153 | 
154 |       if (!shortcut.handler) {
155 |         console.trace("[Shortcut] Invalid value");
156 |         return null;
157 |       }
158 | 
159 |       // Create shortcut computed
160 |       const conditions: ComputedRef<Boolean>[] = [];
161 |       if (!(shortcutConfig as ShortcutConfig).usingInput) {
162 |         conditions.push(logicNot(usingInput));
163 |       } else if (typeof (shortcutConfig as ShortcutConfig).usingInput === "string") {
164 |         conditions.push(
165 |           computed(() => usingInput.value === (shortcutConfig as ShortcutConfig).usingInput)
166 |         );
167 |       }
168 |       shortcut.condition = logicAnd(
169 |         ...conditions,
170 |         ...((shortcutConfig as ShortcutConfig).whenever || [])
171 |       );
172 | 
173 |       return shortcut as Shortcut;
174 |     })
175 |     .filter(Boolean) as Shortcut[];
176 | 
177 |   useEventListener("keydown", onKeyDown);
178 | };
179 | 


--------------------------------------------------------------------------------
/composables/useCommentService.ts:
--------------------------------------------------------------------------------
 1 | import type { CommentsData } from "~/types/Comment";
 2 | import type { User } from "~/types/User";
 3 | 
 4 | export default () => {
 5 |     const config_public = useRuntimeConfig().public
 6 |     const base_url = config_public.base_api_url + config_public.api_version
 7 | 
 8 |     const getCommentByTimelineId = async (timeline_id: number, page: number, itemPerPage: number) => {
 9 |         return new Promise(async (resolve, reject) => {
10 |             try {
11 |                 const response = await useFetchApi(
12 |                     `${base_url}/comment/${timeline_id}/${page}/${itemPerPage}`,
13 |                     { method: 'GET' }
14 |                 );
15 |                 if (response.success) {
16 |                     const data = response.data as CommentsData
17 |                     resolve(data)
18 |                 } else {
19 |                     reject(response.message)
20 |                 }
21 |             } catch (error) {
22 |                 reject(error)
23 |             }
24 |         })
25 |     }
26 | 
27 |     const addNewReply = async (user: User, timeline_id: number, text_content: string) => {
28 |         return new Promise(async (resolve, reject) => {
29 |             const params_body = {
30 |                 'user_id': user.user_id,
31 |                 'timeline_id': timeline_id,
32 |                 'name': user.name,
33 |                 'text_content': text_content,
34 |                 'avatar': user.avatar,
35 |                 'comment_id': 0,
36 |                 'timed': useNow().value.toString()
37 |             }
38 | 
39 |             try {
40 |                 const response = await useFetchApi(
41 |                     `${base_url}/comment/new/`,
42 |                     {
43 |                         method: 'POST',
44 |                         body: params_body
45 |                     }
46 |                 );
47 |                 if (response.success) {
48 |                     resolve(params_body)
49 |                 } else {
50 |                     reject(response.message)
51 |                 }
52 |             } catch (error) {
53 |                 reject(error)
54 |             }
55 |         })
56 |     }
57 | 
58 |     return {
59 |         getCommentByTimelineId,
60 |         addNewReply
61 |     }
62 | }


--------------------------------------------------------------------------------
/composables/useDevice.ts:
--------------------------------------------------------------------------------
 1 | export default () => {
 2 |     const keyDeviceId = 'device_id'
 3 | 
 4 |     function getDeviceId(): string {
 5 |         //check device id on local storage
 6 |         const getDeviceIdFromLocalStorage = localStorage.getItem(keyDeviceId)
 7 |         if (getDeviceIdFromLocalStorage != null) {
 8 |             return getDeviceIdFromLocalStorage
 9 |         }
10 | 
11 |         //generate new device id
12 |         const generateNewDeviceId = generateDeviceId()
13 |         localStorage.setItem(keyDeviceId, generateNewDeviceId)
14 |         console.log(generateDeviceId)
15 | 
16 |         return generateNewDeviceId
17 |     }
18 | 
19 |     function generateDeviceId(): string {
20 |         // Generate a random 32-character hexadecimal string
21 |         const randomBytes = crypto.getRandomValues(new Uint8Array(16));
22 |         const randomToken = Array.from(randomBytes)
23 |             .map((byte) => byte.toString(16).padStart(2, '0'))
24 |             .join('');
25 | 
26 |         return randomToken;
27 |     }
28 | 
29 |     return {
30 |         getDeviceId
31 |     }
32 | }


--------------------------------------------------------------------------------
/composables/useFetchApi.ts:
--------------------------------------------------------------------------------
 1 | import type { BaseResponse } from "~/types";
 2 | 
 3 | export default (url: string, options?: object, headers?: object) => {
 4 |     const { useAuthToken, refreshToken } = useAuth()
 5 | 
 6 |     return $fetch<BaseResponse>(url, {
 7 |         ...options,
 8 |         headers: {
 9 |             ...headers,
10 |             Authorization: `Bearer ${useAuthToken().value}`
11 |         },
12 |         retry: 1,
13 |         retryStatusCodes: [401],
14 |         retryDelay: 500,
15 |         async onResponseError(context) {
16 |             if (context.response.status === 401) {
17 |                 await refreshToken()
18 |             }
19 |         },
20 |     });
21 | }


--------------------------------------------------------------------------------
/composables/useFormField.ts:
--------------------------------------------------------------------------------
 1 | // import { FORM_ITEM_INJECTION_KEY } from "@/components/UI/Form/Item.vue";
 2 | import { FORM_ITEM_INJECTION_KEY } from "@/components/Ui/Form/Item.vue";
 3 | 
 4 | import {
 5 |   FieldContextKey,
 6 |   useFieldError,
 7 |   useIsFieldDirty,
 8 |   useIsFieldTouched,
 9 |   useIsFieldValid,
10 | } from "vee-validate";
11 | import { inject } from "vue";
12 | 
13 | export function useFormField() {
14 |   const fieldContext = inject(FieldContextKey);
15 |   const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
16 | 
17 |   const fieldState = {
18 |     valid: useIsFieldValid(),
19 |     isDirty: useIsFieldDirty(),
20 |     isTouched: useIsFieldTouched(),
21 |     error: useFieldError(),
22 |   };
23 | 
24 |   if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
25 | 
26 |   const { name } = fieldContext;
27 |   const id = fieldItemContext;
28 | 
29 |   return {
30 |     id,
31 |     name,
32 |     formItemId: `${id}-form-item`,
33 |     formDescriptionId: `${id}-form-item-description`,
34 |     formMessageId: `${id}-form-item-message`,
35 |     ...fieldState,
36 |   };
37 | }
38 | 


--------------------------------------------------------------------------------
/composables/useMessage.ts:
--------------------------------------------------------------------------------
 1 | import { TypeMessage } from "~/types";
 2 | 
 3 | export default () => {
 4 |     const showMessage = (message: string, type: TypeMessage = TypeMessage.info) => {
 5 |         if (!type) {
 6 |             return useToast().toast({
 7 |                 description: message,
 8 |             });
 9 |         }
10 |         if (type === "action") {
11 |             return useToast().toast({
12 |                 title: getToastTitle(type),
13 |                 icon: getToasticon(type),
14 |                 description: message,
15 |                 action: h(
16 |                     resolveComponent("UiToastAction"),
17 |                     {
18 |                         altText: "Undo",
19 |                     },
20 |                     {
21 |                         default: () => "Undo",
22 |                     }
23 |                 ),
24 |             });
25 |         }
26 |         return useToast().toast({
27 |             title: getToastTitle(type),
28 |             description: message,
29 |             variant: type,
30 |             icon: getToasticon(type),
31 |         });
32 |     };
33 | 
34 |     const getToasticon = (type: TypeMessage) => {
35 |         switch (type) {
36 |             case TypeMessage.action:
37 |                 return "lucide:mail"
38 |             case TypeMessage.info:
39 |                 return "lucide:badge-info";
40 |             case TypeMessage.success:
41 |                 return "lucide:badge-check";
42 |             case TypeMessage.warning:
43 |                 return "lucide:badge-alert";
44 |             case TypeMessage.destructive:
45 |                 return "lucide:badge-x";
46 |         }
47 |     };
48 | 
49 |     const getToastTitle = (type: TypeMessage) => {
50 |         switch (type) {
51 |             case TypeMessage.action:
52 |                 return TypeMessage.action.toUpperCase()
53 |             case TypeMessage.info:
54 |                 return TypeMessage.info.toUpperCase()
55 |             case TypeMessage.success:
56 |                 return TypeMessage.success.toUpperCase()
57 |             case TypeMessage.warning:
58 |                 return TypeMessage.warning.toUpperCase()
59 |             case TypeMessage.destructive:
60 |                 return "ERROR"
61 |         }
62 |     }
63 | 
64 |     return {
65 |         showMessage
66 |     }
67 | }


--------------------------------------------------------------------------------
/composables/useNavRoute.ts:
--------------------------------------------------------------------------------
 1 | export default () => {
 2 |     const router = useRouter()
 3 |     const navRoutes = () => useState('nav_routes')
 4 | 
 5 |     const register = (newRoutes: NavRoute[]) => {
 6 |         const navs = navRoutes()
 7 |         navs.value = newRoutes
 8 |     }
 9 | 
10 |     function initRoute() {
11 |         const routes: NavRoute[] = [
12 |             {
13 |                 href: '/',
14 |                 icon: 'bi:house-door',
15 |                 active: false
16 |             },
17 |             {
18 |                 href: '/chats',
19 |                 icon: 'bi:chat-dots',
20 |                 active: false
21 |             }
22 |         ]
23 | 
24 |         //validate
25 |         const routers = router.getRoutes()
26 |         const routesValidated: NavRoute[] = []
27 |         routes.forEach(route => {
28 |             const foundR = routers.find(r => r.path === route.href)
29 |             if(foundR) {
30 |                 routesValidated.push(route)
31 |             }
32 |         });
33 | 
34 |         //register route
35 |         register(routesValidated)
36 |     }
37 | 
38 |     function navBack() {
39 |         router.back()
40 |     }
41 | 
42 |     return {
43 |         initRoute,
44 |         navRoutes,
45 |         navBack
46 |     }
47 | }
48 | 
49 | export interface NavRoute {
50 |     label?: string;
51 |     href: string;
52 |     icon?: string;
53 |     active: boolean;
54 | }


--------------------------------------------------------------------------------
/composables/usePreferencesService.ts:
--------------------------------------------------------------------------------
 1 | import type { BaseResponse } from "~/types";
 2 | import type { ContactPreferences, ImagePreferences, Preferences, UrlPreferences } from "~/types/Preferences";
 3 | 
 4 | export default () => {
 5 |     const config_public = useRuntimeConfig().public
 6 |     const base_url = config_public.base_api_url + config_public.api_version
 7 | 
 8 |     const useAppPreferences = () => useState('app_preferences')
 9 | 
10 |     const setPreferences = (value: Preferences) => {
11 |         const preferences = useAppPreferences()
12 |         preferences.value = value
13 |     }
14 | 
15 |     const getPreferences = async () => {
16 |         return new Promise(async(resolve, reject) => {
17 |             try {
18 |                 const response = await $fetch<BaseResponse>(
19 |                     `${base_url}/preferences/`,
20 |                     { method: 'GET' }
21 |                 );
22 |                 if(response.success) {
23 |                     const data = response.data as Preferences
24 |                     setPreferences(data)
25 |                     resolve(data)
26 |                 } else {
27 |                     reject(response.message)
28 |                 }
29 |             } catch (error) {
30 |                 reject(error)
31 |             }
32 |         })
33 |     };
34 | 
35 |     function getAppName(): string {
36 |         const preferences = useAppPreferences().value as Preferences
37 |         return preferences.app_name ?? ""
38 |     }
39 | 
40 |     function getReplyEmojis(): string[] {
41 |         const preferences = useAppPreferences().value as Preferences
42 |         return preferences.reply_emojis ?? []
43 |     }
44 | 
45 |     function getReportReasons(): [string] {
46 |         const preferences = useAppPreferences().value as Preferences
47 |         return preferences.report_reasons ?? [""]
48 |     }
49 | 
50 |     function getImages(): ImagePreferences | undefined {
51 |         const preferences = useAppPreferences().value as Preferences
52 |         return preferences.images
53 |     }
54 | 
55 |     function getContacts(): ContactPreferences | undefined {
56 |         const preferences = useAppPreferences().value as Preferences
57 |         return preferences.contacts
58 |     }
59 | 
60 |     function getUrls(): UrlPreferences | undefined {
61 |         const preferences = useAppPreferences().value as Preferences
62 |         return preferences.urls
63 |     } 
64 | 
65 |     return {
66 |         getPreferences,
67 |         getAppName,
68 |         getReplyEmojis,
69 |         getReportReasons,
70 |         getImages,
71 |         getContacts,
72 |         getUrls
73 |     }
74 | }


--------------------------------------------------------------------------------
/composables/useReport.ts:
--------------------------------------------------------------------------------
 1 | export default () => {
 2 |     const config_public = useRuntimeConfig().public
 3 |     const base_url = config_public.base_api_url + config_public.api_version
 4 | 
 5 |     const report = async (
 6 |         report_by: string,
 7 |         user_id: string,
 8 |         reason: string,
 9 |         proof_id: string,
10 |         proof: string
11 |     ) => {
12 |         return new Promise(async(resolve, reject) => {
13 |             try {
14 |                 const response = await useFetchApi(
15 |                     `${base_url}/timeline/report/`,
16 |                     {
17 |                         method: 'POST',
18 |                         body: {
19 |                             'report_by': report_by,
20 |                             'user_id': user_id,
21 |                             'reason': reason,
22 |                             'proof_id': proof_id,
23 |                             'proof': proof
24 |                         }
25 |                     }
26 |                 );
27 |                 if(response.success) {
28 |                     resolve(true)
29 |                 } else {
30 |                     reject(response.message)
31 |                 }
32 |             } catch (error) {
33 |                 reject(error)
34 |             }
35 |         })
36 |     }
37 | 
38 |     return {
39 |         report
40 |     }
41 | 
42 | }


--------------------------------------------------------------------------------
/composables/useShortcuts.ts:
--------------------------------------------------------------------------------
 1 | export const _useShortcuts = () => {
 2 |   const macOS = computed(
 3 |     () =>
 4 |       process.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/)
 5 |   );
 6 | 
 7 |   const metaSymbol = ref(" ");
 8 | 
 9 |   const activeElement = useActiveElement();
10 |   const usingInput = computed(() => {
11 |     const usingInput = !!(
12 |       activeElement.value?.tagName === "INPUT" ||
13 |       activeElement.value?.tagName === "TEXTAREA" ||
14 |       activeElement.value?.contentEditable === "true"
15 |     );
16 | 
17 |     if (usingInput) {
18 |       return ((activeElement.value as any)?.name as string) || true;
19 |     }
20 | 
21 |     return false;
22 |   });
23 | 
24 |   onMounted(() => {
25 |     metaSymbol.value = macOS.value ? "⌘" : "Ctrl";
26 |   });
27 | 
28 |   return {
29 |     macOS,
30 |     metaSymbol,
31 |     activeElement,
32 |     usingInput,
33 |   };
34 | };
35 | 
36 | export const useShortcuts = createSharedComposable(_useShortcuts);
37 | 


--------------------------------------------------------------------------------
/composables/useSocket.ts:
--------------------------------------------------------------------------------
  1 | import { io, Socket } from "socket.io-client";
  2 | import type { DefaultEventsMap } from "socket.io/dist/typed-events";
  3 | import type { User } from "~/types/User";
  4 | 
  5 | class useSocket {
  6 |     private static instance: useSocket;
  7 |     private socket: Socket | null = null;
  8 |     private socketURL: string = 'https://vast-lamb-smooth.ngrok-free.app';
  9 | 
 10 |     private constructor() { }
 11 | 
 12 |     public static getInstance(): useSocket {
 13 |         if (!useSocket.instance) {
 14 |             useSocket.instance = new useSocket();
 15 |         }
 16 |         return useSocket.instance;
 17 |     }
 18 | 
 19 |     public set(URL: string): void {
 20 |         this.socketURL = URL;
 21 |     }
 22 | 
 23 |     public establishConnection(): void {
 24 |         if (!this.socket) {
 25 |             const { useAuthUser } = useAuth()
 26 |             const user = useAuthUser().value as User
 27 | 
 28 |             const userStringify = JSON.stringify(user)
 29 |             const userStringb64 = btoa(userStringify)
 30 | 
 31 |             const config = {
 32 |                 auth: {
 33 |                     user_id: user.user_id,
 34 |                     user: userStringb64, // Sending the entire user object
 35 |                 }
 36 |             };
 37 | 
 38 |             this.socket = io(this.socketURL, {
 39 |                 autoConnect: false,
 40 |                 query: config.auth,
 41 |                 auth: config.auth
 42 |             });
 43 |             console.log(`socket init to ${this.socketURL}`)
 44 |             this.socket.connect()
 45 |             this.addEventHandlers();
 46 |         } else {
 47 |             console.log('Socket connection already established.');
 48 |         }
 49 |     }
 50 | 
 51 |     public connected(): boolean {
 52 |         return this.socket?.connected ?? false
 53 |     }
 54 | 
 55 |     public emit(event: SocketEvent, ...args: any[]): Socket<DefaultEventsMap, DefaultEventsMap> | undefined {
 56 |         return this.socket?.emit(event, ...args)
 57 |     }
 58 | 
 59 |     public on(event: SocketEvent, listener: (...args: any[]) => void): Socket<DefaultEventsMap, DefaultEventsMap> | undefined {
 60 |         return this.socket?.on(event, listener)
 61 |     }
 62 | 
 63 |     public off(event: SocketEvent): Socket<DefaultEventsMap, DefaultEventsMap> | undefined {
 64 |         return this.socket?.off(event)
 65 |     }
 66 | 
 67 |     private addEventHandlers(): void {
 68 |         if (!this.socket) return;
 69 | 
 70 |         this.socket.onAny((event, ...args) => {
 71 |             console.log(event, args);
 72 |         });
 73 | 
 74 |         this.socket.on('connect', () => {
 75 |             console.log('Connected to socket server.');
 76 |         });
 77 | 
 78 |         // Add other event handlers as needed
 79 | 
 80 |         this.socket.on('disconnect', () => {
 81 |             console.log('Disconnected from socket server.');
 82 |         });
 83 |     }
 84 | 
 85 |     public closeConnection(): void {
 86 |         if (this.socket) {
 87 |             this.off('req_create_conversation')
 88 |             this.off('res_create_conversation')
 89 |             this.off('req_chats')
 90 |             this.off('res_chats')
 91 |             this.socket.offAny()
 92 |             this.socket.disconnect();
 93 |             this.socket = null;
 94 |         }
 95 |     }
 96 | }
 97 | 
 98 | type SocketEvent =
 99 |     'res_user_online' |
100 |     'res_user_offline' |
101 |     'req_create_conversation' |
102 |     'res_create_conversation' |
103 |     'req_conversation_by_id' |
104 |     'res_conversation_by_id' |
105 |     'req_conversations' |
106 |     'res_conversations' |
107 |     'req_chats' |
108 |     'res_chats' |
109 |     'req_send_chat' |
110 |     'res_send_chat' |
111 |     'req_typing' |
112 |     'res_typing' |
113 |     'req_mark_chat_read' |
114 |     'res_mark_chat_read'
115 | 
116 | export default useSocket;


--------------------------------------------------------------------------------
/composables/useTimelineService.ts:
--------------------------------------------------------------------------------
  1 | import type { Timeline, TimelinesData } from "~/types/Timeline";
  2 | 
  3 | export default () => {
  4 |     const config_public = useRuntimeConfig().public
  5 |     const base_url = config_public.base_api_url + config_public.api_version
  6 | 
  7 |     const getTimelines = async (user_id: string, page: string, itemPerPage: string) => {
  8 |         return new Promise(async (resolve, reject) => {
  9 |             try {
 10 |                 const response = await useFetchApi(
 11 |                     `${base_url}/timeline/${user_id}/${page}/${itemPerPage}`,
 12 |                     { method: 'GET' }
 13 |                 );
 14 |                 if (response.success) {
 15 |                     const data = response.data as TimelinesData
 16 |                     resolve(data)
 17 |                 } else {
 18 |                     reject(response.message)
 19 |                 }
 20 |             } catch (error) {
 21 |                 reject(error)
 22 |             }
 23 |         })
 24 |     };
 25 | 
 26 |     const getTimelineById = async (timeline_id: number) => {
 27 |         return new Promise(async (resolve, reject) => {
 28 |             try {
 29 |                 const response = await useFetchApi(
 30 |                     `${base_url}/timeline/${timeline_id}`,
 31 |                     { method: 'GET' }
 32 |                 );
 33 |                 if (response.success) {
 34 |                     const data = response.data as Timeline
 35 |                     resolve(data)
 36 |                 } else {
 37 |                     reject(response.message)
 38 |                 }
 39 |             } catch (error) {
 40 |                 reject(error)
 41 |             }
 42 |         })
 43 |     }
 44 | 
 45 |     const newTimeline = async (user_id: string, name: string, text_content: string) => {
 46 |         return new Promise(async (resolve, reject) => {
 47 |             try {
 48 |                 const response = await useFetchApi(
 49 |                     `${base_url}/timeline/new/`,
 50 |                     {
 51 |                         method: 'POST',
 52 |                         body: {
 53 |                             'user_id': user_id,
 54 |                             'name': name,
 55 |                             'text_content': text_content
 56 |                         }
 57 |                     }
 58 |                 );
 59 |                 if (response.success) {
 60 |                     resolve(true)
 61 |                 } else {
 62 |                     reject(response.message)
 63 |                 }
 64 |             } catch (error) {
 65 |                 reject(error)
 66 |             }
 67 |         })
 68 |     }
 69 | 
 70 |     const deleteTimeline = async (user_id: string, timeline_id: number) => {
 71 |         return new Promise(async (resolve, reject) => {
 72 |             try {
 73 |                 const response = await useFetchApi(
 74 |                     `${base_url}/timeline/delete/${timeline_id}/${user_id}`,
 75 |                     {
 76 |                         method: 'DELETE'
 77 |                     }
 78 |                 );
 79 |                 if (response.success) {
 80 |                     resolve(true)
 81 |                 } else {
 82 |                     reject(response.message)
 83 |                 }
 84 |             } catch (error) {
 85 |                 reject(error)
 86 |             }
 87 |         })
 88 |     }
 89 | 
 90 |     const doLikeTimeline = async (user_id: string, timeline_id: number) => {
 91 |         return new Promise(async (resolve, reject) => {
 92 |             try {
 93 |                 const response = await useFetchApi(
 94 |                     `${base_url}/timeline/like/`,
 95 |                     {
 96 |                         method: 'POST',
 97 |                         body: {
 98 |                             'user_id': user_id,
 99 |                             'timeline_id': timeline_id
100 |                         }
101 |                     }
102 |                 );
103 |                 if (response.success) {
104 |                     resolve(true)
105 |                 } else {
106 |                     reject(response.message)
107 |                 }
108 |             } catch (error) {
109 |                 reject(error)
110 |             }
111 |         })
112 |     }
113 | 
114 |     const doUnlikeTimeline = async (user_id: string, timeline_id: number) => {
115 |         return new Promise(async (resolve, reject) => {
116 |             try {
117 |                 const response = await useFetchApi(
118 |                     `${base_url}/timeline/unlike/`,
119 |                     {
120 |                         method: 'POST',
121 |                         body: {
122 |                             'user_id': user_id,
123 |                             'timeline_id': timeline_id
124 |                         }
125 |                     }
126 |                 );
127 |                 if (response.success) {
128 |                     resolve(true)
129 |                 } else {
130 |                     reject(response.message)
131 |                 }
132 |             } catch (error) {
133 |                 reject(error)
134 |             }
135 |         })
136 |     }
137 | 
138 |     const doShareTimeline = async (user_id: string, timeline_id: number) => {
139 |         return new Promise(async (resolve, reject) => {
140 |             try {
141 |                 const response = await useFetchApi(
142 |                     `${base_url}/timeline/share/`,
143 |                     {
144 |                         method: 'POST',
145 |                         body: {
146 |                             'user_id': user_id,
147 |                             'timeline_id': timeline_id
148 |                         }
149 |                     }
150 |                 );
151 |                 if (response.success) {
152 |                     resolve(true)
153 |                 } else {
154 |                     reject(response.message)
155 |                 }
156 |             } catch (error) {
157 |                 reject(error)
158 |             }
159 |         })
160 |     }
161 | 
162 |     return {
163 |         getTimelines,
164 |         getTimelineById,
165 |         newTimeline,
166 |         deleteTimeline,
167 |         doLikeTimeline,
168 |         doUnlikeTimeline,
169 |         doShareTimeline
170 |     }
171 | }


--------------------------------------------------------------------------------
/composables/useToast.ts:
--------------------------------------------------------------------------------
  1 | import type { ToastProps } from "@/components/UI/Toast/Toast.vue";
  2 | 
  3 | const TOAST_LIMIT = 3;
  4 | const TOAST_REMOVE_DELAY = 7000;
  5 | 
  6 | export type StringOrVNode = string | VNode | (() => VNode);
  7 | 
  8 | type ToasterToast = ToastProps & {
  9 |   id: string;
 10 |   title?: string;
 11 |   description?: StringOrVNode;
 12 |   action?: Component;
 13 |   icon?: string;
 14 | };
 15 | 
 16 | const actionTypes = {
 17 |   ADD_TOAST: "ADD_TOAST",
 18 |   UPDATE_TOAST: "UPDATE_TOAST",
 19 |   DISMISS_TOAST: "DISMISS_TOAST",
 20 |   REMOVE_TOAST: "REMOVE_TOAST",
 21 | } as const;
 22 | 
 23 | let count = 0;
 24 | 
 25 | function genId() {
 26 |   count = (count + 1) % Number.MAX_VALUE;
 27 |   return count.toString();
 28 | }
 29 | 
 30 | type ActionType = typeof actionTypes;
 31 | 
 32 | type Action =
 33 |   | {
 34 |       type: ActionType["ADD_TOAST"];
 35 |       toast: ToasterToast;
 36 |     }
 37 |   | {
 38 |       type: ActionType["UPDATE_TOAST"];
 39 |       toast: Partial<ToasterToast>;
 40 |     }
 41 |   | {
 42 |       type: ActionType["DISMISS_TOAST"];
 43 |       toastId?: ToasterToast["id"];
 44 |     }
 45 |   | {
 46 |       type: ActionType["REMOVE_TOAST"];
 47 |       toastId?: ToasterToast["id"];
 48 |     };
 49 | 
 50 | interface State {
 51 |   toasts: ToasterToast[];
 52 | }
 53 | 
 54 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 55 | 
 56 | function addToRemoveQueue(toastId: string) {
 57 |   if (toastTimeouts.has(toastId)) return;
 58 | 
 59 |   const timeout = setTimeout(() => {
 60 |     toastTimeouts.delete(toastId);
 61 |     dispatch({
 62 |       type: actionTypes.REMOVE_TOAST,
 63 |       toastId,
 64 |     });
 65 |   }, TOAST_REMOVE_DELAY);
 66 | 
 67 |   toastTimeouts.set(toastId, timeout);
 68 | }
 69 | 
 70 | const state = ref<State>({
 71 |   toasts: [],
 72 | });
 73 | 
 74 | function dispatch(action: Action) {
 75 |   switch (action.type) {
 76 |     case actionTypes.ADD_TOAST:
 77 |       state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT);
 78 |       break;
 79 | 
 80 |     case actionTypes.UPDATE_TOAST:
 81 |       state.value.toasts = state.value.toasts.map((t) =>
 82 |         t.id === action.toast.id ? { ...t, ...action.toast } : t
 83 |       );
 84 |       break;
 85 | 
 86 |     case actionTypes.DISMISS_TOAST: {
 87 |       const { toastId } = action;
 88 | 
 89 |       if (toastId) {
 90 |         addToRemoveQueue(toastId);
 91 |       } else {
 92 |         state.value.toasts.forEach((toast) => {
 93 |           addToRemoveQueue(toast.id);
 94 |         });
 95 |       }
 96 | 
 97 |       state.value.toasts = state.value.toasts.map((t) =>
 98 |         t.id === toastId || toastId === undefined
 99 |           ? {
100 |               ...t,
101 |               open: false,
102 |             }
103 |           : t
104 |       );
105 |       break;
106 |     }
107 | 
108 |     case actionTypes.REMOVE_TOAST:
109 |       if (action.toastId === undefined) state.value.toasts = [];
110 |       else state.value.toasts = state.value.toasts.filter((t) => t.id !== action.toastId);
111 | 
112 |       break;
113 |   }
114 | }
115 | 
116 | function useToast() {
117 |   return {
118 |     toasts: computed(() => state.value.toasts),
119 |     toast,
120 |     dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
121 |   };
122 | }
123 | 
124 | type Toast = Omit<ToasterToast, "id">;
125 | 
126 | function toast(props: Toast) {
127 |   const id = genId();
128 | 
129 |   const update = (props: ToasterToast) =>
130 |     dispatch({
131 |       type: actionTypes.UPDATE_TOAST,
132 |       toast: { ...props, id },
133 |     });
134 | 
135 |   const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id });
136 | 
137 |   dispatch({
138 |     type: actionTypes.ADD_TOAST,
139 |     toast: {
140 |       ...props,
141 |       id,
142 |       open: true,
143 |       onOpenChange: (open: boolean) => {
144 |         if (!open) dismiss();
145 |       },
146 |     },
147 |   });
148 | 
149 |   return {
150 |     id,
151 |     dismiss,
152 |     update,
153 |   };
154 | }
155 | 
156 | export { toast, useToast };
157 | 


--------------------------------------------------------------------------------
/composables/useUserService.ts:
--------------------------------------------------------------------------------
 1 | import type { User } from "~/types/User";
 2 | 
 3 | export default () => {
 4 |     const config_public = useRuntimeConfig().public
 5 |     const base_url = config_public.base_api_url + config_public.api_version
 6 | 
 7 |     // const getUserById = async (user_id: string) => {
 8 |     //     return new Promise(async (resolve, reject) => {
 9 |     //         try {
10 |     //             const response = await useFetchApi(
11 |     //                 `${base_url}/user/${user_id}`,
12 |     //                 { method: 'GET' }
13 |     //             );
14 |     //             if (response.success) {
15 |     //                 const data = response.data as User
16 |     //                 resolve(data)
17 |     //             } else {
18 |     //                 reject(response.message)
19 |     //             }
20 |     //         } catch (error) {
21 |     //             reject(error)
22 |     //         }
23 |     //     })
24 |     // }
25 | 
26 |     const getMultipleUsers = async (user_ids: string[]) => {
27 |         return new Promise(async (resolve, reject) => {
28 |             try {
29 |                 const response = await useFetchApi(
30 |                     `${base_url}/user/multiple/`,
31 |                     {
32 |                         method: 'POST',
33 |                         body: {
34 |                             'user_ids': user_ids
35 |                         }
36 |                     }
37 |                 );
38 |                 if (response.success) {
39 |                     const data = response.data as User[]
40 |                     resolve(data)
41 |                 } else {
42 |                     reject(response.message)
43 |                 }
44 |             } catch (error) {
45 |                 reject(error)
46 |             }
47 |         })
48 |     }
49 | 
50 |     return {
51 |         // getUserById,
52 |         getMultipleUsers
53 |     }
54 | }


--------------------------------------------------------------------------------
/layouts/chat.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="max-w-2xl mx-auto h-screen">
 3 |         <UiNavbar sticky>
 4 |             <UiContainer class="flex h-14 items-center justify-between">
 5 |                 <UiButton class="rounded-full"
 6 |                     variant="ghost"
 7 |                     size="icon-sm"
 8 |                     @click="navBack"
 9 |                 >
10 |                     <IconChevronLeft/>
11 |                 </UiButton>
12 |                 <div class="flex flex-row items-center">
13 |                     <p class="text-base font-semibold pr-3">{{ user?.name }}</p>
14 |                     <ChatStatusIcon :isOnline="user?.is_online" />
15 |                     <span v-if="user?.is_online" class="text-secondary-foreground/70 text-[10px] pl-1">online</span>
16 |                     <span v-else class="text-secondary-foreground/70 text-[10px] pl-1">offline</span>
17 |                 </div>
18 |                 <div class="flex items-center gap-2">
19 |                     <UiButton class="rounded-full"
20 |                         @click="$colorMode.preference = $colorMode.value == 'dark' ? 'light' : 'dark'" variant="ghost"
21 |                         size="icon-sm">
22 |                         <IconSunMedium class="h-4 w-4" />
23 |                     </UiButton>
24 |                 </div>
25 |             </UiContainer>
26 |         </UiNavbar>
27 |         <slot />
28 |         <FooterMobile :routes="routes"/>
29 |     </div>
30 | </template>
31 |   
32 | <script lang="ts" setup>
33 | import type { User } from '~/types/User';
34 | 
35 | const props = defineProps({
36 |     user: {
37 |         type: Object as () => User,
38 |         default: undefined,
39 |         required: false
40 |     }
41 | })
42 | 
43 | const { initRoute, navRoutes, navBack } = useNavRoute()
44 | initRoute()
45 | const routes = navRoutes().value as NavRoute[]
46 | 
47 | </script>


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="max-w-2xl mx-auto h-screen">
 3 |         <UiNavbar sticky>
 4 |             <UiContainer class="flex h-14 items-center justify-between">
 5 |                 <p @click="handleClickLogo" class="text-lg font-semibold">{{ appName }}</p>
 6 |                 <div class="flex items-center gap-2">
 7 |                     <UiButton class="rounded-full"
 8 |                         @click="$colorMode.preference = $colorMode.value == 'dark' ? 'light' : 'dark'" variant="ghost"
 9 |                         size="icon-sm">
10 |                         <IconSunMedium class="h-4 w-4" />
11 |                     </UiButton>
12 |                     <UiButton v-if="user" @click="handleNewPost" size="sm">
13 |                         <span class="hidden lg:block">New Post</span>
14 |                         <IconSquarePen class="lg:hidden h-4 w-4" />
15 |                     </UiButton>
16 | 
17 |                     <UiDropdownMenu>
18 |                         <UiDropdownMenuTrigger asChild>
19 |                             <UiButton class="h-10 w-10 rounded-full" variant="ghost">
20 |                                 <UiAvatar class="h-10 w-10 scale-x-[-1] rounded-full border-2 border-primary hover:border-none"
21 |                                     :src="props.user?.avatar ?? ''"
22 |                                     :fallback="getInitials(props.user?.name ?? 'Netijen Curhat')" />
23 |                             </UiButton>
24 |                         </UiDropdownMenuTrigger>
25 |                         <UiDropdownMenuContent class="w-56">
26 |                             <template v-for="(item, i) in menuitems" :key="i">
27 |                                 <UiDropdownMenuLabel v-if="item.label" :label="item.label" />
28 |                                 <UiDropdownMenuSeparator v-else-if="item.divider" />
29 |                                 <UiDropdownMenuItem v-else @select="item.select" :title="item.title" :icon="item.icon"/>
30 |                             </template>
31 |                         </UiDropdownMenuContent>
32 |                     </UiDropdownMenu>
33 |                 </div>
34 |             </UiContainer>
35 |         </UiNavbar>
36 |         <slot />
37 |         <FooterMobile :routes="routes" />
38 |     </div>
39 | </template>
40 |   
41 | <script lang="ts" setup>
42 | import type { User } from '~/types/User';
43 | const { getAppName } = usePreferencesService()
44 | const appName = getAppName()
45 | 
46 | const props = defineProps({
47 |     user: {
48 |         type: Object as () => User,
49 |         default: undefined,
50 |         required: false
51 |     }
52 | })
53 | 
54 | const { logout } = useAuth()
55 | const { navRoutes, initRoute } = useNavRoute()
56 | initRoute()
57 | const routes = navRoutes().value as NavRoute[]
58 | 
59 | const menuitems = [
60 |     { label: props.user?.name },
61 |     { divider: true },
62 |     { title: "Logout", icon: "bi:box-arrow-right", select: handleLogout },
63 | ];
64 | 
65 | function handleClickLogo() {
66 |     navigateTo('/')
67 | }
68 | 
69 | function handleNewPost() {
70 |     navigateTo('/new')
71 | }
72 | 
73 | async function handleLogout() {
74 |     await logout()
75 |         .finally(() => {
76 |             location.reload()
77 |         })
78 | }
79 | 
80 | </script>


--------------------------------------------------------------------------------
/layouts/empty.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <slot />
3 | </template>
4 |   
5 | <script lang="ts" setup>
6 | 
7 | </script>


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
  1 | // https://nuxt.com/docs/api/configuration/nuxt-config
  2 | import removeConsole from "vite-plugin-remove-console";
  3 | 
  4 | export default defineNuxtConfig({
  5 |     devtools: { enabled: true },
  6 |     modules: [
  7 |         "@nuxtjs/tailwindcss",
  8 |         "@nuxtjs/color-mode",
  9 |         "@vueuse/nuxt",
 10 |         "nuxt-icon",
 11 |         "nuxt-lucide-icons",
 12 |         "nuxt-vuefire",
 13 |         "@vee-validate/nuxt",
 14 |         "@nuxtjs/cloudinary",
 15 |         "@dargmuesli/nuxt-cookie-control",
 16 |         "@vite-pwa/nuxt"
 17 |     ],
 18 | 
 19 |     vite: {
 20 |         plugins: [
 21 |             removeConsole()
 22 |         ]
 23 |     },
 24 | 
 25 |     tailwindcss: {
 26 |         exposeConfig: true,
 27 |     },
 28 | 
 29 |     colorMode: {
 30 |         classSuffix: "",
 31 |     },
 32 | 
 33 |     typescript: {
 34 |         shim: false,
 35 |     },
 36 | 
 37 |     imports: {
 38 |         imports: [
 39 |             {
 40 |                 from: "tailwind-variants",
 41 |                 name: "tv",
 42 |             },
 43 |             {
 44 |                 from: "tailwind-variants",
 45 |                 name: "VariantProps",
 46 |                 type: true,
 47 |             },
 48 |         ],
 49 |     },
 50 | 
 51 |     vue: {
 52 |         compilerOptions: {
 53 |             isCustomElement: tag => tag === 'TransitionSlide'
 54 |         }
 55 |     },
 56 | 
 57 |     lucide: {
 58 |         namePrefix: 'Icon'
 59 |     },
 60 | 
 61 |     cookieControl: {
 62 |         isControlButtonEnabled: false
 63 |     },
 64 | 
 65 |     cloudinary: {
 66 |         cloudName: process.env.CLOUDINARY_CLOUD_NAME,
 67 |         apiKey: process.env.CLOUDINARY_API_KEY,
 68 |         uploadPreset: process.env.CLOUDINARY_PRESET_UPLOAD
 69 |     },
 70 | 
 71 |     vuefire: {
 72 |         config: {
 73 |             apiKey: process.env.FIREBASE_API_KEY,
 74 |             authDomain: process.env.FIREBASE_AUTH_DOAMIN,
 75 |             databaseURL: process.env.FIREBASE_DATABASE_URL,
 76 |             projectId: process.env.FIREBASE_PROJECT_ID,
 77 |             storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
 78 |             messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
 79 |             appId: process.env.FIREBASE_APP_ID,
 80 |             measurementId: process.env.FIREBASE_MEASUREMENT_ID
 81 |         }
 82 |     },
 83 | 
 84 |     pwa: {
 85 |         manifest: {
 86 |             name: 'Netijen Curhat',
 87 |             short_name: 'Netijen Curhat',
 88 |             description: 'Social Network Anonymously',
 89 |             theme_color: '#4A90E2',
 90 |             background_color: '#ffffff',
 91 |             display: 'standalone',
 92 |             scope: '/',
 93 |             start_url: '/',
 94 |             icons: [
 95 |                 {
 96 |                     src: "pwa-64x64.png",
 97 |                     sizes: "64x64",
 98 |                     type: "image/png"
 99 |                 },
100 |                 {
101 |                     src: "pwa-192x192.png",
102 |                     sizes: "192x192",
103 |                     type: "image/png"
104 |                 },
105 |                 {
106 |                     src: "pwa-512x512.png",
107 |                     sizes: "512x512",
108 |                     type: "image/png"
109 |                 },
110 |                 // {
111 |                 //     src: "maskable-icon-512x512.png",
112 |                 //     sizes: "512x512",
113 |                 //     type: "image/png"
114 |                 // },
115 |                 // {
116 |                 //     src: "apple-touch-icon-180x180",
117 |                 //     sizes: "180x180",
118 |                 //     type: "image/png"
119 |                 // }
120 |             ]
121 |         },
122 |         workbox: {
123 |             navigateFallback: '/',
124 |             importScripts: [
125 |                 '/firebase-messaging-sw.js'
126 |             ]
127 |         },
128 |         devOptions: {
129 |             enabled: true,
130 |             type: 'module'
131 |         }
132 |     },
133 | 
134 |     runtimeConfig: {
135 |         public: {
136 |             api_version: process.env.API_VERSION,
137 |             base_api_url: process.env.BASE_URL_API,
138 |             base_socket_url: process.env.BASE_URL_SOCKET,
139 |             firebase_vapid_key: process.env.FIREBASE_VAPID_KEY,
140 |             cloudinary: {
141 |                 uploadPreset: process.env.CLOUDINARY_PRESET_UPLOAD
142 |             }
143 |         },
144 |     },
145 | 
146 |     app: {
147 |         head: {
148 |             title: "Netijen Curhat",
149 |             titleTemplate: "%s - Netijen Curhat"
150 |         }
151 |     }
152 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare",
11 |     "ui": "npx --yes ui-thing@latest add",
12 |     "theme": "npx ui-thing@latest theme",
13 |     "shortcut": "npx ui-thing@latest shortcuts",
14 |     "gen-icon": "npx pwa-assets-generator --preset minimal-2023 public/logo.svg"
15 |   },
16 |   "devDependencies": {
17 |     "@dargmuesli/nuxt-cookie-control": "^7.2.5",
18 |     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
19 |     "@nuxtjs/color-mode": "^3.3.2",
20 |     "@nuxtjs/tailwindcss": "^6.10.4",
21 |     "@vite-pwa/assets-generator": "^0.2.4",
22 |     "@vite-pwa/nuxt": "^0.8.0",
23 |     "@vueuse/math": "^10.7.1",
24 |     "@vueuse/nuxt": "^10.7.1",
25 |     "nuxt": "^3.9.0",
26 |     "nuxt-icon": "^0.6.8",
27 |     "nuxt-lucide-icons": "^1.0.3",
28 |     "prettier": "^3.1.1",
29 |     "prettier-plugin-tailwindcss": "^0.5.11",
30 |     "tailwindcss-animate": "^1.0.7",
31 |     "typescript": "^5.3.3",
32 |     "vite-plugin-remove-console": "^2.2.0",
33 |     "vue": "^3.4.6",
34 |     "vue-router": "^4.2.5"
35 |   },
36 |   "dependencies": {
37 |     "@nuxt/types": "^2.17.2",
38 |     "@nuxtjs/cloudinary": "^2.5.2",
39 |     "@vee-validate/nuxt": "^4.12.4",
40 |     "@vee-validate/zod": "^4.12.4",
41 |     "firebase": "^10.12.2",
42 |     "nuxt-vuefire": "^1.0.2",
43 |     "radix-vue": "^1.3.0",
44 |     "socket.io-client": "^4.7.4",
45 |     "tailwind-variants": "^0.1.20",
46 |     "vuefire": "^3.1.23",
47 |     "zod": "^3.22.4"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/pages/[timeline_id].vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="flex flex-col overflow-scroll h-[calc(100svh-56px-56px-76px-12px)] p-6">
  3 |         <div v-if="loading">
  4 |             <CardThreadsSkeleton />
  5 |         </div>
  6 |         <div v-else>
  7 |             <CardThreads :timeline="timeline" compact />
  8 | 
  9 |             <UiDivider class="pt-4 pb-4" />
 10 | 
 11 |             <div v-if="comments.length > 0">
 12 |                 <UiContainer v-for="comment in comments" as="section" class="p-0">
 13 |                     <CommentView :key="comment.comment_id" :commentData="comment" />
 14 |                 </UiContainer>
 15 |             </div>
 16 | 
 17 |             <div v-else>
 18 |                 no comment
 19 |             </div>
 20 | 
 21 |             <div class="pt-10" v-if="loadingMore">
 22 |                 Loading...
 23 |             </div>
 24 |             <Observer @intersect="loadMore" />
 25 |         </div>
 26 |     </div>
 27 |     <ReplyForm class="sticky bottom-14 border-t" :user="user" @onSubmit="handleRepy"/>
 28 | </template>
 29 | 
 30 | <script lang="ts" setup>
 31 | import type { User } from '~/types/User';
 32 | import type { Timeline } from '@/types/Timeline';
 33 | import type { CommentsData, Comment } from '~/types/Comment';
 34 | 
 35 | const { getTimelineById } = useTimelineService()
 36 | const { getCommentByTimelineId } = useCommentService()
 37 | const { getAppName } = usePreferencesService()
 38 | const { addNewReply } = useCommentService()
 39 | const { useAuthUser } = useAuth()
 40 | const user = useAuthUser().value as User
 41 | const { timeline_id } = useRoute().params
 42 | const itemPerPage = ref(10);
 43 | const page = ref(1);
 44 | const timeline = ref<Timeline>()
 45 | const comments = ref<Comment[]>([])
 46 | const loading = ref(true)
 47 | const loadingMore = ref(false)
 48 | 
 49 | const loadMore = async () => {
 50 |     if (!loadingMore.value) {
 51 |         loadingMore.value = true
 52 |         await getCommentByTimelineId(Number(timeline_id), page.value, itemPerPage.value)
 53 |             .then((result) => {
 54 |                 const data = result as CommentsData
 55 |                 comments.value = comments.value.concat(data.comments)
 56 |                 page.value = data.next_page
 57 |             })
 58 |             .catch((error) => {
 59 |                 console.log(error)
 60 |             })
 61 |             .finally(() => {
 62 |                 loadingMore.value = false
 63 |             })
 64 |     }
 65 | };
 66 | 
 67 | const handleRepy = async (replyText: string) => {
 68 |     await addNewReply(user, timeline.value?.timeline_id ?? 1, replyText)
 69 |         .then((result) => {
 70 |             console.log(result)
 71 |             const comment = result as Comment
 72 |             comments.value.unshift(comment)
 73 |         })
 74 |         .catch((error) => {
 75 |             console.log(error)
 76 |         })
 77 | }
 78 | 
 79 | onBeforeMount(() => {
 80 |     loading.value = true
 81 | 
 82 |     getTimelineById(Number(timeline_id))
 83 |         .then((result) => {
 84 |             const data = result as Timeline
 85 |             timeline.value = data
 86 |         })
 87 |         .catch((error) => {
 88 |             console.log(error)
 89 |         })
 90 |         .finally(() => {
 91 |             loading.value = false
 92 |         })
 93 | })
 94 | 
 95 | useSeoMeta({
 96 |     description: timeline.value?.text_content,
 97 |     ogTitle: `${timeline.value?.user.name} - ${getAppName()}`,
 98 |     ogDescription: timeline.value?.text_content,
 99 |     ogImage: '[og:image]',
100 |     ogUrl: window.location.href,
101 |     twitterTitle: `${timeline.value?.user.name} - ${getAppName()}`,
102 |     twitterDescription: timeline.value?.text_content,
103 |     twitterImage: '[twitter:image]',
104 |     twitterCard: 'summary'
105 | })
106 | 
107 | useHead({
108 |     htmlAttrs: {
109 |         lang: 'en'
110 |     },
111 |     link: [
112 |         {
113 |             rel: 'icon',
114 |             type: 'image/png',
115 |             href: '/favicon.png'
116 |         }
117 |     ]
118 | })
119 | </script>
120 | 
121 | <style></style>


--------------------------------------------------------------------------------
/pages/contact-us.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="flex flex-col items-center justify-center h-screen">
 3 |         <div class="p-6">
 4 |             <h1>Contact Us</h1>
 5 |         </div>
 6 |         <div class="flex flex-col mt-auto gap-1">
 7 |             <NuxtLink v-for="(item, i) in contactItems"
 8 |                 class="hover:underline" :key="i"
 9 |                 :to="item.to"  
10 |                 target="_blank"          
11 |             >
12 |                 <Icon :name="item.icon"/>
13 |                 {{ item.title }}
14 |             </NuxtLink>
15 |         </div>
16 | 
17 |         <div class="mt-auto mb-20">
18 |             <FooterLinks/>
19 |         </div>
20 |     </div>
21 | </template>
22 | 
23 | <script lang="ts" setup>
24 | const { getContacts } = usePreferencesService()
25 | 
26 | const contactItems = [
27 |     { title: getContacts()?.email, icon: "ph:envelope", to: `mailto:${getContacts()?.email}` },
28 |     { title: getContacts()?.instagram, icon: "ph:instagram-logo", to: `https://instagram.com/${getContacts()?.instagram}` }
29 | ]
30 | </script>


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <UiContainer as="section" class="max-w-2xl h-screen py-5 overflow-y-auto">
  3 |         <div v-if="loading && !loadingMore">
  4 |             <CardThreadsSkeleton />
  5 |         </div>
  6 |         <div v-else>
  7 |             <div v-if="timelines.length > 0">
  8 |                 <ListThreads :timelines="timelines"></ListThreads>
  9 |                 <Observer @intersect="loadMore" />
 10 |             </div>
 11 |             <div v-else class="flex flex-col gap-2 items-center">
 12 |                 <IconGanttChartSquare />
 13 |                 <p>{{ responseMessage }}</p>
 14 |             </div>
 15 | 
 16 |             <div class="pt-10" v-if="loadingMore">
 17 |                 <CardThreadsSkeleton />
 18 |             </div>
 19 |         </div>
 20 |     </UiContainer>
 21 | </template>
 22 | 
 23 | <script lang="ts" setup>
 24 | import { getToken, getMessaging, onMessage } from "firebase/messaging"
 25 | import type { Timeline, TimelinesData } from '@/types/Timeline'
 26 | import type { User } from '@/types/User'
 27 | import Observer from "@/components/Observer.vue"
 28 | 
 29 | const { getTimelines } = useTimelineService()
 30 | const { useAuthUser, saveFcmToken } = useAuth()
 31 | const user = useAuthUser().value as User
 32 | const itemPerPage = ref(10);
 33 | const page = ref(1);
 34 | const loading = ref(true);
 35 | const loadingMore = ref(false);
 36 | const responseMessage = ref("Mau curhat apa?");
 37 | const timelines = ref<Timeline[]>([]);
 38 | 
 39 | const fb = useFirebaseApp()
 40 | const messaging = getMessaging()
 41 | 
 42 | async function setupFcm() {
 43 |     if (user) {
 44 |         try {
 45 |             let permission = Notification.permission;
 46 |             if (permission != 'granted') {
 47 |                 permission = await Notification.requestPermission();
 48 |             }
 49 | 
 50 |             if (permission === 'granted') {
 51 |                 const token = await getToken(messaging, { vapidKey: useRuntimeConfig().public.firebase_vapid_key });
 52 |                 if (token) {
 53 |                     console.log("saving token...", token);
 54 |                     user.fcm_token = token;
 55 |                     const saveToken = await saveFcmToken(user);
 56 |                 }
 57 |             }
 58 |         } catch (error) {
 59 |             console.log(error)
 60 |         }
 61 |     }
 62 | }
 63 | 
 64 | onMessage(messaging, (payload) => {
 65 |     console.log('Message received. ', payload);
 66 |     // Customize notification here
 67 | });
 68 | 
 69 | async function getListTimeline() {
 70 |     try {
 71 |         await getTimelines(user.user_id, `${page.value}`, `${itemPerPage.value}`)
 72 |             .then((result) => {
 73 |                 const data = result as TimelinesData
 74 |                 page.value = data.next_page
 75 |                 timelines.value = timelines.value.concat(data.timelines)
 76 |             })
 77 |             .catch((error) => {
 78 |                 responseMessage.value = error
 79 |             })
 80 |             .finally(() => {
 81 |                 loading.value = false
 82 |                 loadingMore.value = false
 83 |             })
 84 |     } catch (error) {
 85 |         responseMessage.value = `${error}`
 86 |         console.log(error)
 87 |     }
 88 | }
 89 | 
 90 | const loadMore = async () => {
 91 |     if (!loadingMore.value) {
 92 |         loadingMore.value = true
 93 |         await getListTimeline()
 94 |     }
 95 | };
 96 | 
 97 | onMounted(async () => {
 98 |     setupFcm()
 99 | })
100 | 
101 | onBeforeMount(async () => {
102 |     loading.value = true
103 |     await getListTimeline()
104 | })
105 | </script>
106 | 


--------------------------------------------------------------------------------
/pages/login.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <AuthPage/>
3 | </template>
4 | 
5 | <script lang="ts" setup>
6 | 
7 | </script>


--------------------------------------------------------------------------------
/pages/new.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <UiContainer as="section" class="max-w-2xl h-screen py-5">
 3 |         <UiCardContent as="form" @submit="onSubmit" class="flex flex-col gap-4">
 4 |             <Field v-slot="{ componentField }" name="text_content">
 5 |                 <UiFormItem label="Mau Curhat Apa?">
 6 |                     <UiTextarea
 7 |                         resize
 8 |                         placeholder="What is in your heart?"
 9 |                         v-bind="componentField"
10 |                     />
11 |                 </UiFormItem>
12 |             </Field>
13 |             <UiButton :disabled="loading" type="submit">Post
14 |                 <IconSquarePen
15 |                     class="h-4 w-4"
16 |                     :class="{
17 |                         'animate-pulse': loading
18 |                     }"
19 |                 />
20 |             </UiButton>
21 |         </UiCardContent>
22 |     </UiContainer>
23 | </template>
24 | 
25 | <script lang="ts" setup>
26 | import { z } from "zod";
27 | import { TypeMessage } from "~/types";
28 | import type { User } from "~/types/User";
29 | 
30 | const { newTimeline } = useTimelineService()
31 | const { showMessage } = useMessage()
32 | const { useAuthUser } = useAuth()
33 | const user = useAuthUser().value as User
34 | const loading = ref(false)
35 | 
36 | const { handleSubmit } = useForm({
37 |     validationSchema: toTypedSchema(
38 |         z.object({
39 |             text_content: z
40 |                 .string({
41 |                     required_error: "Tulis dulu, mau curhat apa?"
42 |                 })
43 |                 .min(5, "Minimal 5 character")
44 |         })
45 |     ),
46 | });
47 | 
48 | const onSubmit = handleSubmit( async (values) => {
49 |     loading.value = true
50 |     await newTimeline(user.user_id, user.name, values['text_content'])
51 |         .then((result) => {
52 |             showMessage("Successfully posted!", TypeMessage.success)
53 |             setTimeout(() => {
54 |                 navigateTo('/')
55 |                 loading.value = false
56 |             }, 2000);
57 |         })
58 |         .catch((error) => {
59 |             showMessage(error, TypeMessage.destructive)
60 |         })
61 | });
62 | </script>


--------------------------------------------------------------------------------
/pages/register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="flex h-screen">
  3 |         <div class="relative flex-1 hidden w-0 lg:block">
  4 |             <img class="absolute inset-0 object-cover w-full h-full" :src="imageRegister" />
  5 |         </div>
  6 |         <div class="flex flex-col justify-center flex-1 px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
  7 |             <div class="flex flex-col justify-center items-center w-full h-full max-w-sm mx-auto lg:w-96">
  8 |                 <UiCard class="mt-auto mx-auto max-w-sm" title="Sign Up" description="Join Today">
  9 |                     <template #content>
 10 |                         <UiCardContent as="form" @submit="onSubmit" class="flex flex-col gap-4">
 11 |                             <Field v-slot="{ componentField }" name="email">
 12 |                                 <UiFormItem label="Email">
 13 |                                     <UiInput type="email" v-bind="componentField" />
 14 |                                 </UiFormItem>
 15 |                             </Field>
 16 |                             <Field v-slot="{ componentField }" name="password">
 17 |                                 <UiFormItem label="Password">
 18 |                                     <UiInput type="password" v-bind="componentField" />
 19 |                                 </UiFormItem>
 20 |                             </Field>
 21 |                             <Field v-slot="{ componentField }" name="confirm_password">
 22 |                                 <UiFormItem label="Conrfirm Password">
 23 |                                     <UiInput type="password" v-bind="componentField" />
 24 |                                 </UiFormItem>
 25 |                             </Field>
 26 |                             <div class="flex flex-col gap-2">
 27 |                                 <UiButton type="submit" :disabled="loading">Create Account</UiButton>
 28 |                             </div>
 29 | 
 30 |                             <p class="text-sm text-center">Already have an account? <NuxtLink class="text-primary"
 31 |                                     to="/login" :disabled="loading">Sign In</NuxtLink>
 32 |                             </p>
 33 |                         </UiCardContent>
 34 |                     </template>
 35 |                 </UiCard>
 36 | 
 37 |                 <div class="mt-auto text-sm text-center">
 38 |                     <p class="text-sm text-center">By clicking on the "Create Account" button, you agree to our <NuxtLink
 39 |                             class="text-primary" to="/user-agreement" :disabled="loading">User Agreement</NuxtLink> and our <NuxtLink
 40 |                             class="text-primary" to="/privacy-policy" :disabled="loading">Privacy Policy</NuxtLink>
 41 |                     </p>
 42 |                 </div>
 43 | 
 44 |                 <div class="mt-auto">
 45 |                     <FooterLinks/>
 46 |                 </div>
 47 |             </div>
 48 |         </div>
 49 |     </div>
 50 | </template>
 51 | 
 52 | <script lang="ts" setup>
 53 | import { z } from "zod";
 54 | import { TypeMessage } from "~/types";
 55 | 
 56 | const { register, login } = useAuth()
 57 | const { showMessage } = useMessage()
 58 | const { getImages } = usePreferencesService()
 59 | const imageRegister = getImages()?.image_url_register_lg
 60 | const loading = ref(false);
 61 | 
 62 | const { handleSubmit } = useForm({
 63 |     validationSchema: toTypedSchema(
 64 |         z.object({
 65 |             email: z
 66 |                 .string({
 67 |                     required_error: "Email is required",
 68 |                 })
 69 |                 .email("Email must be a valid email"),
 70 |             password: z
 71 |                 .string({
 72 |                     required_error: 'Password is required',
 73 |                 })
 74 |                 .min(8, 'Password at least 8 characters')
 75 |                 .regex(/[a-z]/, { message: "Password must contain at least one lowercase letter (a-z)" })
 76 |                 .regex(/[A-Z]/, { message: "Password must contain at least one uppercase letter (A-Z)" })
 77 |                 .regex(/[0-9]/, { message: "Password must contain at least one digit (0-9)" }),
 78 |             // .regex(/[!@#$%^&*()?]/i, { message: "Password must contain at least one special character from @$!%*?&" }),
 79 |             confirm_password: z
 80 |                 .string({
 81 |                     required_error: "required"
 82 |                 })
 83 |         })
 84 |             .refine(data => data.password === data.confirm_password, {
 85 |                 message: "Password and confirmation password do not match"
 86 |             })
 87 |     ),
 88 | });
 89 | 
 90 | const onSubmit = handleSubmit(async (values) => {
 91 |     if (!loading.value) {
 92 |         loading.value = true
 93 |         await register(values.email, values.password)
 94 |             .then(async (succes) => {
 95 |                 if (succes) {
 96 |                     await login(values.email, values.password)
 97 |                 }
 98 |             })
 99 |             .catch((error) => {
100 |                 showMessage(error, TypeMessage.destructive)
101 |             })
102 |             .finally(() => {
103 |                 loading.value = false
104 |             })
105 |     }
106 | });
107 | 
108 | </script>


--------------------------------------------------------------------------------
/pages/report/[timeline_id].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="overflow-auto h-[calc(100svh-56px-56px)] p-6">
 3 |         <CardThreads :timeline="timeline" compact />
 4 |         <UiDivider class="pt-3 pb-3" />
 5 |         <form @submit="onSubmit">
 6 |             <Field name="reason" v-slot="{ componentField }">
 7 |                 <UiFormItem class="space-y-5">
 8 |                     <p class="text-lg font-medium">Why are you reporting this post?</p>
 9 |                     <p class="text-sm font-normal">Your report is anonymous, except if you're reporting an intellectual
10 |                         property infringement. if someone is in immediate danger, call the local emergency services -
11 |                         don't
12 |                         wait.</p>
13 |                     <UiRadioGroup v-bind="componentField">
14 |                         <UiFormItem v-for="reason in reasons" hideMessage
15 |                             class="flex flex-row-reverse items-center justify-center gap-3 space-y-0" :label="reason">
16 |                             <UiRadioGroupItem :value="reason" />
17 |                         </UiFormItem>
18 |                     </UiRadioGroup>
19 |                 </UiFormItem>
20 |             </Field>
21 |             <div class="mt-6">
22 |                 <UiButton variant="destructive" type="submit" :disabled="loadingReport">Report
23 |                 </UiButton>
24 |             </div>
25 |         </form>
26 |     </div>
27 | </template>
28 | 
29 | <script lang="ts" setup>
30 | import { z } from "zod";
31 | import { TypeMessage } from "~/types";
32 | import type { Timeline } from "~/types/Timeline";
33 | import type { User } from "~/types/User";
34 | 
35 | const { timeline_id } = useRoute().params
36 | const { getReportReasons } = usePreferencesService()
37 | const { report } = useReport()
38 | const { useAuthUser } = useAuth()
39 | const { getTimelineById } = useTimelineService()
40 | const { showMessage } = useMessage()
41 | const user = useAuthUser().value as User
42 | const timeline = ref<Timeline>()
43 | const reasons: [string] = getReportReasons()
44 | const loadingReport = ref(false)
45 | 
46 | const { handleSubmit } = useForm({
47 |     validationSchema: toTypedSchema(
48 |         z.object({
49 |             reason: z.enum(reasons, {
50 |                 required_error: "You need to select a violation type.",
51 |             }),
52 | 
53 |         })
54 |     ),
55 | });
56 | 
57 | const onSubmit = handleSubmit(async (values) => {
58 |     loadingReport.value = true
59 |     await report(
60 |         user.user_id,
61 |         timeline.value?.user.user_id ?? "",
62 |         values['reason'],
63 |         String(timeline.value?.timeline_id ?? ""),
64 |         timeline.value?.text_content ?? ""
65 |     )
66 |         .then(() => {
67 |             showMessage(`Report message has been sent with reason flag ${values['reason']}`, TypeMessage.success)
68 |             setTimeout(() => {
69 |                 navigateTo('/')
70 |             }, 3000)
71 |         })
72 |         .catch((error) => {
73 |             showMessage(error, TypeMessage.destructive)
74 |         })
75 |         .finally(() => {
76 |             loadingReport.value = false
77 |         })
78 | });
79 | 
80 | onBeforeMount(async () => {
81 |     await getTimelineById(Number(timeline_id))
82 |         .then((result) => {
83 |             const data = result as Timeline
84 |             timeline.value = data
85 |         })
86 |         .catch((error) => {
87 |             console.log(error)
88 |         })
89 |         .finally(() => {
90 | 
91 |         })
92 | })
93 | 
94 | </script>
95 | 
96 | <style></style>


--------------------------------------------------------------------------------
/pages/user-agreement.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="flex flex-col h-full overflow-auto gap-5 p-6">
  3 |         <h2 class="text-3xl">End-User License Agreement (EULA) of Netijen
  4 |             Curhat</h2>
  5 |         <p>This End-User License Agreement ("EULA") is a
  6 |             legal agreement between you and Netijen Curhat
  7 |         </p>
  8 |         <p>This EULA agreement governs your acquisition
  9 |             and use of our Netijen Curhat software
 10 |             ("Software") directly from Netijen Curhat or
 11 |             indirectly through a Netijen Curhat authorized
 12 |             reseller or distributor (a "Reseller").</p>
 13 |         <p>Please read this EULA agreement carefully
 14 |             before completing the installation process and
 15 |             using the Netijen Curhat software. It provides a
 16 |             license to use the Netijen Curhat software and
 17 |             contains warranty information and liability
 18 |             disclaimers.</p>
 19 |         <p>If you register for a free trial of the Netijen
 20 |             Curhat software, this EULA agreement will also
 21 |             govern that trial. By clicking "accept" or
 22 |             installing and/or using the Netijen Curhat
 23 |             software, you are confirming your acceptance of
 24 |             the Software and agreeing to become bound by the
 25 |             terms of this EULA agreement.</p>
 26 |         <p>If you are entering into this EULA agreement on
 27 |             behalf of a company or other legal entity, you
 28 |             represent that you have the authority to bind
 29 |             such entity and its affiliates to these terms
 30 |             and conditions. If you do not have such
 31 |             authority or if you do not agree with the terms
 32 |             and conditions of this EULA agreement, do not
 33 |             install or use the Software, and you must not
 34 |             accept this EULA agreement.</p>
 35 |         <p>This EULA agreement shall apply only to the
 36 |             Software supplied by Netijen Curhat herewith
 37 |             regardless of whether other software is referred
 38 |             to or described herein. The terms also apply to
 39 |             any Netijen Curhat updates, supplements,
 40 |             Internet-based services, and support services
 41 |             for the Software, unless other terms accompany
 42 |             those items on delivery. If so, those terms
 43 |             apply.</p>
 44 |         <h3 class="text-2xl">License Grant</h3>
 45 |         <p>Netijen Curhat hereby grants you a personal,
 46 |             non-transferable, non-exclusive licence to use
 47 |             the Netijen Curhat software on your devices in
 48 |             accordance with the terms of this EULA
 49 |             agreement.</p>
 50 |         <p>You are permitted to load the Netijen Curhat
 51 |             software (for example a PC, laptop, mobile or
 52 |             tablet) under your control. You are responsible
 53 |             for ensuring your device meets the minimum
 54 |             requirements of the Netijen Curhat software.</p>
 55 |         <p>You are not permitted to:</p>
 56 |         <ul>
 57 |             <li>Edit, alter, modify, adapt, translate or
 58 |                 otherwise change the whole or any part of the
 59 |                 Software nor permit the whole or any part of
 60 |                 the Software to be combined with or become
 61 |                 incorporated in any other software, nor
 62 |                 decompile, disassemble or reverse engineer the
 63 |                 Software or attempt to do any such things</li>
 64 |             <li>Reproduce, copy, distribute, resell or
 65 |                 otherwise use the Software for any commercial
 66 |                 purpose</li>
 67 |             <li>Allow any third party to use the Software on
 68 |                 behalf of or for the benefit of any third
 69 |                 party</li>
 70 |             <li>Use the Software in any way which breaches
 71 |                 any applicable local, national or
 72 |                 international law</li>
 73 |             <li>use the Software for any purpose that
 74 |                 Netijen Curhat considers is a breach of this
 75 |                 EULA agreement</li>
 76 |         </ul>
 77 |         <h3 class="text-2xl">Intellectual Property and Ownership</h3>
 78 |         <p>Netijen Curhat shall at all times retain
 79 |             ownership of the Software as originally
 80 |             downloaded by you and all subsequent downloads
 81 |             of the Software by you. The Software (and the
 82 |             copyright, and other intellectual property
 83 |             rights of whatever nature in the Software,
 84 |             including any modifications made thereto) are
 85 |             and shall remain the property of Netijen Curhat.
 86 |         </p>
 87 |         <p>Netijen Curhat reserves the right to grant
 88 |             licences to use the Software to third parties.
 89 |         </p>
 90 |         <h3 class="text-2xl">Termination</h3>
 91 |         <p>This EULA agreement is effective from the date
 92 |             you first use the Software and shall continue
 93 |             until terminated. You may terminate it at any
 94 |             time upon written notice to Netijen Curhat.</p>
 95 |         <p>It will also terminate immediately if you fail
 96 |             to comply with any term of this EULA agreement.
 97 |             Upon such termination, the licenses granted by
 98 |             this EULA agreement will immediately terminate
 99 |             and you agree to stop all access and use of the
100 |             Software. The provisions that by their nature
101 |             continue and survive will survive any
102 |             termination of this EULA agreement.</p>
103 |         <h3 class="text-2xl">Governing Law</h3>
104 |         <p>This EULA agreement, and any dispute arising
105 |             out of or in connection with this EULA
106 |             agreement, shall be governed by and construed in
107 |             accordance with the laws of <span class="italic">id</span>.</p>
108 |     </div>
109 | </template>
110 | 
111 | <script lang="ts" setup>
112 | 
113 | </script>


--------------------------------------------------------------------------------
/public/apple-touch-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leonurium/nimue-web/5deb67f76e2bc0da70f47e7bedbca4bf886a20c3/public/apple-touch-icon-180x180.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leonurium/nimue-web/5deb67f76e2bc0da70f47e7bedbca4bf886a20c3/public/favicon.ico


--------------------------------------------------------------------------------
/public/firebase-messaging-sw.js:
--------------------------------------------------------------------------------
 1 | // firebase-messaging-sw.js
 2 | 
 3 | // Give the service worker access to Firebase Messaging.
 4 | // Note that you can only use Firebase Messaging here. Other Firebase libraries
 5 | // are not available in the service worker.
 6 | importScripts("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js");
 7 | importScripts(
 8 |     "https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"
 9 | );
10 | 
11 | // Initialize the Firebase app in the service worker by passing in
12 | // your app's Firebase config object.
13 | // https://firebase.google.com/docs/web/setup#config-object
14 | firebase.initializeApp({
15 |     apiKey: "AIzaSyAU-KlK94rJyP6a_A3lRhmLgGA0qq-ru4c",
16 |     authDomain: "sunib-curhat.firebaseapp.com",
17 |     databaseURL: "https://sunib-curhat.firebaseio.com",
18 |     projectId: "sunib-curhat",
19 |     storageBucket: "sunib-curhat.appspot.com",
20 |     messagingSenderId: "1054913270809",
21 |     appId: "1:1054913270809:web:bd182360399e82b7f6c688",
22 |     measurementId: "G-RE72N4NJFJ"
23 | });
24 | 
25 | // Retrieve an instance of Firebase Messaging so that it can handle background
26 | // messages.
27 | const messaging = firebase.messaging();
28 | 
29 | messaging.onBackgroundMessage(function (payload) {
30 |     console.log('[firebase-messaging-sw.js] Received background message ', payload);
31 |     const notificationTitle = payload.notification.title;
32 |     const notificationOptions = {
33 |         body: payload.notification.body,
34 |         icon: '/favicon.ico'
35 |     };
36 | 
37 |     self.registration.showNotification(notificationTitle, notificationOptions);
38 | });


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="1080" height="1080" viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_13_15)">
 3 | <circle cx="540" cy="540" r="540" fill="#008DDD"/>
 4 | <path d="M0 540H540V1080H100C44.7715 1080 0 1035.23 0 980V540Z" fill="#008DDD"/>
 5 | <path d="M375.5 397.8H421.1C419.7 385.4 416.3 374.4 410.9 364.8C405.5 355.2 398.6 347.2 390.2 340.8C382 334.2 372.6 329.2 362 325.8C351.6 322.4 340.5 320.7 328.7 320.7C312.3 320.7 297.5 323.6 284.3 329.4C271.3 335.2 260.3 343.2 251.3 353.4C242.3 363.6 235.4 375.6 230.6 389.4C225.8 403 223.4 417.8 223.4 433.8C223.4 449.4 225.8 464 230.6 477.6C235.4 491 242.3 502.7 251.3 512.7C260.3 522.7 271.3 530.6 284.3 536.4C297.5 542 312.3 544.8 328.7 544.8C341.9 544.8 354 542.8 365 538.8C376 534.8 385.6 529 393.8 521.4C402 513.8 408.6 504.6 413.6 493.8C418.6 483 421.7 470.9 422.9 457.5H377.3C375.5 471.9 370.5 483.5 362.3 492.3C354.3 501.1 343.1 505.5 328.7 505.5C318.1 505.5 309.1 503.5 301.7 499.5C294.3 495.3 288.3 489.8 283.7 483C279.1 476.2 275.7 468.6 273.5 460.2C271.5 451.6 270.5 442.8 270.5 433.8C270.5 424.4 271.5 415.3 273.5 406.5C275.7 397.7 279.1 389.9 283.7 383.1C288.3 376.1 294.3 370.6 301.7 366.6C309.1 362.4 318.1 360.3 328.7 360.3C334.5 360.3 340 361.3 345.2 363.3C350.6 365.1 355.4 367.7 359.6 371.1C363.8 374.5 367.3 378.5 370.1 383.1C372.9 387.5 374.7 392.4 375.5 397.8ZM633.863 459V325.8H586.763V459C586.763 475 583.563 486.8 577.163 494.4C570.763 501.8 559.163 505.5 542.363 505.5C532.763 505.5 525.063 504.2 519.263 501.6C513.663 498.8 509.263 495.3 506.063 491.1C502.863 486.7 500.763 481.7 499.763 476.1C498.763 470.5 498.263 464.8 498.263 459V325.8H451.163V459C451.163 488.2 459.063 509.8 474.863 523.8C490.863 537.8 513.363 544.8 542.363 544.8C570.963 544.8 593.363 537.8 609.563 523.8C625.763 509.6 633.863 488 633.863 459ZM718.527 422.7V362.4H770.127C780.927 362.4 789.027 364.8 794.427 369.6C799.827 374.2 802.527 381.7 802.527 392.1C802.527 402.9 799.827 410.7 794.427 415.5C789.027 420.3 780.927 422.7 770.127 422.7H718.527ZM671.427 325.8V540H718.527V456.3H765.627C777.427 456.3 785.927 458.9 791.127 464.1C796.327 469.3 799.727 477.5 801.327 488.7C802.527 497.3 803.427 506.3 804.027 515.7C804.627 525.1 806.227 533.2 808.827 540H855.927C853.727 537 852.027 533.4 850.827 529.2C849.827 524.8 849.027 520.2 848.427 515.4C848.027 510.6 847.727 505.9 847.527 501.3C847.327 496.7 847.127 492.7 846.927 489.3C846.527 483.9 845.727 478.5 844.527 473.1C843.527 467.7 841.827 462.8 839.427 458.4C837.027 453.8 833.927 449.9 830.127 446.7C826.327 443.3 821.527 440.8 815.727 439.2V438.6C827.727 433.8 836.327 426.8 841.527 417.6C846.927 408.4 849.627 397.5 849.627 384.9C849.627 376.7 848.127 369.1 845.127 362.1C842.327 354.9 838.127 348.6 832.527 343.2C827.127 337.8 820.527 333.6 812.727 330.6C805.127 327.4 796.527 325.8 786.927 325.8H671.427ZM232.7 599.8V814H279.8V721.6H366.5V814H413.6V599.8H366.5V682H279.8V599.8H232.7ZM506.063 731.2L533.963 652.6H534.563L561.563 731.2H506.063ZM510.563 599.8L429.563 814H476.963L493.763 766.3H573.863L590.063 814H638.963L558.863 599.8H510.563ZM674.295 639.4V814H721.395V639.4H785.595V599.8H610.095V639.4H674.295Z" fill="white"/>
 6 | <circle cx="796" cy="789" r="25" fill="white"/>
 7 | <rect x="771" y="789" width="25" height="25" fill="white"/>
 8 | </g>
 9 | <defs>
10 | <clipPath id="clip0_13_15">
11 | <rect width="1080" height="1080" fill="white"/>
12 | </clipPath>
13 | </defs>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/public/maskable-icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leonurium/nimue-web/5deb67f76e2bc0da70f47e7bedbca4bf886a20c3/public/maskable-icon-512x512.png


--------------------------------------------------------------------------------
/public/pwa-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leonurium/nimue-web/5deb67f76e2bc0da70f47e7bedbca4bf886a20c3/public/pwa-192x192.png


--------------------------------------------------------------------------------
/public/pwa-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leonurium/nimue-web/5deb67f76e2bc0da70f47e7bedbca4bf886a20c3/public/pwa-512x512.png


--------------------------------------------------------------------------------
/public/pwa-64x64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leonurium/nimue-web/5deb67f76e2bc0da70f47e7bedbca4bf886a20c3/public/pwa-64x64.png


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | const { fontFamily } = require("tailwindcss/defaultTheme");
  2 | 
  3 | /**@type {import('tailwindcss').Config} */
  4 | module.exports = {
  5 |   darkMode: "class",
  6 |   theme: {
  7 |     extend: {
  8 |       container: {
  9 |         center: true,
 10 |         padding: {
 11 |           DEFAULT: "1rem",
 12 |           sm: "2rem",
 13 |           lg: "4rem",
 14 |         },
 15 |         screens: {
 16 |           "2xl": "1440px",
 17 |         },
 18 |       },
 19 |       fontFamily: {
 20 |         sans: ["Inter var", "Inter", ...fontFamily.sans],
 21 |       },
 22 |       borderRadius: {
 23 |         lg: "var(--radius)",
 24 |         md: "calc(var(--radius) - 2px)",
 25 |         sm: "calc(var(--radius) - 4px)",
 26 |       },
 27 |       keyframes: {
 28 |         wiggle: {
 29 |           '0%, 100%': { transform: 'rotate(-3deg)' },
 30 |           '50%': { transform: 'rotate(3deg)' },
 31 |         },
 32 |         "accordion-down": {
 33 |           from: { height: "0px" },
 34 |           to: { height: "var(--radix-accordion-content-height)" },
 35 |         },
 36 |         "accordion-up": {
 37 |           from: { height: "var(--radix-accordion-content-height)" },
 38 |           to: { height: "0px" },
 39 |         },
 40 |         fadeIn: {
 41 |           from: { opacity: "0" },
 42 |           to: { opacity: "1" },
 43 |         },
 44 |         fadeOut: {
 45 |           from: { opacity: "1" },
 46 |           to: { opacity: "0" },
 47 |         },
 48 |         "collapse-down": {
 49 |           from: { height: "0px" },
 50 |           to: { height: "var(--radix-collapsible-content-height)" },
 51 |         },
 52 |         "collapse-up": {
 53 |           from: { height: "var(--radix-collapsible-content-height)" },
 54 |           to: { height: "0px" },
 55 |         },
 56 |       },
 57 |       animation: {
 58 |         wiggle: 'wiggle 1s ease-in-out infinite',
 59 |         "accordion-down": "accordion-down 0.2s ease-out",
 60 |         "accordion-up": "accordion-up 0.2s ease-out",
 61 |         fadeIn: "fadeIn 0.2s ease-out",
 62 |         fadeOut: "fadeOut 0.2s ease-out",
 63 |         "collapse-down": "collapse-down 0.2s ease-out",
 64 |         "collapse-up": "collapse-up 0.2s ease-out",
 65 |       },
 66 |       colors: {
 67 |         border: "hsl(var(--border))",
 68 |         input: "hsl(var(--input))",
 69 |         ring: "hsl(var(--ring))",
 70 |         background: "hsl(var(--background))",
 71 |         foreground: "hsl(var(--foreground))",
 72 |         primary: {
 73 |           DEFAULT: "hsl(var(--primary))",
 74 |           foreground: "hsl(var(--primary-foreground))",
 75 |         },
 76 |         secondary: {
 77 |           DEFAULT: "hsl(var(--secondary))",
 78 |           foreground: "hsl(var(--secondary-foreground))",
 79 |         },
 80 |         destructive: {
 81 |           DEFAULT: "hsl(var(--destructive))",
 82 |           foreground: "hsl(var(--destructive-foreground))",
 83 |         },
 84 |         muted: {
 85 |           DEFAULT: "hsl(var(--muted))",
 86 |           foreground: "hsl(var(--muted-foreground))",
 87 |         },
 88 |         accent: {
 89 |           DEFAULT: "hsl(var(--accent))",
 90 |           foreground: "hsl(var(--accent-foreground))",
 91 |         },
 92 |         popover: {
 93 |           DEFAULT: "hsl(var(--popover))",
 94 |           foreground: "hsl(var(--popover-foreground))",
 95 |         },
 96 |         card: {
 97 |           DEFAULT: "hsl(var(--card))",
 98 |           foreground: "hsl(var(--card-foreground))",
 99 |         },
100 |       },
101 |     },
102 |   },
103 |   plugins: [require("tailwindcss-animate")],
104 | };
105 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/types/Chat.ts:
--------------------------------------------------------------------------------
 1 | import type { TextContentChat, ImageContentChat, AudioContentChat } from "./ContentChat";
 2 | import type { User } from "./User"
 3 | 
 4 | export interface Chat {
 5 |     chat_id: string;
 6 |     conversation_id: string;
 7 |     from: User;
 8 |     to: User;
 9 |     content?: TextContentChat | ImageContentChat | AudioContentChat | undefined | null ;
10 |     is_typing?: boolean;
11 |     is_read?: boolean;
12 |     created_at: number;
13 | 
14 |     //FE Only
15 |     is_new_chat?: boolean
16 | }


--------------------------------------------------------------------------------
/types/ContentChat.ts:
--------------------------------------------------------------------------------
 1 | export interface TextContentChat {
 2 |     type: 'text';
 3 |     text: string;
 4 | }
 5 | 
 6 | export interface ImageContentChat {
 7 |     type: 'image';
 8 |     url_image: string;
 9 |     meta: ImageMetaContentChat;
10 | }
11 | 
12 | export interface ImageMetaContentChat {
13 |     width: number;
14 |     height: number;
15 | }
16 | 
17 | export interface AudioContentChat {
18 |     type: 'audio';
19 |     url_audio: string;
20 | }


--------------------------------------------------------------------------------
/types/Conversation.ts:
--------------------------------------------------------------------------------
 1 | import type { Chat } from "./Chat";
 2 | import type { User } from "./User";
 3 | 
 4 | export interface Conversation {
 5 |     conversation_id: string;
 6 |     users: User[]
 7 |     chats: Chat[]
 8 |     last_chat?: string
 9 |     last_chat_timestamp?: number
10 |     blocked_by?: string
11 | }


--------------------------------------------------------------------------------
/types/cloudinary.ts:
--------------------------------------------------------------------------------
1 | export interface CloudinaryUploadResponse {
2 |     _value: {
3 |         event: string;
4 |         info: {
5 |             secure_url: string;
6 |         }
7 |     }
8 | }


--------------------------------------------------------------------------------
/types/comment.ts:
--------------------------------------------------------------------------------
 1 | export interface CommentsData {
 2 |     page:       number;
 3 |     next_page:  number;
 4 |     comments:   Comment[];
 5 | }
 6 | 
 7 | export interface Comment {
 8 |     comment_id:     number;
 9 |     timeline_id:    number;
10 |     user_id:        string;
11 |     device_id:      string;
12 |     name:           string;
13 |     text_content:   string;
14 |     avatar:         string;
15 |     timed:          string;
16 |     created_at:     string;
17 |     updated_at:     string;
18 | }


--------------------------------------------------------------------------------
/types/index.ts:
--------------------------------------------------------------------------------
 1 | import type { User } from "./User";
 2 | import type { Timeline, TimelinesData } from "./Timeline"
 3 | import type { CommentsData } from "./Comment";
 4 | import type { Preferences } from "./Preferences";
 5 | import type { Conversation } from "./Conversation";
 6 | import type { Chat } from "./Chat";
 7 | 
 8 | 
 9 | type BaseDataResponse =
10 |     Timeline |
11 |     TimelinesData |
12 |     CommentsData |
13 |     Preferences |
14 |     BaseLoginData |
15 |     RefreshTokenData |
16 |     User |
17 |     User[] |
18 |     null
19 | 
20 | export interface BaseResponse {
21 |     success: boolean;
22 |     data: BaseDataResponse;
23 |     message: string;
24 | }
25 | 
26 | export interface BaseLoginData {
27 |     refresh_token: string;
28 |     access_token: string;
29 |     user:         User;
30 | }
31 | 
32 | export interface RefreshTokenData {
33 |     access_token: string;
34 | }
35 | 
36 | export interface RequestConversations {
37 |     user_id: string;
38 |     page: number;
39 |     item_per_page: number;
40 | }
41 | 
42 | export interface RequestChats {
43 |     conversation_id: string
44 |     page: number
45 |     item_per_page: number
46 | }
47 | 
48 | export interface ResponseConversations {
49 |     page: number;
50 |     next_page: number | null;
51 |     conversations: Conversation[];
52 | }
53 | 
54 | export interface ResponseChats {
55 |     page: number;
56 |     next_page: number | null;
57 |     chats: Chat[]
58 | }
59 | 
60 | export enum TypeMessage {
61 |     action = 'action',
62 |     success = 'success',
63 |     info = 'info',
64 |     warning = 'warning',
65 |     destructive = 'destructive'
66 | }


--------------------------------------------------------------------------------
/types/preferences.ts:
--------------------------------------------------------------------------------
 1 | export interface Preferences {
 2 |     app_name?:                   string;
 3 |     version?:                    string;
 4 |     url_update_version?:         string;
 5 |     version_ios?:                string;
 6 |     version_android?:            string;
 7 |     url_update_version_ios?:     string;
 8 |     url_update_version_android?: string;
 9 |     reply_emojis?:               string[];
10 |     report_reasons?:             [string];
11 |     images?:                     ImagePreferences;
12 |     urls?:                       UrlPreferences;
13 |     contacts?:                   ContactPreferences;
14 | }
15 | 
16 | export interface ImagePreferences {
17 |     image_url_login?:            string;
18 |     image_url_register?:         string;
19 |     image_url_login_lg?:         string;
20 |     image_url_register_lg?:      string;
21 |     image_url_app_store?:        string;
22 |     image_url_play_store?:       string;
23 |     image_url_app_previews?:     string[];
24 | }
25 | 
26 | export interface UrlPreferences {
27 |     socket_server?:     string;
28 |     privacy_policy?:    string;
29 |     user_agreement?:    string;
30 |     app_store?:         string;
31 |     play_store?:        string;
32 | }
33 | 
34 | export interface ContactPreferences {
35 |     email?:     string;
36 |     instagram?: string;
37 | }


--------------------------------------------------------------------------------
/types/timeline.ts:
--------------------------------------------------------------------------------
 1 | import type { User } from "./User";
 2 | 
 3 | export interface TimelinesData {
 4 |     page:      number;
 5 |     next_page: number;
 6 |     timelines: Timeline[];
 7 | }
 8 | 
 9 | export interface Timeline {
10 |     timeline_id:    number;
11 |     user:           User;
12 |     text_content:   string;
13 |     created_at:     string;
14 |     updated_at:     string;
15 |     total_likes:    number;
16 |     total_comments: number;
17 |     total_shares:   number;
18 |     is_liked?:      boolean;
19 |     is_ads:         boolean;
20 |     ads_type?:      string;
21 |     ad_unit_id?:    string;
22 | }


--------------------------------------------------------------------------------
/types/user.ts:
--------------------------------------------------------------------------------
1 | export interface User {
2 |     user_id:    string;
3 |     device_id:  string;
4 |     email?:     string;
5 |     name:       string;
6 |     avatar:     string;
7 |     is_online?: boolean;
8 |     fcm_token?: string;
9 | }


--------------------------------------------------------------------------------
/ui-thing.config.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   theme: "blue",
 3 |   tailwindCSSLocation: "assets/css/tailwind.css",
 4 |   tailwindConfigLocation: "tailwind.config.js",
 5 |   componentsLocation: "components/Ui",
 6 |   composablesLocation: "composables",
 7 |   utilsLocation: "utils",
 8 |   force: true,
 9 |   useDefaultFilename: true,
10 |   packageManager: "npm",
11 | };
12 | 


--------------------------------------------------------------------------------
/utils/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Conversation } from "~/types/Conversation";
 2 | import type { User } from "~/types/User";
 3 | 
 4 | export function getInitials(name: string): string {
 5 |     if (name.length > 0) {
 6 |         const words = name.split(' ');
 7 | 
 8 |         if (words.length > 0) {
 9 |             // Take the first character of each word and concatenate them
10 |             const initials = words.map(word => word[0].toUpperCase()).join('');
11 | 
12 |             return initials;
13 |         }
14 |     }
15 |     return "N";
16 | }
17 | 
18 | export function getTimeAgo(timestamp: string) {
19 |     const currentDate = new Date();
20 |     const date = new Date(timestamp);
21 | 
22 |     const timeDifference = currentDate.getTime() - date.getTime();
23 |     const seconds = Math.floor(timeDifference / 1000);
24 |     const minutes = Math.floor(seconds / 60);
25 |     const hours = Math.floor(minutes / 60);
26 |     const days = Math.floor(hours / 24);
27 |     const weeks = Math.floor(days / 7);
28 |     const months = Math.floor(days / 30); // Approximation, may vary
29 |     const years = Math.floor(days / 365); // Approximation, may vary
30 | 
31 |     if (isNaN(date.getTime())) {
32 |         // Handle invalid timestamp
33 |         return 'Invalid timestamp';
34 |     }
35 | 
36 |     if (years > 0) {
37 |         return `${years} year${years > 1 ? 's' : ''} ago`;
38 |     } else if (months > 0) {
39 |         return `${months} month${months > 1 ? 's' : ''} ago`;
40 |     } else if (weeks > 0) {
41 |         return `${weeks} week${weeks > 1 ? 's' : ''} ago`;
42 |     } else if (days > 0) {
43 |         return `${days} day${days > 1 ? 's' : ''} ago`;
44 |     } else if (hours > 0) {
45 |         return `${hours} hour${hours > 1 ? 's' : ''} ago`;
46 |     } else if (minutes > 0) {
47 |         return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
48 |     } else {
49 |         return 'Just now';
50 |     }
51 | }
52 | 
53 | export function generateRandomString(length: number): string {
54 |     const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
55 |     let result = '';
56 | 
57 |     for (let i = 0; i < length; i++) {
58 |         const randomIndex = Math.floor(Math.random() * characters.length);
59 |         result += characters.charAt(randomIndex);
60 |     }
61 | 
62 |     return result;
63 | }
64 | 
65 | export function convoMethod(conversation: Conversation | null | undefined) {
66 |     return {
67 |         ...conversation,
68 |         me(): User | undefined {
69 |             const { useAuthUser } = useAuth()
70 |             const user = useAuthUser().value as User
71 |             return conversation?.users.find(u => u.user_id === user.user_id);
72 |         },
73 |         them(): User[] {
74 |             const { useAuthUser } = useAuth()
75 |             const user = useAuthUser().value as User
76 |             return conversation?.users.filter(u => u.user_id !== user.user_id) ?? [];
77 |         },
78 |         isBlocked(): boolean {
79 |             return !!conversation?.blocked_by;
80 |         },
81 |         isBlockedByMe(): boolean {
82 |             const { useAuthUser } = useAuth()
83 |             const user = useAuthUser().value as User
84 | 
85 |             if (!conversation?.blocked_by) {
86 |                 return false;
87 |             }
88 |             return conversation.blocked_by === user.user_id;
89 |         }
90 |     };
91 | }


--------------------------------------------------------------------------------
/utils/shared.styles.ts:
--------------------------------------------------------------------------------
 1 | // Add here because button styles are used in several components
 2 | export const buttonStyles = tv({
 3 |   base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 4 |   variants: {
 5 |     variant: {
 6 |       default: "bg-primary text-primary-foreground hover:bg-primary/90",
 7 |       destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
 8 |       outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
 9 |       secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
10 |       ghost: "hover:bg-accent hover:text-accent-foreground",
11 |       link: "text-primary underline-offset-4 hover:underline",
12 |     },
13 |     size: {
14 |       default: "h-10 px-4 py-2",
15 |       sm: "h-9 rounded-md px-3",
16 |       lg: "h-11 rounded-md px-8",
17 |       "icon-sm": "h-9 w-9",
18 |       icon: "h-10 w-10",
19 |     },
20 |     disabled: {
21 |       true: "pointer-events-none opacity-50",
22 |     },
23 |   },
24 |   defaultVariants: {
25 |     variant: "default",
26 |     size: "default",
27 |   },
28 | });
29 | 


--------------------------------------------------------------------------------