[dev + copy button] add / update local dev w/docker compose; add copy button to the right of filenames (#328)

Author: drew-u410

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+- Added copy button for filenames. [#328](https://github.com/sourcebot-dev/sourcebot/pull/328)
+- Added development docker compose file. [#328](https://github.com/sourcebot-dev/sourcebot/pull/328)
+
 ### Fixed
 - Fixed issue with the symbol hover popover clipping at the top of the page. [#326](https://github.com/sourcebot-dev/sourcebot/pull/326)
 - Fixed slow rendering issue with large reference/definition lists. [#327](https://github.com/sourcebot-dev/sourcebot/pull/327)

CONTRIBUTING.md

@@ -2,7 +2,7 @@
 >[!NOTE]
 > Building from source is only required if you'd like to contribute. The recommended way to use Sourcebot is to use the [pre-built docker image](https://github.com/sourcebot-dev/sourcebot/pkgs/container/sourcebot).
 
-1. Install <a href="https://go.dev/doc/install"><img src="https://go.dev/favicon.ico" width="16" height="16"> go</a>, <a href="https://nodejs.org/"><img src="https://nodejs.org/favicon.ico" width="16" height="16"> NodeJS</a>, [redis](https://redis.io/), and [postgres](https://www.postgresql.org/). Note that a NodeJS version of at least `21.1.0` is required.
+1. Install <a href="https://go.dev/doc/install"><img src="https://go.dev/favicon.ico" width="16" height="16"> go</a>, and <a href="https://nodejs.org/"><img src="https://nodejs.org/favicon.ico" width="16" height="16"> NodeJS</a>. Note that a NodeJS version of at least `21.1.0` is required.
 
 2. Install [ctags](https://github.com/universal-ctags/ctags) (required by zoekt)
     ```sh
@@ -13,28 +13,34 @@
     snap install universal-ctags
     ```
 
-3. Clone the repository with submodules:
+3. Install <a href="https://docs.docker.com/get-started/get-docker/"><img src="https://www.docker.com/favicon.ico" width="16" height="16"> docker</a> and start the development Docker containers for PostgreSQL and Redis.
+
+    ```sh
+    docker compose -f docker-compose-dev.yml up -d
+    ```
+
+4. Clone the repository with submodules:
     ```sh
     git clone --recurse-submodules https://github.com/sourcebot-dev/sourcebot.git
     ```
 
-4. Run `make` to build zoekt and install dependencies:
+5. Run `make` to build zoekt and install dependencies:
     ```sh
     cd sourcebot
     make
     ```
 
     The zoekt binaries and web dependencies are placed into `bin` and `node_modules` respectively.
 
-5. Create a copy of `.env.development` and name it `.env.development.local`. Update the required environment variables.
+6. Create a copy of `.env.development` and name it `.env.development.local`. Update the required environment variables.
 
-6. If you're using a declerative configuration file (the default behavior if you didn't enable auth), create a configuration file and update the `CONFIG_PATH` environment variable in your `.env.development.local` file.
+7. If you're using a declerative configuration file (the default behavior if you didn't enable auth), create a configuration file and update the `CONFIG_PATH` environment variable in your `.env.development.local` file.
 
-7. Start Sourcebot with the command:
+8. Start Sourcebot with the command:
     ```sh
     yarn dev
     ```
 
     A `.sourcebot` directory will be created and zoekt will begin to index the repositories found in the `config.json` file.
 
-8. Start searching at `http://localhost:3000`.
+9. Start searching at `http://localhost:3000`.

docker-compose-dev.yml

@@ -0,0 +1,30 @@
+# docker-compose-dev.yml
+version: '3.8'
+
+services:
+  redis:
+    image: redis:7-alpine
+    container_name: sourcebot-redis
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis_data:/data
+    restart: unless-stopped
+
+  postgres:
+    image: postgres:16-alpine
+    container_name: sourcebot-postgres
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_DB: postgres
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    restart: unless-stopped
+
+volumes:
+  redis_data:
+  postgres_data:
+

packages/web/src/app/[domain]/components/fileHeader.tsx

@@ -6,6 +6,9 @@ import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
 import { useBrowseNavigation } from "../browse/hooks/useBrowseNavigation";
+import { Copy, CheckCircle2 } from "lucide-react";
+import { useState } from "react";
+import { useToast } from "@/components/hooks/use-toast";
 
 interface FileHeaderProps {
     fileName: string;
@@ -38,6 +41,15 @@ export const FileHeader = ({
     });
 
     const { navigateToPath } = useBrowseNavigation();
+    const { toast } = useToast();
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(fileName);
+        setCopied(true);
+        toast({ description: "Copied file path!" });
+        setTimeout(() => setCopied(false), 1500);
+    };
 
     return (
         <div className="flex flex-row gap-2 items-center w-full overflow-hidden">
@@ -71,11 +83,9 @@ export const FileHeader = ({
                 </p>
             )}
             <span>·</span>
-            <div
-                className="flex-1 flex items-center overflow-hidden mt-0.5"
-            >
+            <div className="flex-1 flex items-center overflow-hidden mt-0.5">
                 <span
-                    className="inline-block w-full truncate-start font-mono text-sm cursor-pointer hover:underline"
+                    className="inline-block truncate-start font-mono text-sm cursor-pointer hover:underline"
                     onClick={() => {
                         navigateToPath({
                             repoName: repo.name,
@@ -97,6 +107,18 @@ export const FileHeader = ({
                             </>
                         )}
                 </span>
+                <button
+                    className="ml-2 p-1 rounded transition-colors"
+                    onClick={handleCopy}
+                    aria-label="Copy file path"
+                    type="button"
+                >
+                    {copied ? (
+                        <CheckCircle2 className="h-4 w-4 text-green-500" />
+                    ) : (
+                        <Copy className="h-4 w-4 text-muted-foreground" />
+                    )}
+                </button>
             </div>
         </div>
     )