@finema/finework-layer 2.0.15 → 2.0.17

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [2.0.17](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/2.0.16...2.0.17) (2026-07-31)
+
+## [2.0.16](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/2.0.15...2.0.16) (2026-07-31)
+
 ## [2.0.15](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/2.0.14...2.0.15) (2026-07-27)
 
 ## [2.0.14](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/2.0.13...2.0.14) (2026-07-22)

package/app/components/Bookmark/BookmarkButton.vue

@@ -0,0 +1,267 @@
+<template>
+  <Popover
+    v-model:open="isOpen"
+    :content="{
+      align: 'end',
+      side: 'bottom',
+      sideOffset: 8,
+    }"
+  >
+    <Icon
+      name="ph:star"
+      class="size-6 cursor-pointer"
+      title="Add bookmark"
+    />
+
+    <template #content>
+      <Card class="w-[360px]">
+        <div class="mb-3 flex items-center justify-between">
+          <h3 class="text-base font-semibold">
+            Add bookmark
+          </h3>
+          <button
+            type="button"
+            class="flex size-7 cursor-pointer items-center justify-center rounded-full text-gray-400 hover:bg-gray-100"
+            @click="isOpen = false"
+          >
+            <Icon
+              name="ph:x"
+              class="size-4"
+            />
+          </button>
+        </div>
+
+        <div class="flex gap-3">
+          <div class="flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-gray-100">
+            <Loader :loading="preview.status.value.isLoading">
+              <img
+                v-if="thumbnailUrl"
+                :src="thumbnailUrl"
+                class="size-16 object-cover"
+              />
+              <Icon
+                v-else
+                name="ph:link"
+                class="size-6 text-gray-400"
+              />
+            </Loader>
+          </div>
+
+          <div class="flex flex-1 flex-col gap-2">
+            <Input
+              v-model="url"
+              placeholder="Paste the link you want to bookmark"
+              size="lg"
+              @blur="onFetchPreview"
+              @keyup.enter="onFetchPreview"
+            />
+            <Input
+              v-model="name"
+              placeholder="Name"
+              size="lg"
+            />
+            <div
+              v-if="!isCreatingFolder"
+              class="flex gap-2"
+            >
+              <Select
+                v-if="folderOptions.length > 0"
+                v-model="folderId"
+                :items="folderOptions"
+                placeholder="Folder"
+                size="lg"
+                class="flex-1"
+              />
+              <Button
+                icon="ph:folder-plus"
+                variant="outline"
+                color="neutral"
+                size="lg"
+                :class="{ 'flex-1 justify-center': folderOptions.length === 0 }"
+                :label="folderOptions.length === 0 ? 'New folder' : undefined"
+                title="New folder"
+                @click="isCreatingFolder = true"
+              />
+            </div>
+            <div
+              v-else
+              class="flex gap-2"
+            >
+              <Input
+                v-model="newFolderName"
+                placeholder="New folder name"
+                size="lg"
+                autofocus
+                @keyup.enter="onCreateFolder"
+              />
+              <Button
+                icon="ph:check"
+                size="lg"
+                :loading="folders.add.status.isLoading"
+                :disabled="!newFolderName"
+                @click="onCreateFolder"
+              />
+              <Button
+                icon="ph:x"
+                size="lg"
+                variant="outline"
+                color="neutral"
+                @click="isCreatingFolder = false; newFolderName = ''"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-4 flex justify-end gap-2">
+          <Button
+            v-if="isBookmarked"
+            variant="outline"
+            color="neutral"
+            :loading="bookmarks.delete.status.isLoading"
+            @click="onRemove"
+          >
+            Remove
+          </Button>
+          <Button
+            :loading="bookmarks.add.status.isLoading || bookmarks.update.status.isLoading"
+            :disabled="!url || !name"
+            @click="onSave"
+          >
+            Done
+          </Button>
+        </div>
+      </Card>
+    </template>
+  </Popover>
+</template>
+
+<script lang="ts" setup>
+import { useBookmarkFoldersLoader, useBookmarkPreviewLoader, useBookmarksLoader } from '#layer/app/loaders/bookmarks/bookmarks'
+
+const isOpen = ref(false)
+const url = ref('')
+const name = ref('')
+const folderId = ref<string | undefined>(undefined)
+const thumbnailUrl = ref<string | null>(null)
+const isCreatingFolder = ref(false)
+const newFolderName = ref('')
+
+const bookmarks = useBookmarksLoader()
+const folders = useBookmarkFoldersLoader()
+const preview = useBookmarkPreviewLoader()
+const noti = useNotification()
+const existing = computed(() => bookmarks.fetch.items.find((item) => item.url === url.value) || null)
+const isBookmarked = computed(() => !!existing.value)
+
+const folderOptions = computed(() => folders.fetch.items.map((folder) => ({
+  label: folder.name,
+  value: folder.id,
+})))
+
+const defaultFolderId = computed(() => folders.fetch.items[0]?.id)
+
+onMounted(() => {
+  bookmarks.fetchAll()
+  folders.fetchAll()
+})
+
+watch(isOpen, (open) => {
+  if (!open) return
+
+  isCreatingFolder.value = false
+  newFolderName.value = ''
+  url.value = ''
+  name.value = ''
+  thumbnailUrl.value = null
+  folderId.value = defaultFolderId.value
+})
+
+const onFetchPreview = () => {
+  if (!url.value) return
+
+  if (existing.value) {
+    name.value = existing.value.name
+    folderId.value = existing.value.folder_id ?? defaultFolderId.value
+    thumbnailUrl.value = existing.value.favicon_url || existing.value.image_url
+
+    return
+  }
+
+  preview.run({
+    params: {
+      url: url.value,
+    },
+  }).then(() => {
+    if (!preview.data.value) return
+    if (!name.value) name.value = preview.data.value.name
+    thumbnailUrl.value = preview.data.value.favicon_url || preview.data.value.image_url || null
+  })
+}
+
+const onCreateFolder = async () => {
+  if (!newFolderName.value) return
+
+  await folders.addRun({
+    data: {
+      name: newFolderName.value,
+    },
+  })
+
+  if (folders.add.item) {
+    folderId.value = folders.add.item.id
+    folders.fetchAll()
+  }
+
+  newFolderName.value = ''
+  isCreatingFolder.value = false
+}
+
+const onSave = async () => {
+  if (existing.value) {
+    await bookmarks.updateRun(existing.value.id, {
+      data: {
+        name: name.value,
+        folder_id: folderId.value,
+      },
+    })
+  } else {
+    await bookmarks.addRun({
+      data: {
+        url: url.value,
+        name: name.value,
+        folder_id: folderId.value,
+      },
+    })
+  }
+
+  isOpen.value = false
+}
+
+const onRemove = async () => {
+  if (!existing.value) return
+  await bookmarks.deleteRun(existing.value.id)
+  isOpen.value = false
+}
+
+useWatchTrue(() => bookmarks.add.status.isSuccess, () => {
+  bookmarks.fetchAll()
+})
+
+useWatchTrue(() => bookmarks.add.status.isError, () => {
+  noti.error({
+    title: 'Failed to add bookmark',
+    description: StringHelper.getError(bookmarks.add.status.errorData, 'Something went wrong. Please try again later.'),
+  })
+})
+
+useWatchTrue(() => bookmarks.update.status.isSuccess, () => {
+  bookmarks.fetchAll()
+})
+
+useWatchTrue(() => bookmarks.update.status.isError, () => {
+  noti.error({
+    title: 'Failed to update bookmark',
+    description: StringHelper.getError(bookmarks.update.status.errorData, 'Something went wrong. Please try again later.'),
+  })
+})
+</script>

