nullcoder · nullcoder · Jun 5, 2025 · Jun 5, 2025 · Jun 5, 2025
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,38 @@
+# dependencies
+node_modules
+.pnp
+.pnp.*
+
+# next.js
+.next/
+out/
+build/
+
+# production
+dist/
+
+# misc
+.DS_Store
+*.pem
+
+# local env files
+.env*
+.dev.vars
+
+# vercel
+.vercel
+
+# wrangler
+.wrangler/
+
+# OpenNext
+.open-next/
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# generated files
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,46 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "css.validate": false,
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/.next": true,
+    "**/node_modules": true,
+    "**/.wrangler": true,
+    "**/.open-next": true
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true,
+    "**/.next": true,
+    "**/.wrangler": true,
+    "**/.open-next": true
+  }
+}
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -11,6 +11,7 @@ GhostPaste is a zero-knowledge encrypted code sharing platform. See `docs/SPEC.m
 ## Key Implementation Notes
 
 ### File Structure
+
 ```
 src/
 ├── app/                 # Next.js app router pages
@@ -23,13 +24,15 @@ src/
 ```
 
 ### Critical Security Rules
+
 1. **NEVER** send encryption keys to the server
 2. **NEVER** log or store decryption keys
 3. **ALWAYS** use URL fragments for key sharing (`#key=...`)
 4. **ALWAYS** validate PIN before allowing edits
 5. **ALWAYS** use fresh IVs for each encryption
 
 ### Common Commands
+
 ```bash
 npm run dev          # Start development server
 npm run build        # Build for production
@@ -39,6 +42,7 @@ npm run typecheck    # Run TypeScript checks
 ```
 
 ### Testing Checklist
+
 - [ ] Encryption/decryption works correctly
 - [ ] Binary format encoding/decoding
 - [ ] PIN authentication flow
@@ -47,6 +51,7 @@ npm run typecheck    # Run TypeScript checks
 - [ ] One-time view gists delete after viewing
 
 ### Environment Variables
+
 See `.env.example` for required Cloudflare R2 configuration.
 
 ## When Making Changes
@@ -79,22 +84,26 @@ For detailed architecture, API specs, and data models, refer to `docs/SPEC.md`.
 ## Project Management
 
 ### GitHub Project
+
 - All issues and PRs are tracked in the "👻 GhostPaste" project board
 - When creating issues or PRs, always add `--project "👻 GhostPaste"`
 - Follow the label system documented in `docs/LABELS.md`
 
 ### Issue Management
+
 - Every issue must have: category label, priority label, and status label
 - Reference TODO.md line numbers in issues when applicable
 - Link related issues in the description
 
 ### Progress Tracking
+
 - Check off completed tasks in `docs/TODO.md`
 - Update issue status labels as work progresses
 - Close issues only after PR is merged
 - **IMPORTANT**: Update project board status, not just labels (see below)
 
 ### Development Workflow
+
 1. Pick an issue from the project board
 2. Update issue status to "In Progress" in project board
 3. Create feature branch: `git checkout -b feat/issue-description`
@@ -108,6 +117,7 @@ For detailed architecture, API specs, and data models, refer to `docs/SPEC.md`.
 ## Best Practices
 
 ### Documentation First
+
 - Always check official documentation before implementing:
   - Next.js 15: Use `create-next-app` and official guides
   - shadcn/ui: Use `npx shadcn-ui@latest` CLI commands
@@ -116,25 +126,29 @@ For detailed architecture, API specs, and data models, refer to `docs/SPEC.md`.
 - Use official CLIs and generators instead of manual setup
 
 ### Code Quality
+
 - Run `npm run lint` and `npm run typecheck` before committing
 - Follow TypeScript strict mode practices
 - Write edge-runtime compatible code only
 - Keep components small and focused
 - Use proper error boundaries
 
 ### Security
+
 - Never commit secrets or API keys
 - Always validate and sanitize user input
 - Use environment variables for sensitive data
 - Follow encryption best practices in `docs/SPEC.md`
 
 ### Performance
+
 - Consider Cloudflare Workers limits (50ms CPU, 100MB request)
 - Optimize for edge runtime constraints
 - Minimize bundle sizes
 - Use dynamic imports where appropriate
 
 ### Testing
+
 - Write tests for critical paths (encryption, binary format)
 - Test edge cases and error scenarios
 - Verify edge runtime compatibility
@@ -145,8 +159,9 @@ For detailed architecture, API specs, and data models, refer to `docs/SPEC.md`.
 ### Updating Status in GitHub Projects
 
 The project board uses these status values:
