big fixes

fixes feedback from thecodacus

.cursorrules

@@ -154,3 +154,4 @@ bolt.diy (previously oTToDev) is an open-source AI-powered full-stack web develo
 - Don't use white background for dark mode
 - Don't use white text on white background for dark mode
 - Match the style of the existing codebase
+- Use consistent naming conventions for components and variables

.gitignore

@@ -42,3 +42,5 @@ site
 app/commit.json
 changelogUI.md
 docs/instructions/Roadmap.md
+.cursorrules
+.cursorrules

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]',

app/components/settings/connections/components/ConnectionForm.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { classNames } from '~/utils/classNames';
 import type { GitHubAuthState } from '~/components/settings/connections/types/GitHub';
 import Cookies from 'js-cookie';
-import { getLocalStorage } from '~/utils/localStorage';
+import { getLocalStorage } from '~/lib/persistence';
 
 const GITHUB_TOKEN_KEY = 'github_token';
 

app/components/settings/connections/components/PushToGitHubDialog.tsx

@@ -2,7 +2,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import { useState, useEffect } from 'react';
 import { toast } from 'react-toastify';
 import { motion } from 'framer-motion';
-import { getLocalStorage } from '~/utils/localStorage';
+import { getLocalStorage } from '~/lib/persistence';
 import { classNames } from '~/utils/classNames';
 import type { GitHubUserResponse } from '~/types/GitHub';
 import { logStore } from '~/lib/stores/logs';

app/components/settings/connections/components/RepositorySelectionDialog.tsx

@@ -2,11 +2,11 @@ import type { GitHubRepoInfo, GitHubContent, RepositoryStats } from '~/types/Git
 import { useState, useEffect } from 'react';
 import { toast } from 'react-toastify';
 import * as Dialog from '@radix-ui/react-dialog';
-import { cn } from '~/lib/utils';
-import { getLocalStorage } from '~/utils/localStorage';
-import { classNames as utilsClassNames } from '~/utils/classNames';
+import { classNames } from '~/utils/classNames';
+import { getLocalStorage } from '~/lib/persistence';
 import { motion } from 'framer-motion';
 import { formatSize } from '~/utils/formatSize';
+import { Input } from '~/components/ui/Input';
 
 interface GitHubTreeResponse {
   tree: Array<{
@@ -445,7 +445,7 @@ export function RepositorySelectionDialog({ isOpen, onClose, onSelect }: Reposit
             </Dialog.Title>
             <Dialog.Close
               onClick={handleClose}
-              className={cn(
+              className={classNames(
                 'p-2 rounded-lg transition-all duration-200 ease-in-out',
                 'text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary',
                 'dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textPrimary-dark',
@@ -476,12 +476,13 @@ export function RepositorySelectionDialog({ isOpen, onClose, onSelect }: Reposit
 
             {activeTab === 'url' ? (
               <div className="space-y-4">
-                <input
-                  type="text"
-                  placeholder="Enter GitHub repository URL..."
+                <Input
+                  placeholder="Enter repository URL"
                   value={customUrl}
                   onChange={(e) => setCustomUrl(e.target.value)}
-                  className="w-full px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#252525] border border-[#E5E5E5] dark:border-[#333333] text-bolt-elements-textPrimary"
+                  className={classNames('w-full', {
+                    'border-red-500': false,
+                  })}
                 />
                 <button
                   onClick={handleImport}
@@ -610,7 +611,7 @@ function TabButton({ active, onClick, children }: { active: boolean; onClick: ()
   return (
     <button
       onClick={onClick}
-      className={utilsClassNames(
+      className={classNames(
         'px-4 py-2 h-10 rounded-lg transition-all duration-200 flex items-center gap-2 min-w-[120px] justify-center',
         active
           ? 'bg-purple-500 text-white hover:bg-purple-600'