feat(backend): add files route, filter files, repository files view

Signed-off-by: roman-kiselenko <roman.kiselenko.dev@gmail.com>

Author: roman-kiselenko

README.md

@@ -1,9 +1,9 @@
-
 <a href="https://en.wiktionary.org/wiki/smol"><img align="left" src="assets/smol-kitten.jpg" alt="a smol cat by Ron whisky" width="150" height="100" /></a>
 
 **smolgit** offers a minimalist [git](https://git-scm.com/) server, making it perfect for small teams or individual developers. Its minimal simple and just works. It's perfect for those who value simplicity and efficiency in their workflow. Small memory footprint, one binary to go.
 
 <!-- toc -->
+
 - [Features](#features)
 - [Preview](#preview)
 - [Getting Started](#getting-started)
@@ -23,25 +23,22 @@
 1. **user management** - simple user management, add users with `ssh-keys` to `config.yaml`.
 1. **permissions** - assign persmissions to user.
 1. **ligh-dark** - web theme based on your system settings.
-1. **basic-auth** - web basic auth middleware.
+1. **font** - customized fonts.
+1. **auth** - web auth middleware.
 
 ### Preview
 
 <p align="center">
    <img src="assets/web_1.png" alt="screenshot" width="700" />
 </p>
-<p align="center">
-   <img src="assets/web_2.png" alt="screenshot" width="700" />
-</p>
-
 
 ### Getting Started
 
 #### Install
 
 1. Download binary from [ release page ](https://github.com/roman-kiselenko/smolgit/releases).
 1. Generate default `config.yaml` file with command `./smolgit config > config.yaml`.
-    - Use [`yq`](https://github.com/mikefarah/yq) for inline changes `./smolgit config | yq '.server.disabled = true' > config.yaml`
+   - Use [`yq`](https://github.com/mikefarah/yq) for inline changes `./smolgit config | yq '.server.disabled = true' > config.yaml`
 1. Run `./smolgit`
 
 ```shell
@@ -93,15 +90,15 @@ git:
   base: "git@my-git-server.lan"
   users:
     # User name used for folder in git.path
-  - name: "bob"
-    # Permissions, wildcard or regex
-    # User to check access for other repositories
-    # '*' - access for all repositories
-    # 'admin' - access for admin's repositories
-    # '(admin|billy)' - access for admin's and billy's repositories
-    permissions: "*"
-    keys:
-    - ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQCq9rD9b8tYyuSLsTECHCn... developer@mail.com
+    - name: "bob"
+      # Permissions, wildcard or regex
+      # User to check access for other repositories
+      # '*' - access for all repositories
+      # 'admin' - access for admin's repositories
+      # '(admin|billy)' - access for admin's and billy's repositories
+      permissions: "*"
+      keys:
+        - ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQCq9rD9b8tYyuSLsTECHCn... developer@mail.com
 ```
 
 cli options:
@@ -143,7 +140,8 @@ docker run -it -p 3080:3080 -p 3081:3081 -v /path-to-smolgit-project/smolgit/:/e
 - [golang](https://go.dev/)
 - [gin](https://github.com/gin-gonic/gin)
 - [go-git](https://github.com/go-git/go-git)
-- [pico](https://picocss.com/docs)
+- **React** - responsive and modern frontend.
+- **[shadcn/ui](https://ui.shadcn.com/)** + **Tailwind CSS** - clean and flexible UI components.
 - [gossh](https://github.com/gliderlabs/ssh)
 
 ### Local development

assets/web_1.png

@@ -142,9 +142,7 @@ func (a *App) initWebServer(staticFiles embed.FS) error {
 	})
 
 	router.GET("/api/repos", r.Repos)
-	// router.GET("/repo/log/:user/:path", r.Log)
-	// router.GET("/repo/files/:user/:path", r.Files)
-	// router.GET("/repo/refs/:user/:path", r.Refs)
+	router.GET("/api/repos/files/:user/:path", r.Files)
 
 	addr := a.Config.ServerAddr
 	go func() {

assets/web_2.png

@@ -1,4 +1,4 @@
-import { FolderGit2, Download } from 'lucide-react';
+import { Download } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { ColumnDef } from '@tanstack/react-table';
@@ -10,9 +10,10 @@ const columns: ColumnDef<Repo>[] = [
     header: 'Repo',
     cell: ({ row }) => {
       return (
-        <Link to={`/resource/${row.original.user.name}/${row.original.path}`}
-          className="flex flex-row justify-start items-center">
-          <FolderGit2 className="px-1" />
+        <Link
+          to={`/resource/${row.original.user.name}/${row.original.path}`}
+          className="flex flex-row justify-start items-center"
+        >
           <div className="px-1 align-middle">{row.original.path.replace(/\.git/, '')}</div>
         </Link>
       );
@@ -21,7 +22,7 @@ const columns: ColumnDef<Repo>[] = [
   {
     accessorKey: 'user.name',
     id: 'user',
-    header: 'User',
+    header: 'Owner',
     cell: ({ row }) => {
       return <div>{row.original?.user.name}</div>;
     },

cmd/app.go

@@ -49,7 +49,7 @@ export function StartPage() {
       </div>
 
       <div className="grid grid-cols-1">
-        <div className="h-24 col-span-2">
+        <div className="mx-3 h-24 col-span-2">
           <DataTable
             menuDisabled={true}
             kind={'repos'}

frontend/src/components/pages/Repos/Table/ColumnDef.tsx

@@ -0,0 +1,28 @@
+import { Clock } from 'lucide-react';
+import AgeCell from '@/components/ui/Table/AgeCell';
+import { ColumnDef } from '@tanstack/react-table';
+
+const columns: ColumnDef<string>[] = [
+  {
+    accessorKey: '',
+    id: 'name',
+    header: 'File',
+    cell: ({ row }) => {
+      return <div className="px-1 align-middle">{row.original.filename}</div>;
+    },
+  },
+  {
+    accessorKey: 'time',
+    id: 'time',
+    header: ({ column }) => <Clock size={12} />,
+    cell: ({ row }) => {
+      return (
+        <div className="flex flex-row justify-start">
+          <AgeCell age={'Nov 9, 2025, 11:38 AM GMT+3'} />
+        </div>
+      );
+    },
+  },
+];
+
+export default columns;

frontend/src/components/pages/Start.tsx

@@ -1,50 +1,58 @@
 import { useParams, Link } from 'react-router-dom';
-import { useEffect } from 'react';
+import { LogOut } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { useReposState, getRepos } from '@/store/repositories';
-import { toast } from 'sonner';
+import { useRepoFilesState, getRepoFiles } from '@/store/repofiles';
 import { Repo } from '@/types';
+import { DataTable } from '@/components/ui/DataTable';
+import columns from '@/components/views/ColumnDef';
+import { Input } from '@/components/ui/input';
+import { useAuth } from '@/context/AuthProvider';
+import { Button } from '@/components/ui/button';
 
 export function RepoViewPage() {
-  const { repoPath } = useParams<{ repoPath: string }>();
+  const { user, repoPath } = useParams<{ user: string; repoPath: string }>();
   const repos = useReposState();
+  const repoFiles = useRepoFilesState();
+  const [searchQuery, setSearchQuery] = useState('');
+  const { logout, AuthDisabled } = useAuth();
 
   useEffect(() => {
     if (!repoPath) return;
-    // fetch all repos if not already loaded
     if (!repos.repos.get().length) {
       getRepos('');
     }
   }, [repoPath]);
 
-  const repoItem: Repo | any = repos.repos.get().find((r: Repo | any) => r.path === repoPath);
-
-  if (!repoItem) {
-    return (
-      <div className="p-4">
-        <h2 className="text-xl font-bold">Repository not found</h2>
-        <Link to="/resource" className="text-blue-500">
-          Back to list
-        </Link>
-      </div>
-    );
-  }
+  useEffect(() => {
+    if (!user || !repoPath) return;
+    getRepoFiles(searchQuery, user, repoPath);
+  }, [user, searchQuery]);
 
   return (
     <div className="flex-grow overflow-auto">
-      <div className="flex flex-row py-2 px-2 items-center justify-between"></div>
+      <div className="flex flex-row py-2 px-2 items-center justify-between">
+        <Input
+          placeholder="Filter by name..."
+          className="placeholder:text-muted-foreground flex h-6 w-full rounded-md bg-transparent py-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+        {!AuthDisabled && (
+          <Button onClick={logout} className="ml-2 text-xs">
+            <LogOut size={12} />
+          </Button>
+        )}
+      </div>
 
       <div className="grid grid-cols-1">
-        <div className="p-4">
-          <h2 className="text-2xl font-bold mb-4">{repoItem.name}</h2>
-          <p className="mb-2">
-            <strong>Path:</strong> {repoItem.path}
-          </p>
-          <p className="mb-2">
-            <strong>User:</strong> {repoItem.user?.name}
-          </p>
-          <Link to="/resource" className="text-blue-500">
-            Back to list
-          </Link>
+        <div className="mx-3">
+          <DataTable
+            menuDisabled={true}
+            kind="repo"
+            noResult={false}
+            columns={columns as any}
+            data={repoFiles.files.get() as any}
+          />
         </div>
       </div>
     </div>

frontend/src/components/views/ColumnDef.tsx

@@ -0,0 +1,28 @@
+import { hookstate, useHookstate } from '@hookstate/core';
+import { toast } from 'sonner';
+import { call } from '@/lib/api';
+
+export const repoFilesState = hookstate<{ files: object[] }>({
+  files: [],
+});
+
+export async function getRepoFiles(query: string, userName: string | undefined, repoName: string | undefined) {
+  try {
+    let { files } = await call<any[]>(`repos/files/${userName}/${repoName}`);
+    if (query !== '') {
+      files = files.filter((c) => {
+        return String(c.filename || '')
+          .toLowerCase()
+          .includes(query.toLowerCase());
+      });
+    }
+    repoFilesState.files.set(files);
+  } catch (error: any) {
+    toast.error('Error! Cant load files\n' + error.message);
+    console.error('Error! Cant load files\n' + error.message);
+  }
+}
+
+export function useRepoFilesState() {
+  return useHookstate(repoFilesState);
+}