add share copy input

Author: LucHeart

src/lib/components/CopyInput.svelte

@@ -9,9 +9,10 @@
     value: string;
     class?: string;
     icon?: Snippet;
+    displayValue?: string;
   }
 
-  let { value, class: className, icon }: Props = $props();
+  let { value, class: className, icon, displayValue }: Props = $props();
 
   let copied = $state(false);
 
@@ -32,7 +33,13 @@
   {#if icon}
     {@render icon()}
   {/if}
-  <input class="mx-3 grow outline-none!" type="text" bind:value readonly disabled />
+  <input
+    class="mx-3 grow outline-none!"
+    type="text"
+    value={displayValue ?? value}
+    readonly
+    disabled
+  />
   <span>
     <button
       onclick={copyToken}

src/routes/(shortcuts)/s/[id=guid]/+server.ts

@@ -0,0 +1,15 @@
+import { resolve } from '$app/paths';
+import type { Pathname } from '$app/types';
+import { getSiteURL, isShortLinkOrigin } from '$lib/utils/url';
+import { redirect } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = ({ url, params }) => {
+  const target: Pathname = `/shares/public/${params.id}`;
+
+  if (isShortLinkOrigin(url)) {
+    return redirect(303, getSiteURL(target));
+  }
+
+  return redirect(303, resolve(target));
+};

src/routes/t/+server.ts src/routes/(shortcuts)/t/+server.tssrc/routes/t/+server.ts renamed to src/routes/(shortcuts)/t/+server.ts

@@ -7,6 +7,13 @@
   import { ShareLinkSignalr } from '$lib/signalr/sharelink.svelte';
   import type { Control } from '$lib/signalr/models/Control';
   import { onMount, untrack } from 'svelte';
+  import { page } from '$app/state';
+  import CopyInput from '$lib/components/CopyInput.svelte';
+  import { getSiteShortURL } from '$lib/utils/url';
+  import { Button } from '$lib/components/ui/button';
+  import { Pencil } from '@lucide/svelte';
+  import { userState } from '$lib/state/user-state.svelte';
+  import { resolve } from '$app/paths';
 
   interface Props {
     shareLinkRoot: PublicShareResponse;
@@ -28,10 +35,15 @@
   function control(control: Control) {
     shareLinkSignalr.control([control]);
   }
+
+  const shareId = $derived(page.params.shareId);
+
+  let editUrl = $derived(resolve(`/shares/public/${shareId}/edit`));
+  const shareUrl = $derived(getSiteShortURL(`/s/${shareId}`));
 </script>
 
 <div class="m-5 flex h-full w-full flex-col gap-15">
-  <div class="flex w-full flex-row content-between">
+  <div class="grid grid-cols-3 grid-rows-1">
     <div class="flex w-full flex-col">
       <h1 class="text-2xl font-bold">Public Share: {shareLinkRoot.name}</h1>
       <p
@@ -43,26 +55,36 @@
       </p>
     </div>
 
-    <Tooltip.Provider>
-      <Tooltip.Root delayDuration={250}>
-        <Tooltip.Trigger>
-          <span
-            class="mr-10 flex flex-row items-center rounded-md px-4 py-2 outline-1 outline-gray-500"
-          >
-            <Avatar.Root class="h-10 w-10">
-              <Avatar.Image src={shareLinkRoot.author.image} alt="User Avatar" />
-              <Avatar.Fallback>
-                {shareLinkRoot.author.name.charAt(0)}
-              </Avatar.Fallback>
-            </Avatar.Root>
-            <p class="ml-4">{shareLinkRoot.author.name}</p>
-          </span>
-        </Tooltip.Trigger>
-        <Tooltip.Content>
-          <p>Shared by</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
-    </Tooltip.Provider>
+    <div class="items-center1 flex">
+      <CopyInput value={shareUrl.href} displayValue={shareUrl.host + shareUrl.pathname} />
+    </div>
+
+    <div class="flex items-center justify-end gap-4">
+      {#if userState.self}
+        <Button variant="outline" href={editUrl}><Pencil /> Edit</Button>
+      {/if}
+
+      <Tooltip.Provider>
+        <Tooltip.Root delayDuration={250}>
+          <Tooltip.Trigger>
+            <span
+              class="mr-10 flex flex-row items-center rounded-md px-4 py-2 outline-1 outline-gray-500"
+            >
+              <Avatar.Root class="h-10 w-10">
+                <Avatar.Image src={shareLinkRoot.author.image} alt="User Avatar" />
+                <Avatar.Fallback>
+                  {shareLinkRoot.author.name.charAt(0)}
+                </Avatar.Fallback>
+              </Avatar.Root>
+              <p class="ml-4">{shareLinkRoot.author.name}</p>
+            </span>
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            <p>Shared by</p>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+    </div>
   </div>
 
   <div class="flex flex-row justify-center gap-5">