feat: update folder card component and my-file view for improved styling and structure

Author: pphatdev

src/client/utils/modules.ts

@@ -16,13 +16,13 @@ export const modules = [
         className: defaultClass,
         activeClassName: activeClass
     },
-    {
-        name: "Shared",
-        url: "/shared",
-        icon: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>`,
-        className: defaultClass,
-        activeClassName: activeClass
-    },
+    // {
+    //     name: "Shared",
+    //     url: "/shared",
+    //     icon: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>`,
+    //     className: defaultClass,
+    //     activeClassName: activeClass
+    // },
     {
         name: "Recent",
         url: "/recent",

src/client/views/components/folder-card.ejs

@@ -1,10 +1,10 @@
 <!-- Folder Card Component -->
-<div class="p-4 bg-white border border-slate-100 rounded-xl hover:border-primary/20 hover:shadow-md transition-all cursor-pointer group">
+<div class="p-4 bg-white border border-foreground/5 rounded-xl hover:border-primary/20 transition-all cursor-pointer group">
     <div class="flex items-start justify-between mb-2">
-        <div class="p-2 <%= iconBg || 'bg-primary/5' %> text-<%= iconColor || 'primary' %> rounded-lg group-hover:bg-primary group-hover:text-white transition-all">
-            <%- icon || (`<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>` ) %>
+        <div class="p-2 <%= typeof iconBg !== 'undefined' ? iconBg : 'bg-primary/5' %> text-<%= typeof iconColor !== 'undefined' ? iconColor : 'primary' %> rounded-lg group-hover:bg-primary group-hover:text-white transition-all">
+            <%- (typeof icon !== 'undefined' ? icon : '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>') %>
         </div>
-        <button class="p-1 text-slate-300 hover:text-slate-600"><%- moreIcon || (`<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01"></path></svg>`) %></button>
+        <button class="p-1 text-slate-300 hover:text-slate-600"><%- (typeof moreIcon !== 'undefined' ? moreIcon : '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01"></path></svg>') %></button>
     </div>
     <h4 class="font-bold text-slate-900 text-sm"><%= title %></h4>
     <p class="text-[10px] text-slate-400"><%= count %></p>

src/client/views/pages/my-file.ejs

@@ -70,10 +70,10 @@
         <div class="mb-12">
             <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6">Folders</h3>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                <%- include('../components/folder-card', { title: '01. Assets', count: '128 files', icon: '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>', iconBg: 'bg-primary/5', iconColor: 'primary' }) %>
-                <%- include('../components/folder-card', { title: '02. Components', count: '45 files', icon: '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>', iconBg: 'bg-primary/5', iconColor: 'primary' }) %>
-                <%- include('../components/folder-card', { title: '03. Templates', count: '12 files', icon: '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>', iconBg: 'bg-primary/5', iconColor: 'primary' }) %>
-                <%- include('../components/folder-card', { title: 'Documentation', count: '8 files', icon: '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>', iconBg: 'bg-primary/5', iconColor: 'primary' }) %>
+                <%- include('../components/folder-card', { title: '01. Assets', count: '128 files', icon: '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>', className: 'bg-primary/5' }) %>
+                <%- include('../components/folder-card', { title: '02. Components', count: '45 files', icon: '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>', className: 'bg-primary/5' }) %>
+                <%- include('../components/folder-card', { title: '03. Templates', count: '12 files', icon: '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>', className: 'bg-primary/5' }) %>
+                <%- include('../components/folder-card', { title: 'Documentation', count: '8 files', icon: '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>', className: 'bg-primary/5' }) %>
             </div>
         </div>