feature: Add an admin notice about the usage of the legacy container …

…images

apps/web/app/dashboard/admin/page.tsx

@@ -1,5 +1,7 @@
 import { redirect } from "next/navigation";
 import AdminActions from "@/components/dashboard/admin/AdminActions";
+import { AdminCard } from "@/components/dashboard/admin/AdminCard";
+import { AdminNotices } from "@/components/dashboard/admin/AdminNotices";
 import ServerStats from "@/components/dashboard/admin/ServerStats";
 import UserList from "@/components/dashboard/admin/UserList";
 import { getServerAuthSession } from "@/server/auth";
@@ -10,14 +12,15 @@ export default async function AdminPage() {
     redirect("/");
   }
   return (
-    <>
-      <div className="rounded-md border bg-background p-4">
+    <div className="flex flex-col gap-4">
+      <AdminNotices />
+      <AdminCard>
         <ServerStats />
         <AdminActions />
-      </div>
-      <div className="mt-4 rounded-md border bg-background p-4">
+      </AdminCard>
+      <AdminCard>
         <UserList />
-      </div>
-    </>
+      </AdminCard>
+    </div>
   );
 }

apps/web/components/dashboard/admin/AdminCard.tsx

@@ -0,0 +1,3 @@
+export function AdminCard({ children }: { children: React.ReactNode }) {
+  return <div className="rounded-md border bg-background p-4">{children}</div>;
+}

apps/web/components/dashboard/admin/AdminNotices.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { api } from "@/lib/trpc";
+import { AlertCircle } from "lucide-react";
+
+import { AdminCard } from "./AdminCard";
+
+interface AdminNotice {
+  level: "info" | "warning" | "error";
+  message: React.ReactNode;
+  title: string;
+}
+
+function useAdminNotices() {
+  const { data } = api.admin.getAdminNoticies.useQuery();
+  if (!data) {
+    return [];
+  }
+  const ret: AdminNotice[] = [];
+  if (data.legacyContainersNotice) {
+    ret.push({
+      level: "warning",
+      message: (
+        <p>
+          You&apos;re using the legacy docker container images. Those will stop
+          getting supported soon. Please follow{" "}
+          <a
+            href="https://docs.hoarder.app/next/Guides/legacy-container-upgrade"
+            className="underline"
+          >
+            this guide
+          </a>{" "}
+          to upgrade.
+        </p>
+      ),
+      title: "Legacy Container Images",
+    });
+  }
+  return ret;
+}
+
+export function AdminNotices() {
+  const notices = useAdminNotices();
+
+  if (notices.length === 0) {
+    return null;
+  }
+  return (
+    <AdminCard>
+      <div className="flex flex-col gap-2">
+        {notices.map((n, i) => (
+          <Alert key={i} variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>{n.title}</AlertTitle>
+            <AlertDescription>{n.message}</AlertDescription>
+          </Alert>
+        ))}
+      </div>
+    </AdminCard>
+  );
+}
+
+export function AdminNoticeBadge() {
+  const notices = useAdminNotices();
+  if (notices.length === 0) {
+    return null;
+  }
+  return <Badge variant="destructive">{notices.length}</Badge>;
+}

apps/web/components/dashboard/header/ProfileOptions.tsx

@@ -16,6 +16,8 @@ import { LogOut, Moon, Paintbrush, Settings, Shield, Sun } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
 import { useTheme } from "next-themes";
 
+import { AdminNoticeBadge } from "../admin/AdminNotices";
+
 function DarkModeToggle() {
   const { t } = useTranslation();
   const { theme } = useTheme();
@@ -72,9 +74,12 @@ export default function SidebarProfileOptions() {
         </DropdownMenuItem>
         {session.user.role == "admin" && (
           <DropdownMenuItem asChild>
-            <Link href="/dashboard/admin">
-              <Shield className="mr-2 size-4" />
-              {t("admin.admin_settings")}
+            <Link href="/dashboard/admin" className="flex justify-between">
+              <div className="items-cente flex gap-2">
+                <Shield className="size-4" />
+                {t("admin.admin_settings")}
+              </div>
+              <AdminNoticeBadge />
             </Link>
           </DropdownMenuItem>
         )}

apps/web/components/ui/alert.tsx

@@ -0,0 +1,60 @@
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { cva } from "class-variance-authority";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

docs/docs/13-Guides/01-legacy-container-upgrade.md

@@ -0,0 +1,66 @@
+# Legacy Container Upgrade
+
+Hoarder's 0.16 release consolidated the web and worker containers into a single container and also dropped the need for the redis container. The legacy containers will stop being supported soon, to upgrade to the new container do the following:
+
+1. Remove the redis container and its volume if it had one.
+2. Move the environment variables that you've set exclusively to the `workers` container to the `web` container.
+3. Delete the `workers` container.
+4. Rename the web container image from `hoarder-app/hoarder-web` to `hoarder-app/hoarder`.
+
+```diff
+diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
+index cdfc908..6297563 100644
+--- a/docker/docker-compose.yml
++++ b/docker/docker-compose.yml
+@@ -1,7 +1,7 @@
+ version: "3.8"
+ services:
+   web:
+-    image: ghcr.io/hoarder-app/hoarder-web:${HOARDER_VERSION:-release}
++    image: ghcr.io/hoarder-app/hoarder:${HOARDER_VERSION:-release}
+     restart: unless-stopped
+     volumes:
+       - data:/data
+@@ -10,14 +10,10 @@ services:
+     env_file:
+       - .env
+     environment:
+-      REDIS_HOST: redis
+       MEILI_ADDR: http://meilisearch:7700
++      BROWSER_WEB_URL: http://chrome:9222
++      # OPENAI_API_KEY: ...
+       DATA_DIR: /data
+-  redis:
+-    image: redis:7.2-alpine
+-    restart: unless-stopped
+-    volumes:
+-      - redis:/data
+   chrome:
+     image: gcr.io/zenika-hub/alpine-chrome:123
+     restart: unless-stopped
+@@ -37,24 +33,7 @@ services:
+       MEILI_NO_ANALYTICS: "true"
+     volumes:
+       - meilisearch:/meili_data
+-  workers:
+-    image: ghcr.io/hoarder-app/hoarder-workers:${HOARDER_VERSION:-release}
+-    restart: unless-stopped
+-    volumes:
+-      - data:/data
+-    env_file:
+-      - .env
+-    environment:
+-      REDIS_HOST: redis
+-      MEILI_ADDR: http://meilisearch:7700
+-      BROWSER_WEB_URL: http://chrome:9222
+-      DATA_DIR: /data
+-      # OPENAI_API_KEY: ...
+-    depends_on:
+-      web:
+-        condition: service_started
+
+ volumes:
+-  redis:
+   meilisearch:
+   data:
+```

packages/trpc/routers/admin.ts

@@ -3,6 +3,7 @@ import { count, eq, sum } from "drizzle-orm";
 import { z } from "zod";
 
 import { assets, bookmarkLinks, bookmarks, users } from "@hoarder/db/schema";
+import serverConfig from "@hoarder/shared/config";
 import {
   LinkCrawlerQueue,
   OpenAIQueue,
@@ -277,4 +278,15 @@ export const adminAppRouter = router({
         });
       }
     }),
+  getAdminNoticies: adminProcedure
+    .output(
+      z.object({
+        legacyContainersNotice: z.boolean(),
+      }),
+    )
+    .query(() => {
+      return {
+        legacyContainersNotice: serverConfig.usingLegacySeparateContainers,
+      };
+    }),
 });