+
 - **Todo** (ID: `f75ad846`)
-- **In Progress** (ID: `47fc9ee4`) 
+- **In Progress** (ID: `47fc9ee4`)
 - **Done** (ID: `98236657`)
 
 To update status using GitHub CLI:
@@ -184,4 +199,4 @@ gh project item-edit --project-id PVT_kwHOAAF1rM4A6v2O --id [ITEM_ID] \
 - [ ] When starting work: Set issue to "In Progress"
 - [ ] When creating PR: Add PR to board with "In Progress"
 - [ ] After merge: Set both issue and PR to "Done"
-- [ ] Update TODO.md to check off completed tasks
+- [ ] Update TODO.md to check off completed tasks
diff --git a/README.md b/README.md
@@ -51,19 +51,19 @@ Simply open the shared link - the decryption key is in the URL fragment and neve
 
 ## 📊 Limits
 
-| Resource | Limit | Why? |
-|----------|-------|------|
-| File size | 500 KB | Covers 99% of code files |
-| Total size | 5 MB | Enough for ~10-20 typical files |
-| Files per paste | 20 | Keeps the UI responsive |
-| Versions kept | 50 | Balances history with storage |
+| Resource        | Limit  | Why?                            |
+| --------------- | ------ | ------------------------------- |
+| File size       | 500 KB | Covers 99% of code files        |
+| Total size      | 5 MB   | Enough for ~10-20 typical files |
+| Files per paste | 20     | Keeps the UI responsive         |
+| Versions kept   | 50     | Balances history with storage   |
 
 ## 🔧 Development
 
 ### Prerequisites
 
 - Node.js 18+
-- npm or yarn  
+- npm or yarn
 - Cloudflare account (for Workers and R2)
 - Wrangler CLI (`npm install -g wrangler`)
 
@@ -159,4 +159,4 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
   <a href="https://ghostpaste.dev">Visit GhostPaste</a> •
   <a href="https://github.com/nullcoder/ghostpaste/issues">Report Bug</a> •
   <a href="https://github.com/nullcoder/ghostpaste/issues">Request Feature</a>
-</p>
+</p>
diff --git a/app/api/health/route.ts b/app/api/health/route.ts
@@ -7,4 +7,4 @@ export async function GET() {
     runtime: "edge",
     env: process.env.NODE_ENV,
   });
-}
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -2,8 +2,8 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+    <div className="grid min-h-screen grid-rows-[20px_1fr_20px] items-center justify-items-center gap-16 p-8 pb-20 font-[family-name:var(--font-geist-sans)] sm:p-20">
+      <main className="row-start-2 flex flex-col items-center gap-[32px] sm:items-start">
         <Image
           className="dark:invert"
           src="/next.svg"
@@ -12,10 +12,10 @@ export default function Home() {
           height={38}
           priority
         />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+        <ol className="list-inside list-decimal text-center font-[family-name:var(--font-geist-mono)] text-sm/6 sm:text-left">
           <li className="mb-2 tracking-[-.01em]">
             Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
+            <code className="rounded bg-black/[.05] px-1 py-0.5 font-[family-name:var(--font-geist-mono)] font-semibold dark:bg-white/[.06]">
               app/page.tsx
             </code>
             .
@@ -25,9 +25,9 @@ export default function Home() {
           </li>
         </ol>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
+        <div className="flex flex-col items-center gap-4 sm:flex-row">
           <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
+            className="bg-foreground text-background flex h-10 items-center justify-center gap-2 rounded-full border border-solid border-transparent px-4 text-sm font-medium transition-colors hover:bg-[#383838] sm:h-12 sm:w-auto sm:px-5 sm:text-base dark:hover:bg-[#ccc]"
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
@@ -42,7 +42,7 @@ export default function Home() {
             Deploy now
           </a>
           <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
+            className="flex h-10 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-4 text-sm font-medium transition-colors hover:border-transparent hover:bg-[#f2f2f2] sm:h-12 sm:w-auto sm:px-5 sm:text-base md:w-[158px] dark:border-white/[.145] dark:hover:bg-[#1a1a1a]"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
@@ -51,7 +51,7 @@ export default function Home() {
           </a>
         </div>
       </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+      <footer className="row-start-3 flex flex-wrap items-center justify-center gap-[24px]">
         <a
           className="flex items-center gap-2 hover:underline hover:underline-offset-4"
           href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ export async function GET() { @@
         runtime: "edge",
         env: process.env.NODE_ENV,
       });
-    }
+    }