feat: enhance type safety and improve form handling across multiple components

Author: ashwin31

src/routes/(site)/+layout.svelte

@@ -14,14 +14,15 @@
     MessageCircle, 
     Github,
     Twitter,
-    Linkedin,
-    Star
+    Linkedin
   } from '@lucide/svelte';
   import { enhance } from '$app/forms';
 
   let isMenuOpen = false;
   let scrollY = 0;
+  /** @type {HTMLFormElement} */
   let newsletterForm;
+  /** @type {string} */
   let newsletterMessage = '';
   let showNewsletterMessage = false;
   
@@ -45,9 +46,12 @@
     window.addEventListener('scroll', handleScroll);
     
     // Close mobile menu when clicking outside
+    /**
+     * @param {Event} event
+     */
     const handleClickOutside = (event) => {
       const nav = document.querySelector('nav');
-      if (isMenuOpen && nav && !nav.contains(event.target)) {
+      if (isMenuOpen && nav && !nav.contains(/** @type {Node} */ (event.target))) {
         isMenuOpen = false;
       }
     };
@@ -243,20 +247,20 @@
             method="POST" 
             action="/?/subscribe" 
             class="max-w-md mx-auto"
-            use:enhance={({ submitter, formData }) => {
-              submitter.disabled = true;
+            use:enhance={({ submitter }) => {
+              if (submitter) /** @type {HTMLButtonElement} */ (submitter).disabled = true;
               return async ({ result, update }) => {
                 if (result.type === 'success') {
-                  newsletterMessage = result.data?.message || 'Successfully subscribed to newsletter!';
+                  newsletterMessage = /** @type {string} */ (result.data?.message) || 'Successfully subscribed to newsletter!';
                   showNewsletterMessage = true;
                   newsletterForm.reset();
                   setTimeout(() => { showNewsletterMessage = false; }, 5000);
                 } else if (result.type === 'failure') {
-                  newsletterMessage = result.data?.message || 'Failed to subscribe. Please try again.';
+                  newsletterMessage = /** @type {string} */ (result.data?.message) || 'Failed to subscribe. Please try again.';
                   showNewsletterMessage = true;
                   setTimeout(() => { showNewsletterMessage = false; }, 5000);
                 }
-                submitter.disabled = false;
+                if (submitter) /** @type {HTMLButtonElement} */ (submitter).disabled = false;
                 await update();
               };
             }}

src/routes/(site)/+page.svelte

@@ -19,11 +19,15 @@
     MessageCircle,
     Github
   } from '@lucide/svelte';
-  import { Download, Zap as MobileZap } from '@lucide/svelte';
+  import { Download } from '@lucide/svelte';
   
+  /** @type {number|null} */
   let activeFaq = null;
   let mounted = false;
 
+  /**
+   * @param {number} index
+   */
   function toggleFaq(index) {
     activeFaq = activeFaq === index ? null : index;
   }

src/routes/(site)/blog/+page.svelte

@@ -13,7 +13,11 @@
     hasPreviousPage: false
   };
   
-  // Format date for display
+  /**
+   * Format date for display
+   * @param {string|Date} dateString - The date to format
+   * @returns {string} The formatted date string
+   */
   function formatDate(dateString) {
     const date = new Date(dateString);
     return date.toLocaleDateString('en-US', {
@@ -23,7 +27,12 @@
     });
   }
   
-  // Limit text to a certain number of words
+  /**
+   * Limit text to a certain number of words
+   * @param {string} text - The text to limit
+   * @param {number} limit - The word limit
+   * @returns {string} The limited text
+   */
   function limitWords(text, limit = 30) {
     if (!text) return '';
     const words = text.split(' ');
@@ -32,7 +41,10 @@
     return words.slice(0, limit).join(' ') + '...';
   }
   
-  // Change page function for pagination
+  /**
+   * Change page function for pagination
+   * @param {number} newPage - The new page number
+   */
   function changePage(newPage) {
     if (newPage < 1 || newPage > pagination.totalPages) return;
     
@@ -69,7 +81,7 @@
             <div class="flex flex-col lg:flex-row">
               <div class="flex-1">
                 <div class="flex items-center gap-3 text-sm text-gray-500 mb-2">
-                  <time datetime={post.createdAt}>{formatDate(post.createdAt)}</time>
+                  <time datetime={post.createdAt.toISOString()}>{formatDate(post.createdAt)}</time>
                   <span class="inline-block h-1 w-1 rounded-full bg-gray-300"></span>
                 </div>
 

src/routes/(site)/contact/+page.server.js

@@ -66,10 +66,10 @@ export const actions = {
             // Store submission in database
             const submission = await prisma.contactSubmission.create({
                 data: {
-                    name: name.toString().trim(),
-                    email: email.toString().trim(),
-                    reason: serviceType.toString().trim(),
-                    message: message.toString().trim(),
+                    name: name?.toString().trim() || '',
+                    email: email?.toString().trim() || '',
+                    reason: serviceType?.toString().trim() || '',
+                    message: message?.toString().trim() || '',
                     ipAddress,
                     userAgent,
                     referrer
@@ -86,7 +86,7 @@ export const actions = {
             console.error('Error saving contact submission:', error);
 
             // More specific error handling
-            if (error.code === 'P1001') {
+            if (error && typeof error === 'object' && 'code' in error && error.code === 'P1001') {
                 return fail(500, {
                     error: 'Database connection failed. Please try again later.',
                     name: name?.toString() || '',

src/routes/(site)/contact/+page.svelte

@@ -1,15 +1,12 @@
 <!-- contact page -->
 <script>
   import { onMount } from 'svelte';
-  import { fade, fly } from 'svelte/transition';
+  import { fly } from 'svelte/transition';
   import { enhance } from '$app/forms';
   import { 
     MessageCircle, 
     Mail, 
-    Phone, 
-    Github,
     Clock,
-    MapPin,
     Send,
     Check,
     Star,
@@ -19,11 +16,9 @@
     Code,
     Server,
     Users,
-    BookOpen,
     Shield,
-    ChevronRight,
     AlertCircle,
-    Calendar,
+    Github,
     Download
   } from '@lucide/svelte';
 
@@ -477,9 +472,10 @@
           
           <!-- Service Type -->
           <div>
-            <label class="block text-sm font-medium text-gray-700 mb-2">
-              What can we help you with? *
-            </label>
+            <fieldset>
+              <legend class="block text-sm font-medium text-gray-700 mb-2">
+                What can we help you with? *
+              </legend>
             <div class="grid gap-3 md:grid-cols-2">
               <label class="flex items-start p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 {formData.serviceType === 'professional-setup' ? 'border-blue-500 bg-blue-50' : ''}">
                 <input type="radio" name="serviceType" bind:group={formData.serviceType} value="professional-setup" class="mt-1 mr-3">
@@ -516,6 +512,7 @@
             {#if form?.errors?.serviceType}
               <p class="text-red-500 text-sm mt-1">{form.errors.serviceType}</p>
             {/if}
+            </fieldset>
           </div>
           
           <div>
@@ -678,7 +675,7 @@
         <Download class="w-6 h-6 mr-3" />
         Try BottleCRM Free
       </a>
-      <button onclick={() => document.querySelector('form').scrollIntoView({behavior: 'smooth'})} class="inline-flex items-center justify-center px-8 py-4 text-lg font-bold rounded-xl text-white border-2 border-white hover:bg-white/10 transition-all duration-200">
+      <button onclick={() => document.querySelector('form')?.scrollIntoView({behavior: 'smooth'})} class="inline-flex items-center justify-center px-8 py-4 text-lg font-bold rounded-xl text-white border-2 border-white hover:bg-white/10 transition-all duration-200">
         <Send class="w-6 h-6 mr-3" />
         Get Professional Help
       </button>

src/routes/(site)/customization/+page.svelte

@@ -26,13 +26,16 @@
     Cog,
     Layout,
     FileCode,
-    Globe,
     ArrowRight
   } from '@lucide/svelte';
 
+  /** @type {number|null} */
   let activeFaq = null;
   let mounted = false;
 
+  /**
+   * @param {number} index
+   */
   function toggleFaq(index) {
     activeFaq = activeFaq === index ? null : index;
   }

src/routes/(site)/faq/+page.svelte

@@ -2,7 +2,6 @@
   import { onMount } from 'svelte';
   import { fade, fly } from 'svelte/transition';
   import { 
-    Search,
     ChevronDown,
     HelpCircle,
     DollarSign,
@@ -12,19 +11,16 @@
     Download,
     Github,
     MessageCircle,
-    Check,
-    X,
     Zap,
-    Shield,
-    Cloud,
-    Users,
-    BookOpen,
-    AlertCircle,
     ExternalLink
   } from '@lucide/svelte';
 
+  /** @type {string|null} */
   let activeFaq = null;
 
+  /**
+   * @param {string} faqId
+   */
   function toggleFaq(faqId) {
     activeFaq = activeFaq === faqId ? null : faqId;
   }

src/routes/(site)/features/+page.svelte

@@ -7,7 +7,6 @@
     TrendingUp, 
     FileText, 
     Smartphone,
-    Database,
     Shield,
     Zap,
     Check,
@@ -20,25 +19,17 @@
     Phone,
     Target,
     PieChart,
-    Filter,
-    Upload,
-    Download,
-    RefreshCw,
     Lock,
     Code,
-    Layers,
     Cloud,
     Server,
     GitBranch,
     Palette,
     Search,
-    Bell,
     UserCheck,
     DollarSign,
-    Archive,
-    Tag,
-    MapPin,
-    Building
+    Database,
+    MapPin
   } from '@lucide/svelte';
 </script>
 

src/routes/(site)/features/contact-management/+page.svelte

@@ -41,13 +41,21 @@
   } from '@lucide/svelte';
 
   let mounted = false;
+  /** @type {number|null} */
   let activeFaq = null;
   let selectedContact = null;
 
+  /**
+   * @param {number} index
+   */
   function toggleFaq(index) {
     activeFaq = activeFaq === index ? null : index;
   }
 
+  /**
+   * Selects a contact for display
+   * @param {any} contact - The contact object to select
+   */
   function selectContact(contact) {
     selectedContact = contact;
   }

src/routes/(site)/features/sales-pipeline/+page.svelte

@@ -36,13 +36,18 @@
   } from '@lucide/svelte';
 
   let mounted = false;
+  /** @type {any} */
   let selectedDeal = null;
   let showDealModal = false;
 
   onMount(() => {
     mounted = true;
   });
 
+  /**
+   * Opens the deal details modal
+   * @param {any} deal - The deal object to display
+   */
   function openDealDetails(deal) {
     selectedDeal = deal;
     showDealModal = true;
@@ -53,6 +58,11 @@
     selectedDeal = null;
   }
 
+  /**
+   * Formats a number as currency
+   * @param {number} value - The value to format
+   * @returns {string} The formatted currency string
+   */
   function formatCurrency(value) {
     return new Intl.NumberFormat('en-US', {
       style: 'currency',
@@ -1074,22 +1084,22 @@
               <div class="space-y-4">
                 <div class="grid grid-cols-2 gap-4">
                   <div>
-                    <label class="block text-sm font-medium text-gray-700">Deal Value</label>
+                    <div class="block text-sm font-medium text-gray-700">Deal Value</div>
                     <p class="text-lg font-semibold text-gray-900">{formatCurrency(selectedDeal.value)}</p>
                   </div>
                   <div>
-                    <label class="block text-sm font-medium text-gray-700">Probability</label>
+                    <div class="block text-sm font-medium text-gray-700">Probability</div>
                     <p class="text-lg font-semibold text-gray-900">{selectedDeal.probability}%</p>
                   </div>
                 </div>
 
                 <div>
-                  <label class="block text-sm font-medium text-gray-700">Primary Contact</label>
+                  <div class="block text-sm font-medium text-gray-700">Primary Contact</div>
                   <p class="text-gray-900">{selectedDeal.contact}</p>
                 </div>
 
                 <div>
-                  <label class="block text-sm font-medium text-gray-700">Last Activity</label>
+                  <div class="block text-sm font-medium text-gray-700">Last Activity</div>
                   <p class="text-gray-900">{selectedDeal.lastActivity}</p>
                 </div>
               </div>