✨ feat: integrate TextArea viewer and Keyboard Shortcuts widget

README.md

@@ -27,8 +27,8 @@ and remote filesystems with your keyboard or mouse.
 
 You can quickly navigate through directories and peek at files whether they're hosted **locally**,
 in **GitHub**, over **SSH**, in **AWS S3**, **Google Cloud Storage**, or **Azure Blob Storage**. View code files
-with syntax highlighting, format JSON files, render images, convert data files to navigable
-datatables, and more.
+with high-performance syntax highlighting using Textual's [TextArea](https://textual.textualize.io/widgets/text_area/),
+format JSON files, render images, convert data files to navigable datatables, and more.
 
 ![](https://raw.githubusercontent.com/juftin/browsr/main/docs/_static/screenshot_utils.png)
 

browsr/browsr.css

@@ -67,6 +67,8 @@ ConfirmationWindow {
     width: 100%;
     height: 100%;
     align: center middle;
+    layer: overlay;
+    background: $background 50%;
 }
 
 ConfirmationPopUp {
@@ -84,3 +86,43 @@ ConfirmationPopUp Button {
     margin-top: 1;
     width: 100%;
 }
+
+/* -- ShortcutsPopUp -- */
+
+ShortcutsWindow {
+    width: 100%;
+    height: 100%;
+    align: center middle;
+    layer: overlay;
+    background: $background 50%;
+}
+
+ShortcutsPopUp {
+    background: $boost;
+    height: auto;
+    max-height: 80%;
+    max-width: 80;
+    min-width: 40;
+    border: wide $primary;
+    padding: 1 2;
+    margin: 1 2;
+    box-sizing: border-box;
+}
+
+#shortcuts-header {
+    width: 100%;
+    content-align: center middle;
+    text-style: bold;
+    margin-bottom: 1;
+}
+
+#shortcuts-table {
+    height: auto;
+    max-height: 20;
+    border: none;
+}
+
+ShortcutsPopUp Button {
+    margin-top: 1;
+    width: 100%;
+}

browsr/browsr.py

