big fixes

fixes feedback from thecodacus

app/components/chat/GitCloneButton.tsx

@@ -7,7 +7,7 @@ import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { LoadingOverlay } from '~/components/ui/LoadingOverlay';
 import { RepositorySelectionDialog } from '~/components/settings/connections/components/RepositorySelectionDialog';
-import { cn } from '~/lib/utils';
+import { classNames } from '~/utils/classNames';
 import { Button } from '~/components/ui/Button';
 import type { IChatMetadata } from '~/lib/persistence/db';
 
@@ -158,7 +158,7 @@ ${escapeBoltTags(file.content)}
         title="Clone a Git Repo"
         variant="outline"
         size="lg"
-        className={cn(
+        className={classNames(
           'gap-2 bg-[#F5F5F5] dark:bg-[#252525]',
           'text-bolt-elements-textPrimary dark:text-white',
           'hover:bg-[#E5E5E5] dark:hover:bg-[#333333]',

app/components/chat/ImportFolderButton.tsx

@@ -5,7 +5,7 @@ import { MAX_FILES, isBinaryFile, shouldIncludeFile } from '~/utils/fileUtils';
 import { createChatFromFolder } from '~/utils/folderImport';
 import { logStore } from '~/lib/stores/logs'; // Assuming logStore is imported from this location
 import { Button } from '~/components/ui/Button';
-import { cn } from '~/lib/utils';
+import { classNames } from '~/utils/classNames';
 
 interface ImportFolderButtonProps {
   className?: string;
@@ -119,9 +119,10 @@ export const ImportFolderButton: React.FC<ImportFolderButtonProps> = ({ classNam
           const input = document.getElementById('folder-import');
           input?.click();
         }}
+        title="Import Folder"
         variant="outline"
         size="lg"
-        className={cn(
+        className={classNames(
           'gap-2 bg-[#F5F5F5] dark:bg-[#252525]',
           'text-bolt-elements-textPrimary dark:text-white',
           'hover:bg-[#E5E5E5] dark:hover:bg-[#333333]',

app/components/chat/StarterTemplates.tsx

@@ -11,15 +11,24 @@ const FrameworkLink: React.FC<FrameworkLinkProps> = ({ template }) => (
     href={`/git?url=https://github.com/${template.githubRepo}.git`}
     data-state="closed"
     data-discover="true"
-    className="items-center justify-center "
+    className="items-center justify-center"
   >
     <div
       className={`inline-block ${template.icon} w-8 h-8 text-4xl transition-theme opacity-25 hover:opacity-100 hover:text-purple-500 dark:text-white dark:opacity-50 dark:hover:opacity-100 dark:hover:text-purple-400 transition-all`}
+      title={template.label}
     />
   </a>
 );
 
 const StarterTemplates: React.FC = () => {
+  // Debug: Log available templates and their icons
+  React.useEffect(() => {
+    console.log(
+      'Available templates:',
+      STARTER_TEMPLATES.map((t) => ({ name: t.name, icon: t.icon })),
+    );
+  }, []);
+
   return (
     <div className="flex flex-col items-center gap-4">
       <span className="text-sm text-gray-500">or start a blank app with your favorite stack</span>

app/components/chat/chatExportAndImport/ImportButtons.tsx

@@ -2,7 +2,7 @@ import type { Message } from 'ai';
 import { toast } from 'react-toastify';
 import { ImportFolderButton } from '~/components/chat/ImportFolderButton';
 import { Button } from '~/components/ui/Button';
-import { cn } from '~/lib/utils';
+import { classNames } from '~/utils/classNames';
 
 type ChatData = {
   messages?: Message[]; // Standard Bolt format
@@ -66,7 +66,7 @@ export function ImportButtons(importChat: ((description: string, messages: Messa
             }}
             variant="outline"
             size="lg"
-            className={cn(
+            className={classNames(
               'gap-2 bg-[#F5F5F5] dark:bg-[#252525]',
               'text-bolt-elements-textPrimary dark:text-white',
               'hover:bg-[#E5E5E5] dark:hover:bg-[#333333]',
@@ -80,7 +80,7 @@ export function ImportButtons(importChat: ((description: string, messages: Messa
           </Button>
           <ImportFolderButton
             importChat={importChat}
-            className={cn(
+            className={classNames(
               'gap-2 bg-[#F5F5F5] dark:bg-[#252525]',
               'text-bolt-elements-textPrimary dark:text-white',
               'hover:bg-[#E5E5E5] dark:hover:bg-[#333333]',