Update run.sh for merged dockerfile

.gitea/workflows/desktop.yaml

@@ -49,6 +49,7 @@ jobs:
         uses: akkuman/gitea-release-action@v1
         with:
           name: Focus ${{ steps.tagName.outputs.tag }}
+          prerelease: true
           files: |-
             frontend/src-tauri/target/release/focus
             frontend/src-tauri/target/release/bundle/deb/*.deb

backend/go.mod

@@ -6,6 +6,8 @@ require github.com/gofiber/fiber/v2 v2.51.0
 
 require (
 	github.com/andybalholm/brotli v1.0.5 // indirect
+	github.com/fasthttp/websocket v1.5.3 // indirect
+	github.com/gofiber/websocket/v2 v2.2.1 // indirect
 	github.com/google/uuid v1.4.0 // indirect
 	github.com/klauspost/compress v1.16.7 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
@@ -13,6 +15,7 @@ require (
 	github.com/mattn/go-runewidth v0.0.15 // indirect
 	github.com/philhofer/fwd v1.1.2 // indirect
 	github.com/rivo/uniseg v0.2.0 // indirect
+	github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee // indirect
 	github.com/tinylib/msgp v1.1.8 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasthttp v1.50.0 // indirect

backend/go.sum

@@ -1,7 +1,11 @@
 github.com/andybalholm/brotli v1.0.5 h1:8uQZIdzKmjc/iuPu7O2ioW48L81FgatrcpfFmiq/cCs=
 github.com/andybalholm/brotli v1.0.5/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
+github.com/fasthttp/websocket v1.5.3 h1:TPpQuLwJYfd4LJPXvHDYPMFWbLjsT91n3GpWtCQtdek=
+github.com/fasthttp/websocket v1.5.3/go.mod h1:46gg/UBmTU1kUaTcwQXpUxtRwG2PvIZYeA8oL6vF3Fs=
 github.com/gofiber/fiber/v2 v2.51.0 h1:JNACcZy5e2tGApWB2QrRpenTWn0fq0hkFm6k0C86gKQ=
 github.com/gofiber/fiber/v2 v2.51.0/go.mod h1:xaQRZQJGqnKOQnbQw+ltvku3/h8QxvNi8o6JiJ7Ll0U=
+github.com/gofiber/websocket/v2 v2.2.1 h1:C9cjxvloojayOp9AovmpQrk8VqvVnT8Oao3+IUygH7w=
+github.com/gofiber/websocket/v2 v2.2.1/go.mod h1:Ao/+nyNnX5u/hIFPuHl28a+NIkrqK7PRimyKaj4JxVU=
 github.com/google/uuid v1.4.0 h1:MtMxsa51/r9yyhkyLsVeVt0B+BGQZzpQiTQ4eHZ8bc4=
 github.com/google/uuid v1.4.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/klauspost/compress v1.16.7 h1:2mk3MPGNzKyxErAw8YaohYh69+pa4sIQSC0fPGCFR9I=
@@ -19,6 +23,8 @@ github.com/philhofer/fwd v1.1.2 h1:bnDivRJ1EWPjUIRXV5KfORO897HTbpFAQddBdE8t7Gw=
 github.com/philhofer/fwd v1.1.2/go.mod h1:qkPdfjR2SIEbspLqpe1tO4n5yICnr2DY7mqEx2tUTP0=
 github.com/rivo/uniseg v0.2.0 h1:S1pD9weZBuJdFmowNwbpi7BJ8TNftyUImj/0WQi72jY=
 github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
+github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee h1:8Iv5m6xEo1NR1AvpV+7XmhI4r39LGNzwUL4YpMuL5vk=
+github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee/go.mod h1:qwtSXrKuJh/zsFQ12yEE89xfCrGKK63Rr7ctU/uCo4g=
 github.com/tinylib/msgp v1.1.8 h1:FCXC1xanKO4I8plpHGH2P7koL/RzZs12l/+r7vakfm0=
 github.com/tinylib/msgp v1.1.8/go.mod h1:qkpG+2ldGg4xRFmx+jfTvZPxfGFhi64BcnL9vkCm/Tw=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=

backend/handlers/main.go

@@ -12,6 +12,7 @@ func v1Router(router fiber.Router) error {
 	tagsRouter(router.Group("/tags"))
 	viewsRouter(router.Group("/views"))
 	filtersRouter(router.Group("/filters"))
+	wsRouter(router.Group("/ws"))
 	return nil
 }
 

backend/handlers/projects.go

@@ -83,9 +83,22 @@ func CreateProject(c *fiber.Ctx) error {
 
 	projectsLastEdit = time.Now().Truncate(time.Second);
 
-	return c.Status(fiber.StatusCreated).JSON(fiber.Map{
+	if err = c.Status(fiber.StatusCreated).JSON(fiber.Map{
 		"id": id,
+	}); err != nil {
+		return err;
+	}
+
+	p.ID = id;
+
+	publish(fiber.Map{
+		"object": "project",
+		"action": "create",
+		"id": id,
+		"value": p,
 	})
+
+	return nil;
 }
 
 func UpdateProject(c *fiber.Ctx) error {
@@ -113,7 +126,18 @@ func UpdateProject(c *fiber.Ctx) error {
 
 	projectsLastEdit = time.Now().Truncate(time.Second);
 
-	return c.SendStatus(fiber.StatusNoContent)
+	if err = c.SendStatus(fiber.StatusNoContent); err != nil {
+		return err;
+	}
+
+	publish(fiber.Map{
+		"object": "project",
+		"action": "update",
+		"id": id,
+		"value": p,
+})
+
+	return nil;
 }
 
 func DeleteProject(c *fiber.Ctx) error {
@@ -136,7 +160,17 @@ func DeleteProject(c *fiber.Ctx) error {
 
 	projectsLastEdit = time.Now().Truncate(time.Second);
 
-	return c.SendStatus(fiber.StatusNoContent)
+	if err = c.SendStatus(fiber.StatusNoContent); err != nil {
+		return err;
+	}
+
+	publish(fiber.Map{
+		"object": "project",
+		"action": "delete",
+		"id": id,
+	})
+
+	return nil;
 }
 
 func GetProjectCards(c *fiber.Ctx) error {

backend/handlers/ws.go

@@ -0,0 +1,57 @@
+package handlers
+
+import (
+	"encoding/json"
+	"log"
+
+	"github.com/gofiber/fiber/v2"
+	"github.com/gofiber/websocket/v2"
+)
+
+var (
+	subscribers = make(map[*websocket.Conn]bool)
+)
+
+func wsRouter(router fiber.Router) error {
+	router.Use("/", upgradeWebsocket)
+	router.Get("/", websocket.New(handleWebsocket))
+	return nil;
+}
+
+func upgradeWebsocket(c *fiber.Ctx) error {
+	if websocket.IsWebSocketUpgrade(c) {
+		c.Locals("allowed", true)
+		return c.Next()
+	}
+	return fiber.ErrUpgradeRequired
+}
+
+func handleWebsocket(c *websocket.Conn) {
+	subscribers[c] = true
+	defer func() {
+		delete(subscribers, c)
+		c.Close()
+	}()
+
+	for {
+		_, _, err := c.ReadMessage()
+		if err != nil {
+			return
+		}
+	}
+}
+
+func publish(content fiber.Map) {
+	jsonMessage, err := json.Marshal(content)
+	if err != nil {
+		log.Println("Error marshalling JSON:", err)
+		return
+	}
+
+	for s := range subscribers {
+		if err := s.WriteMessage(websocket.TextMessage, jsonMessage); err != nil {
+			log.Println("Error writing to websocket:", err)
+			s.Close()
+		}
+	}
+}

frontend/run.sh

@@ -1,5 +1,8 @@
 PUBLIC_BACKEND_URL=${PUBLIC_BACKEND_URL:-http://localhost:3000}
+PUBLIC_BACKEND_WSURL=${PUBLIC_BACKEND_WSURL:-${PUBLIC_BACKEND_URL/http:/ws:}}
+PUBLIC_BACKEND_WSURL=${PUBLIC_BACKEND_WSURL/https:/wss:}
 
 find /usr/share/nginx/html -type f -exec sed -i "s|http://localhost:3000|$PUBLIC_BACKEND_URL|g" {} +
+find /usr/share/nginx/html -type f -exec sed -i "s|ws://localhost:3000|$PUBLIC_BACKEND_WSURL|g" {} +
 
 nginx -g 'daemon off;'

frontend/src-tauri/src/main.rs

@@ -3,6 +3,12 @@
 
 fn main() {
   tauri::Builder::default()
+    .invoke_handler(tauri::generate_handler![get_backend_url])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }
+
+#[tauri::command]
+fn get_backend_url() -> String {
+  std::env::var("PUBLIC_BACKEND_URL").unwrap_or_else(|_| "http://localhost:3000".to_string())
+}

frontend/src-tauri/tauri.conf.json

@@ -4,11 +4,12 @@
 		"beforeBuildCommand": "npm run build",
 		"beforeDevCommand": "npm run dev",
 		"devPath": "http://localhost:5173",
-		"distDir": "../build"
+		"distDir": "../build",
+		"withGlobalTauri": true
 	},
 	"package": {
 		"productName": "Focus",
-		"version": "0.3.1"
+		"version": "0.3.2"
 	},
 	"tauri": {
 		"allowlist": {
@@ -56,10 +57,10 @@
 		"windows": [
 			{
 				"fullscreen": false,
-				"height": 600,
+				"height": 800,
 				"resizable": true,
 				"title": "Focus",
-				"width": 800
+				"width": 1000
 			}
 		]
 	}

frontend/src/lib/components/card/Card.svelte

@@ -4,8 +4,7 @@
 	import ModalCard from './ModalCard.svelte';
 
 	export let card: Card;
-
-	let showModal = false;
+	export let showModal = false;
 </script>
 
 <div
@@ -19,7 +18,10 @@
 		if (e.key === 'Enter') showModal = true;
 	}}
 >
-	<div class="title">{card.id} - {card.title}</div>
+	<div class="header">
+		<div class="title">{card.title}</div>
+		<div class="id">#{card.id}</div>
+	</div>
 	<div class="tags">
 		{#each card.cardTags as tag}
 			{#if tag.option}
@@ -43,27 +45,38 @@
 		font-family: 'Open Sans', sans-serif;
 		font-size: 14px;
 		margin-bottom: 10px;
+
+		&:hover {
+			background-color: #303030;
+			cursor: pointer;
+		}
 	}
 
-	.card:hover {
-		background-color: #303030;
-		cursor: pointer;
-	}
-
-	.card .title {
+	.title {
 		font-weight: normal;
 	}
 
-	.card .tags {
+	.tags {
 		padding-top: 10px;
 		font-weight: lighter;
 	}
 
-	.card .tag {
+	.tag {
 		padding: 2px 8px;
 		margin: 4px 4px 0 0;
 		text-transform: uppercase;
 		border-radius: 3px;
 		font-size: 90%;
 	}
+
+	.header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+		.id {
+			font-size: 80%;
+			color: #fff5;
+		}
+	}
 </style>

frontend/src/lib/components/card/ModalCard.svelte

@@ -29,8 +29,8 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="modal" on:click|self|preventDefault={() => save(true)}>
-	<div class="content" on:click|stopPropagation>
+<div class="modal" on:click|self={() => save(true)}>
+	<div class="content">
 		<div class="header">
 			<input class="title" bind:value={newTitle} on:blur={() => save(false)} />
 			<div class="buttons">

frontend/src/lib/components/project/Column.svelte

@@ -40,13 +40,13 @@
 		cards.reload();
 	}
 
+	let openModalCard: Card | null = null;
+
 	async function addCard() {
 		const card = await Card.create(project);
 
 		if (!card) return;
 
-		await card.updateTitle(`untitled ${card.id}`);
-
 		if ($currentView?.filters && $currentView.filters.length > 0) {
 			for (const projectTag of $projectTags) {
 				for (const filter of $currentView.filters) {

frontend/src/lib/components/project/Project.svelte

@@ -86,7 +86,7 @@
 			{#if $cards}
 				<div class="grid">
 					{#if $currentView.primaryTag}
-						{#each $currentView.primaryTag.options as option}
+						{#each $currentView.primaryTag.options as option (option.id)}
 							<Column
 								{option}
 								primaryTag={$currentView.primaryTag}
@@ -111,7 +111,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		transition: all 0.3s ease-in-out;
 		width: 100vw;
 
 		@media (min-width: 800px) {

frontend/src/lib/components/project/Sidebar.svelte

@@ -3,7 +3,6 @@
 	import Project from '$lib/types/Project';
 	import View, { views } from '$lib/types/View';
 	import { onMount } from 'svelte';
-	import { get } from 'svelte/store';
 	import EditIcon from '../icons/EditIcon.svelte';
 	import MenuOpener from '../icons/MenuOpener.svelte';
 	import ViewIcon from '../icons/ViewIcon.svelte';
@@ -47,7 +46,7 @@
 		<div id="branding">
 			<a href="/">
 				<span id="title">Focus.</span>
-				<span id="version">v0.0.1</span>
+				<span id="version">v0.3.2</span>
 			</a>
 		</div>
 		<div id="views">
@@ -232,10 +231,10 @@
 			&:focus {
 				outline: 0;
 			}
+		}
 
-			&.inEdit {
-				background-color: #fff5;
-			}
+		input.inEdit {
+			background-color: #fff5;
 		}
 
 		button {

frontend/src/lib/types/Project.ts

@@ -31,7 +31,7 @@ export default class Project {
 	}
 
 	static async create(): Promise<Project | null> {
-		const id = await projectsApi.create('untitled');
+		const id = await projectsApi.create('New project');
 
 		if (!id) return null;
 

frontend/src/lib/utils/api.ts

@@ -1,26 +1,77 @@
 import axios, { Axios, type AxiosResponse } from 'axios';
-import { toastAlert } from './toasts';
 import { setupCache } from 'axios-cache-interceptor';
+import { toastAlert } from './toasts';
 // import { env } from '$env/dynamic/public';
 
 // const backend = env.PUBLIC_BACKEND_URL || 'http://localhost:3000';
-const backend = 'http://localhost:3000';
+let backendUrl = 'http://localhost:3000';
+let backendWsUrl = 'ws://localhost:3000';
 
-export default setupCache(
-	new Axios({
-		...axios.defaults,
-		baseURL: backend + '/api',
-		validateStatus: () => true,
-		headers: {
-			'Content-Type': 'application/json'
-		}
-	}),
-	{
-		interpretHeader: true,
-		modifiedSince: true
+export function getBackendWsUrl() {
+	return backendWsUrl;
+}
+
+export async function checkTauriUrl(window: any) {
+	if (window.__TAURI__) {
+		console.log('Running in Tauri');
+		await window.__TAURI__
+			.invoke('get_backend_url')
+			.then((url: string) => {
+				if (url && url !== '') {
+					backendUrl = url;
+					backendWsUrl = url.replace('http', 'ws');
+					axiosInstance.defaults.baseURL = backendUrl + '/api';
+					console.log('Backend URL:', backendUrl);
+				}
+			})
+			.catch(console.error);
+	}
+}
+
+let pendingRequests = 0;
+
+export function hasPendingRequests() {
+	return pendingRequests > 0;
+}
+
+const axiosInstance = new Axios({
+	...axios.defaults,
+	baseURL: backendUrl + '/api',
+	validateStatus: () => true,
+	headers: {
+		'Content-Type': 'application/json'
+	}
+});
+
+const cachedInstance = setupCache(axiosInstance, {
+	interpretHeader: true,
+	modifiedSince: true
+});
+
+axiosInstance.interceptors.request.use(
+	(config) => {
+		pendingRequests++;
+		return config;
+	},
+	(error) => {
+		pendingRequests--;
+		return Promise.reject(error);
 	}
 );
 
+axiosInstance.interceptors.response.use(
+	(response) => {
+		pendingRequests--;
+		return response;
+	},
+	(error) => {
+		pendingRequests--;
+		return Promise.reject(error);
+	}
+);
+
+export default axiosInstance;
+
 export function processError(response: AxiosResponse<any, any>, message: string = '') {
 	let title = `${response.status} ${response.statusText}`;
 	let subtitle = message;

frontend/src/lib/utils/toasts.ts

@@ -1,18 +1,29 @@
 import { toast } from '@zerodevx/svelte-toast';
 
 export function toastAlert(title: string, subtitle: string = '', persistant: boolean = false) {
-    toast.push(
-        `<strong>${title}</strong><br>${subtitle}`,
-        {
-            theme: {
-                '--toastBackground': '#ff4d4f',
-                '--toastBarBackground': '#d32f2f',
-                '--toastColor': '#fff',
-            },
-            initial: persistant ? 0 : 1,
-            next: 0,
-            duration: 10000,
-            pausable: true,
-        },
-    ) 
+	toast.push(`<strong>${title}</strong><br>${subtitle}`, {
+		theme: {
+			'--toastBackground': '#ff4d4f',
+			'--toastBarBackground': '#d32f2f',
+			'--toastColor': '#fff'
+		},
+		initial: persistant ? 0 : 1,
+		next: 0,
+		duration: 10000,
+		pausable: true
+	});
+}
+
+export function toastWarning(title: string, subtitle: string = '', persistant: boolean = false) {
+	toast.push(`<strong>${title}</strong><br>${subtitle}`, {
+		theme: {
+			'--toastBackground': '#faad14',
+			'--toastBarBackground': '#d48806',
+			'--toastColor': '#fff'
+		},
+		initial: persistant ? 0 : 1,
+		next: 0,
+		duration: 5000,
+		pausable: true
+	});
 }

frontend/src/lib/utils/webSocketManager.ts

@@ -0,0 +1,93 @@
+import Project, { projects } from '$lib/types/Project';
+import { getBackendWsUrl, hasPendingRequests } from '$lib/utils/api';
+import { toastAlert, toastWarning } from '$lib/utils/toasts';
+import { get } from 'svelte/store';
+
+export default class WebSocketManager {
+	_socket: WebSocket | null;
+	_queue: any[];
+	_reconnectAttempts: number;
+	_maxReconnectAttempts: number;
+	_hasBeenConnected: boolean;
+
+	constructor() {
+		this._socket = null;
+		this._queue = [];
+		this._reconnectAttempts = 0;
+		this._maxReconnectAttempts = 5;
+		this._hasBeenConnected = false;
+	}
+
+	connect() {
+		if (
+			this._socket &&
+			(this._socket.readyState === WebSocket.OPEN ||
+				this._socket.readyState === WebSocket.CONNECTING)
+		) {
+			return;
+		}
+
+		this._socket = new WebSocket(getBackendWsUrl() + '/api/v1/ws');
+
+		this._socket.onopen = () => {
+			this._reconnectAttempts = 0;
+			this._hasBeenConnected = true;
+			console.log('WebSocket connected');
+		};
+
+		this._socket.onclose = () => {
+			console.log('WebSocket disconnected');
+
+			if (this._reconnectAttempts < this._maxReconnectAttempts) {
+				toastWarning(
+					'WebSocket disconnected',
+					`You may experience sync issues. Trying to reconnect... (${this._reconnectAttempts + 1}/${
+						this._maxReconnectAttempts
+					})`
+				);
+				this._reconnectAttempts++;
+				setTimeout(() => {
+					this._socket?.close();
+					this.connect();
+				}, 5000);
+			} else {
+				toastAlert('Failed to connect to WebSocket', 'Please refresh the page to try again.');
+			}
+		};
+
+		this._socket.onerror = (err) => {
+			console.warn('WebSocket error:', err);
+		};
+
+		this._socket.onmessage = async (event) => {
+			const data = JSON.parse(event.data);
+			while (hasPendingRequests()) {
+				await new Promise((resolve) => setTimeout(resolve, 100));
+			}
+			applyMessage(data);
+		};
+	}
+}
+
+function applyMessage(data: any) {
+	switch (data.object) {
+		case 'project':
+			applyProject(data);
+			break;
+		default:
+			console.log('Unknown object:', data);
+	}
+}
+
+function applyProject(data: any) {
+	switch (data.action) {
+		case 'create':
+			if (get(projects).find((p) => p.id === data.id)) break;
+		case 'update':
+			Project.parse(data.value);
+			break;
+		case 'delete':
+			projects.set(get(projects).filter((p) => p.id !== data.id));
+			break;
+	}
+}

frontend/src/routes/+page.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
+	import projectsApi from '$lib/api/projectsApi';
+	import Project, { projects } from '$lib/types/Project';
+	import { checkTauriUrl } from '$lib/utils/api';
+	import WebSocketManager from '$lib/utils/webSocketManager';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onMount } from 'svelte';
 	import SelectProject from '../lib/components/projects/SelectProject.svelte';
-	import Project, { projects } from '$lib/types/Project';
-	import projectsApi from '$lib/api/projectsApi';
+
+	const wsManager = new WebSocketManager();
 
 	onMount(async () => {
+		await checkTauriUrl(window);
 		await projectsApi.getAll();
+		wsManager.connect();
 	});
 </script>
 
@@ -14,7 +20,7 @@
 	<h2>Projects</h2>
 	<ul>
 		{#if $projects}
-			{#each $projects as project}
+			{#each $projects as project (project.id)}
 				<SelectProject {project} />
 			{/each}
 		{/if}

frontend/src/routes/project/+page.svelte

@@ -6,6 +6,7 @@
 	import currentView from '$lib/stores/currentView';
 	import type Project from '$lib/types/Project';
 	import { views } from '$lib/types/View';
+	import { checkTauriUrl } from '$lib/utils/api';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
@@ -13,6 +14,7 @@
 	let project: Project;
 
 	onMount(async () => {
+		await checkTauriUrl(window);
 		const projectId = parseInt($page.url.searchParams.get('id') || '0');
 		const res = await projectsApi.get(projectId);
 

run.sh

@@ -1,5 +1,12 @@
 #!/bin/bash
 
+PUBLIC_BACKEND_URL=${PUBLIC_BACKEND_URL:-http://localhost:3000}
+PUBLIC_BACKEND_WSURL=${PUBLIC_BACKEND_WSURL:-${PUBLIC_BACKEND_URL/http:/ws:}}
+PUBLIC_BACKEND_WSURL=${PUBLIC_BACKEND_WSURL/https:/wss:}
+
+find frontend -type f -exec sed -i "s|http://localhost:3000|$PUBLIC_BACKEND_URL|g" {} +
+find frontend -type f -exec sed -i "s|ws://localhost:3000|$PUBLIC_BACKEND_WSURL|g" {} +
+
 cd frontend && npm run preview -- --port 4173 --host 0.0.0.0 &
 cd backend && ./main &