openship 0.1.0 → 0.1.1

package/apps/dashboard/src/app/authorize/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useEffect } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { useSession } from "@/lib/auth-client";
+import { AuthShell } from "@/components/auth-shell";
+import { Button } from "@/components/ui/button";
+import { Loader2, Monitor, Check } from "lucide-react";
+
+/**
+ * OAuth-style authorize page — shown after login (or immediately if
+ * already logged in) when a desktop app requests access.
+ *
+ * Flow:
+ *   - Desktop opens /authorize?callback=...&app=...&machine=...
+ *   - If not logged in → redirect to /login (preserving params)
+ *   - If logged in → show authorize UI with explicit button
+ *   - Authorize → handoff endpoint → redirect back to desktop API
+ */
+export default function AuthorizePage() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const { data: session, isPending } = useSession();
+
+  const callback = searchParams.get("callback");
+  const appName = searchParams.get("app") || "Openship Desktop";
+  const machine = searchParams.get("machine");
+  const state = searchParams.get("state");
+  const codeChallenge = searchParams.get("code_challenge");
+
+  const API_URL = process.env.NEXT_PUBLIC_API_URL || "";
+
+  // Build handoff URL with state + PKCE challenge
+  const handoffUrl = callback
+    ? `${API_URL}/api/cloud/desktop-handoff?${new URLSearchParams({
+        redirect: callback,
+        ...(state ? { state } : {}),
+        ...(codeChallenge ? { code_challenge: codeChallenge } : {}),
+      }).toString()}`
+    : null;
+
+  // Build the login redirect URL preserving all params
+  const loginUrl = callback
+    ? `/login?${new URLSearchParams({
+        callback,
+        ...(searchParams.get("app") ? { app: searchParams.get("app")! } : {}),
+        ...(machine ? { machine } : {}),
+        ...(state ? { state } : {}),
+        ...(codeChallenge ? { code_challenge: codeChallenge } : {}),
+      }).toString()}`
+    : "/login";
+
+  // Not logged in → redirect to login
+  useEffect(() => {
+    if (!isPending && !session) {
+      router.replace(loginUrl);
+    }
+  }, [isPending, session, loginUrl, router]);
+
+  // No callback → invalid request
+  if (!callback) {
+    return (
+      <AuthShell>
+        <div className="text-center">
+          <h1 className="text-xl font-semibold">Invalid Request</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Missing authorization parameters.
+          </p>
+        </div>
+      </AuthShell>
+    );
+  }
+
+  // Loading or not authenticated yet
+  if (isPending || !session) {
+    return (
+      <AuthShell>
+        <div className="flex items-center justify-center py-8">
+          <Loader2 className="size-6 animate-spin text-muted-foreground" />
+        </div>
+      </AuthShell>
+    );
+  }
+
+  return (
+    <AuthShell>
+      <div className="mb-6 text-center">
+        <div className="mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary/80 to-primary shadow-sm">
+          <Monitor className="size-7 text-primary-foreground" />
+        </div>
+        <h1 className="text-xl font-semibold">Authorize {appName}</h1>
+        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+          {appName}
+          {machine ? ` on ${machine}` : ""} wants to connect to your account.
+        </p>
+      </div>
+
+      <div className="mb-6 rounded-lg border border-border bg-muted/30 p-4">
+        <p className="text-sm font-medium text-foreground">Signed in as</p>
+        <p className="mt-0.5 text-sm text-muted-foreground">{session.user.email}</p>
+
+        <div className="mt-4 space-y-2">
+          <p className="text-sm font-medium text-foreground">This will allow:</p>
+          <ul className="space-y-1 text-sm text-muted-foreground">
+            <li className="flex items-center gap-2">
+              <Check className="size-3.5 text-green-500 shrink-0" />
+              Deploy and manage applications
+            </li>
+            <li className="flex items-center gap-2">
+              <Check className="size-3.5 text-green-500 shrink-0" />
+              Access your projects and settings
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Button
+          className="w-full"
+          size="lg"
+          onClick={() => {
+            if (handoffUrl) window.location.href = handoffUrl;
+          }}
+        >
+          Authorize
+        </Button>
+        <Button
+          variant="outline"
+          className="w-full"
+          onClick={() => window.close()}
+        >
+          Cancel
+        </Button>
+      </div>
+    </AuthShell>
+  );
+}

