From 94fbf1551d2cafa10f0febd7606b79244dea546e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Thu, 15 May 2025 10:54:39 +0800
Subject: [PATCH] Add support for database backups and enhance UI elements

Updates UI components and gitignore rules for database backups, adds
Facebook links to news org window, and improves desktop window title
handling.
---
 .gitignore                                    |  3 +
 components/app/windows/aboutNewsOrg.vue       | 30 +++---
 database/README.md                            | 15 +++
 i18n/locales/en.json                          |  1 +
 i18n/locales/zh-tw.json                       |  1 +
 pages/app/desktop/index.vue                   | 97 ++++++++++---------
 .../[slug].ts}                                |  5 +-
 server/api/cached/getData/fetchSidebarData.ts | 13 ---
 8 files changed, 93 insertions(+), 72 deletions(-)
 create mode 100644 database/README.md
 rename server/api/cached/getData/{fetchNewsOrgInfo.ts => fetchNewsOrgInfo/[slug].ts} (73%)
 delete mode 100644 server/api/cached/getData/fetchSidebarData.ts

diff --git a/.gitignore b/.gitignore
index 291e8b7..b24c934 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,3 +29,6 @@ __pycache__
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+*.sql
+!database/*.sql
diff --git a/components/app/windows/aboutNewsOrg.vue b/components/app/windows/aboutNewsOrg.vue
index c5d6004..c7213c1 100644
--- a/components/app/windows/aboutNewsOrg.vue
+++ b/components/app/windows/aboutNewsOrg.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { GlobeAltIcon } from "@heroicons/vue/24/outline";
+import { Facebook } from "lucide-vue-next";
 import { gsap } from "gsap";
 import { ScrambleTextPlugin } from "gsap/dist/ScrambleTextPlugin";
 gsap.registerPlugin(ScrambleTextPlugin);
@@ -17,7 +18,7 @@ const {
   data: fetchNewsOrgInfo,
   pending,
   error,
-} = useFetch("/api/cached/getData/fetchNewsOrgInfo", {
+} = useFetch("/api/cached/getData/fetchNewsOrgInfo/2293", {
   method: "POST",
   headers: {
     "Content-Type": "application/json",
@@ -55,19 +56,24 @@ onMounted(() => {
           <span class="text-ms m-1 mt-5 text-left text-wrap">{{
             fetchNewsOrgInfo?.description
           }}</span>
+          <div
+            class="gap-[3px] flex flex-row text-center align-center justify-center"
+          >
+            <a
+              :href="fetchNewsOrgInfo?.website"
+              target="_blank"
+              class="text-gray-800 hover:text-gray-500 transiton-all duration-150 flex flex-row"
+              ><GlobeAltIcon class="w-6 h-6" />網站</a
+            >
+            <a
+              :href="fetchNewsOrgInfo?.facebook"
+              target="_blank"
+              class="text-gray-800 hover:text-gray-500 transiton-all duration-150 flex flex-row"
+              ><Facebook class="w-6 h-6" />Facebook
+            </a>
+          </div>
         </div>
       </div>
-
-      <div
-        class="gap-[3px] flex flex-row text-center align-center justify-center"
-      >
-        <a
-          :href="fetchNewsOrgInfo?.website"
-          target="_blank"
-          class="text-blue-200 hover:text-blue-300 transiton-all duration-100 flex flex-row"
-          ><GlobeAltIcon class="w-6 h-6" />網站</a
-        >
-      </div>
     </div>
   </div>
 </template>
diff --git a/database/README.md b/database/README.md
new file mode 100644
index 0000000..2205f8c
--- /dev/null
+++ b/database/README.md
@@ -0,0 +1,15 @@
+# Database contents
+This is where I put the database schemas, that contains everything (the user account & password info is NOT avaiable in the backup.)
+
+## How to import
+Import the schema:
+```bash
+psql -d database -f database_dump.sql
+```
+
+## Hoe to create a database_dump
+Type or copy This
+```bash
+pg_dump -U your_username -d your_database --schema-only > schema.sql
+
+```
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index aee15f5..7309b1b 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -51,6 +51,7 @@
   "Welcome": "Welcome",
   "loading": "Loading...",
   "app": {
+    "launchtext": "Cooking up the desktop...",
     "hotnews": "Hot News",
     "news": "News",
     "sources": "Sources",
diff --git a/i18n/locales/zh-tw.json b/i18n/locales/zh-tw.json
index a26e259..ce05095 100644
--- a/i18n/locales/zh-tw.json
+++ b/i18n/locales/zh-tw.json
@@ -51,6 +51,7 @@
   "Welcome": "歡迎",
   "loading": "載入中...",
   "app": {
+    "launchtext": "系統開機中...",
     "hotnews": "熱門新聞",
     "news": "新聞",
     "sources": "資料來源",
diff --git a/pages/app/desktop/index.vue b/pages/app/desktop/index.vue
index 2a3479f..e7c5c64 100644
--- a/pages/app/desktop/index.vue
+++ b/pages/app/desktop/index.vue
@@ -165,21 +165,21 @@ const associAppWindow = [
 
 /*
 const keyboardShortcuts = {
-  'Meta+k': { 
-    action: () => toggleMenu(), 
-    description: 'Toggle menu' 
+  'Meta+k': {
+    action: () => toggleMenu(),
+    description: 'Toggle menu'
   },
-  'Meta+q': { 
-    action: () => router.push(localePath("/home")), 
-    description: 'Quit to home' 
+  'Meta+q': {
+    action: () => router.push(localePath("/home")),
+    description: 'Quit to home'
   },
-  'Meta+w': { 
-    action: () => closeWindow(activeWindows.value[activeWindows.value.length - 1]?.id), 
-    description: 'Close current window' 
+  'Meta+w': {
+    action: () => closeWindow(activeWindows.value[activeWindows.value.length - 1]?.id),
+    description: 'Close current window'
   },
-  'Meta+t': { 
-    action: () => findAndOpenWindow('tty'), 
-    description: 'Open terminal' 
+  'Meta+t': {
+    action: () => findAndOpenWindow('tty'),
+    description: 'Open terminal'
   },
 }
 
@@ -242,16 +242,17 @@ onMounted(() => {
     globalWindowVal.value.set(window.name, {
       id: window.id,
       title: window.title,
-      windowCount: 1
+      windowCount: 1,
     });
   });
-})
+});
+
 const openWindow = (windowName?: string) => {
   if (windowName === "leave") {
     if (confirm("Are you sure?")) {
-      router.push(localePath("/home")); 
+      router.push(localePath("/home"));
     } else {
-      return
+      return;
     }
   } else {
     if (windowName) findAndOpenWindow(windowName);
@@ -316,18 +317,22 @@ const findAndOpenWindow = (windowName: string) => {
     });
     currentOpenAppId.value++;
     // Add to navbar
-    const windowNameVal2 = globalWindowVal.value.get(windowName).windowCount === 1 ? windowName : windowName + "(" + globalWindowVal.value.get(windowName).windowCount + ")"
-    console.log(globalWindowVal.value.get(windowName))
-    console.log(windowNameVal2)
+    const windowNameVal2 =
+      globalWindowVal.value.get(windowName).windowCount === 1
+        ? windowName
+        : windowName +
+          "(" +
+          globalWindowVal.value.get(windowName).windowCount +
+          ")";
     currentNavBar.value.push({
-      name:  windowNameVal2,
+      name: windowNameVal2,
       icon: "anything",
       action: "idk",
       flash: true,
       windowAssociated: abosluteId,
       minimized: false,
     });
-    globalWindowVal.value.get(windowName).windowCount++
+    globalWindowVal.value.get(windowName).windowCount++;
   }
 };
 
@@ -338,7 +343,7 @@ const obtainTopWindowPosition = (windowId: string) => {
     );
     if (windowIndex !== -1) {
       const [window] = activeWindows.value.splice(windowIndex, 1);
-      titleAppName.value = window.name;
+      titleAppName.value = window.title;
       activeWindows.value.push(window);
     }
   }
@@ -349,8 +354,8 @@ const closeWindow = (windowId: string, windowAID: string) => {
     (window) => window.id !== windowId,
   );
   currentNavBar.value = currentNavBar.value.filter(
-    (window) => window.windowAssociated !== windowAID
-  )
+    (window) => window.windowAssociated !== windowAID,
+  );
   console.log("activeWindows.value", activeWindows.value);
 };
 
@@ -366,9 +371,13 @@ const maxWindow = (windowId: string) => {};
 
 // Title
 useSeoMeta({
-  title: titleAppName.value + " - Desktop",
+  title: "Desktop",
+});
+watchEffect(() => {
+  useSeoMeta({
+    title: titleAppName.value + " - Desktop",
+  });
 });
-
 // Booting animation
 onMounted(() => {
   // booting animation bypass
@@ -410,9 +419,7 @@ watchEffect((cleanupFn) => {
         class="w-3/5 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
       />
       <br />
-      <span class="text-xl text-bold mt-3"
-        >Launching your fancy desktop...</span
-      >
+      <span class="text-xl text-bold mt-3">{{ t("app.launchtext") }}</span>
     </div>
   </div>
   <div
@@ -432,24 +439,24 @@ watchEffect((cleanupFn) => {
       <button
         class="flex flex-row items-center gap-x-2 text-gray-400 hover:text-gray-600 transition-all duration-100"
       ></button>
-      <div class="overflow-hidden overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-track-transparent scrollbar-thumb-white flex-nowrap whitespace-nowrap min-w-0">
-        <div class="flex flex-row flex-shrink-0 min-w-0">
-        <div
-        v-for="item in currentNavBar"
-        :key="item.name"
-        class="flex flex-row items-center gap-x-2 hover:bg-gray-100 transition-all duration-150 px-4 py-2 cursor-pointer group rounded-xl"
+      <div
+        class="overflow-hidden overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-track-transparent scrollbar-thumb-white flex-nowrap whitespace-nowrap min-w-0"
       >
-        <button
-          @click="unMinWindow(item.windowAssociated)"
-          class="flex flex-row items-center gap-x-2 text-gray-400 hover:text-gray-600 transition-all duration-100"
-        >
-          <component :is="item.icon" v-if="item.icon"></component>
-          <span>{{ item.name }}</span>
-        </button>
+        <div class="flex flex-row flex-shrink-0 min-w-0">
+          <div
+            v-for="item in currentNavBar"
+            :key="item.name"
+            class="flex flex-row items-center gap-x-2 hover:bg-gray-100 transition-all duration-150 px-4 py-1 cursor-pointer group rounded-xl"
+          >
+            <button
+              @click="unMinWindow(item.windowAssociated)"
+              class="flex flex-row items-center gap-x-2 text-gray-400 hover:text-gray-600 transition-all duration-100"
+            >
+              <span>{{ item.name }}</span>
+            </button>
+          </div>
+        </div>
       </div>
-      
-    </div>
-  </div>
     </div>
     <div class="flex flex-row gap-5">
       <button
diff --git a/server/api/cached/getData/fetchNewsOrgInfo.ts b/server/api/cached/getData/fetchNewsOrgInfo/[slug].ts
similarity index 73%
rename from server/api/cached/getData/fetchNewsOrgInfo.ts
rename to server/api/cached/getData/fetchNewsOrgInfo/[slug].ts
index e23374a..f1119df 100644
--- a/server/api/cached/getData/fetchNewsOrgInfo.ts
+++ b/server/api/cached/getData/fetchNewsOrgInfo/[slug].ts
@@ -1,12 +1,13 @@
 export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, "slug");
   const body = await readBody(event);
   return {
     body: body,
     title: "News Org 1",
     slug: "taisounds",
-    website: "https://www.taisounds.com.tw",
+    website: "https://yuanhau.com",
     description: "wah wah wah wah wah wah I dont fucking care",
-    facebook: "https://www.facebook.com/taisounds",
+    facebook: "https://www.facebook.csdkc",
     logoUrl:
       "https://cdn.discordapp.com/avatars/918723093646684180/4eecc27ac05ee8a701fa167808610c7a.jpg",
   };
diff --git a/server/api/cached/getData/fetchSidebarData.ts b/server/api/cached/getData/fetchSidebarData.ts
deleted file mode 100644
index 938b6c7..0000000
--- a/server/api/cached/getData/fetchSidebarData.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default defineEventHandler(async (event) => {
-  const body = await readBody(event);
-  return {
-    0: {
-      id: "1",
-      image: "whatever",
-      tags: [],
-      title: "三立新聞",
-      lean: "left",
-      score: "40",
-    },
-  };
-});