Add final user tags feature work

Resolves #1245

src/core/GlobalStyles.tsx

@@ -8,7 +8,7 @@ import React, {
   useLayoutEffect,
 } from "react";
 
-import { stateWithLocalstorageItems as initialCriticalSettingsState } from "#/features/settings/settingsSlice";
+import { initialState as initialSettingsState } from "#/features/settings/settingsSlice";
 import { isNative } from "#/helpers/device";
 import useSystemDarkMode, {
   DARK_MEDIA_SELECTOR,
@@ -67,11 +67,11 @@ function updateDocumentTheme(
 
 // Prevent flash of white content and repaint before react component setup
 updateDocumentTheme(
-  initialCriticalSettingsState.appearance.dark.usingSystemDarkMode
+  initialSettingsState.appearance.dark.usingSystemDarkMode
     ? window.matchMedia(DARK_MEDIA_SELECTOR).matches
-    : initialCriticalSettingsState.appearance.dark.userDarkMode,
-  initialCriticalSettingsState.appearance.dark.pureBlack,
-  initialCriticalSettingsState.appearance.theme,
+    : initialSettingsState.appearance.dark.userDarkMode,
+  initialSettingsState.appearance.dark.pureBlack,
+  initialSettingsState.appearance.theme,
 );
 
 const fixedDeviceFontCss = css`

src/core/listeners/AppUrlListener.tsx

@@ -38,9 +38,9 @@ export default function AppUrlListener() {
 
     // wait for router to get into a good state before pushing
     // (needed for pushing user profiles from app startup)
-    const resolved = await redirectToLemmyObjectIfNeeded(url);
+    const result = await redirectToLemmyObjectIfNeeded(url);
 
-    if (!resolved) presentToast(deepLinkFailed);
+    if (result === "not-found") presentToast(deepLinkFailed);
   };
 
   const onAppUrlEvent = useEffectEvent(onAppUrl);

src/features/auth/PageContext.tsx

@@ -93,7 +93,7 @@ interface IPageContext {
 
   presentCreateCrosspost: (post: PostView) => void;
 
-  presentUserTag: (person: Person) => void;
+  presentUserTag: (person: Person, sourceUrl?: string) => void;
 
   presentDatabaseErrorModal: (automatic?: boolean) => void;
 }
@@ -255,10 +255,14 @@ export function PageContextProvider({ value, children }: PageContextProvider) {
   // Ban user end
 
   // User tag start
-  const [userTagItem, setUserTagItem] = useState<Person | undefined>();
+  const [userTagPerson, setUserTagPerson] = useState<Person | undefined>();
+  const [userTagSourceUrl, setUserTagSourceUrl] = useState<
+    string | undefined
+  >();
   const [isUserTagOpen, setIsUserTagOpen] = useState(false);
-  const presentUserTag = (person: Person) => {
-    setUserTagItem(person);
+  const presentUserTag = (person: Person, sourceUrl?: string) => {
+    setUserTagPerson(person);
+    setUserTagSourceUrl(sourceUrl);
     setIsUserTagOpen(true);
   };
   // User tag end
@@ -343,7 +347,8 @@ export function PageContextProvider({ value, children }: PageContextProvider) {
         setIsOpen={setIsSelectTextOpen}
       />
       <UserTagModal
-        person={userTagItem!}
+        person={userTagPerson!}
+        sourceUrl={userTagSourceUrl!}
         isOpen={isUserTagOpen}
         setIsOpen={setIsUserTagOpen}
       />

src/features/comment/CommentHeader.tsx

@@ -97,6 +97,10 @@ export default function CommentHeader({
     (state) => state.settings.general.comments.showCollapsed,
   );
   const inModqueue = useInModqueue();
+  const tagsEnabled = useAppSelector((state) => state.settings.tags.enabled);
+  const trackVotesEnabled = useAppSelector(
+    (state) => state.settings.tags.trackVotes,
+  );
 
   function renderActions() {
     if (inModqueue) return <ModqueueItemActions item={commentView} />;
@@ -146,6 +150,7 @@ export default function CommentHeader({
                 distinguished={comment.distinguished}
                 showBadge={false}
                 showTag={false}
+                sourceUrl={commentView.comment.ap_id}
               />{" "}
               deleted their <span className="ion-text-nowrap">comment :(</span>
             </DeletedLabel>
@@ -164,6 +169,7 @@ export default function CommentHeader({
                 distinguished={comment.distinguished}
                 showBadge={false}
                 showTag={false}
+                sourceUrl={commentView.comment.ap_id}
               />
               &apos;s comment
             </DeletedLabel>
@@ -180,12 +186,15 @@ export default function CommentHeader({
               distinguished={comment.distinguished}
               showBadge={!context}
               showTag={false}
+              sourceUrl={commentView.comment.ap_id}
             />
-            <UserScore person={commentView.creator} />
+            {tagsEnabled && trackVotesEnabled && (
+              <UserScore person={commentView.creator} />
+            )}
             <CommentVote item={commentView} />
             <Edited item={commentView} />
             <Spacer>
-              <UserTag person={commentView.creator} />
+              {tagsEnabled && <UserTag person={commentView.creator} />}
             </Spacer>
             {renderAside(comment.published)}
           </>

src/features/inbox/InboxItem.tsx

@@ -215,6 +215,7 @@ export default function InboxItem({ item }: InboxItemProps) {
             person={item.creator}
             className={labelStyles}
             showBadge={false}
+            sourceUrl={getSourceUrl()}
           />{" "}
           in{" "}
           <CommunityLink
@@ -246,6 +247,10 @@ export default function InboxItem({ item }: InboxItemProps) {
     return item.private_message.published;
   }
 
+  function getSourceUrl() {
+    if ("comment" in item) return item.comment.ap_id;
+  }
+
   function getIcon() {
     if ("person_mention" in item) return personCircle;
     if ("comment_reply" in item) {

src/features/labels/links/PersonLink.tsx

@@ -7,7 +7,9 @@ import { LongPressOptions, useLongPress } from "use-long-press";
 import { ShareImageContext } from "#/features/share/asImage/ShareAsImage";
 import UserScore from "#/features/tags/UserScore";
 import UserTag from "#/features/tags/UserTag";
-import usePresentUserActions from "#/features/user/usePresentUserActions";
+import usePresentUserActions, {
+  PresentUserActionsOptions,
+} from "#/features/user/usePresentUserActions";
 import {
   preventOnClickNavigationBug,
   stopIonicTapClick,
@@ -25,7 +27,7 @@ const Prefix = styled.span`
   font-weight: normal;
 `;
 
-interface PersonLinkProps {
+interface PersonLinkProps extends Pick<PresentUserActionsOptions, "sourceUrl"> {
   person: Person;
   opId?: number;
   distinguished?: boolean;
@@ -48,6 +50,7 @@ export default function PersonLink({
   showBadge = true,
   showTag = true,
   disableInstanceClick,
+  sourceUrl,
 }: PersonLinkProps) {
   const buildGeneralBrowseLink = useBuildGeneralBrowseLink();
   const isAdmin = useAppSelector((state) => state.site.response?.admins)?.some(
@@ -59,12 +62,19 @@ export default function PersonLink({
   const tag = useAppSelector(
     (state) => state.userTag.tagByRemoteHandle[getRemoteHandle(person)],
   );
+  const tagsEnabled = useAppSelector((state) => state.settings.tags.enabled);
+  const trackVotesEnabled = useAppSelector(
+    (state) => state.settings.tags.trackVotes,
+  );
+  const hideInstance = useAppSelector(
+    (state) => state.settings.tags.hideInstance,
+  );
 
   const onCommunityLinkLongPress = useCallback(() => {
     stopIonicTapClick();
 
-    presentUserActions(person);
-  }, [presentUserActions, person]);
+    presentUserActions(person, { sourceUrl });
+  }, [presentUserActions, person, sourceUrl]);
 
   const bind = useLongPress(onCommunityLinkLongPress, {
     cancelOnMovement: 15,
@@ -89,9 +99,14 @@ export default function PersonLink({
 
   const tagText = typeof tag === "object" ? tag.text : undefined;
 
+  const shouldHideInstanceWithTagText = tagText && hideInstance;
+  const shouldShowInstanceByDefault =
+    showInstanceWhenRemote || forceInstanceUrl || !tagText;
+
   const [handle, instance] = renderHandle({
-    showInstanceWhenRemote:
-      !tagText && (showInstanceWhenRemote || forceInstanceUrl),
+    showInstanceWhenRemote: shouldHideInstanceWithTagText
+      ? false
+      : shouldShowInstanceByDefault,
     item: person,
   });
 
@@ -104,9 +119,9 @@ export default function PersonLink({
           <AgeBadge published={person.published} />
         </>
       )}
-      {showTag && (
+      {showTag && tagsEnabled && (
         <>
-          <UserScore person={person} prefix=" " />
+          {trackVotesEnabled && <UserScore person={person} prefix=" " />}
           <UserTag person={person} prefix=" " />
         </>
       )}

src/features/post/detail/PostHeader.tsx

@@ -272,7 +272,11 @@ export default function PostHeader({
                   showInstanceWhenRemote
                   subscribed={post.subscribed}
                 />{" "}
-                <PersonLink person={post.creator} prefix="by" />
+                <PersonLink
+                  person={post.creator}
+                  prefix="by"
+                  sourceUrl={post.post.ap_id}
+                />
               </By>
               <Stats post={post} />
               {post.post.locked && <Locked />}

src/features/post/inFeed/compact/CompactPost.tsx

@@ -220,6 +220,7 @@ export default function CompactPost({ post }: PostProps) {
                     person={post.creator}
                     showInstanceWhenRemote
                     prefix="by"
+                    sourceUrl={post.post.ap_id}
                   />
                 ) : (
                   <>
@@ -233,7 +234,11 @@ export default function CompactPost({ post }: PostProps) {
                     {alwaysShowAuthor && (
                       <>
                         {" "}
-                        <PersonLink person={post.creator} prefix="by" />
+                        <PersonLink
+                          person={post.creator}
+                          prefix="by"
+                          sourceUrl={post.post.ap_id}
+                        />
                       </>
                     )}
                   </>

src/features/post/inFeed/large/LargePost.tsx

@@ -155,6 +155,7 @@ export default function LargePost({ post }: PostProps) {
                   showInstanceWhenRemote
                   prefix="by"
                   disableInstanceClick
+                  sourceUrl={post.post.ap_id}
                 />
               ) : (
                 <>
@@ -175,6 +176,7 @@ export default function LargePost({ post }: PostProps) {
                         person={post.creator}
                         prefix="by"
                         disableInstanceClick
+                        sourceUrl={post.post.ap_id}
                       />
                     </>
                   )}

src/features/settings/settingsSlice.tsx

@@ -7,7 +7,6 @@ import {
 } from "@reduxjs/toolkit";
 import Dexie from "dexie";
 import { PostSortType } from "lemmy-js-client";
-import * as _ from "radashi";
 
 import { loggedInSelector } from "#/features/auth/authSelectors";
 import { MAX_DEFAULT_COMMENT_DEPTH } from "#/helpers/lemmy";
@@ -154,13 +153,17 @@ interface SettingsState {
   };
 }
 
+/**
+ * We continue using localstorage for specific items because indexeddb is slow
+ * and we don't want to wait for it to load before rendering the app and cause flickering
+ */
 export const initialState: SettingsState = {
   ready: false,
   databaseError: undefined,
   appearance: {
     font: {
-      fontSizeMultiplier: 1,
-      useSystemFontSize: false,
+      fontSizeMultiplier: get(LOCALSTORAGE_KEYS.FONT.FONT_SIZE_MULTIPLIER) ?? 1,
+      useSystemFontSize: get(LOCALSTORAGE_KEYS.FONT.USE_SYSTEM) ?? false,
     },
     general: {
       userInstanceUrlDisplay: OInstanceUrlDisplayMode.Never,
@@ -190,13 +193,13 @@ export const initialState: SettingsState = {
       voteDisplayMode: OVoteDisplayMode.Total,
     },
     dark: {
-      usingSystemDarkMode: true,
-      userDarkMode: false,
-      pureBlack: true,
+      usingSystemDarkMode: get(LOCALSTORAGE_KEYS.DARK.USE_SYSTEM) ?? true,
+      userDarkMode: get(LOCALSTORAGE_KEYS.DARK.USER_MODE) ?? false,
+      pureBlack: get(LOCALSTORAGE_KEYS.DARK.PURE_BLACK) ?? true,
       quickSwitch: true,
     },
-    deviceMode: "ios",
-    theme: "default",
+    deviceMode: get(LOCALSTORAGE_KEYS.DEVICE_MODE) ?? "ios",
+    theme: get(LOCALSTORAGE_KEYS.THEME) ?? "default",
     commentsTheme: "rainbow",
     votesTheme: "lemmy",
   },
@@ -238,7 +241,7 @@ export const initialState: SettingsState = {
   },
   tags: {
     enabled: false,
-    trackVotes: true,
+    trackVotes: false,
     hideInstance: true,
     saveSource: true,
   },
@@ -248,27 +251,6 @@ export const initialState: SettingsState = {
   },
 };
 
-// We continue using localstorage for specific items because indexeddb is slow
-// and we don't want to wait for it to load before rendering the app and cause flickering
-export const stateWithLocalstorageItems: SettingsState = _.assign(
-  initialState,
-  {
-    appearance: {
-      font: {
-        fontSizeMultiplier: get(LOCALSTORAGE_KEYS.FONT.FONT_SIZE_MULTIPLIER),
-        useSystemFontSize: get(LOCALSTORAGE_KEYS.FONT.USE_SYSTEM),
-      },
-      dark: {
-        usingSystemDarkMode: get(LOCALSTORAGE_KEYS.DARK.USE_SYSTEM),
-        userDarkMode: get(LOCALSTORAGE_KEYS.DARK.USER_MODE),
-        pureBlack: get(LOCALSTORAGE_KEYS.DARK.PURE_BLACK),
-      },
-      deviceMode: get(LOCALSTORAGE_KEYS.DEVICE_MODE),
-      theme: get(LOCALSTORAGE_KEYS.THEME),
-    },
-  },
-);
-
 export const defaultCommentDepthSelector = createSelector(
   [
     (state: RootState) =>
@@ -297,7 +279,7 @@ export const defaultThreadCollapse = createSelector(
 
 export const appearanceSlice = createSlice({
   name: "appearance",
-  initialState: stateWithLocalstorageItems,
+  initialState,
   extraReducers: (builder) => {
     builder.addCase(
       fetchSettingsFromDatabase.fulfilled,