Merge pull request #582 from coollabsio/next

v3.9.0

.github/workflows/production-release.yml

@@ -2,7 +2,7 @@ name: production-release
 
 on:
   release:
-    types: [published]
+    types: [released]
 
 jobs:
   making-something-cool:

.github/workflows/release-candidate.yml

@@ -0,0 +1,39 @@
+name: release-candidate
+
+on:
+  release:
+    types: [prereleased]
+
+jobs:
+  making-something-cool:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: 'next'
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Get current package version
+        uses: martinbeentjes/npm-get-version-action@v1.2.3
+        id: package-version
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: coollabsio/coolify:${{github.event.release.name}}
+          cache-from: type=registry,ref=coollabsio/coolify:buildcache-rc
+          cache-to: type=registry,ref=coollabsio/coolify:buildcache-rc,mode=max
+      - uses: sarisia/actions-status-discord@v1
+        if: always()
+        with:
+          webhook: ${{ secrets.DISCORD_WEBHOOK_DEV_RELEASE_CHANNEL }}

CONTRIBUTING.md

@@ -125,7 +125,7 @@ ### Add supported versions
 
 Supported versions are hardcoded into Coolify (for now).
 
-You need to update `supportedServiceTypesAndVersions` function at [src/apps/api/src/lib/supportedVersions.ts](src/apps/api/src/lib/supportedVersions.ts). Example JSON:
+You need to update `supportedServiceTypesAndVersions` function at [apps/api/src/lib/services/supportedVersions.ts](apps/api/src/lib/services/supportedVersions.ts). Example JSON:
 
 ```js
      {
@@ -208,22 +208,22 @@ ### Add required functions/properties
 
 4. Add service deletion query to `removeService` function in [apps/api/src/lib/services/common.ts](apps/api/src/lib/services/common.ts)
 
-
+5. Add start process for the new service in [apps/api/src/lib/services/handlers.ts](apps/api/src/lib/services/handlers.ts)
-5. You need to add start process for the new service in [apps/api/src/routes/api/v1/services/handlers.ts](apps/api/src/routes/api/v1/services/handlers.ts)
 
 > See startUmamiService() function as example.
 
+6. Add the newly added start process to `startService` in [apps/api/src/routes/api/v1/services/handlers.ts](apps/api/src/routes/api/v1/services/handlers.ts)
 
-6. You need to add a custom logo at [apps/ui/src/lib/components/svg/services](apps/ui/src/lib/components/svg/services) as a svelte component and export it in [apps/ui/src/lib/components/svg/services/index.ts](apps/ui/src/lib/components/svg/services/index.ts)
+7. You need to add a custom logo at [apps/ui/src/lib/components/svg/services](apps/ui/src/lib/components/svg/services) as a svelte component and export it in [apps/ui/src/lib/components/svg/services/index.ts](apps/ui/src/lib/components/svg/services/index.ts)
 
    SVG is recommended, but you can use PNG as well. It should have the `isAbsolute` variable with the suitable CSS classes, primarily for sizing and positioning.
 
-7. You need to include it the logo at:
+8. You need to include it the logo at:
 
 - [apps/ui/src/lib/components/svg/services/ServiceIcons.svelte](apps/ui/src/lib/components/svg/services/ServiceIcons.svelte) with `isAbsolute`.
 - [apps/ui/src/routes/services/[id]/_ServiceLinks.svelte](apps/ui/src/routes/services/[id]/_ServiceLinks.svelte) with the link to the docs/main site of the service
 
-8. By default the URL and the name frontend forms are included in [apps/ui/src/routes/services/[id]/_Services/_Services.svelte](apps/ui/src/routes/services/[id]/_Services/_Services.svelte).
+9. By default the URL and the name frontend forms are included in [apps/ui/src/routes/services/[id]/_Services/_Services.svelte](apps/ui/src/routes/services/[id]/_Services/_Services.svelte).
 
    If you need to show more details on the frontend, such as users/passwords, you need to add Svelte component to [apps/ui/src/routes/services/[id]/_Services](apps/ui/src/routes/services/[id]/_Services) with an underscore. 
    

CONTRIBUTION_NEW.md

@@ -0,0 +1,108 @@
+---
+head:
+  - - meta
+    - name: description
+      content: Coolify - Databases
+  - - meta
+    - name: keywords
+      content: databases coollabs coolify 
+  - - meta
+    - name: twitter:card
+      content: summary_large_image
+  - - meta
+    - name: twitter:site
+      content: '@andrasbacsai'
+  - - meta
+    - name: twitter:title
+      content: Coolify
+  - - meta
+    - name: twitter:description
+      content: An open-source & self-hostable Heroku / Netlify alternative.
+  - - meta
+    - name: twitter:image
+      content: https://cdn.coollabs.io/assets/coollabs/og-image-databases.png
+  - - meta
+    - property: og:type
+      content: website
+  - - meta
+    - property: og:url
+      content: https://coolify.io
+  - - meta
+    - property: og:title
+      content: Coolify
+  - - meta
+    - property: og:description
+      content: An open-source & self-hostable Heroku / Netlify alternative.
+  - - meta
+    - property: og:site_name
+      content: Coolify
+  - - meta
+    - property: og:image
+      content: https://cdn.coollabs.io/assets/coollabs/og-image-databases.png
+---
+# Contribution
+
+First, thanks for considering to contribute to my project. It really means a lot! :)
+
+You can ask for guidance anytime on our Discord server in the #contribution channel.
+
+## Setup your development environment
+### Github codespaces
+
+If you have github codespaces enabled then you can just create a codespace and run `pnpm dev` to run your the dev environment. All the required dependencies and packages has been configured for you already.
+
+### Gitpod
+
+If you have a [Gitpod](https://gitpod.io), you can just create a workspace from this repository, run `pnpm install && pnpm db:push && pnpm db:seed` and then `pnpm dev`. All the required dependencies and packages has been configured for you already.
+
+### Local Machine
+> At the moment, Coolify `doesn't support Windows`. You must use `Linux` or `MacOS` or consider using Gitpod or Github Codespaces.
+
+- Due to the lock file, this repository is best with [pnpm](https://pnpm.io). I recommend you try and use `pnpm` because it is cool and efficient!
+
+- You need to have [Docker Engine](https://docs.docker.com/engine/install/) installed locally.
+- You need to have [Docker Compose Plugin](https://docs.docker.com/compose/install/compose-plugin/) installed locally.
+- You need to have [GIT LFS Support](https://git-lfs.github.com/) installed locally.
+
+Optional:
+- To test Heroku buildpacks, you need [pack](https://github.com/buildpacks/pack) binary installed locally.
+
+### Inside a Docker container
+`WIP`
+
+## Setup Coolify
+- Copy `apps/api/.env.template` to `apps/api/.env.template` and set the `COOLIFY_APP_ID` environment variable to something cool.
+- `pnpm install` to install dependencies.
+- `pnpm db:push` to o create a local SQlite database.
+
+   This will apply all migrations at `db/dev.db`.
+
+- `pnpm db:seed` seed the database.
+- `pnpm dev` start coding.
+
+## Technical skills required
+
+- **Languages**: Node.js / Javascript / Typescript
+- **Framework JS/TS**: [SvelteKit](https://kit.svelte.dev/) & [Fastify](https://www.fastify.io/)
+- **Database ORM**: [Prisma.io](https://www.prisma.io/)
+- **Docker Engine API**
+
+## Add a new service
+### Which service is eligable to add to Coolify?
+The following statements needs to be true:
+
+- Self-hostable
+- Open-source
+- Maintained (I do not want to add software full of bugs)
+
+### Create Prisma / Database schema for the new service.
+All data that needs to be persist for a service should be saved to the database in `cleartext` or `encrypted`.
+
+very password/api key/passphrase needs to be encrypted. If you are not sure, whether it should be encrypted or not, just encrypt it.
+
+Update Prisma schema in [src/api/prisma/schema.prisma](https://github.com/coollabsio/coolify/blob/main/apps/api/prisma/schema.prisma).
+
+- Add new model with the new service name.
+- Make a relationship with `Service` model.
+- In the `Service` model, the name of the new field should be with low-capital.
+- If the service needs a database, define a `publicPort` field to be able to make it's database public, example field name in case of PostgreSQL: `postgresqlPublicPort`. It should be a optional field.

Dockerfile

@@ -1,7 +1,7 @@
-FROM node:18-alpine3.16 as build
+FROM node:18-slim as build
 WORKDIR /app
 
-RUN apk add --no-cache curl
+RUN apt update && apt -y install curl
 RUN curl -sL https://unpkg.com/@pnpm/self-installer | node
 
 COPY . .
@@ -9,21 +9,12 @@ RUN pnpm install
 RUN pnpm build
 
 # Production build
-FROM node:18-alpine3.16
+FROM node:18-slim
 WORKDIR /app
 ENV NODE_ENV production
 ARG TARGETPLATFORM
 
-ENV PRISMA_QUERY_ENGINE_BINARY=/app/prisma-engines/query-engine \
+RUN apt update && apt -y install git git-lfs openssh-client curl jq cmake sqlite3 openssl psmisc python3 && apt-get clean autoclean && apt-get autoremove --yes && rm -rf /var/lib/{apt,dpkg,cache,log}/
-  PRISMA_MIGRATION_ENGINE_BINARY=/app/prisma-engines/migration-engine \
-  PRISMA_INTROSPECTION_ENGINE_BINARY=/app/prisma-engines/introspection-engine \
-  PRISMA_FMT_BINARY=/app/prisma-engines/prisma-fmt \
-  PRISMA_CLI_QUERY_ENGINE_TYPE=binary \
-  PRISMA_CLIENT_ENGINE_TYPE=binary
-
-COPY --from=coollabsio/prisma-engine:3.15 /prisma-engines/query-engine /prisma-engines/migration-engine /prisma-engines/introspection-engine /prisma-engines/prisma-fmt /app/prisma-engines/
-
-RUN apk add --no-cache git git-lfs openssh-client curl jq cmake sqlite openssl psmisc
 RUN curl -sL https://unpkg.com/@pnpm/self-installer | node
 
 RUN mkdir -p ~/.docker/cli-plugins/

apps/api/package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@breejs/ts-worker": "2.0.0",
-    "@fastify/autoload": "5.2.0",
+    "@fastify/autoload": "5.3.1",
     "@fastify/cookie": "8.1.0",
     "@fastify/cors": "8.1.0",
     "@fastify/env": "4.1.0",
@@ -23,7 +23,7 @@
     "@fastify/static": "6.5.0",
     "@iarna/toml": "2.2.5",
     "@ladjs/graceful": "3.0.2",
-    "@prisma/client": "3.15.2",
+    "@prisma/client": "4.3.1",
     "axios": "0.27.2",
     "bcryptjs": "2.4.3",
     "bree": "9.1.2",
@@ -37,7 +37,7 @@
     "fastify": "4.5.3",
     "fastify-plugin": "4.2.1",
     "generate-password": "1.7.0",
-    "got": "12.3.1",
+    "got": "12.4.1",
     "is-ip": "5.0.0",
     "is-port-reachable": "4.0.0",
     "js-yaml": "4.1.0",
@@ -52,20 +52,20 @@
     "unique-names-generator": "4.7.1"
   },
   "devDependencies": {
-    "@types/node": "18.7.13",
+    "@types/node": "18.7.15",
     "@types/node-os-utils": "1.3.0",
-    "@typescript-eslint/eslint-plugin": "5.35.1",
+    "@typescript-eslint/eslint-plugin": "5.36.2",
-    "@typescript-eslint/parser": "5.35.1",
+    "@typescript-eslint/parser": "5.36.2",
-    "esbuild": "0.15.5",
+    "esbuild": "0.15.7",
     "eslint": "8.23.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "4.2.1",
     "nodemon": "2.0.19",
     "prettier": "2.7.1",
-    "prisma": "3.15.2",
+    "prisma": "4.3.1",
     "rimraf": "3.0.2",
     "tsconfig-paths": "4.1.0",
-    "typescript": "4.7.4"
+    "typescript": "4.8.2"
   },
   "prisma": {
     "seed": "node prisma/seed.js"

apps/api/prisma/migrations/20220831095714_service_weblate/migration.sql

@@ -0,0 +1,18 @@
+-- CreateTable
+CREATE TABLE "Weblate" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "adminPassword" TEXT NOT NULL,
+    "postgresqlHost" TEXT NOT NULL,
+    "postgresqlPort" INTEGER NOT NULL,
+    "postgresqlUser" TEXT NOT NULL,
+    "postgresqlPassword" TEXT NOT NULL,
+    "postgresqlDatabase" TEXT NOT NULL,
+    "postgresqlPublicPort" INTEGER,
+    "serviceId" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "Weblate_serviceId_fkey" FOREIGN KEY ("serviceId") REFERENCES "Service" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Weblate_serviceId_key" ON "Weblate"("serviceId");

apps/api/prisma/migrations/20220902115640_service_taiga/migration.sql

@@ -0,0 +1,23 @@
+-- CreateTable
+CREATE TABLE "Taiga" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "secretKey" TEXT NOT NULL,
+    "erlangSecret" TEXT NOT NULL,
+    "djangoAdminPassword" TEXT NOT NULL,
+    "djangoAdminUser" TEXT NOT NULL,
+    "rabbitMQUser" TEXT NOT NULL,
+    "rabbitMQPassword" TEXT NOT NULL,
+    "postgresqlHost" TEXT NOT NULL,
+    "postgresqlPort" INTEGER NOT NULL,
+    "postgresqlUser" TEXT NOT NULL,
+    "postgresqlPassword" TEXT NOT NULL,
+    "postgresqlDatabase" TEXT NOT NULL,
+    "postgresqlPublicPort" INTEGER,
+    "serviceId" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "Taiga_serviceId_fkey" FOREIGN KEY ("serviceId") REFERENCES "Service" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Taiga_serviceId_key" ON "Taiga"("serviceId");

apps/api/prisma/migrations/20220905062318_database_branching/migration.sql

@@ -0,0 +1,22 @@
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_ApplicationSettings" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "applicationId" TEXT NOT NULL,
+    "dualCerts" BOOLEAN NOT NULL DEFAULT false,
+    "debug" BOOLEAN NOT NULL DEFAULT false,
+    "previews" BOOLEAN NOT NULL DEFAULT false,
+    "autodeploy" BOOLEAN NOT NULL DEFAULT true,
+    "isBot" BOOLEAN NOT NULL DEFAULT false,
+    "isPublicRepository" BOOLEAN NOT NULL DEFAULT false,
+    "isDBBranching" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "ApplicationSettings_applicationId_fkey" FOREIGN KEY ("applicationId") REFERENCES "Application" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+INSERT INTO "new_ApplicationSettings" ("applicationId", "autodeploy", "createdAt", "debug", "dualCerts", "id", "isBot", "isPublicRepository", "previews", "updatedAt") SELECT "applicationId", "autodeploy", "createdAt", "debug", "dualCerts", "id", "isBot", "isPublicRepository", "previews", "updatedAt" FROM "ApplicationSettings";
+DROP TABLE "ApplicationSettings";
+ALTER TABLE "new_ApplicationSettings" RENAME TO "ApplicationSettings";
+CREATE UNIQUE INDEX "ApplicationSettings_applicationId_key" ON "ApplicationSettings"("applicationId");
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;

apps/api/prisma/migrations/20220905113241_prisma_migration/migration.sql

@@ -0,0 +1,20 @@
+/*
+  Warnings:
+
+  - You are about to alter the column `time` on the `BuildLog` table. The data in that column could be lost. The data in that column will be cast from `Int` to `BigInt`.
+
+*/
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_BuildLog" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "applicationId" TEXT,
+    "buildId" TEXT NOT NULL,
+    "line" TEXT NOT NULL,
+    "time" BIGINT NOT NULL
+);
+INSERT INTO "new_BuildLog" ("applicationId", "buildId", "id", "line", "time") SELECT "applicationId", "buildId", "id", "line", "time" FROM "BuildLog";
+DROP TABLE "BuildLog";
+ALTER TABLE "new_BuildLog" RENAME TO "BuildLog";
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;

apps/api/prisma/migrations/20220905115321_application_connected_database/migration.sql

@@ -0,0 +1,20 @@
+-- CreateTable
+CREATE TABLE "ApplicationConnectedDatabase" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "applicationId" TEXT NOT NULL,
+    "databaseId" TEXT,
+    "hostedDatabaseType" TEXT,
+    "hostedDatabaseHost" TEXT,
+    "hostedDatabasePort" INTEGER,
+    "hostedDatabaseName" TEXT,
+    "hostedDatabaseUser" TEXT,
+    "hostedDatabasePassword" TEXT,
+    "hostedDatabaseDBName" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "ApplicationConnectedDatabase_databaseId_fkey" FOREIGN KEY ("databaseId") REFERENCES "Database" ("id") ON DELETE SET NULL ON UPDATE CASCADE,
+    CONSTRAINT "ApplicationConnectedDatabase_applicationId_fkey" FOREIGN KEY ("applicationId") REFERENCES "Application" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ApplicationConnectedDatabase_applicationId_key" ON "ApplicationConnectedDatabase"("applicationId");

apps/api/prisma/schema.prisma

@@ -1,6 +1,6 @@
 generator client {
   provider      = "prisma-client-js"
-  binaryTargets = ["native", "linux-musl"]
+  binaryTargets = ["native"]
 }
 
 datasource db {
@@ -117,6 +117,24 @@ model Application {
   settings            ApplicationSettings?
   secrets             Secret[]
   teams               Team[]
+  connectedDatabase   ApplicationConnectedDatabase?
+}
+
+model ApplicationConnectedDatabase {
+  id                     String      @id @default(cuid())
+  applicationId          String      @unique
+  databaseId             String?
+  hostedDatabaseType     String?
+  hostedDatabaseHost     String?
+  hostedDatabasePort     Int?
+  hostedDatabaseName     String?
+  hostedDatabaseUser     String?
+  hostedDatabasePassword String?
+  hostedDatabaseDBName   String?
+  createdAt              DateTime    @default(now())
+  updatedAt              DateTime    @updatedAt
+  database               Database?   @relation(fields: [databaseId], references: [id])
+  application            Application @relation(fields: [applicationId], references: [id])
 }
 
 model ApplicationSettings {
@@ -128,6 +146,7 @@ model ApplicationSettings {
   autodeploy         Boolean     @default(true)
   isBot              Boolean     @default(false)
   isPublicRepository Boolean     @default(false)
+  isDBBranching      Boolean     @default(false)
   createdAt          DateTime    @default(now())
   updatedAt          DateTime    @updatedAt
   application        Application @relation(fields: [applicationId], references: [id])
@@ -186,7 +205,7 @@ model BuildLog {
   applicationId String?
   buildId       String
   line          String
-  time          Int
+  time          BigInt
 }
 
 model Build {
@@ -291,22 +310,23 @@ model GitlabApp {
 }
 
 model Database {
-  id                  String             @id @default(cuid())
+  id                           String                         @id @default(cuid())
-  name                String
+  name                         String
-  publicPort          Int?
+  publicPort                   Int?
-  defaultDatabase     String?
+  defaultDatabase              String?
-  type                String?
+  type                         String?
-  version             String?
+  version                      String?
-  dbUser              String?
+  dbUser                       String?
-  dbUserPassword      String?
+  dbUserPassword               String?
-  rootUser            String?
+  rootUser                     String?
-  rootUserPassword    String?
+  rootUserPassword             String?
-  destinationDockerId String?
+  destinationDockerId          String?
-  createdAt           DateTime           @default(now())
+  createdAt                    DateTime                       @default(now())
-  updatedAt           DateTime           @updatedAt
+  updatedAt                    DateTime                       @updatedAt
-  destinationDocker   DestinationDocker? @relation(fields: [destinationDockerId], references: [id])
+  destinationDocker            DestinationDocker?             @relation(fields: [destinationDockerId], references: [id])
-  settings            DatabaseSettings?
+  settings                     DatabaseSettings?
-  teams               Team[]
+  teams                        Team[]
+  applicationConnectedDatabase ApplicationConnectedDatabase[]
 }
 
 model DatabaseSettings {
@@ -348,6 +368,8 @@ model Service {
   wordpress          Wordpress?
   appwrite           Appwrite?
   searxng            Searxng?
+  weblate            Weblate?
+  taiga              Taiga?
 }
 
 model PlausibleAnalytics {
@@ -559,3 +581,38 @@ model Searxng {
   updatedAt     DateTime @updatedAt
   service       Service  @relation(fields: [serviceId], references: [id])
 }
+
+model Weblate {
+  id                   String   @id @default(cuid())
+  adminPassword        String
+  postgresqlHost       String
+  postgresqlPort       Int
+  postgresqlUser       String
+  postgresqlPassword   String
+  postgresqlDatabase   String
+  postgresqlPublicPort Int?
+  serviceId            String   @unique
+  createdAt            DateTime @default(now())
+  updatedAt            DateTime @updatedAt
+  service              Service  @relation(fields: [serviceId], references: [id])
+}
+
+model Taiga {
+  id                   String   @id @default(cuid())
+  secretKey            String
+  erlangSecret         String
+  djangoAdminPassword  String
+  djangoAdminUser      String
+  rabbitMQUser         String
+  rabbitMQPassword     String
+  postgresqlHost       String
+  postgresqlPort       Int
+  postgresqlUser       String
+  postgresqlPassword   String
+  postgresqlDatabase   String
+  postgresqlPublicPort Int?
+  serviceId            String   @unique
+  createdAt            DateTime @default(now())
+  updatedAt            DateTime @updatedAt
+  service              Service  @relation(fields: [serviceId], references: [id])
+}

apps/api/src/index.ts

@@ -5,7 +5,7 @@ import env from '@fastify/env';
 import cookie from '@fastify/cookie';
 import path, { join } from 'path';
 import autoLoad from '@fastify/autoload';
-import { asyncExecShell, isDev, listSettings, prisma, version } from './lib/common';
+import { asyncExecShell, createRemoteEngineConfiguration, isDev, listSettings, prisma, version } from './lib/common';
 import { scheduler } from './lib/scheduler';
 import { compareVersions } from 'compare-versions';
 import Graceful from '@ladjs/graceful'
@@ -136,8 +136,11 @@ fastify.listen({ port, host }, async (err: any, address: any) => {
 	// 	scheduler.workers.has('infrastructure') && scheduler.workers.get('infrastructure').postMessage("action:cleanupPrismaEngines")
 	// }, 60000)
 
-	await getArch();
+	await Promise.all([
-	await getIPAddress();
+		getArch(),
+		getIPAddress(),
+		// configureRemoteDockers(),
+	])
 });
 async function getIPAddress() {
 	const { publicIpv4, publicIpv6 } = await import('public-ip')
@@ -175,4 +178,15 @@ async function getArch() {
 	} catch (error) { }
 }
 
-
+async function configureRemoteDockers() {
+	try {
+		const remoteDocker = await prisma.destinationDocker.findMany({
+			where: { remoteVerified: true, remoteEngine: true }
+		});
+		if (remoteDocker.length > 0) {
+			for (const docker of remoteDocker) {
+				await createRemoteEngineConfiguration(docker.id)
+			}
+		}
+	} catch (error) { }
+}

apps/api/src/jobs/deployApplication.ts

@@ -177,9 +177,7 @@ import * as buildpacks from '../lib/buildPacks';
 
 									try {
 										await prisma.build.update({ where: { id: buildId }, data: { commit } });
-									} catch (err) {
+									} catch (err) { }
-										console.log(err);
-									}
 
 									if (!pullmergeRequestId) {
 										if (configHash !== currentHash) {

apps/api/src/jobs/infrastructure.ts

@@ -1,11 +1,8 @@
 import { parentPort } from 'node:worker_threads';
 import axios from 'axios';
 import { compareVersions } from 'compare-versions';
-import { asyncExecShell, cleanupDockerStorage, executeDockerCmd, isDev, prisma, startTraefikTCPProxy, generateDatabaseConfiguration, startTraefikProxy, listSettings, version } from '../lib/common';
+import { asyncExecShell, cleanupDockerStorage, executeDockerCmd, isDev, prisma, startTraefikTCPProxy, generateDatabaseConfiguration, startTraefikProxy, listSettings, version, createRemoteEngineConfiguration } from '../lib/common';
 
-async function disconnect() {
-    await prisma.$disconnect();
-}
 async function autoUpdater() {
     try {
         const currentVersion = version;
@@ -24,9 +21,11 @@ async function autoUpdater() {
             const activeCount = 0
             if (activeCount === 0) {
                 if (!isDev) {
-                    console.log(`Updating Coolify to ${latestVersion}.`);
                     await asyncExecShell(`docker pull coollabsio/coolify:${latestVersion}`);
                     await asyncExecShell(`env | grep COOLIFY > .env`);
+                    await asyncExecShell(
+                        `sed -i '/COOLIFY_AUTO_UPDATE=/cCOOLIFY_AUTO_UPDATE=true' .env`
+                    );
                     await asyncExecShell(
                         `docker run --rm -tid --env-file .env -v /var/run/docker.sock:/var/run/docker.sock -v coolify-db coollabsio/coolify:${latestVersion} /bin/sh -c "env | grep COOLIFY > .env && echo 'TAG=${latestVersion}' >> .env && docker stop -t 0 coolify && docker rm coolify && docker compose up -d --force-recreate"`
                     );
@@ -35,9 +34,7 @@ async function autoUpdater() {
                 }
             }
         }
-    } catch (error) {
+    } catch (error) { }
-        console.log(error);
-    }
 }
 async function checkProxies() {
     try {
@@ -45,18 +42,35 @@ async function checkProxies() {
         let portReachable;
 
         const { arch, ipv4, ipv6 } = await listSettings();
+
         // Coolify Proxy local
         const engine = '/var/run/docker.sock';
         const localDocker = await prisma.destinationDocker.findFirst({
-            where: { engine, network: 'coolify' }
+            where: { engine, network: 'coolify', isCoolifyProxyUsed: true }
         });
-        if (localDocker && localDocker.isCoolifyProxyUsed) {
+        if (localDocker) {
             portReachable = await isReachable(80, { host: ipv4 || ipv6 })
             if (!portReachable) {
                 await startTraefikProxy(localDocker.id);
             }
         }
-
+        // Coolify Proxy remote
+        const remoteDocker = await prisma.destinationDocker.findMany({
+            where: { remoteEngine: true, remoteVerified: true }
+        });
+        if (remoteDocker.length > 0) {
+            for (const docker of remoteDocker) {
+                if (docker.isCoolifyProxyUsed) {
+                    portReachable = await isReachable(80, { host: docker.remoteIpAddress })
+                    if (!portReachable) {
+                        await startTraefikProxy(docker.id);
+                    }
+                }
+                try {
+                    await createRemoteEngineConfiguration(docker.id)
+                } catch (error) { }
+            }
+        }
         // TCP Proxies
         const databasesWithPublicPort = await prisma.database.findMany({
             where: { publicPort: { not: null } },
@@ -113,9 +127,7 @@ async function cleanupPrismaEngines() {
             if (stdout.trim() != null && stdout.trim() != '' && Number(stdout.trim()) > 1) {
                 await asyncExecShell(`killall -q -e /app/prisma-engines/query-engine -o 1m`)
             }
-        } catch (error) {
+        } catch (error) { }
-            console.log(error);
-        }
     }
 }
 async function cleanupStorage() {
@@ -166,9 +178,7 @@ async function cleanupStorage() {
                     lowDiskSpace = true;
                 }
             }
-        } catch (error) {
+        } catch (error) { }
-            console.log(error);
-        }
         await cleanupDockerStorage(destination.id, lowDiskSpace, false)
     }
 }

apps/api/src/lib/buildPacks/common.ts

@@ -512,7 +512,6 @@ export async function copyBaseConfigurationFiles(
 			);
 		}
 	} catch (error) {
-		console.log(error);
 		throw new Error(error);
 	}
 }

apps/api/src/lib/common.ts

@@ -21,7 +21,7 @@ import { scheduler } from './scheduler';
 import { supportedServiceTypesAndVersions } from './services/supportedVersions';
 import { includeServices } from './services/common';
 
-export const version = '3.8.9';
+export const version = '3.9.0';
 export const isDev = process.env.NODE_ENV === 'development';
 
 const algorithm = 'aes-256-ctr';
@@ -139,10 +139,10 @@ export const prisma = new PrismaClient({
 });
 
 // prisma.$on('query', (e) => {
-	// console.log({e})
+// console.log({e})
-	// console.log('Query: ' + e.query)
+// console.log('Query: ' + e.query)
-	// console.log('Params: ' + e.params)
+// console.log('Params: ' + e.params)
-	// console.log('Duration: ' + e.duration + 'ms')
+// console.log('Duration: ' + e.duration + 'ms')
 //   })
 export const base64Encode = (text: string): string => {
 	return Buffer.from(text).toString('base64');
@@ -439,7 +439,6 @@ export async function getFreeSSHLocalPort(id: string): Promise<number | boolean>
 		return Number(alreadyConfigured.sshLocalPort)
 	}
 	const range = generateRangeArray(minPort, maxPort)
-	console.log({ ports })
 	const availablePorts = range.filter(port => !ports.map(p => p.sshLocalPort).includes(port))
 	for (const port of availablePorts) {
 		const found = await isReachable(port, { host: 'localhost' })
@@ -458,20 +457,21 @@ export async function createRemoteEngineConfiguration(id: string) {
 	const { sshKey: { privateKey }, remoteIpAddress, remotePort, remoteUser } = await prisma.destinationDocker.findFirst({ where: { id }, include: { sshKey: true } })
 	await fs.writeFile(sshKeyFile, decrypt(privateKey) + '\n', { encoding: 'utf8', mode: 400 })
 	// Needed for remote docker compose
-	const { stdout: numberOfSSHAgentsRunning } = await asyncExecShell(`ps ax | grep [s]sh-agent | grep ssh-agent.pid | grep -v grep | wc -l`)
+	const { stdout: numberOfSSHAgentsRunning } = await asyncExecShell(`ps ax | grep [s]sh-agent | grep coolify-ssh-agent.pid | grep -v grep | wc -l`)
 	if (numberOfSSHAgentsRunning !== '' && Number(numberOfSSHAgentsRunning.trim()) == 0) {
-		await asyncExecShell(`eval $(ssh-agent -sa /tmp/ssh-agent.pid)`)
+		try {
+			await fs.stat(`/tmp/coolify-ssh-agent.pid`)
+			await fs.rm(`/tmp/coolify-ssh-agent.pid`)
+		} catch (error) { }
+		await asyncExecShell(`eval $(ssh-agent -sa /tmp/coolify-ssh-agent.pid)`)
 	}
-	await asyncExecShell(`SSH_AUTH_SOCK=/tmp/ssh-agent.pid ssh-add -q ${sshKeyFile}`)
+	await asyncExecShell(`SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid ssh-add -q ${sshKeyFile}`)
 
 	const { stdout: numberOfSSHTunnelsRunning } = await asyncExecShell(`ps ax | grep 'ssh -F /dev/null -o StrictHostKeyChecking no -fNL ${localPort}:localhost:${remotePort}' | grep -v grep | wc -l`)
 	if (numberOfSSHTunnelsRunning !== '' && Number(numberOfSSHTunnelsRunning.trim()) == 0) {
 		try {
-			await asyncExecShell(`SSH_AUTH_SOCK=/tmp/ssh-agent.pid ssh -F /dev/null -o "StrictHostKeyChecking no" -fNL ${localPort}:localhost:${remotePort} ${remoteUser}@${remoteIpAddress}`)
+			await asyncExecShell(`SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid ssh -F /dev/null -o "StrictHostKeyChecking no" -fNL ${localPort}:localhost:${remotePort} ${remoteUser}@${remoteIpAddress}`)
-
+		} catch (error) { }
-		} catch (error) {
-			console.log(error)
-		}
 
 	}
 	const config = sshConfig.parse('')
@@ -1089,7 +1089,6 @@ export async function checkExposedPort({ id, configuredPort, exposePort, dockerI
 	if (exposePort < 1024 || exposePort > 65535) {
 		throw { status: 500, message: `Exposed Port needs to be between 1024 and 65535.` }
 	}
-
 	if (configuredPort) {
 		if (configuredPort !== exposePort) {
 			const availablePort = await getFreeExposedPort(id, exposePort, dockerId, remoteIpAddress);
@@ -1249,7 +1248,6 @@ export async function startTraefikTCPProxy(
 			})
 		}
 	} catch (error) {
-		console.log(error);
 		return error;
 	}
 }
@@ -1309,6 +1307,9 @@ export function saveUpdateableFields(type: string, data: any) {
 					temp = Boolean(temp)
 				}
 			}
+			if (k.isNumber && temp === '') {
+				temp = null
+			}
 			update[k.name] = temp
 		});
 	}
@@ -1351,9 +1352,9 @@ export const getServiceMainPort = (service: string) => {
 export function makeLabelForServices(type) {
 	return [
 		'coolify.managed=true',
-		`coolify.version = ${version}`,
+		`coolify.version=${version}`,
-		`coolify.type = service`,
+		`coolify.type=service`,
-		`coolify.service.type = ${type}`
+		`coolify.service.type=${type}`
 	];
 }
 export function errorHandler({ status = 500, message = 'Unknown error.' }: { status: number, message: string | any }) {
@@ -1434,15 +1435,13 @@ export function convertTolOldVolumeNames(type) {
 export async function cleanupDockerStorage(dockerId, lowDiskSpace, force) {
 	// Cleanup old coolify images
 	try {
-		let { stdout: images } = await executeDockerCmd({ dockerId, command: `docker images coollabsio/coolify --filter before="coollabsio/coolify:${version}" -q | xargs` })
+		let { stdout: images } = await executeDockerCmd({ dockerId, command: `docker images coollabsio/coolify --filter before="coollabsio/coolify:${version}" -q | xargs -r` })
 
 		images = images.trim();
 		if (images) {
-			await executeDockerCmd({ dockerId, command: `docker rmi -f ${images}" -q | xargs` })
+			await executeDockerCmd({ dockerId, command: `docker rmi -f ${images}" -q | xargs -r` })
 		}
-	} catch (error) {
+	} catch (error) { }
-		//console.log(error);
-	}
 	if (lowDiskSpace || force) {
 		if (isDev) {
 			if (!force) console.log(`[DEV MODE] Low disk space: ${lowDiskSpace}`);
@@ -1450,37 +1449,40 @@ export async function cleanupDockerStorage(dockerId, lowDiskSpace, force) {
 		}
 		try {
 			await executeDockerCmd({ dockerId, command: `docker container prune -f --filter "label=coolify.managed=true"` })
-		} catch (error) {
+		} catch (error) { }
-			//console.log(error);
-		}
 		try {
 			await executeDockerCmd({ dockerId, command: `docker image prune -f` })
-		} catch (error) {
+		} catch (error) { }
-			//console.log(error);
-		}
 		try {
 			await executeDockerCmd({ dockerId, command: `docker image prune -a -f` })
-		} catch (error) {
+		} catch (error) { }
-			//console.log(error);
-		}
 		// Cleanup build caches
 		try {
 			await executeDockerCmd({ dockerId, command: `docker builder prune -a -f` })
-		} catch (error) {
+		} catch (error) { }
-			//console.log(error);
-		}
 	}
 }
 
 export function persistentVolumes(id, persistentStorage, config) {
+	let volumeSet = new Set();
+	if (Object.keys(config).length > 0) {
+		for (const [key, value] of Object.entries(config)) {
+			if (value.volumes) {
+				for (const volume of value.volumes) {
+					volumeSet.add(volume);
+				}
+			}
+
+		}
+	}
+	const volumesArray = Array.from(volumeSet);
 	const persistentVolume =
 		persistentStorage?.map((storage) => {
 			return `${id}${storage.path.replace(/\//gi, '-')}:${storage.path}`;
 		}) || [];
 
 	let volumes = [...persistentVolume]
-	if (config.volume) volumes = [config.volume, ...volumes]
+	if (volumesArray) volumes = [...volumesArray, ...volumes]
-
 	const composeVolumes = volumes.length > 0 && volumes.map((volume) => {
 		return {
 			[`${volume.split(':')[0]}`]: {
@@ -1489,16 +1491,11 @@ export function persistentVolumes(id, persistentStorage, config) {
 		};
 	}) || []
 
-	const volumeMounts = config.volume && Object.assign(
+	const volumeMounts = Object.assign(
 		{},
-		{
-			[config.volume.split(':')[0]]: {
-				name: config.volume.split(':')[0]
-			}
-		},
 		...composeVolumes
 	) || {}
-	return { volumes, volumeMounts }
+	return { volumeMounts }
 }
 export function defaultComposeConfiguration(network: string): any {
 	return {
@@ -1515,26 +1512,26 @@ export function defaultComposeConfiguration(network: string): any {
 	}
 }
 export function decryptApplication(application: any) {
-    if (application) {
+	if (application) {
-        if (application?.gitSource?.githubApp?.clientSecret) {
+		if (application?.gitSource?.githubApp?.clientSecret) {
-            application.gitSource.githubApp.clientSecret = decrypt(application.gitSource.githubApp.clientSecret) || null;
+			application.gitSource.githubApp.clientSecret = decrypt(application.gitSource.githubApp.clientSecret) || null;
-        }
+		}
-        if (application?.gitSource?.githubApp?.webhookSecret) {
+		if (application?.gitSource?.githubApp?.webhookSecret) {
-            application.gitSource.githubApp.webhookSecret = decrypt(application.gitSource.githubApp.webhookSecret) || null;
+			application.gitSource.githubApp.webhookSecret = decrypt(application.gitSource.githubApp.webhookSecret) || null;
-        }
+		}
-        if (application?.gitSource?.githubApp?.privateKey) {
+		if (application?.gitSource?.githubApp?.privateKey) {
-            application.gitSource.githubApp.privateKey = decrypt(application.gitSource.githubApp.privateKey) || null;
+			application.gitSource.githubApp.privateKey = decrypt(application.gitSource.githubApp.privateKey) || null;
-        }
+		}
-        if (application?.gitSource?.gitlabApp?.appSecret) {
+		if (application?.gitSource?.gitlabApp?.appSecret) {
-            application.gitSource.gitlabApp.appSecret = decrypt(application.gitSource.gitlabApp.appSecret) || null;
+			application.gitSource.gitlabApp.appSecret = decrypt(application.gitSource.gitlabApp.appSecret) || null;
-        }
+		}
-        if (application?.secrets.length > 0) {
+		if (application?.secrets.length > 0) {
-            application.secrets = application.secrets.map((s: any) => {
+			application.secrets = application.secrets.map((s: any) => {
-                s.value = decrypt(s.value) || null
+				s.value = decrypt(s.value) || null
-                return s;
+				return s;
-            });
+			});
-        }
+		}
 
-        return application;
+		return application;
-    }
+	}
 }

apps/api/src/lib/docker.ts

@@ -76,7 +76,6 @@ export async function removeContainer({
 			await executeDockerCmd({ dockerId, command: `docker rm ${id}` })
 		}
 	} catch (error) {
-		console.log(error);
 		throw error;
 	}
 }

apps/api/src/lib/services/common.ts

@@ -1,23 +1,7 @@
-import { exec } from 'node:child_process'
+
-import util from 'util';
-import fs from 'fs/promises';
-import yaml from 'js-yaml';
-import forge from 'node-forge';
-import { uniqueNamesGenerator, adjectives, colors, animals } from 'unique-names-generator';
-import type { Config } from 'unique-names-generator';
-import generator from 'generate-password';
-import crypto from 'crypto';
-import { promises as dns } from 'dns';
-import { PrismaClient } from '@prisma/client';
 import cuid from 'cuid';
-import os from 'os';
-import sshConfig from 'ssh-config'
 import { encrypt, generatePassword, prisma } from '../common';
 
-
-export const version = '3.8.2';
-export const isDev = process.env.NODE_ENV === 'development';
-
 export const includeServices: any = {
 	destinationDocker: true,
 	persistentStorage: true,
@@ -34,7 +18,9 @@ export const includeServices: any = {
 	moodle: true,
 	appwrite: true,
 	glitchTip: true,
-	searxng: true
+	searxng: true,
+	weblate: true,
+	taiga: true
 };
 export async function configureServiceType({
 	id,
@@ -312,6 +298,58 @@ export async function configureServiceType({
 				}
 			}
 		});
+	} else if (type === 'weblate') {
+		const adminPassword = encrypt(generatePassword({}))
+		const postgresqlUser = cuid();
+		const postgresqlPassword = encrypt(generatePassword({}));
+		const postgresqlDatabase = 'weblate';
+		await prisma.service.update({
+			where: { id },
+			data: {
+				type,
+				weblate: {
+					create: {
+						adminPassword,
+						postgresqlHost: `${id}-postgresql`,
+						postgresqlPort: 5432,
+						postgresqlUser,
+						postgresqlPassword,
+						postgresqlDatabase,
+					}
+				}
+			}
+		});
+	} else if (type === 'taiga') {
+		const secretKey = encrypt(generatePassword({}))
+		const erlangSecret = encrypt(generatePassword({}))
+		const rabbitMQUser = cuid();
+		const djangoAdminUser = cuid();
+		const djangoAdminPassword = encrypt(generatePassword({}))
+		const rabbitMQPassword = encrypt(generatePassword({}))
+		const postgresqlUser = cuid();
+		const postgresqlPassword = encrypt(generatePassword({}));
+		const postgresqlDatabase = 'taiga';
+		await prisma.service.update({
+			where: { id },
+			data: {
+				type,
+				taiga: {
+					create: {
+						secretKey,
+						erlangSecret,
+						djangoAdminUser,
+						djangoAdminPassword,
+						rabbitMQUser,
+						rabbitMQPassword,
+						postgresqlHost: `${id}-postgresql`,
+						postgresqlPort: 5432,
+						postgresqlUser,
+						postgresqlPassword,
+						postgresqlDatabase,
+					}
+				}
+			}
+		});
 	} else {
 		await prisma.service.update({
 			where: { id },
@@ -338,7 +376,8 @@ export async function removeService({ id }: { id: string }): Promise<void> {
 	await prisma.moodle.deleteMany({ where: { serviceId: id } });
 	await prisma.appwrite.deleteMany({ where: { serviceId: id } });
 	await prisma.searxng.deleteMany({ where: { serviceId: id } });
-
+	await prisma.weblate.deleteMany({ where: { serviceId: id } });
+	await prisma.taiga.deleteMany({ where: { serviceId: id } });
 	
 	await prisma.service.delete({ where: { id } });
 }

apps/api/src/lib/services/serviceFields.ts

@@ -599,6 +599,54 @@ export const glitchTip = [{
 	isBoolean: false,
 	isEncrypted: true
 },
+{
+	name: 'emailSmtpHost',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'emailSmtpPassword',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'emailSmtpUseSsl',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: true,
+	isEncrypted: false
+},
+{
+	name: 'emailSmtpUseSsl',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: true,
+	isEncrypted: false
+},
+{
+	name: 'emailSmtpPort',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: true,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'emailSmtpUser',
+	isEditable: true,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
 {
 	name: 'defaultEmail',
 	isEditable: false,
@@ -624,7 +672,7 @@ export const glitchTip = [{
 	isEncrypted: true
 },
 {
-	name: 'defaultFromEmail',
+	name: 'defaultEmailFrom',
 	isEditable: true,
 	isLowerCase: false,
 	isNumber: false,
@@ -688,3 +736,132 @@ export const searxng = [{
 	isBoolean: false,
 	isEncrypted: true
 }]
+
+export const weblate = [{
+	name: 'adminPassword',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'postgresqlHost',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlPort',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlUser',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlPassword',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'postgresqlDatabase',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+}]
+export const taiga = [{
+	name: 'secretKey',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'djangoAdminUser',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'djangoAdminPassword',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'rabbitMQUser',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'rabbitMQPassword',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'postgresqlHost',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlPort',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlUser',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+},
+{
+	name: 'postgresqlPassword',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: true
+},
+{
+	name: 'postgresqlDatabase',
+	isEditable: false,
+	isLowerCase: false,
+	isNumber: false,
+	isBoolean: false,
+	isEncrypted: false
+}]

apps/api/src/lib/services/supportedVersions.ts

@@ -190,4 +190,26 @@ export const supportedServiceTypesAndVersions = [
 			main: 8080
 		}
 	},
+	{
+		name: 'weblate',
+		fancyName: 'Weblate',
+		baseImage: 'weblate/weblate',
+		images: ['postgres:14-alpine', 'redis:6-alpine'],
+		versions: ['latest'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 8080
+		}
+	},
+	// {
+	// 	name: 'taiga',
+	// 	fancyName: 'Taiga',
+	// 	baseImage: 'taigaio/taiga-front',
+	// 	images: ['postgres:12.3', 'rabbitmq:3.8-management-alpine', 'taigaio/taiga-back', 'taigaio/taiga-events', 'taigaio/taiga-protected'],
+	// 	versions: ['latest'],
+	// 	recommendedVersion: 'latest',
+	// 	ports: {
+	// 		main: 80
+	// 	}
+	// },
 ];

apps/api/src/plugins/jwt.ts

@@ -21,7 +21,6 @@ export default fp<FastifyJWTOptions>(async (fastify, opts) => {
         try {
             await request.jwtVerify()
         } catch (err) {
-            console.log(err)
             reply.send(err)
         }
     })

apps/api/src/routes/api/v1/applications/handlers.ts

@@ -3,16 +3,23 @@ import crypto from 'node:crypto'
 import jsonwebtoken from 'jsonwebtoken';
 import axios from 'axios';
 import { FastifyReply } from 'fastify';
+import fs from 'fs/promises';
+import yaml from 'js-yaml';
+
 import { day } from '../../../../lib/dayjs';
-import { setDefaultBaseImage, setDefaultConfiguration } from '../../../../lib/buildPacks/common';
+import { makeLabelForStandaloneApplication, setDefaultBaseImage, setDefaultConfiguration } from '../../../../lib/buildPacks/common';
-import { checkDomainsIsValidInDNS, checkDoubleBranch, checkExposedPort, decrypt, encrypt, errorHandler, executeDockerCmd, generateSshKeyPair, getContainerUsage, getDomain, getFreeExposedPort, isDev, isDomainConfigured, listSettings, prisma, stopBuild, uniqueName } from '../../../../lib/common';
+import { checkDomainsIsValidInDNS, checkDoubleBranch, checkExposedPort, createDirectories, decrypt, defaultComposeConfiguration, encrypt, errorHandler, executeDockerCmd, generateSshKeyPair, getContainerUsage, getDomain, isDev, isDomainConfigured, listSettings, prisma, stopBuild, uniqueName } from '../../../../lib/common';
 import { checkContainer, formatLabelsOnDocker, isContainerExited, removeContainer } from '../../../../lib/docker';
-import { scheduler } from '../../../../lib/scheduler';
 
 import type { FastifyRequest } from 'fastify';
 import type { GetImages, CancelDeployment, CheckDNS, CheckRepository, DeleteApplication, DeleteSecret, DeleteStorage, GetApplicationLogs, GetBuildIdLogs, GetBuildLogs, SaveApplication, SaveApplicationSettings, SaveApplicationSource, SaveDeployKey, SaveDestination, SaveSecret, SaveStorage, DeployApplication, CheckDomain, StopPreviewApplication } from './types';
 import { OnlyId } from '../../../../types';
 
+function filterObject(obj, callback) {
+    return Object.fromEntries(Object.entries(obj).
+        filter(([key, val]) => callback(val, key)));
+}
+
 export async function listApplications(request: FastifyRequest) {
     try {
         const { teamId } = request.user
@@ -149,7 +156,8 @@ export async function getApplicationFromDB(id: string, teamId: string) {
                 settings: true,
                 gitSource: { include: { githubApp: true, gitlabApp: true } },
                 secrets: true,
-                persistentStorage: true
+                persistentStorage: true,
+                connectedDatabase: true
             }
         });
         if (!application) {
@@ -176,32 +184,39 @@ export async function getApplicationFromDB(id: string, teamId: string) {
 }
 export async function getApplicationFromDBWebhook(projectId: number, branch: string) {
     try {
-        let application = await prisma.application.findFirst({
+        let applications = await prisma.application.findMany({
             where: { projectId, branch, settings: { autodeploy: true } },
             include: {
                 destinationDocker: true,
                 settings: true,
                 gitSource: { include: { githubApp: true, gitlabApp: true } },
                 secrets: true,
-                persistentStorage: true
+                persistentStorage: true,
+                connectedDatabase: true
             }
         });
-        if (!application) {
+        if (applications.length === 0) {
             throw { status: 500, message: 'Application not configured.' }
         }
-        application = decryptApplication(application);
+        applications = applications.map((application: any) => {
-        const { baseImage, baseBuildImage, baseBuildImages, baseImages } = setDefaultBaseImage(
+            application = decryptApplication(application);
-            application.buildPack
+            const { baseImage, baseBuildImage, baseBuildImages, baseImages } = setDefaultBaseImage(
-        );
+                application.buildPack
+            );
 
-        // Set default build images
+            // Set default build images
-        if (!application.baseImage) {
+            if (!application.baseImage) {
-            application.baseImage = baseImage;
+                application.baseImage = baseImage;
-        }
+            }
-        if (!application.baseBuildImage) {
+            if (!application.baseBuildImage) {
-            application.baseBuildImage = baseBuildImage;
+                application.baseBuildImage = baseBuildImage;
-        }
+            }
-        return { ...application, baseBuildImages, baseImages };
+            application.baseBuildImages = baseBuildImages;
+            application.baseImages = baseImages;
+            return application
+        })
+
+        return applications;
 
     } catch ({ status, message }) {
         return errorHandler({ status, message })
@@ -229,15 +244,16 @@ export async function saveApplication(request: FastifyRequest<SaveApplication>,
             denoOptions,
             baseImage,
             baseBuildImage,
-            deploymentType
+            deploymentType,
+            baseDatabaseBranch
         } = request.body
         if (port) port = Number(port);
         if (exposePort) {
             exposePort = Number(exposePort);
         }
 
-        const { destinationDocker: { id: dockerId, remoteIpAddress } } = await prisma.application.findUnique({ where: { id }, include: { destinationDocker: true } })
+        const { destinationDocker: { id: dockerId, remoteIpAddress }, exposePort: configuredPort } = await prisma.application.findUnique({ where: { id }, include: { destinationDocker: true } })
-        if (exposePort) await checkExposedPort({ id, exposePort, dockerId, remoteIpAddress })
+        if (exposePort) await checkExposedPort({ id, configuredPort, exposePort, dockerId, remoteIpAddress })
         if (denoOptions) denoOptions = denoOptions.trim();
         const defaultConfiguration = await setDefaultConfiguration({
             buildPack,
@@ -250,22 +266,43 @@ export async function saveApplication(request: FastifyRequest<SaveApplication>,
             dockerFileLocation,
             denoMainFile
         });
-        await prisma.application.update({
+        if (baseDatabaseBranch) {
-            where: { id },
+            await prisma.application.update({
-            data: {
+                where: { id },
-                name,
+                data: {
-                fqdn,
+                    name,
-                exposePort,
+                    fqdn,
-                pythonWSGI,
+                    exposePort,
-                pythonModule,
+                    pythonWSGI,
-                pythonVariable,
+                    pythonModule,
-                denoOptions,
+                    pythonVariable,
-                baseImage,
+                    denoOptions,
-                baseBuildImage,
+                    baseImage,
-                deploymentType,
+                    baseBuildImage,
-                ...defaultConfiguration
+                    deploymentType,
-            }
+                    ...defaultConfiguration,
-        });
+                    connectedDatabase: { update: { hostedDatabaseDBName: baseDatabaseBranch } }
+                }
+            });
+        } else {
+            await prisma.application.update({
+                where: { id },
+                data: {
+                    name,
+                    fqdn,
+                    exposePort,
+                    pythonWSGI,
+                    pythonModule,
+                    pythonVariable,
+                    denoOptions,
+                    baseImage,
+                    baseBuildImage,
+                    deploymentType,
+                    ...defaultConfiguration
+                }
+            });
+        }
+
         return reply.code(201).send();
     } catch ({ status, message }) {
         return errorHandler({ status, message })
@@ -276,15 +313,15 @@ export async function saveApplication(request: FastifyRequest<SaveApplication>,
 export async function saveApplicationSettings(request: FastifyRequest<SaveApplicationSettings>, reply: FastifyReply) {
     try {
         const { id } = request.params
-        const { debug, previews, dualCerts, autodeploy, branch, projectId, isBot } = request.body
+        const { debug, previews, dualCerts, autodeploy, branch, projectId, isBot, isDBBranching } = request.body
-        const isDouble = await checkDoubleBranch(branch, projectId);
+        // const isDouble = await checkDoubleBranch(branch, projectId);
-        if (isDouble && autodeploy) {
+        // if (isDouble && autodeploy) {
-            await prisma.applicationSettings.updateMany({ where: { application: { branch, projectId } }, data: { autodeploy: false } })
+        //     await prisma.applicationSettings.updateMany({ where: { application: { branch, projectId } }, data: { autodeploy: false } })
-            throw { status: 500, message: 'Cannot activate automatic deployments until only one application is defined for this repository / branch.' }
+        //     throw { status: 500, message: 'Cannot activate automatic deployments until only one application is defined for this repository / branch.' }
-        }
+        // }
         await prisma.application.update({
             where: { id },
-            data: { fqdn: isBot ? null : undefined, settings: { update: { debug, previews, dualCerts, autodeploy, isBot } } },
+            data: { fqdn: isBot ? null : undefined, settings: { update: { debug, previews, dualCerts, autodeploy, isBot, isDBBranching } } },
             include: { destinationDocker: true }
         });
         return reply.code(201).send();
@@ -312,6 +349,113 @@ export async function stopPreviewApplication(request: FastifyRequest<StopPreview
         return errorHandler({ status, message })
     }
 }
+
+export async function restartApplication(request: FastifyRequest<OnlyId>, reply: FastifyReply) {
+    try {
+        const { id } = request.params
+        const { teamId } = request.user
+        let application: any = await getApplicationFromDB(id, teamId);
+        if (application?.destinationDockerId) {
+            const buildId = cuid();
+            const { id: dockerId, network } = application.destinationDocker;
+            const { secrets, pullmergeRequestId, port, repository, persistentStorage, id: applicationId, buildPack, exposePort } = application;
+
+            const envs = [
+                `PORT=${port}`
+            ];
+            if (secrets.length > 0) {
+                secrets.forEach((secret) => {
+                    if (pullmergeRequestId) {
+                        if (secret.isPRMRSecret) {
+                            envs.push(`${secret.name}=${secret.value}`);
+                        }
+                    } else {
+                        if (!secret.isPRMRSecret) {
+                            envs.push(`${secret.name}=${secret.value}`);
+                        }
+                    }
+                });
+            }
+            const { workdir } = await createDirectories({ repository, buildId });
+            const labels = []
+            let image = null
+            const { stdout: container } = await executeDockerCmd({ dockerId, command: `docker container ls --filter 'label=com.docker.compose.service=${id}' --format '{{json .}}'` })
+            const containersArray = container.trim().split('\n');
+            for (const container of containersArray) {
+                const containerObj = formatLabelsOnDocker(container);
+                image = containerObj[0].Image
+                Object.keys(containerObj[0].Labels).forEach(function (key) {
+                    if (key.startsWith('coolify')) {
+                        labels.push(`${key}=${containerObj[0].Labels[key]}`)
+                    }
+                })
+            }
+            let imageFound = false;
+            try {
+                await executeDockerCmd({
+                    dockerId,
+                    command: `docker image inspect ${image}`
+                })
+                imageFound = true;
+            } catch (error) {
+                //
+            }
+            if (!imageFound) {
+                throw { status: 500, message: 'Image not found, cannot restart application.' }
+            }
+            await fs.writeFile(`${workdir}/.env`, envs.join('\n'));
+
+            let envFound = false;
+            try {
+                envFound = !!(await fs.stat(`${workdir}/.env`));
+            } catch (error) {
+                //
+            }
+            const volumes =
+                persistentStorage?.map((storage) => {
+                    return `${applicationId}${storage.path.replace(/\//gi, '-')}:${buildPack !== 'docker' ? '/app' : ''
+                        }${storage.path}`;
+                }) || [];
+            const composeVolumes = volumes.map((volume) => {
+                return {
+                    [`${volume.split(':')[0]}`]: {
+                        name: volume.split(':')[0]
+                    }
+                };
+            });
+            const composeFile = {
+                version: '3.8',
+                services: {
+                    [applicationId]: {
+                        image,
+                        container_name: applicationId,
+                        volumes,
+                        env_file: envFound ? [`${workdir}/.env`] : [],
+                        labels,
+                        depends_on: [],
+                        expose: [port],
+                        ...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
+                        ...defaultComposeConfiguration(network),
+                    }
+                },
+                networks: {
+                    [network]: {
+                        external: true
+                    }
+                },
+                volumes: Object.assign({}, ...composeVolumes)
+            };
+            await fs.writeFile(`${workdir}/docker-compose.yml`, yaml.dump(composeFile));
+            await executeDockerCmd({ dockerId, command: `docker stop -t 0 ${id}` })
+            await executeDockerCmd({ dockerId, command: `docker rm ${id}` })
+            await executeDockerCmd({ dockerId, command: `docker compose --project-directory ${workdir} up -d` })
+            return reply.code(201).send();
+        }
+        throw { status: 500, message: 'Application cannot be restarted.' }
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
 export async function stopApplication(request: FastifyRequest<OnlyId>, reply: FastifyReply) {
     try {
         const { id } = request.params
@@ -332,12 +476,14 @@ export async function stopApplication(request: FastifyRequest<OnlyId>, reply: Fa
 export async function deleteApplication(request: FastifyRequest<DeleteApplication>, reply: FastifyReply) {
     try {
         const { id } = request.params
+        const { force } = request.body
+
         const { teamId } = request.user
         const application = await prisma.application.findUnique({
             where: { id },
             include: { destinationDocker: true }
         });
-        if (application?.destinationDockerId && application.destinationDocker?.network) {
+        if (!force && application?.destinationDockerId && application.destinationDocker?.network) {
             const { stdout: containers } = await executeDockerCmd({
                 dockerId: application.destinationDocker.id,
                 command: `docker ps -a --filter network=${application.destinationDocker.network} --filter name=${id} --format '{{json .}}'`
@@ -356,6 +502,7 @@ export async function deleteApplication(request: FastifyRequest<DeleteApplicatio
         await prisma.build.deleteMany({ where: { applicationId: id } });
         await prisma.secret.deleteMany({ where: { applicationId: id } });
         await prisma.applicationPersistentStorage.deleteMany({ where: { applicationId: id } });
+        await prisma.applicationConnectedDatabase.deleteMany({ where: { applicationId: id } });
         if (teamId === '0') {
             await prisma.application.deleteMany({ where: { id } });
         } else {
@@ -378,11 +525,15 @@ export async function checkDomain(request: FastifyRequest<CheckDomain>) {
 }
 export async function checkDNS(request: FastifyRequest<CheckDNS>) {
     try {
+
         const { id } = request.params
 
         let { exposePort, fqdn, forceSave, dualCerts } = request.body
-
+        if (!fqdn) {
-        if (fqdn) fqdn = fqdn.toLowerCase();
+            return {}
+        } else {
+            fqdn = fqdn.toLowerCase();
+        }
         if (exposePort) exposePort = Number(exposePort);
 
         const { destinationDocker: { id: dockerId, remoteIpAddress, remoteEngine }, exposePort: configuredPort } = await prisma.application.findUnique({ where: { id }, include: { destinationDocker: true } })
@@ -558,12 +709,12 @@ export async function saveRepository(request, reply) {
                 data: { repository, branch, projectId, settings: { update: { autodeploy, isPublicRepository } } }
             });
         }
-        if (!isPublicRepository) {
+        // if (!isPublicRepository) {
-            const isDouble = await checkDoubleBranch(branch, projectId);
+        //     const isDouble = await checkDoubleBranch(branch, projectId);
-            if (isDouble) {
+        //     if (isDouble) {
-                await prisma.applicationSettings.updateMany({ where: { application: { branch, projectId } }, data: { autodeploy: false, isPublicRepository } })
+        //         await prisma.applicationSettings.updateMany({ where: { application: { branch, projectId } }, data: { autodeploy: false, isPublicRepository } })
-            }
+        //     }
-        }
+        // }
         return reply.code(201).send()
     } catch ({ status, message }) {
         return errorHandler({ status, message })
@@ -612,6 +763,16 @@ export async function saveBuildPack(request, reply) {
         return errorHandler({ status, message })
     }
 }
+export async function saveConnectedDatabase(request, reply) {
+    try {
+        const { id } = request.params
+        const { databaseId, type } = request.body
+        await prisma.application.update({ where: { id }, data: { connectedDatabase: { upsert: { create: { database: { connect: { id: databaseId } }, hostedDatabaseType: type }, update: { database: { connect: { id: databaseId } }, hostedDatabaseType: type } } } } })
+        return reply.code(201).send()
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
 
 export async function getSecrets(request: FastifyRequest<OnlyId>) {
     try {
@@ -768,7 +929,6 @@ export async function getPreviews(request: FastifyRequest<OnlyId>) {
             })
         }
     } catch ({ status, message }) {
-        console.log({ status, message })
         return errorHandler({ status, message })
     }
 }
@@ -861,8 +1021,13 @@ export async function getBuildIdLogs(request: FastifyRequest<GetBuildIdLogs>) {
             orderBy: { time: 'asc' }
         });
         const data = await prisma.build.findFirst({ where: { id: buildId } });
+        const createdAt = day(data.createdAt).utc();
         return {
-            logs,
+            logs: logs.map(log => {
+                log.time = Number(log.time)
+                return log
+            }),
+            took: day().diff(createdAt) / 1000,
             status: data?.status || 'queued'
         }
     } catch ({ status, message }) {
@@ -938,3 +1103,58 @@ export async function cancelDeployment(request: FastifyRequest<CancelDeployment>
         return errorHandler({ status, message })
     }
 }
+
+
+export async function createdBranchDatabase(database: any, baseDatabaseBranch: string, pullmergeRequestId: string) {
+    try {
+        if (!baseDatabaseBranch) return
+        const { id, type, destinationDockerId, rootUser, rootUserPassword, dbUser } = database;
+        if (destinationDockerId) {
+            if (type === 'postgresql') {
+                const decryptedRootUserPassword = decrypt(rootUserPassword);
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} pg_dump -d "postgresql://postgres:${decryptedRootUserPassword}@${id}:5432/${baseDatabaseBranch}" --encoding=UTF8 --schema-only -f /tmp/${baseDatabaseBranch}.dump`
+                })
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} psql postgresql://postgres:${decryptedRootUserPassword}@${id}:5432 -c "CREATE DATABASE branch_${pullmergeRequestId}"`
+                })
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} psql -d "postgresql://postgres:${decryptedRootUserPassword}@${id}:5432/branch_${pullmergeRequestId}" -f /tmp/${baseDatabaseBranch}.dump`
+                })
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} psql postgresql://postgres:${decryptedRootUserPassword}@${id}:5432 -c "ALTER DATABASE branch_${pullmergeRequestId} OWNER TO ${dbUser}"`
+                })
+            }
+        }
+
+
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
+export async function removeBranchDatabase(database: any, pullmergeRequestId: string) {
+    try {
+        const { id, type, destinationDockerId, rootUser, rootUserPassword } = database;
+        if (destinationDockerId) {
+            if (type === 'postgresql') {
+                const decryptedRootUserPassword = decrypt(rootUserPassword);
+                // Terminate all connections to the database
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} psql postgresql://postgres:${decryptedRootUserPassword}@${id}:5432 -c "SELECT pg_terminate_backend(pg_stat_activity.pid) FROM pg_stat_activity WHERE pg_stat_activity.datname = 'branch_${pullmergeRequestId}' AND pid <> pg_backend_pid();"`
+                })
+
+                await executeDockerCmd({
+                    dockerId: destinationDockerId,
+                    command: `docker exec ${id} psql postgresql://postgres:${decryptedRootUserPassword}@${id}:5432 -c "DROP DATABASE branch_${pullmergeRequestId}"`
+                })
+            }
+        }
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}

apps/api/src/routes/api/v1/applications/index.ts

@@ -1,6 +1,6 @@
 import { FastifyPluginAsync } from 'fastify';
 import { OnlyId } from '../../../../types';
-import { cancelDeployment, checkDNS, checkDomain, checkRepository, deleteApplication, deleteSecret, deleteStorage, deployApplication, getApplication, getApplicationLogs, getApplicationStatus, getBuildIdLogs, getBuildLogs, getBuildPack, getGitHubToken, getGitLabSSHKey, getImages, getPreviews, getSecrets, getStorages, getUsage, listApplications, newApplication, saveApplication, saveApplicationSettings, saveApplicationSource, saveBuildPack, saveDeployKey, saveDestination, saveGitLabSSHKey, saveRepository, saveSecret, saveStorage, stopApplication, stopPreviewApplication } from './handlers';
+import { cancelDeployment, checkDNS, checkDomain, checkRepository, deleteApplication, deleteSecret, deleteStorage, deployApplication, getApplication, getApplicationLogs, getApplicationStatus, getBuildIdLogs, getBuildLogs, getBuildPack, getGitHubToken, getGitLabSSHKey, getImages, getPreviews, getSecrets, getStorages, getUsage, listApplications, newApplication, restartApplication, saveApplication, saveApplicationSettings, saveApplicationSource, saveBuildPack, saveConnectedDatabase, saveDeployKey, saveDestination, saveGitLabSSHKey, saveRepository, saveSecret, saveStorage, stopApplication, stopPreviewApplication } from './handlers';
 
 import type { CancelDeployment, CheckDNS, CheckDomain, CheckRepository, DeleteApplication, DeleteSecret, DeleteStorage, DeployApplication, GetApplicationLogs, GetBuildIdLogs, GetBuildLogs, GetImages, SaveApplication, SaveApplicationSettings, SaveApplicationSource, SaveDeployKey, SaveDestination, SaveSecret, SaveStorage, StopPreviewApplication } from './types';
 
@@ -19,6 +19,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 
     fastify.get<OnlyId>('/:id/status', async (request) => await getApplicationStatus(request));
 
+    fastify.post<OnlyId>('/:id/restart', async (request, reply) => await restartApplication(request, reply));
     fastify.post<OnlyId>('/:id/stop', async (request, reply) => await stopApplication(request, reply));
     fastify.post<StopPreviewApplication>('/:id/stop/preview', async (request, reply) => await stopPreviewApplication(request, reply));
 
@@ -54,6 +55,8 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
     fastify.get('/:id/configuration/buildpack', async (request) => await getBuildPack(request));
     fastify.post('/:id/configuration/buildpack', async (request, reply) => await saveBuildPack(request, reply));
 
+    fastify.post('/:id/configuration/database', async (request, reply) => await saveConnectedDatabase(request, reply));
+
     fastify.get<OnlyId>('/:id/configuration/sshkey', async (request) => await getGitLabSSHKey(request));
     fastify.post<OnlyId>('/:id/configuration/sshkey', async (request, reply) => await saveGitLabSSHKey(request, reply));
 

apps/api/src/routes/api/v1/applications/types.ts

@@ -20,15 +20,17 @@ export interface SaveApplication extends OnlyId {
         denoOptions: string,
         baseImage: string,
         baseBuildImage: string,
-        deploymentType: string
+        deploymentType: string,
+        baseDatabaseBranch: string
     }
 }
 export interface SaveApplicationSettings extends OnlyId {
     Querystring: { domain: string; };
-    Body: { debug: boolean; previews: boolean; dualCerts: boolean; autodeploy: boolean; branch: string; projectId: number; isBot: boolean; };
+    Body: { debug: boolean; previews: boolean; dualCerts: boolean; autodeploy: boolean; branch: string; projectId: number; isBot: boolean; isDBBranching: boolean };
 }
 export interface DeleteApplication extends OnlyId {
     Querystring: { domain: string; };
+    Body: { force: boolean }
 }
 export interface CheckDomain extends OnlyId {
     Querystring: { domain: string; };

apps/api/src/routes/api/v1/databases/handlers.ts

@@ -7,7 +7,7 @@ import { ComposeFile, createDirectories, decrypt, encrypt, errorHandler, execute
 import { day } from '../../../../lib/dayjs';
 
 import { GetDatabaseLogs, OnlyId, SaveDatabase, SaveDatabaseDestination, SaveDatabaseSettings, SaveVersion } from '../../../../types';
-import { SaveDatabaseType } from './types';
+import { DeleteDatabase, SaveDatabaseType } from './types';
 
 export async function listDatabases(request: FastifyRequest) {
     try {
@@ -167,6 +167,7 @@ export async function saveDatabaseDestination(request: FastifyRequest<SaveDataba
         const { id } = request.params;
         const { destinationId } = request.body;
 
+        const { arch } = await listSettings();
         await prisma.database.update({
             where: { id },
             data: { destinationDocker: { connect: { id: destinationId } } }
@@ -181,7 +182,7 @@ export async function saveDatabaseDestination(request: FastifyRequest<SaveDataba
 
         if (destinationDockerId) {
             if (type && version) {
-                const baseImage = getDatabaseImage(type);
+                const baseImage = getDatabaseImage(type, arch);
                 executeDockerCmd({ dockerId, command: `docker pull ${baseImage}:${version}` })
             }
         }
@@ -279,15 +280,12 @@ export async function startDatabase(request: FastifyRequest<OnlyId>) {
         await fs.writeFile(composeFileDestination, yaml.dump(composeFile));
         try {
             await executeDockerCmd({ dockerId: destinationDocker.id, command: `docker volume create ${volumeName}` })
-        } catch (error) {
+        } catch (error) { }
-            console.log(error);
-        }
         try {
             await executeDockerCmd({ dockerId: destinationDocker.id, command: `docker compose -f ${composeFileDestination} up -d` })
             if (isPublic) await startTraefikTCPProxy(destinationDocker, id, publicPort, privatePort);
             return {};
         } catch (error) {
-            console.log(error)
             throw {
                 error
             };
@@ -360,19 +358,22 @@ export async function getDatabaseLogs(request: FastifyRequest<GetDatabaseLogs>)
         return errorHandler({ status, message })
     }
 }
-export async function deleteDatabase(request: FastifyRequest<OnlyId>) {
+export async function deleteDatabase(request: FastifyRequest<DeleteDatabase>) {
     try {
         const teamId = request.user.teamId;
         const { id } = request.params;
+        const { force } = request.body;
         const database = await prisma.database.findFirst({
             where: { id, teams: { some: { id: teamId === '0' ? undefined : teamId } } },
             include: { destinationDocker: true, settings: true }
         });
-        if (database.dbUserPassword) database.dbUserPassword = decrypt(database.dbUserPassword);
+        if (!force) {
-        if (database.rootUserPassword) database.rootUserPassword = decrypt(database.rootUserPassword);
+            if (database.dbUserPassword) database.dbUserPassword = decrypt(database.dbUserPassword);
-        if (database.destinationDockerId) {
+            if (database.rootUserPassword) database.rootUserPassword = decrypt(database.rootUserPassword);
-            const everStarted = await stopDatabaseContainer(database);
+            if (database.destinationDockerId) {
-            if (everStarted) await stopTcpHttpProxy(id, database.destinationDocker, database.publicPort);
+                const everStarted = await stopDatabaseContainer(database);
+                if (everStarted) await stopTcpHttpProxy(id, database.destinationDocker, database.publicPort);
+            }
         }
         await prisma.databaseSettings.deleteMany({ where: { databaseId: id } });
         await prisma.database.delete({ where: { id } });

apps/api/src/routes/api/v1/databases/index.ts

@@ -1,7 +1,7 @@
 import { FastifyPluginAsync } from 'fastify';
 import { deleteDatabase, getDatabase, getDatabaseLogs, getDatabaseStatus, getDatabaseTypes, getDatabaseUsage, getVersions, listDatabases, newDatabase, saveDatabase, saveDatabaseDestination, saveDatabaseSettings, saveDatabaseType, saveVersion, startDatabase, stopDatabase } from './handlers';
 
-import type { GetDatabaseLogs, OnlyId, SaveDatabase, SaveDatabaseDestination, SaveDatabaseSettings, SaveVersion } from '../../../../types';
+import type { DeleteDatabase, GetDatabaseLogs, OnlyId, SaveDatabase, SaveDatabaseDestination, SaveDatabaseSettings, SaveVersion } from '../../../../types';
 import type { SaveDatabaseType } from './types';
 
 const root: FastifyPluginAsync = async (fastify): Promise<void> => {
@@ -13,7 +13,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 
     fastify.get<OnlyId>('/:id', async (request) => await getDatabase(request));
     fastify.post<SaveDatabase>('/:id', async (request, reply) => await saveDatabase(request, reply));
-    fastify.delete<OnlyId>('/:id', async (request) => await deleteDatabase(request));
+    fastify.delete<DeleteDatabase>('/:id', async (request) => await deleteDatabase(request));
 
     fastify.get<OnlyId>('/:id/status', async (request) => await getDatabaseStatus(request));
 

apps/api/src/routes/api/v1/databases/types.ts

@@ -3,3 +3,6 @@ import type { OnlyId } from "../../../../types";
 export interface SaveDatabaseType extends OnlyId {
     Body: { type: string }
 }
+export interface DeleteDatabase extends OnlyId {
+    Body: { force: string }
+}

apps/api/src/routes/api/v1/destinations/handlers.ts

@@ -30,7 +30,6 @@ export async function listDestinations(request: FastifyRequest<ListDestinations>
             destinations
         }
     } catch ({ status, message }) {
-        console.log({ status, message })
         return errorHandler({ status, message })
     }
 }
@@ -114,7 +113,6 @@ export async function newDestination(request: FastifyRequest<NewDestination>, re
         }
 
     } catch ({ status, message }) {
-        console.log({ status, message })
         return errorHandler({ status, message })
     }
 }
@@ -162,7 +160,6 @@ export async function startProxy(request: FastifyRequest<Proxy>) {
         await startTraefikProxy(id);
         return {}
     } catch ({ status, message }) {
-        console.log({ status, message })
         await stopTraefikProxy(id);
         return errorHandler({ status, message })
     }
@@ -205,23 +202,21 @@ export async function assignSSHKey(request: FastifyRequest) {
         return errorHandler({ status, message })
     }
 }
-export async function verifyRemoteDockerEngine(request: FastifyRequest, reply: FastifyReply) {
+export async function verifyRemoteDockerEngine(request: FastifyRequest<OnlyId>, reply: FastifyReply) {
     try {
         const { id } = request.params;
         await createRemoteEngineConfiguration(id);
-
+        const { remoteIpAddress, remoteUser, network, isCoolifyProxyUsed } = await prisma.destinationDocker.findFirst({ where: { id } })
-        const { remoteIpAddress, remoteUser, network } = await prisma.destinationDocker.findFirst({ where: { id } })
         const host = `ssh://${remoteUser}@${remoteIpAddress}`
         const { stdout } = await asyncExecShell(`DOCKER_HOST=${host} docker network ls --filter 'name=${network}' --no-trunc --format "{{json .}}"`);
-
         if (!stdout) {
             await asyncExecShell(`DOCKER_HOST=${host} docker network create --attachable ${network}`);
         }
-        const { stdout:coolifyNetwork } = await asyncExecShell(`DOCKER_HOST=${host} docker network ls --filter 'name=coolify-infra' --no-trunc --format "{{json .}}"`);
+        const { stdout: coolifyNetwork } = await asyncExecShell(`DOCKER_HOST=${host} docker network ls --filter 'name=coolify-infra' --no-trunc --format "{{json .}}"`);
-
         if (!coolifyNetwork) {
             await asyncExecShell(`DOCKER_HOST=${host} docker network create --attachable coolify-infra`);
         }
+        if (isCoolifyProxyUsed) await startTraefikProxy(id);
         await prisma.destinationDocker.update({ where: { id }, data: { remoteVerified: true } })
         return reply.code(201).send()
 
@@ -234,7 +229,7 @@ export async function getDestinationStatus(request: FastifyRequest<OnlyId>) {
     try {
         const { id } = request.params
         const destination = await prisma.destinationDocker.findUnique({ where: { id } })
-        const isRunning = await checkContainer({ dockerId: destination.id, container: 'coolify-proxy' })
+        const isRunning = await checkContainer({ dockerId: destination.id, container: 'coolify-proxy', remove: true })
         return {
             isRunning
         }

apps/api/src/routes/api/v1/destinations/index.ts

@@ -23,7 +23,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 
     fastify.post('/:id/configuration/sshKey', async (request) => await assignSSHKey(request));
 
-    fastify.post('/:id/verify', async (request, reply) => await verifyRemoteDockerEngine(request, reply));
+    fastify.post<OnlyId>('/:id/verify', async (request, reply) => await verifyRemoteDockerEngine(request, reply));
 };
 
 export default root;

apps/api/src/routes/api/v1/handlers.ts

@@ -65,7 +65,6 @@ export async function update(request: FastifyRequest<Update>) {
 			);
 			return {};
 		} else {
-			console.log(latestVersion);
 			await asyncSleep(2000);
 			return {};
 		}
@@ -78,10 +77,9 @@ export async function restartCoolify(request: FastifyRequest<any>) {
 		const teamId = request.user.teamId;
 		if (teamId === '0') {
 			if (!isDev) {
-				await asyncExecShell(`docker restart coolify`);
+				asyncExecShell(`docker restart coolify`);
 				return {};
 			} else {
-				console.log('Restarting Coolify')
 				return {};
 			}
 		}

apps/api/src/routes/api/v1/services/handlers.ts

@@ -1,15 +1,13 @@
 import type { FastifyReply, FastifyRequest } from 'fastify';
 import fs from 'fs/promises';
 import yaml from 'js-yaml';
-import bcrypt from 'bcryptjs';
+import { prisma, uniqueName, asyncExecShell, getServiceFromDB, getContainerUsage, isDomainConfigured, saveUpdateableFields, fixType, decrypt, encrypt, ComposeFile, getFreePublicPort, getDomain, errorHandler, generatePassword, isDev, stopTcpHttpProxy, executeDockerCmd, checkDomainsIsValidInDNS, checkExposedPort } from '../../../../lib/common';
-import { prisma, uniqueName, asyncExecShell, getServiceImage, getServiceFromDB, getContainerUsage,isDomainConfigured, saveUpdateableFields, fixType, decrypt, encrypt, getServiceMainPort, createDirectories, ComposeFile, makeLabelForServices, getFreePublicPort, getDomain, errorHandler, generatePassword, isDev, stopTcpHttpProxy, executeDockerCmd, checkDomainsIsValidInDNS, persistentVolumes, asyncSleep, isARM, defaultComposeConfiguration, checkExposedPort } from '../../../../lib/common';
 import { day } from '../../../../lib/dayjs';
-import { checkContainer, isContainerExited, removeContainer } from '../../../../lib/docker';
+import { checkContainer, isContainerExited } from '../../../../lib/docker';
 import cuid from 'cuid';
 
 import type { OnlyId } from '../../../../types';
-import type { ActivateWordpressFtp, CheckService, CheckServiceDomain, DeleteServiceSecret, DeleteServiceStorage, GetServiceLogs, SaveService, SaveServiceDestination, SaveServiceSecret, SaveServiceSettings, SaveServiceStorage, SaveServiceType, SaveServiceVersion, ServiceStartStop, SetWordpressSettings } from './types';
+import type { ActivateWordpressFtp, CheckService, CheckServiceDomain, DeleteServiceSecret, DeleteServiceStorage, GetServiceLogs, SaveService, SaveServiceDestination, SaveServiceSecret, SaveServiceSettings, SaveServiceStorage, SaveServiceType, SaveServiceVersion, ServiceStartStop, SetGlitchTipSettings, SetWordpressSettings } from './types';
-import { defaultServiceConfigurations } from '../../../../lib/services';
 import { supportedServiceTypesAndVersions } from '../../../../lib/services/supportedVersions';
 import { configureServiceType, removeService } from '../../../../lib/services/common';
 
@@ -269,7 +267,6 @@ export async function saveService(request: FastifyRequest<SaveService>, reply: F
         if (exposePort) exposePort = Number(exposePort);
 
         type = fixType(type)
-
         const update = saveUpdateableFields(type, request.body[type])
         const data = {
             fqdn,
@@ -400,17 +397,33 @@ export async function deleteServiceStorage(request: FastifyRequest<DeleteService
     }
 }
 
-export async function setSettingsService(request: FastifyRequest<ServiceStartStop & SetWordpressSettings>, reply: FastifyReply) {
+export async function setSettingsService(request: FastifyRequest<ServiceStartStop & SetWordpressSettings & SetGlitchTipSettings>, reply: FastifyReply) {
     try {
         const { type } = request.params
         if (type === 'wordpress') {
             return await setWordpressSettings(request, reply)
         }
+        if (type === 'glitchtip') {
+            return await setGlitchTipSettings(request, reply)
+        }
         throw `Service type ${type} not supported.`
     } catch ({ status, message }) {
         return errorHandler({ status, message })
     }
 }
+async function setGlitchTipSettings(request: FastifyRequest<SetGlitchTipSettings>, reply: FastifyReply) {
+    try {
+        const { id } = request.params
+        const { enableOpenUserRegistration, emailSmtpUseSsl, emailSmtpUseTls } = request.body
+        await prisma.glitchTip.update({
+            where: { serviceId: id },
+            data: { enableOpenUserRegistration, emailSmtpUseSsl, emailSmtpUseTls }
+        });
+        return reply.code(201).send()
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}
 async function setWordpressSettings(request: FastifyRequest<ServiceStartStop & SetWordpressSettings>, reply: FastifyReply) {
     try {
         const { id } = request.params
@@ -547,10 +560,7 @@ export async function activateWordpressFtp(request: FastifyRequest<ActivateWordp
                             command: `docker stop -t 0 ${id}-ftp && docker rm ${id}-ftp`
                         })
                     }
-                } catch (error) {
+                } catch (error) { }
-                    console.log(error);
-                    //
-                }
                 const volumes = [
                     `${id}-wordpress-data:/home/${ftpUser}/wordpress`,
                     `${isDev ? hostkeyDir : '/var/lib/docker/volumes/coolify-ssl-certs/_data/hostkeys'
@@ -629,9 +639,7 @@ export async function activateWordpressFtp(request: FastifyRequest<ActivateWordp
             await asyncExecShell(
                 `rm -fr ${hostkeyDir}/${id}-docker-compose.yml ${hostkeyDir}/${id}.ed25519 ${hostkeyDir}/${id}.ed25519.pub ${hostkeyDir}/${id}.rsa ${hostkeyDir}/${id}.rsa.pub ${hostkeyDir}/${id}.sh`
             );
-        } catch (error) {
+        } catch (error) { }
-            console.log(error)
-        }
 
     }
 

apps/api/src/routes/api/v1/services/index.ts

@@ -29,7 +29,7 @@ import {
 } from './handlers';
 
 import type { OnlyId } from '../../../../types';
-import type { ActivateWordpressFtp, CheckService, CheckServiceDomain, DeleteServiceSecret, DeleteServiceStorage, GetServiceLogs, SaveService, SaveServiceDestination, SaveServiceSecret, SaveServiceSettings, SaveServiceStorage, SaveServiceType, SaveServiceVersion, ServiceStartStop, SetWordpressSettings } from './types';
+import type { ActivateWordpressFtp, CheckService, CheckServiceDomain, DeleteServiceSecret, DeleteServiceStorage, GetServiceLogs, SaveService, SaveServiceDestination, SaveServiceSecret, SaveServiceSettings, SaveServiceStorage, SaveServiceType, SaveServiceVersion, ServiceStartStop, SetGlitchTipSettings, SetWordpressSettings } from './types';
 import { startService, stopService } from '../../../../lib/services/handlers';
 
 const root: FastifyPluginAsync = async (fastify): Promise<void> => {
@@ -71,7 +71,7 @@ const root: FastifyPluginAsync = async (fastify): Promise<void> => {
 
     fastify.post<ServiceStartStop>('/:id/:type/start', async (request) => await startService(request));
     fastify.post<ServiceStartStop>('/:id/:type/stop', async (request) => await stopService(request));
-    fastify.post<ServiceStartStop & SetWordpressSettings>('/:id/:type/settings', async (request, reply) => await setSettingsService(request, reply));
+    fastify.post<ServiceStartStop & SetWordpressSettings & SetGlitchTipSettings>('/:id/:type/settings', async (request, reply) => await setSettingsService(request, reply));
 
     fastify.post<OnlyId>('/:id/plausibleanalytics/activate', async (request, reply) => await activatePlausibleUsers(request, reply));
     fastify.post<OnlyId>('/:id/plausibleanalytics/cleanup', async (request, reply) => await cleanupPlausibleLogs(request, reply));

apps/api/src/routes/api/v1/services/types.ts

@@ -89,6 +89,10 @@ export interface ActivateWordpressFtp extends OnlyId {
     }
 }
 
-
+export interface SetGlitchTipSettings extends OnlyId {
-
+    Body: {
-
+        enableOpenUserRegistration: boolean,
+        emailSmtpUseSsl: boolean,
+        emailSmtpUseTls: boolean
+    }
+}

apps/api/src/routes/webhooks/github/handlers.ts

@@ -3,8 +3,7 @@ import cuid from "cuid";
 import crypto from "crypto";
 import { encrypt, errorHandler, getUIUrl, isDev, prisma } from "../../../lib/common";
 import { checkContainer, removeContainer } from "../../../lib/docker";
-import { scheduler } from "../../../lib/scheduler";
+import { createdBranchDatabase, getApplicationFromDBWebhook, removeBranchDatabase } from "../../api/v1/applications/handlers";
-import { getApplicationFromDBWebhook } from "../../api/v1/applications/handlers";
 
 import type { FastifyReply, FastifyRequest } from "fastify";
 import type { GitHubEvents, InstallGithub } from "./types";
@@ -67,7 +66,6 @@ export async function configureGitHubApp(request, reply) {
 }
 export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promise<any> {
     try {
-        const buildId = cuid();
         const allowedGithubEvents = ['push', 'pull_request'];
         const allowedActions = ['opened', 'reopened', 'synchronize', 'closed'];
         const githubEvent = request.headers['x-github-event']?.toString().toLowerCase();
@@ -87,126 +85,139 @@ export async function gitHubEvents(request: FastifyRequest<GitHubEvents>): Promi
         if (!projectId || !branch) {
             throw { status: 500, message: 'Cannot parse projectId or branch from the webhook?!' }
         }
-        const applicationFound = await getApplicationFromDBWebhook(projectId, branch);
+        const applicationsFound = await getApplicationFromDBWebhook(projectId, branch);
-        if (applicationFound) {
+        if (applicationsFound && applicationsFound.length > 0) {
-            const webhookSecret = applicationFound.gitSource.githubApp.webhookSecret || null;
+            for (const application of applicationsFound) {
-            //@ts-ignore
+                const buildId = cuid();
-            const hmac = crypto.createHmac('sha256', webhookSecret);
+                const webhookSecret = application.gitSource.githubApp.webhookSecret || null;
-            const digest = Buffer.from(
-                'sha256=' + hmac.update(JSON.stringify(body)).digest('hex'),
-                'utf8'
-            );
-            if (!isDev) {
-                const checksum = Buffer.from(githubSignature, 'utf8');
                 //@ts-ignore
-                if (checksum.length !== digest.length || !crypto.timingSafeEqual(digest, checksum)) {
+                const hmac = crypto.createHmac('sha256', webhookSecret);
-                    throw { status: 500, message: 'SHA256 checksum failed. Are you doing something fishy?' }
+                const digest = Buffer.from(
-                };
+                    'sha256=' + hmac.update(JSON.stringify(body)).digest('hex'),
-            }
+                    'utf8'
-
+                );
-
+                if (!isDev) {
-            if (githubEvent === 'push') {
+                    const checksum = Buffer.from(githubSignature, 'utf8');
-                if (!applicationFound.configHash) {
+                    //@ts-ignore
-                    const configHash = crypto
+                    if (checksum.length !== digest.length || !crypto.timingSafeEqual(digest, checksum)) {
-                        //@ts-ignore
+                        throw { status: 500, message: 'SHA256 checksum failed. Are you doing something fishy?' }
-                        .createHash('sha256')
+                    };
-                        .update(
-                            JSON.stringify({
-                                buildPack: applicationFound.buildPack,
-                                port: applicationFound.port,
-                                exposePort: applicationFound.exposePort,
-                                installCommand: applicationFound.installCommand,
-                                buildCommand: applicationFound.buildCommand,
-                                startCommand: applicationFound.startCommand
-                            })
-                        )
-                        .digest('hex');
-                    await prisma.application.updateMany({
-                        where: { branch, projectId },
-                        data: { configHash }
-                    });
-                }
-                await prisma.application.update({
-                    where: { id: applicationFound.id },
-                    data: { updatedAt: new Date() }
-                });
-                await prisma.build.create({
-                    data: {
-                        id: buildId,
-                        applicationId: applicationFound.id,
-                        destinationDockerId: applicationFound.destinationDocker.id,
-                        gitSourceId: applicationFound.gitSource.id,
-                        githubAppId: applicationFound.gitSource.githubApp?.id,
-                        gitlabAppId: applicationFound.gitSource.gitlabApp?.id,
-                        status: 'queued',
-                        type: 'webhook_commit'
-                    }
-                });
-                return {
-                    message: 'Queued. Thank you!'
-                };
-            } else if (githubEvent === 'pull_request') {
-                const pullmergeRequestId = body.number.toString();
-                const pullmergeRequestAction = body.action;
-                const sourceBranch = body.pull_request.head.ref.includes('/') ? body.pull_request.head.ref.split('/')[2] : body.pull_request.head.ref;
-                if (!allowedActions.includes(pullmergeRequestAction)) {
-                    throw { status: 500, message: 'Action not allowed.' }
                 }
 
-                if (applicationFound.settings.previews) {
+                if (githubEvent === 'push') {
-                    if (applicationFound.destinationDockerId) {
+                    if (!application.configHash) {
-                        const isRunning = await checkContainer(
+                        const configHash = crypto
-                            {
+                            //@ts-ignore
-                                dockerId: applicationFound.destinationDocker.id,
+                            .createHash('sha256')
-                                container: applicationFound.id
+                            .update(
-                            }
+                                JSON.stringify({
-                        );
+                                    buildPack: application.buildPack,
-                        if (!isRunning) {
+                                    port: application.port,
-                            throw { status: 500, message: 'Application not running.' }
+                                    exposePort: application.exposePort,
-                        }
+                                    installCommand: application.installCommand,
-                    }
+                                    buildCommand: application.buildCommand,
-                    if (
+                                    startCommand: application.startCommand
-                        pullmergeRequestAction === 'opened' ||
+                                })
-                        pullmergeRequestAction === 'reopened' ||
+                            )
-                        pullmergeRequestAction === 'synchronize'
+                            .digest('hex');
-                    ) {
                         await prisma.application.update({
-                            where: { id: applicationFound.id },
+                            where: { id: application.id },
-                            data: { updatedAt: new Date() }
+                            data: { configHash }
                         });
-                        await prisma.build.create({
-                            data: {
-                                id: buildId,
-                                pullmergeRequestId,
-                                sourceBranch,
-                                applicationId: applicationFound.id,
-                                destinationDockerId: applicationFound.destinationDocker.id,
-                                gitSourceId: applicationFound.gitSource.id,
-                                githubAppId: applicationFound.gitSource.githubApp?.id,
-                                gitlabAppId: applicationFound.gitSource.gitlabApp?.id,
-                                status: 'queued',
-                                type: 'webhook_pr'
-                            }
-                        });
-                    
-                        return {
-                            message: 'Queued. Thank you!'
-                        };
-                    } else if (pullmergeRequestAction === 'closed') {
-                        if (applicationFound.destinationDockerId) {
-                            const id = `${applicationFound.id}-${pullmergeRequestId}`;
-                            await removeContainer({ id, dockerId: applicationFound.destinationDocker.id });
-                        }
-                        return {
-                            message: 'Removed preview. Thank you!'
-                        };
                     }
-                } else {
+
-                    throw { status: 500, message: 'Pull request previews are not enabled.' }
+                    await prisma.application.update({
+                        where: { id: application.id },
+                        data: { updatedAt: new Date() }
+                    });
+                    await prisma.build.create({
+                        data: {
+                            id: buildId,
+                            applicationId: application.id,
+                            destinationDockerId: application.destinationDocker.id,
+                            gitSourceId: application.gitSource.id,
+                            githubAppId: application.gitSource.githubApp?.id,
+                            gitlabAppId: application.gitSource.gitlabApp?.id,
+                            status: 'queued',
+                            type: 'webhook_commit'
+                        }
+                    });
+                    console.log(`Webhook for ${application.name} queued.`)
+
+                } else if (githubEvent === 'pull_request') {
+                    const pullmergeRequestId = body.number.toString();
+                    const pullmergeRequestAction = body.action;
+                    const sourceBranch = body.pull_request.head.ref.includes('/') ? body.pull_request.head.ref.split('/')[2] : body.pull_request.head.ref;
+                    if (!allowedActions.includes(pullmergeRequestAction)) {
+                        throw { status: 500, message: 'Action not allowed.' }
+                    }
+
+                    if (application.settings.previews) {
+                        if (application.destinationDockerId) {
+                            const isRunning = await checkContainer(
+                                {
+                                    dockerId: application.destinationDocker.id,
+                                    container: application.id
+                                }
+                            );
+                            if (!isRunning) {
+                                throw { status: 500, message: 'Application not running.' }
+                            }
+                        }
+                        if (
+                            pullmergeRequestAction === 'opened' ||
+                            pullmergeRequestAction === 'reopened' ||
+                            pullmergeRequestAction === 'synchronize'
+                        ) {
+                            await prisma.application.update({
+                                where: { id: application.id },
+                                data: { updatedAt: new Date() }
+                            });
+                            if (application.connectedDatabase && pullmergeRequestAction === 'opened' || pullmergeRequestAction === 'reopened') {
+                                // Coolify hosted database
+                                if (application.connectedDatabase.databaseId) {
+                                    const databaseId = application.connectedDatabase.databaseId;
+                                    const database = await prisma.database.findUnique({ where: { id: databaseId } });
+                                    if (database) {
+                                        await createdBranchDatabase(database, application.connectedDatabase.hostedDatabaseDBName, pullmergeRequestId);
+                                    }
+                                }
+                            }
+                            await prisma.build.create({
+                                data: {
+                                    id: buildId,
+                                    pullmergeRequestId,
+                                    sourceBranch,
+                                    applicationId: application.id,
+                                    destinationDockerId: application.destinationDocker.id,
+                                    gitSourceId: application.gitSource.id,
+                                    githubAppId: application.gitSource.githubApp?.id,
+                                    gitlabAppId: application.gitSource.gitlabApp?.id,
+                                    status: 'queued',
+                                    type: 'webhook_pr'
+                                }
+                            });
+
+
+                        } else if (pullmergeRequestAction === 'closed') {
+                            if (application.destinationDockerId) {
+                                const id = `${application.id}-${pullmergeRequestId}`;
+                                try {
+                                    await removeContainer({ id, dockerId: application.destinationDocker.id });
+                                } catch (error) { }
+                            }
+                            if (application.connectedDatabase.databaseId) {
+                                const databaseId = application.connectedDatabase.databaseId;
+                                const database = await prisma.database.findUnique({ where: { id: databaseId } });
+                                if (database) {
+                                    await removeBranchDatabase(database, pullmergeRequestId);
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }
-        throw { status: 500, message: 'Not handled event.' }
     } catch ({ status, message }) {
         return errorHandler({ status, message })
     }

apps/api/src/routes/webhooks/gitlab/handlers.ts

@@ -2,9 +2,8 @@ import axios from "axios";
 import cuid from "cuid";
 import crypto from "crypto";
 import type { FastifyReply, FastifyRequest } from "fastify";
-import { errorHandler, getAPIUrl, isDev, listSettings, prisma } from "../../../lib/common";
+import { errorHandler, getAPIUrl, getUIUrl, isDev, listSettings, prisma } from "../../../lib/common";
 import { checkContainer, removeContainer } from "../../../lib/docker";
-import { scheduler } from "../../../lib/scheduler";
 import { getApplicationFromDB, getApplicationFromDBWebhook } from "../../api/v1/applications/handlers";
 
 import type { ConfigureGitLabApp, GitLabEvents } from "./types";
@@ -30,7 +29,7 @@ export async function configureGitLabApp(request: FastifyRequest<ConfigureGitLab
         });
         const { data } = await axios.post(`${htmlUrl}/oauth/token`, params)
         if (isDev) {
-            return reply.redirect(`${getAPIUrl()}/webhooks/success?token=${data.access_token}`)
+            return reply.redirect(`${getUIUrl()}/webhooks/success?token=${data.access_token}`)
         }
         return reply.redirect(`/webhooks/success?token=${data.access_token}`)
     } catch ({ status, message, ...other }) {
@@ -40,59 +39,56 @@ export async function configureGitLabApp(request: FastifyRequest<ConfigureGitLab
 export async function gitLabEvents(request: FastifyRequest<GitLabEvents>) {
     const { object_kind: objectKind, ref, project_id } = request.body
     try {
-        const buildId = cuid();
 
         const allowedActions = ['opened', 'reopen', 'close', 'open', 'update'];
 
         const webhookToken = request.headers['x-gitlab-token'];
-        if (!webhookToken) {
+        if (!webhookToken && !isDev) {
             throw { status: 500, message: 'Invalid webhookToken.' }
         }
         if (objectKind === 'push') {
             const projectId = Number(project_id);
             const branch = ref.split('/')[2];
-            const applicationFound = await getApplicationFromDBWebhook(projectId, branch);
+            const applicationsFound = await getApplicationFromDBWebhook(projectId, branch);
-            if (applicationFound) {
+            if (applicationsFound && applicationsFound.length > 0) {
-                if (!applicationFound.configHash) {
+                for (const application of applicationsFound) {
-                    const configHash = crypto
+                    const buildId = cuid();
-                        .createHash('sha256')
+                    if (!application.configHash) {
-                        .update(
+                        const configHash = crypto
-                            JSON.stringify({
+                            .createHash('sha256')
-                                buildPack: applicationFound.buildPack,
+                            .update(
-                                port: applicationFound.port,
+                                JSON.stringify({
-                                exposePort: applicationFound.exposePort,
+                                    buildPack: application.buildPack,
-                                installCommand: applicationFound.installCommand,
+                                    port: application.port,
-                                buildCommand: applicationFound.buildCommand,
+                                    exposePort: application.exposePort,
-                                startCommand: applicationFound.startCommand
+                                    installCommand: application.installCommand,
-                            })
+                                    buildCommand: application.buildCommand,
-                        )
+                                    startCommand: application.startCommand
-                        .digest('hex');
+                                })
-                    await prisma.application.updateMany({
+                            )
-                        where: { branch, projectId },
+                            .digest('hex');
-                        data: { configHash }
+                        await prisma.application.update({
+                            where: { id: application.id },
+                            data: { configHash }
+                        });
+                    }
+                    await prisma.application.update({
+                        where: { id: application.id },
+                        data: { updatedAt: new Date() }
+                    });
+                    await prisma.build.create({
+                        data: {
+                            id: buildId,
+                            applicationId: application.id,
+                            destinationDockerId: application.destinationDocker.id,
+                            gitSourceId: application.gitSource.id,
+                            githubAppId: application.gitSource.githubApp?.id,
+                            gitlabAppId: application.gitSource.gitlabApp?.id,
+                            status: 'queued',
+                            type: 'webhook_commit'
+                        }
                     });
                 }
-                await prisma.application.update({
-                    where: { id: applicationFound.id },
-                    data: { updatedAt: new Date() }
-                });
-                await prisma.build.create({
-                    data: {
-                        id: buildId,
-                        applicationId: applicationFound.id,
-                        destinationDockerId: applicationFound.destinationDocker.id,
-                        gitSourceId: applicationFound.gitSource.id,
-                        githubAppId: applicationFound.gitSource.githubApp?.id,
-                        gitlabAppId: applicationFound.gitSource.gitlabApp?.id,
-                        status: 'queued',
-                        type: 'webhook_commit'
-                    }
-                });
-
-                return {
-                    message: 'Queued. Thank you!'
-                };
-
             }
         } else if (objectKind === 'merge_request') {
             const { object_attributes: { work_in_progress: isDraft, action, source_branch: sourceBranch, target_branch: targetBranch, iid: pullmergeRequestId }, project: { id } } = request.body
@@ -105,64 +101,63 @@ export async function gitLabEvents(request: FastifyRequest<GitLabEvents>) {
                 throw { status: 500, message: 'Draft MR, do nothing.' }
             }
 
-            const applicationFound = await getApplicationFromDBWebhook(projectId, targetBranch);
+            const applicationsFound = await getApplicationFromDBWebhook(projectId, targetBranch);
-            if (applicationFound) {
+            if (applicationsFound && applicationsFound.length > 0) {
-                if (applicationFound.settings.previews) {
+                for (const application of applicationsFound) {
-                    if (applicationFound.destinationDockerId) {
+                    const buildId = cuid();
-                        const isRunning = await checkContainer(
+                    if (application.settings.previews) {
-                            {
+                        if (application.destinationDockerId) {
-                                dockerId: applicationFound.destinationDocker.id,
+                            const isRunning = await checkContainer(
-                                container: applicationFound.id
+                                {
+                                    dockerId: application.destinationDocker.id,
+                                    container: application.id
+                                }
+                            );
+                            if (!isRunning) {
+                                throw { status: 500, message: 'Application not running.' }
                             }
-                        );
-                        if (!isRunning) {
-                            throw { status: 500, message: 'Application not running.' }
                         }
-                    }
+                        if (!isDev && application.gitSource.gitlabApp.webhookToken !== webhookToken) {
-                    if (!isDev && applicationFound.gitSource.gitlabApp.webhookToken !== webhookToken) {
+                            throw { status: 500, message: 'Invalid webhookToken. Are you doing something nasty?!' }
-                        throw { status: 500, message: 'Invalid webhookToken. Are you doing something nasty?!' }
+                        }
-                    }
+                        if (
-                    if (
+                            action === 'opened' ||
-                        action === 'opened' ||
+                            action === 'reopen' ||
-                        action === 'reopen' ||
+                            action === 'open' ||
-                        action === 'open' ||
+                            action === 'update'
-                        action === 'update'
+                        ) {
-                    ) {
+                            await prisma.application.update({
-                        await prisma.application.update({
+                                where: { id: application.id },
-                            where: { id: applicationFound.id },
+                                data: { updatedAt: new Date() }
-                            data: { updatedAt: new Date() }
+                            });
-                        });
+                            await prisma.build.create({
-                        await prisma.build.create({
+                                data: {
-                            data: {
+                                    id: buildId,
-                                id: buildId,
+                                    pullmergeRequestId,
-                                pullmergeRequestId,
+                                    sourceBranch,
-                                sourceBranch,
+                                    applicationId: application.id,
-                                applicationId: applicationFound.id,
+                                    destinationDockerId: application.destinationDocker.id,
-                                destinationDockerId: applicationFound.destinationDocker.id,
+                                    gitSourceId: application.gitSource.id,
-                                gitSourceId: applicationFound.gitSource.id,
+                                    githubAppId: application.gitSource.githubApp?.id,
-                                githubAppId: applicationFound.gitSource.githubApp?.id,
+                                    gitlabAppId: application.gitSource.gitlabApp?.id,
-                                gitlabAppId: applicationFound.gitSource.gitlabApp?.id,
+                                    status: 'queued',
-                                status: 'queued',
+                                    type: 'webhook_mr'
-                                type: 'webhook_mr'
+                                }
+                            });
+                            return {
+                                message: 'Queued. Thank you!'
+                            };
+                        } else if (action === 'close') {
+                            if (application.destinationDockerId) {
+                                const id = `${application.id}-${pullmergeRequestId}`;
+                                await removeContainer({ id, dockerId: application.destinationDocker.id });
                             }
-                        });
+
-                        return {
-                            message: 'Queued. Thank you!'
-                        };
-                    } else if (action === 'close') {
-                        if (applicationFound.destinationDockerId) {
-                            const id = `${applicationFound.id}-${pullmergeRequestId}`;
-                            await removeContainer({ id, dockerId: applicationFound.destinationDocker.id });
                         }
-                        return {
-                            message: 'Removed preview. Thank you!'
-                        };
                     }
                 }
-                throw { status: 500, message: 'Merge request previews are not enabled.' }
             }
         }
-        throw { status: 500, message: 'Not handled event.' }
     } catch ({ status, message }) {
         return errorHandler({ status, message })
     }

apps/api/src/routes/webhooks/traefik/handlers.ts

@@ -3,6 +3,7 @@ import { errorHandler, getDomain, isDev, prisma, executeDockerCmd } from "../../
 import { supportedServiceTypesAndVersions } from "../../../lib/services/supportedVersions";
 import { includeServices } from "../../../lib/services/common";
 import { TraefikOtherConfiguration } from "./types";
+import { OnlyId } from "../../../types";
 
 function configureMiddleware(
 	{ id, container, port, domain, nakedDomain, isHttps, isWWW, isDualCerts, scriptName, type },
@@ -25,7 +26,30 @@ function configureMiddleware(
 				]
 			}
 		};
+		if (type === 'appwrite') {
+			traefik.http.routers[`${id}-realtime`] = {
+				entrypoints: ['websecure'],
+				rule: `(Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)) && PathPrefix(\`/v1/realtime\`)`,
+				service: `${`${id}-realtime`}`,
+				tls: {
+					domains: {
+						main: `${domain}`
+					}
+				},
+				middlewares: []
+			};
 
+
+			traefik.http.services[`${id}-realtime`] = {
+				loadbalancer: {
+					servers: [
+						{
+							url: `http://${container}-realtime:${port}`
+						}
+					]
+				}
+			};
+		}
 		if (isDualCerts) {
 			traefik.http.routers[`${id}-secure`] = {
 				entrypoints: ['websecure'],
@@ -112,6 +136,23 @@ function configureMiddleware(
 				]
 			}
 		};
+		if (type === 'appwrite') {
+			traefik.http.routers[`${id}-realtime`] = {
+				entrypoints: ['web'],
+				rule: `(Host(\`${nakedDomain}\`) || Host(\`www.${nakedDomain}\`)) && PathPrefix(\`/v1/realtime\`)`,
+				service: `${id}-realtime`,
+				middlewares: []
+			};
+			traefik.http.services[`${id}-realtime`] = {
+				loadbalancer: {
+					servers: [
+						{
+							url: `http://${container}-realtime:${port}`
+						}
+					]
+				}
+			};
+		}
 
 		if (!isDualCerts) {
 			if (isWWW) {
@@ -490,7 +531,7 @@ export async function traefikOtherConfiguration(request: FastifyRequest<TraefikO
 	}
 }
 
-export async function remoteTraefikConfiguration(request: FastifyRequest) {
+export async function remoteTraefikConfiguration(request: FastifyRequest<OnlyId>) {
 	const { id } = request.params
 	try {
 		const traefik = {

apps/api/src/types.ts

@@ -36,4 +36,3 @@ export interface SaveDatabaseSettings extends OnlyId {
 }
 
 
-

apps/i18n/.env.example

@@ -0,0 +1,4 @@
+WEBLATE_INSTANCE_URL=http://localhost
+WEBLATE_COMPONENT_NAME=coolify
+WEBLATE_TOKEN=
+TRANSLATION_DIR=

apps/i18n/.gitignore

@@ -0,0 +1 @@
+locales/*

apps/i18n/index.mjs

@@ -0,0 +1,63 @@
+import dotenv from 'dotenv';
+dotenv.config()
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url';
+import Gettext from 'node-gettext'
+import { po } from 'gettext-parser'
+import got from 'got';
+const __filename = fileURLToPath(import.meta.url);
+
+const __dirname = path.dirname(__filename);
+
+const weblateInstanceURL = process.env.WEBLATE_INSTANCE_URL;
+const weblateComponentName = process.env.WEBLATE_COMPONENT_NAME
+const token = process.env.WEBLATE_TOKEN;
+
+const translationsDir = process.env.TRANSLATION_DIR;
+const translationsPODir = './locales';
+const locales = []
+const domain = 'locale'
+
+const translations = await got(`${weblateInstanceURL}/api/components/${weblateComponentName}/glossary/translations/?format=json`, {
+    headers: {
+        "Authorization": `Token ${token}`
+    }
+}).json()
+for (const translation of translations.results) {
+    const code = translation.language_code
+    locales.push(code)
+
+    const fileUrl = translation.file_url.replace('=json', '=po')
+    const file = await got(fileUrl, {
+        headers: {
+            "Authorization": `Token ${token}`
+        }
+    }).text()
+    fs.writeFileSync(path.join(__dirname, translationsPODir, domain + '-' + code + '.po'), file)
+}
+
+
+const gt = new Gettext()
+
+locales.forEach((locale) => {
+    let json = {}
+    const fileName = `${domain}-${locale}.po`
+    const translationsFilePath = path.join(translationsPODir, fileName)
+    const translationsContent = fs.readFileSync(translationsFilePath)
+
+    const parsedTranslations = po.parse(translationsContent)
+    const a = gt.gettext(parsedTranslations)
+    for (const [key, value] of Object.entries(a)) {
+        if (key === 'translations') {
+            for (const [key1, value1] of Object.entries(value)) {
+                if (key1 !== '') {
+                    for (const [key2, value2] of Object.entries(value1)) {
+                        json[value2.msgctxt] = value2.msgstr[0]
+                    }
+                }
+            }
+        }
+    }
+    fs.writeFileSync(`${translationsDir}/${locale}.json`, JSON.stringify(json))
+})

apps/i18n/package.json

@@ -0,0 +1,15 @@
+{
+	"name": "i18n-converter",
+	"description": "Convert Weblate translations to sveltekit-i18n",
+	"license": "Apache-2.0",
+	"scripts": {
+		"translate": "node index.mjs"
+	},
+	"type": "module",
+	"dependencies": {
+		"node-gettext": "3.0.0",
+		"gettext-parser": "6.0.0",
+		"got": "12.3.1",
+		"dotenv": "16.0.2"
+	}
+}

apps/ui/package.json

@@ -14,33 +14,38 @@
 		"format": "prettier --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
+		"@floating-ui/dom": "1.0.1",
 		"@playwright/test": "1.25.1",
+		"@popperjs/core": "2.11.6",
 		"@sveltejs/kit": "1.0.0-next.405",
 		"@types/js-cookie": "3.0.2",
-		"@typescript-eslint/eslint-plugin": "5.35.1",
+		"@typescript-eslint/eslint-plugin": "5.36.1",
-		"@typescript-eslint/parser": "5.35.1",
+		"@typescript-eslint/parser": "5.36.1",
 		"autoprefixer": "10.4.8",
-		"eslint": "8.22.0",
+		"classnames": "2.3.1",
+		"eslint": "8.23.0",
 		"eslint-config-prettier": "8.5.0",
 		"eslint-plugin-svelte3": "4.0.0",
+		"flowbite": "1.5.2",
+		"flowbite-svelte": "0.26.2",
 		"postcss": "8.4.16",
 		"prettier": "2.7.1",
 		"prettier-plugin-svelte": "2.7.0",
-		"svelte": "3.49.0",
+		"svelte": "3.50.0",
-		"svelte-check": "2.8.1",
+		"svelte-check": "2.9.0",
 		"svelte-preprocess": "4.10.7",
 		"tailwindcss": "3.1.8",
 		"tailwindcss-scrollbar": "0.1.0",
 		"tslib": "2.4.0",
-		"typescript": "4.7.4",
+		"typescript": "4.8.2",
-		"vite": "3.0.5"
+		"vite": "3.1.0"
 	},
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/adapter-static": "1.0.0-next.39",
-		"@tailwindcss/typography": "^0.5.4",
+		"@tailwindcss/typography": "^0.5.7",
 		"cuid": "2.1.8",
-		"daisyui": "2.24.0",
+		"daisyui": "2.24.2",
 		"js-cookie": "3.0.1",
 		"p-limit": "4.0.0",
 		"svelte-select": "4.4.7",

apps/ui/src/lib/components/DocLink.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Tooltip from './Tooltip.svelte';
+	export let url = 'https://docs.coollabs.io';
+	let id =
+		'cool-' +
+		url
+			.split('')
+			.map((c) => c.charCodeAt(0).toString(16).padStart(2, '0'))
+			.join('')
+			.slice(-16);
+</script>
+
+<a {id} href={url} target="_blank" class="icons inline-block text-pink-500 cursor-pointer text-xs">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class="w-6 h-6"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		fill="none"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+		<path
+			d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18"
+		/>
+		<line x1="13" y1="8" x2="15" y2="8" />
+		<line x1="13" y1="12" x2="15" y2="12" />
+	</svg>
+</a>
+<Tooltip triggeredBy={`#${id}`}>See details in the documentation</Tooltip>

apps/ui/src/lib/components/Explainer.svelte

@@ -1,6 +1,31 @@
 <script lang="ts">
-	export let text: string;
+	import { onMount } from 'svelte';
-	export let customClass = 'max-w-[24rem]';
+
+	import Tooltip from './Tooltip.svelte';
+	export let explanation = '';
+	let id: any;
+	let self: any;
+	onMount(() => {
+		id = `info-${self.offsetLeft}-${self.offsetTop}`;
+	});
 </script>
 
-<div class="p-2 text-xs text-stone-400 {customClass}">{@html text}</div>
+<div {id} class="inline-block mx-2 text-pink-500 cursor-pointer" bind:this={self}>
+	<svg
+		fill="none"
+		height="18"
+		shape-rendering="geometricPrecision"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		viewBox="0 0 24 24"
+		width="18"
+		><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" /><path
+			d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
+		/><circle cx="12" cy="17" r=".5" />
+	</svg>
+</div>
+{#if id}
+	<Tooltip triggeredBy={`#${id}`}>{@html explanation}</Tooltip>
+{/if}

apps/ui/src/lib/components/Setting.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import Explainer from '$lib/components/Explainer.svelte';
+	import Explaner from './Explainer.svelte';
+	import Tooltip from './Tooltip.svelte';
 
+	export let id: any;
 	export let setting: any;
 	export let title: any;
 	export let description: any;
@@ -8,22 +10,17 @@
 	export let disabled = false;
 	export let dataTooltip: any = null;
 	export let loading = false;
+	let triggeredBy = `#${id}`;
 </script>
 
 <div class="flex items-center py-4 pr-8">
 	<div class="flex w-96 flex-col">
-		<div class="text-xs font-bold text-stone-100 md:text-base">{title}</div>
+		<div class="text-xs font-bold text-stone-100 md:text-base">
-		<Explainer text={description} />
+			{title}<Explaner explanation={description} />
+		</div>
 	</div>
 </div>
-<div
+<div class:text-center={isCenter} class="flex justify-center">
-	class:tooltip-right={dataTooltip}
-	class:tooltip-primary={dataTooltip}
-	class:tooltip={dataTooltip}
-	class:text-center={isCenter}
-	data-tip={dataTooltip}
-	class="flex justify-center"
->
 	<div
 		on:click
 		aria-pressed="false"
@@ -32,6 +29,7 @@
 		class:bg-green-600={!loading && setting}
 		class:bg-stone-700={!loading && !setting}
 		class:bg-yellow-500={loading}
+		{id}
 	>
 		<span class="sr-only">Use setting</span>
 		<span
@@ -72,3 +70,7 @@
 		</span>
 	</div>
 </div>
+
+{#if dataTooltip}
+	<Tooltip {triggeredBy} placement="top">{dataTooltip}</Tooltip>
+{/if}

apps/ui/src/lib/components/SimpleExplainer.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let text: string;
+	export let customClass = 'max-w-[24rem]';
+</script>
+
+<div class="p-2 text-xs text-stone-400 {customClass}">{@html text}</div>

apps/ui/src/lib/components/Tooltip.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Tooltip } from 'flowbite-svelte';
+	export let placement = 'bottom';
+	export let color = 'bg-coollabs text-left';
+	export let triggeredBy = '#tooltip-default';
+</script>
+
+<Tooltip {triggeredBy} {placement} arrow={false} {color} style="custom"><slot /></Tooltip>

apps/ui/src/lib/components/UpdateAvailable.svelte

@@ -16,7 +16,6 @@
 		updateStatus.loading = true;
 		try {
 			if (dev) {
-				console.log(`updating to ${latestVersion}`);
 				await asyncSleep(4000);
 				return window.location.reload();
 			} else {

apps/ui/src/lib/components/Usage.svelte

@@ -26,7 +26,7 @@
 	import { addToast, appSession } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
 	import { get, post } from '$lib/api';
-	import { errorNotification } from '$lib/common';
+	import { asyncSleep, errorNotification } from '$lib/common';
 	async function getStatus() {
 		if (loading.usage) return;
 		loading.usage = true;
@@ -42,6 +42,26 @@
 			loading.restart = true;
 			try {
 				await post(`/internal/restart`, {});
+				await asyncSleep(10000);
+				let reachable = false;
+				let tries = 0;
+				do {
+					await asyncSleep(4000);
+					try {
+						await get(`/undead`);
+						reachable = true;
+					} catch (error) {
+						reachable = false;
+					}
+					if (reachable) break;
+					tries++;
+				} while (!reachable || tries < 120);
+				addToast({
+					message: 'New version reachable. Reloading...',
+					type: 'success'
+				});
+				await asyncSleep(3000);
+				return window.location.reload();
 				addToast({
 					type: 'success',
 					message: 'Coolify restarted successfully. It will take a moment.'
@@ -89,10 +109,8 @@
 		<h1 class="title lg:text-3xl">Hardware Details</h1>
 		<div class="flex lg:flex-row flex-col space-x-0 lg:space-x-2 space-y-2 lg:space-y-0">
 			{#if $appSession.teamId === '0'}
-				<button
+				<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
-					on:click={manuallyCleanupStorage}
+					>Cleanup Storage</button
-					class:loading={loading.cleanup}
-					class="btn btn-sm">Cleanup Storage</button
 				>
 				<button
 					on:click={restartCoolify}

apps/ui/src/lib/components/svg/services/MeiliSearch.svelte

@@ -4,7 +4,7 @@
 
 <svg
 	viewBox="0 0 127 74"
-	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8mx-auto'}
+	class={isAbsolute ? 'w-10 h-10 absolute top-0 left-0 -m-5' : 'w-8 h-8 mx-auto'}
 	xmlns="http://www.w3.org/2000/svg"
 	><path
 		d="M.825 73.993l23.244-59.47A21.85 21.85 0 0144.42.625h14.014L35.19 60.096a21.85 21.85 0 01-20.352 13.897H.825z"

apps/ui/src/lib/components/svg/services/ServiceIcons.svelte

@@ -40,4 +40,6 @@
 	<Icons.GlitchTip {isAbsolute} />
 {:else if type === 'searxng'}
 	<Icons.Searxng {isAbsolute} />
+{:else if type === 'weblate'}
+	<Icons.Weblate {isAbsolute} />
 {/if}

apps/ui/src/lib/components/svg/services/Weblate.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class={isAbsolute ? 'w-16 h-16 absolute top-0 left-0 -m-7' : 'w-12 h-12 mx-auto'}
+	version="1.1"
+	viewBox="0 0 300 300"
+	><linearGradient
+		id="a"
+		x1=".3965"
+		x2="98.808"
+		y1="55.253"
+		y2="55.253"
+		gradientTransform="scale(.98308 1.0172)"
+		gradientUnits="userSpaceOnUse"
+		><stop stop-color="#00d2e6" offset="0" /><stop
+			stop-color="#2eccaa"
+			offset="1"
+		/></linearGradient
+	><linearGradient
+		id="b"
+		x1="49.017"
+		x2="99.793"
+		y1="137.89"
+		y2="113.96"
+		gradientTransform="scale(1.1631 .8598)"
+		gradientUnits="userSpaceOnUse"
+		><stop stop-opacity="0" offset="0" /><stop offset=".51413" /><stop
+			stop-opacity="0"
+			offset="1"
+		/></linearGradient
+	><linearGradient
+		id="c"
+		x1="201.82"
+		x2="103.58"
+		y1="57.649"
+		y2="57.649"
+		gradientTransform="scale(.98308 1.0172)"
+		gradientUnits="userSpaceOnUse"
+		><stop stop-color="#1fa385" offset="0" /><stop
+			stop-color="#2eccaa"
+			offset="1"
+		/></linearGradient
+	><g transform="translate(50,76)" fill-rule="evenodd"
+		><path
+			d="m127.25 111.61c-2.8884-0.0145-5.7666-0.6024-8.4797-1.7847-6.1117-2.6626-11.493-7.6912-15.872-14.495 1.2486-2.2193 2.3738-4.5173 3.3784-6.8535 4.4051-10.243 6.5-21.46 6.6607-32.593-0.0233-0.22082-0.0416-0.44244-0.0552-0.66483l-0.0121-0.57132c-0.01-4.3654-0.67459-8.7898-2.1767-12.909-1.7304-4.7458-4.4887-9.4955-8.865-11.348-0.79519-0.33595-1.6316-0.47701-2.4642-0.45737-5.5049-10.289-5.6799-20.149 0-29.537 0.10115 0 0.20619 3.9293e-4 0.30734 0.001179 6.7012 0.07387 13.34 2.1418 19.021 5.7536 15.469 9.835 23.182 29.001 23.352 47.818 2e-3 0.22083-3.9e-4 0.44126-7e-3 0.66169h0.0868c-0.0226 19.887-4.8049 40.054-14.875 56.979zm-34.3 31.216c-14.448 5.9425-31.228 5.6236-45.549-1.025-16.476-7.6476-29.065-22.512-36.818-39.479-13.262-29.022-13.566-63.715-0.98815-93.182 9.4458 3.7788 17.845-2.2397 17.845-2.2397s-0.01945 9.2605 8.9478 13.905c-9.2007 21.556-8.979 47.167 0.2412 68.173 4.4389 10.107 11.22 19.519 20.619 24.842 3.3547 1.8996 7.041 3.126 10.833 3.5862 0.01404 0.0219 0.02808 0.0439 0.04214 0.0658 6.6965 10.449 15.132 19.157 24.828 25.354z"
+			fill="url(#a)"
+			fill-rule="nonzero"
+		/><path
+			d="m127.24 111.61c-2.8869-0.0151-5.7636-0.60296-8.4755-1.7846-6.1127-2.663-11.495-7.6928-15.874-14.498 1.2494-2.2205 2.3754-4.5198 3.3806-6.8572 1.3282-3.0884 2.4463-6.2648 3.3644-9.501 2.128-7.4978 30.382 2.0181 26.072 14.371-2.2239 6.373-5.0394 12.509-8.4675 18.27zm-34.302 31.212c-14.446 5.9396-31.224 5.6198-45.543-1.0278-16.476-7.6476 0.44739-33.303 9.8465-27.981 3.3533 1.8988 7.0378 3.125 10.828 3.5856 0.01567 0.0245 0.03135 0.049 0.04704 0.0735 6.695 10.447 15.128 19.153 24.821 25.349z"
+			fill="url(#b)"
+			opacity=".3"
+		/><path
+			d="m56.762 54.628c-0.0066-0.22043-0.0093-0.44086-7e-3 -0.66169 0.17001-18.817 7.8827-37.983 23.352-47.818 5.6811-3.6118 12.32-5.6798 19.021-5.7536 0.10115-7.8585e-4 0.20619-0.001179 0.30734-0.001179v29.537c-0.83254-0.01965-1.669 0.12141-2.4642 0.45737-4.3763 1.8523-7.1345 6.602-8.865 11.348-1.5021 4.1191-2.1669 8.5434-2.1767 12.909l-0.01206 0.57132c-0.01362 0.2224-0.0319 0.44401-0.05524 0.66483 0.16067 11.134 2.2556 22.35 6.6607 32.593 4.9334 11.472 12.775 22.025 23.847 26.849 8.3526 3.6397 17.612 2.7811 25.182-1.5057 9.3991-5.3226 16.18-14.734 20.619-24.842 9.2202-21.006 9.4419-46.617 0.24121-68.173 8.9673-4.6444 8.9478-13.905 8.9478-13.905s8.3993 6.0185 17.845 2.2397c12.578 29.466 12.274 64.16-0.98815 93.182-7.7535 16.967-20.343 31.831-36.818 39.479-14.667 6.809-31.913 6.9792-46.591 0.58389-13.19-5.7489-23.918-16.106-31.637-28.15-11.179-17.443-16.472-38.678-16.496-59.604z"
+			fill="url(#c)"
+			fill-rule="nonzero"
+		/></g
+	></svg
+>

apps/ui/src/lib/components/svg/services/index.ts

@@ -17,3 +17,4 @@ export { default as Appwrite } from './Appwrite.svelte';
 export { default as Moodle } from './Moodle.svelte';
 export { default as GlitchTip }  from './GlitchTip.svelte';
 export { default as Searxng }  from './Searxng.svelte';
+export { default as Weblate }  from './Weblate.svelte';

apps/ui/src/lib/locales/en.json

@@ -209,7 +209,7 @@
 		"expose_a_port": "Expose a port",
 		"enable_preview_deploy_mr_pr_requests": "Enable preview deployments from pull or merge requests.",
 		"debug_logs": "Debug Logs",
-		"enable_debug_log_during_build": "Enable debug logs during build phase.<br><span class='text-red-500 font-bold'>Sensitive information</span> could be visible and saved in logs.",
+		"enable_debug_log_during_build": "Enable debug logs during build phase.<br><span class='text-settings font-bold'>Sensitive information</span> could be visible and saved in logs.",
 		"cant_activate_auto_deploy_without_repo": "Cannot activate automatic deployments until only one application is defined for this repository / branch.",
 		"no_applications_found": "No applications found",
 		"secret__batch_dot_env": "Paste .env file",
@@ -275,7 +275,7 @@
 		"application_id": "Application ID",
 		"group_name": "Group Name",
 		"oauth_id": "OAuth ID",
-		"oauth_id_explainer": "The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-orange-600' >in the URL</span> of your GitLab OAuth Application.",
+		"oauth_id_explainer": "The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-settings' >in the URL</span> of your GitLab OAuth Application.",
 		"register_oauth_gitlab": "Register new OAuth application on GitLab",
 		"gitlab": {
 			"self_hosted": "Instance-wide application (self-hosted)",
@@ -306,7 +306,7 @@
 		"change_language": "Change Language",
 		"permission_denied": "You do not have permission to do this. \\nAsk an admin to modify your permissions.",
 		"domain_removed": "Domain removed",
-		"ssl_explainer": "If you specify <span class='text-settings font-bold'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-settings font-bold'>WARNING:</span> If you change an already set domain, it will brake webhooks and other integrations! You need to manually update them.",
+		"ssl_explainer": "If you specify <span class='text-settings font-bold'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-settings font-bold'>WARNING:</span> If you change an already set domain, it will break webhooks and other integrations! You need to manually update them.",
 		"must_remove_domain_before_changing": "Must remove the domain before you can change this setting.",
 		"registration_allowed": "Registration allowed?",
 		"registration_allowed_explainer": "Allow further registrations to the application. <br>It's turned off after the first registration.",

apps/ui/src/lib/store.ts

@@ -3,6 +3,7 @@ import cuid from 'cuid';
 import { writable, readable, type Writable } from 'svelte/store';
 
 interface AppSession {
+    registrationEnabled: boolean;
     ipv4: string | null,
     ipv6: string | null,
     version: string | null,
@@ -45,6 +46,26 @@ export const appSession: Writable<AppSession> = writable({
     supportedServiceTypesAndVersions: []
 });
 export const disabledButton: Writable<boolean> = writable(false);
+export const isDeploymentEnabled: Writable<boolean> = writable(false);
+export function checkIfDeploymentEnabledApplications(isAdmin: boolean, application: any) {
+    return (
+        isAdmin &&
+        (application.fqdn || application.settings.isBot) &&
+        application.gitSource &&
+        application.repository &&
+        application.destinationDocker &&
+        application.buildPack
+    );
+}
+export function checkIfDeploymentEnabledServices(isAdmin: boolean, service: any) {
+    return (
+        isAdmin &&
+        service.fqdn &&
+        service.destinationDocker &&
+        service.version &&
+        service.type
+    );
+}
 export const status: Writable<any> = writable({
     application: {
         isRunning: false,

apps/ui/src/routes/__layout.svelte

@@ -66,12 +66,13 @@
 <script lang="ts">
 	export let baseSettings: any;
 	export let supportedServiceTypesAndVersions: any;
+	$appSession.registrationEnabled = baseSettings.registrationEnabled;
 	$appSession.ipv4 = baseSettings.ipv4;
 	$appSession.ipv6 = baseSettings.ipv6;
 	$appSession.version = baseSettings.version;
 	$appSession.whiteLabeled = baseSettings.whiteLabeled;
 	$appSession.whiteLabeledDetails.icon = baseSettings.whiteLabeledIcon;
-	$appSession.supportedServiceTypesAndVersions = supportedServiceTypesAndVersions
+	$appSession.supportedServiceTypesAndVersions = supportedServiceTypesAndVersions;
 
 	export let userId: string;
 	export let teamId: string;
@@ -88,6 +89,7 @@
 	import { errorNotification } from '$lib/common';
 	import { appSession } from '$lib/store';
 	import Toasts from '$lib/components/Toasts.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	if (userId) $appSession.userId = userId;
 	if (teamId) $appSession.teamId = teamId;
@@ -132,16 +134,16 @@
 			{/if}
 			<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
 				<a
+					id="dashboard"
 					sveltekit:prefetch
 					href="/"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200 hover:text-white"
+					class="icons bg-coolgray-200 hover:text-white"
 					class:text-white={$page.url.pathname === '/'}
 					class:bg-coolgray-500={$page.url.pathname === '/'}
-					data-tip="Dashboard"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -156,12 +158,13 @@
 						<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
 					</svg>
 				</a>
-				<div class="border-t border-stone-700" />
 
+				<div class="border-t border-stone-700" />
 				<a
+					id="applications"
 					sveltekit:prefetch
 					href="/applications"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
+					class="icons bg-coolgray-200"
 					class:text-applications={$page.url.pathname.startsWith('/applications') ||
 						$page.url.pathname.startsWith('/new/application')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
@@ -170,7 +173,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentcolor"
@@ -186,10 +189,12 @@
 						<line x1="17" y1="4" x2="17" y2="10" />
 					</svg>
 				</a>
+
 				<a
+					id="sources"
 					sveltekit:prefetch
 					href="/sources"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
+					class="icons bg-coolgray-200"
 					class:text-sources={$page.url.pathname.startsWith('/sources') ||
 						$page.url.pathname.startsWith('/new/source')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
@@ -198,7 +203,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -216,9 +221,10 @@
 					</svg>
 				</a>
 				<a
+					id="destinations"
 					sveltekit:prefetch
 					href="/destinations"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
+					class="icons bg-coolgray-200"
 					class:text-destinations={$page.url.pathname.startsWith('/destinations') ||
 						$page.url.pathname.startsWith('/new/destination')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
@@ -227,7 +233,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -251,9 +257,10 @@
 				</a>
 				<div class="border-t border-stone-700" />
 				<a
+					id="databases"
 					sveltekit:prefetch
 					href="/databases"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
+					class="icons  bg-coolgray-200"
 					class:text-databases={$page.url.pathname.startsWith('/databases') ||
 						$page.url.pathname.startsWith('/new/database')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
@@ -262,7 +269,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -277,9 +284,10 @@
 					</svg>
 				</a>
 				<a
+					id="services"
 					sveltekit:prefetch
 					href="/services"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
+					class="icons bg-coolgray-200"
 					class:text-services={$page.url.pathname.startsWith('/services') ||
 						$page.url.pathname.startsWith('/new/service')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
@@ -288,7 +296,7 @@
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
+						class="h-9 w-9"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -306,16 +314,16 @@
 			<UpdateAvailable />
 			<div class="flex flex-col space-y-2 py-2">
 				<a
+					id="iam"
 					sveltekit:prefetch
 					href="/iam"
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
+					class="icons bg-coolgray-200"
 					class:text-iam={$page.url.pathname.startsWith('/iam')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
-					data-tip="IAM"
 					><svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
 						viewBox="0 0 24 24"
+						class="h-9 w-9"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -330,17 +338,17 @@
 					</svg>
 				</a>
 				<a
+					id="settings"
 					sveltekit:prefetch
 					href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
+					class="icons bg-coolgray-200"
 					class:text-settings={$page.url.pathname.startsWith('/settings')}
 					class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
-					data-tip="Settings"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
 						viewBox="0 0 24 24"
+						class="h-9 w-9"
 						stroke-width="1.5"
 						stroke="currentColor"
 						fill="none"
@@ -356,13 +364,13 @@
 				</a>
 
 				<div
-					class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200 hover:text-error"
+					id="logout"
-					data-tip="Logout"
+					class="icons bg-coolgray-200 hover:text-error"
 					on:click={logout}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="ml-1 h-7 w-7"
+						class="ml-1 h-8 w-8"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -396,7 +404,20 @@
 	{/if}
 {/if}
 <main>
-	<div class="px-20">
+	<div class={$appSession.userId ? 'pl-14 lg:px-20' : null}>
 		<slot />
 	</div>
 </main>
+
+<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
+<Tooltip triggeredBy="#applications" placement="right" color="bg-applications">Applications</Tooltip
+>
+<Tooltip triggeredBy="#sources" placement="right" color="bg-sources">Git Sources</Tooltip>
+<Tooltip triggeredBy="#destinations" placement="right" color="bg-destinations">Destinations</Tooltip
+>
+<Tooltip triggeredBy="#databases" placement="right" color="bg-databases">Databases</Tooltip>
+<Tooltip triggeredBy="#services" placement="right" color="bg-services">Services</Tooltip>
+<Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip>
+<Tooltip triggeredBy="#settings" placement="right" color="bg-settings  text-black">Settings</Tooltip
+>
+<Tooltip triggeredBy="#logout" placement="right" color="bg-red-600">Logout</Tooltip>

apps/ui/src/routes/applications/[id]/_Secret.svelte

@@ -65,7 +65,6 @@
 			}
 			dispatch('refresh');
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		}
 	}

apps/ui/src/routes/applications/[id]/_Setting.svelte

@@ -1,72 +0,0 @@
-<script lang="ts">
-	import Explainer from '$lib/components/Explainer.svelte';
-
-	export let setting: any;
-	export let title: any;
-	export let description: any;
-	export let isCenter = true;
-	export let disabled = false;
-	export let dataTooltip: any = null;
-	export let loading = false;
-</script>
-
-<div class="flex items-center py-4 pr-8">
-	<div class="flex w-96 flex-col">
-		<div class="text-xs font-bold text-stone-100 md:text-base">{title}</div>
-		<Explainer text={description} />
-	</div>
-</div>
-<div
-	class:tooltip={dataTooltip}
-	class:text-center={isCenter}
-	data-tip={dataTooltip}
-	class="flex justify-center"
->
-	<div
-		on:click
-		aria-pressed="false"
-		class="relative mx-20 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
-		class:opacity-50={disabled || loading}
-		class:bg-green-600={!loading && setting}
-		class:bg-stone-700={!loading && !setting}
-		class:bg-yellow-500={loading}
-	>
-		<span class="sr-only">Use setting</span>
-		<span
-			class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
-			class:translate-x-5={setting}
-			class:translate-x-0={!setting}
-		>
-			<span
-				class=" absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
-				class:opacity-0={setting}
-				class:opacity-100={!setting}
-				class:animate-spin={loading}
-				aria-hidden="true"
-			>
-				<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
-					<path
-						d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
-			</span>
-			<span
-				class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
-				aria-hidden="true"
-				class:opacity-100={setting}
-				class:opacity-0={!setting}
-				class:animate-spin={loading}
-			>
-				<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
-					<path
-						d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
-					/>
-				</svg>
-			</span>
-		</span>
-	</div>
-</div>

apps/ui/src/routes/applications/[id]/__layout.svelte

@@ -60,25 +60,31 @@
 	import { goto } from '$app/navigation';
 	import { onDestroy, onMount } from 'svelte';
 	import { t } from '$lib/translations';
-	import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store';
+	import {
+		appSession,
+		status,
+		location,
+		setLocation,
+		addToast,
+		isDeploymentEnabled,
+		checkIfDeploymentEnabledApplications
+	} from '$lib/store';
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
-	import Loading from '$lib/components/Loading.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
-	let loading = false;
 	let statusInterval: any;
-	$disabledButton =
+	let forceDelete = false;
-		!$appSession.isAdmin ||
-		(!application.fqdn && !application.settings.isBot) ||
-		!application.gitSource ||
-		!application.repository ||
-		!application.destinationDocker ||
-		!application.buildPack;
-
 	const { id } = $page.params;
 
+	$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
+
 	async function handleDeploySubmit(forceRebuild = false) {
+		if (!$isDeploymentEnabled) return;
 		try {
-			const { buildId } = await post(`/applications/${id}/deploy`, { ...application, forceRebuild });
+			const { buildId } = await post(`/applications/${id}/deploy`, {
+				...application,
+				forceRebuild
+			});
 			addToast({
 				message: $t('application.deployment_queued'),
 				type: 'success'
@@ -95,25 +101,51 @@
 		}
 	}
 
-	async function deleteApplication(name: string) {
+	async function deleteApplication(name: string, force: boolean) {
 		const sure = confirm($t('application.confirm_to_delete', { name }));
 		if (sure) {
-			loading = true;
+			$status.application.initialLoading = true;
 			try {
-				await del(`/applications/${id}`, { id });
+				await del(`/applications/${id}`, { id, force });
 				return await goto(`/applications`);
 			} catch (error) {
+				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
+					forceDelete = true;
+				}
 				return errorNotification(error);
+			} finally {
+				$status.application.initialLoading = false;
 			}
 		}
 	}
+	async function restartApplication() {
+		try {
+			$status.application.initialLoading = true;
+			$status.application.loading = true;
+			await post(`/applications/${id}/restart`, {});
+			addToast({
+				type: 'success',
+				message: 'Restart successful.'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		} finally {
+			$status.application.initialLoading = false;
+			$status.application.loading = false;
+			await getStatus();
+		}
+	}
 	async function stopApplication() {
 		try {
-			loading = true;
+			$status.application.initialLoading = true;
+			// $status.application.loading = true;
 			await post(`/applications/${id}/stop`, {});
-			return window.location.reload();
 		} catch (error) {
 			return errorNotification(error);
+		} finally {
+			$status.application.initialLoading = false;
+			// $status.application.loading = false;
+			await getStatus();
 		}
 	}
 	async function getStatus() {
@@ -128,7 +160,11 @@
 
 	onDestroy(() => {
 		$status.application.initialLoading = true;
+		$status.application.isRunning = false;
+		$status.application.isExited = false;
+		$status.application.loading = false;
 		$location = null;
+		$isDeploymentEnabled = false;
 		clearInterval(statusInterval);
 	});
 	onMount(async () => {
@@ -152,371 +188,401 @@
 </script>
 
 <nav class="nav-side">
-	{#if loading}
+	{#if $location}
-		<Loading fullscreen cover />
+		<a
-	{:else}
+			id="open"
-		{#if $location}
+			href={$location}
-			<a
+			target="_blank"
-				href={$location}
+			class="icons flex items-center bg-transparent text-sm"
-				target="_blank"
+			><svg
-				class="icons tooltip-bottom flex items-center bg-transparent text-sm"
+				xmlns="http://www.w3.org/2000/svg"
-				><svg
+				class="h-6 w-6"
-					xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
-					class="h-6 w-6"
+				stroke-width="1.5"
-					viewBox="0 0 24 24"
+				stroke="currentColor"
-					stroke-width="1.5"
+				fill="none"
-					stroke="currentColor"
+				stroke-linecap="round"
-					fill="none"
+				stroke-linejoin="round"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-					<line x1="10" y1="14" x2="20" y2="4" />
-					<polyline points="15 4 20 4 20 9" />
-				</svg></a
 			>
-		<div class="border border-coolgray-500 h-8" />
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-
+				<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-		{/if}
+				<line x1="10" y1="14" x2="20" y2="4" />
-
+				<polyline points="15 4 20 4 20 9" />
-		{#if $status.application.isExited}
+			</svg></a
-			<a
+		>
-				href={!$disabledButton ? `/applications/${id}/logs` : null}
+		<Tooltip triggeredBy="#open">Open</Tooltip>
-				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center text-error"
-				data-tip="Application exited with an error!"
-				sveltekit:prefetch
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentcolor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path
-						d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
-					/>
-					<line x1="12" y1="8" x2="12" y2="12" />
-					<line x1="12" y1="16" x2="12.01" y2="16" />
-				</svg>
-			</a>
-		{/if}
-		{#if $status.application.initialLoading}
-			<button
-				class="icons tooltip-bottom flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
-					<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
-					<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
-					<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
-					<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
-					<line x1="11" y1="19.94" x2="11" y2="19.95" />
-				</svg>
-			</button>
-		{:else if $status.application.isRunning}
-			<button
-				on:click={stopApplication}
-				type="submit"
-				disabled={$disabledButton}
-				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-error"
-				data-tip={$appSession.isAdmin
-					? $t('application.stop_application')
-					: $t('application.permission_denied_stop_application')}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="w-6 h-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<rect x="6" y="5" width="4" height="14" rx="1" />
-					<rect x="14" y="5" width="4" height="14" rx="1" />
-				</svg>
-			</button>
-			<form on:submit|preventDefault={() => handleDeploySubmit(true)}>
-				<button
-					type="submit"
-					disabled={$disabledButton}
-					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2"
-					data-tip={$appSession.isAdmin
-						? 'Force Rebuild Application'
-						: 'You do not have permission to rebuild application.'}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<path
-							d="M16.3 5h.7a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h5l-2.82 -2.82m0 5.64l2.82 -2.82"
-							transform="rotate(-45 12 12)"
-						/>
-					</svg>
-				</button>
-			</form>
-		{:else}
-			<form on:submit|preventDefault={() => handleDeploySubmit(false)}>
-				<button
-					type="submit"
-					disabled={$disabledButton}
-					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-success"
-					data-tip={$appSession.isAdmin
-						? 'Deploy'
-						: 'You do not have permission to deploy application.'}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<path d="M7 4v16l13 -8z" />
-					</svg>
-				</button>
-			</form>
-		{/if}
 
 		<div class="border border-coolgray-500 h-8" />
+	{/if}
+
+	{#if $status.application.isExited}
 		<a
-			href={!$disabledButton ? `/applications/${id}` : null}
+			id="applicationerror"
+			href={$isDeploymentEnabled ? `/applications/${id}/logs` : null}
+			class="icons bg-transparent text-sm flex items-center text-error"
 			sveltekit:prefetch
-			class="hover:text-yellow-500 rounded"
-			class:text-yellow-500={$page.url.pathname === `/applications/${id}`}
-			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}`}
 		>
-			<button
+			<svg
-				disabled={$disabledButton}
+				xmlns="http://www.w3.org/2000/svg"
-				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
+				class="w-6 h-6"
-				data-tip="Configurations"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentcolor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
 			>
-				<svg
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					xmlns="http://www.w3.org/2000/svg"
+				<path
-					class="h-6 w-6"
+					d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
-					viewBox="0 0 24 24"
+				/>
-					stroke-width="1.5"
+				<line x1="12" y1="8" x2="12" y2="12" />
-					stroke="currentColor"
+				<line x1="12" y1="16" x2="12.01" y2="16" />
-					fill="none"
+			</svg>
-					stroke-linecap="round"
+		</a>
-					stroke-linejoin="round"
+		<Tooltip triggeredBy="#applicationerror">Application exited with an error!</Tooltip>
-				>
+	{/if}
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	{#if $status.application.initialLoading}
-					<rect x="4" y="8" width="4" height="4" />
+		<button
-					<line x1="6" y1="4" x2="6" y2="8" />
+			class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
-					<line x1="6" y1="12" x2="6" y2="20" />
-					<rect x="10" y="14" width="4" height="4" />
-					<line x1="12" y1="4" x2="12" y2="14" />
-					<line x1="12" y1="18" x2="12" y2="20" />
-					<rect x="16" y="5" width="4" height="4" />
-					<line x1="18" y1="4" x2="18" y2="5" />
-					<line x1="18" y1="9" x2="18" y2="20" />
-				</svg></button
-			></a
 		>
-		<a
+			<svg
-			href={!$disabledButton ? `/applications/${id}/secrets` : null}
+				xmlns="http://www.w3.org/2000/svg"
-			sveltekit:prefetch
+				class="h-6 w-6"
-			class="hover:text-pink-500 rounded"
+				viewBox="0 0 24 24"
-			class:text-pink-500={$page.url.pathname === `/applications/${id}/secrets`}
+				stroke-width="1.5"
-			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/secrets`}
+				stroke="currentColor"
-		>
+				fill="none"
-			<button
+				stroke-linecap="round"
-				disabled={$disabledButton}
+				stroke-linejoin="round"
-				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
-				data-tip="Secrets"
 			>
-				<svg
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					xmlns="http://www.w3.org/2000/svg"
+				<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
-					class="w-6 h-6"
+				<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
-					viewBox="0 0 24 24"
+				<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
-					stroke-width="1.5"
+				<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
-					stroke="currentColor"
+				<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
-					fill="none"
+				<line x1="11" y1="19.94" x2="11" y2="19.95" />
-					stroke-linecap="round"
+			</svg>
-					stroke-linejoin="round"
+		</button>
-				>
+	{:else if $status.application.isRunning}
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+		<button
-					<path
+			id="stop"
-						d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
+			on:click={stopApplication}
-					/>
+			type="submit"
-					<circle cx="12" cy="11" r="1" />
+			disabled={!$isDeploymentEnabled}
-					<line x1="12" y1="12" x2="12" y2="14.5" />
+			class="icons bg-transparent text-sm flex items-center space-x-2 text-error"
-				</svg></button
-			></a
 		>
-		<a
+			<svg
-			href={!$disabledButton ? `/applications/${id}/storages` : null}
+				xmlns="http://www.w3.org/2000/svg"
-			sveltekit:prefetch
+				class="w-6 h-6"
-			class="hover:text-pink-500 rounded"
+				viewBox="0 0 24 24"
-			class:text-pink-500={$page.url.pathname === `/applications/${id}/storages`}
+				stroke-width="1.5"
-			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/storages`}
+				stroke="currentColor"
-		>
+				fill="none"
-			<button
+				stroke-linecap="round"
-				disabled={$disabledButton}
+				stroke-linejoin="round"
-				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
-				data-tip="Persistent Storages"
 			>
-				<svg
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					xmlns="http://www.w3.org/2000/svg"
+				<rect x="6" y="5" width="4" height="14" rx="1" />
-					class="w-6 h-6"
+				<rect x="14" y="5" width="4" height="14" rx="1" />
-					viewBox="0 0 24 24"
+			</svg>
-					stroke-width="1.5"
+		</button>
-					stroke="currentColor"
+		<Tooltip triggeredBy="#stop">Stop</Tooltip>
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<ellipse cx="12" cy="6" rx="8" ry="3" />
-					<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
-					<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
-				</svg>
-			</button></a
-		>
-		{#if !application.settings.isBot}
-			<a
-				href={!$disabledButton ? `/applications/${id}/previews` : null}
-				sveltekit:prefetch
-				class="hover:text-orange-500 rounded"
-				class:text-orange-500={$page.url.pathname === `/applications/${id}/previews`}
-				class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/previews`}
-			>
-				<button
-					disabled={$disabledButton}
-					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
-					data-tip="Previews"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-6 h-6"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						fill="none"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					>
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<circle cx="7" cy="18" r="2" />
-						<circle cx="7" cy="6" r="2" />
-						<circle cx="17" cy="12" r="2" />
-						<line x1="7" y1="8" x2="7" y2="16" />
-						<path d="M7 8a4 4 0 0 0 4 4h4" />
-					</svg></button
-				></a
-			>
-		{/if}
-		<div class="border border-coolgray-500 h-8" />
-		<a
-			href={!$disabledButton && $status.application.isRunning ? `/applications/${id}/logs` : null}
-			sveltekit:prefetch
-			class="hover:text-sky-500 rounded"
-			class:text-sky-500={$page.url.pathname === `/applications/${id}/logs`}
-			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs`}
-		>
-			<button
-				disabled={$disabledButton || !$status.application.isRunning}
-				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
-				data-tip={$t('application.logs')}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-					<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
-					<line x1="3" y1="6" x2="3" y2="19" />
-					<line x1="12" y1="6" x2="12" y2="19" />
-					<line x1="21" y1="6" x2="21" y2="19" />
-				</svg>
-			</button></a
-		>
-		<a
-			href={!$disabledButton ? `/applications/${id}/logs/build` : null}
-			sveltekit:prefetch
-			class="hover:text-red-500 rounded"
-			class:text-red-500={$page.url.pathname === `/applications/${id}/logs/build`}
-			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs/build`}
-		>
-			<button
-				disabled={$disabledButton}
-				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
-				data-tip="Build Logs"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					fill="none"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-					<circle cx="19" cy="13" r="2" />
-					<circle cx="4" cy="17" r="2" />
-					<circle cx="13" cy="17" r="2" />
-					<line x1="13" y1="19" x2="4" y2="19" />
-					<line x1="4" y1="15" x2="13" y2="15" />
-					<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
-					<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
-					<path d="M19 11v-7l-6 7" />
-				</svg>
-			</button></a
-		>
-		<div class="border border-coolgray-500 h-8" />
 
 		<button
-			on:click={() => deleteApplication(application.name)}
+			id="restart"
+			on:click={restartApplication}
+			type="submit"
+			disabled={!$isDeploymentEnabled}
+			class="icons bg-transparent text-sm flex items-center space-x-2"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
+				<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
+			</svg>
+		</button>
+		<Tooltip triggeredBy="#restart">Restart (useful to change secrets)</Tooltip>
+
+		<form on:submit|preventDefault={() => handleDeploySubmit(true)}>
+			<button
+				id="forceredeploy"
+				type="submit"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent text-sm flex items-center space-x-2"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="w-6 h-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path
+						d="M16.3 5h.7a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h5l-2.82 -2.82m0 5.64l2.82 -2.82"
+						transform="rotate(-45 12 12)"
+					/>
+				</svg>
+			</button>
+			<Tooltip triggeredBy="#forceredeploy">Force redeploy (without cache)</Tooltip>
+		</form>
+	{:else}
+		<form on:submit|preventDefault={() => handleDeploySubmit(false)}>
+			<button
+				id="deploy"
+				type="submit"
+				disabled={!$isDeploymentEnabled}
+				class="icons bg-transparent text-sm flex items-center space-x-2 text-success"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="w-6 h-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path d="M7 4v16l13 -8z" />
+				</svg>
+			</button>
+			<Tooltip triggeredBy="#deploy">Deploy</Tooltip>
+		</form>
+	{/if}
+
+	<div class="border border-coolgray-500 h-8" />
+	<a
+		href={$isDeploymentEnabled ? `/applications/${id}` : null}
+		sveltekit:prefetch
+		class="hover:text-yellow-500 rounded"
+		class:text-yellow-500={$page.url.pathname === `/applications/${id}`}
+		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}`}
+	>
+		<button
+			disabled={!$isDeploymentEnabled}
+			id="configurations"
+			class="icons bg-transparent text-sm"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<rect x="4" y="8" width="4" height="4" />
+				<line x1="6" y1="4" x2="6" y2="8" />
+				<line x1="6" y1="12" x2="6" y2="20" />
+				<rect x="10" y="14" width="4" height="4" />
+				<line x1="12" y1="4" x2="12" y2="14" />
+				<line x1="12" y1="18" x2="12" y2="20" />
+				<rect x="16" y="5" width="4" height="4" />
+				<line x1="18" y1="4" x2="18" y2="5" />
+				<line x1="18" y1="9" x2="18" y2="20" />
+			</svg></button
+		></a
+	>
+
+	<Tooltip triggeredBy="#configurations">Configurations</Tooltip>
+	<a
+		href={$isDeploymentEnabled ? `/applications/${id}/secrets` : null}
+		sveltekit:prefetch
+		class="hover:text-pink-500 rounded"
+		class:text-pink-500={$page.url.pathname === `/applications/${id}/secrets`}
+		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/secrets`}
+	>
+		<button id="secrets" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path
+					d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
+				/>
+				<circle cx="12" cy="11" r="1" />
+				<line x1="12" y1="12" x2="12" y2="14.5" />
+			</svg></button
+		></a
+	>
+	<Tooltip triggeredBy="#secrets">Secrets</Tooltip>
+	<a
+		href={$isDeploymentEnabled ? `/applications/${id}/storages` : null}
+		sveltekit:prefetch
+		class="hover:text-pink-500 rounded"
+		class:text-pink-500={$page.url.pathname === `/applications/${id}/storages`}
+		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/storages`}
+	>
+		<button
+			id="persistentstorages"
+			disabled={!$isDeploymentEnabled}
+			class="icons bg-transparent text-sm"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<ellipse cx="12" cy="6" rx="8" ry="3" />
+				<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+				<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+			</svg>
+		</button></a
+	>
+	<Tooltip triggeredBy="#persistentstorages">Persistent Storages</Tooltip>
+	{#if !application.settings.isBot}
+		<a
+			href={$isDeploymentEnabled ? `/applications/${id}/previews` : null}
+			sveltekit:prefetch
+			class="hover:text-orange-500 rounded"
+			class:text-orange-500={$page.url.pathname === `/applications/${id}/previews`}
+			class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/previews`}
+		>
+			<button id="previews" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="w-6 h-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<circle cx="7" cy="18" r="2" />
+					<circle cx="7" cy="6" r="2" />
+					<circle cx="17" cy="12" r="2" />
+					<line x1="7" y1="8" x2="7" y2="16" />
+					<path d="M7 8a4 4 0 0 0 4 4h4" />
+				</svg></button
+			></a
+		>
+		<Tooltip triggeredBy="#previews">Previews</Tooltip>
+	{/if}
+	<div class="border border-coolgray-500 h-8" />
+	<a
+		href={$isDeploymentEnabled && $status.application.isRunning ? `/applications/${id}/logs` : null}
+		sveltekit:prefetch
+		class="hover:text-sky-500 rounded"
+		class:text-sky-500={$page.url.pathname === `/applications/${id}/logs`}
+		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs`}
+	>
+		<button
+			id="applicationlogs"
+			disabled={!$isDeploymentEnabled || !$status.application.isRunning}
+			class="icons bg-transparent text-sm"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+				<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+				<line x1="3" y1="6" x2="3" y2="19" />
+				<line x1="12" y1="6" x2="12" y2="19" />
+				<line x1="21" y1="6" x2="21" y2="19" />
+			</svg>
+		</button></a
+	>
+	<Tooltip triggeredBy="#applicationlogs">Application Logs</Tooltip>
+	<a
+		href={$isDeploymentEnabled ? `/applications/${id}/logs/build` : null}
+		sveltekit:prefetch
+		class="hover:text-red-500 rounded"
+		class:text-red-500={$page.url.pathname === `/applications/${id}/logs/build`}
+		class:bg-coolgray-500={$page.url.pathname === `/applications/${id}/logs/build`}
+	>
+		<button id="buildlogs" disabled={!$isDeploymentEnabled} class="icons bg-transparent text-sm">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<circle cx="19" cy="13" r="2" />
+				<circle cx="4" cy="17" r="2" />
+				<circle cx="13" cy="17" r="2" />
+				<line x1="13" y1="19" x2="4" y2="19" />
+				<line x1="4" y1="15" x2="13" y2="15" />
+				<path d="M8 12v-5h2a3 3 0 0 1 3 3v5" />
+				<path d="M5 15v-2a1 1 0 0 1 1 -1h7" />
+				<path d="M19 11v-7l-6 7" />
+			</svg>
+		</button></a
+	>
+	<Tooltip triggeredBy="#buildlogs">Build Logs</Tooltip>
+	<div class="border border-coolgray-500 h-8" />
+
+	{#if forceDelete}
+		<button
+			id="forcedelete"
+			on:click={() => deleteApplication(application.name, true)}
+			type="submit"
+			disabled={!$appSession.isAdmin}
+			class:bg-red-600={$appSession.isAdmin}
+			class:hover:bg-red-500={$appSession.isAdmin}
+			class="icons bg-transparent text-sm"
+		>
+			Force Delete
+		</button>
+		<Tooltip triggeredBy="#forcedelete">Force Delete</Tooltip>
+	{:else}
+		<button
+			id="delete"
+			on:click={() => deleteApplication(application.name, false)}
 			type="submit"
 			disabled={!$appSession.isAdmin}
 			class:hover:text-red-500={$appSession.isAdmin}
-			class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
+			class="icons bg-transparent text-sm"
-			data-tip={$appSession.isAdmin
-				? $t('application.delete_application')
-				: $t('application.permission_denied_delete_application')}
 		>
 			<DeleteIcon />
 		</button>
+		<Tooltip triggeredBy="#delete">Delete</Tooltip>
 	{/if}
 </nav>
 <slot />

apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte

@@ -95,19 +95,19 @@
 	async function isBranchAlreadyUsed(event: any) {
 		selected.branch = event.detail.value;
 		try {
-			const data = await get(
+			// const data = await get(
-				`/applications/${id}/configuration/repository?repository=${selected.repository}&branch=${selected.branch}`
+			// 	`/applications/${id}/configuration/repository?repository=${selected.repository}&branch=${selected.branch}`
-			);
+			// );
-			if (data.used) {
+			// if (data.used) {
-				const sure = confirm($t('application.configuration.branch_already_in_use'));
+			// 	const sure = confirm($t('application.configuration.branch_already_in_use'));
-				if (sure) {
+			// 	if (sure) {
-					selected.autodeploy = false;
+			// 		selected.autodeploy = false;
-					showSave = true;
+			// 		showSave = true;
-					return true;
+			// 		return true;
-				}
+			// 	}
-				showSave = false;
+			// 	showSave = false;
-				return true;
+			// 	return true;
-			}
+			// }
 			showSave = true;
 		} catch (error) {
 			showSave = false;

apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte

@@ -169,10 +169,6 @@
 			}
 		}
 	}
-	function selectBranch(event: any) {
-		selected.branch = event.detail;
-		isBranchAlreadyUsed();
-	}
 	async function loadBranches(page: number = 1) {
 		let perPage = 100;
 		//@ts-ignore
@@ -199,21 +195,22 @@
 		}
 	}
 
-	async function isBranchAlreadyUsed() {
+	async function isBranchAlreadyUsed(event) {
+		selected.branch = event.detail;
 		try {
-			const data = await get(
+			// const data = await get(
-				`/applications/${id}/configuration/repository?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
+			// 	`/applications/${id}/configuration/repository?repository=${selected.project.path_with_namespace}&branch=${selected.branch.name}`
-			);
+			// );
-			if (data.used) {
+			// if (data.used) {
-				const sure = confirm($t('application.configuration.branch_already_in_use'));
+			// 	const sure = confirm($t('application.configuration.branch_already_in_use'));
-				if (sure) {
+			// 	if (sure) {
-					autodeploy = false;
+			// 		autodeploy = false;
-					showSave = true;
+			// 		showSave = true;
-					return true;
+			// 		return true;
-				}
+			// 	}
-				showSave = false;
+			// 	showSave = false;
-				return true;
+			// 	return true;
-			}
+			// }
 			showSave = true;
 		} catch (error) {
 			return errorNotification(error);
@@ -227,9 +224,7 @@
 		}
 	}
 	async function setWebhook(url: any, webhookToken: any) {
-		const host = dev
+		const host = dev ? getWebhookUrl('gitlab') : `${window.location.origin}/webhooks/gitlab/events`;
-			? getWebhookUrl('gitlab')
-			: `${window.location.origin}/webhooks/gitlab/events`;
 		try {
 			await post(
 				url,
@@ -294,17 +289,15 @@
 			);
 			await post(updateDeployKeyIdUrl, { deployKeyId: id });
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}
 
 		try {
 			await setWebhook(webhookUrl, webhookToken);
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}
 
 		const url = `/applications/${id}/configuration/repository`;
@@ -317,11 +310,11 @@
 				autodeploy,
 				webhookToken
 			});
+			loading.save = false;
 			return await goto(from || `/applications/${id}/configuration/buildpack`);
 		} catch (error) {
-			return errorNotification(error);
-		} finally {
 			loading.save = false;
+			return errorNotification(error);
 		}
 	}
 	async function handleSubmit() {
@@ -396,7 +389,7 @@
 				showIndicator={!loading.branches}
 				isWaiting={loading.branches}
 				isDisabled={loading.branches || !selected.project}
-				on:select={selectBranch}
+				on:select={isBranchAlreadyUsed}
 				on:clear={() => {
 					showSave = false;
 					selected.branch = null;
@@ -425,7 +418,7 @@
 				configuration <a href={`/sources/${application.gitSource.id}`}>here.</a>
 			</div>
 			<button
-				class="w-40 bg-green-600"
+				class="btn btn-sm w-40 bg-green-600"
 				on:click|stopPropagation|preventDefault={() => window.location.reload()}
 			>
 				Try again

apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte

@@ -4,7 +4,6 @@
 	import { page } from '$app/stores';
 
 	import Select from 'svelte-select';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { goto } from '$app/navigation';
 	import { errorNotification } from '$lib/common';
 
@@ -23,7 +22,7 @@
 	async function loadBranches() {
 		try {
 			loading.branches = true;
-
+			publicRepositoryLink = publicRepositoryLink.trim();
 			const protocol = publicRepositoryLink.split(':')[0];
 			const gitUrl = publicRepositoryLink.replace('http://', '').replace('https://', '');
 
@@ -164,7 +163,6 @@
 				<div class="space-y-4">
 					<input
 						placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
-						class="text-xs"
 						bind:value={publicRepositoryLink}
 					/>
 					{#if branchSelectOptions.length > 0}
@@ -193,7 +191,5 @@
 			</form>
 		</div>
 	</div>
-	<Explainer
+	
-		text="Examples:<br><br>https://github.com/coollabsio/nodejs-example<br>https://github.com/coollabsio/nodejs-example/tree/main<br>https://gitlab.com/aleveha/fastify-example<br>https://gitlab.com/aleveha/fastify-example/-/tree/master<br><br>Only works with Github.com and Gitlab.com."
-	/>
 </div>

apps/ui/src/routes/applications/[id]/configuration/database.svelte

@@ -0,0 +1,162 @@
+<script context="module" lang="ts">
+	import type { Load } from '@sveltejs/kit';
+	export const load: Load = async () => {
+		try {
+			const response = await get(`/databases`);
+			return {
+				props: {
+					...response
+				}
+			};
+		} catch (error: any) {
+			return {
+				status: 500,
+				error: new Error(error)
+			};
+		}
+	};
+</script>
+
+<script lang="ts">
+	export let databases: any = [];
+	import { get, post } from '$lib/api';
+	import { t } from '$lib/translations';
+	import { appSession } from '$lib/store';
+	import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
+	import { errorNotification } from '$lib/common';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+
+	const from = $page.url.searchParams.get('from');
+
+	let remoteDatabase = {
+		name: null,
+		type: null,
+		host: null,
+		port: null,
+		user: null,
+		password: null,
+		database: null
+	};
+
+	const ownDatabases = databases.filter((database: any) => {
+		if (database.teams[0].id === $appSession.teamId) {
+			return database;
+		}
+	});
+	const otherDatabases = databases.filter((database: any) => {
+		if (database.teams[0].id !== $appSession.teamId) {
+			return database;
+		}
+	});
+
+	async function addCoolifyDatabase(database: any) {
+		try {
+			await post(`/applications/${$page.params.id}/configuration/database`, {
+				databaseId: database.id,
+				type: database.type
+			});
+			return window.location.assign(from || `/applications/${$page.params.id}/`);
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl tracking-tight">Select a Database</div>
+</div>
+
+<div class="flex-col justify-center mt-10 pb-12 sm:pb-16">
+	{#if !databases || ownDatabases.length === 0}
+		<div class="flex-col">
+			<div class="text-center text-xl font-bold">{$t('database.no_databases_found')}</div>
+		</div>
+	{/if}
+	{#if ownDatabases.length > 0 || otherDatabases.length > 0}
+		<div class="flex flex-col">
+			<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+				{#each ownDatabases as database}
+					<button on:click={() => addCoolifyDatabase(database)} class="p-2 no-underline">
+						<div class="box-selection group relative hover:bg-purple-600">
+							<DatabaseIcons type={database.type} isAbsolute={true} />
+							<div class="truncate text-center text-xl font-bold">
+								{database.name}
+							</div>
+							{#if $appSession.teamId === '0' && otherDatabases.length > 0}
+								<div class="truncate text-center">{database.teams[0].name}</div>
+							{/if}
+							{#if database.destinationDocker?.name}
+								<div class="truncate text-center">{database.destinationDocker.name}</div>
+							{/if}
+							{#if !database.type}
+								<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+									{$t('application.configuration.configuration_missing')}
+								</div>
+							{/if}
+						</div>
+					</button>
+				{/each}
+			</div>
+			{#if otherDatabases.length > 0 && $appSession.teamId === '0'}
+				<div class="px-6 pb-5 pt-10 text-2xl font-bold text-center">Other Databases</div>
+				<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row">
+					{#each otherDatabases as database}
+						<a href="/databases/{database.id}" class="p-2 no-underline">
+							<div class="box-selection group relative hover:bg-purple-600">
+								<DatabaseIcons type={database.type} isAbsolute={true} />
+								<div class="truncate text-center text-xl font-bold">
+									{database.name}
+								</div>
+								{#if $appSession.teamId === '0'}
+									<div class="truncate text-center">{database.teams[0].name}</div>
+								{/if}
+								{#if !database.type}
+									<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
+										Configuration missing
+									</div>
+								{:else}
+									<div class="text-center truncate">{database.type}</div>
+								{/if}
+							</div>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="mx-auto max-w-4xl p-6">
+		<div class="grid grid-flow-row gap-2 px-10">
+			<div class="font-bold text-xl tracking-tight">Connect a Hosted / Remote Database</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="name" class="text-base font-bold text-stone-100">Name</label>
+				<input name="name" id="name" required bind:value={remoteDatabase.name} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="type" class="text-base font-bold text-stone-100">Type</label>
+				<input name="type" id="type" required bind:value={remoteDatabase.type} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="host" class="text-base font-bold text-stone-100">Host</label>
+				<input name="host" id="host" required bind:value={remoteDatabase.host} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="port" class="text-base font-bold text-stone-100">Port</label>
+				<input name="port" id="port" required bind:value={remoteDatabase.port} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="user" class="text-base font-bold text-stone-100">User</label>
+				<input name="user" id="user" required bind:value={remoteDatabase.user} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="password" class="text-base font-bold text-stone-100">Password</label>
+				<input name="password" id="password" required bind:value={remoteDatabase.password} />
+			</div>
+			<div class="mt-2 grid grid-cols-2 items-center px-4">
+				<label for="database" class="text-base font-bold text-stone-100">Database Name</label>
+				<input name="database" id="database" required bind:value={remoteDatabase.database} />
+			</div>
+		</div>
+	</div>
+</div>

apps/ui/src/routes/applications/[id]/configuration/source.svelte

@@ -32,7 +32,7 @@
 	import { errorNotification } from '$lib/common';
 	import { appSession } from '$lib/store';
 	import PublicRepository from './_PublicRepository.svelte';
-import Explainer from '$lib/components/Explainer.svelte';
+	import DocLink from '$lib/components/DocLink.svelte';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -192,7 +192,9 @@ import Explainer from '$lib/components/Explainer.svelte';
 			</div>
 		{/if}
 	</div>
-	<div class="title py-4">Public Repository</div>
+	<div class="flex items-center">
-
+		<div class="title py-4">Public Repository</div>
-		<PublicRepository />
+		<DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" />
+	</div>
+	<PublicRepository />
 </div>

apps/ui/src/routes/applications/[id]/index.svelte

@@ -31,15 +31,24 @@
 	import { page } from '$app/stores';
 	import { onDestroy, onMount } from 'svelte';
 	import Select from 'svelte-select';
-
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { get, post } from '$lib/api';
 	import cuid from 'cuid';
-	import { browser } from '$app/env';
+	import {
-	import { addToast, appSession, disabledButton, setLocation, status } from '$lib/store';
+		addToast,
+		appSession,
+		checkIfDeploymentEnabledApplications,
+		setLocation,
+		status,
+		isDeploymentEnabled,
+		features
+	} from '$lib/store';
 	import { t } from '$lib/translations';
 	import { errorNotification, getDomain, notNodeDeployments, staticDeployments } from '$lib/common';
-	import Setting from './_Setting.svelte';
+	import Setting from '$lib/components/Setting.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
+	import { goto } from '$app/navigation';
+
 	const { id } = $page.params;
 
 	$: isDisabled =
@@ -63,7 +72,9 @@
 	let dualCerts = application.settings.dualCerts;
 	let autodeploy = application.settings.autodeploy;
 	let isBot = application.settings.isBot;
+	let isDBBranching = application.settings.isDBBranching;
 
+	let baseDatabaseBranch: any = application?.connectedDatabase?.hostedDatabaseDBName || null;
 	let nonWWWDomain = application.fqdn && getDomain(application.fqdn).replace(/^www\./, '');
 	let isNonWWWDomainOK = false;
 	let isWWWDomainOK = false;
@@ -161,6 +172,9 @@
 			application.settings.isBot = isBot;
 			setLocation(application, settings);
 		}
+		if (name === 'isDBBranching') {
+			isDBBranching = !isDBBranching;
+		}
 		try {
 			await post(`/applications/${id}/settings`, {
 				previews,
@@ -168,6 +182,7 @@
 				dualCerts,
 				isBot,
 				autodeploy,
+				isDBBranching,
 				branch: application.branch,
 				projectId: application.projectId
 			});
@@ -191,14 +206,19 @@
 			if (name === 'isBot') {
 				isBot = !isBot;
 			}
+			if (name === 'isDBBranching') {
+				isDBBranching = !isDBBranching;
+			}
 			return errorNotification(error);
+		} finally {
+			$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
 		}
 	}
 	async function handleSubmit() {
-		if (loading || (!application.fqdn && !isBot)) return;
+		if (loading) return;
 		loading = true;
 		try {
-			nonWWWDomain = application.fqdn && getDomain(application.fqdn).replace(/^www\./, '');
+			nonWWWDomain = application.fqdn != null && getDomain(application.fqdn).replace(/^www\./, '');
 			if (application.deploymentType)
 				application.deploymentType = application.deploymentType.toLowerCase();
 			!isBot &&
@@ -208,16 +228,17 @@
 					dualCerts,
 					exposePort: application.exposePort
 				}));
-			await post(`/applications/${id}`, { ...application });
+			await post(`/applications/${id}`, { ...application, baseDatabaseBranch });
 			setLocation(application, settings);
-			$disabledButton = false;
+			$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
+
 			forceSave = false;
+
 			addToast({
 				message: 'Configuration saved.',
 				type: 'success'
 			});
 		} catch (error) {
-			console.log(error);
 			//@ts-ignore
 			if (error?.message.startsWith($t('application.dns_not_set_partial_error'))) {
 				forceSave = true;
@@ -281,6 +302,7 @@
 	</div>
 	{#if application.gitSource?.htmlUrl && application.repository && application.branch}
 		<a
+			id="git"
 			href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
 			target="_blank"
 			class="w-10"
@@ -321,6 +343,7 @@
 				</svg>
 			{/if}
 		</a>
+		<Tooltip triggeredBy="#git">Open on Git</Tooltip>
 	{/if}
 </div>
 
@@ -426,7 +449,7 @@
 					>
 				{/if}
 			</div>
-			<div class="grid grid-cols-2 items-center pb-8">
+			<div class="grid grid-cols-2 items-center">
 				<label for="destination" class="text-base font-bold text-stone-100"
 					>{$t('application.destination')}</label
 				>
@@ -440,10 +463,15 @@
 				</div>
 			</div>
 			{#if application.buildCommand || application.buildPack === 'rust' || application.buildPack === 'laravel'}
-				<div class="grid grid-cols-2 items-center pb-8">
+				<div class="grid grid-cols-2 items-center">
 					<label for="baseBuildImage" class="text-base font-bold text-stone-100"
-						>{$t('application.base_build_image')}</label
+						>{$t('application.base_build_image')}
-					>
+						<Explainer
+							explanation={application.buildPack === 'laravel'
+								? 'For building frontend assets with webpack.'
+								: 'Image that will be used during the build process.'}
+						/>
+					</label>
 
 					<div class="custom-select-wrapper">
 						<Select
@@ -457,17 +485,13 @@
 							isClearable={false}
 						/>
 					</div>
-					{#if application.buildPack === 'laravel'}
-						<Explainer text="For building frontend assets with webpack." />
-					{:else}
-						<Explainer text={$t('application.base_build_image_explainer')} />
-					{/if}
 				</div>
 			{/if}
 			{#if application.buildPack !== 'docker'}
 				<div class="grid grid-cols-2 items-center">
 					<label for="baseImage" class="text-base font-bold text-stone-100"
-						>{$t('application.base_image')}</label
+						>{$t('application.base_image')}
+						<Explainer explanation={'Image that will be used for the deployment.'} /></label
 					>
 					<div class="custom-select-wrapper">
 						<Select
@@ -481,13 +505,15 @@
 							isClearable={false}
 						/>
 					</div>
-					<Explainer text={$t('application.base_image_explainer')} />
 				</div>
 			{/if}
 			{#if application.buildPack !== 'docker' && (application.buildPack === 'nextjs' || application.buildPack === 'nuxtjs')}
 				<div class="grid grid-cols-2 items-center pb-8">
 					<label for="deploymentType" class="text-base font-bold text-stone-100"
-						>Deployment Type</label
+						>Deployment Type
+						<Explainer
+							explanation={"Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."}
+						/></label
 					>
 					<div class="custom-select-wrapper">
 						<Select
@@ -501,11 +527,48 @@
 							isClearable={false}
 						/>
 					</div>
-					<Explainer
-						text="Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."
-					/>
 				</div>
 			{/if}
+			{#if $features.beta}
+				{#if !application.settings.isBot && !application.settings.isPublicRepository}
+					<div class="grid grid-cols-2 items-center">
+						<Setting
+							id="isDBBranching"
+							isCenter={false}
+							bind:setting={isDBBranching}
+							on:click={() => changeSettings('isDBBranching')}
+							title="Enable DB Branching"
+							description="Enable DB Branching"
+						/>
+					</div>
+					{#if isDBBranching}
+						<button
+							on:click|stopPropagation|preventDefault={() =>
+								goto(`/applications/${id}/configuration/database`)}
+							class="btn btn-sm">Configure Connected Database</button
+						>
+						{#if application.connectedDatabase}
+							<div class="grid grid-cols-2 items-center">
+								<label for="baseImage" class="text-base font-bold text-stone-100"
+									>Base Database
+									<Explainer
+										explanation={'The name of the database that will be used as base when branching.'}
+									/></label
+								>
+								<input
+									name="baseDatabaseBranch"
+									required
+									id="baseDatabaseBranch"
+									bind:value={baseDatabaseBranch}
+								/>
+							</div>
+							<div class="text-center bg-green-600 rounded">
+								Connected to {application.connectedDatabase.databaseId}
+							</div>
+						{/if}
+					{/if}
+				{/if}
+			{/if}
 		</div>
 		<div class="flex space-x-1 py-5 font-bold">
 			<div class="title">{$t('application.application')}</div>
@@ -513,35 +576,41 @@
 		<div class="grid grid-flow-row gap-2 px-10">
 			<div class="grid grid-cols-2 items-center">
 				<Setting
+					id="isBot"
 					isCenter={false}
 					bind:setting={isBot}
 					on:click={() => changeSettings('isBot')}
 					title="Is your application a bot?"
-					description="You can deploy applications without domains. <br>You can also make them to listen on <span class='text-green-500 font-bold'>IP:EXPOSEDPORT</span> as well.<br></Setting><br>Useful to host <span class='text-green-500 font-bold'>Twitch bots, regular jobs, or anything that does not require an incoming connection.</span>"
+					description="You can deploy applications without domains or make them to listen on the <span class='text-settings font-bold'>Exposed Port</span>.<br></Setting><br>Useful to host <span class='text-settings font-bold'>Twitch bots, regular jobs, or anything that does not require an incoming HTTP connection.</span>"
 					disabled={$status.application.isRunning}
 				/>
 			</div>
+			<div class="grid grid-cols-2 items-center">
+				<Setting
+					id="dualCerts"
+					dataTooltip={$t('forms.must_be_stopped_to_modify')}
+					disabled={$status.application.isRunning}
+					isCenter={false}
+					bind:setting={dualCerts}
+					title={$t('application.ssl_www_and_non_www')}
+					description="It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
+					on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
+				/>
+			</div>
 			{#if !isBot}
-				<div class="grid grid-cols-2">
+				<div class="grid grid-cols-2 items-center pb-8">
-					<div class="flex-col">
+					<label for="fqdn" class="text-base font-bold text-stone-100"
-						<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
+						>{$t('application.url_fqdn')}
-							>{$t('application.url_fqdn')}</label
+						<Explainer
-						>
+							explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings font-bold'>www</span>, the application will be redirected (302) from non-www and vice versa.<br><br>To modify the domain, you must first stop the application.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
-						{#if browser && window.location.hostname === 'demo.coolify.io'}
+						/>
-							<Explainer
+					</label>
-								text="<span class='text-white font-bold'>You can use the predefined random url name or enter your own domain name.</span>"
-							/>
-						{/if}
-						<Explainer text={$t('application.https_explainer')} />
-					</div>
 					<div>
 						<input
 							readonly={isDisabled}
 							disabled={isDisabled}
-							bind:this={domainEl}
 							name="fqdn"
 							id="fqdn"
-							required
 							bind:value={application.fqdn}
 							pattern="^https?://([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{'{'}2,{'}'}$"
 							placeholder="eg: https://coollabs.io"
@@ -582,17 +651,6 @@
 						{/if}
 					</div>
 				</div>
-				<div class="grid grid-cols-2 items-center pb-8">
-					<Setting
-						dataTooltip={$t('forms.must_be_stopped_to_modify')}
-						disabled={$status.application.isRunning}
-						isCenter={false}
-						bind:setting={dualCerts}
-						title={$t('application.ssl_www_and_non_www')}
-						description={$t('application.ssl_explainer')}
-						on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
-					/>
-				</div>
 			{/if}
 			{#if application.buildPack === 'python'}
 				<div class="grid grid-cols-2 items-center">
@@ -645,7 +703,10 @@
 			{/if}
 			{#if !staticDeployments.includes(application.buildPack)}
 				<div class="grid grid-cols-2 items-center">
-					<label for="port" class="text-base font-bold text-stone-100">{$t('forms.port')}</label>
+					<label for="port" class="text-base font-bold text-stone-100"
+						>{$t('forms.port')}
+						<Explainer explanation={'The port your application listens on.'} /></label
+					>
 					<input
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
@@ -654,11 +715,14 @@
 						bind:value={application.port}
 						placeholder="{$t('forms.default')}: 'python' ? '8000' : '3000'"
 					/>
-					<Explainer text={'The port your application listens on.'} />
 				</div>
 			{/if}
-			<div class="grid grid-cols-2 items-center">
+			<div class="grid grid-cols-2 items-center pb-8">
-				<label for="exposePort" class="text-base font-bold text-stone-100">Exposed Port</label>
+				<label for="exposePort" class="text-base font-bold text-stone-100"
+					>Exposed Port <Explainer
+						explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
+					/></label
+				>
 				<input
 					readonly={!$appSession.isAdmin && !$status.application.isRunning}
 					disabled={isDisabled}
@@ -667,12 +731,9 @@
 					bind:value={application.exposePort}
 					placeholder="12345"
 				/>
-				<Explainer
-					text={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
-				/>
 			</div>
 			{#if !notNodeDeployments.includes(application.buildPack)}
-				<div class="grid grid-cols-2 items-center pt-4">
+				<div class="grid grid-cols-2 items-center">
 					<label for="installCommand" class="text-base font-bold text-stone-100"
 						>{$t('application.install_command')}</label
 					>
@@ -698,7 +759,7 @@
 						placeholder="{$t('forms.default')}: yarn build"
 					/>
 				</div>
-				<div class="grid grid-cols-2 items-center">
+				<div class="grid grid-cols-2 items-center pb-8">
 					<label for="startCommand" class="text-base font-bold text-stone-100"
 						>{$t('application.start_command')}</label
 					>
@@ -715,7 +776,9 @@
 			{#if application.buildPack === 'docker'}
 				<div class="grid grid-cols-2 items-center pt-4">
 					<label for="dockerFileLocation" class="text-base font-bold text-stone-100"
-						>Dockerfile Location</label
+						>Dockerfile Location <Explainer
+							explanation={"Should be absolute path, like <span class='text-settings font-bold'>/data/Dockerfile</span> or <span class='text-settings font-bold'>/Dockerfile.</span>"}
+						/></label
 					>
 					<input
 						disabled={isDisabled}
@@ -725,9 +788,6 @@
 						bind:value={application.dockerFileLocation}
 						placeholder="default: /Dockerfile"
 					/>
-					<Explainer
-						text="Should be absolute path, like <span class='text-green-500 font-bold'>/data/Dockerfile</span> or <span class='text-green-500 font-bold'>/Dockerfile.</span>"
-					/>
 				</div>
 			{/if}
 			{#if application.buildPack === 'deno'}
@@ -743,7 +803,11 @@
 					/>
 				</div>
 				<div class="grid grid-cols-2 items-center">
-					<label for="denoOptions" class="text-base font-bold text-stone-100">Arguments</label>
+					<label for="denoOptions" class="text-base font-bold text-stone-100"
+						>Arguments <Explainer
+							explanation={"List of arguments to pass to <span class='text-settings font-bold'>deno run</span> command. Could include permissions, configurations files, etc."}
+						/></label
+					>
 					<input
 						disabled={isDisabled}
 						readonly={!$appSession.isAdmin}
@@ -752,18 +816,17 @@
 						bind:value={application.denoOptions}
 						placeholder="eg: --allow-net --allow-hrtime --config path/to/file.json"
 					/>
-					<Explainer
-						text="List of arguments to pass to <span class='text-green-500 font-bold'>deno run</span> command. Could include permissions, configurations files, etc."
-					/>
 				</div>
 			{/if}
 			{#if application.buildPack !== 'laravel' && application.buildPack !== 'heroku'}
 				<div class="grid grid-cols-2 items-center">
 					<div class="flex-col">
 						<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100"
-							>{$t('forms.base_directory')}</label
+							>{$t('forms.base_directory')}
+							<Explainer
+								explanation={"Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings font-bold'>monorepos</span>."}
+							/></label
 						>
-						<Explainer text={$t('application.directory_to_use_explainer')} />
 					</div>
 					<input
 						disabled={isDisabled}
@@ -779,9 +842,11 @@
 				<div class="grid grid-cols-2 items-center">
 					<div class="flex-col">
 						<label for="publishDirectory" class="pt-2 text-base font-bold text-stone-100"
-							>{$t('forms.publish_directory')}</label
+							>{$t('forms.publish_directory')}
+							<Explainer
+								explanation={"Directory containing all the assets for deployment. <br> For example: <span class='text-settings font-bold'>dist</span>,<span class='text-settings font-bold'>_site</span> or <span class='text-settings font-bold'>public</span>."}
+							/></label
 						>
-						<Explainer text={$t('application.publish_directory_explainer')} />
 					</div>
 
 					<input
@@ -804,6 +869,7 @@
 		{#if !application.settings.isPublicRepository}
 			<div class="grid grid-cols-2 items-center">
 				<Setting
+					id="autodeploy"
 					isCenter={false}
 					bind:setting={autodeploy}
 					on:click={() => changeSettings('autodeploy')}
@@ -812,9 +878,10 @@
 				/>
 			</div>
 		{/if}
-		{#if !application.settings.isBot}
+		{#if !application.settings.isBot && !application.settings.isPublicRepository}
 			<div class="grid grid-cols-2 items-center">
 				<Setting
+					id="previews"
 					isCenter={false}
 					bind:setting={previews}
 					on:click={() => changeSettings('previews')}
@@ -825,6 +892,7 @@
 		{/if}
 		<div class="grid grid-cols-2 items-center">
 			<Setting
+				id="debug"
 				isCenter={false}
 				bind:setting={debug}
 				on:click={() => changeSettings('debug')}

apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte

@@ -6,14 +6,13 @@
 
 	import { page } from '$app/stores';
 
-	import Loading from '$lib/components/Loading.svelte';
 	import { get, post } from '$lib/api';
 	import { t } from '$lib/translations';
 	import LoadingLogs from '$lib/components/LoadingLogs.svelte';
 	import { errorNotification } from '$lib/common';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	let logs: any = [];
-	let loading = true;
 	let currentStatus: any;
 	let streamInterval: any;
 	let followingBuild: any;
@@ -46,7 +45,6 @@
 			logs = logs.concat(
 				responseLogs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
 			);
-			loading = false;
 			streamInterval = setInterval(async () => {
 				if (status !== 'running' && status !== 'queued') {
 					clearInterval(streamInterval);
@@ -63,13 +61,12 @@
 					logs = logs.concat(
 						data.logs.map((log: any) => ({ ...log, line: cleanAnsiCodes(log.line) }))
 					);
-					dispatch('updateBuildStatus', { status });
+					dispatch('updateBuildStatus', { status, took: data.took });
 				} catch (error) {
 					return errorNotification(error);
 				}
 			}, 1000);
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		}
 	}
@@ -82,7 +79,6 @@
 				applicationId: id
 			});
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		}
 	}
@@ -96,84 +92,82 @@
 	});
 </script>
 
-{#if loading}
+<div class="relative ">
-	<Loading />
+	{#if currentStatus === 'running'}
-{:else}
+		<LoadingLogs />
-	<div class="relative ">
+	{/if}
-		{#if currentStatus === 'running'}
+	{#if currentStatus === 'queued'}
-			<LoadingLogs />
+		<div class="text-center font-bold text-xl">{$t('application.build.queued_waiting_exec')}</div>
-		{/if}
+	{:else}
-		{#if currentStatus === 'queued'}
+		<div class="flex justify-end sticky top-0 p-2 mx-1">
-			<div class="text-center font-bold text-xl">{$t('application.build.queued_waiting_exec')}</div>
+			<button
-		{:else}
+				id="follow"
-			<div class="flex justify-end sticky top-0 p-2 mx-1">
+				on:click={followBuild}
+				class="bg-transparent btn btn-sm btn-linkhover:text-green-500 hover:bg-coolgray-500"
+				class:text-green-500={followingBuild}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="w-6 h-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<circle cx="12" cy="12" r="9" />
+					<line x1="8" y1="12" x2="12" y2="16" />
+					<line x1="12" y1="8" x2="12" y2="16" />
+					<line x1="16" y1="12" x2="12" y2="16" />
+				</svg>
+			</button>
+			<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
+			{#if currentStatus === 'running'}
 				<button
-					on:click={followBuild}
+					id="cancel"
-					class="bg-transparent btn btn-sm btn-link tooltip tooltip-primary tooltip-bottom hover:text-green-500 hover:bg-coolgray-500"
+					on:click={cancelBuild}
-					data-tip="Follow logs"
+					class:animation-spin={cancelInprogress}
-					class:text-green-500={followingBuild}
+					class="bg-transparent btn btn-sm btn-link hover:text-red-500 hover:bg-coolgray-500"
 				>
-					<svg
+					{#if cancelInprogress}
-						xmlns="http://www.w3.org/2000/svg"
+						Cancelling...
-						class="w-6 h-6"
+					{:else}
-						viewBox="0 0 24 24"
+						<svg
-						stroke-width="1.5"
+							xmlns="http://www.w3.org/2000/svg"
-						stroke="currentColor"
+							class="w-6 h-6"
-						fill="none"
+							viewBox="0 0 24 24"
-						stroke-linecap="round"
+							stroke-width="1.5"
-						stroke-linejoin="round"
+							stroke="currentColor"
-					>
+							fill="none"
-						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							stroke-linecap="round"
-						<circle cx="12" cy="12" r="9" />
+							stroke-linejoin="round"
-						<line x1="8" y1="12" x2="12" y2="16" />
+						>
-						<line x1="12" y1="8" x2="12" y2="16" />
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<line x1="16" y1="12" x2="12" y2="16" />
+							<circle cx="12" cy="12" r="9" />
-					</svg>
+							<path d="M10 10l4 4m0 -4l-4 4" />
+						</svg>
+					{/if}
 				</button>
-				{#if currentStatus === 'running'}
+				<Tooltip triggeredBy="#cancel">Cancel build</Tooltip>
-					<button
-						on:click={cancelBuild}
-						class:animation-spin={cancelInprogress}
-						class="bg-transparent btn btn-sm btn-link hover:text-red-500 hover:bg-coolgray-500 tooltip tooltip-primary tooltip-bottom"
-						data-tip="Cancel build"
-					>
-						{#if cancelInprogress}
-							Cancelling...
-						{:else}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="w-6 h-6"
-								viewBox="0 0 24 24"
-								stroke-width="1.5"
-								stroke="currentColor"
-								fill="none"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							>
-								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-								<circle cx="12" cy="12" r="9" />
-								<path d="M10 10l4 4m0 -4l-4 4" />
-							</svg>
-						{/if}
-					</button>
-				{/if}
-			</div>
-			{#if logs.length > 0}
-				<div
-					class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-					bind:this={logsEl}
-				>
-					{#each logs as log}
-						<div>{log.line + '\n'}</div>
-					{/each}
-				</div>
-			{:else}
-				<div
-					class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
-				>
-					No logs found.
-				</div>
 			{/if}
+		</div>
+		{#if logs.length > 0}
+			<div
+				class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
+				bind:this={logsEl}
+			>
+				{#each logs as log}
+					<div>{log.line + '\n'}</div>
+				{/each}
+			</div>
+		{:else}
+			<div
+				class="font-mono leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"
+			>
+				No logs found.
+			</div>
 		{/if}
-	</div>
+	{/if}
-{/if}
+</div>

apps/ui/src/routes/applications/[id]/logs/build.svelte

@@ -28,17 +28,20 @@
 	import { get } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { changeQueryParams, dateOptions, errorNotification } from '$lib/common';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	let buildId: any;
 
 	let skip = 0;
 	let noMoreBuilds = buildCount < 5 || buildCount <= skip;
+
+	let buildTook = 0;
 	const { id } = $page.params;
 	let preselectedBuildId = $page.url.searchParams.get('buildId');
 	if (preselectedBuildId) buildId = preselectedBuildId;
 
 	async function updateBuildStatus({ detail }: { detail: any }) {
-		const { status } = detail;
+		const { status, took } = detail;
 		if (status !== 'running') {
 			try {
 				const data = await get(`/applications/${id}/logs/build?buildId=${buildId}`);
@@ -58,6 +61,7 @@
 				if (build.id === buildId) build.status = status;
 				return build;
 			});
+			buildTook = took;
 		}
 	}
 	async function loadMoreBuilds() {
@@ -137,20 +141,18 @@
 		<div class="top-4 md:sticky">
 			{#each builds as build, index (build.id)}
 				<div
-					data-tip={new Intl.DateTimeFormat('default', dateOptions).format(
+					id={`building-${build.id}`}
-						new Date(build.createdAt)
-					) + `\n${build.status}`}
 					on:click={() => loadBuild(build.id)}
 					class:rounded-tr={index === 0}
 					class:rounded-br={index === builds.length - 1}
-					class="tooltip tooltip-primary tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
+					class="flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
 					class:bg-coolgray-400={buildId === build.id}
 					class:border-red-500={build.status === 'failed'}
 					class:border-orange-500={build.status === 'canceled'}
 					class:border-green-500={build.status === 'success'}
 					class:border-yellow-500={build.status === 'running'}
 				>
-					<div class="flex-col px-2">
+					<div class="flex-col px-2 text-center min-w-[10rem]">
 						<div class="text-sm font-bold">
 							{build.branch || application.branch}
 						</div>
@@ -162,6 +164,10 @@
 					<div class="w-48 text-center text-xs">
 						{#if build.status === 'running'}
 							<div class="font-bold">{$t('application.build.running')}</div>
+							<div>
+								Elapsed
+								<span class="font-bold">{buildTook}s</span>
+							</div>
 						{:else if build.status === 'queued'}
 							<div class="font-bold">{$t('application.build.queued')}</div>
 						{:else}
@@ -172,6 +178,10 @@
 						{/if}
 					</div>
 				</div>
+				<Tooltip triggeredBy={`#building-${build.id}`}
+					>{new Intl.DateTimeFormat('default', dateOptions).format(new Date(build.createdAt)) +
+						`\n${build.status}`}</Tooltip
+				>
 			{/each}
 		</div>
 		{#if !noMoreBuilds}

apps/ui/src/routes/applications/[id]/logs/index.svelte

@@ -5,6 +5,7 @@
 	import { errorNotification } from '$lib/common';
 	import LoadingLogs from '$lib/components/LoadingLogs.svelte';
 	import { onMount, onDestroy } from 'svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	let application: any = {};
 	let logsLoading = false;
@@ -38,7 +39,6 @@
 				logs = data.logs;
 			}
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		} finally {
 			logsLoading = false;
@@ -146,9 +146,9 @@
 			{/if}
 			<div class="flex justify-end sticky top-0 p-1 mx-1">
 				<button
+					id="follow"
 					on:click={followBuild}
-					class="bg-transparent btn btn-sm btn-link tooltip tooltip-primary tooltip-bottom"
+					class="bg-transparent btn btn-sm btn-link"
-					data-tip="Follow logs"
 					class:text-green-500={followingLogs}
 				>
 					<svg
@@ -168,6 +168,7 @@
 						<line x1="16" y1="12" x2="12" y2="16" />
 					</svg>
 				</button>
+				<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
 			</div>
 			<div
 				class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"

apps/ui/src/routes/applications/[id]/previews.svelte

@@ -21,13 +21,13 @@
 	import Secret from './_Secret.svelte';
 	import { get, post } from '$lib/api';
 	import { page } from '$app/stores';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
 	import { goto } from '$app/navigation';
 	import { errorNotification, getDomain } from '$lib/common';
 	import { onMount } from 'svelte';
 	import Loading from '$lib/components/Loading.svelte';
 	import { addToast } from '$lib/store';
+	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 
 	const { id } = $page.params;
 
@@ -145,7 +145,7 @@
 {:else}
 	<div class="mx-auto max-w-6xl px-6 pt-4">
 		<div class="flex justify-center py-4 text-center">
-			<Explainer
+			<SimpleExplainer
 				customClass="w-full"
 				text={applicationSecrets.length === 0
 					? "You can add secrets to PR/MR deployments. Please add secrets to the application first. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."
@@ -194,8 +194,9 @@
 						</div>
 					</a>
 					<div class="flex items-center justify-center">
-						<button class="btn btn-sm bg-coollabs hover:bg-coollabs-100" on:click={() => redeploy(container)}
+						<button
-							>{$t('application.preview.redeploy')}</button
+							class="btn btn-sm bg-coollabs hover:bg-coollabs-100"
+							on:click={() => redeploy(container)}>{$t('application.preview.redeploy')}</button
 						>
 					</div>
 					<div class="flex items-center justify-center">

apps/ui/src/routes/applications/[id]/storages.svelte

@@ -24,7 +24,7 @@
 	import { page } from '$app/stores';
 	import Storage from './_Storage.svelte';
 	import { get } from '$lib/api';
-	import Explainer from '$lib/components/Explainer.svelte';
+	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 	import { t } from '$lib/translations';
 
 	const { id } = $page.params;
@@ -87,7 +87,9 @@
 </div>
 
 <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
-	
+	<div class="flex justify-center py-4 text-center">
+		<SimpleExplainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
+	</div>
 	<table class="mx-auto border-separate text-left">
 		<thead>
 			<tr class="h-12">
@@ -107,7 +109,4 @@
 			</tr>
 		</tbody>
 	</table>
-	<div class="flex justify-center py-4 text-center">
-		<Explainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
-	</div>
 </div>

apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte

@@ -209,13 +209,13 @@
 			<div class="grid grid-cols-2 items-center px-10 pb-8">
 				<div>
 					<label for="url" class="text-base font-bold text-stone-100"
-						>{$t('database.connection_string')}</label
+						>{$t('database.connection_string')}
+						{#if !isPublic && database.destinationDocker.remoteEngine}
+							<Explainer
+								explanation="You can only access the database with this URL if your application is deployed to the same Destination."
+							/>
+						{/if}</label
 					>
-					{#if !isPublic && database.destinationDocker.remoteEngine}
-						<Explainer
-							text="You can only access the database with this URL if your application is deployed to the same Destination."
-						/>
-					{/if}
 				</div>
 				<CopyPasswordField
 					textarea={true}
@@ -236,6 +236,7 @@
 	<div class="px-10 pb-10">
 		<div class="grid grid-cols-2 items-center">
 			<Setting
+				id="isPublic"
 				loading={publicLoading}
 				bind:setting={isPublic}
 				on:click={() => changeSettings('isPublic')}
@@ -247,6 +248,7 @@
 		{#if database.type === 'redis'}
 			<div class="grid grid-cols-2 items-center">
 				<Setting
+					id="appendOnly"
 					loading={publicLoading}
 					bind:setting={appendOnly}
 					on:click={() => changeSettings('appendOnly')}

apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte

@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -37,7 +37,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -48,7 +49,6 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
@@ -63,7 +63,7 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.roots_password')}</label
+			>{$t('forms.roots_password')} <Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -74,6 +74,5 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte

@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -23,7 +23,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.roots_password')}</label
+			>{$t('forms.roots_password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -34,6 +35,5 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte

@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -37,7 +37,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -48,7 +49,6 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label>
@@ -63,7 +63,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.roots_password')}</label
+			>{$t('forms.roots_password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -74,6 +75,5 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte

@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -26,7 +26,9 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="rootUser" class="text-base font-bold text-stone-100"
-			>Root (postgres) User Password</label
+			>Postgres User Password <Explainer
+				explanation="Could be changed while the database is running."
+			/></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -37,7 +39,6 @@
 			name="rootUserPassword"
 			bind:value={database.rootUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label>
@@ -52,7 +53,8 @@
 	</div>
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -63,6 +65,5 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte

@@ -2,8 +2,8 @@
 	export let database: any;
 	import { status } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
+	import Explainer from '$lib/components/Explainer.svelte';
 </script>
 
 <div class="flex space-x-1 py-5 font-bold">
@@ -12,7 +12,8 @@
 <div class="space-y-2 px-10">
 	<div class="grid grid-cols-2 items-center">
 		<label for="dbUserPassword" class="text-base font-bold text-stone-100"
-			>{$t('forms.password')}</label
+			>{$t('forms.password')}
+			<Explainer explanation="Could be changed while the database is running." /></label
 		>
 		<CopyPasswordField
 			disabled={!$status.database.isRunning}
@@ -23,6 +24,5 @@
 			name="dbUserPassword"
 			bind:value={database.dbUserPassword}
 		/>
-		<Explainer text="Could be changed while the database is running." />
 	</div>
 </div>

apps/ui/src/routes/databases/[id]/__layout.svelte

@@ -60,48 +60,53 @@
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
 	import { appSession, status, disabledButton } from '$lib/store';
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
-	import Loading from '$lib/components/Loading.svelte';
 	import { onDestroy, onMount } from 'svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 	const { id } = $page.params;
 
-	let loading = false;
 	let statusInterval: any = false;
+	let forceDelete = false;
 
 	$disabledButton = !$appSession.isAdmin;
 
-	async function deleteDatabase() {
+	async function deleteDatabase(force: boolean) {
 		const sure = confirm(`Are you sure you would like to delete '${database.name}'?`);
 		if (sure) {
-			loading = true;
+			$status.database.initialLoading = true;
 			try {
-				await del(`/databases/${database.id}`, { id: database.id });
+				await del(`/databases/${database.id}`, { id: database.id, force });
 				return await goto('/databases');
 			} catch (error) {
 				return errorNotification(error);
 			} finally {
-				loading = false;
+				$status.database.initialLoading = false;
 			}
 		}
 	}
 	async function stopDatabase() {
 		const sure = confirm($t('database.confirm_stop', { name: database.name }));
 		if (sure) {
-			loading = true;
+			$status.database.initialLoading = true;
 			try {
 				await post(`/databases/${database.id}/stop`, {});
-				return window.location.reload();
 			} catch (error) {
 				return errorNotification(error);
+			} finally {
+				$status.database.initialLoading = false;
 			}
 		}
 	}
 	async function startDatabase() {
-		loading = true;
+		$status.database.initialLoading = true;
+		$status.database.loading = true;
 		try {
 			await post(`/databases/${database.id}/start`, {});
-			return window.location.reload();
 		} catch (error) {
 			return errorNotification(error);
+		} finally {
+			$status.database.initialLoading = false;
+			$status.database.loading = false;
+			await getStatus();
 		}
 	}
 	async function getStatus() {
@@ -114,6 +119,9 @@
 	}
 	onDestroy(() => {
 		$status.database.initialLoading = true;
+		$status.database.isRunning = false;
+		$status.database.isExited = false;
+		$status.database.loading = false;
 		clearInterval(statusInterval);
 	});
 	onMount(async () => {
@@ -137,120 +145,37 @@
 
 {#if id !== 'new'}
 	<nav class="nav-side">
-		{#if loading}
+		{#if database.type && database.destinationDockerId && database.version && database.defaultDatabase}
-			<Loading fullscreen cover />
+			{#if $status.database.isExited}
-		{:else}
+				<a
-			{#if database.type && database.destinationDockerId && database.version && database.defaultDatabase}
+					id="exited"
-				{#if $status.database.isExited}
+					href={!$disabledButton ? `/databases/${id}/logs` : null}
-					<a
+					class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error"
-						href={!$disabledButton ? `/databases/${id}/logs` : null}
+					sveltekit:prefetch
-						class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center text-red-500 tooltip-error"
+				>
-						data-tip="Service exited with an error!"
+					<svg
-						sveltekit:prefetch
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-6 h-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentcolor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
 					>
-						<svg
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-							xmlns="http://www.w3.org/2000/svg"
+						<path
-							class="w-6 h-6"
+							d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
-							viewBox="0 0 24 24"
+						/>
-							stroke-width="1.5"
+						<line x1="12" y1="8" x2="12" y2="12" />
-							stroke="currentcolor"
+						<line x1="12" y1="16" x2="12.01" y2="16" />
-							fill="none"
+					</svg>
-							stroke-linecap="round"
+				</a>
-							stroke-linejoin="round"
+				<Tooltip triggeredBy="#exited">{'Service exited with an error!'}</Tooltip>
-						>
-							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-							<path
-								d="M8.7 3h6.6c.3 0 .5 .1 .7 .3l4.7 4.7c.2 .2 .3 .4 .3 .7v6.6c0 .3 -.1 .5 -.3 .7l-4.7 4.7c-.2 .2 -.4 .3 -.7 .3h-6.6c-.3 0 -.5 -.1 -.7 -.3l-4.7 -4.7c-.2 -.2 -.3 -.4 -.3 -.7v-6.6c0 -.3 .1 -.5 .3 -.7l4.7 -4.7c.2 -.2 .4 -.3 .7 -.3z"
-							/>
-							<line x1="12" y1="8" x2="12" y2="12" />
-							<line x1="12" y1="16" x2="12.01" y2="16" />
-						</svg>
-					</a>
-				{/if}
-				{#if $status.database.initialLoading}
-					<button
-						class="icons tooltip-bottom flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-6 w-6"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-							fill="none"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-							<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
-							<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
-							<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
-							<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
-							<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
-							<line x1="11" y1="19.94" x2="11" y2="19.95" />
-						</svg>
-					</button>
-				{:else if $status.database.isRunning}
-					<button
-						on:click={stopDatabase}
-						type="submit"
-						disabled={!$appSession.isAdmin}
-						class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
-						data-tip={$appSession.isAdmin
-							? $t('database.stop_database')
-							: $t('database.permission_denied_stop_database')}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="w-6 h-6"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-							fill="none"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-							<rect x="6" y="5" width="4" height="14" rx="1" />
-							<rect x="14" y="5" width="4" height="14" rx="1" />
-						</svg>
-					</button>
-				{:else}
-					<button
-						on:click={startDatabase}
-						type="submit"
-						disabled={!$appSession.isAdmin}
-						class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
-						data-tip={$appSession.isAdmin
-							? $t('database.start_database')
-							: $t('database.permission_denied_start_database')}
-						><svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="w-6 h-6"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-							fill="none"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-							<path d="M7 4v16l13 -8z" />
-						</svg>
-					</button>
-				{/if}
 			{/if}
-			<div class="border border-stone-700 h-8" />
+			{#if $status.database.initialLoading}
-			<a
-				href="/databases/{id}"
-				sveltekit:prefetch
-				class="hover:text-yellow-500 rounded"
-				class:text-yellow-500={$page.url.pathname === `/databases/${id}`}
-				class:bg-coolgray-500={$page.url.pathname === `/databases/${id}`}
-			>
 				<button
-					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm disabled:text-red-500"
+					class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
-					data-tip={$t('application.configurations')}
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -263,34 +188,25 @@
 						stroke-linejoin="round"
 					>
 						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<rect x="4" y="8" width="4" height="4" />
+						<path d="M9 4.55a8 8 0 0 1 6 14.9m0 -4.45v5h5" />
-						<line x1="6" y1="4" x2="6" y2="8" />
+						<line x1="5.63" y1="7.16" x2="5.63" y2="7.17" />
-						<line x1="6" y1="12" x2="6" y2="20" />
+						<line x1="4.06" y1="11" x2="4.06" y2="11.01" />
-						<rect x="10" y="14" width="4" height="4" />
+						<line x1="4.63" y1="15.1" x2="4.63" y2="15.11" />
-						<line x1="12" y1="4" x2="12" y2="14" />
+						<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
-						<line x1="12" y1="18" x2="12" y2="20" />
+						<line x1="11" y1="19.94" x2="11" y2="19.95" />
-						<rect x="16" y="5" width="4" height="4" />
+					</svg>
-						<line x1="18" y1="4" x2="18" y2="5" />
+				</button>
-						<line x1="18" y1="9" x2="18" y2="20" />
+			{:else if $status.database.isRunning}
-					</svg></button
-				></a
-			>
-			<div class="border border-stone-700 h-8" />
-			<a
-				href={$status.database.isRunning ? `/databases/${id}/logs` : null}
-				sveltekit:prefetch
-				class="hover:text-pink-500 rounded"
-				class:text-pink-500={$page.url.pathname === `/databases/${id}/logs`}
-				class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/logs`}
-			>
 				<button
-					disabled={!$status.database.isRunning}
+					id="stop"
-					class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
+					on:click={stopDatabase}
-					data-tip={$t('database.logs')}
+					type="submit"
+					disabled={!$appSession.isAdmin}
+					class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						class="h-6 w-6"
+						class="w-6 h-6"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
@@ -299,25 +215,120 @@
 						stroke-linejoin="round"
 					>
 						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-						<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+						<rect x="6" y="5" width="4" height="14" rx="1" />
-						<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+						<rect x="14" y="5" width="4" height="14" rx="1" />
-						<line x1="3" y1="6" x2="3" y2="19" />
+					</svg>
-						<line x1="12" y1="6" x2="12" y2="19" />
+				</button>
-						<line x1="21" y1="6" x2="21" y2="19" />
+				<Tooltip triggeredBy="#stop">{'Stop'}</Tooltip>
-					</svg></button
+			{:else}
-				></a
+				<button
-			>
+					id="start"
+					on:click={startDatabase}
+					type="submit"
+					disabled={!$appSession.isAdmin}
+					class="icons bg-transparent text-sm flex items-center space-x-2 text-green-500"
+					><svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="w-6 h-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<path d="M7 4v16l13 -8z" />
+					</svg>
+				</button>
+				<Tooltip triggeredBy="#start">{'Start'}</Tooltip>
+			{/if}
+		{/if}
+		<div class="border border-stone-700 h-8" />
+		<a
+			id="configuration"
+			href="/databases/{id}"
+			sveltekit:prefetch
+			class="hover:text-yellow-500 rounded"
+			class:text-yellow-500={$page.url.pathname === `/databases/${id}`}
+			class:bg-coolgray-500={$page.url.pathname === `/databases/${id}`}
+		>
+			<button class="icons bg-transparent m text-sm disabled:text-red-500">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<rect x="4" y="8" width="4" height="4" />
+					<line x1="6" y1="4" x2="6" y2="8" />
+					<line x1="6" y1="12" x2="6" y2="20" />
+					<rect x="10" y="14" width="4" height="4" />
+					<line x1="12" y1="4" x2="12" y2="14" />
+					<line x1="12" y1="18" x2="12" y2="20" />
+					<rect x="16" y="5" width="4" height="4" />
+					<line x1="18" y1="4" x2="18" y2="5" />
+					<line x1="18" y1="9" x2="18" y2="20" />
+				</svg></button
+			></a
+		>
+		<Tooltip triggeredBy="#configuration">{'Configuration'}</Tooltip>
+		<div class="border border-stone-700 h-8" />
+		<a
+			id="databaselogs"
+			href={$status.database.isRunning ? `/databases/${id}/logs` : null}
+			sveltekit:prefetch
+			class="hover:text-pink-500 rounded"
+			class:text-pink-500={$page.url.pathname === `/databases/${id}/logs`}
+			class:bg-coolgray-500={$page.url.pathname === `/databases/${id}/logs`}
+		>
+			<button disabled={!$status.database.isRunning} class="icons bg-transparent text-sm">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+					<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+					<line x1="3" y1="6" x2="3" y2="19" />
+					<line x1="12" y1="6" x2="12" y2="19" />
+					<line x1="21" y1="6" x2="21" y2="19" />
+				</svg></button
+			></a
+		>
+		<Tooltip triggeredBy="#databaselogs">{'Logs'}</Tooltip>
+		{#if forceDelete}
 			<button
-				on:click={deleteDatabase}
+				on:click={() => deleteDatabase(true)}
 				type="submit"
 				disabled={!$appSession.isAdmin}
 				class:hover:text-red-500={$appSession.isAdmin}
-				class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
+				class="icons bg-transparent text-sm"
-				data-tip={$appSession.isAdmin
+			>
-					? $t('database.delete_database')
+				Force Delete</button
-					: $t('database.permission_denied_delete_database')}><DeleteIcon /></button
+			>{:else}
+			<button
+				id="delete"
+				on:click={() => deleteDatabase(false)}
+				type="submit"
+				disabled={!$appSession.isAdmin}
+				class:hover:text-red-500={$appSession.isAdmin}
+				class="icons bg-transparent text-sm"><DeleteIcon /></button
 			>
 		{/if}
+
+		<Tooltip triggeredBy="#delete">{'Delete'}</Tooltip>
 	</nav>
 {/if}
 <slot />

apps/ui/src/routes/databases/[id]/logs/index.svelte

@@ -6,6 +6,7 @@
 	import { get } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	const { id } = $page.params;
 
@@ -17,9 +18,13 @@
 	let logsEl: any;
 	let position = 0;
 	let loadingLogs = false;
-	let database: any = {};
+	let database = {
+		name: null
+	};
 
 	onMount(async () => {
+		const response = await get(`/databases/${id}`);
+		database = response.database;
 		const { logs: firstLogs } = await get(`/databases/${id}/logs`);
 		logs = firstLogs;
 		loadAllLogs();
@@ -40,7 +45,6 @@
 				logs = data.logs;
 			}
 		} catch (error) {
-			console.log(error);
 			return errorNotification(error);
 		} finally {
 			loadingLogs = false;
@@ -94,29 +98,6 @@
 		</div>
 		<span class="text-xs">{database.name}</span>
 	</div>
-
-	{#if database.fqdn}
-		<a
-			href={database.fqdn}
-			target="_blank"
-			class="icons tooltip-bottom flex items-center bg-transparent text-sm"
-			><svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-6 w-6"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-				<line x1="10" y1="14" x2="20" y2="4" />
-				<polyline points="15 4 20 4 20 9" />
-			</svg></a
-		>
-	{/if}
 </div>
 <div class="flex flex-row justify-center space-x-2 px-10 pt-6">
 	{#if logs.length === 0}
@@ -129,9 +110,9 @@
 			{/if}
 			<div class="flex justify-end sticky top-0 p-1 mx-1">
 				<button
+					id="follow"
 					on:click={followBuild}
-					class="bg-transparent btn btn-sm tooltip tooltip-primary tooltip-bottom"
+					class="bg-transparent btn btn-sm"
-					data-tip="Follow logs"
 					class:text-green-500={followingLogs}
 				>
 					<svg
@@ -151,6 +132,7 @@
 						<line x1="16" y1="12" x2="12" y2="16" />
 					</svg>
 				</button>
+				<Tooltip triggeredBy="#follow">Follow Logs</Tooltip>
 			</div>
 			<div
 				class="font-mono w-full leading-6 text-left text-md tracking-tighter rounded bg-coolgray-200 py-5 px-6 whitespace-pre-wrap break-words overflow-auto max-h-[80vh] -mt-12 overflow-y-scroll scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200"

apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte

@@ -142,8 +142,8 @@
 </script>
 
 <form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
-	<div class="flex space-x-1 pb-5">
+	<div class="flex md:flex-row space-y-2 md:space-y-0 space-x-0 md:space-x-2 flex-col pb-5">
-		<div class="title font-bold">{$t('forms.configuration')}</div>
+		<div class="title">{$t('forms.configuration')}</div>
 		{#if $appSession.isAdmin}
 			<button
 				type="submit"
@@ -162,7 +162,7 @@
 			>
 		{/if}
 	</div>
-	<div class="grid grid-cols-2 items-center px-10 ">
+	<div class="grid lg:grid-cols-2 items-center px-10 ">
 		<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 		<input
 			name="name"
@@ -173,7 +173,7 @@
 		/>
 	</div>
 
-	<div class="grid grid-cols-2 items-center px-10">
+	<div class="grid lg:grid-cols-2 items-center px-10">
 		<label for="engine" class="text-base font-bold text-stone-100">{$t('forms.engine')}</label>
 		<CopyPasswordField
 			id="engine"
@@ -184,7 +184,7 @@
 			value={destination.engine}
 		/>
 	</div>
-	<div class="grid grid-cols-2 items-center px-10">
+	<div class="grid lg:grid-cols-2 items-center px-10">
 		<label for="network" class="text-base font-bold text-stone-100">{$t('forms.network')}</label>
 		<CopyPasswordField
 			id="network"
@@ -196,14 +196,15 @@
 		/>
 	</div>
 	{#if $appSession.teamId === '0'}
-		<div class="grid grid-cols-2 items-center">
+		<div class="grid lg:grid-cols-2 items-center px-10">
 			<Setting
+				id="changeProxySetting"
 				loading={loading.proxy}
 				disabled={cannotDisable}
 				bind:setting={destination.isCoolifyProxyUsed}
 				on:click={changeProxySetting}
 				title={$t('destination.use_coolify_proxy')}
-				description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration. Databases will have their own proxy. <br><br>${
+				description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.${
 					cannotDisable
 						? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
 						: ''

apps/ui/src/routes/destinations/[id]/_NewLocalDocker.svelte

@@ -33,11 +33,7 @@
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 		<div class="flex items-center space-x-2 pb-5">
 			<div class="title font-bold">{$t('forms.configuration')}</div>
-			<button
+			<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
-				type="submit"
-				class="btn btn-sm bg-destinations"
-				class:loading={loading}
-				disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
 						? $t('destination.new.saving_and_configuring_proxy')
@@ -69,12 +65,13 @@
 			/>
 		</div>
 		{#if $appSession.teamId === '0'}
-			<div class="grid grid-cols-2 items-center">
+			<div class="grid grid-cols-2 items-center px-10">
 				<Setting
+					id="changeProxySetting"
 					bind:setting={payload.isCoolifyProxyUsed}
 					on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
 					title={$t('destination.use_coolify_proxy')}
-					description={$t('destination.new.install_proxy')}
+					description={'This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.'}
 				/>
 			</div>
 		{/if}

apps/ui/src/routes/destinations/[id]/_NewRemoteDocker.svelte

@@ -5,7 +5,7 @@
 
 	import { post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
-	import Explainer from '$lib/components/Explainer.svelte';
+	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 	import Setting from '$lib/components/Setting.svelte';
 	import { t } from '$lib/translations';
 
@@ -29,22 +29,18 @@
 </script>
 
 <div class="text-center flex justify-center">
-	<Explainer
+	<SimpleExplainer
 		customClass="max-w-[32rem]"
 		text="Remote Docker Engines are using <span class='text-white font-bold'>SSH</span> to communicate with the remote docker engine. 
         You need to setup an <span class='text-white font-bold'>SSH key</span> in advance on the server and install Docker. 
-        <br>See <a class='text-white' href='https://docs.coollabs.io/coolify/destinations#remote-docker-engine'>docs</a> for more details."
+        <br>See <a class='text-white' href='https://docs.coollabs.io/coolify/destinations#remote-docker-engine' target='blank'>docs</a> for more details."
 	/>
 </div>
 <div class="flex justify-center px-6 pb-8">
 	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
 		<div class="flex items-center space-x-2 pb-5">
 			<div class="title font-bold">{$t('forms.configuration')}</div>
-			<button
+			<button type="submit" class="btn btn-sm bg-destinations" class:loading disabled={loading}
-				type="submit"
-				class="btn btn-sm bg-destinations"
-				class:loading={loading}
-				disabled={loading}
 				>{loading
 					? payload.isCoolifyProxyUsed
 						? $t('destination.new.saving_and_configuring_proxy')
@@ -97,12 +93,13 @@
 				bind:value={payload.network}
 			/>
 		</div>
-		<div class="grid grid-cols-2 items-center">
+		<div class="grid grid-cols-2 items-center px-10">
 			<Setting
+				id="isCoolifyProxyUsed"
 				bind:setting={payload.isCoolifyProxyUsed}
 				on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
 				title={$t('destination.use_coolify_proxy')}
-				description={$t('destination.new.install_proxy')}
+				description={'This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.'}
 			/>
 		</div>
 	</form>

apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte

@@ -38,8 +38,8 @@
 		}
 	}
 	onMount(async () => {
-		loading.proxy = true;
 		if (destination.remoteEngine && destination.remoteVerified) {
+			loading.proxy = true;
 			const { isRunning } = await get(`/destinations/${id}/status`);
 			if (isRunning === false && destination.isCoolifyProxyUsed === true) {
 				destination.isCoolifyProxyUsed = !destination.isCoolifyProxyUsed;
@@ -69,6 +69,7 @@
 		loading.proxy = false;
 	});
 	async function changeProxySetting() {
+		if (!destination.remoteVerified) return
 		loading.proxy = true;
 		if (!cannotDisable) {
 			const isProxyActivated = destination.isCoolifyProxyUsed;
@@ -259,14 +260,15 @@
 			/></a
 		>
 	</div>
-	<div class="grid grid-cols-2 items-center">
+	<div class="grid grid-cols-2 items-center px-10">
 		<Setting
-			disabled={cannotDisable}
+			id="changeProxySetting"
+			disabled={cannotDisable || !destination.remoteVerified}
 			loading={loading.proxy}
 			bind:setting={destination.isCoolifyProxyUsed}
 			on:click={changeProxySetting}
 			title={$t('destination.use_coolify_proxy')}
-			description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration. Databases will have their own proxy. <br><br>${
+			description={`This will install a proxy on the destination to allow you to access your applications and services without any manual configuration.${
 				cannotDisable
 					? '<span class="font-bold text-white">You cannot disable this proxy as FQDN is configured for Coolify.</span>'
 					: ''

apps/ui/src/routes/destinations/[id]/__layout.svelte

@@ -40,7 +40,6 @@
 				}
 			};
 		} catch (error) {
-			console.log(error)
 			return handlerNotFoundLoad(error, url);
 		}
 	};
@@ -56,12 +55,16 @@
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
 	import { appSession } from '$lib/store';
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
-	const { id } = $page.params;
+	const isDestinationDeletable =
-	const isDestinationDeletable = destination?.application.length === 0 && destination?.database.length === 0 && destination?.service.length === 0
+		(destination?.application.length === 0 &&
+			destination?.database.length === 0 &&
+			destination?.service.length === 0) ||
+		true;
 
 	async function deleteDestination(destination: any) {
-		if (!isDestinationDeletable) return
+		if (!isDestinationDeletable) return;
 		const sure = confirm($t('application.confirm_to_delete', { name: destination.name }));
 		if (sure) {
 			try {
@@ -74,27 +77,28 @@
 	}
 	function deletable() {
 		if (!isDestinationDeletable) {
-			return "Please delete all resources before deleting this."
+			return 'Please delete all resources before deleting this.';
 		}
 		if ($appSession.isAdmin) {
-			return $t('destination.delete_destination')
+			return $t('destination.delete_destination');
 		} else {
-			return $t('destination.permission_denied_delete_destination')
+			return $t('destination.permission_denied_delete_destination');
 		}
 	}
 </script>
 
-{#if id !== 'new'}
+{#if $page.params.id !== 'new'}
 	<nav class="nav-side">
 		<button
+			id="delete"
 			on:click={() => deleteDestination(destination)}
 			type="submit"
 			disabled={!$appSession.isAdmin && isDestinationDeletable}
 			class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
-			class="icons tooltip tooltip-primary tooltip-left bg-transparent text-sm"
+			class="icons bg-transparent text-sm"
-			class:text-stone-600={!isDestinationDeletable}
+			class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button
-			data-tip={deletable()}><DeleteIcon /></button
 		>
 	</nav>
+	<Tooltip triggeredBy="#delete">{deletable()}</Tooltip>
 {/if}
 <slot />

apps/ui/src/routes/iam/index.svelte

@@ -108,24 +108,21 @@
 
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">Identity and Access Management</div>
-	<button
+	<button on:click={newTeam} class="btn btn-square btn-sm bg-iam">
-			on:click={newTeam}
+		<svg
-			class="btn btn-square btn-sm bg-iam"
+			class="h-6 w-6"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+			/></svg
 		>
-			<svg
+	</button>
-				class="h-6 w-6"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
-		</button>
 </div>
 
 {#if invitations.length > 0}
@@ -170,14 +167,11 @@
 
 			<tbody>
 				{#each accounts as account}
-					<tr>
+					<tr class="grid items-center justify-center gap-2 lg:grid-flow-col">
 						<td class="px-2">{account.email}</td>
 						<td class="flex space-x-2">
 							<form on:submit|preventDefault={() => resetPassword(account.id)}>
-								<button
+								<button class="my-4 btn btn-sm bg-iam">Reset Password</button>
-									class="my-4 btn btn-sm bg-iam"
-									>Reset Password</button
-								>
 							</form>
 							<form on:submit|preventDefault={() => deleteUser(account.id)}>
 								<button

apps/ui/src/routes/iam/team/[id]/__layout.svelte

@@ -35,6 +35,7 @@
 	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 	import { goto } from '$app/navigation';
 	import Cookies from 'js-cookie';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 	const { id } = $page.params;
 
 	async function deleteTeam() {
@@ -69,15 +70,14 @@
 	<nav class="nav-side">
 		{#if team.id !== '0'}
 			<button
+				id="delete"
 				on:click={deleteTeam}
 				type="submit"
 				disabled={!$appSession.isAdmin}
 				class:hover:text-red-500={$appSession.isAdmin}
-				class="icons tooltip tooltip-primary tooltip-left bg-transparent text-sm"
+				class="icons bg-transparent text-sm"><DeleteIcon /></button
-				data-tip={$appSession.isAdmin
-					? 'Delete'
-					: $t('destination.permission_denied_delete_destination')}><DeleteIcon /></button
 			>
+			<Tooltip triggeredBy="#delete">Delete</Tooltip>
 		{/if}
 	</nav>
 {/if}

apps/ui/src/routes/iam/team/[id]/index.svelte

@@ -12,7 +12,7 @@
 	export let team: any;
 	export let invitations: any[];
 	import { page } from '$app/stores';
-	import Explainer from '$lib/components/Explainer.svelte';
+	import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
 	import { post } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
@@ -98,7 +98,7 @@
 				<div class="flex-col">
 					<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
 					{#if team.id === '0'}
-						<Explainer customClass="w-full" text={$t('team.root_team_explainer')} />
+						<SimpleExplainer customClass="w-full" text={$t('team.root_team_explainer')} />
 					{/if}
 				</div>
 				<input id="name" name="name" placeholder="name" bind:value={team.name} />
@@ -179,7 +179,7 @@
 					>
 				</div>
 			</div>
-			<Explainer text={$t('team.invite_only_register_explainer')} />
+			<SimpleExplainer text={$t('team.invite_only_register_explainer')} />
 			<div class="flex-col space-y-2 px-4 pt-5 sm:px-6">
 				<div class="flex space-x-0">
 					<input

apps/ui/src/routes/login.svelte

@@ -49,61 +49,83 @@
 	<title>{$t('login.login')}</title>
 </svelt:head>
 
-<div class="flex h-screen flex-col items-center justify-center">
+<div class="flex lg:flex-row flex-col h-screen">
-	<div class="flex justify-center px-4">
+	<div class="bg-neutral-focus h-screen lg:flex hidden flex-col justify-end p-20 flex-1">
-		<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
+		<h1 class="title lg:text-6xl mb-5 border-gradient">Coolify</h1>
-			{#if $appSession.whiteLabeledDetails.icon}
+		<h3 class="title">Made self-hosting simple.</h3>
-				<img
-					class="w-32 mx-auto pb-8"
-					src={$appSession.whiteLabeledDetails.icon}
-					alt="Icon for white labeled version of Coolify"
-				/>
-			{:else}
-				<div class="text-6xl font-bold border-gradient w-48 mx-auto border-b-4 mb-8">Coolify</div>
-			{/if}
-			<input
-				type="email"
-				name="email"
-				placeholder={$t('forms.email')}
-				autocomplete="off"
-				required
-				bind:this={emailEl}
-				bind:value={email}
-				class="w-56 md:w-96"
-			/>
-			<input
-				type="password"
-				name="password"
-				placeholder={$t('forms.password')}
-				bind:value={password}
-				required
-				class="w-56 md:w-96"
-			/>
-
-			<div class="flex space-x-2 h-8 items-center justify-center pt-8">
-				<button
-					type="submit"
-					disabled={loading}
-					class="btn btn-sm"
-					class:loading
-					class:bg-coollabs={!loading}
-					>{loading ? $t('login.authenticating') : $t('login.login')}</button
-				>
-
-				<button on:click|preventDefault={gotoRegister} class="btn btn-sm"
-					>{$t('register.register')}</button
-				>
-			</div>
-		</form>
 	</div>
-	{#if browser && window.location.host === 'demo.coolify.io'}
+	<div class="flex flex-1 flex-col lg:max-w-2xl">
-		<div class="pt-5 font-bold">
+		<div class="flex flex-row p-8 items-center space-x-3">
-			Registration is <span class="text-pink-500">open</span>, just fill in an email (does not need
+			{#if $appSession.whiteLabeledDetails.icon}
-			to be live email address for the demo instance) and a password.
+				<div class="avatar" style="width: 40px; height: 40px">
+					<img
+						src={$appSession.whiteLabeledDetails.icon}
+						alt="Icon for white labeled version of Coolify"
+					/>
+				</div>
+			{:else}
+				<div>
+					<div class="avatar" style="width: 40px; height: 40px">
+						<img src="favicon.png" alt="Coolify icon" />
+					</div>
+				</div>
+				<div class="prose">
+					<h4>Coolify dashboard</h4>
+				</div>
+			{/if}
 		</div>
-		<div class="pt-5 font-bold">
+		<div
-			All users gets an <span class="text-pink-500">own namespace</span>, so you won't be able to
+			class="w-full md:px-20 lg:px-10 xl:px-20 p-6 flex flex-col h-full justify-center items-center"
-			access other users data.
+		>
+			<div class="mb-5 w-full prose prose-neutral">
+				<h1 class="m-0 white">Welcome back</h1>
+				<h5>Please login to continue.</h5>
+			</div>
+			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-3 w-full">
+				<input
+					type="email"
+					name="email"
+					placeholder={$t('forms.email')}
+					autocomplete="off"
+					required
+					bind:this={emailEl}
+					bind:value={email}
+					class="w-full"
+				/>
+				<input
+					type="password"
+					name="password"
+					placeholder={$t('forms.password')}
+					bind:value={password}
+					required
+					class="w-full"
+				/>
+
+				<div class="flex space-y-3 flex-col pt-3">
+					<button
+						type="submit"
+						disabled={loading}
+						class="btn"
+						class:loading
+						class:bg-coollabs={!loading}
+						>{loading ? $t('login.authenticating') : $t('login.login')}</button
+					>
+
+					<button on:click|preventDefault={gotoRegister} class="btn btn-ghost"
+						>{$t('register.register')}</button
+					>
+				</div>
+			</form>
+			{#if browser && window.location.host === 'demo.coolify.io'}
+				<div class="pt-5 font-bold">
+					Registration is <span class="text-pink-500">open</span>, just fill in an email (does not
+					need to be live email address for the demo instance) and a password.
+				</div>
+				<div class="pt-5 font-bold">
+					All users gets an <span class="text-pink-500">own namespace</span>, so you won't be able
+					to access other users data.
+				</div>
+			{/if}
 		</div>
-	{/if}
+	</div>
 </div>

apps/ui/src/routes/register.svelte

@@ -61,38 +61,58 @@
 	}
 </script>
 
-<div class="icons fixed top-0 left-0 m-3 cursor-pointer" on:click={() => goto('/')}>
+<div class="flex lg:flex-row flex-col h-screen">
-	<svg
+	<div class="bg-neutral-focus h-screen lg:flex hidden flex-col justify-end p-20 flex-1">
-		xmlns="http://www.w3.org/2000/svg"
+		<h1 class="title lg:text-6xl mb-5 border-gradient">Coolify</h1>
-		class="h-6 w-6"
+		<h3 class="title">Made self-hosting simple.</h3>
-		viewBox="0 0 24 24"
+	</div>
-		stroke-width="1.5"
+	<div class="flex flex-1 flex-col lg:max-w-2xl">
-		stroke="currentColor"
+		<div class="flex flex-row p-8 items-center space-x-3 justify-between">
-		fill="none"
+			<div class="icons cursor-pointer" on:click={() => goto('/')}>
-		stroke-linecap="round"
+				<svg
-		stroke-linejoin="round"
+					xmlns="http://www.w3.org/2000/svg"
-	>
+					class="h-6 w-6"
-		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+					viewBox="0 0 24 24"
-		<line x1="5" y1="12" x2="19" y2="12" />
+					stroke-width="1.5"
-		<line x1="5" y1="12" x2="11" y2="18" />
+					stroke="currentColor"
-		<line x1="5" y1="12" x2="11" y2="6" />
+					fill="none"
-	</svg>
+					stroke-linecap="round"
-</div>
+					stroke-linejoin="round"
-<div class="flex h-screen flex-col items-center justify-center">
+				>
-	{#if $appSession.userId}
+					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-		<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
+					<line x1="5" y1="12" x2="19" y2="12" />
-	{:else}
+					<line x1="5" y1="12" x2="11" y2="18" />
-		<div class="flex justify-center px-4">
+					<line x1="5" y1="12" x2="11" y2="6" />
-			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
+				</svg>
+			</div>
+			<div class="flex flex-row items-center space-x-3">
 				{#if $appSession.whiteLabeledDetails.icon}
-					<img
+					<div class="avatar" style="width: 40px; height: 40px">
-						class="w-32 mx-auto pb-8"
+						<img
-						src={$appSession.whiteLabeledDetails.icon}
+							src={$appSession.whiteLabeledDetails.icon}
-						alt="Icon for white labeled version of Coolify"
+							alt="Icon for white labeled version of Coolify"
-					/>
+						/>
+					</div>
 				{:else}
-					<div class="text-6xl font-bold border-gradient w-48 mx-auto border-b-4 mb-8">Coolify</div>
+					<div>
+						<div class="avatar" style="width: 40px; height: 40px">
+							<img src="favicon.png" alt="Coolify icon" />
+						</div>
+					</div>
+					<div class="prose">
+						<h4>Coolify dashboard</h4>
+					</div>
 				{/if}
+			</div>
+		</div>
+		<div
+			class="w-full md:px-20 lg:px-10 xl:px-20 p-6 flex flex-col h-full justify-center items-center"
+		>
+			<div class="mb-5 w-full prose prose-neutral">
+				<h1 class="m-0 white">Get started</h1>
+				<h5>Enter the required fields to complete the registration.</h5>
+			</div>
+			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-3 w-full">
 				<input
 					type="email"
 					name="email"
@@ -101,7 +121,7 @@
 					required
 					bind:this={emailEl}
 					bind:value={email}
-					class="w-56 md:w-96"
+					class="w-full"
 				/>
 				<input
 					type="password"
@@ -110,7 +130,7 @@
 					bind:this={passwordEl}
 					bind:value={password}
 					required
-					class="w-56 md:w-96"
+					class="w-full"
 				/>
 				<input
 					type="password"
@@ -118,13 +138,13 @@
 					placeholder={$t('forms.password_again')}
 					bind:value={passwordCheck}
 					required
-					class="w-56 md:w-96"
+					class="w-full"
 				/>
 
-				<div class="flex space-x-2 h-8 items-center justify-center pt-8">
+				<div class="flex space-y-3 flex-col pt-3">
 					<button
 						type="submit"
-						class="btn btn-sm"
+						class="btn"
 						disabled={loading}
 						class:bg-transparent={loading}
 						class:bg-coollabs={!loading}
@@ -132,11 +152,11 @@
 					>
 				</div>
 			</form>
+			{#if userCount === 0}
+				<div class="pt-5">
+					{$t('register.first_user')}
+				</div>
+			{/if}
 		</div>
-		{#if userCount === 0}
+	</div>
-			<div class="pt-5">
-				{$t('register.first_user')}
-			</div>
-		{/if}
-	{/if}
 </div>

apps/ui/src/routes/services/[id]/_Secret.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	export let name = '';
 	export let value = '';
 	export let isNewSecret = false;

apps/ui/src/routes/services/[id]/_ServiceLinks.svelte

@@ -71,4 +71,8 @@
 	<a href="https://searxng.org" target="_blank">
 		<Icons.Searxng />
 	</a>
+{:else if service.type === 'weblate'}
+	<a href="https://weblate.org" target="_blank">
+		<Icons.Weblate />
+	</a>
 {/if}

apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte

@@ -7,8 +7,9 @@
 </script>
 
 <div class="flex space-x-1 py-5">
-	<div class="title">Ghost</div>
+	<div class="title">
-	<Explainer text={'You can change these values in the Ghost admin panel.'} />
+		Ghost <Explainer explanation="You can change these values in the Ghost admin panel." />
+	</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
 	<label for="email">{$t('forms.default_email_address')}</label>

apps/ui/src/routes/services/[id]/_Services/_GlitchTip.svelte

@@ -1,17 +1,51 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
+	import { addToast, status } from '$lib/store';
 	import Setting from '$lib/components/Setting.svelte';
 	import { t } from '$lib/translations';
+	import { post } from '$lib/api';
+	import { page } from '$app/stores';
+	import { errorNotification } from '$lib/common';
 	export let service: any;
-	function toggleEmailSmtpUseTls() {
+
-		service.glitchTip.emailSmtpUseTls = !service.glitchTip.emailSmtpUseTls;
+	const { id } = $page.params;
-	}
+	let loading = false;
-	function toggleEmailSmtpUseSsl() {
+
-		service.glitchTip.emailSmtpUseSsl = !service.glitchTip.emailSmtpUseSsl;
+	async function changeSettings(name: any) {
-	}
+		if (loading || $status.service.isRunning) return;
-	function toggleEnableOpenUserRegistration() {
+
-		service.glitchTip.enableOpenUserRegistration = !service.glitchTip.enableOpenUserRegistration;
+		let enableOpenUserRegistration = service.glitchTip.enableOpenUserRegistration;
+		let emailSmtpUseSsl = service.glitchTip.emailSmtpUseSsl;
+		let emailSmtpUseTls = service.glitchTip.emailSmtpUseTls;
+
+		loading = true;
+		if (name === 'enableOpenUserRegistration') {
+			enableOpenUserRegistration = !enableOpenUserRegistration;
+		}
+		if (name === 'emailSmtpUseSsl') {
+			emailSmtpUseSsl = !emailSmtpUseSsl;
+		}
+		if (name === 'emailSmtpUseTls') {
+			emailSmtpUseTls = !emailSmtpUseTls;
+		}
+		try {
+			await post(`/services/${id}/glitchtip/settings`, {
+				enableOpenUserRegistration,
+				emailSmtpUseSsl,
+				emailSmtpUseTls
+			});
+			service.glitchTip.emailSmtpUseTls = emailSmtpUseTls;
+			service.glitchTip.emailSmtpUseSsl = emailSmtpUseSsl;
+			service.glitchTip.enableOpenUserRegistration = enableOpenUserRegistration;
+			return addToast({
+				message: 'Settings updated.',
+				type: 'success'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		} finally {
+			loading = false;
+		}
 	}
 </script>
 
@@ -19,109 +53,121 @@
 	<div class="title">GlitchTip</div>
 </div>
 
-<div class="flex space-x-1 py-2 font-bold">
-	<div class="subtitle">Settings</div>
-</div>
-
 <div class="grid grid-cols-2 items-center px-10">
 	<Setting
+		id="enableOpenUserRegistration"
+		bind:setting={service.glitchTip.enableOpenUserRegistration}
+		{loading}
+		disabled={$status.service.isRunning}
+		on:click={() => changeSettings('enableOpenUserRegistration')}
+		title="Enable Open User Registration"
+		description={''}
+	/>
+	<!-- <Setting
 		bind:setting={service.glitchTip.enableOpenUserRegistration}
 		on:click={toggleEnableOpenUserRegistration}
 		title={'Enable Open User Registration'}
 		description={''}
-	/>
+	/> -->
 </div>
 
 <div class="flex space-x-1 py-2 font-bold">
 	<div class="subtitle">Email settings</div>
 </div>
+<div class="grid grid-cols-2 items-center px-10">
+	<Setting
+		id="emailSmtpUseTls"
+		bind:setting={service.glitchTip.emailSmtpUseTls}
+		{loading}
+		disabled={$status.service.isRunning}
+		on:click={() => changeSettings('emailSmtpUseTls')}
+		title="Use TLS for SMTP"
+		description={''}
+	/>
+</div>
 
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultEmailFrom" class="text-base font-bold text-stone-100">Default Email From</label
+	<Setting
-	>
+		id="emailSmtpUseSsl"
+		bind:setting={service.glitchTip.emailSmtpUseSsl}
+		{loading}
+		disabled={$status.service.isRunning}
+		on:click={() => changeSettings('emailSmtpUseSsl')}
+		title="Use SSL for SMTP"
+		description={''}
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="defaultEmailFrom">Default Email From</label>
 	<CopyPasswordField
 		required
 		name="defaultEmailFrom"
 		id="defaultEmailFrom"
-		value={service.glitchTip.defaultEmailFrom}
+		bind:value={service.glitchTip.defaultEmailFrom}
 	/>
 </div>
 
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpHost" class="text-base font-bold text-stone-100">SMTP Host</label>
+	<label for="emailSmtpHost">SMTP Host</label>
 	<CopyPasswordField
 		name="emailSmtpHost"
 		id="emailSmtpHost"
-		value={service.glitchTip.emailSmtpHost}
+		bind:value={service.glitchTip.emailSmtpHost}
 	/>
 </div>
 
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpPort" class="text-base font-bold text-stone-100">SMTP Port</label>
+	<label for="emailSmtpPort">SMTP Port</label>
 	<CopyPasswordField
 		name="emailSmtpPort"
 		id="emailSmtpPort"
-		value={service.glitchTip.emailSmtpPort}
+		bind:value={service.glitchTip.emailSmtpPort}
 	/>
 </div>
 
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpUser" class="text-base font-bold text-stone-100">SMTP User</label>
+	<label for="emailSmtpUser">SMTP User</label>
 	<CopyPasswordField
 		name="emailSmtpUser"
 		id="emailSmtpUser"
-		value={service.glitchTip.emailSmtpUser}
+		bind:value={service.glitchTip.emailSmtpUser}
 	/>
 </div>
 
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="emailSmtpPassword" class="text-base font-bold text-stone-100">SMTP Password</label>
+	<label for="emailSmtpPassword">SMTP Password</label>
 	<CopyPasswordField
 		name="emailSmtpPassword"
 		id="emailSmtpPassword"
-		value={service.glitchTip.emailSmtpPassword}
+		bind:value={service.glitchTip.emailSmtpPassword}
 		isPasswordField
 	/>
 </div>
 
 <div class="grid grid-cols-2 items-center px-10">
-	<Setting
+	<label for="emailBackend">Email Backend</label>
-		bind:setting={service.glitchTip.emailSmtpUseTls}
+	<CopyPasswordField
-		on:click={toggleEmailSmtpUseTls}
+		name="emailBackend"
-		title={'SMTP Use TLS'}
+		id="emailBackend"
-		description={''}
+		bind:value={service.glitchTip.emailBackend}
 	/>
 </div>
 
 <div class="grid grid-cols-2 items-center px-10">
-	<Setting
+	<label for="mailgunApiKey">Mailgun API Key</label>
-		bind:setting={service.glitchTip.emailSmtpUseSsl}
-		on:click={toggleEmailSmtpUseSsl}
-		title={'SMTP Use SSL'}
-		description={''}
-	/>
-</div>
-
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="emailBackend" class="text-base font-bold text-stone-100">Email Backend</label>
-	<CopyPasswordField name="emailBackend" id="emailBackend" value={service.glitchTip.emailBackend} />
-</div>
-
-<div class="grid grid-cols-2 items-center px-10">
-	<label for="mailgunApiKey" class="text-base font-bold text-stone-100">Mailgun API Key</label>
 	<CopyPasswordField
 		name="mailgunApiKey"
 		id="mailgunApiKey"
-		value={service.glitchTip.mailgunApiKey}
+		bind:value={service.glitchTip.mailgunApiKey}
 	/>
 </div>
 
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="sendgridApiKey" class="text-base font-bold text-stone-100">SendGrid API Key</label>
+	<label for="sendgridApiKey">SendGrid API Key</label>
 	<CopyPasswordField
 		name="sendgridApiKey"
 		id="sendgridApiKey"
-		value={service.glitchTip.sendgridApiKey}
+		bind:value={service.glitchTip.sendgridApiKey}
 	/>
 </div>
 
@@ -130,35 +176,31 @@
 </div>
 
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultEmail" class="text-base font-bold text-stone-100">{$t('forms.email')}</label>
+	<label for="defaultEmail">{$t('forms.email')}</label>
 	<CopyPasswordField
 		name="defaultEmail"
 		id="defaultEmail"
-		value={service.glitchTip.defaultEmail}
+		bind:value={service.glitchTip.defaultEmail}
 		readonly
 		disabled
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultUsername" class="text-base font-bold text-stone-100"
+	<label for="defaultUsername">{$t('forms.username')}</label>
-		>{$t('forms.username')}</label
-	>
 	<CopyPasswordField
 		name="defaultUsername"
 		id="defaultUsername"
-		value={service.glitchTip.defaultUsername}
+		bind:value={service.glitchTip.defaultUsername}
 		readonly
 		disabled
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="defaultPassword" class="text-base font-bold text-stone-100"
+	<label for="defaultPassword">{$t('forms.password')}</label>
-		>{$t('forms.password')}</label
-	>
 	<CopyPasswordField
 		name="defaultPassword"
 		id="defaultPassword"
-		value={service.glitchTip.defaultPassword}
+		bind:value={service.glitchTip.defaultPassword}
 		readonly
 		disabled
 		isPasswordField
@@ -170,38 +212,32 @@
 </div>
 
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlUser" class="text-base font-bold text-stone-100"
+	<label for="postgresqlUser">{$t('forms.username')}</label>
-		>{$t('forms.username')}</label
-	>
 	<CopyPasswordField
 		name="postgresqlUser"
 		id="postgresqlUser"
-		value={service.glitchTip.postgresqlUser}
+		bind:value={service.glitchTip.postgresqlUser}
 		readonly
 		disabled
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlPassword" class="text-base font-bold text-stone-100"
+	<label for="postgresqlPassword">{$t('forms.password')}</label>
-		>{$t('forms.password')}</label
-	>
 	<CopyPasswordField
 		id="postgresqlPassword"
 		isPasswordField
 		readonly
 		disabled
 		name="postgresqlPassword"
-		value={service.glitchTip.postgresqlPassword}
+		bind:value={service.glitchTip.postgresqlPassword}
 	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="postgresqlDatabase" class="text-base font-bold text-stone-100"
+	<label for="postgresqlDatabase">{$t('index.database')}</label>
-		>{$t('index.database')}</label
-	>
 	<CopyPasswordField
 		name="postgresqlDatabase"
 		id="postgresqlDatabase"
-		value={service.glitchTip.postgresqlDatabase}
+		bind:value={service.glitchTip.postgresqlDatabase}
 		readonly
 		disabled
 	/>

apps/ui/src/routes/services/[id]/_Services/_Hasura.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
 	export let service: any;
 </script>

apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte

@@ -11,7 +11,11 @@
 	<div class="title">Plausible Analytics</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="scriptName">Script Name</label>
+	<label for="scriptName"
+		>Script Name <Explainer
+			explanation="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers."
+		/></label
+	>
 	<input
 		name="scriptName"
 		id="scriptName"
@@ -21,9 +25,6 @@
 		bind:value={service.plausibleAnalytics.scriptName}
 		required
 	/>
-	<Explainer
-		text="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers."
-	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
 	<label for="email">{$t('forms.email')}</label>

apps/ui/src/routes/services/[id]/_Services/_Services.svelte

@@ -14,7 +14,6 @@
 	import { t } from '$lib/translations';
 	import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import Setting from '$lib/components/Setting.svelte';
 
 	import Fider from './_Fider.svelte';
@@ -30,6 +29,9 @@
 	import Appwrite from './_Appwrite.svelte';
 	import Moodle from './_Moodle.svelte';
 	import Searxng from './_Searxng.svelte';
+	import Weblate from './_Weblate.svelte';
+	import Explainer from '$lib/components/Explainer.svelte';
+	import Taiga from './_Taiga.svelte';
 
 	const { id } = $page.params;
 	$: isDisabled =
@@ -282,8 +284,9 @@
 				</div>
 				<div class="grid grid-cols-2 px-10">
 					<div class="flex-col ">
-						<label for="apiFqdn" class="pt-2 text-base font-bold text-stone-100">API URL</label>
+						<label for="apiFqdn" class="pt-2 text-base font-bold text-stone-100"
-						<Explainer text={$t('application.https_explainer')} />
+							>API URL <Explainer explanation={$t('application.https_explainer')} /></label
+						>
 					</div>
 
 					<CopyPasswordField
@@ -301,9 +304,9 @@
 				<div class="grid grid-cols-2 px-10">
 					<div class="flex-col ">
 						<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
-							>{$t('application.url_fqdn')}</label
+							>{$t('application.url_fqdn')}
-						>
+							<Explainer explanation={$t('application.https_explainer')} />
-						<Explainer text={$t('application.https_explainer')} />
+						</label>
 					</div>
 
 					<CopyPasswordField
@@ -354,6 +357,7 @@
 			{/if}
 			<div class="grid grid-cols-2 items-center px-10">
 				<Setting
+					id="dualCerts"
 					disabled={$status.service.isRunning}
 					dataTooltip={$t('forms.must_be_stopped_to_modify')}
 					bind:setting={dualCerts}
@@ -363,7 +367,11 @@
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center px-10">
-				<label for="exposePort" class="text-base font-bold text-stone-100">Exposed Port</label>
+				<label for="exposePort" class="text-base font-bold text-stone-100"
+					>Exposed Port <Explainer
+						explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
+					/></label
+				>
 				<input
 					readonly={!$appSession.isAdmin && !$status.service.isRunning}
 					disabled={!$appSession.isAdmin ||
@@ -374,9 +382,6 @@
 					bind:value={service.exposePort}
 					placeholder="12345"
 				/>
-				<Explainer
-					text={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
-				/>
 			</div>
 
 			{#if service.type === 'plausibleanalytics'}
@@ -405,6 +410,10 @@
 				<GlitchTip bind:service />
 			{:else if service.type === 'searxng'}
 				<Searxng bind:service />
+			{:else if service.type === 'weblate'}
+				<Weblate bind:service />
+			{:else if service.type === 'taiga'}
+				<Taiga bind:service />
 			{/if}
 		</div>
 	</form>

apps/ui/src/routes/services/[id]/_Services/_Taiga.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	import { t } from '$lib/translations';
+	export let service: any;
+</script>
+
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">Taiga</div>
+</div>
+
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="secretKey">Secret Key</label>
+	<CopyPasswordField
+		name="secretKey"
+		id="secretKey"
+		isPasswordField
+		value={service.taiga.secretKey}
+		readonly
+		disabled
+	/>
+</div>
+
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">Django</div>
+</div>
+
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="djangoAdminUser">Admin User</label>
+	<CopyPasswordField
+		name="djangoAdminUser"
+		id="djangoAdminUser"
+		value={service.taiga.djangoAdminUser}
+		readonly
+		disabled
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="djangoAdminPassword">Admin Password</label>
+	<CopyPasswordField
+		name="djangoAdminPassword"
+		id="djangoAdminPassword"
+		isPasswordField
+		value={service.taiga.djangoAdminPassword}
+		readonly
+		disabled
+	/>
+</div>
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">RabbitMQ</div>
+</div>
+
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="rabbitMQUser">User</label>
+	<CopyPasswordField
+		name="rabbitMQUser"
+		id="rabbitMQUser"
+		value={service.taiga.rabbitMQUser}
+		readonly
+		disabled
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="rabbitMQPassword">Password</label>
+	<CopyPasswordField
+		name="rabbitMQPassword"
+		id="rabbitMQPassword"
+		isPasswordField
+		value={service.taiga.rabbitMQPassword}
+		readonly
+		disabled
+	/>
+</div>
+
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">PostgreSQL</div>
+</div>
+
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="postgresqlHost">PostgreSQL Host</label>
+	<CopyPasswordField
+		name="postgresqlHost"
+		id="postgresqlHost"
+		value={service.taiga.postgresqlHost}
+		readonly
+		disabled
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="postgresqlPort">PostgreSQL Port</label>
+	<CopyPasswordField
+		name="postgresqlPort"
+		id="postgresqlPort"
+		value={service.taiga.postgresqlPort}
+		readonly
+		disabled
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="postgresqlUser">PostgreSQL User</label>
+	<CopyPasswordField
+		name="postgresqlUser"
+		id="postgresqlUser"
+		value={service.taiga.postgresqlUser}
+		readonly
+		disabled
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="postgresqlPassword">PostgreSQL Password</label>
+	<CopyPasswordField
+		name="postgresqlPassword"
+		id="postgresqlPassword"
+		isPasswordField
+		value={service.taiga.postgresqlPassword}
+		readonly
+		disabled
+	/>
+</div>

apps/ui/src/routes/services/[id]/_Services/_Umami.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
 	import Explainer from '$lib/components/Explainer.svelte';
-
 	export let service: any;
 </script>
 
@@ -13,7 +12,11 @@
 	<input name="adminUser" id="adminUser" placeholder="admin" value="admin" disabled readonly />
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="umamiAdminPassword">Initial Admin Password</label>
+	<label for="umamiAdminPassword"
+		>Initial Admin Password <Explainer
+			explanation="It could be changed in Umami. <br>This is just the password set initially after the first start."
+		/></label
+	>
 	<CopyPasswordField
 		isPasswordField
 		name="umamiAdminPassword"
@@ -23,7 +26,4 @@
 		disabled
 		readonly
 	/>
-	<Explainer
-		text="It could be changed in Umami. <br>This is just the password set initially after the first start."
-	/>
 </div>

apps/ui/src/routes/services/[id]/_Services/_Weblate.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
+	export let service: any;
+</script>
+
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">Weblate</div>
+</div>
+
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="adminPassword">Admin password</label>
+	<CopyPasswordField
+		name="adminPassword"
+		id="adminPassword"
+		isPasswordField
+		value={service.weblate.adminPassword}
+		readonly
+		disabled
+	/>
+</div>
+
+<div class="flex space-x-1 py-5 font-bold">
+	<div class="title">PostgreSQL</div>
+</div>
+
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="postgresqlHost">PostgreSQL Host</label>
+	<CopyPasswordField
+		name="postgresqlHost"
+		id="postgresqlHost"
+		value={service.weblate.postgresqlHost}
+		readonly
+		disabled
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="postgresqlPort">PostgreSQL Port</label>
+	<CopyPasswordField
+		name="postgresqlPort"
+		id="postgresqlPort"
+		value={service.weblate.postgresqlPort}
+		readonly
+		disabled
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="postgresqlUser">PostgreSQL User</label>
+	<CopyPasswordField
+		name="postgresqlUser"
+		id="postgresqlUser"
+		value={service.weblate.postgresqlUser}
+		readonly
+		disabled
+	/>
+</div>
+<div class="grid grid-cols-2 items-center px-10">
+	<label for="postgresqlPassword">PostgreSQL Password</label>
+	<CopyPasswordField
+		name="postgresqlPassword"
+		id="postgresqlPassword"
+		isPasswordField
+		value={service.weblate.postgresqlPassword}
+		readonly
+		disabled
+	/>
+</div>