vndangkhoa/apix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Add mobile cookie instructions (Android/iOS)
Some checks are pending
CI / build (18.x) (push) Waiting to run
Details
CI / build (20.x) (push) Waiting to run
Details

Browse source
This commit is contained in:
Khoa Vo 2026-01-07 21:12:42 +07:00
parent 6ac2d207f7
commit 3d8fe9c782
2 changed files with 110 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
components/MobileCookieInstructions.tsx Normal file
View file

@ -0,0 +1,102 @@
"use client";
import React, { useState } from 'react';
import { Smartphone, Monitor, ChevronDown, ChevronRight, Copy, Check } from 'lucide-react';
import { cn } from '@/lib/utils';
export function MobileCookieInstructions() {
const [open, setOpen] = useState(false);
const [platform, setPlatform] = useState<'desktop' | 'android' | 'ios'>('desktop');
return (
<div className="border border-white/10 rounded-xl bg-white/5 overflow-hidden">
<button
onClick={() => setOpen(!open)}
className="w-full flex items-center justify-between p-4 text-left hover:bg-white/5 transition-colors"
>
<div className="flex items-center gap-2">
<Smartphone className="h-5 w-5 text-purple-400" />
<span className="font-medium text-sm text-white/90">How to get cookies on Mobile?</span>
</div>
{open ? <ChevronDown className="h-4 w-4 text-white/50" /> : <ChevronRight className="h-4 w-4 text-white/50" />}
</button>
{open && (
<div className="p-4 pt-0 border-t border-white/5 bg-black/20">
<div className="flex gap-2 mb-4 overflow-x-auto pb-2 scrollbar-none">
<button
onClick={() => setPlatform('desktop')}
className={cn(
"flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors",
platform === 'desktop' ? "bg-purple-500/20 text-purple-200 border border-purple-500/30" : "bg-white/5 text-white/60 hover:bg-white/10"
)}
>
<Monitor className="h-3 w-3" />
Desktop Sync (Best)
</button>
<button
onClick={() => setPlatform('android')}
className={cn(
"flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors",
platform === 'android' ? "bg-green-500/20 text-green-200 border border-green-500/30" : "bg-white/5 text-white/60 hover:bg-white/10"
)}
>
<Smartphone className="h-3 w-3" />
Android
</button>
<button
onClick={() => setPlatform('ios')}
className={cn(
"flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors",
platform === 'ios' ? "bg-blue-500/20 text-blue-200 border border-blue-500/30" : "bg-white/5 text-white/60 hover:bg-white/10"
)}
>
<Smartphone className="h-3 w-3" />
iPhone (iOS)
</button>
</div>
<div className="space-y-3 text-sm text-white/80">
{platform === 'desktop' && (
<div className="space-y-2 animate-in fade-in slide-in-from-left-2 duration-300">
<p className="text-xs text-white/60">Getting cookies on mobile is hard. The easiest way is to do it on a PC and send it to yourself.</p>
<ol className="list-decimal list-inside space-y-2 text-xs">
<li>Install <strong>Cookie-Editor</strong> extension on your PC browser (Chrome/Edge).</li>
<li>Go to <code>labs.google</code> (Whisk) or <code>facebook.com</code> (Meta) and login.</li>
<li>Open extension &rarr; Click <strong>Export</strong> &rarr; <strong>Export as JSON</strong>.</li>
<li>Paste into a Google Doc, Keep, Notes, or email it to yourself.</li>
<li>Open on phone and paste here.</li>
</ol>
</div>
)}
{platform === 'android' && (
<div className="space-y-2 animate-in fade-in slide-in-from-left-2 duration-300">
<p className="text-xs text-white/60">Android allows extensions via specific browsers.</p>
<ol className="list-decimal list-inside space-y-2 text-xs">
<li>Install <strong>Kiwi Browser</strong> or <strong>Firefox Nightly</strong> from Play Store.</li>
<li>Open Kiwi/Firefox and install <strong>Cookie-Editor</strong> from Chrome Web Store.</li>
<li>Login to the service (Whisk/Facebook).</li>
<li>Tap menu &rarr; Cookie-Editor &rarr; Export JSON.</li>
</ol>
</div>
)}
{platform === 'ios' && (
<div className="space-y-2 animate-in fade-in slide-in-from-left-2 duration-300">
<p className="text-xs text-white/60">iPhone is restrictive. Syncing from Desktop is recommended.</p>
<div className="p-2 bg-amber-500/10 border border-amber-500/20 rounded-lg text-[10px] text-amber-200">
<strong>Alternative:</strong> Use "Alook Browser" app (Paid) which acts like a desktop browser with developer tools.
</div>
<ol className="list-decimal list-inside space-y-2 text-xs">
<li>Use <strong>Method 1 (Desktop Sync)</strong> - it's much faster.</li>
<li>Or access this site on your Mac/PC and configure it there first.Settings are saved to the browser, so this only works if you sync local storage or use the same device.</li>
</ol>
</div>
)}
</div>
</div>
)}
</div>
);
}

9
components/Settings.tsx
View file

@ -5,6 +5,8 @@ import { useStore } from '@/lib/store';
import { Save, Sparkles, Brain, Settings2 } from 'lucide-react';
import { cn } from '@/lib/utils';
import { MobileCookieInstructions } from './MobileCookieInstructions';
type Provider = 'whisk' | 'meta';
const providers: { id: Provider; name: string; icon: any; description: string }[] = [
@ -77,7 +79,8 @@ export function Settings() {
<div className="space-y-4 p-4 rounded-xl bg-card border">
{provider === 'whisk' && (
<div className="space-y-2">
<label className="text-sm font-medium">Google Whisk Cookies</label>
<MobileCookieInstructions />
<label className="text-sm font-medium pt-2">Google Whisk Cookies</label>
<textarea
value={whiskCookies}
onChange={(e) => setWhiskCookies(e.target.value)}
@ -135,6 +138,10 @@ export function Settings() {
<div className="pt-2 border-t border-white/5">
<p className="text-sm font-medium mb-3 text-amber-400">Authentication Required</p>
<div className="mb-4">
<MobileCookieInstructions />
</div>
{/* Meta AI Cookies */}
<div className="space-y-2 mb-4">
<label className="text-sm font-medium">Meta.ai Cookies</label>