Skip to content

Redesign authenticated workspace #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
puppe1990 merged 3 commits into from
Oct 1, 2026
Merged

Redesign authenticated workspace #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
519cbfd
feat(ui): redesign authenticated workspace
puppe1990 Oct 1, 2026
8edf934
feat(pwa): add installable app metadata and icons
puppe1990 Oct 1, 2026
d687096
feat(meta): add Open Graph social preview
puppe1990 Oct 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2241,6 +2241,12 @@ liveSocket.connect();
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket;

if ("serviceWorker" in navigator && process.env.NODE_ENV === "production") {
window.addEventListener("load", () => {
navigator.serviceWorker.register("/service-worker.js");
});
}

// The lines below enable quality of life phoenix_live_reload
// development features:
//
Expand Down
4 changes: 3 additions & 1 deletion lib/open_drive_web.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ defmodule OpenDriveWeb do
those modules here.
"""

def static_paths, do: ~w(assets fonts images favicon.ico favicon.svg robots.txt)
def static_paths,
do:
~w(assets fonts images favicon.ico favicon.svg manifest.webmanifest service-worker.js robots.txt)

def router do
quote do
Expand Down
2 changes: 1 addition & 1 deletion lib/open_drive_web/components/core_components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ defmodule OpenDriveWeb.CoreComponents do

defp button_loading_content(assigns) do
~H"""
<span class="inline-flex items-center gap-2 phx-click-loading:inline-flex phx-submit-loading:inline-flex hidden">
<span class="hidden items-center gap-2 phx-click-loading:inline-flex phx-submit-loading:inline-flex">
<.spinner size={@spinner_size} />
<span :if={@loading_label}>{@loading_label}</span>
</span>
Expand Down
24 changes: 12 additions & 12 deletions lib/open_drive_web/components/layouts.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ defmodule OpenDriveWeb.Layouts do
class="od-app-shell min-h-screen text-slate-950"
>
<header class="border-b border-slate-200/80 bg-white/80 backdrop-blur-xl">
<div class="mx-auto flex max-w-[1440px] flex-col gap-4 px-4 py-3 sm:px-6 lg:flex-row lg:items-center lg:gap-8 lg:px-8">
<div class="mx-auto flex max-w-[1440px] flex-col gap-3 px-4 py-3 sm:px-6 lg:flex-row lg:items-center lg:gap-8 lg:px-8">
<a href="/" class="flex items-center gap-3">
<div class="od-brand-mark size-10 rounded-[0.9rem]" aria-hidden="true"></div>
<div>
Expand Down Expand Up @@ -89,43 +89,43 @@ defmodule OpenDriveWeb.Layouts do

<div class="flex flex-col gap-3 lg:ml-auto lg:items-end">
<%= if @current_scope && @current_scope.user do %>
<div class="flex flex-col gap-3 lg:hidden">
<div class="lg:hidden">
<.tenant_switcher current_scope={@current_scope} />
<div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap sm:items-center">
<div class="flex items-center gap-1 overflow-x-auto rounded-xl bg-slate-100 p-1">
<.link
navigate={~p"/app"}
class="inline-flex h-11 items-center justify-center rounded-2xl px-4 text-[0.95rem] font-semibold tracking-[-0.02em] text-slate-900 transition hover:bg-white/75 hover:text-slate-950"
class="inline-flex h-9 flex-1 items-center justify-center rounded-lg px-3 text-sm font-semibold text-slate-700 transition hover:bg-white hover:text-slate-950"
>
{gettext("Drive")}
</.link>
<.link
navigate={~p"/app/members"}
class="inline-flex h-11 items-center justify-center rounded-2xl px-4 text-[0.95rem] font-semibold tracking-[-0.02em] text-slate-900 transition hover:bg-white/75 hover:text-slate-950"
class="inline-flex h-9 flex-1 items-center justify-center rounded-lg px-3 text-sm font-semibold text-slate-700 transition hover:bg-white hover:text-slate-950"
>
{gettext("Members")}
</.link>
<.link
navigate={~p"/app/trash"}
class="inline-flex h-11 items-center justify-center rounded-2xl px-4 text-[0.95rem] font-semibold tracking-[-0.02em] text-slate-900 transition hover:bg-white/75 hover:text-slate-950"
class="inline-flex h-9 flex-1 items-center justify-center rounded-lg px-3 text-sm font-semibold text-slate-700 transition hover:bg-white hover:text-slate-950"
>
{gettext("Trash")}
</.link>
<.link
href={~p"/users/settings"}
class="inline-flex h-11 items-center justify-center rounded-2xl px-4 text-[0.95rem] font-semibold tracking-[-0.02em] text-slate-900 transition hover:bg-white/75 hover:text-slate-950"
class="inline-flex h-9 flex-1 items-center justify-center rounded-lg px-3 text-sm font-semibold text-slate-700 transition hover:bg-white hover:text-slate-950"
>
{gettext("Settings")}
</.link>
</div>
</div>

