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

Author: drew-u410

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,6 +13,12 @@
     snap install universal-ctags
     ```
 
+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
+    ```
+
 3. Clone the repository with submodules:
     ```sh
     git clone --recurse-submodules https://github.com/sourcebot-dev/sourcebot.git

docker-compose-dev.yml

@@ -0,0 +1,30 @@
+# docker-compose.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>
     )