Dim: Alert for new items

[SunburnedGoose]

I got a PM on reddit about this:

Hey There,
Saw your post on the Infusion Calc thread regarding implementing it into DIM, so hoping I'm messaging the right guy. I use DIM all the time, thank you guys so much for making it and doing an absolutely outstanding job!
As I've been working on the whole T12 nonsense I am constantly refreshing DIM to find whatever new piece dropped before I forget about it and see if it's a better replacement for whatever I had before (I'm not going for a whatever T12 build, I'd rather have the right perks, so not just keeping high percentage roll stuff). Something that dawned on me that would make life a ton easier, is if for 24 or 48 hours after receiving any new piece there was a small "new" symbol on it or something in Dim so that you could just check at the end of the day, see what dropped and decide from there.
I'm not sure if this is even possible whatsoever, but dawned on me with the T12 grind so just thought I'd throw it out there in case there was a way.
Thanks again for all you guys do!

What I like about this is tracking items over time and alerting the user to useful items.

[ericnelson0]

I tried to duplicate the in-game overlay in a local branch. Looks something like this:

It works by using chrome's local storage to store the id's of items that weren't in the old items loaded. The new items are only shown until they are clicked then they are dropped from the local storage.

New items are only shown per "session" i.e. on complete reload all items will no longer be new.

I'm looking to get some feedback about the overlay and the description of how it works.

Should the new items persist until they are clicked even if the extension is closed?

[kyleshay]

oh wow! that looks really great @ericnelson0. I wonder how log we should persist the new state for. I'm partial to the item being new until you click it (even between reloads.) but could be convinced to go either way.

When you say complete reload, does that mean hard page refresh, or hitting the refresh icon/auto refresh?

another handy thing might be to add a is:new filter for the search box.

[ericnelson0]

I meant a hard page refresh new items will stay "new" if the refresh icon is clicked or when returning from the loadout builder.

That's a great idea for the filter

[kyleshay]

Ah, yes. Then that sounds good.

Curious, is that a css effect or an overlay? It looks so good!

[ericnelson0]

It's done using SVG and svg animations!

EDIT: It's an overlay on top of the item icon.

Here's the code if you're interested:

<svg width="44" height="44" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1" gradientTransform="rotate(45, 0.5, 0.5)">
        <stop offset="0%" stop-color="white" stop-opacity="0"></stop>
        <stop offset="25%" stop-color="white" stop-opacity="0.3"></stop>
        <stop offset="50%" stop-color="white" stop-opacity="0.5"></stop>
        <stop offset="75%" stop-color="white" stop-opacity="0.3"></stop>
        <stop offset="100%" stop-color="white" stop-opacity="0"></stop>
        <animateTransform attributeName="gradientTransform" attributeType="XML" type="translate" values="-2;0;2;" repeatCount="indefinite" dur="5s"/>
        <animateTransform attributeName="gradientTransform" attributeType="XML" type="rotate" values="45;45;45" repeatCount="indefinite" dur="5s" additive="sum"/>
      </linearGradient>
  </defs>
  <rect id="rect1" x="0" y="0" width="44" height="44" fill="url(#Gradient1)"/>
</svg>

[bhollis]

Looks awesome! I wonder if we need a "mark all as read" button somewhere, though I don't know where it'd be.

[joshmedeski]

Maybe we could add a notification as an optional setting that displays what the new item(s) is?

I would love this feature, then I can just glance at my computer while playing and see what that new item is without having to scroll or dig around.

p.s. I love the animation, great work!

[ericnelson0]

So one problem with adding a notification for every new item is that new items are generated when the stores are reloaded, so you might get too many messages at one time.

[kyleshay]

What if they were all in one "info" toaster?

4 new items found. use the `is:new` filter to locate the items

could also have a link on the toaster that expands the toaster to show more info, or opens a modal with the new items. not a big deal though. i think the is:new filter would be plenty.

[ericnelson0]