<div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center lg:justify-end lg:gap-2">
<div class="flex flex-wrap items-center gap-2 lg:justify-end">
<.tenant_switcher current_scope={@current_scope} />
<.translation_switcher locale={@locale || Gettext.get_locale(OpenDriveWeb.Gettext)} />
<.link
href={~p"/users/log-out"}
method="delete"
class="inline-flex h-10 items-center justify-center rounded-xl border border-slate-300 bg-white px-5 text-sm font-semibold text-slate-700 transition hover:border-slate-400 hover:text-slate-950"
class="inline-flex h-10 flex-1 items-center justify-center rounded-xl border border-slate-300 bg-white px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-400 hover:text-slate-950 sm:flex-none"
>
{gettext("Log out")}
</.link>
Expand Down Expand Up @@ -166,11 +166,11 @@ defmodule OpenDriveWeb.Layouts do

def translation_switcher(assigns) do
~H"""
<div class="inline-flex rounded-[1.4rem] bg-slate-100 p-1.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] ring-1 ring-slate-200/80">
<div class="inline-flex rounded-xl bg-slate-100 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] ring-1 ring-slate-200/80">
<.link
href="?locale=pt-BR"
class={[
"rounded-[1rem] px-4 py-2 text-[0.95rem] font-semibold tracking-[-0.02em] transition",
"rounded-lg px-3 py-2 text-sm font-semibold tracking-[-0.02em] transition",
@locale == "pt_BR" && "bg-white text-slate-950 shadow-[0_6px_16px_rgba(15,23,42,0.12)]",
@locale != "pt_BR" && "text-slate-500 hover:text-slate-800"
]}
Expand All @@ -180,7 +180,7 @@ defmodule OpenDriveWeb.Layouts do
<.link
href="?locale=en"
class={[
"rounded-[1rem] px-4 py-2 text-[0.95rem] font-semibold tracking-[-0.02em] transition",
"rounded-lg px-3 py-2 text-sm font-semibold tracking-[-0.02em] transition",
@locale == "en" && "bg-white text-slate-950 shadow-[0_6px_16px_rgba(15,23,42,0.12)]",
@locale != "en" && "text-slate-500 hover:text-slate-800"
]}
Expand Down
28 changes: 28 additions & 0 deletions lib/open_drive_web/components/layouts/root.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,37 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content={get_csrf_token()} />
<meta name="theme-color" content="#2563eb" />
<meta name="application-name" content="OpenDrive" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="OpenDrive" />
<meta name="description" content="A calm, secure workspace for your team's files." />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="OpenDrive" />
<meta property="og:title" content="OpenDrive — Your team's work, in one calm place." />
<meta
property="og:description"
content="Organize files, people, and activity in one calm, secure workspace."
/>
<meta property="og:url" content={url(~p"/")} />
<meta property="og:image" content={url(~p"/images/og-preview.jpg")} />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="OpenDrive team file workspace preview" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="OpenDrive — Your team's work, in one calm place." />
<meta
name="twitter:description"
content="Organize files, people, and activity in one calm, secure workspace."
/>
<meta name="twitter:image" content={url(~p"/images/og-preview.jpg")} />
<title>OpenDrive</title>
<link rel="icon" type="image/svg+xml" href={~p"/favicon.svg"} />
<link rel="alternate icon" href={~p"/favicon.ico"} />
<link rel="apple-touch-icon" sizes="180x180" href={~p"/images/pwa-icon-180.png"} />
<link rel="manifest" href={~p"/manifest.webmanifest"} />
<link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
</script>
Expand Down
Loading
Loading