@vicket/create-support 1.1.1

package/templates-tailwind/sveltekit/src/lib/vicket/SupportPage.svelte

@@ -0,0 +1,395 @@
+<script lang="ts">
+  import type { Template, Article, Faq } from "$lib/vicket";
+  import { fetchInit, sanitizeHtml, stripHtml, cn } from "$lib/vicket";
+  import TicketDialog from "./TicketDialog.svelte";
+
+  /* ---------------------------------------------- */
+  /*  State                                          */
+  /* ---------------------------------------------- */
+  let templates = $state<Template[]>([]);
+  let articles = $state<Article[]>([]);
+  let faqs = $state<Faq[]>([]);
+  let websiteName = $state("Support");
+  let isLoading = $state(true);
+  let error = $state("");
+  let searchQuery = $state("");
+  let dialogOpen = $state(false);
+  let selectedArticle = $state<Article | null>(null);
+
+  /* FAQ open state tracking */
+  let openFaqIds = $state<Set<string>>(new Set());
+
+  /* ---------------------------------------------- */
+  /*  Derived                                        */
+  /* ---------------------------------------------- */
+  let filteredArticles = $derived.by(() => {
+    if (!searchQuery.trim()) return articles;
+    const q = searchQuery.toLowerCase();
+    return articles.filter(
+      (a) => a.title.toLowerCase().includes(q) || stripHtml(a.content).toLowerCase().includes(q),
+    );
+  });
+
+  let filteredFaqs = $derived.by(() => {
+    if (!searchQuery.trim()) return faqs;
+    const q = searchQuery.toLowerCase();
+    return faqs.filter(
+      (f) => f.question.toLowerCase().includes(q) || f.answer.toLowerCase().includes(q),
+    );
+  });
+
+  let hasContent = $derived(articles.length > 0 || faqs.length > 0);
+  let hasResults = $derived(filteredArticles.length > 0 || filteredFaqs.length > 0);
+
+  /* ---------------------------------------------- */
+  /*  Functions                                      */
+  /* ---------------------------------------------- */
+  function toggleFaq(id: string) {
+    const next = new Set(openFaqIds);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    openFaqIds = next;
+  }
+
+  /* ---------------------------------------------- */
+  /*  Load data on mount                             */
+  /* ---------------------------------------------- */
+  $effect(() => {
+    let isMounted = true;
+    const load = async () => {
+      isLoading = true;
+      error = "";
+      try {
+        const data = await fetchInit();
+        if (!isMounted) return;
+        templates = data.templates || [];
+        articles = data.articles || [];
+        faqs = data.faqs || [];
+        websiteName = data.website?.name || "Support";
+      } catch (loadError) {
+        if (!isMounted) return;
+        error = loadError instanceof Error ? loadError.message : "Unexpected error.";
+      } finally {
+        if (isMounted) isLoading = false;
+      }
+    };
+    load();
+    return () => { isMounted = false; };
+  });
+</script>
+
+<!-- --------------------------------------- -->
+<!--  Loading skeleton                       -->
+<!-- --------------------------------------- -->
+{#if isLoading}
+  <div class="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
+    <div class="mx-auto max-w-5xl px-6 py-16">
+      <!-- Header skeleton -->
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <div class="h-8 w-40 animate-pulse rounded-lg bg-slate-200" aria-hidden="true"></div>
+          <div class="mt-2 h-5 w-64 animate-pulse rounded-lg bg-slate-200" aria-hidden="true"></div>
+        </div>
+        <div class="h-12 w-44 animate-pulse rounded-full bg-slate-200" aria-hidden="true"></div>
+      </div>
+      <!-- Search skeleton -->
+      <div class="mt-10">
+        <div class="h-12 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
+      </div>
+      <!-- Content skeleton -->
+      <div class="mt-10 grid gap-10 md:grid-cols-2">
+        <div class="space-y-3">
+          <div class="h-5 w-36 animate-pulse rounded-lg bg-slate-200" aria-hidden="true"></div>
+          <div class="h-16 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
+          <div class="h-16 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
+          <div class="h-16 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
+        </div>
+        <div class="space-y-3">
+          <div class="h-5 w-52 animate-pulse rounded-lg bg-slate-200" aria-hidden="true"></div>
+          <div class="h-14 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
+          <div class="h-14 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
+          <div class="h-14 w-full animate-pulse rounded-xl bg-slate-200" aria-hidden="true"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+<!-- --------------------------------------- -->
+<!--  Article viewer                         -->
+<!-- --------------------------------------- -->
+{:else if selectedArticle}
+  <div class="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
+    <div class="mx-auto max-w-5xl px-6 py-16">
+      <!-- Hero stays visible -->
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 class="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{websiteName}</h1>
+          <p class="mt-1 text-sm text-slate-500 md:text-base">How can we help you today?</p>
+        </div>
+        {#if templates.length > 0}
+          <button
+            type="button"
+            class="inline-flex shrink-0 items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
+            onclick={() => (dialogOpen = true)}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+            Contact Support
+          </button>
+        {/if}
+      </div>
+
+      <!-- Article content -->
+      <div class="mt-8">
+        <button
+          type="button"
+          onclick={() => (selectedArticle = null)}
+          class="mb-4 inline-flex cursor-pointer items-center gap-1.5 rounded-lg border-none bg-transparent px-2 py-1.5 text-sm font-medium text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>
+          Back to articles
+        </button>
+
+        <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm md:p-8">
+          <h2 class="m-0 text-xl font-bold text-slate-900">{selectedArticle.title}</h2>
+          <div class="vk-message-content mt-4 text-sm leading-relaxed text-slate-700">
+            {@html sanitizeHtml(selectedArticle.content)}
+          </div>
+        </div>
+
+        {#if templates.length > 0}
+          <div class="mt-6 text-center">
+            <p class="text-sm text-slate-500">Still need help?</p>
+            <button
+              type="button"
+              class="mt-2 inline-flex items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
+              onclick={() => (dialogOpen = true)}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+              Contact Support
+            </button>
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Ticket dialog (also accessible from article view) -->
+    <TicketDialog open={dialogOpen} onclose={() => (dialogOpen = false)} templates={templates} />
+  </div>
+
+<!-- --------------------------------------- -->
+<!--  Home view                              -->
+<!-- --------------------------------------- -->
+{:else}
+  <div class="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
+    <div class="mx-auto max-w-5xl px-6 py-16">
+      <!-- Row 1 - Hero -->
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 class="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{websiteName}</h1>
+          <p class="mt-1 text-sm text-slate-500 md:text-base">How can we help you today?</p>
+        </div>
+        {#if templates.length > 0}
+          <div class="flex flex-col items-end gap-1.5">
+            <span class="hidden text-xs text-slate-500 sm:block">
+              Can't find what you're looking for?
+            </span>
+            <button
+              type="button"
+              class="inline-flex shrink-0 items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
+              onclick={() => (dialogOpen = true)}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+              Contact Support
+            </button>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Alerts -->
+      {#if error}
+        <div class="mt-6 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-900" role="alert">
+          <span class="mt-0.5 shrink-0">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
+          </span>
+          <span class="flex-1">{error}</span>
+          <button
+            type="button"
+            onclick={() => (error = "")}
+            class="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100"
+            aria-label="Dismiss"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+          </button>
+        </div>
+      {/if}
+
+      <!-- Row 2 - Search bar -->
+      {#if hasContent}
+        <div class="relative mt-10">
+          <span class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
+          </span>
+          <input
+            type="text"
+            class="w-full rounded-xl border border-slate-200 bg-white py-3 pl-11 pr-4 text-sm text-slate-900 shadow-sm transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
+            placeholder="Search articles and FAQs..."
+            bind:value={searchQuery}
+          />
+        </div>
+      {/if}
+
+      <!-- Row 3 - Split content -->
+      {#if hasResults}
+        <div class="mt-10 grid gap-10 md:grid-cols-2">
+          <!-- Left: Articles -->
+          {#if filteredArticles.length > 0}
+            <div>
+              <div class="mb-4 flex items-center gap-2">
+                <span class="text-slate-400">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /><path d="M16 13H8" /><path d="M16 17H8" /><path d="M10 9H8" /></svg>
+                </span>
+                <h2 class="m-0 text-sm font-semibold uppercase tracking-wider text-slate-500">Popular Articles</h2>
+              </div>
+              <div class="space-y-1">
+                {#each filteredArticles as article (article.id)}
+                  <button
+                    type="button"
+                    class="group flex w-full cursor-pointer items-start gap-3 rounded-xl border border-transparent bg-transparent p-3 text-left transition-all duration-150 hover:border-slate-200 hover:bg-white hover:shadow-sm"
+                    onclick={() => (selectedArticle = article)}
+                  >
+                    <span class="mt-0.5 shrink-0 text-slate-400 transition-colors group-hover:text-blue-600">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /><path d="M16 13H8" /><path d="M16 17H8" /><path d="M10 9H8" /></svg>
+                    </span>
+                    <div class="min-w-0">
+                      <h3 class="m-0 text-sm font-semibold text-slate-900 transition-colors group-hover:text-blue-600">{article.title}</h3>
+                      {#if article.content}
+                        <p class="m-0 mt-0.5 line-clamp-2 text-xs text-slate-500">
+                          {stripHtml(article.content).substring(0, 150)}
+                        </p>
+                      {/if}
+                    </div>
+                  </button>
+                {/each}
+              </div>
+            </div>
+          {/if}
+
+          <!-- Right: FAQs -->
+          {#if filteredFaqs.length > 0}
+            <div>
+              <div class="mb-4 flex items-center gap-2">
+                <span class="text-slate-400">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><path d="M12 17h.01" /></svg>
+                </span>
+                <h2 class="m-0 text-sm font-semibold uppercase tracking-wider text-slate-500">Frequently Asked Questions</h2>
+              </div>
+              <div class="space-y-2">
+                {#each filteredFaqs as faq (faq.id)}
+                  <div class="rounded-xl border border-slate-200 bg-white/50 transition-colors hover:bg-white/80">
+                    <button
+                      type="button"
+                      onclick={() => toggleFaq(faq.id)}
+                      class="flex w-full cursor-pointer items-center justify-between gap-3 border-none bg-transparent p-4 text-left text-sm font-semibold text-slate-900"
+                      aria-expanded={openFaqIds.has(faq.id)}
+                    >
+                      {faq.question}
+                      <span class={cn("shrink-0 text-slate-400 transition-transform duration-200", openFaqIds.has(faq.id) && "rotate-180")}>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
+                      </span>
+                    </button>
+                    {#if openFaqIds.has(faq.id)}
+                      <div class="border-t border-slate-100 px-4 pb-4 pt-2">
+                        <p class="m-0 text-sm leading-relaxed text-slate-600">{faq.answer}</p>
+                      </div>
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+      <!-- No search results -->
+      {#if searchQuery.trim() && !hasResults}
+        <div class="mt-16 text-center">
+          <p class="text-sm text-slate-500">No results found for &ldquo;{searchQuery}&rdquo;</p>
+        </div>
+      {/if}
+
+      <!-- Empty state - no articles and no FAQs at all -->
+      {#if !hasContent && !error}
+        <div class="mt-16 rounded-2xl border border-slate-200 bg-white p-10 text-center shadow-sm">
+          <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-blue-50 text-blue-600">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
+          </div>
+          <p class="text-sm text-slate-500">Need help? Our team is here for you.</p>
+          <button
+            type="button"
+            class="mt-4 inline-flex items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
+            onclick={() => (dialogOpen = true)}
+          >
+            Contact Support
+          </button>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Ticket dialog -->
+    <TicketDialog open={dialogOpen} onclose={() => (dialogOpen = false)} templates={templates} />
+  </div>
+{/if}
+
+<style>
+  :global(.vk-message-content h1,
+  .vk-message-content h2,
+  .vk-message-content h3,
+  .vk-message-content h4,
+  .vk-message-content h5,
+  .vk-message-content h6) {
+    margin: 1em 0 0.5em;
+    line-height: 1.4;
+  }
+  :global(.vk-message-content p) {
+    margin: 0.5em 0;
+  }
+  :global(.vk-message-content ul,
+  .vk-message-content ol) {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+  }
+  :global(.vk-message-content a) {
+    color: #2563eb;
+    text-decoration: underline;
+  }
+  :global(.vk-message-content img) {
+    max-width: 100%;
+    border-radius: 0.5rem;
+  }
+  :global(.vk-message-content pre) {
+    background: #f1f5f9;
+    padding: 0.75em 1em;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    font-size: 0.85em;
+  }
+  :global(.vk-message-content code) {
+    background: #f1f5f9;
+    padding: 0.15em 0.35em;
+    border-radius: 0.25rem;
+    font-size: 0.9em;
+  }
+  :global(.vk-message-content pre code) {
+    background: none;
+    padding: 0;
+  }
+  :global(.vk-message-content blockquote) {
+    border-left: 3px solid #cbd5e1;
+    margin: 0.5em 0;
+    padding-left: 1em;
+    color: #64748b;
+  }
+</style>