@@ -32,7 +32,7 @@ class Browsr(App[str]):
     CSS_PATH = "browsr.css"
     BINDINGS: ClassVar[list[BindingType]] = [
         Binding(key="q", action="quit", description="Quit"),
-        Binding(key="d", action="toggle_dark", description="Dark Mode"),
+        Binding(key="d", action="toggle_dark", description="Toggle Dark Mode"),
     ]
 
     def __init__(
@@ -74,6 +74,12 @@ def action_download_file(self) -> None:
         """
         self.code_browser_screen.code_browser.download_file_workflow()
 
+    def action_copy_text(self) -> None:
+        """
+        An action to copy text.
+        """
+        self.code_browser_screen.code_browser.window_switcher.text_window.copy_selected_text()
+
 
 app = Browsr(
     config_object=TextualAppContext(

browsr/cli.py

@@ -189,15 +189,18 @@ def browsr(
     ```
 
     ## Key Bindings
-    - **`Q`** - Quit the application
-    - **`F`** - Toggle the file tree sidebar
-    - **`T`** - Toggle the rich theme for code formatting
-    - **`N`** - Toggle line numbers for code formatting
-    - **`D`** - Toggle dark mode for the application
+    - **`q`** - Quit the application
+    - **`f`** - Toggle the file tree sidebar
+    - **`t`** - Toggle the rich theme for code formatting
+    - **`n`** - Toggle line numbers for code formatting
+    - **`d`** - Toggle dark mode for the application
     - **`.`** - Parent Directory - go up one directory
-    - **`R`** - Reload the current directory
-    - **`C`** - Copy the current file or directory path to the clipboard
-    - **`X`** - Download the file from cloud storage
+    - **`r`** - Reload the current directory
+    - **`w`** - Toggle word wrap for code files
+    - **`c`** - Copy the current file or directory path to the clipboard
+    - **`shift+c`** - Copy the selected text to the clipboard
+    - **`x`** - Download the file from cloud storage
+    - **`?`** - View keyboard shortcuts
     """
     extra_kwargs = {}
     if kwargs:

browsr/config.py

@@ -2,6 +2,7 @@
 browsr configuration file
 """
 
+from collections import OrderedDict
 from os import getenv
 
 favorite_themes: list[str] = [
@@ -57,3 +58,63 @@
     ".xv",
     ".pdf",
 ]
+
+textarea_default_theme = "vscode_dark"
+
+textarea_theme_map = OrderedDict(
+    [
+        ("monokai", "monokai"),
+        ("dracula", "dracula"),
+        ("github-dark", "vscode_dark"),
+        ("solarized-light", "github_light"),
+        ("material", "vscode_dark"),
+        ("one-dark", "vscode_dark"),
+        ("solarized-dark", "vscode_dark"),
+        ("native", "vscode_dark"),
+        ("emacs", "vscode_dark"),
+        ("vim", "vscode_dark"),
+        ("paraiso-dark", "vscode_dark"),
+    ]
+)
+
+language_map = {
+    "py": "python",
+    "pyi": "python",
+    "pyw": "python",
+    "md": "markdown",
+    "markdown": "markdown",
+    "json": "json",
+    "toml": "toml",
+    "yaml": "yaml",
+    "yml": "yaml",
+    "html": "html",
+    "htm": "html",
+    "css": "css",
+    "js": "javascript",
+    "mjs": "javascript",
+    "cjs": "javascript",
+    "rs": "rust",
+    "go": "go",
+    "sql": "sql",
+    "java": "java",
+    "sh": "bash",
+    "bash": "bash",
+    "zsh": "bash",
+    "xml": "xml",
+    "rss": "xml",
+    "svg": "xml",
+    "xsd": "xml",
+    "xslt": "xml",
+}
+
+filename_map = {
+    "uv.lock": "toml",
+    "pyproject.toml": "toml",
+    "cargo.lock": "toml",
+    "cargo.toml": "toml",
+    "makefile": "bash",
+    "dockerfile": "bash",
+    "procfile": "yaml",
+    ".gitignore": "bash",
+    ".env": "bash",
+}

browsr/screens/code_browser.py

@@ -13,39 +13,55 @@
 from textual.containers import Horizontal
 from textual.events import Mount
 from textual.widget import Widget
-from textual.widgets import Footer, Header
+from textual.widgets import DataTable, Footer, Header
 from textual_universal_directorytree import UPath
 
 from browsr.base import SortedBindingsScreen, TextualAppContext
 from browsr.utils import get_file_info
 from browsr.widgets.code_browser import CodeBrowser
 from browsr.widgets.files import CurrentFileInfoBar
+from browsr.widgets.shortcuts import ShortcutsPopUp, ShortcutsWindow
 
 
 class CodeBrowserScreen(SortedBindingsScreen):
     """
     Code Browser Screen
     """
 
+    LAYERS: ClassVar[list[str]] = ["default", "overlay"]
+
     BINDINGS: ClassVar[list[BindingType]] = [
-        Binding(key="f", action="toggle_files", description="Files"),
-        Binding(key="t", action="theme", description="Theme"),
-        Binding(key="n", action="linenos", description="Line Numbers"),
-        Binding(key="r", action="reload", description="Reload"),
-        Binding(key=".", action="parent_dir", description="Parent Directory"),
+        Binding(key="f", action="toggle_files", description="File Browser"),
+        Binding(key="t", action="theme", description="Toggle Theme"),
+        Binding(key="n", action="linenos", description="Toggle Line Numbers"),
+        Binding(key="r", action="reload", description="Reload", show=False),
+        Binding(
+            key=".",
+            action="parent_dir",
+            description="Parent Directory",
+            key_display=".",
+            show=False,
+        ),
+        Binding(key="w", action="toggle_wrap", description="Toggle Wrap", show=False),
+        Binding(
+            key="?", action="toggle_shortcuts", description="Shortcuts", key_display="?"
+        ),
     ]
 
     BINDING_WEIGHTS: ClassVar[dict[str, int]] = {
-        "ctrl+c": 1,
-        "q": 2,
-        "f": 3,
-        "t": 4,
-        "n": 5,
-        "d": 6,
-        "r": 995,
-        ".": 996,
-        "c": 997,
-        "x": 998,
+        "ctrl+c": 5,
+        "q": 10,
+        "f": 15,
+        "t": 20,
+        "n": 25,
+        "d": 30,
+        "r": 905,
+        ".": 910,
+        "c": 920,
+        "x": 925,
+        "w": 930,
+        "C": 935,
+        "?": 940,
     }
 
     def __init__(
@@ -78,6 +94,7 @@ def __init__(
         else:
             self.file_information.file_info = get_file_info(self.config_object.path)
         self.footer = Footer()
+        self.shortcuts_window = ShortcutsWindow(id="shortcuts-container")
 
     def compose(self) -> Iterable[Widget]:
         """
@@ -87,6 +104,7 @@ def compose(self) -> Iterable[Widget]:
         yield self.code_browser
         yield self.info_bar
         yield self.footer
+        yield self.shortcuts_window
 
     @on(Mount)
     def start_up_app(self) -> None:
@@ -157,8 +175,8 @@ def action_linenos(self) -> None:
         """
         if self.code_browser.selected_file_path is None:
             return
-        self.code_browser.static_window.linenos = (
-            not self.code_browser.static_window.linenos
+        self.code_browser.window_switcher.linenos = (
+            not self.code_browser.window_switcher.linenos
         )
 
     def action_reload(self) -> None:
@@ -189,3 +207,21 @@ def action_reload(self) -> None:
                 severity="information",
                 timeout=1,
             )
+
+    def action_toggle_wrap(self) -> None:
+        """
+        Toggle soft wrap for the text area.
+        """
+        self.code_browser.window_switcher.text_window.soft_wrap = (
+            not self.code_browser.window_switcher.text_window.soft_wrap
+        )
+
+    def action_toggle_shortcuts(self) -> None:
+        """
+        Toggle the shortcuts window
+        """
+        self.shortcuts_window.display = not self.shortcuts_window.display
+        if self.shortcuts_window.display:
+            popup = self.shortcuts_window.query_one(ShortcutsPopUp)
+            popup.update_shortcuts()
+            popup.query_one(DataTable).focus()

browsr/utils.py

@@ -39,8 +39,8 @@ def open_image(document: UPath, screen_width: float) -> Pixels:
         image_width = image.width
         image_height = image.height
         size_ratio = image_width / screen_width
-        new_width = min(int(image_width / size_ratio), image_width)
-        new_height = min(int(image_height / size_ratio), image_height)
+        new_width = int(image_width / size_ratio)
+        new_height = int(image_height / size_ratio)
         resized = image.resize((new_width, new_height))
         return Pixels.from_image(resized)
 

browsr/widgets/base.py

@@ -0,0 +1,80 @@
+"""
+Base classes for widgets
+"""
+
+from __future__ import annotations
+
+from typing import ClassVar
+
+from textual import on
+from textual.binding import Binding, BindingType
+from textual.containers import Container
+from textual.message import Message
+
+
+class BasePopUp(Container):
+    """
+    Base class for popup widgets
+    """
+
+    can_focus = True
+
+    BINDINGS: ClassVar[list[BindingType]] = [
+        Binding("escape", "close", "Close", show=False),
+    ]
+
+    class Toggle(Message):
+        """
+        Toggle the popup visibility
+        """
+
+        def __init__(self, display: bool | None = None) -> None:
+            self.display = display
+            super().__init__()
+
+    def action_close(self) -> None:
+        """
+        Close the popup
+        """
+        self.post_message(self.Toggle(display=False))
+
+
+class BaseOverlay(Container):
+    """
+    Base class for overlay containers
+    """
+
+    can_focus = True
+
+    BINDINGS: ClassVar[list[BindingType]] = [
+        Binding("escape", "close", "Close", show=False),
+    ]
+
+    def action_close(self) -> None:
+        """
+        Close the overlay
+        """
+        self.display = False
+
+    def on_mount(self) -> None:
+        """
+        On Mount
+        """
+        self.display = False
+
+    def watch_display(self, display: bool) -> None:
+        """
+        Focus the overlay when it is displayed
+        """
+        if display:
+            self.focus()
+
+    @on(BasePopUp.Toggle)
+    def handle_toggle(self, message: BasePopUp.Toggle) -> None:
+        """
+        Handle the toggle message from the popup
+        """
+        if message.display is not None:
+            self.display = message.display
+        else:
+            self.display = not self.display