package/apps/dashboard/src/app/globals.css

@@ -1,3 +1,57 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "../styles/fonts.css";
+@import "../styles/theme.css";
+
+/* Tailwind v4 — selector-based dark mode via data-theme */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+/*
+ * Expose shadcn bridge vars as Tailwind utilities.
+ * "inline" keeps them as runtime var() refs so light/dark switching works.
+ */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@theme inline {
+  --font-sans: 'Gellix', 'SF Arabic', system-ui, -apple-system, sans-serif;
+}
+
+@layer base {
+  html { -webkit-font-smoothing: antialiased; }
+  body {
+    font-family: var(--font-sans);
+    background-color: var(--th-bg-page);
+    color: var(--th-text-body);
+  }
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+button {
+  cursor: pointer;
+}

package/apps/dashboard/src/app/layout.tsx

@@ -1,15 +1,55 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { ThemeProvider, ThemeScript } from "@/components/theme-provider";
+import { ToastProvider } from "@/components/toast";
+import { ToastProvider as ContextToastProvider } from "@/context/ToastContext";
+import { I18nProvider } from "@/components/i18n-provider";
+import { AuthProvider } from "@/context/AuthContext";
+import { NetworkErrorHandler } from "@/components/network-error-handler";
+import { ModalProvider } from "@/context/ModalContext";
 
 export const metadata: Metadata = {
-  title: "Dashboard — Openship",
+  title: "Openship",
   description: "Manage your deployments, domains, and infrastructure.",
+  icons: {
+    icon: [
+      { url: '/favicon.ico' },
+      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
+      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+    ],
+    apple: [
+      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
+    ],
+    other: [
+      { url: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
+      { url: '/android-chrome-512x512.png', sizes: '512x512', type: 'image/png' },
+    ],
+  },
+  manifest: '/site.webmanifest',
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <ThemeScript />
+      </head>
+      <body>
+        <ThemeProvider>
+          <AuthProvider>
+            <I18nProvider>
+              <ToastProvider>
+                <ContextToastProvider>
+                  <ModalProvider>
+                    <NetworkErrorHandler />
+                    {children}
+                  </ModalProvider>
+                </ContextToastProvider>
+              </ToastProvider>
+            </I18nProvider>
+          </AuthProvider>
+        </ThemeProvider>
+      </body>
     </html>
   );
 }

package/apps/dashboard/src/components/auth-shell.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useTheme } from "@/components/theme-provider";
+import { useI18n } from "@/components/i18n-provider";
+import { Logo } from "@/components/logo";
+import { LanguageSwitcher } from "@/components/language-switcher";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, Moon, Sun } from "lucide-react";
+
+/**
+ * Shared wrapper for auth pages (login, register, forgot-password, etc.).
+ * Provides centered layout, brand, theme toggle, and language switcher.
+ */
+export function AuthShell({
+  children,
+  maxWidth = "max-w-[400px]",
+  onBack,
+}: {
+  children: React.ReactNode;
+  maxWidth?: string;
+  /** When provided, renders a back button in the top bar */
+  onBack?: () => void;
+}) {
+  const { resolvedTheme, toggle } = useTheme();
+  const { t } = useI18n();
+
+  return (
+    <div className="flex min-h-dvh flex-col items-center justify-center px-4 py-12">
+      {/* Top bar — logo left, controls right */}
+      <div className="fixed inset-x-0 top-0 flex items-center justify-between px-5 py-4">
+        <div className="flex items-center gap-2.5">
+          {onBack && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onBack}
+              aria-label={t.auth.back ?? "Back"}
+              className="mr-1"
+            >
+              <ArrowLeft className="size-4" />
+            </Button>
+          )}
+          <Logo size={24} />
+          <span className="text-[16px] font-semibold tracking-tight text-foreground">
+            {t.brand}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <LanguageSwitcher />
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={toggle}
+            aria-label={t.auth.toggleTheme}
+          >
+            {resolvedTheme === "dark" ? <Sun /> : <Moon />}
+          </Button>
+        </div>
+      </div>
+
+      <div className={`w-full ${maxWidth}`}>
+        {children}
+      </div>
+    </div>
+  );
+}

package/apps/dashboard/src/components/deployments/types.ts

