@shortlink-org/portolan 0.2.1 → 0.2.3

package/src/pages/settings/AboutSettings.tsx

@@ -0,0 +1,129 @@
+import { ArrowRight, BookOpen, CircleDot, GitBranch, ShieldCheck } from "lucide-react";
+import type { Variants } from "motion/react";
+import { Link } from "react-router";
+
+import { CatIllustration } from "../../components/CatIllustration";
+import { m, transitions } from "../../lib/motion";
+import {
+  PRODUCT_ISSUES,
+  PRODUCT_LICENSE,
+  PRODUCT_README,
+  PRODUCT_REPOSITORY,
+} from "../../lib/product";
+import { paths } from "../../routes";
+
+const ABOUT_CARD_MOTION: Variants = {
+  hidden: { opacity: 0, y: 8 },
+  shown: {
+    opacity: 1,
+    y: 0,
+    transition: { ...transitions.page, staggerChildren: 0.05 },
+  },
+  hover: {},
+};
+
+const ABOUT_COPY_MOTION: Variants = {
+  hidden: { opacity: 0, y: 6 },
+  shown: { opacity: 1, y: 0, transition: transitions.panel },
+};
+
+const ABOUT_CAT_MOTION: Variants = {
+  hidden: { opacity: 0, x: 18, rotate: 3 },
+  shown: {
+    opacity: 1,
+    x: 0,
+    rotate: 0,
+    transition: transitions.narrative,
+  },
+  hover: {
+    y: -7,
+    rotate: -2,
+    scale: 1.035,
+    transition: transitions.settle,
+  },
+};
+
+export function AboutSettings() {
+  return (
+    <section>
+      <div className="grid gap-grid lg:grid-cols-[minmax(0,1.25fr)_minmax(17rem,0.75fr)]">
+        <m.div
+          data-about-card
+          className="card grid items-center gap-4 sm:grid-cols-[minmax(0,1fr)_180px]"
+          variants={ABOUT_CARD_MOTION}
+          initial="hidden"
+          animate="shown"
+          whileHover="hover"
+        >
+          <m.div
+            className="flex flex-col items-start"
+            variants={ABOUT_COPY_MOTION}
+          >
+            <p className="max-w-prose text-muted">
+              Architecture from code and evidence. Product source,
+              documentation, releases and issue tracking live in the public
+              GitHub repository.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              <Link to={paths.landing()} className="product-primary">
+                Product page <ArrowRight size={15} aria-hidden />
+              </Link>
+              <a
+                href={PRODUCT_REPOSITORY}
+                target="_blank"
+                rel="noreferrer"
+                className="tbtn text-ink"
+              >
+                <GitBranch size={15} aria-hidden /> View product on GitHub
+              </a>
+            </div>
+          </m.div>
+          <m.div
+            data-about-cat
+            className="h-44 w-full justify-self-center sm:h-52"
+            variants={ABOUT_CAT_MOTION}
+          >
+            <CatIllustration scene="about" className="h-full w-full" />
+          </m.div>
+        </m.div>
+        <m.div
+          className="card"
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ ...transitions.page, delay: 0.06 }}
+        >
+          <div className="label mb-2">resources</div>
+          <div className="divide-y divide-line">
+            <a
+              href={PRODUCT_README}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2 py-2.5 text-muted transition-colors hover:text-ink"
+            >
+              <BookOpen size={15} aria-hidden className="shrink-0" />
+              Documentation
+            </a>
+            <a
+              href={PRODUCT_ISSUES}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2 py-2.5 text-muted transition-colors hover:text-ink"
+            >
+              <CircleDot size={15} aria-hidden className="shrink-0" />
+              Issues and feedback
+            </a>
+            <a
+              href={PRODUCT_LICENSE}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2 py-2.5 text-muted transition-colors hover:text-ink"
+            >
+              <ShieldCheck size={15} aria-hidden className="shrink-0" />
+              MIT License
+            </a>
+          </div>
+        </m.div>
+      </div>
+    </section>
+  );
+}