package/app/components/Layout/Admin/index.vue

@@ -108,6 +108,7 @@
         </div>
 
         <div class="flex items-center justify-center gap-4">
+          <BookmarkButton />
           <Notifications :ui="{ content: 'mt-[64px] lg:mt-[72px]' }" />
           <DropdownMenu
             size="xl"

package/app/components/Layout/User/index.vue

@@ -17,6 +17,7 @@
           </div>
 
           <div class="flex flex-1 items-center justify-end gap-4">
+            <BookmarkButton />
             <Notifications :ui="{ content: 'mt-[80px]' }" />
             <DropdownMenu
               :items="userMenuItems"

package/app/constants/routes.ts

@@ -38,6 +38,11 @@ export const routes = {
       to: '/account/company-directory',
       icon: 'ph:building-office',
     },
+    bookmarks: {
+      label: 'Bookmarks',
+      to: '/account/bookmarks',
+      icon: 'ph:star',
+    },
   },
 
   announcements: {
@@ -276,5 +281,6 @@ export const sidebarProfile = [
   routes.account.profile,
   routes.account.myTeam,
   routes.account.companyDirectory,
+  routes.account.bookmarks,
   routes.logout,
 ]

package/app/loaders/bookmarks/bookmarks.ts

@@ -0,0 +1,53 @@
+export interface IBookmarkFolder {
+  id: string
+  name: string
+  created_at: string
+  updated_at: string
+}
+
+export interface IBookmark {
+  id: string
+  name: string
+  url: string
+  folder_id: string | null
+  favicon_url: string | null
+  image_url: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface IBookmarkPreview {
+  name: string
+  url: string
+  favicon_url: string
+  image_url: string
+  bookmark: IBookmark | null
+}
+
+export const useBookmarkFoldersLoader = defineStore('bookmarks.folders', () => {
+  const options = useRequestOptions()
+
+  return usePageLoader<IBookmarkFolder>({
+    baseURL: '/bookmark-folders',
+    getBaseRequestOptions: options.auth,
+  })
+})
+
+export const useBookmarksLoader = defineStore('bookmarks.bookmarks', () => {
+  const options = useRequestOptions()
+
+  return usePageLoader<IBookmark>({
+    baseURL: '/bookmarks',
+    getBaseRequestOptions: options.auth,
+  })
+})
+
+export const useBookmarkPreviewLoader = defineStore('bookmarks.preview', () => {
+  const options = useRequestOptions()
+
+  return useObjectLoader<IBookmarkPreview>({
+    method: 'GET',
+    url: '/bookmarks/preview',
+    getRequestOptions: options.auth,
+  })
+})

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@finema/finework-layer",
   "type": "module",
-  "version": "2.0.15",
+  "version": "2.0.17",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground -o",