@@ -68,7 +83,11 @@ export const WritePage = () => {
{navigation.state === 'submitting' && (
)}
-
{userState.auth && userState.user?.pubkey && (
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 8458aae..95669e4 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -271,16 +271,16 @@ h6 {
}
/* the 4 classes below here are a temp fix for the games dropdown stylings */
-
-.dropdownMainMenu.dropdownMainMenuAlt {
+/* add an exception (not category) for normal dropdown - due !important */
+.dropdownMainMenu.dropdownMainMenuAlt:not(.category) {
max-height: unset !important;
}
-.dropdownMainMenu.dropdownMainMenuAlt > div {
+.dropdownMainMenu.dropdownMainMenuAlt:not(.category) > div {
height: unset !important;
}
-.dropdownMainMenu.dropdownMainMenuAlt > div > div {
+.dropdownMainMenu.dropdownMainMenuAlt:not(.category) > div > div {
height: unset !important;
width: 100% !important;
display: flex;
@@ -291,14 +291,14 @@ h6 {
padding: 5px;
}
-.dropdownMainMenu.dropdownMainMenuAlt > div > div > div {
+.dropdownMainMenu.dropdownMainMenuAlt:not(.category) > div > div > div {
position: relative !important;
left: unset !important;
top: unset !important;
}
.dropdownMainMenuItem {
- transition: ease 0.4s;
+ transition: background ease 0.4s, color ease 0.4s;
background: linear-gradient(
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.03)
@@ -318,8 +318,16 @@ h6 {
cursor: pointer;
}
+.dropdownMainMenuItem.dropdownMainMenuItemCategory {
+ position: relative;
+}
+.dropdownMainMenuItemCategory.dropdownMainMenuItemCategoryAlt {
+ display: flex;
+ align-items: center;
+}
+
.dropdownMainMenuItem:hover {
- transition: ease 0.4s;
+ transition: background ease 0.4s, color ease 0.4s;
background: linear-gradient(
rgba(255, 255, 255, 0.05),
rgba(255, 255, 255, 0.05)
@@ -385,6 +393,10 @@ h6 {
justify-content: center;
}
+.labelMain.labelMainCategory {
+ flex-grow: 1;
+}
+
.inputWrapperMain {
width: 100%;
display: flex;
@@ -530,6 +542,15 @@ h6 {
align-items: center;
}
+.CheckboxMain.CheckboxIndeterminate::before {
+ content: '\2501';
+ transition: ease 0.2s;
+ transform: scale(1);
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
+ border-radius: 6px;
+}
+
.CheckboxMain:checked::before {
transition: ease 0.2s;
transform: scale(1);
@@ -632,6 +653,9 @@ a:hover {
bottom: 0;
border-radius: unset;
}
+.btnMainInsideField + .btnMainInsideField {
+ right: 50px;
+}
.inputMain.inputMainWithBtn {
padding-right: 50px;
diff --git a/src/styles/write.css b/src/styles/write.css
index 7ac363d..412bcec 100644
--- a/src/styles/write.css
+++ b/src/styles/write.css
@@ -11,5 +11,5 @@
flex-direction: row;
justify-content: end;
align-items: center;
+ gap: 25px;
}
-
diff --git a/src/types/category.ts b/src/types/category.ts
new file mode 100644
index 0000000..4d871f8
--- /dev/null
+++ b/src/types/category.ts
@@ -0,0 +1,12 @@
+export interface Category {
+ name: string
+ sub?: (Category | string)[]
+}
+
+export type CategoriesData = Category[]
+
+export interface Categories {
+ name: string
+ hierarchy: string
+ l: string[]
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 8fe37df..7b2f35c 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -4,3 +4,5 @@ export * from './nostr'
export * from './user'
export * from './zap'
export * from './blog'
+export * from './category'
+export * from './popup'
diff --git a/src/types/mod.ts b/src/types/mod.ts
index bc27e18..c520ac3 100644
--- a/src/types/mod.ts
+++ b/src/types/mod.ts
@@ -31,6 +31,10 @@ export interface ModFormState {
originalAuthor?: string
screenshotsUrls: string[]
tags: string
+ /** Hierarchical labels */
+ LTags: string[]
+ /** Category labels for category search */
+ lTags: string[]
downloadUrls: DownloadUrl[]
}
diff --git a/src/types/popup.ts b/src/types/popup.ts
new file mode 100644
index 0000000..b1551cf
--- /dev/null
+++ b/src/types/popup.ts
@@ -0,0 +1,9 @@
+export interface PopupProps {
+ handleClose: () => void
+}
+
+export interface AlertPopupProps extends PopupProps {
+ header: string
+ label: string
+ handleConfirm: (confirm: boolean) => void
+}
diff --git a/src/utils/category.ts b/src/utils/category.ts
new file mode 100644
index 0000000..85c7d97
--- /dev/null
+++ b/src/utils/category.ts
@@ -0,0 +1,84 @@
+import { Categories, Category } from 'types/category'
+import categoriesData from './../assets/categories/categories.json'
+
+export const flattenCategories = (
+ categories: (Category | string)[],
+ parentPath: string[] = []
+): Categories[] => {
+ return categories.flatMap
((cat) => {
+ if (typeof cat === 'string') {
+ const path = [...parentPath, cat]
+ const hierarchy = path.join(' > ')
+ return [{ name: cat, hierarchy, l: path }]
+ } else {
+ const path = [...parentPath, cat.name]
+ const hierarchy = path.join(' > ')
+ if (cat.sub) {
+ const obj: Categories = { name: cat.name, hierarchy, l: path }
+ return [obj].concat(flattenCategories(cat.sub, path))
+ }
+ return [{ name: cat.name, hierarchy, l: path }]
+ }
+ })
+}
+
+export const getCategories = () => {
+ return flattenCategories(categoriesData)
+}
+
+export const addToUserCategories = (
+ categories: (string | Category)[],
+ input: string
+) => {
+ const segments = input.split('>').map((s) => s.trim())
+ let currentLevel: (string | Category)[] = categories
+
+ for (let i = 0; i < segments.length; i++) {
+ const segment = segments[i].trim()
+ const existingNode = currentLevel.find(
+ (item) => typeof item !== 'string' && item.name === segment
+ )
+ if (!existingNode) {
+ const newCategory: Category = { name: segment, sub: [] }
+ currentLevel.push(newCategory)
+ if (newCategory.sub) {
+ currentLevel = newCategory.sub
+ }
+ } else if (typeof existingNode !== 'string') {
+ if (!existingNode.sub) {
+ existingNode.sub = []
+ }
+ currentLevel = existingNode.sub
+ }
+ }
+}
+
+export const deleteFromUserCategories = (
+ categories: (string | Category)[],
+ input: string
+) => {
+ const segments = input.split('>').map((s) => s.trim())
+ const value = segments.pop()
+ if (!value) {
+ return
+ }
+
+ let currentLevel: (string | Category)[] = categories
+ for (let i = 0; i < segments.length; i++) {
+ const key = segments[i]
+ const existingNode = currentLevel.find(
+ (item) => typeof item === 'object' && item.name === key
+ ) as Category
+
+ if (existingNode && existingNode.sub) {
+ currentLevel = existingNode.sub
+ }
+ }
+ const valueIndex = currentLevel.findIndex(
+ (item) =>
+ item === value || (typeof item === 'object' && item.name === value)
+ )
+ if (valueIndex !== -1) {
+ currentLevel.splice(valueIndex, 1)
+ }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 91fe37b..d8c7a4d 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -4,6 +4,8 @@ export * from './url'
export * from './utils'
export * from './zap'
export * from './localStorage'
+export * from './sessionStorage'
export * from './consts'
export * from './blog'
export * from './curationSets'
+export * from './category'
diff --git a/src/utils/mod.ts b/src/utils/mod.ts
index 24b59bd..07f34a0 100644
--- a/src/utils/mod.ts
+++ b/src/utils/mod.ts
@@ -1,7 +1,7 @@
import { NDKEvent } from '@nostr-dev-kit/ndk'
import { Event } from 'nostr-tools'
import { ModDetails, ModFormState } from '../types'
-import { getTagValue } from './nostr'
+import { getTagValue, getTagValues } from './nostr'
/**
* Extracts and normalizes mod data from an event.
@@ -43,6 +43,12 @@ export const extractModData = (event: Event | NDKEvent): ModDetails => {
originalAuthor: getFirstTagValue('originalAuthor'),
screenshotsUrls: getTagValue(event, 'screenshotsUrls') || [],
tags: getTagValue(event, 'tags') || [],
+ LTags: (getTagValues(event, 'L') || []).map((t) =>
+ t.replace('com.degmods:', '')
+ ),
+ lTags: (getTagValues(event, 'l') || []).map((t) =>
+ t.replace('com.degmods:', '')
+ ),
downloadUrls: (getTagValue(event, 'downloadUrls') || []).map((item) =>
JSON.parse(item)
)
@@ -124,6 +130,8 @@ export const initializeFormState = (
originalAuthor: existingModData?.originalAuthor || undefined,
screenshotsUrls: existingModData?.screenshotsUrls || [''],
tags: existingModData?.tags.join(',') || '',
+ lTags: existingModData?.lTags || [],
+ LTags: existingModData?.LTags || [],
downloadUrls: existingModData?.downloadUrls || [
{
url: '',
diff --git a/src/utils/sessionStorage.ts b/src/utils/sessionStorage.ts
new file mode 100644
index 0000000..e40b0e9
--- /dev/null
+++ b/src/utils/sessionStorage.ts
@@ -0,0 +1,32 @@
+export function getSessionStorageItem(key: string, defaultValue: T): string {
+ try {
+ const data = window.sessionStorage.getItem(key)
+ if (data === null) return JSON.stringify(defaultValue)
+ return data
+ } catch (err) {
+ console.error(`Error while fetching session storage value: `, err)
+ return JSON.stringify(defaultValue)
+ }
+}
+
+export function setSessionStorageItem(key: string, value: string) {
+ try {
+ window.sessionStorage.setItem(key, value)
+ dispatchSessionStorageEvent(key, value)
+ } catch (err) {
+ console.error(`Error while saving session storage value: `, err)
+ }
+}
+
+export function removeSessionStorageItem(key: string) {
+ try {
+ window.sessionStorage.removeItem(key)
+ dispatchSessionStorageEvent(key, null)
+ } catch (err) {
+ console.error(`Error while deleting session storage value: `, err)
+ }
+}
+
+function dispatchSessionStorageEvent(key: string, newValue: string | null) {
+ window.dispatchEvent(new StorageEvent('sessionStorage', { key, newValue }))
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 4658496..bb740e5 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -156,3 +156,7 @@ export const parseFormData = (formData: FormData) => {
return result
}
+
+export const capitalizeEachWord = (str: string): string => {
+ return str.replace(/\b\w/g, (char) => char.toUpperCase())
+}