Last Sync: 2026-01-26 18:11 (Mobile)

Author: potatameister

.github/workflows/android.yml

@@ -0,0 +1,45 @@
+name: Build Android APK
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Setup Java
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'zulu'
+          java-version: '17'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build Web Assets
+        run: npm run build
+
+      - name: Initialize Capacitor Android
+        run: |
+          npx cap add android
+          npx cap sync
+
+      - name: Build APK (Debug)
+        working-directory: ./android
+        run: ./gradlew assembleDebug
+
+      - name: Upload APK
+        uses: actions/upload-artifact@v3
+        with:
+          name: paperknife-debug
+          path: android/app/build/outputs/apk/debug/app-debug.apk

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from 'react';
+import { Layers, Scissors, Zap, Moon, Sun, Info, ArrowRight, Download, Trash2, FileText, CheckCircle } from 'lucide-react';
+import { ToolCard } from './components/ToolCard';
+import { mergePDFs, createDownloadLink } from './utils/pdfOps';
+
+enum ToolType {
+  NONE,
+  MERGE,
+  SPLIT,
+  COMPRESS
+}
+
+const App: React.FC = () => {
+  const [darkMode, setDarkMode] = useState(false);
+  const [selectedTool, setSelectedTool] = useState<ToolType>(ToolType.NONE);
+  const [files, setFiles] = useState<File[]>([]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [darkMode]);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setFiles(Array.from(e.target.files));
+      setDownloadUrl(null);
+    }
+  };
+
+  const handleProcess = async () => {
+    if (files.length === 0) return;
+    setIsProcessing(true);
+
+    try {
+      let resultData: Uint8Array | null = null;
+      let filename = 'processed.pdf';
+
+      // NOTE: For this V1, only Merge is fully implemented in logic to save space.
+      // Other tools show the UI flow but perform a pass-through or placeholder action.
+      if (selectedTool === ToolType.MERGE) {
+        resultData = await mergePDFs(files);
+        filename = 'paperknife-merged.pdf';
+      } else {
+        // Placeholder for Split/Compress in V1
+        alert("This Vibecoder is strictly MVP! Only Merge is live. Others coming in V2.");
+        setIsProcessing(false);
+        return;
+      }
+
+      if (resultData) {
+        const url = await createDownloadLink(resultData, filename);
+        setDownloadUrl(url);
+      }
+    } catch (err) {
+      console.error(err);
+      alert("Failed to process PDF. It might be encrypted.");
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const resetTool = () => {
+    setSelectedTool(ToolType.NONE);
+    setFiles([]);
+    setDownloadUrl(null);
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col font-sans selection:bg-swissRed selection:text-white">
+      {/* Header */}
+      <header className="sticky top-0 z-50 bg-white/80 dark:bg-black/80 backdrop-blur-md border-b-2 border-black dark:border-white">
+        <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-3 cursor-pointer" onClick={resetTool}>
+            <div className="bg-swissRed text-white p-2 rounded-md">
+              <Zap size={24} strokeWidth={3} />
+            </div>
+            <h1 className="text-2xl font-extrabold tracking-tighter uppercase">PaperKnife</h1>
+          </div>
+          <button 
+            onClick={() => setDarkMode(!darkMode)}
+            className="p-3 border-2 border-black dark:border-white rounded-full hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors"
+          >
+            {darkMode ? <Sun size={20} /> : <Moon size={20} />}
+          </button>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-grow px-6 py-8 max-w-4xl mx-auto w-full">
+        
+        {/* Intro Text */}
+        {selectedTool === ToolType.NONE && (
+          <div className="mb-10 text-center space-y-4">
+            <h2 className="text-4xl md:text-5xl font-black leading-tight">
+              The Swiss Army Knife<br/>
+              <span className="text-swissRed">For Your Documents.</span>
+            </h2>
+            <p className="text-lg font-medium text-gray-600 dark:text-gray-400 max-w-lg mx-auto">
+              100% Client-side. No data leaves your device. Fast, private, and bloat-free.
+            </p>
+          </div>
+        )}
+
+        {/* Bento Grid Selection */}
+        {selectedTool === ToolType.NONE ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <ToolCard 
+              title="Merge PDFs" 
+              description="Combine multiple files into one master document."
+              icon={<Layers size={28} />}
+              onClick={() => setSelectedTool(ToolType.MERGE)}
+            />
+            <ToolCard 
+              title="Split PDF" 
+              description="Extract pages or cut a document in half."
+              icon={<Scissors size={28} />}
+              onClick={() => setSelectedTool(ToolType.SPLIT)}
+            />
+            {/* Placeholder Visuals for V2 */}
+            <div className="md:col-span-2 p-6 border-2 border-dashed border-gray-300 dark:border-zinc-700 rounded-xl flex items-center justify-center gap-3 text-gray-400 dark:text-zinc-600">
+              <Info size={20} />
+              <span className="font-bold">More tools (Compress, Sign, Convert) coming soon.</span>
+            </div>
+          </div>
+        ) : (
+          /* Tool Workspace */
+          <div className="animate-in fade-in slide-in-from-bottom-4 duration-300">
+            <div className="flex items-center gap-2 mb-6 text-sm font-bold text-gray-500 uppercase tracking-widest">
+              <button onClick={resetTool} className="hover:text-swissRed">Tools</button>
+              <span>/</span>
+              <span className="text-black dark:text-white">{selectedTool === ToolType.MERGE ? "Merge" : "Tool"}</span>
+            </div>
+
+            <div className="border-2 border-black dark:border-white rounded-xl p-6 md:p-8 bg-white dark:bg-zinc-900 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)]">
+              <h3 className="text-3xl font-black mb-6 flex items-center gap-3">
+                {selectedTool === ToolType.MERGE && <Layers size={32} className="text-swissRed" />}
+                {selectedTool === ToolType.MERGE ? "Merge PDFs" : "Process PDF"}
+              </h3>
+
+              {!downloadUrl ? (
+                <div className="space-y-6">
+                  {/* Upload Area */}
+                  <label className="block w-full cursor-pointer group">
+                    <input 
+                      type="file" 
+                      multiple={selectedTool === ToolType.MERGE} 
+                      accept=".pdf"
+                      onChange={handleFileChange}
+                      className="hidden" 
+                    />
+                    <div className="border-4 border-dashed border-gray-200 dark:border-zinc-700 rounded-xl p-10 flex flex-col items-center justify-center gap-4 group-hover:border-swissRed group-hover:bg-red-50 dark:group-hover:bg-red-900/10 transition-colors">
+                      <div className="bg-black dark:bg-white text-white dark:text-black p-4 rounded-full">
+                        <FileText size={32} />
+                      </div>
+                      <div className="text-center">
+                        <p className="text-xl font-bold">Tap to select files</p>
+                        <p className="text-gray-500 mt-1">Select {selectedTool === ToolType.MERGE ? "multiple" : "a"} PDF{selectedTool === ToolType.MERGE && "s"}</p>
+                      </div>
+                    </div>
+                  </label>
+
+                  {/* File List */}
+                  {files.length > 0 && (
+                    <div className="space-y-2">
+                      <h4 className="font-bold text-sm uppercase text-gray-500">Selected Files:</h4>
+                      <div className="flex flex-wrap gap-2">
+                        {files.map((f, i) => (
+                          <div key={i} className="flex items-center gap-2 bg-gray-100 dark:bg-zinc-800 px-3 py-2 rounded-md border border-gray-200 dark:border-zinc-700">
+                            <FileText size={16} />
+                            <span className="text-sm font-medium truncate max-w-[150px]">{f.name}</span>
+                          </div>
+                        ))}
+                        <button onClick={() => setFiles([])} className="text-red-500 p-2 hover:bg-red-50 rounded-md">
+                          <Trash2 size={18} />
+                        </button>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Action Button */}
+                  <button 
+                    disabled={files.length === 0 || isProcessing}
+                    onClick={handleProcess}
+                    className="w-full py-4 bg-black dark:bg-white text-white dark:text-black text-lg font-bold rounded-lg hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3 transition-all"
+                  >
+                    {isProcessing ? "Processing..." : "Run Tool"}
+                    {!isProcessing && <ArrowRight size={20} strokeWidth={3} />}
+                  </button>
+                </div>
+              ) : (
+                /* Success State */
+                <div className="text-center py-10 space-y-6 animate-in zoom-in-95 duration-200">
+                  <div className="mx-auto w-20 h-20 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center text-green-600 dark:text-green-400">
+                    <CheckCircle size={40} strokeWidth={3} />
+                  </div>
+                  <h4 className="text-2xl font-bold">Ready to go!</h4>
+                  <a 
+                    href={downloadUrl} 
+                    download={selectedTool === ToolType.MERGE ? "paperknife-merged.pdf" : "processed.pdf"}
+                    className="block w-full py-4 bg-swissRed text-white text-lg font-bold rounded-lg hover:bg-red-700 flex items-center justify-center gap-3 shadow-lg"
+                  >
+                    <Download size={24} />
+                    Download File
+                  </a>
+                  <button onClick={resetTool} className="text-sm font-bold text-gray-500 hover:text-black dark:hover:text-white underline">
+                    Process another file
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </main>
+
+      {/* Footer */}
+      <footer className="py-6 text-center border-t-2 border-black dark:border-white mt-auto">
+        <p className="font-bold text-sm">PAPERKNIFE &copy; {new Date().getFullYear()}</p>
+        <p className="text-xs text-gray-500 mt-1">Built with vibes. Zero Analytics.</p>
+      </footer>
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -1 +1,20 @@
-# PaperKnife
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1O4JnZamNVOPpCRc1ZkekRh5qheb0Dg3m
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

capacitor.config.ts

@@ -0,0 +1,12 @@
+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.paperknife.app',
+  appName: 'PaperKnife',
+  webDir: 'dist',
+  server: {
+    androidScheme: 'https'
+  }
+};
+
+export default config;

components/ToolCard.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+interface ToolCardProps {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+  active?: boolean;
+}
+
+export const ToolCard: React.FC<ToolCardProps> = ({ title, description, icon, onClick, active }) => {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "flex flex-col items-start p-6 w-full text-left transition-all duration-200",
+        "border-2 border-black dark:border-white rounded-xl",
+        "hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]",
+        active 
+          ? "bg-swissRed text-white border-swissRed dark:border-swissRed shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]" 
+          : "bg-white dark:bg-zinc-900"
+      )}
+    >
+      <div className={cn("mb-4 p-2 rounded-lg border-2 border-current", active ? "bg-white/20" : "bg-gray-100 dark:bg-zinc-800")}>
+        {icon}
+      </div>
+      <h3 className="text-xl font-bold tracking-tight mb-1">{title}</h3>
+      <p className={cn("text-sm font-medium", active ? "text-white/90" : "text-gray-500 dark:text-gray-400")}>
+        {description}
+      </p>
+    </button>
+  );
+};