obbyworld · ValwareIRC · Oct 4, 2025 · Sep 29, 2025 · Sep 29, 2025 · Sep 29, 2025
diff --git a/ANDROID_KEYBOARD_FIX.md b/ANDROID_KEYBOARD_FIX.md
@@ -0,0 +1,81 @@
+# Android Keyboard Resize Fix
+
+## Problem
+On Android devices using the Tauri app, when clicking on the channel input box, the keyboard opens but covers the bottom of the screen (including the input box). The viewport only properly resizes after navigating away from the app and returning.
+
+## Root Cause
+The issue was caused by improper Android keyboard handling configuration:
+1. Missing `android:windowSoftInputMode` in the AndroidManifest.xml
+2. No viewport resize handling for keyboard events
+3. Lack of proper mobile CSS for keyboard state transitions
+
+## Solution Implemented
+
+### 1. AndroidManifest.xml Configuration
+**File:** `src-tauri/gen/android/app/src/main/AndroidManifest.xml`
+- Added `android:windowSoftInputMode="adjustResize"` to the MainActivity declaration
+- This tells Android to resize the viewport when the keyboard appears instead of covering content
+
+### 2. Enhanced HTML Viewport Settings
+**File:** `index.html`
+- Updated viewport meta tag to include `viewport-fit=cover, user-scalable=no`
+- Provides better mobile viewport handling
+
+### 3. Native Android Keyboard Detection
+**File:** `src-tauri/gen/android/app/src/main/java/com/obsidianirc/dev/MainActivity.kt`
+- Added `setupKeyboardDetection()` method that monitors layout changes
+- Detects keyboard open/close events and dispatches JavaScript events
+- Provides immediate feedback to the web view when keyboard state changes
+
+### 4. JavaScript Keyboard Handling Hook
+**File:** `src/hooks/useKeyboardResize.ts` (NEW)
+- Created a React hook that handles keyboard visibility events
+- Listens for both Visual Viewport API changes and native Android events
+- Updates CSS custom properties to track keyboard height
+- Triggers layout recalculations when keyboard state changes
+
+### 5. Mobile-Optimized CSS
+**File:** `src/index.css`
+- Added `--keyboard-height` CSS custom property
+- Added mobile-specific CSS rules for keyboard handling
+- Ensures proper viewport adjustments with smooth transitions
+- Fixed viewport on mobile devices to prevent layout shifts
+
+### 6. App Integration
+**File:** `src/App.tsx`
+- Integrated the `useKeyboardResize` hook into the main App component
+- Ensures keyboard handling is active throughout the application lifecycle
+
+## Technical Details
+
+### Android Window Soft Input Modes
+- `adjustResize`: Resizes the window to make room for the keyboard
+- This is preferred over `adjustPan` which just shifts content up
+
+### Visual Viewport API
+- Modern browsers provide this API to detect viewport changes
+- Especially useful for keyboard events on mobile devices
+- Fallback handling for older browsers included
+
+### CSS Custom Properties
+- `--keyboard-height` tracks the current keyboard height
+- Allows responsive layout adjustments based on keyboard state
+- Smooth transitions prevent jarring layout changes
+
+## Expected Behavior After Fix
+1. User taps on the channel input box
+2. Keyboard opens immediately
+3. Viewport resizes instantly to accommodate keyboard
+4. Input box remains visible above the keyboard
+5. No need to navigate away and back to see proper layout
+
+## Testing Considerations
+- Test on various Android devices and screen sizes
+- Verify both portrait and landscape orientations
+- Ensure keyboard animations are smooth
+- Check that all input fields throughout the app behave consistently
+
+## Browser Compatibility
+- Modern Android browsers with Visual Viewport API support
+- Fallback handling for older browsers
+- iOS support included for future compatibility
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
   <link rel="icon" type="image/x-icon" href="/images/obsidian.png">
 </head>
 

diff --git a/src-tauri/gen/android/app/src/main/AndroidManifest.xml b/src-tauri/gen/android/app/src/main/AndroidManifest.xml
@@ -16,7 +16,8 @@
             android:launchMode="singleTask"
             android:label="@string/main_activity_title"
             android:name=".MainActivity"
