new day new cleanup

src-tauri/common/src/clipboard.rs

@@ -0,0 +1,44 @@
+use crate::{constants::MAX_TEXT_PREVIEW, types::orm_query::ClipboardWithRelations};
+
+pub fn trim_clipboard_data(
+    mut clipboards: Vec<ClipboardWithRelations>,
+) -> Vec<ClipboardWithRelations> {
+    for clipboard in &mut clipboards {
+        // Trim text content
+        if let Some(text) = &mut clipboard.text {
+            text.data = truncate_text(&text.data, MAX_TEXT_PREVIEW);
+        }
+
+        // Trim HTML content
+        if let Some(html) = &mut clipboard.html {
+            html.data = truncate_text(&html.data, MAX_TEXT_PREVIEW);
+        }
+
+        // Trim RTF content
+        if let Some(rtf) = &mut clipboard.rtf {
+            rtf.data = truncate_text(&rtf.data, MAX_TEXT_PREVIEW);
+        }
+
+        // Remove image binary data but keep metadata
+        if let Some(image) = &mut clipboard.image {
+            image.data = Vec::new(); // Clear binary data
+                                     // Thumbnail, dimensions, size etc are preserved
+        }
+
+        // Clear file binary data but keep metadata
+        for file in &mut clipboard.files {
+            file.data = Vec::new(); // Clear binary data
+                                    // Name, extension, size etc are preserved
+        }
+    }
+
+    clipboards
+}
+
+fn truncate_text(text: &str, max_length: usize) -> String {
+    if text.len() <= max_length {
+        text.to_string()
+    } else {
+        format!("{}...", &text[..max_length])
+    }
+}

src-tauri/common/src/constants.rs

@@ -19,6 +19,7 @@ pub static SETTINGS_WINDOW_X: i32 = 500;
 pub static SETTINGS_WINDOW_Y: i32 = 450;
 
 pub static MAX_IMAGE_DIMENSIONS: u32 = 1280;
+pub static MAX_TEXT_PREVIEW: usize = 500; // Adjust preview length as needed
 
 pub static DISPLAY_SCALE: f32 = 1.0;
 pub static DISPLAY_SCALE_MIN: f32 = 0.5;

src-tauri/common/src/lib.rs

@@ -2,4 +2,5 @@ pub mod keyboard;
 pub mod language;
 pub mod macros;
 pub mod types;
+pub mod clipboard;
 pub mod constants;

src-tauri/common/src/types/orm_query.rs