package/src/pages/settings/DeliverySettings.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
+import { Switch } from "@headlessui/react";
 import {
-  Check,
   ChevronDown,
   CircleAlert,
   FolderGit2,
@@ -14,6 +14,7 @@ import {
   previewDeliveryPreset,
 } from "../../lib/local-api";
 import type {
+  DeliveryFeatureId,
   DeliveryPreset,
   DeliveryProvider,
 } from "../../lib/local-api";
@@ -24,6 +25,7 @@ const STATUS_CLASS: Record<
 > = {
   added: "status-verified",
   changed: "status-declared",
+  removed: "status-unresolved",
   unchanged: "status-verified",
   conflict: "status-unresolved",
 };
@@ -35,12 +37,12 @@ export function DeliverySettings({ local }: { local: boolean }) {
   const [error, setError] = useState("");
   const say = useToastStore((state) => state.say);
 
-  const load = useCallback(async (provider?: DeliveryProvider) => {
+  const load = useCallback(async (provider?: DeliveryProvider, features?: DeliveryFeatureId[]) => {
     if (!local) return;
     setLoading(true);
     setError("");
     try {
-      setPlan(await previewDeliveryPreset(provider));
+      setPlan(await previewDeliveryPreset(provider, features));
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
     } finally {
@@ -60,6 +62,7 @@ export function DeliverySettings({ local }: { local: boolean }) {
       const installed = await installDeliveryPreset(
         plan.provider,
         plan.revision,
+        plan.features.filter((feature) => feature.selected).map((feature) => feature.id),
       );
       setPlan(installed);
       say(
@@ -76,6 +79,23 @@ export function DeliverySettings({ local }: { local: boolean }) {
     }
   }
 
+  function selectFeature(id: DeliveryFeatureId) {
+    if (!plan) return;
+    const feature = plan.features.find((item) => item.id === id);
+    if (!feature?.available) return;
+    const selected = new Set(
+      plan.features.filter((item) => item.selected).map((item) => item.id),
+    );
+    if (selected.has(id)) {
+      selected.delete(id);
+      if (id === "diff") selected.delete("sarif");
+    } else {
+      selected.add(id);
+      for (const required of feature.requires) selected.add(required);
+    }
+    void load(plan.provider, [...selected]);
+  }
+
   if (!local) {
     return (
       <div className="empty">
@@ -96,8 +116,8 @@ export function DeliverySettings({ local }: { local: boolean }) {
             <FolderGit2 size={16} className="text-accent" /> Delivery automation
           </div>
           <p className="mt-1 max-w-prose text-muted">
-            Install review checks and static catalog publishing directly into
-            this repository.
+            Choose the automation this repository needs, preview the generated
+            jobs, then install them together.
           </p>
         </div>
         <div
@@ -111,7 +131,12 @@ export function DeliverySettings({ local }: { local: boolean }) {
               type="button"
               disabled={loading || installing}
               aria-pressed={plan?.provider === provider}
-              onClick={() => void load(provider)}
+              onClick={() => void load(
+                provider,
+                plan?.features
+                  .filter((feature) => feature.selected && (feature.id !== "sarif" || provider === "github"))
+                  .map((feature) => feature.id),
+              )}
               className={`capitalize ${plan?.provider === provider ? "is-on" : ""}`}
             >
               {provider === "github" ? "GitHub" : "GitLab"}
@@ -157,15 +182,46 @@ export function DeliverySettings({ local }: { local: boolean }) {
             )}
           </div>
 
-          <ul className="mt-4 grid gap-2 text-muted sm:grid-cols-2">
+          <div className="mt-4 grid gap-2 sm:grid-cols-2">
             {plan.features.map((feature) => (
-              <li key={feature} className="flex items-center gap-2">
-                <Check size={14} className="shrink-0 text-verified" /> {feature}
-              </li>
+              <div
+                key={feature.id}
+                className={`flex items-start gap-3 rounded-control border px-3 py-3 transition-colors ${
+                  feature.available
+                    ? feature.selected
+                      ? "border-accent bg-surface"
+                      : "border-line hover:bg-surface"
+                    : "border-line opacity-60"
+                }`}
+              >
+                <span className="min-w-0 flex-1">
+                  <span className="block font-medium text-ink">{feature.label}</span>
+                  <span className="mt-0.5 block text-muted">{feature.description}</span>
+                  {!feature.available ? (
+                    <span className="mt-1 block text-faint">Available for GitHub only.</span>
+                  ) : feature.requires.length > 0 ? (
+                    <span className="mt-1 block text-faint">
+                      Enables {feature.requires.map((required) => plan.features.find((item) => item.id === required)?.label).join(", ")}.
+                    </span>
+                  ) : null}
+                </span>
+                <Switch
+                  checked={feature.selected}
+                  disabled={!feature.available || loading || installing}
+                  onChange={() => selectFeature(feature.id)}
+                  aria-label={feature.label}
+                  className="group mt-0.5 inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-line-strong bg-surface transition-colors outline-none data-checked:border-accent data-checked:bg-accent focus-visible:ring-2 focus-visible:ring-accent/40 disabled:cursor-not-allowed"
+                >
+                  <span
+                    aria-hidden
+                    className="size-3.5 translate-x-0.5 rounded-full bg-muted shadow-xs transition-transform group-data-checked:translate-x-[18px] group-data-checked:bg-canvas"
+                  />
+                </Switch>
+              </div>
             ))}
-          </ul>
+          </div>
 
-          <div className="mt-4 divide-y divide-line overflow-hidden rounded-control border border-line">
+          {plan.files.length > 0 ? <div className="mt-4 divide-y divide-line overflow-hidden rounded-control border border-line">
             {plan.files.map((file) => (
               <details
                 key={file.path}
@@ -194,7 +250,7 @@ export function DeliverySettings({ local }: { local: boolean }) {
                 </div>
               </details>
             ))}
-          </div>
+          </div> : <div className="empty mt-4">No delivery jobs selected.</div>}
 
           {error ? <p className="mt-3 text-unresolved">{error}</p> : null}
           <div className="mt-4 flex flex-wrap items-center justify-between gap-3">
@@ -204,12 +260,12 @@ export function DeliverySettings({ local }: { local: boolean }) {
             </p>
             {plan.status === "installed" ? (
               <span className="flex items-center gap-1.5 text-verified">
-                <ShieldCheck size={15} /> Preset installed
+                <ShieldCheck size={15} /> Selection installed
               </span>
             ) : (
               <button
                 type="button"
-                className="btn-accent"
+                className="product-primary"
                 disabled={installing || conflicts.length > 0}
                 onClick={() => void install()}
               >

package/src/routes.test.ts

@@ -170,11 +170,13 @@ describe("routes", () => {
     expect(paths.settingsPipeline()).toBe("/settings/pipeline");
     expect(paths.settingsDelivery()).toBe("/settings/delivery");
     expect(paths.settingsPreferences()).toBe("/settings/preferences");
+    expect(paths.settingsAbout()).toBe("/settings/about");
     for (const path of [
       paths.settingsProjects(),
       paths.settingsPipeline(),
       paths.settingsDelivery(),
       paths.settingsPreferences(),
+      paths.settingsAbout(),
     ]) expect(isRoutable(path)).toBe(true);
     expect(isRoutable("/settings/nope")).toBe(false);
     expect(allCatalogPaths(catalog)).toContain(paths.settings());

package/src/routes.ts

@@ -46,6 +46,7 @@ export const paths = {
   settingsPipeline: () => "/settings/pipeline",
   settingsDelivery: () => "/settings/delivery",
   settingsPreferences: () => "/settings/preferences",
+  settingsAbout: () => "/settings/about",
   external: (slug: string) => `/externals/${slug}`,
   registry: () => "/registry",
   /**
@@ -374,7 +375,7 @@ const ROUTES: RegExp[] = [
   /^\/language$/,
   /^\/problems$/,
   /^\/changes$/,
-  /^\/settings(?:\/(?:projects|pipeline|delivery|preferences))?$/,
+  /^\/settings(?:\/(?:projects|pipeline|delivery|preferences|about))?$/,
   /^\/externals\/[^/]+$/,
   /^\/map$/,
   /^\/adrs\/[^/]+$/,