Support for Bubble timeline on Akkoma and Chuckya

src/app.jsx

@@ -603,7 +603,8 @@ function SecondaryRoutes({ isLoggedIn }) {
       <Route path="/:instance?/a/:id" element={<AccountStatuses />} />
       <Route path="/:instance?/p">
         <Route index element={<Public />} />
-        <Route path="l" element={<Public local />} />
+        <Route path="l" element={<Public variant="local" />} />
+        <Route path="b" element={<Public variant="bubble" />} />
       </Route>
       <Route path="/:instance?/trending" element={<Trending />} />
       <Route path="/:instance?/search" element={<Search />} />

src/components/ICONS.jsx

@@ -187,4 +187,5 @@ export const ICONS = {
   edit: () => import('@iconify-icons/mingcute/edit-4-line'),
   'zoom-in': () => import('@iconify-icons/mingcute/zoom-in-line'),
   'zoom-out': () => import('@iconify-icons/mingcute/zoom-out-line'),
+  star2: () => import('@iconify-icons/mingcute/star-2-line'),
 };

src/components/nav-menu.jsx

@@ -349,6 +349,15 @@ function NavMenu(props) {
               <Trans>Local</Trans>
             </span>
           </MenuLink>
+          {(supports('@chuckya/bubble-timeline') ||
+            supports('@akkoma/bubble-timeline')) && (
+            <MenuLink to={`/${instance}/p/b`}>
+              <Icon icon="star2" size="l" />{' '}
+              <span>
+                <Trans>Bubble</Trans>
+              </span>
+            </MenuLink>
+          )}
           <MenuLink to={`/${instance}/p`}>
             <Icon icon="earth" size="l" />{' '}
             <span>

src/components/shortcuts-settings.jsx

@@ -48,7 +48,7 @@ const TYPE_TEXT = {
   following: msg`Home / Following`,
   notifications: msg`Notifications`,
   list: msg`Lists`,
-  public: msg`Public (Local / Federated)`,
+  public: msg`Local / Bubble / Federated`,
   search: msg`Search`,
   'account-statuses': msg`Account`,
   bookmarks: msg`Bookmarks`,
@@ -67,9 +67,23 @@ const TYPE_PARAMS = {
   ],
   public: [
     {
-      text: msg`Local only`,
-      name: 'local',
-      type: 'checkbox',
+      text: msg`Type`,
+      name: 'variant',
+      type: 'select',
+      values: [
+        {
+          name: msg`Local`,
+          value: 'local',
+        },
+        {
+          name: msg`Bubble`,
+          value: 'bubble',
+        },
+        {
+          name: msg`Federated`,
+          value: 'federated',
+        },
+      ],
     },
     {
       text: msg`Instance`,
@@ -162,10 +176,27 @@ export const SHORTCUTS_META = {
   },
   public: {
     id: 'public',
-    title: ({ local }) => (local ? t`Local` : t`Federated`),
+    title: ({ variant }) =>
+      ({
+        local: t`Local`,
+        bubble: t`Bubble`,
+        federated: t`Federated`,
+      })[variant],
     subtitle: ({ instance }) => instance || api().instance,
-    path: ({ local, instance }) => `/${instance}/p${local ? '/l' : ''}`,
-    icon: ({ local }) => (local ? 'building' : 'earth'),
+    path: ({ variant, instance }) => {
+      const suffix = {
+        local: '/l',
+        bubble: '/b',
+        federated: '',
+      }[variant];
+      return `/${instance}/p${suffix}`;
+    },
+    icon: ({ variant }) =>
+      ({
+        local: 'building',
+        bubble: 'star2',
+        federated: 'earth',
+      })[variant],
   },
   trending: {
     id: 'trending',
@@ -640,7 +671,15 @@ function ShortcutForm({
             </label>
           </p>
           {TYPE_PARAMS[currentType]?.map?.(
-            ({ text, name, type, placeholder, pattern, notRequired }) => {
+            ({
+              text,
+              name,
+              type,
+              placeholder,
+              pattern,
+              notRequired,
+              values,
+            }) => {
               if (currentType === 'list') {
                 return (
                   <p>
@@ -663,6 +702,28 @@ function ShortcutForm({
                     </label>
                   </p>
                 );
+              } else if (type === 'select') {
+                let options = values.map(({ name, value }) => (
+                  <option key={value} value={value}>
+                    {_(name)}
+                  </option>
+                ));
+
+                return (
+                  <p>
+                    <label>
+                      <span>{_(text)}</span>
+                      <select
+                        name={name}
+                        required={!notRequired}
+                        disabled={disabled || uiState === 'loading'}
+                        dir="auto"
+                      >
+                        {options}
+                      </select>
+                    </label>
+                  </p>
+                );
               }
 
               return (
@@ -893,7 +954,7 @@ function ImportExport({ shortcuts, onClose }) {
                             shortcut[name] ? (
                               <>
                                 <span class="tag collapsed insignificant">
-                                  {text}:{' '}
+                                  {_(text)}:{' '}
                                   {type === 'checkbox'
                                     ? shortcut[name] === 'on'
                                       ? '✅'