@@ -0,0 +1,44 @@
+export interface Deployment {
+  id: string;
+  status: "success" | "failed" | "building" | "pending" | "canceled" | "cancelled";
+  domain: string;
+  framework: string;
+  commit: {
+    hash: string;
+    fullHash?: string | null;
+    message: string;
+    author: string;
+    timestamp: string;
+    url?: string | null;
+    changedFiles?: Array<{
+      name: string;
+      type: 'added' | 'modified' | 'removed';
+      language?: string;
+    }>;
+  };
+  buildTime: number | null;
+  createdAt: string;
+  type: string;
+  environment: string;
+  owner?: string;
+  repo?: string;
+  branch?: string;
+  projectId?: string;
+  projectName?: string;
+  failureReason?: string;
+}
+
+export interface Project {
+  id: string;
+  name: string;
+}
+
+export interface DeploymentStats {
+  total: number;
+  success: number;
+  failed: number;
+  building: number;
+  pending?: number;
+  canceled?: number;
+}
+

package/apps/dashboard/src/components/global-deployments/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Re-exports all shared deployment UI components from their canonical location.
+ *
+ * Any component that works across both the global deployments page and
+ * individual project pages should be imported from here.
+ */
+export {
+  DeploymentCard,
+  DeploymentsContent,
+  DeploymentsFilters,
+  DeploymentsList,
+  ProjectFilter,
+  DeploymentHeader,
+  EmptyState,
+  LoadingSkeleton,
+  DeploymentMenu,
+} from "@/app/(dashboard)/deployments/components";

package/apps/dashboard/src/components/i18n-provider.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import {
+  dictionaries,
+  defaultLocale,
+  isRtl,
+  type Dictionary,
+  type Locale,
+} from "@/i18n";
+
+/* ------------------------------------------------------------------ */
+/*  Context                                                            */
+/* ------------------------------------------------------------------ */
+
+type I18nContextValue = {
+  locale: Locale;
+  setLocale: (l: Locale) => void;
+  t: Dictionary;
+  dir: "ltr" | "rtl";
+};
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+/* ------------------------------------------------------------------ */
+/*  Provider                                                           */
+/* ------------------------------------------------------------------ */
+
+const STORAGE_KEY = "openship-locale";
+
+function getInitialLocale(): Locale {
+  if (typeof window === "undefined") return defaultLocale;
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored && stored in dictionaries) return stored as Locale;
+  // Try browser language
+  const nav = navigator.language.split("-")[0];
+  if (nav && nav in dictionaries) return nav as Locale;
+  return defaultLocale;
+}
+
+export function I18nProvider({ children }: { children: React.ReactNode }) {
+  const [locale, setLocaleState] = useState<Locale>(defaultLocale);
+
+  // Hydrate from localStorage after mount
+  useEffect(() => {
+    setLocaleState(getInitialLocale());
+  }, []);
+
+  const setLocale = useCallback((l: Locale) => {
+    setLocaleState(l);
+    localStorage.setItem(STORAGE_KEY, l);
+  }, []);
+
+  const t = dictionaries[locale];
+  const dir: "ltr" | "rtl" = isRtl(locale) ? "rtl" : "ltr";
+
+  // Sync <html> attributes
+  useEffect(() => {
+    document.documentElement.lang = locale;
+    document.documentElement.dir = dir;
+  }, [locale, dir]);
+
+  const value = useMemo<I18nContextValue>(
+    () => ({ locale, setLocale, t, dir }),
+    [locale, setLocale, t, dir],
+  );
+
+  return (
+    <I18nContext.Provider value={value}>{children}</I18nContext.Provider>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Hook                                                               */
+/* ------------------------------------------------------------------ */
+
+export function useI18n() {
+  const ctx = useContext(I18nContext);
+  if (!ctx) throw new Error("useI18n must be used within <I18nProvider>");
+  return ctx;
+}
+
+/**
+ * Simple string interpolation: replaces {key} tokens.
+ *
+ * @example interpolate("Sent to {email}.", { email: "a@b.c" })
+ */
+export function interpolate(
+  template: string,
+  vars: Record<string, string>,
+): string {
+  return template.replace(/\{(\w+)\}/g, (_, key) => vars[key] ?? `{${key}}`);
+}