-            android:exported="true">
+            android:exported="true"
+            android:windowSoftInputMode="adjustResize">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />

diff --git a/src-tauri/gen/android/app/src/main/java/com/obsidianirc/dev/MainActivity.kt b/src-tauri/gen/android/app/src/main/java/com/obsidianirc/dev/MainActivity.kt
@@ -2,13 +2,43 @@ package com.obsidianirc.dev
 
 import android.webkit.WebView
 import android.annotation.SuppressLint
+import android.view.ViewTreeObserver
+import android.view.View
+import android.graphics.Rect
 
 
 class MainActivity : TauriActivity() {
   private lateinit var wv: WebView
+  private var isKeyboardOpen = false
 
   override fun onWebViewCreate(webView: WebView) {
     wv = webView
+    setupKeyboardDetection()
+  }
+
+  private fun setupKeyboardDetection() {
+    val rootView = findViewById<View>(android.R.id.content)
+    val globalLayoutListener = ViewTreeObserver.OnGlobalLayoutListener {
+      val rect = Rect()
+      rootView.getWindowVisibleDisplayFrame(rect)
+      val screenHeight = rootView.rootView.height
+      val keypadHeight = screenHeight - rect.bottom
+
+      if (keypadHeight > screenHeight * 0.15) { // keyboard is opened
+        if (!isKeyboardOpen) {
+          isKeyboardOpen = true
+          // Force immediate layout adjustment
+          wv.evaluateJavascript("window.dispatchEvent(new Event('keyboardDidShow'));", null)
+        }
+      } else { // keyboard is closed
+        if (isKeyboardOpen) {
+          isKeyboardOpen = false
+          wv.evaluateJavascript("window.dispatchEvent(new Event('keyboardDidHide'));", null)
+        }
+      }
+    }
+
+    rootView.viewTreeObserver.addOnGlobalLayoutListener(globalLayoutListener)
   }
 
   @SuppressLint("MissingSuperCall", "SetTextI18n")

diff --git a/src/App.tsx b/src/App.tsx
@@ -9,6 +9,7 @@ import AddServerModal from "./components/ui/AddServerModal";
 import ChannelListModal from "./components/ui/ChannelListModal";
 import ChannelRenameModal from "./components/ui/ChannelRenameModal";
 import UserSettings from "./components/ui/UserSettings";
+import { useKeyboardResize } from "./hooks/useKeyboardResize";
 import ircClient from "./lib/ircClient";
 import useStore, { loadSavedServers } from "./store";
 
@@ -77,6 +78,10 @@ const App: React.FC = () => {
     joinChannel,
     connectToSavedServers,
   } = useStore();
+
+  // Initialize keyboard resize handling for mobile platforms
+  useKeyboardResize();
+
   // askPermissions();
   useEffect(() => {
     initializeEnvSettings(toggleAddServerModal, joinChannel);

diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
@@ -69,7 +69,15 @@ export const AppLayout: React.FC = () => {
         return (
           <>
             {__HIDE_SERVER_LIST__ ? null : (
-              <div className="server-list flex-shrink-0 w-[72px] h-full bg-discord-dark-300 z-30">
+              <div
+                className={`server-list flex-shrink-0 h-full bg-discord-dark-300 z-30 ${
+                  isNarrowView && mobileViewActiveColumn === "serverList"
+                    ? "w-[72px]"
+                    : isNarrowView
+                      ? "w-0"
+                      : "w-[72px]"
+                }`}
+              >
                 <ServerList />
               </div>
             )}
@@ -161,7 +169,8 @@ export const AppLayout: React.FC = () => {
   }, [isTooNarrowForMemberList, toggleMemberList, isNarrowView]);
 
   const getLayoutColumn = (column: layoutColumn) => {
-    if (isNarrowView && column !== mobileViewActiveColumn) return;
+    // On mobile, only show the active column
+    if (isNarrowView && column !== mobileViewActiveColumn) return null;
     return getLayoutColumnElement(column);
   };
 

diff --git a/src/components/layout/ChannelList.tsx b/src/components/layout/ChannelList.tsx
@@ -1,5 +1,5 @@
 import type * as React from "react";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   FaChevronDown,
   FaChevronLeft,
@@ -13,6 +13,7 @@ import {
   FaVolumeUp,
 } from "react-icons/fa";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
+import ircClient from "../../lib/ircClient";
 import useStore from "../../store";
 import TouchableContextMenu from "../mobile/TouchableContextMenu";
 import AddPrivateChatModal from "../ui/AddPrivateChatModal";
@@ -22,27 +23,80 @@ export const ChannelList: React.FC<{
 }> = ({ onToggle }: { onToggle: () => void }) => {
   const {
     servers,
+    currentUser: globalCurrentUser,
     ui: { selectedServerId, selectedChannelId, selectedPrivateChatId },
     selectChannel,
     selectPrivateChat,
     joinChannel,
     leaveChannel,
     deletePrivateChat,
     toggleUserProfileModal,
-    currentUser,
+    setMobileViewActiveColumn,
   } = useStore();
 
+  // Get the current user for the selected server from the store data (includes metadata)
+  const currentUser = useMemo(() => {
+    if (!selectedServerId) return null;
+
+    // Get the current user's username from IRCClient
+    const ircCurrentUser = ircClient.getCurrentUser(selectedServerId);
+    if (!ircCurrentUser) return null;
+
+    // First, check if we have a global current user with metadata for this username
+    if (
+      globalCurrentUser &&
+      globalCurrentUser.username === ircCurrentUser.username
+    ) {
+      return globalCurrentUser;
+    }
+
+    // Find the current user in the server's channel data to get metadata
+    const selectedServer = servers.find((s) => s.id === selectedServerId);
+    if (!selectedServer) return ircCurrentUser;
+
+    // Look for the user in any channel to get their metadata
+    for (const channel of selectedServer.channels) {
+      const userWithMetadata = channel.users.find(
+        (u) => u.username === ircCurrentUser.username,
+      );
+      if (userWithMetadata) {
+        return userWithMetadata;
+      }
+    }
+
+    // If not found in channels, return the basic IRC user
+    return ircCurrentUser;
+  }, [selectedServerId, servers, globalCurrentUser]);
+
   const [isTextChannelsOpen, setIsTextChannelsOpen] = useState(true);
   const [isVoiceChannelsOpen, setIsVoiceChannelsOpen] = useState(true);
   const [isPrivateChatsOpen, setIsPrivateChatsOpen] = useState(true);
   const [newChannelName, setNewChannelName] = useState("");
   const [isAddPrivateChatModalOpen, setIsAddPrivateChatModalOpen] =
     useState(false);
+  const [avatarLoadFailed, setAvatarLoadFailed] = useState(false);
 
   const selectedServer = servers.find(
     (server) => server.id === selectedServerId,
   );
 
+  // Reset avatar load failed state when user or server changes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to reset when user/server changes
+  useEffect(() => {
+    setAvatarLoadFailed(false);
+  }, [currentUser?.username, selectedServerId]);
+
-  // Reset avatar load failed state when user or server changes
-  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to reset when user/server changes
-  useEffect(() => {
-    setAvatarLoadFailed(false);
-  }, [currentUser?.username, selectedServerId]);
+  // Reset avatar load failed state when user or server changes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to reset when user/server changes
+  useEffect(() => {
+    setAvatarLoadFailed(false);
+  }, [
+    currentUser?.username,
+    currentUser?.metadata?.avatar?.value,
+    selectedServerId,
+  ]);
-  // Reset avatar load failed state when user or server changes
-  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to reset when user/server changes
-  useEffect(() => {
-    setAvatarLoadFailed(false);
-  }, [currentUser?.username, selectedServerId]);
+  // Reset avatar load failed state when user or server changes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to reset when user/server changes
+  useEffect(() => {
+    setAvatarLoadFailed(false);
+  }, [
+    currentUser?.username,
+    currentUser?.metadata?.avatar?.value,
+    selectedServerId,
+  ]);
+  // Get user status based on server connection and away status
+  const userStatus = useMemo(() => {
+    if (!selectedServer || !selectedServer.isConnected) {
+      return "offline";
+    }
+    if (selectedServer.isAway) {
+      return "away";
+    }
+    return "online";
+  }, [selectedServer]);
+
   const handleAddChannel = () => {
     if (selectedServerId && newChannelName.trim()) {
       const channelName = newChannelName.trim().startsWith("#")
@@ -62,21 +116,29 @@ export const ChannelList: React.FC<{
 
   const isNarrowView = useMediaQuery();
 
+  const handleCollapseClick = () => {
+    if (isNarrowView) {
+      // On mobile, navigate to chat view
+      setMobileViewActiveColumn("chatView");
+    } else {
+      // On desktop, toggle the channel list
+      onToggle();
+    }
+  };
+
   return (
     <div className="h-full flex flex-col text-discord-channels-default">
       {/* Server header */}
       <div className="px-4 h-12 shadow-md flex items-center justify-between border-b border-discord-dark-400">
         <h1 className="font-bold text-white truncate">
           {selectedServer?.name || "Home"}
         </h1>
-        {!isNarrowView && (
-          <button
-            onClick={onToggle}
-            className="text-discord-channels-default hover:text-white"
-          >
-            <FaChevronLeft />
-          </button>
-        )}
+        <button
+          onClick={handleCollapseClick}
+          className="text-discord-channels-default hover:text-white"
+        >
+          <FaChevronLeft />
+        </button>
       </div>
 
       {/* Channel list */}
@@ -364,20 +426,13 @@ export const ChannelList: React.FC<{
         <div className="flex items-center gap-2">
           <div className="relative">
             <div className="w-8 h-8 rounded-full bg-discord-dark-100 flex items-center justify-center">
-              {currentUser?.metadata?.avatar?.value ? (
+              {currentUser?.metadata?.avatar?.value && !avatarLoadFailed ? (
                 <img
                   src={currentUser.metadata.avatar.value}
                   alt={currentUser.username}
                   className="w-8 h-8 rounded-full object-cover"
-                  onError={(e) => {
-                    // Fallback to initial if image fails to load
-                    e.currentTarget.style.display = "none";
-                    const parent = e.currentTarget.parentElement;
-                    if (parent && currentUser?.username) {
-                      parent.textContent = currentUser.username
-                        .charAt(0)
-                        .toUpperCase();
-                    }
+                  onError={() => {
+                    setAvatarLoadFailed(true);
                   }}
                 />
               ) : (
@@ -387,21 +442,19 @@ export const ChannelList: React.FC<{
               )}
             </div>
             <div
-              className={`absolute -bottom-1 -right-1 w-3 h-3 rounded-full border-2 border-discord-dark-400 ${currentUser?.status === "online" ? "bg-discord-green" : currentUser?.status === "idle" ? "bg-discord-yellow" : currentUser?.status === "dnd" ? "bg-discord-red" : "bg-discord-dark-500"}`}
+              className={`absolute -bottom-1 -right-1 w-3 h-3 rounded-full border-2 border-discord-dark-400 ${userStatus === "online" ? "bg-discord-green" : userStatus === "away" ? "bg-discord-yellow" : "bg-discord-dark-500"}`}
             />
           </div>
           <div>
             <div className="text-white font-medium text-sm">
               {currentUser?.username || "User"}
             </div>
             <div className="text-xs text-discord-channels-default">
-              {currentUser?.status === "online"
+              {userStatus === "online"
                 ? "Online"
-                : currentUser?.status === "idle"
-                  ? "Idle"
-                  : currentUser?.status === "dnd"
-                    ? "Do Not Disturb"
-                    : "Offline"}
+                : userStatus === "away"
+                  ? selectedServer?.awayMessage || "Away"
+                  : "Offline"}
             </div>
           </div>
         </div>