display module names properly

The schema for fully-qualified names for packages has changed with
Qt 6.7.0. In the past, it was sufficient to just split the name on `.`
and take the second-to-last substring:

* the name 'qt.qt6.670.qtshadertools.win64_llvm_mingw' becomes
  'qtshadertools'

That doesn't work for new packages like this:

* 'qt.qt6.680.addons.qt3d.debug_information.win64_llvm_mingw' becomes
  'debug_information'
* 'qt.qt6.670.qtshadertools.debug_information.win64_llvm_mingw' becomes
  'debug_information'

It is now more effective to use a regular expression to pick out the
module name.

src/Components/PackageDetailPanel.tsx

@@ -1,17 +1,14 @@
 import React from "react";
-import { PackageUpdate } from "../lib/types";
+import { packageNameToModuleName, PackageUpdate } from "../lib/types";
 
 interface Props {
   pkg: PackageUpdate;
 }
 
-const nickname = (fullname: string): string =>
-  fullname.split(".").at(-2) || fullname;
-
 const PackageDetailPanel = ({ pkg }: Props): JSX.Element => (
   <details>
     <summary>
-      <strong>{nickname(pkg.Name)}:</strong> {pkg.DisplayName}
+      <strong>{packageNameToModuleName(pkg.Name)}:</strong> {pkg.DisplayName}
     </summary>
     {pkg.Description ? (
       <div>

src/lib/types.ts

@@ -22,12 +22,15 @@ export interface SelectableElement {
 export const seToolInstallName = (se: SelectableElement): string | null =>
   se.pkg === null ? null : se.pkg.Name;
 
+const installableModuleRegex = /^qt\.qt\d\.\d+(\.addons)?\.(.+)\.[^.]+$/;
+export const packageNameToModuleName = (name: string): string =>
+  name.replace(installableModuleRegex, "$2");
+
 export const seModuleInstallName = (se: SelectableElement): string | null => {
   if (se.pkg === null) {
     return null;
   }
-  const parts = se.pkg.Name.split(".");
-  return parts[parts.length - 2];
+  return packageNameToModuleName(se.pkg.Name);
 };
 
 export interface RawPackageUpdate {