Merge pull request #8 from utmp/theme

utmp · web-flow · commit 0c08455bda56 · 2025-05-02T15:49:41.000+03:00
Theme controller
diff --git a/README.md b/README.md
@@ -28,6 +28,7 @@
  - Tailwindcss 
  - Vite
  - daisyUI (component library)
+ - Database Sqlite3
 ## How to Contribute
 We need designer, tester and contributers. **OpenConvert** is prototype. If you want to contribute read [this](./CONTRIBUTING.md)
 ### Install dependencies
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openconvert",
-  "version": "1.2.0",
+  "version": "1.3.2",
   "description": "All in one file converter",
   "main": "./out/main/index.js",
   "author": "utmp",
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -2,3 +2,4 @@ onlyBuiltDependencies:
   - electron
   - esbuild
   - sharp
+  - sqlite3
diff --git a/src/main/index.js b/src/main/index.js
@@ -137,7 +137,6 @@ app.on('window-all-closed', () => {
 })
 // handle document conversion
 ipcMain.handle("document:convert", async (event, {filename,inputPath,outputPath, options}) => {
-  console.log('parameters', inputPath,outputPath,filename);
   try {
     const isInstalled = await checkPluginInstalled();
     if (!isInstalled) {
diff --git a/src/main/initPlugin.js b/src/main/initPlugin.js
@@ -99,16 +99,6 @@ export async function checkPluginInstalled() {
     if (!exists) {
       return false;
     }
-    await new Promise((resolve, reject) => {
-      execFile(pluginPath, ['--version'], (error, stdout, stderr) => {
-        if (error) {
-          reject(error);
-        } else {
-          resolve(stdout);
-        }
-      });
-    });
-
     return true;
   } catch (error) {
     console.error('Plugin check failed:', error);
diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -10,7 +10,7 @@
     <title>OpenConvert</title>
   </head>
   <body
-  class="bg-background border border-solid border-transparent h-full m-0  overflow-hidden"
+  class="bg-base-200 border border-solid border-transparent h-full m-0  overflow-hidden"
 >
 
 <div id="app"></div>
diff --git a/src/renderer/router/router.js b/src/renderer/router/router.js
@@ -15,11 +15,6 @@ const routes = [
         path: '/history',
         name: 'history',
         component: () => import('../src/components/History.vue')
-    },
-    {
-        path: '/settings',
-        name: 'settings',
-        component: () => import('../src/components/Settings.vue')
     }
 ]
 const router = createRouter({
diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
@@ -1,7 +1,9 @@
 @import "tailwindcss";
-@plugin "daisyui";
+@plugin "daisyui"{
+    themes: light --default, dark --prefersdark;
 
+}
 @theme{
     --color-midnight:#191e24;
     --color-background : #222831;
-}
+}
diff --git a/src/renderer/src/components/Plugins.vue b/src/renderer/src/components/Plugins.vue
@@ -50,15 +50,14 @@ async function uninstallPlugin(pluginId) {
 </script>
 <template>
   <div class="p-6">
-    <h2 class="text-2xl font-bold text-gray-200 mb-6">Plugins</h2>
+    <h2 class="text-2xl font-bold mb-6">Plugins</h2>
     
     <div class="w-full">
       <!-- Plugin list -->
       <div v-for="plugin in plugins" 
            :key="plugin.id" 
-           class="p-4 flex relative m-4 items-center gap-4 border-5 border-midnight rounded-lg hover:border-indigo-500 group">
+           class="p-4 flex relative m-4 items-center gap-4 border-5 bg-custom-bg border-slate-900 rounded-lg hover:border-indigo-500 group">
         
-        <!-- Plugin Icon (maybe in future releases)-->
         <div class="flex-shrink-0">
           <div class="bg-gray-600 h-32 w-32 rounded flex items-center justify-center">
 <img src="https://mupdf.readthedocs.io/en/latest/_static/mupdf-sidebar-logo-light.png">
@@ -68,22 +67,22 @@ async function uninstallPlugin(pluginId) {
 
         <!-- Main Plugin Info -->
         <div class="w-1/2 flex flex-col justify-between">
-          <div class="text-sm text-gray-300 space-y-2">
+          <div class="text-sm  space-y-2">
             <!-- Name and Publisher -->
             <h3 class="text-lg font-semibold">{{ plugin.name }}</h3>
-            <p class="text-gray-400">by {{ plugin.publisher }}</p>
+            <p class="">by {{ plugin.publisher }}</p>
             <!-- Summary -->
-            <p class="text-gray-400 text-sm ">{{ plugin.summary }}</p>
+            <p class=" text-sm ">{{ plugin.summary }}</p>
           </div>
         </div>
 
         <!-- Plugin Details -->
-        <div class="w-1/3 flex flex-col text-sm text-gray-400 space-y-2">
+        <div class="w-1/3 flex flex-col text-sm  space-y-2">
           <div class="flex items-center gap-2">
             <img src="../assets/github.svg" class="w-4 h-4" alt="GitHub">
             <a :href="plugin.github" 
                target="_blank"
-               class="hover:text-gray-200">GitHub</a>
+               class="hover:">GitHub</a>
           </div>
           <div class="flex items-center gap-2">
             <img src="../assets/filetype.svg" class="w-5 h-5" alt="Version">
diff --git a/src/renderer/src/components/Settings.vue b/src/renderer/src/components/Settings.vue
diff --git a/src/renderer/src/components/Sidebar.vue b/src/renderer/src/components/Sidebar.vue
@@ -1,12 +1,26 @@
 <script setup>
+import { ref, onMounted } from 'vue'
+const isDarkMode = ref(localStorage.getItem('theme') === 'dark')
+function toggleTheme(event) {
+  const isChecked = event.target.checked
+  const theme = isChecked ? 'dark' : 'light'
+  localStorage.setItem('theme', theme)
+  document.documentElement.setAttribute('data-theme', theme)
+  isDarkMode.value = isChecked
+}
+onMounted(() => {
+  const savedTheme = localStorage.getItem('theme') || 'light'
+  document.documentElement.setAttribute('data-theme', savedTheme)
+  isDarkMode.value = savedTheme === 'dark'
+})
 </script>
 
 <template>
     <div class="fixed top-0 left-0 flex h-screen w-16 flex-col justify-between border-e bg-[#000000] border-gray-800">
       <div>
         <div class="inline-flex size-16 items-center justify-center">
           
-           <img src="../assets/logo.svg" class="grid size-10 place-content-center rounded-lg "
+           <img src="../assets/logo.svg" class="grid size-10 place-content-center rounded-lg"
            >
         </div>
   
@@ -19,13 +33,9 @@
                   class="group relative flex justify-center rounded px-2 py-1.5 text-gray-500 hover:bg-[#ffffff1a] hover:text-gray-700"
                   :class="{ 'bg-gradient-to-r from-pink-500 to-purple-600 shadow-pink-600 shadow-[0_4px_20px_rgba(0,0,0,0.3)]': $route.path === '/' }"
                   >
-                  <img src="../assets/convert.svg" class="size-6">
-  
-                  <span
-                    class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
-                  >
-                    Convert
-                  </span>
+                  <div class="tooltip tooltip-right" data-tip="Convert">
+                    <img src="../assets/convert.svg" class="size-6">
+                  </div>
                 </a>
               </li>
               <li>
@@ -35,12 +45,10 @@
                   :class="{ 'bg-gradient-to-r from-pink-500 to-purple-600 shadow-pink-600 shadow-[0_4px_20px_rgba(0,0,0,0.3)]': $route.path === '/plugins' }"
 
                 >
-                <img src="../assets/plugins.svg" class="size-7">
-                  <span
-                    class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
-                  >
-                    Plugins
-                  </span>
+                <div class="tooltip tooltip-right" data-tip="Plugins">
+                  <img src="../assets/plugins.svg" class="size-7">
+                </div>
+                  
                 </router-link>
               </li>
               <li>
@@ -50,31 +58,43 @@
                 :class="{ 'bg-gradient-to-r from-pink-500 to-purple-600 shadow-pink-600 shadow-[0_4px_20px_rgba(0,0,0,0.3)]': $route.path === '/history' }"
 
 >
+<div class="tooltip tooltip-right" data-tip="History">
                <img src="../assets/history.svg" class="size-6">
-<span class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
-                  >
-                    History
-                  </span>
+                  </div>
                 </router-link>
               </li>
             </ul> 
           </div>
         </div>
       </div>
-  
-      <div class="sticky inset-x-0 bottom-0 border-t border-gray-800 bg-[#000000] p-2">
-        <router-link
-          to="/settings"
-          class="group relative flex w-full justify-center rounded-lg px-2 py-1.5 text-sm text-gray-500 hover:bg-[#ffffff1a] hover:text-gray-700"
-          :class="{ 'bg-gradient-to-r from-pink-500 to-purple-600 shadow-pink-600 shadow-[0_4px_20px_rgba(0,0,0,0.3)]': $route.path === '/settings' }"
-        >
-         <img src="../assets/settings.svg" class="size-7">
-          <span
-            class="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
-          >
-            Settings
-          </span>
-        </router-link>
+      <div class="tooltip tooltip-right" data-tip="switch theme">
+         <div class="sticky inset-x-0 bottom-0 border-t border-gray-800 bg-base-400 p-2 flex justify-center">
+        <label class="swap swap-rotate">
+  <!-- this hidden checkbox controls the state -->
+  <input type="checkbox" 
+  class="theme-controller" 
+  :checked="isDarkMode"
+  @change="toggleTheme" 
+  />
+  <svg
+    class="swap-on h-9 w-9"
+    fill="#fff"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24">
+    <path
+      d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+  </svg>
+  <svg
+    class="swap-off h-9 w-9"
+    fill="#fff"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24">
+    <path
+      d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+  </svg>
+</label>
+      </div>
       </div>
+     
     </div>
 </template>
diff --git a/src/renderer/src/components/Upload.vue b/src/renderer/src/components/Upload.vue
@@ -316,15 +316,15 @@ onMounted(async() => {
     <div v-if="showUploadArea" class="drop-area flex items-center justify-center min-h-screen">
       <label
         for="dropzone-file"
-        class="flex flex-col items-center justify-center w-4/5 h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500"
+        class="flex flex-col items-center justify-center w-4/5 h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer"
         :class="{ 'border-primary': isDragging }"
       >
         <div class="flex flex-col items-center justify-center pt-5 pb-6">
           <img src="../assets/folder.svg" alt="folder" class="folder-icon size-24" />
           <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
             <span class="font-semibold">Click to upload</span> or drag and drop
           </p>
-          <p class="text-xs text-gray-500 dark:text-gray-400">Files will be processed here</p>
+          <p class="text-xs text-gray-500">Files will be processed here</p>
         </div>
       </label>
     </div>
@@ -336,7 +336,7 @@ onMounted(async() => {
             @click="clickInput"
             class="btn btn-sm btn-outline btn-primary"
           ><img src="../assets/plus.svg" class="w-5 h-5">
-            Add More Files
+            Add Files
           </button>
         <div class="flex gap-2">
           
@@ -412,7 +412,7 @@ onMounted(async() => {
 
         <!-- File info -->
         <div class="w-1/3 flex flex-col justify-between">
-          <div class="text-sm text-gray-300 space-y-2">
+          <div class="text-sm space-y-2">
             <div class="flex items-center gap-2">
               <img src="../assets/file.svg" class="w-5 h-5" alt="File Icon" />
               <p class="truncate" :title="preview.name">{{ preview.name }}</p>
@@ -436,7 +436,7 @@ onMounted(async() => {
           <img src="../assets/arrow.svg" class="w-14 rotate-180">
         </div>
       <!-- convert file info's -->
-      <div class="w-1/3 ml-12 flex flex-col text-xs text-gray-400 space-y-2">
+      <div class="w-1/3 ml-12 flex flex-col text-xs space-y-2">
   <div class="flex items-center gap-2">
     <img src="../assets/output.svg" class="w-5 h-5" alt="">
     <span>{{ fileOptions[index].format.toUpperCase() }}</span>
@@ -471,7 +471,7 @@ onMounted(async() => {
         </div>
         <!-- Open options popup-->
         <dialog :id="`options_modal_${index}`" class="modal">
-          <div class="modal-box bg-gray-800">
+          <div class="modal-box bg-info-content">
             <form method="dialog">
               <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 text-white">✕</button>
             </form>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "openconvert",`
`3`		`- "version": "1.2.0",`
	`3`	`+ "version": "1.3.2",`
`4`	`4`	`"description": "All in one file converter",`
`5`	`5`	`"main": "./out/main/index.js",`
`6`	`6`	`"author": "utmp",`
-Original file line number
+Diff line change
   - electron
   - esbuild
   - sharp
 +  - sqlite3
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`<title>OpenConvert</title>`
`11`	`11`	`</head>`
`12`	`12`	`<body`
`13`		`- class="bg-background border border-solid border-transparent h-full m-0 overflow-hidden"`
	`13`	`+ class="bg-base-200 border border-solid border-transparent h-full m-0 overflow-hidden"`
`14`	`14`	`>`
`15`	`15`
`16`	`16`	`<div id="app"></div>`
Original file line number	Diff line number	Diff line change
`@@ -15,11 +15,6 @@ const routes = [`
`15`	`15`	`path: '/history',`
`16`	`16`	`name: 'history',`
`17`	`17`	`component: () => import('../src/components/History.vue')`
`18`		`- },`
`19`		`- {`
`20`		`- path: '/settings',`
`21`		`- name: 'settings',`
`22`		`- component: () => import('../src/components/Settings.vue')`
`23`	`18`	`}`
`24`	`19`	`]`
`25`	`20`	`const router = createRouter({`