Improve addon UX

.storybook/design-addon/register.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { AddonPanel } from '@storybook/components';
-import { useParameter, useStorybookState } from '@storybook/api';
+import { useParameter, useStorybookState, useAddonState } from '@storybook/api';
 import { addons, types } from '@storybook/addons';
 import { styled } from '@storybook/theming';
 
@@ -35,18 +35,32 @@ const Asset = ({ url }) => {
 const Content = () => {
   // story's parameter being retrieved here
   const results = useParameter('assets', []);
-  // the id of story retrieved from Storybook global state
+  // addon state being persisted here
+  const [selected, setSelected] = useAddonState('my/design-addon', 0);
+  // the id of the story retrieved from Storybook global state
   const { storyId } = useStorybookState();
 
   if (results.length === 0) {
     return null;
   }
 
-  const url = getUrl(results[0]).replace('{id}', storyId);
+  if (results.length && !results[selected]) {
+    setSelected(0);
+    return null;
+  }
 
+  const url = getUrl(results[selected]).replace('{id}', storyId);
   return (
     <Fragment>
       <Asset url={url} />
+      {results.length > 1 ? (
+        <ActionBar
+          actionItems={results.map((i, index) => ({
+            title: typeof i === 'string' ? `asset #${index + 1}` : i.name,
+            onClick: () => setSelected(index),
+          }))}
+        />
+      ) : null}
     </Fragment>
   );
 };