anasayfaya takvim ekleme deneme.

src/main.js

@@ -17,14 +17,15 @@ async function render() {
   }
 
   let currentBg =
-    localStorage.getItem("selected_bg") ||
+    user.selected_bg ||
     "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920";
 
   // Sayfayı Yükle
   let currentPage;
   if (activeTab === "settings") {
     currentPage = await renderSettings(pb, currentBg, (newBg) => {
-      localStorage.setItem("selected_bg", newBg);
+      // Veritabanı güncellendiğinde yerel kullanıcı modelini tazeleyip render ediyoruz
+      pb.authStore.model.selected_bg = newBg;
       render();
     });
   } else {

src/pages/settings.js

@@ -15,35 +15,25 @@ export async function renderSettings(pb, currentBg, onBgSelect) {
   const html = `
     <div class="bg-slate-900/60 backdrop-blur-2xl border border-white/10 p-8 rounded-3xl shadow-2xl max-w-4xl w-full h-[80vh] flex flex-col">
       <h2 class="text-2xl font-bold text-white mb-2">⚙️ Sistem Ayarları</h2>
-      <p class="text-slate-400 text-sm mb-6">PocketBase sunucundaki duvar kağıtlarından birini seçerek arka planı özelleştir.</p>
+      <p class="text-slate-400 text-sm mb-6">Seçtiğin duvar kağıdı doğrudan PocketBase hesabına kaydedilir.</p>
 
       <div class="flex-1 overflow-y-auto pr-2">
         <h3 class="text-sm font-semibold text-slate-300 mb-4">Arka Plan Galerisi (${bgList.length})</h3>
         
-        ${
+        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-          bgList.length === 0
+          ${bgList
-            ? `
+            .map(
-          <div class="text-center py-12 border border-dashed border-white/10 rounded-2xl text-slate-500">
+              (bg) => `
-            PocketBase 'backgrounds' koleksiyonunda henüz görsel bulunamadı.
+            <div data-url="${bg.url}" class="bg-card group relative h-40 rounded-2xl overflow-hidden border-2 cursor-pointer transition-all duration-300 hover:scale-[1.02] ${currentBg === bg.url ? "border-indigo-500 ring-4 ring-indigo-500/20" : "border-white/10 hover:border-white/30"}">
-          </div>
+              <img src="${bg.url}" alt="${bg.title}" class="w-full h-full object-cover" />
-        `
+              <div class="absolute inset-0 bg-linear-to-t from-slate-950/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity flex items-end p-3">
-            : `
+                <span class="text-xs font-medium text-white truncate">${bg.title}</span>
-          <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-            ${bgList
-              .map(
-                (bg) => `
-              <div data-url="${bg.url}" class="bg-card group relative h-40 rounded-2xl overflow-hidden border-2 cursor-pointer transition-all duration-300 hover:scale-[1.02] ${currentBg === bg.url ? "border-indigo-500 ring-4 ring-indigo-500/20" : "border-white/10 hover:border-white/30"}">
-                <img src="${bg.url}" alt="${bg.title}" class="w-full h-full object-cover" />
-                <div class="absolute inset-0 bg-linear-to-t from-slate-950/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity flex items-end p-3">
-                  <span class="text-xs font-medium text-white truncate">${bg.title}</span>
-                </div>
               </div>
-            `,
+            </div>
-              )
+          `,
-              .join("")}
+            )
-          </div>
+            .join("")}
-        `
+        </div>
-        }
       </div>
     </div>
   `;
@@ -52,9 +42,20 @@ export async function renderSettings(pb, currentBg, onBgSelect) {
     html,
     initEvents: (container) => {
       container.querySelectorAll(".bg-card").forEach((card) => {
-        card.addEventListener("click", () => {
+        card.addEventListener("click", async () => {
           const selectedUrl = card.getAttribute("data-url");
-          onBgSelect(selectedUrl);
+
+          try {
+            // PocketBase'deki aktif kullanıcının 'selected_bg' alanını güncelliyoruz
+            await pb.collection("users").update(pb.authStore.model.id, {
+              selected_bg: selectedUrl,
+            });
+
+            // Ekranı yeni ayarla güncelle
+            onBgSelect(selectedUrl);
+          } catch (err) {
+            console.error("Ayar kaydedilemedi:", err);
+          }
         });
       });
     },