next: Cleanup

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/dialogs/remove-project-dialog.svelte

@@ -1,4 +1,3 @@
-<!-- filepath: /Users/blake/Projects/Exceptionless/Exceptionless/src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/confirm-project-delete-AlertDialog.svelte -->
 <script lang="ts">
     import * as AlertDialog from '$comp/ui/alert-dialog';
     import { buttonVariants } from '$comp/ui/button';

src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/dialogs/reset-project-data-dialog.svelte

@@ -1,4 +1,3 @@
-<!-- filepath: /Users/blake/Projects/Exceptionless/Exceptionless/src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/confirm-project-delete-AlertDialog.svelte -->
 <script lang="ts">
     import * as AlertDialog from '$comp/ui/alert-dialog';
     import { buttonVariants } from '$comp/ui/button';

src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/table/options.svelte.ts

@@ -62,7 +62,7 @@ export function getColumns<TProject extends ViewProject>(mode: GetProjectsMode =
         header: 'Actions',
         id: 'actions',
         meta: {
-            class: 'w-32'
+            class: 'w-16'
         }
     });
 

src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/table/project-actions-cell.svelte

@@ -1,4 +1,3 @@
-<!-- filepath: /Users/blake/Projects/Exceptionless/Exceptionless/src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/project-actions.svelte -->
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { Button } from '$comp/ui/button';

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/copy-to-clipboard-button.svelte

@@ -3,6 +3,7 @@
     import type { VariantProps } from 'tailwind-variants';
 
     import { Button, type ButtonProps, type buttonVariants } from '$comp/ui/button';
+    import { UseClipboard } from '$lib/hooks/use-clipboard.svelte';
     import ClipboardCopy from 'lucide-svelte/icons/clipboard-copy';
     import { toast } from 'svelte-sonner';
 
@@ -14,11 +15,13 @@
 
     let { children, size = 'icon', title = 'Copy to Clipboard', value }: Props = $props();
 
+    const clipboard = new UseClipboard();
+
     async function copyToClipboard() {
-        try {
-            await navigator.clipboard.writeText(value ?? '');
+        await clipboard.copy(value ?? '');
+        if (clipboard.copied) {
             toast.success('Copy to clipboard succeeded');
-        } catch {
+        } else {
             toast.error('Copy to clipboard failed');
         }
     }

src/Exceptionless.Web/ClientApp/src/lib/hooks/use-clipboard.svelte.ts

@@ -0,0 +1,47 @@
+type Options = {
+    /** The time before the copied status is reset. */
+    delay: number;
+};
+
+export class UseClipboard {
+    get copied() {
+        return this.#copiedStatus === 'success';
+    }
+    get status() {
+        return this.#copiedStatus;
+    }
+    #copiedStatus = $state<'failure' | 'success'>();
+
+    private delay: number;
+
+    private timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+
+    constructor({ delay = 500 }: Partial<Options> = {}) {
+        this.delay = delay;
+    }
+
+    async copy(text: string) {
+        if (this.timeout) {
+            this.#copiedStatus = undefined;
+            clearTimeout(this.timeout);
+        }
+
+        try {
+            await navigator.clipboard.writeText(text);
+
+            this.#copiedStatus = 'success';
+
+            this.timeout = setTimeout(() => {
+                this.#copiedStatus = undefined;
+            }, this.delay);
+        } catch {
+            this.#copiedStatus = 'failure';
+
+            this.timeout = setTimeout(() => {
+                this.#copiedStatus = undefined;
+            }, this.delay);
+        }
+
+        return this.#copiedStatus;
+    }
+}

src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/+layout.svelte

@@ -31,7 +31,10 @@
 
 <Card.Root>
     <Card.Header>
-        <Card.Title class="text-2xl" level={2}>Settings</Card.Title>
+        <Card.Title class="text-2xl" level={2}
+            >{#if projectResponse.isSuccess}{projectResponse.data.name}
+            {/if} Settings</Card.Title
+        >
         <Card.Description>Manage your project settings and integrations.</Card.Description>
     </Card.Header>
     <Separator class="mx-6 my-6 w-auto" />

src/Exceptionless.Web/ClientApp/src/routes/(app)/project/add/+page.svelte

@@ -32,7 +32,7 @@
             toast.dismiss(toastId);
             try {
                 await createProject.mutateAsync(form.data);
-                toastId = toast.success('Project created successfully');
+                toastId = toast.success('Project added successfully');
                 await goto('/next/project/configure');
 
                 // HACK: This is to prevent sveltekit from stealing focus

src/Exceptionless.Web/ClientApp/src/routes/(app)/project/list/+page.svelte

@@ -39,19 +39,17 @@
         }
     }
 
-    const projectsQuery = $derived(
-        getOrganizationProjectsQuery({
-            params: context.parameters,
-            route: {
-                get organizationId() {
-                    return organization.current;
-                }
+    const projectsQuery = getOrganizationProjectsQuery({
+        params: context.parameters,
+        route: {
+            get organizationId() {
+                return organization.current;
             }
-        })
-    );
+        }
+    });
 
     watch(
-        () => projectsQuery.isSuccess,
+        () => projectsQuery.dataUpdatedAt,
         () => {
             if (projectsQuery.isSuccess) {
                 context.data = projectsQuery.data.data || [];