@kyleshay That could work. I'll see if I can flesh something out to get some opinions.

[kyleshay]

FYI there is a dimInfoService that helps with setting those up.

Example usage:

      dimInfoService.show('movebox', {
        title: 'Did you know?',
        body: ['<p>Items can be dragged and dropped between different characters/vault columns.</p>',
               '<p>Try it out next time!<p>'].join(''),
        hide: 'Don\'t show this tip again'
      });

otherwise it's as simple as:

toaster.pop('info', 'title text', 'content text');

[ericnelson0]

What about something like this:

Also, maybe I should just use toaster.pop. Otherwise, we'd get multiple copies as shown in the screencap.

EDIT:
Here's another with more items:

[bhollis]

Personally, I'd prefer not to have a notification. The "shine" is plenty.

[ericnelson0]

I tend to agree with @bhollis, the shine with the filter is enough for me. However, if there is a setting to turn this off then I don't see it being that big of a deal to have a toast message appear.

[kyleshay]

Maybe just update the 'hide this popup' copy to instead say something along the lines of "Don't show me this new item list again"

[ericnelson0]

How about this?

[bhollis]

Do people really want that at all, though? Every feature is code that needs to be maintained.

The info service also doesn't have any way of turning back on disabled notifications. So the first time somebody gets annoyed with this, it's gone forever, so I imagine the trend will be towards it never being shown except for new users.

[bhollis]

Plus it's not like I can click on those notifications to do anything cool, or hover over them to see the details of the item. It doesn't even say what light the item is. IMO totally useless and distracting, while the shines are elegant and fancy.

[ericnelson0]

Just to play the devil's advocate, it is somewhat annoying to have to look through all your items and try to find the "shiny" ones and, if necessary, an option can be added in the settings so that it can be re-enabled.

What if clicking on the items in the popup scrolled them into view? Would you find that more useful?

[delphiactual]

What if you moved them to the end of the queue in their respective buckets (i.e. all new items are shiny and the last things in each bucket)

[ericnelson0]

It'd definitely make them easier to find. However, the is:new filter already does that. I guess the problem is having to scroll the full page to find every new item after the filter is applied. As @joshmedeski said you might just want to glance over and see what items are new without having to do much more than that.

[kyleshay]

@SunburnedGoose any thoughts on the tooltip? other than that i'd say the PR is about ready to go!

[delphiactual]

You could always add a button that shows all the new gear in a separate modal...

[kyleshay]

that could be a nice addition. modal could have the actual clickable items along w/ move popup dialog... etc. i'm fine pulling this in, and adding that in when we have capacity for it.

[ericnelson0]

@kyleshay I have found a couple of bugs:

1. If an item is new and it is deleted it still is in the local storage
2. Items with an id of 0 are all considered new.

I was planning on looking at these tonight. If you want to wait until those are fixed to merge.

[ericnelson0]

@kyleshay do the popups have the ability to time out? Part of the reason the notifications might get annoying is having to click the 'x' for each one of them.

EDIT:
I fixed error 1 from above, but couldn't reproduce 2. Can anyone else reproduce 2?

[ericnelson0]

Nevermind. Fixed both issues. I'm just going to ignore consumables and general items (id == '0') for now. Should be good to go.

[Mulchman]

Saw this in action last night. I liked the shimmer on actual items (weapons/gear) but I didn't like having the shimmer on engrams and having to click each engram to get it to go away.

[kyleshay]

also to note -- in some weird cases i get the popup and all items are marked as new

i'll try to see if i can reliably reproduce that.

[Mulchman]

Haven't had a chance to report this earlier, but when moving an item that's shimmering its move icon is larger (like 2 times) than the normal item icon. I don't have an image or gif to show at this time. Just play and get some shimmer-y items, then drag and drop them some place else; you should see the icon be way bigger on the drop target.

[ericnelson0]

@Mulchman Thanks, just submitted a PR.