Android/Termux support

README.md

@@ -195,6 +195,77 @@ npm start
 http://127.0.0.1:48912
 ```
 
+### Method 3: Android/Termux Installation
+
+1. Install Termux from [F-Droid](https://f-droid.org/packages/com.termux/) (Google Play version is outdated).
+
+2. Install the required packages:
+
+```bash
+pkg update && pkg upgrade
+pkg install nodejs-lts git binutils build-essential python libvips imagemagick
+```
+
+> **What these packages are for:**
+> - `nodejs-lts` — Node.js runtime
+> - `git` — clone the repository
+> - `binutils`, `build-essential` — C++ compiler toolchain (for building native modules)
+> - `python` — required by `node-gyp` (used by `better-sqlite3` and `sharp`)
+> - `libvips` — image processing library (required by `sharp`)
+> - `imagemagick` — additional image format support (required by `libvips`)
+
+3. Apply the gyp fix (prevents native module build errors):
+
+```bash
+mkdir -p ~/.gyp && echo "{ 'variables': { 'android_ndk_path': '' } }" > ~/.gyp/include.gypi
+```
+
+4. Clone the repository:
+
+```bash
+git clone https://github.com/dmitryplyaskin/SillyInnkeeper.git
+cd SillyInnkeeper
+```
+
+5. Install server dependencies:
+
+```bash
+cd server
+npm install
+```
+
+6. Install client dependencies:
+
+```bash
+cd ../client
+npm install
+```
+
+7. Build the client:
+
+```bash
+cd ../client
+npm run build
+```
+
+8. Start the server:
+
+```bash
+cd ../server
+npm start
+```
+
+9. Open your browser and navigate to:
+
+```
+http://127.0.0.1:48912
+```
+
+> ⚠️ **Note on Android limitations**:
+> - The folder picker icon is hidden — type the full path manually (e.g., `/storage/emulated/0/Download/characters`).
+> - The "Open in Explorer" button and context menu item in card details are also hidden.
+> - These features are disabled because system GUI dialogs are not available from a server/browser context on Android/Termux.
+
 ### Configuration (.env)
 
 You can configure **host/port** and SillyTavern integration via a root `.env` file.

client/package.json

@@ -10,9 +10,9 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@mantine/core": "8.3.10",
+    "@mantine/core": "^8.3.10",
     "@mantine/form": "^8.3.10",
-    "@mantine/hooks": "8.3.10",
+    "@mantine/hooks": "^8.3.10",
     "@mantine/notifications": "^8.3.10",
     "@tabler/icons-react": "^3.36.0",
     "dompurify": "^3.3.1",

client/src/entities/cards/ui/card-actions-menu.tsx

@@ -59,6 +59,7 @@ export function CardActionsMenu({
 
   const exportPngUrl = `/api/cards/${encodeURIComponent(cardId)}/export.png?download=1`;
   const canUseFile = Boolean(filePath?.trim());
+  const isAndroid = /android/i.test(navigator.userAgent);
 
   return (
     <Menu withinPortal position="bottom-end" shadow="md">
@@ -122,19 +123,21 @@ export function CardActionsMenu({
 
         <Menu.Divider />
 
-        <Menu.Item
-          leftSection={
-            isOpeningInExplorer ? <Loader size={16} /> : <IconFolder size={16} />
-          }
-          disabled={!canUseFile || isOpeningInExplorer}
-          onClick={(e) => {
-            e.stopPropagation();
-            if (!filePath) return;
-            onOpenInExplorer({ filePath });
-          }}
-        >
-          {t("cardDetails.openInExplorer")}
-        </Menu.Item>
+        {!isAndroid && (
+          <Menu.Item
+            leftSection={
+              isOpeningInExplorer ? <Loader size={16} /> : <IconFolder size={16} />
+            }
+            disabled={!canUseFile || isOpeningInExplorer}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (!filePath) return;
+              onOpenInExplorer({ filePath });
+            }}
+          >
+            {t("cardDetails.openInExplorer")}
+          </Menu.Item>
+        )}
 
         <Menu.Item
           leftSection={<IconPencil size={16} />}

client/src/features/card-details/ui/components/CardDetailsActionsPanel.tsx

@@ -99,6 +99,8 @@ export function CardDetailsActionsPanel({
     $settings,
   ]);
 
+  const isAndroid = /android/i.test(navigator.userAgent);
+
   function canonicalizeForCompare(value: unknown): unknown {
     if (value === null || value === undefined) return null;
     if (Array.isArray(value)) return value.map(canonicalizeForCompare);
@@ -281,6 +283,7 @@ export function CardDetailsActionsPanel({
     const fp = (p ?? "").trim();
     if (!fp) return;
     if (openingDuplicatePath) return;
+    if (isAndroid) return;
     setOpeningDuplicatePath(fp);
     try {
       await showFile(fp);
@@ -419,20 +422,22 @@ export function CardDetailsActionsPanel({
             {i18n.t("cardDetails.download")}
           </Button>
 
-          <Button
-            fullWidth
-            variant="subtle"
-            color="gray"
-            onClick={() => {
-              const p = (details?.file_path ?? "").trim();
-              if (!p) return;
-              onOpenInExplorer({ filePath: p });
-            }}
-            disabled={!details?.file_path}
-            loading={isOpeningInExplorer}
-          >
-            {i18n.t("cardDetails.openInExplorer")}
-          </Button>
+          {!isAndroid && (
+            <Button
+              fullWidth
+              variant="subtle"
+              color="gray"
+              onClick={() => {
+                const p = (details?.file_path ?? "").trim();
+                if (!p) return;
+                onOpenInExplorer({ filePath: p });
+              }}
+              disabled={!details?.file_path}
+              loading={isOpeningInExplorer}
+            >
+              {i18n.t("cardDetails.openInExplorer")}
+            </Button>
+          )}
           <Button
             fullWidth
             variant="subtle"
@@ -549,6 +554,7 @@ export function CardDetailsActionsPanel({
                   setSelectedDuplicatePath(p);
                   setConfirmDeleteDuplicateOpened(true);
                 }}
+                isAndroid={isAndroid}
               />
             </>
           )}

client/src/features/card-details/ui/components/card-duplicates-section.tsx

@@ -10,13 +10,15 @@ export function CardDuplicatesSection({
   onMakeMain,
   onOpenInExplorer,
   onRequestDelete,
+  isAndroid = false,
 }: {
   duplicates: string[];
   isSettingMainFile: boolean;
   openingDuplicatePath: string | null;
   onMakeMain: (filePath: string) => void;
   onOpenInExplorer: (filePath: string) => void;
   onRequestDelete: (filePath: string) => void;
+  isAndroid?: boolean;
 }) {
   if (!duplicates || duplicates.length === 0) return null;
 
@@ -50,16 +52,18 @@ export function CardDuplicatesSection({
                   </ActionIcon>
                 </Tooltip>
 
-                <Tooltip label={i18n.t("cardDetails.showInExplorer")} withArrow>
-                  <ActionIcon
-                    variant="light"
-                    onClick={() => onOpenInExplorer(p)}
-                    loading={openingDuplicatePath === p}
-                    aria-label={i18n.t("cardDetails.showInExplorer")}
-                  >
-                    <IconFolder size={18} />
-                  </ActionIcon>
-                </Tooltip>
+                {!isAndroid && (
+                  <Tooltip label={i18n.t("cardDetails.showInExplorer")} withArrow>
+                    <ActionIcon
+                      variant="light"
+                      onClick={() => onOpenInExplorer(p)}
+                      loading={openingDuplicatePath === p}
+                      aria-label={i18n.t("cardDetails.showInExplorer")}
+                    >
+                      <IconFolder size={18} />
+                    </ActionIcon>
+                  </Tooltip>
+                )}
 
                 <Tooltip label={i18n.t("cardDetails.deleteDuplicate")} withArrow>
                   <ActionIcon

client/src/features/cards-import/ui/cards-import-modal.tsx

@@ -79,6 +79,7 @@ export function CardsImportModal() {
 
   const isMove = settings.importMode === "move";
   const canImport = Boolean(settings.sourceFolderPath?.trim());
+  const isAndroid = /android/i.test(navigator.userAgent);
   const setImportMode = (v: string) => {
     if (v === "copy" || v === "move") onChangeImportMode(v);
   };
@@ -108,28 +109,34 @@ export function CardsImportModal() {
 
         <TextInput
           label={t("cardsImport.sourceFolderLabel")}
-          placeholder={t("cardsImport.sourceFolderPlaceholder")}
+          placeholder={
+            isAndroid
+              ? t("settingsForm.androidPlaceholder")
+              : t("cardsImport.sourceFolderPlaceholder")
+          }
           value={settings.sourceFolderPath ?? ""}
           onChange={(e) => onChangePath(e.currentTarget.value)}
-          rightSectionWidth={42}
+          rightSectionWidth={isAndroid ? 0 : 42}
           rightSection={
-            <Tooltip
-              label={t("cardsImport.pickFolderTooltip")}
-              withArrow
-              position="top"
-            >
-              <ActionIcon
-                variant="subtle"
-                onClick={() => {
-                  if (isLoading) return;
-                  onPick();
-                }}
-                disabled={isLoading}
-                aria-label={t("cardsImport.pickFolderAria")}
+            isAndroid ? null : (
+              <Tooltip
+                label={t("cardsImport.pickFolderTooltip")}
+                withArrow
+                position="top"
               >
-                {isPickingFolder ? <Loader size={16} /> : <FolderIcon />}
-              </ActionIcon>
-            </Tooltip>
+                <ActionIcon
+                  variant="subtle"
+                  onClick={() => {
+                    if (isLoading) return;
+                    onPick();
+                  }}
+                  disabled={isLoading}
+                  aria-label={t("cardsImport.pickFolderAria")}
+                >
+                  {isPickingFolder ? <Loader size={16} /> : <FolderIcon />}
+                </ActionIcon>
+              </Tooltip>
+            )
           }
         />