Refactor: Integrated With PassAlgo Repository

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-    "recommendations": ["esbenp.prettier-vscode", "ritwickdey.liveserver"]
+    "recommendations": [
+        "esbenp.prettier-vscode",
+        "ritwickdey.liveserver",
+        "leonardssh.vscord"
+    ]
 }

.vscode/settings.json

@@ -1,10 +1,14 @@
 {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 4,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "files.autoSave": "onFocusChange",
+    "editor.formatOnSave": true,
     "prettier.tabWidth": 4,
     "prettier.useTabs": false,
     "files.insertFinalNewline": true,
-    "printWidth": 120
+    "editor.codeActionsOnSave": {
+        "source.fixAll": "explicit",
+        "source.organizeImports": "explicit",
+        "source.sortMembers": "explicit"
+    }
 }

package.json

@@ -17,6 +17,7 @@
     "test:e2e:report": "playwright show-report"
   },
   "dependencies": {
+    "@passcodes/passalgo": "github:PasscodesApp/PassAlgo#main",
     "@tanstack/react-query": "^5.50.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

src/components/community/CommunityContent.tsx

@@ -17,7 +17,7 @@ import {
     GITHUB_ISSUES_URL,
     PASSCODES_CONTRIBUTING_URL,
 } from "@/lib/constants";
-import { formatNumber } from "@/lib/utils";
+import { formatNumber } from "@passcodes/passalgo";
 import { Star, GitFork, Users, BookOpen, Code2 } from "lucide-react";
 import { GithubIcon } from "@/components/ui/BrandIcons";
 

src/components/downloads/ArchDownload.tsx

@@ -10,11 +10,11 @@ import {
     groupApksByArch,
     orderVariants,
     pickRecommendedApk,
-    formatFileSize,
     cn,
 } from "@/lib/utils";
 import type { GithubReleaseAsset } from "@/types/github";
 import Link from "next/link";
+import { formatFileSize } from "@passcodes/passalgo";
 
 interface Props {
     assets: GithubReleaseAsset[];

src/components/downloads/DownloadCard.tsx

@@ -5,9 +5,14 @@ import { Download, Calendar, Tag, AlertTriangle } from "lucide-react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { ArchDownload } from "@/components/downloads/ArchDownload";
-import { formatNumber, formatDate, cn } from "@/lib/utils";
-import { classifyRelease, isYankedRelease, isDeprecatedRelease } from "@/hooks/useGithubRelease";
+import { cn } from "@/lib/utils";
+import {
+    classifyRelease,
+    isYankedRelease,
+    isDeprecatedRelease,
+} from "@/hooks/useGithubRelease";
 import type { GithubRelease } from "@/types/github";
+import { formatDate, formatNumber } from "@passcodes/passalgo";
 
 export function DownloadCard({
     release,
@@ -26,12 +31,20 @@ export function DownloadCard({
     const isDeprecated = isDeprecatedRelease(release);
 
     return (
-        <div className={cn("release-card", isLatest && "latest", isDeprecated && "deprecated")}>
+        <div
+            className={cn(
+                "release-card",
+                isLatest && "latest",
+                isDeprecated && "deprecated"
+            )}
+        >
             <div className="release-top">
                 <h3>{release.name || release.tag_name}</h3>
                 <div className="flex items-center gap-2">
                     {isLatest && <span className="tag stable">Latest</span>}
-                    {isDeprecated && <span className="tag deprecated">Deprecated</span>}
+                    {isDeprecated && (
+                        <span className="tag deprecated">Deprecated</span>
+                    )}
                     {isYanked && <span className="tag alpha">Yanked</span>}
                     {channel === "beta" && (
                         <span className="tag beta">Beta</span>
@@ -66,11 +79,16 @@ export function DownloadCard({
             {isDeprecated && (
                 <div className="mt-3.5 rounded-xl border border-red-500/30 bg-red-500/10 p-3.5 text-xs leading-relaxed text-red-700 dark:text-red-300">
                     <div className="flex items-center gap-1.5 font-semibold text-red-600 dark:text-red-400">
-                        <AlertTriangle className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+                        <AlertTriangle
+                            className="h-3.5 w-3.5 shrink-0"
+                            aria-hidden="true"
+                        />
                         <span>Deprecated Release</span>
                     </div>
                     <p className="mt-1 text-[var(--text-muted)]">
-                        This release is no longer supported. Superseded by the newer database architecture introduced in later releases. Please use a current release instead.
+                        This release is no longer supported. Superseded by the
+                        newer database architecture introduced in later
+                        releases. Please use a current release instead.
                     </p>
                 </div>
             )}

src/components/downloads/ReleaseList.tsx

@@ -2,10 +2,14 @@
 
 import { Download, Calendar, ExternalLink, AlertTriangle } from "lucide-react";
 import { ArchDownload } from "@/components/downloads/ArchDownload";
-import { formatNumber, formatDate } from "@/lib/utils";
-import { classifyRelease, isYankedRelease, isDeprecatedRelease } from "@/hooks/useGithubRelease";
+import {
+    classifyRelease,
+    isYankedRelease,
+    isDeprecatedRelease,
+} from "@/hooks/useGithubRelease";
 import type { GithubRelease } from "@/types/github";
 import Link from "next/link";
+import { formatDate } from "@passcodes/passalgo";
 
 export function ReleaseList({
     releases,
@@ -87,18 +91,24 @@ export function ReleaseList({
                                     className="mr-1 inline h-3 w-3"
                                     aria-hidden="true"
                                 />
-                                {formatNumber(totalDownloads)}
+                                {totalDownloads}
                             </span>
                         </div>
 
                         {isDeprecated && (
                             <div className="mt-3 rounded-lg border border-red-500/25 bg-red-500/5 p-2.5 text-xs leading-relaxed text-red-700 dark:text-red-300">
                                 <div className="flex items-center gap-1.5 font-semibold text-red-600 dark:text-red-400">
-                                    <AlertTriangle className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+                                    <AlertTriangle
+                                        className="h-3.5 w-3.5 shrink-0"
+                                        aria-hidden="true"
+                                    />
                                     <span>Deprecated Release</span>
                                 </div>
                                 <p className="mt-1 text-[var(--text-muted)]">
-                                    This release is no longer supported. Superseded by the newer database architecture introduced in later releases. Please use a current release instead.
+                                    This release is no longer supported.
+                                    Superseded by the newer database
+                                    architecture introduced in later releases.
+                                    Please use a current release instead.
                                 </p>
                             </div>
                         )}

src/components/home/Hero.tsx

@@ -18,7 +18,7 @@ import { ScrollReveal } from "@/components/motion/ScrollReveal";
 import { useDownloadCount } from "@/hooks/useDownloadCount";
 import { useLatestRelease } from "@/hooks/useGithubRelease";
 import { getLatestChangelogEntry } from "@/lib/changelog";
-import { formatNumber } from "@/lib/utils";
+import { formatNumber } from "@passcodes/passalgo";
 import { GITHUB_REPO_URL, DISCORD_URL, USER_GUIDE_URL } from "@/lib/constants";
 
 export function Hero() {
@@ -181,7 +181,7 @@ export function Hero() {
                             <div className="from-[var(--card-bg-solid)]/90 relative overflow-hidden rounded-2xl border border-[var(--border-light)] bg-gradient-to-b via-[var(--card-bg)] to-[var(--bg-base)] p-5 shadow-xl shadow-black/25 backdrop-blur-md transition-colors duration-300 hover:border-[var(--border)] sm:p-7">
                                 {/* Subtle Ambient Radial Accent (Engineered, not glowing blob) */}
                                 <div
-                                    className="pointer-events-none absolute -top-24 left-1/2 h-56 w-56 -translate-x-1/2 rounded-full bg-[var(--accent)]/10 blur-3xl"
+                                    className="bg-[var(--accent)]/10 pointer-events-none absolute -top-24 left-1/2 h-56 w-56 -translate-x-1/2 rounded-full blur-3xl"
                                     aria-hidden="true"
                                 />
 

src/components/shared/GithubStarDialog.tsx

@@ -4,7 +4,7 @@ import { Star } from "lucide-react";
 import { Dialog } from "@/components/ui/Dialog";
 import { useGithubStars } from "@/hooks/useGithubStars";
 import { GITHUB_REPO_URL } from "@/lib/constants";
-import { formatNumber } from "@/lib/utils";
+import { formatNumber } from "@passcodes/passalgo";
 import { GithubIcon } from "@/components/ui/BrandIcons";
 import Link from "next/link";
 

src/lib/utils.ts

@@ -7,26 +7,6 @@ export function cn(...inputs: ClassValue[]): string {
     return twMerge(clsx(inputs));
 }
 
-export function formatNumber(num: number): string {
-    return new Intl.NumberFormat("en-US").format(num);
-}
-
-export function formatFileSize(bytes: number): string {
-    if (bytes === 0) return "0 B";
-    const units = ["B", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(1024));
-    const size = (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0);
-    return `${size} ${units[i]}`;
-}
-
-export function formatDate(isoString: string): string {
-    return new Date(isoString).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-    });
-}
-
 export function isNonAndroidDevice(): boolean {
     if (typeof navigator === "undefined") return false;
     return !navigator.userAgent.toLowerCase().includes("android");

src/providers/QueryProvider.tsx

@@ -7,16 +7,19 @@ interface QueryProviderProps {
     children: ReactNode;
 }
 
+const HOUR = 60 * 60 * 1000;
+
 export function QueryProvider({ children }: QueryProviderProps) {
     const [queryClient] = useState(
         () =>
             new QueryClient({
                 defaultOptions: {
                     queries: {
-                        staleTime: 5 * 60 * 1000,
-                        gcTime: 10 * 60 * 1000,
+                        staleTime: HOUR,
+                        gcTime: 12 * HOUR,
                         retry: 2,
                         refetchOnWindowFocus: false,
+                        networkMode: "offlineFirst",
                     },
                 },
             })