18 feature create dashboard my playlists

eslint.config.js

@@ -16,6 +16,10 @@ export default ts.config(
         ...globals.browser,
         ...globals.node
       }
+    },
+    rules: {
+      'svelte/valid-svelte-component': 'off',
+      'svelte/no-at-html-tags': 'off'
     }
   },
   {

package.json

@@ -27,7 +27,7 @@
     "@types/eslint": "^9.6.0",
     "@vitest/coverage-istanbul": "^2.1.5",
     "autoprefixer": "^10.4.20",
-    "bits-ui": "^1.0.0-next.67",
+    "bits-ui": "^1.0.0-next.69",
     "clsx": "^2.1.1",
     "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
@@ -48,6 +48,7 @@
     "sass-embedded": "^1.82.0",
     "svelte": "5.2.8",
     "svelte-check": "^4.0.0",
+    "svelte-sonner": "^0.3.28",
     "sveltekit-superforms": "^2.21.1",
     "tailwind-merge": "^2.5.4",
     "tailwind-variants": "^0.2.1",

src/features/account/components/CredentialsCard.svelte

@@ -9,23 +9,22 @@
   }
 </script>
 
-<script>
+<script lang="ts">
   import { superForm } from 'sveltekit-superforms';
   import { zodClient } from 'sveltekit-superforms/adapters';
   import { credentialsSchema } from '$features/account/schemas';
   import InputField from '$comp/form_fields/InputField.svelte';
   import * as Card from '$comp/ui/card/index.js';
   import { Button } from '$comp/ui/button/index.js';
+  import { invalidateAll } from '$app/navigation';
 
   let { form: f, expiresAt }: Props = $props();
 
   const form = superForm(f, {
     validators: zodClient(credentialsSchema),
     onUpdated: ({ form: f }) => {
       if (f.valid) {
-        // toast.success(`You submitted ${JSON.stringify(f.data, null, 2)}`);
-      } else {
-        // toast.error('Please fix the errors in the form.');
+        invalidateAll();
       }
     }
   });

src/features/account/components/MySubscriptionPlanCard.svelte

@@ -5,7 +5,7 @@
   }
 </script>
 
-<script>
+<script lang="ts">
   import * as Card from '$comp/ui/card/index.js';
   import { Button } from '$comp/ui/button/index.js';
   import { Calendar } from 'lucide-svelte';

src/features/my_playlists/components/CreatePlaylistModal.svelte

