feat: update folder card styling (#61)

Author: 3xpyth0n

CHANGELOG.md

@@ -5,17 +5,23 @@ All notable changes to this project will be documented in this file.
 The Ideon project follows the [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) format
 and uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.4] - 2026-03-20
+
+### Added
+
+- Improved folder block styling [#61](https://github.com/3xpyth0n/ideon/issues/61).
+
 ## [0.7.3] - 2026-03-19
 
 ### Added
 
-- Updated sync indicator to accurately reflect WebSocket connection issues. (#59)
+- Updated sync indicator to accurately reflect WebSocket connection issues [#59](https://github.com/3xpyth0n/ideon/issues/59).
 
 ## [0.7.2] - 2026-03-18
 
 ### Added
 
-- Create blocks and folders by dragging an arrow onto the canvas (#57)
+- Create blocks and folders by dragging an arrow onto the canvas [#57](https://github.com/3xpyth0n/ideon/issues/57).
 
 ## [0.7.1] - 2026-03-16
 

package-lock.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package.json",
   "name": "ideon",
   "private": true,
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "The Visual Hub for Everything Your Project Needs",
   "license": "AGPL-3.0-or-later",
   "repository": {

package.json

@@ -501,7 +501,13 @@ export function ManagementClient() {
                         <div className="provider-status">
                           <span
                             className={`status-dot ${
-                              config.enabled ? "active" : ""
+                              p.key === "vercel"
+                                ? config.oauthEnabled
+                                  ? "active"
+                                  : ""
+                                : config.enabled
+                                  ? "active"
+                                  : ""
                             }`}
                           />
                           {p.key === "vercel"

src/app/(main)/management/ManagementClient.tsx

@@ -42,7 +42,10 @@ export async function GET() {
       [key, value]: [string, unknown],
     ) => {
       const provider = value as AuthProvider;
-      if (provider.enabled) {
+      const isVercel = key === "vercel";
+      const isEnabled = isVercel ? !!provider.oauthEnabled : provider.enabled;
+
+      if (isEnabled) {
         acc[key] = {
           enabled: true,
           clientId: provider.clientId,

src/app/api/auth/settings/route.ts

@@ -785,13 +785,9 @@ export function ProjectList({ view, folderId }: ProjectListProps) {
                 onDrop={(e) => !isTrash && handleDrop(e, folder.id)}
                 data-folder-id={folder.id}
                 {...touchHandlers}
-                className={`project-card group relative flex flex-col justify-between cursor-pointer transition-colors ${
+                className={`project-card folder-card-style group relative flex flex-col justify-between cursor-pointer transition-colors ${
                   isTrash ? "cursor-default opacity-75" : ""
-                } ${
-                  dragOverFolderId === folder.id
-                    ? "border-blue-500! bg-blue-800! dark:bg-blue-500/20!"
-                    : "border-blue-500/20! hover:border-blue-500/50! bg-blue-950! hover:bg-blue-900! dark:bg-blue-500/5! dark:hover:bg-blue-500/10!"
-                }`}
+                } ${dragOverFolderId === folder.id ? "drag-over" : ""}`}
               >
                 <div>
                   <div className="flex items-start justify-between mb-2">
@@ -882,8 +878,8 @@ export function ProjectList({ view, folderId }: ProjectListProps) {
                     <span
                       className={`text-[8px] font-black uppercase tracking-[0.2em] px-2 py-0.5 border ${
                         folder.ownerId === currentUser?.id
-                          ? "border-white/10 bg-white/5 text-white/60"
-                          : "border-accent/20 bg-accent/5 text-accent/60"
+                          ? "badge-owner"
+                          : "badge-collaborator"
                       }`}
                     >
                       {folder.ownerId === currentUser?.id ? "MINE" : "SHARED"}
@@ -1100,8 +1096,8 @@ export function ProjectList({ view, folderId }: ProjectListProps) {
                   <span
                     className={`text-[8px] font-black uppercase tracking-[0.2em] px-2 py-0.5 border ${
                       project.ownerId === currentUser?.id
-                        ? "border-white/10 bg-white/5 text-white/60"
-                        : "border-accent/20 bg-accent/5 text-accent/60"
+                        ? "badge-owner"
+                        : "badge-collaborator"
                     }`}
                   >
                     {project.ownerId === currentUser?.id

src/app/components/dashboard/ProjectList.tsx

@@ -79,7 +79,9 @@ export function getSecurityHeaders(nonce: string) {
 
   const cspHeader = [
     "default-src 'self';",
-    `script-src 'self' 'nonce-${nonce}';`,
+    `script-src 'self' 'nonce-${nonce}' ${
+      process.env.NODE_ENV === "development" ? "'unsafe-eval'" : ""
+    };`,
     "style-src 'self' 'unsafe-inline' fonts.googleapis.com;",
     "img-src 'self' data: blob: https:;",
     "font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com https://esm.sh;",

src/app/lib/utils.ts

@@ -789,6 +789,44 @@
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
 }
 
+.project-card.folder-card-style {
+  background: #dbeafe;
+  border: 1px solid #93c5fd;
+}
+
+.project-card.folder-card-style:hover {
+  background: #c3daff;
+  border-color: #60a5fa;
+  transform: translateY(-4px);
+}
+
+.badge-owner {
+  border: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent);
+  background-color: color-mix(in srgb, var(--text-main) 5%, transparent);
+  color: color-mix(in srgb, var(--text-main) 60%, transparent);
+}
+
+.badge-collaborator {
+  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
+  background-color: color-mix(in srgb, var(--accent) 5%, transparent);
+  color: color-mix(in srgb, var(--accent) 60%, transparent);
+}
+
+.folder-card-style.drag-over {
+  background-color: #dbeafe;
+  border-color: #3b82f6;
+}
+
+[data-theme="dark"] .folder-card-style {
+  background-color: #060d19;
+  border-color: #12274a;
+}
+
+[data-theme="dark"] .folder-card-style:hover {
+  background-color: #0c1a32;
+  border-color: #1e3a8a;
+}
+
 .project-card-desc {
   font-size: 14px;
   color: var(--text-muted);

src/app/styles/components.css

@@ -320,8 +320,8 @@ body.sketch-modal-open
 
 .preview-action-btn {
   padding: 4px;
-  transition-property:
-    color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color,
+    text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
   display: flex;