@@ -14,6 +14,13 @@ pub struct ClipboardWithRelations {
     pub files: Vec<clipboard_file::Model>,
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ClipboardsResponse {
+    pub clipboards: Vec<ClipboardWithRelations>,
+    pub total: u64,
+    pub has_more: bool,
+}
+
 #[derive(Debug, Clone)]
 pub struct ClipboardManager {
     pub clipboard_model: entity::clipboard::ActiveModel,

src-tauri/src/commands/clipboard.rs

@@ -2,13 +2,16 @@ extern crate alloc;
 extern crate image;
 use crate::{
     service::clipboard::{
-        clear_clipboards_db, copy_clipboard_from_id, delete_clipboard_db, get_clipboard_db,
-        get_clipboards_db, star_clipboard_db,
+        clear_clipboards_db, copy_clipboard_from_id, delete_clipboard_db, get_clipboard_count_db,
+        get_clipboard_db, get_clipboards_db, star_clipboard_db,
     },
     tauri_config::config::APP,
     utils::hotkey_manager::unregister_hotkeys,
 };
-use common::types::{enums::ClipboardType, orm_query::ClipboardWithRelations, types::CommandError};
+use common::{
+    clipboard::trim_clipboard_data,
+    types::{enums::ClipboardType, orm_query::ClipboardsResponse, types::CommandError},
+};
 use std::fs::File;
 use tauri::Manager;
 
@@ -18,8 +21,19 @@ pub async fn get_clipboards(
     search: Option<String>,
     star: Option<bool>,
     img: Option<bool>,
-) -> Result<Vec<ClipboardWithRelations>, CommandError> {
-    Ok(get_clipboards_db(cursor, search, star, img).await?)
+) -> Result<ClipboardsResponse, CommandError> {
+    let clipboards = get_clipboards_db(cursor, search, star, img).await?;
+    let total = get_clipboard_count_db().await?;
+
+    // Calculate if there are more items
+    let current_position = cursor.unwrap_or(0) + clipboards.len() as u64;
+    let has_more = current_position < total;
+
+    Ok(ClipboardsResponse {
+        clipboards: trim_clipboard_data(clipboards),
+        total,
+        has_more,
+    })
 }
 
 #[tauri::command]

src-tauri/src/service/clipboard.rs

@@ -47,6 +47,14 @@ pub async fn load_clipboards_with_relations(
         .collect()
 }
 
+pub async fn get_clipboard_count_db() -> Result<u64, DbErr> {
+    let db = connection::db().await?;
+
+    let count = clipboard::Entity::find().count(&db).await?;
+
+    Ok(count)
+}
+
 pub async fn insert_clipboard_db(model: ClipboardManager) -> Result<ClipboardWithRelations, DbErr> {
     let db = connection::db().await?;
     let clipboard = model.clipboard_model.insert(&db).await?;
@@ -181,7 +189,7 @@ pub async fn get_clipboards_db(
             q.filter(f)
         })
         .offset(cursor)
-        .limit(10)
+        .limit(25)
         .order_by_desc(clipboard::Column::Id);
 
     Ok(load_clipboards_with_relations(query.all(&db).await?).await)

src/components/pages/app/app.tsx

@@ -1,13 +1,13 @@
 import { BsHddFill } from "solid-icons/bs";
 import { FiGlobe } from "solid-icons/fi";
 import { Show } from "solid-js";
+import { AppStore } from "../../../store/app-store";
+import { SettingsStore } from "../../../store/settings-store";
 import { AppSidebar } from "../../navigation/app-sidebar";
 import { ClipboardHistory } from "./clipboard-history";
 import { RecentClipboards } from "./recent-clipboards";
 import { StarredClipboards } from "./starred-clipboards";
 import { ViewMore } from "./view-more";
-import { AppStore } from "../../../store/app-store";
-import { SettingsStore } from "../../../store/settings-store";
 
 function App() {
   const { settings } = SettingsStore;
@@ -19,7 +19,7 @@ function App() {
         <AppSidebar />
       </div>
       <div class="flex h-screen min-w-0 flex-1 flex-col">
-        <div class="flex w-full justify-between px-2 py-1">
+        <div class="z-10 flex w-full justify-between overflow-visible px-2 py-1">
           <p class="select-none bg-gray-50 text-xs font-semibold text-gray-500 dark:bg-dark-dark dark:text-white">
             {getCurrentTab()?.name?.toUpperCase()}
           </p>

src/components/pages/app/clipboard/base-clipboard.tsx

@@ -18,12 +18,16 @@ interface BaseClipboardProps {
 }
 
 export const BaseClipboard: Component<BaseClipboardProps> = (props) => {
-  const { setClipboards } = ClipboardStore;
+  const { setClipboards, resetClipboards } = ClipboardStore;
   const { clipboard } = props.data;
 
   const handleDelete = async (id: number) => {
     if (await invokeCommand(InvokeCommand.DeleteClipboard, { id })) {
-      setClipboards((prev) => prev.filter((o) => o.clipboard.id !== id));
+      setClipboards((prev) => {
+        const updated = prev.filter((o) => o.clipboard.id !== id);
+        if (!updated.length) resetClipboards();
+        return updated;
+      });
     }
   };
 
@@ -66,45 +70,47 @@ export const BaseClipboard: Component<BaseClipboardProps> = (props) => {
   return (
     <div class="group relative">
       {/* Actions overlay */}
-      <div class="absolute bottom-0 right-0 top-0 z-10 flex flex-col items-end justify-between">
-        <div class="flex flex-col justify-between">
-          <VsStarFull
-            onClick={(e) => {
-              e.stopPropagation();
-              handleStar(clipboard);
-            }}
-            class={`${
-              clipboard.star ? "text-yellow-400 dark:text-yellow-300" : "hidden text-zinc-700"
-            } text-lg hover:text-yellow-400 group-hover:block dark:text-white dark:hover:text-yellow-300`}
+      <div class="absolute bottom-0 right-0 top-0 z-10 my-1 mr-0.5 flex flex-col items-end justify-between">
+        <VsStarFull
+          onClick={(e) => {
+            e.stopPropagation();
+            handleStar(clipboard);
+          }}
+          title="Star"
+          class={`${
+            clipboard.star ? "text-yellow-400 dark:text-yellow-300" : "hidden text-zinc-700"
+          } cursor-pointer text-lg hover:text-yellow-400 group-hover:block dark:text-white dark:hover:text-yellow-300`}
+        />
+        {props.data.rtf && (
+          <BsJournalRichtext
+            onClick={handleRtfCopy}
+            title="Copy as RTF"
+            class="hidden cursor-pointer text-lg text-zinc-700 hover:text-blue-600 group-hover:block dark:text-white dark:hover:text-blue-400"
+          />
+        )}
+        {props.data.html && (
+          <TbSourceCode
+            onClick={handleHtmlCopy}
+            title="Copy as HTML"
+            class="hidden cursor-pointer text-lg text-zinc-700 hover:text-green-600 group-hover:block dark:text-white dark:hover:text-green-400"
           />
-          {props.data.rtf && (
-            <BsJournalRichtext
-              onClick={handleRtfCopy}
-              title="Copy as RTF"
-              class="hidden text-lg text-zinc-700 hover:text-blue-600 group-hover:block dark:text-white dark:hover:text-blue-400"
-            />
-          )}
-          {props.data.html && (
-            <TbSourceCode
-              onClick={handleHtmlCopy}
-              title="Copy as HTML"
-              class="hidden text-lg text-zinc-700 hover:text-green-600 group-hover:block dark:text-white dark:hover:text-green-400"
-            />
-          )}
-        </div>
+        )}
         <IoTrashOutline
           onClick={(e) => {
             e.stopPropagation();
             handleDelete(clipboard.id);
           }}
-          class="hidden text-lg text-zinc-700 hover:text-red-600 group-hover:block dark:text-white dark:hover:text-red-600"
+          title="Delete"
+          class="hidden cursor-pointer text-lg text-zinc-700 hover:text-red-600 group-hover:block dark:text-white dark:hover:text-red-600"
         />
       </div>
 
       {/* Content rendered by specific clipboard type */}
       {clipboard.types.includes(ClipboardType.Image) && <ImageClipboard {...props} />}
       {clipboard.types.includes(ClipboardType.File) && <FileClipboard {...props} />}
-      {clipboard.types.includes(ClipboardType.Text) && <TextClipboard {...props} />}
+      {(clipboard.types.includes(ClipboardType.Text) ||
+        clipboard.types.includes(ClipboardType.Html) ||
+        clipboard.types.includes(ClipboardType.Rtf)) && <TextClipboard {...props} />}
     </div>
   );
 };

src/components/pages/app/clipboard/clipboards.tsx

@@ -6,6 +6,7 @@ import { Component, For, Show, createSignal, onMount } from "solid-js";
 import clippy from "../../../../assets/clippy.png";
 import { ClipboardStore } from "../../../../store/clipboard-store";
 import { HotkeyStore } from "../../../../store/hotkey-store";
+import { HotkeyEvent } from "../../../../types/enums";
 import { ListenEvent } from "../../../../types/tauri-listen";
 import { listenEvent } from "../../../../utils/tauri";
 import { BaseClipboard } from "./base-clipboard";
@@ -14,7 +15,7 @@ dayjs.extend(utc);
 dayjs.extend(relativeTime);
 
 export const Clipboards: Component = () => {
-  const { clipboards, setClipboards, getClipboards, setWhere, clipboardRef, setClipboardRef } = ClipboardStore;
+  const { clipboards, setClipboards, getClipboards, setWhere, clipboardRef, setClipboardRef, hasMore } = ClipboardStore;
   const { globalHotkeyEvent, hotkeys } = HotkeyStore;
   const [scrollToTop, setScrollToTop] = createSignal(false);
 
@@ -26,7 +27,7 @@ export const Clipboards: Component = () => {
 
     clipboardRef()!.scrollTop !== 0 ? setScrollToTop(true) : setScrollToTop(false);
 
-    if (bottom) {
+    if (bottom && hasMore()) {
       setWhere((prev) => ({ ...prev, cursor: clipboards().length }));
       const newClipboards = await getClipboards();
       setClipboards((prev) => [...prev, ...newClipboards]);
@@ -56,7 +57,7 @@ export const Clipboards: Component = () => {
               <FiArrowUp class="text-xl !text-white dark:!text-white" />
               <Show when={globalHotkeyEvent()}>
                 <div class="absolute left-0 top-0 -ml-3 -mt-3 rounded-sm bg-zinc-600 px-1 text-[12px] font-semibold">
-                  {hotkeys().find((key) => key.event === "scroll_to_top")?.key}
+                  {hotkeys().find((key) => key.event === HotkeyEvent.ScrollToTop)?.key}
                 </div>
               </Show>
             </div>

src/components/pages/app/clipboard/file-clipboard.tsx

@@ -1,12 +1,12 @@
-import dayjs from "dayjs";
 import { VsFileBinary } from "solid-icons/vs";
 import { Component } from "solid-js";
 import { ClipboardFileModel, ClipboardWithRelations } from "../../../../types";
 import { ClipboardType } from "../../../../types/enums";
 import { InvokeCommand } from "../../../../types/tauri-invoke";
 import { formatBytes } from "../../../../utils/helpers";
 import { invokeCommand } from "../../../../utils/tauri";
-import { HotkeyNumber } from "../../../utils/hotkey-number";
+import { ClipboardFooter } from "../../../utils/clipboard/clipboard-footer";
+import { ClipboardHeader } from "../../../utils/clipboard/clipboard-header";
 
 interface FileClipboardProps {
   data: ClipboardWithRelations;
@@ -36,7 +36,6 @@ export const FileClipboard: Component<FileClipboardProps> = (props) => {
       },
       {} as Record<string, { count: number; size: number; files: ClipboardFileModel[] }>
     );
-
     return grouped || {};
   };
 
@@ -52,36 +51,22 @@ export const FileClipboard: Component<FileClipboardProps> = (props) => {
     <button
       type="button"
       onClick={handleClick}
-      class="group w-full cursor-pointer select-none px-3 hover:bg-zinc-200 dark:hover:bg-neutral-700"
+      class="group w-full cursor-pointer select-none hover:bg-zinc-200 dark:hover:bg-neutral-700"
     >
-      <div class="px-0.5 py-3">
-        <div class="flex min-w-0">
-          <div class="flex items-center">
-            <div class="relative" title={props.data.clipboard.id.toString()}>
-              <VsFileBinary class="text-2xl text-zinc-700 dark:text-white" />
-              <HotkeyNumber index={props.index} />
-            </div>
-          </div>
-          <div class="mr-4 truncate px-4">
-            <div class="flex items-center gap-2" title={getFileListTitle()}>
-              <div class="flex flex-wrap">
-                {Object.entries(groupedFiles).map(([type, data], index) => (
-                  <>
-                    <span class="flex items-center gap-1">
-                      <span class="text-sm">
-                        {data.count} {type}
-                      </span>
-                      <span class="text-xs text-zinc-500">{formatBytes(data.size)}</span>
-                    </span>
-                  </>
-                ))}
-              </div>
-            </div>
-          </div>
+      <div class="mt-2 flex gap-2">
+        <ClipboardHeader {...props} Icon={VsFileBinary} />
+        <div class="flex flex-wrap gap-2" title={getFileListTitle()}>
+          {Object.entries(groupedFiles).map(([type, data]) => (
+            <span class="flex items-center gap-1">
+              <span class="text-sm">
+                {data.count} {type}
+              </span>
+              <span class="text-xs text-zinc-500">{formatBytes(data.size)}</span>
+            </span>
+          ))}
         </div>
-        <div class="pl-9 text-left text-xs text-zinc-400">{dayjs.utc(props.data.clipboard.created_date).fromNow()}</div>
       </div>
-      <hr class="border-zinc-400 dark:border-zinc-700" />
+      <ClipboardFooter {...props} />
     </button>
   );
 };