@@ -0,0 +1,99 @@
+<script lang="ts" module>
+  import { type SuperValidated, type Infer } from 'sveltekit-superforms';
+  import { createPlaylistSchema, type TCreatePlaylistSchema } from '$features/my_playlists/schemas';
+
+  interface Props {
+    form: SuperValidated<Infer<TCreatePlaylistSchema>>;
+    expiresAt?: Date | null;
+    hasEnoughRightForAutoUpdates?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import { Button } from '$lib/components/ui/form';
+  import { buttonVariants } from '$lib/components/ui/button/index.js';
+  import * as Dialog from '$lib/components/ui/dialog';
+
+  import { copyTextToClipboard } from '$lib/utils';
+  import { cn } from '$lib/utils';
+  import { superForm } from 'sveltekit-superforms';
+  import { zodClient } from 'sveltekit-superforms/adapters';
+  import { invalidateAll } from '$app/navigation';
+  import InputField from '$comp/form_fields/InputField.svelte';
+  import SwitchField from '$comp/form_fields/SwitchField.svelte';
+  import { toast } from 'svelte-sonner';
+
+  const { form: f, hasEnoughRightForAutoUpdates }: Props = $props();
+  let open = $state(false);
+
+  const form = superForm(f, {
+    validators: zodClient(createPlaylistSchema),
+    onUpdated: ({ form: f }) => {
+      if (f.valid) {
+        invalidateAll();
+      }
+    },
+    onResult: async (event) => {
+      if (event.result.type === 'success') {
+        open = false;
+        const url = event?.result?.data?.form.message;
+        toast.success('Playlist created successfully', {
+          actionButtonStyle: buttonVariants.variants.variant.outline,
+          action: {
+            label: 'Copy to clipboard',
+            onClick: () => copyTextToClipboard(url)
+          },
+          duration: 7000
+        });
+      } else {
+        toast.error('Error creating playlist', {
+          duration: 7000
+        });
+      }
+      console.log('result', event.result);
+    }
+  });
+
+  let { form: formData, enhance } = form;
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Trigger class={cn(buttonVariants({ variant: 'default' }), 'ml-2')}>Create</Dialog.Trigger>
+  <Dialog.Content class="sm:max-w-[425px]">
+    <form method="POST" use:enhance action="?/create_playlist">
+      <Dialog.Header>
+        <Dialog.Title>Create playlist</Dialog.Title>
+        <Dialog.Description>
+          Create new playlist of your favorite songs. Give it a name and description.
+        </Dialog.Description>
+      </Dialog.Header>
+      <div class="flex flex-col gap-4">
+        <InputField {form} name="name" label="Name (optional)" bind:value={$formData.name} />
+        <InputField
+          {form}
+          name="description"
+          label="Description (optional)"
+          bind:value={$formData.description}
+        />
+        <SwitchField
+          {form}
+          disabled={!hasEnoughRightForAutoUpdates}
+          name="auto_update_playlist"
+          label={hasEnoughRightForAutoUpdates
+            ? 'Auto Update Playlists'
+            : 'Update your plan to enable auto updates'}
+          bind:checked={$formData.auto_update_playlist}
+        />
+        <SwitchField
+          {form}
+          name="share_with_community"
+          label="Share with community"
+          bind:checked={$formData.share_with_community}
+        />
+      </div>
+      <Dialog.Footer class="mt-4">
+        <Button type="submit">Save changes</Button>
+      </Dialog.Footer>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>

src/features/my_playlists/components/PlaylistCard.svelte

@@ -0,0 +1,49 @@
+<script module lang="ts">
+  interface PlaylistCardProps {
+    href: string;
+    name: string;
+    description: string;
+    updated_at: Date;
+  }
+</script>
+
+<script lang="ts">
+  import CopyBtn from '$comp/custom/CopyBtn.svelte';
+  import * as Card from '$lib/components/ui/card';
+  import { Calendar } from 'lucide-svelte';
+
+  const { href, name, updated_at, description }: PlaylistCardProps = $props();
+
+  function getFormattedDate(date: Date) {
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long'
+    });
+  }
+</script>
+
+<Card.Root class="flex h-36 min-w-80 max-w-[520px] overflow-hidden">
+  <a {href} class="aspect-square max-w-40 object-contain max-sm:max-w-28" target="_blank">
+    <img
+      class="aspect-square h-full object-cover"
+      alt="Yt Music Liked Song Playlist"
+      src="/ytmusic-liked.png"
+    />
+  </a>
+  <div class="flex flex-1 flex-col justify-between gap-6 p-4">
+    <div>
+      <h2 class="font-semibold">{name}</h2>
+      <p class="text-sm">{description}</p>
+    </div>
+
+    <div class="flex justify-between">
+      {#if updated_at}
+        <span class="inline-flex items-center gap-2 text-sm text-muted-foreground">
+          <Calendar size={14} />
+          {getFormattedDate(updated_at)}
+        </span>
+      {/if}
+      <CopyBtn tooltipText="Click to copy playlist link to the clipboard" text={href} />
+    </div>
+  </div>
+</Card.Root>

src/features/my_playlists/schemas.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const createPlaylistSchema = z.object({
+  name: z.string().optional(),
+  description: z.string().optional(),
+  share_with_community: z.boolean(),
+  auto_update_playlist: z.boolean().default(false)
+});
+
+export type TCreatePlaylistSchema = typeof createPlaylistSchema;

src/lib/components/custom/CopyBtn.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+  interface CopyBtnProps {
+    text: string;
+    tooltipText?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { copyTextToClipboard } from '$lib/utils';
+  import { Button } from '$comp/ui/button';
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '$comp/ui/tooltip';
+  import { cn } from '$lib/utils';
+  import { Check, Copy } from 'lucide-svelte';
+  const { text, tooltipText = 'Click to copy' }: CopyBtnProps = $props();
+
+  let copied = $state(false);
+
+  async function handleCopy() {
+    try {
+      await copyTextToClipboard(text);
+      copied = true;
+      setTimeout(() => (copied = false), 1500);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+    }
+  }
+</script>
+
+<TooltipProvider delayDuration={0}>
+  <Tooltip>
+    <TooltipTrigger>
+      <Button
+        variant="outline"
+        size="icon"
+        class="!p-2 disabled:opacity-100"
+        onclick={handleCopy}
+        aria-label={copied ? 'Copied' : 'Copy to clipboard'}
+        disabled={copied}
+      >
+        <div class={cn('transition-all', copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0')}>
+          <Check className="stroke-emerald-500" size={16} strokeWidth={2} aria-hidden="true" />
+        </div>
+        <div
+          class={cn(
+            'absolute transition-all',
+            copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
+          )}
+        >
+          <Copy size={16} strokeWidth={2} aria-hidden="true" />
+        </div>
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent class="px-2 py-1 text-xs">{tooltipText}</TooltipContent>
+  </Tooltip>
+</TooltipProvider>

src/lib/components/form_fields/SwitchField.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import * as Form from '$lib/components/ui/form';
+  import type { FormPath, SuperForm } from 'sveltekit-superforms';
+  import { Switch } from '$comp/ui/switch';
+  import { Label } from '$comp/ui/label';
+
+  interface Props {
+    // eslint-disable-next-line no-undef
+    name: FormPath<T>;
+    // eslint-disable-next-line no-undef
+    form: SuperForm<T>;
+    label: string;
+    checked: boolean;
+    disabled?: boolean;
+  }
+  let { checked = $bindable(), label, form, name, disabled = false }: Props = $props();
+</script>
+
+<Form.Field {form} {name}>
+  <Form.Control>
+    {#snippet children(props)}
+      <div class="flex items-center space-x-2">
+        <Switch {...props} {disabled} bind:checked {name} />
+        <Label for="in_search_for_job">{label}</Label>
+      </div>
+    {/snippet}
+  </Form.Control>
+  <Form.FieldErrors />
+</Form.Field>

src/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+  import X from 'lucide-svelte/icons/x';
+  import type { Snippet } from 'svelte';
+  import * as Dialog from './index.js';
+  import { cn } from '$lib/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    portalProps,
+    children,
+    ...restProps
+  }: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: DialogPrimitive.PortalProps;
+    children: Snippet;
+  } = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+  <Dialog.Overlay />
+  <DialogPrimitive.Content
+    bind:ref
+    class={cn(
+      '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',
+      className
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+    <DialogPrimitive.Close
+      class="absolute right-4 top-4 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"
+    >
+      <X class="size-4" />
+      <span class="sr-only">Close</span>
+    </DialogPrimitive.Close>
+  </DialogPrimitive.Content>
+</Dialog.Portal>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '$lib/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+  bind:ref
+  class={cn('text-sm text-muted-foreground', className)}
+  {...restProps}
+/>

src/lib/components/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { WithElementRef } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>