refactor: Consolidate Frontent Components and Cleanup

frontend/src/lib/api/client.ts

@@ -151,6 +151,13 @@ export class ApiClient {
     });
   }
 
+  async put<T>(endpoint: string, data?: unknown): Promise<T> {
+    return this.request<T>(endpoint, {
+      method: "PUT",
+      body: data ? JSON.stringify(data) : undefined
+    });
+  }
+
   async delete<T>(endpoint: string, data?: unknown): Promise<T> {
     return this.request<T>(endpoint, {
       method: "DELETE",

frontend/src/lib/api/links.ts

@@ -1,4 +1,5 @@
 import { apiClient } from "./client";
+import { fetchUrlTitle } from "./metadata";
 import type {
   Link,
   CreateLinkRequest,
@@ -90,10 +91,7 @@ export const linksApi = {
    * @throws ApiError if link not found (404) or validation fails (400)
    */
   async update(id: string, data: UpdateLinkRequest): Promise<Link> {
-    return apiClient.request<Link>(`/api/links/${id}`, {
-      method: "PUT",
-      body: JSON.stringify(data)
-    });
+    return apiClient.put<Link>(`/api/links/${id}`, data);
   },
 
   /**
@@ -138,6 +136,15 @@ export const linksApi = {
 
   async importBatch(links: ImportLinkRow[]): Promise<ImportBatchResult> {
     return apiClient.post<ImportBatchResult>("/api/links/import", { links });
+  },
+
+  /**
+   * Fetch the title of a destination URL
+   * @param url - The URL to fetch the title from
+   * @returns Page title or null if unable to fetch
+   */
+  async fetchUrlTitle(url: string): Promise<string | null> {
+    return fetchUrlTitle(url);
   }
 };
 

frontend/src/lib/utils/url-title.ts → frontend/src/lib/api/metadata.ts

@@ -1,4 +1,4 @@
-import { apiClient } from "$lib/api/client";
+import { apiClient } from "./client";
 
 interface FetchTitleResponse {
   title: string | null;
@@ -32,22 +32,3 @@ export async function fetchUrlTitle(url: string): Promise<string | null> {
     return null;
   }
 }
-
-/**
- * Debounce function to limit how often a function is called
- * @param func - The function to debounce
- * @param delay - Delay in milliseconds
- * @returns Debounced function
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function debounce<T extends (...args: any[]) => any>(
-  func: T,
-  delay: number
-): (...args: Parameters<T>) => void {
-  let timeoutId: ReturnType<typeof setTimeout>;
-
-  return (...args: Parameters<T>) => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => func(...args), delay);
-  };
-}

frontend/src/lib/components/LinkModal.svelte

@@ -8,7 +8,7 @@
     UsageResponse,
     UtmParams
   } from "$lib/types/api";
-  import { debounce, fetchUrlTitle } from "$lib/utils/url-title";
+  import { debounce } from "$lib/utils/helpers";
   import { createEventDispatcher, onMount } from "svelte";
 
   interface Props {
@@ -295,7 +295,7 @@
     isFetchingTitle = true;
 
     try {
-      const fetchedTitle = await fetchUrlTitle(url.trim());
+      const fetchedTitle = await linksApi.fetchUrlTitle(url.trim());
       // Only set the title if user hasn't entered one and we got a valid title
       if (!hasUserEnteredTitle && fetchedTitle) {
         title = fetchedTitle;

frontend/src/lib/utils/helpers.ts

@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+/**
+ * Debounce function to limit how often a function is called
+ * @param func - The function to debounce
+ * @param delay - Delay in milliseconds
+ * @returns Debounced function
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout>;
+
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func(...args), delay);
+  };
+}